/* ═══════════════════════════════════════════
   Woo Product Grid v2 — style.css
   Matches screenshot: light grey cards,
   decorative wave image bg, blue titles,
   green CTA buttons, teal category labels
═══════════════════════════════════════════ */

/* ── CSS variable defaults (overridden by PHP) ── */
:root {
    --wpg-card-bg:             #f0f4f8;
    --wpg-card-radius:         12px;
    --wpg-card-shadow:         0 2px 12px rgba(0,0,0,.10);
    --wpg-img-bg-top:          #1565c0;
    --wpg-img-bg-bottom:       #e3eaf5;
    --wpg-cat-color:           #6c8ebf;
    --wpg-cat-size:            11px;
    --wpg-title-color:         #1565c0;
    --wpg-title-size:          16px;
    --wpg-price-color:         #1a7a3c;
    --wpg-price-old-color:     #aaaaaa;
    --wpg-price-size:          17px;
    --wpg-btn-bg:              #4caf50;
    --wpg-btn-hover:           #388e3c;
    --wpg-btn-text:            #ffffff;
    --wpg-btn-radius:          4px;
    --wpg-btn-size:            13px;
    --wpg-filter-bg:           #1565c0;
    --wpg-filter-text:         #ffffff;
    --wpg-filter-inactive-bg:  #e8edf5;
    --wpg-filter-inactive-txt: #555555;
    --wpg-filter-radius:       4px;
    --wpg-cols:                4;
    --wpg-gap:                 20px;
    --wpg-hover-lift:          -6px;
}

/* ── Section wrapper ── */
.wpg-section {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 32px 0 40px;
    box-sizing: border-box;
}

/* ── Section title ── */
.wpg-section-title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: #1a2a4a;
    margin: 0 0 24px;
    letter-spacing: -.02em;
}

/* ════════════════════════════════════════════
   FILTER TABS  (matches screenshot style)
════════════════════════════════════════════ */
.wpg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.wpg-ftab {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border: none;
    border-radius: var(--wpg-filter-radius);
    background: var(--wpg-filter-inactive-bg);
    color: var(--wpg-filter-inactive-txt);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    line-height: 1;
}
.wpg-ftab:hover {
    background: var(--wpg-filter-bg);
    color: var(--wpg-filter-text);
    transform: translateY(-1px);
}
.wpg-ftab.active {
    background: var(--wpg-filter-bg);
    color: var(--wpg-filter-text);
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}

/* ════════════════════════════════════════════
   GRID
════════════════════════════════════════════ */
.wpg-grid {
    display: grid;
    grid-template-columns: repeat(var(--wpg-cols), minmax(0, 1fr));
    gap: var(--wpg-gap);
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    .wpg-grid { grid-template-columns: repeat(min(var(--wpg-cols), 3), minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .wpg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .wpg-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   PRODUCT CARD  — exactly like screenshot
════════════════════════════════════════════ */
.wpg-card {
    background: var(--wpg-card-bg);
    border-radius: var(--wpg-card-radius);
    box-shadow: var(--wpg-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .28s ease, box-shadow .28s ease;
}
.wpg-card:hover {
    transform: translateY(var(--wpg-hover-lift));
    box-shadow: 0 10px 32px rgba(0,0,0,.16);
}

/* Filter animation */
.wpg-card.is-hidden {
    display: none !important;
}
.wpg-card-new {
    animation: wpgIn .35s ease both;
}
@keyframes wpgIn {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Image area — decorative wave background ── */
.wpg-card-img {
    display: block;
    position: relative;
    overflow: hidden;
    /* Decorative layered background matching screenshot */
    background:
        /* wave SVG top-left */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath d='M0 0 Q100 60 200 30 Q300 0 400 50 L400 0 Z' fill='%231565c0' opacity='0.85'/%3E%3C/svg%3E") top left / 100% auto no-repeat,
        /* dot grid */
        radial-gradient(circle, rgba(255,255,255,.25) 1px, transparent 1px),
        /* base gradient */
        linear-gradient(160deg, var(--wpg-img-bg-top) 0%, var(--wpg-img-bg-bottom) 100%);
    background-size: 100% auto, 18px 18px, cover;
    aspect-ratio: 4 / 3;
    text-decoration: none;
}

.wpg-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* contain = logo/product shows fully, like screenshot */
    padding: 16px;
    display: block;
    box-sizing: border-box;
    transition: transform .4s ease;
}
.wpg-card:hover .wpg-card-img img {
    transform: scale(1.05);
}

/* Sale badge */
.wpg-sale-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 3px 10px;
    border-radius: 3px;
    z-index: 2;
    text-transform: uppercase;
}

/* ── Card body ── */
.wpg-card-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Category label */
.wpg-cat-label {
    font-size: var(--wpg-cat-size);
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--wpg-cat-color);
    text-transform: uppercase;
    line-height: 1;
}

/* Product title */
.wpg-prod-title {
    margin: 0;
    font-size: var(--wpg-title-size);
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wpg-prod-title a {
    color: var(--wpg-title-color);
    text-decoration: none;
    transition: color .2s;
}
.wpg-prod-title a:hover {
    text-decoration: underline;
}

/* Rating */
.wpg-rating { display:flex; align-items:center; gap:4px; font-size:.8rem; }
.wpg-stars  { display:flex; }
.s-full  { color:#f59e0b; }
.s-half  { color:#f59e0b; opacity:.55; }
.s-empty { color:#d1d5db; }
.wpg-rcount { color:#9ca3af; font-size:.75rem; }

/* Price row */
.wpg-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}
.wpg-price-new {
    font-size: var(--wpg-price-size);
    font-weight: 800;
    color: var(--wpg-price-color);
    line-height: 1;
}
.wpg-price-old {
    font-size: calc(var(--wpg-price-size) - 4px);
    color: var(--wpg-price-old-color);
    text-decoration: line-through;
    font-weight: 500;
}

/* Button row */
.wpg-btn-wrap {
    margin-top: auto;
    padding-top: 10px;
}

.wpg-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--wpg-btn-radius);
    font-size: var(--wpg-btn-size);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.wpg-btn-cart {
    background: var(--wpg-btn-bg);
    color: var(--wpg-btn-text);
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.wpg-btn-cart:hover {
    background: var(--wpg-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0,0,0,.22);
    color: var(--wpg-btn-text);
    text-decoration: none;
}
.wpg-btn-cart.added {
    background: #2e7d32;
}
.wpg-btn-oos {
    background: #e0e0e0;
    color: #9e9e9e;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════
   LOAD MORE
════════════════════════════════════════════ */
.wpg-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}
.wpg-loadmore {
    padding: 12px 44px;
    background: transparent;
    color: #1a2a4a;
    border: 2px solid #1a2a4a;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .22s ease;
}
.wpg-loadmore:hover {
    background: #1a2a4a;
    color: #fff;
    transform: translateY(-2px);
}
.wpg-loadmore.loading {
    opacity: .55;
    pointer-events: none;
}

/* ── Empty state ── */
.wpg-empty {
    text-align: center;
    padding: 50px 20px;
    color: #9ca3af;
    font-size: 1.05rem;
    grid-column: 1 / -1;
}