/* ==========================================================================
   FEWSET — PRODUCT CARDS (single source of truth, no page builder)
   One card structure everywhere — shop loop, category archives, rails:

   li.product
     ├── .pmwProductId / badges (rails)
     ├── a.woocommerce-LoopProduct-link
     │     ├── .product-image-box   (img + hover layer + dots chip + heart)
     │     └── .fewset-card-meta      (title, price)
     └── .wvs-archive-variations-wrapper (hidden — feeds the modal)
   ========================================================================== */

:root {
    /* ---- FEWSET spacing system: one knob per element ---- */
    --fewset-loop-gap: 5px;           /* shop/archive grid gap (columns) */
    --fewset-loop-row-gap: 28px;      /* vertical space between product rows —
                                       the meta (title/price/stars) needs air
                                       before the next row's photo */
    --fewset-rail-gap: 5px;           /* gap between rail cards */
    --fewset-rail-inset: 20px;        /* rail distance from the screen edge */
    --fewset-shop-inset: 20px;        /* shop/archive grid distance from the screen edge */
    --fewset-content-inset: 24px;            /* regular page content side padding (desktop) */
    --fewset-content-inset-mobile: 16px;     /* regular page content side padding (mobile) */
    --fewset-shop-inset: 20px;        /* shop/category grid distance from the screen edge */
    --fewset-card-meta-top: 6px;      /* image → title spacing */
    --fewset-card-meta-x: 8px;        /* card text side padding */
    --fewset-card-price-gap: 1px;     /* title → price spacing */
}
@media (max-width: 768px) {
    :root {
        --fewset-loop-gap: 5px;   /* 5px between products on phones */
        --fewset-loop-row-gap: 26px;
        --fewset-rail-gap: 5px;
        --fewset-rail-inset: 10px;
        --fewset-shop-inset: 0px;    /* container --fewset-edge (5px) IS the phone gap */
        --fewset-shop-inset: 0px;    /* container --fewset-edge (5px) IS the phone gap */
        --fewset-card-meta-top: 5px;
        --fewset-card-meta-x: 6px;
        --fewset-card-price-gap: 0px;
    }
}

/* Nothing horizontal may pan the page (mobile hold-drag bug) */
html, body { overflow-x: clip; }
.fewset-rail, ul.products { max-width: 100%; }

/* ----------------------------------------------------------------------
   GLOBAL GAP FIX — GeneratePress settings were boxing the content:
   .grid-container carries a max-width, and the "separate containers"
   layout adds margins + padding around .site-main / .inside-article.
   On the home page and catalog pages the canvas goes edge-to-edge;
   every FEWSET element then applies its OWN inset token.
---------------------------------------------------------------------- */
body.home .grid-container,
body.woocommerce-page .grid-container,
body.post-type-archive-product .grid-container,
body.tax-product_cat .grid-container { max-width: 100% !important; }

body.home .site-main,
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.woocommerce-page.archive .site-main { margin: 0 !important; }

body.home .inside-article,
body.post-type-archive-product .inside-article,
body.tax-product_cat .inside-article { padding-left: 0 !important; padding-right: 0 !important; }

body.home .content-area,
body.post-type-archive-product .content-area,
body.tax-product_cat .content-area,
body.woocommerce-page.archive .content-area { padding-left: 0 !important; padding-right: 0 !important; }

/* Shop/category catalog: its own screen-edge inset.
   The inset lives on OUR archive wrapper — a theme-rendered element no
   plugin or parent-theme stylesheet ever touches — and #main is zeroed
   explicitly so there is exactly one source of horizontal spacing. */
body.post-type-archive-product #primary #main,
body.tax-product_cat #primary #main,
body.woocommerce-page.archive #primary #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.post-type-archive-product .woocommerce-archive-wrapper,
body.tax-product_cat .woocommerce-archive-wrapper,
body.woocommerce-page.archive .woocommerce-archive-wrapper {
    padding-left: var(--fewset-shop-inset, 20px) !important;
    padding-right: var(--fewset-shop-inset, 20px) !important;
    box-sizing: border-box;
}

/* ---------- Grid (theme-owned; rails use their own flex track) ---------- */

ul.products:not(.kr-track) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--fewset-loop-gap) !important;
    row-gap: var(--fewset-loop-row-gap, 30px) !important;
    /* The canvas is full-width on catalog pages and .site-main carries
       --fewset-shop-inset — the grid just fills it. No vw breakout (100vw
       includes the scrollbar and overhangs the right edge). */
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--spacing-8, 2.5rem) !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box;
}
ul.products:not(.kr-track)::before,
ul.products:not(.kr-track)::after { content: none !important; display: none !important; }

@media (max-width: 1199px) { ul.products:not(.kr-track) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { ul.products:not(.kr-track) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { ul.products:not(.kr-track) { grid-template-columns: minmax(0, 1fr); } }

ul.products li.product { min-width: 0; }
ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    background: #fff;
    list-style: none !important;
}
/* L6 — skip layout/paint for off-screen grid cards (long shop pages /
   infinite scroll). Scoped to the shop GRID only; rails (.kr-track) are
   horizontal and must stay fully painted. contain-intrinsic-size keeps
   the scrollbar honest so nothing jumps as cards realize. The first row
   is exempt so the LCP image is never deferred. */
@supports (content-visibility: auto) {
    ul.products:not(.kr-track) > li.product {
        content-visibility: auto;
        contain-intrinsic-size: auto 420px;
    }
    ul.products:not(.kr-track) > li.product:nth-child(-n+4) {
        content-visibility: visible;
    }
}

/* the hover frame hugs the PHOTO exactly — no gap (drawn inside the edge) */
ul.products li.product .product-image-box {
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: outline-color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
    ul.products li.product:hover .product-image-box { outline-color: rgba(26, 26, 26, .28); }
}

/* ---------- Link wrapper ---------- */

ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
    position: static !important;
}

/* ---------- Image ---------- */

ul.products li.product .product-image-box {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0;
    background: var(--surface-dim, #f0f0ed);
}
ul.products li.product .product-image-box img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block !important;
    border-radius: 0;
    transform: none !important;
    box-shadow: none !important;
}
/* legacy wrap (if present) keeps filling the box */
ul.products li.product .product-image-box .fewset-img-wrap {
    position: absolute !important;
    inset: 0;
}

/* Hover image — a layered 2nd photo that CROSSFADES in (no src swap) */
ul.products li.product .product-image-box .fewset-hover-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
ul.products li.product .product-image-box .fewset-hover-img.is-visible { opacity: 1; }

/* The image area is the modal trigger */
ul.products li.product .product-image-box { cursor: pointer; }

/* ---------- Meta: title row (title + heart) and price ---------- */

ul.products li.product .fewset-card-meta {
    padding: var(--fewset-card-meta-top) var(--fewset-card-meta-x) 0;
}
ul.products li.product .woocommerce-loop-product__title {
    display: block;
    min-width: 0;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: .35px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1a1a1a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Wishlist heart — bare icon on the photo, top-right (no box) */
ul.products li.product .product-image-box .fewset-wl-heart {
    position: absolute !important;
    top: 8px;
    right: 8px;
    left: auto !important;
    bottom: auto !important;
    z-index: 4;
    /* Frosted-glass plate — mirrors the CURRENT deriniai button (.sis-dg-add-btn:
       rgba(20,20,20,.3) + blur(8px) saturate(1.35) + white hairline) so the two
       top corners read as a matched pair. (Was a white pill matched to the old
       white "+"; the button is dark glass now, so the heart follows.) */
    width: 40px !important;
    height: 40px !important;
    display: grid;
    place-items: center;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, .40) !important;
    border-radius: 50% !important;
    background: rgba(20, 20, 20, .30) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.35) !important;
    backdrop-filter: blur(8px) saturate(1.35) !important;
    box-shadow: none !important;
    color: #fff;
    cursor: pointer;
    transition: opacity .16s ease, background .16s ease;
}
/* Hover: the plate darkens (like the deriniai button) plus a one-shot icon
   WIGGLE — the box never zooms or grows a halo. */
ul.products li.product .product-image-box .fewset-wl-heart:hover { transform: none; background: rgba(20, 20, 20, .48) !important; }
/* fallback for browsers without backdrop-filter: a more opaque dark plate */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    ul.products li.product .product-image-box .fewset-wl-heart { background: rgba(20, 20, 20, .62) !important; }
}
ul.products li.product .product-image-box .fewset-wl-heart:hover svg { animation: fewsetWlWiggle .45s ease; }
ul.products li.product .product-image-box .fewset-wl-heart svg { width: 18px; height: 18px; }
@keyframes fewsetWlWiggle {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(-7deg); }
    60%  { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    ul.products li.product .product-image-box .fewset-wl-heart:hover svg { animation: none; }
}
ul.products li.product .product-image-box .fewset-wl-heart.is-active svg { fill: #fff; }

ul.products li.product .price {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: var(--fewset-card-price-gap) 0 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: .5px !important;
}
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount { color: #1a1a1a !important; }
ul.products li.product .price del { opacity: .4 !important; font-size: 14px !important; font-weight: 400 !important; }
ul.products li.product .price ins { color: #D0021B !important; font-weight: 600 !important; text-decoration: none !important; }
ul.products li.product .price:has(del) .woocommerce-Price-amount:not(del .woocommerce-Price-amount) { color: #D0021B !important; }
ul.products li.product .price ins,
ul.products li.product .price del { display: inline-flex !important; }

/* ---------- Badges (rails) ---------- */

ul.products li.product .product-badges {
    position: absolute;
    bottom: 12px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 4;
    pointer-events: none;
}
ul.products li.product .product-badges span {
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    color: #1a1a1a;
    background: rgba(255, 255, 255, .94);
    border-radius: 0 2px 2px 0;
}

/* ---------- Colour dots — glass chip on the image (bottom-right) ------- */

/* soft bottom shadow so dots / sizes stay legible on any photo (cheap gradient) */
ul.products li.product .product-image-box::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(to top, rgba(0,0,0,.40), rgba(0,0,0,.10) 46%, rgba(0,0,0,0));
    pointer-events: none;
    z-index: 2;
}

.fewset-color-dots {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: inline-flex;          /* width follows the visible layer */
    align-items: center;
    padding: 0;
    pointer-events: none;
    background: none;
    border: 0;
    box-shadow: none;
    line-height: 1;
    max-width: calc(100% - 20px);
    overflow: hidden;
}
.fewset-color-dots .kcd-colors,
.fewset-color-dots .kcd-sizes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}
.fewset-color-dots .kcd-colors { max-width: 260px; opacity: 1; }
.fewset-color-dots .kcd-sizes  { max-width: 0;     opacity: 0; }

/* labels inside the chip */
.fewset-color-dots .kcd-lbl {
    text-decoration: none;
    font-style: normal;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
    margin-right: 4px;
}

/* sizes as little boxes */
.fewset-color-dots .kcd-sizes b {
    font-weight: 600;
    font-size: 8.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    padding: 3px 4px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(0, 0, 0, .12);
    border-radius: 1px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
}

/* hover: colours collapse out, sizes expand in — chip width animates with them */
@media (hover: hover) and (pointer: fine) {
    ul.products li.product:hover .fewset-color-dots .kcd-colors:not(:only-child) { max-width: 0; opacity: 0; }
    ul.products li.product:hover .fewset-color-dots .kcd-sizes { max-width: 320px; opacity: 1; }
}
.fewset-color-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c, #ccc);
    display: inline-block;
    flex: 0 0 auto;
}
.fewset-color-dots em {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
    margin-left: 3px;
}

/* ---------- Hidden machinery ---------- */

/* WVS swatch markup feeds the "+" popup but never shows on cards */
ul.products li.product .wvs-archive-variations-wrapper { display: none !important; }

/* No on-card add-to-cart button anywhere — the "+" handles cart */
ul.products li.product a.add_to_cart_button,
ul.products li.product .added_to_cart,
ul.products li.product .button.product_type_variable,
ul.products li.product .onsale { display: none !important; }

/* ---------- No hover effects — photo swap is the only behaviour -------- */

ul.products li.product:hover,
ul.products li.product.is-hover { transform: none !important; box-shadow: none !important; }
ul.products li.product:hover .product-image-box,
ul.products li.product.is-hover .product-image-box { box-shadow: none !important; }
ul.products li.product:hover .product-image-box img,
ul.products li.product.is-hover .product-image-box img { transform: none !important; opacity: 1 !important; }

@media (max-width: 768px) {
    ul.products li.product .woocommerce-loop-product__title { font-size: 10px !important; }
    ul.products li.product .price { font-size: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
    ul.products li.product, ul.products li.product * { transition: none !important; animation: none !important; }
}


/* ---- Mobile pass (≤768px): card elements scale down --------------------- */
@media (max-width: 768px) {
    .fewset-color-dots { right: 6px; bottom: 6px; }
    .fewset-color-dots i { width: 12px; height: 12px; }
    .fewset-color-dots .kcd-sizes b { font-size: 8px; padding: 2px 3px; }
    ul.products li.product .product-image-box .fewset-wl-heart svg { width: 17px; height: 17px; }
}

/* ≤600px: the deriniai plugin shrinks .sis-dg-add-btn to 28px here, so match it
   exactly — otherwise the two top-corner buttons are different sizes on phones. */
@media (max-width: 600px) {
    ul.products li.product .product-image-box .fewset-wl-heart {
        width: 28px !important;
        height: 28px !important;
    }
    ul.products li.product .product-image-box .fewset-wl-heart svg { width: 14px; height: 14px; }
}


/* A missing/broken product image must look like a clean grey tile —
   never show the alt text ("Placeholder" / its translation) in the card */
ul.products li.product .product-image-box img {
    color: transparent;
    font-size: 0;
    line-height: 0;
}


/* An image-less card (private/draft products, broken placeholders) renders
   as a clearly visible grey tile so the grid never looks broken */
ul.products li.product .product-image-box { background: #ECECE8; }


/* ── Badges parked (v6.13.0): removed everywhere until redesigned ── */
.product-badges,
li.product .new-badge,
.fewset-rail .product-badges { display: none !important; }

/* =====================================================================
   PRODUCT BADGES (Ženkliukai) — corner labels inside the image box.
   Bottom-left keeps clear of the "+" (top-left), heart (top-right) and
   the colour-dots chip (bottom-right).
   ===================================================================== */
.product-image-box .fewset-badges {
    position: absolute; left: 0; bottom: 8px; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    pointer-events: none;
}
.fewset-badge {
    display: inline-block; padding: 4px 8px; border-radius: 0;
    font-family: var(--font-primary, 'Poppins', sans-serif); font-size: 9px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    white-space: nowrap; color: var(--badge-fg, #fff); background: var(--badge-bg, #1A1A1A);
}


/* ==========================================================================
   GIFT BADGE (inc/product-gifts.php + badges.php) — the "Dovana" chip rides
   the normal badge stack; the present glyph leads the label.
   ========================================================================== */

.fewset-badge--gift {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.fewset-badge--gift svg { display: block; flex: 0 0 auto; }


/* ==========================================================================
   CARD RATING (v7.42) — stars live INSIDE .fewset-card-meta now (the default
   loop rating printed after our card link and floated around unstyled)
   ========================================================================== */

/* price + stars on ONE line — a rating never adds row height */
.fewset-card-meta .fewset-card-priceline {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.fewset-card-meta .fewset-card-priceline .price { line-height: 1; }
.fewset-card-meta .fewset-card-rating {
    display: inline-flex; align-items: center;
    flex: 0 0 auto;
}
/* WooCommerce's own `.woocommerce ul.products li.product .star-rating` rule
   (specificity 0,3,2) outranked ours (0,3,0) — our size never applied. The
   !important flags win regardless of specificity so we actually control it.
   Glyphs come from the "WooCommerce" icon font, so keep that family. */
.fewset-card-meta .fewset-card-rating .star-rating {
    font-size: .65em !important;
    font-family: WooCommerce !important;
    line-height: 1 !important;
    height: 1em;
    margin: 0;
    color: #1A1A1A;
}
@media (max-width: 768px) {
    .fewset-card-meta .fewset-card-rating .star-rating { font-size: .6em !important; }
}