/* =====================================================================
   FEWSET — Single product page (body.fewset-sp). Adapts the quick-shop MODAL
   design onto the real WooCommerce page.
   NOTE: every variation/swatch rule is scoped to `.variations_form` so it
   can NEVER touch the related/recent rail cards (which carry their own
   hidden .color-variable-items-wrapper markup inside .wvs-archive-*).
   ===================================================================== */

/* ── FULL-WIDTH CANVAS ───────────────────────────────────────────────── */
.fewset-sp .grid-container { max-width: 100% !important; }
.fewset-sp .site-main { margin: 0 !important; }
.fewset-sp .inside-article { padding-left: 0 !important; padding-right: 0 !important; }
.fewset-sp .content-area { padding-left: 0 !important; padding-right: 0 !important; }
.fewset-sp #primary #main { padding: 0 !important; }
.fewset-sp .entry-content { margin: 0 !important; padding: 0 !important; }

/* ── HIDE WHAT THE MODAL NEVER HAD ───────────────────────────────────── */
.fewset-sp .featured-image,
.fewset-sp .page-header-image-single { display: none !important; }
.fewset-sp .entry-content > .woocommerce-breadcrumb { display: none !important; }
.fewset-sp .woocommerce-product-gallery__trigger,
.fewset-sp .woocommerce-tabs.wc-tabs-wrapper,
.fewset-sp .products.related,
.fewset-sp .products.upsells { display: none !important; }
/* "Išvalyti" reset link removed entirely */
.fewset-sp .reset_variations { display: none !important; }

.fewset-sp div.product { margin: 0 !important; }
.fewset-sp .summary.entry-summary {
    width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important;
}
.fewset-sp .woocommerce-product-gallery { opacity: 1 !important; }

/* ── DESKTOP: photo mosaic + sticky info column ──────────────────────── */
@media (min-width: 769px) {
    .fewset-sp .fewset-qs-main-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(380px, 34%, 560px);
        align-items: start;
        column-gap: clamp(28px, 3vw, 56px);
        /* FLUSH-LEFT (user: "left side picture to the edge"): the gallery runs to
           the page's left edge; the sticky info sits on the right with a 56px
           gutter. Full-width (no max-width cap) → no right-side void. The
           breadcrumb keeps its own gutter (only the picture goes to the edge). */
        margin: 0;
        padding: 0 56px 0 0;
    }
    .fewset-sp .woocommerce-product-gallery {
        grid-column: 1; width: 100% !important; max-width: 100% !important;
        float: none !important; margin: 0 !important; padding: 16px 8px 16px 0;
    }
    .fewset-sp .woocommerce-product-gallery__wrapper {
        display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px; transform: none !important; width: 100% !important; margin: 0 !important;
    }
    .fewset-sp .woocommerce-product-gallery__image {
        width: auto !important; margin: 0 !important; opacity: 1 !important;
        float: none !important; position: relative !important; left: auto !important;
        grid-column: span 2;                 /* default: small — three per row */
    }
    /* First two images are big (half-width each) on the top row; the rest are
       smaller (three per row) below — a magazine-style mosaic, not a flat grid. */
    .fewset-sp .woocommerce-product-gallery__image:nth-child(1),
    .fewset-sp .woocommerce-product-gallery__image:nth-child(2) { grid-column: span 3; }
    .fewset-sp .woocommerce-product-gallery__image:only-child { grid-column: 1 / -1; }
    .fewset-sp .woocommerce-product-gallery__image a,
    .fewset-sp .woocommerce-product-gallery__image img {
        display: block; width: 100% !important; height: auto; aspect-ratio: 3 / 4;
        object-fit: cover; background: var(--surface-dim); cursor: zoom-in;
    }
    .fewset-sp .flex-control-nav, .fewset-sp .flex-direction-nav { display: none !important; }

    .fewset-sp .fewset-qs-side {
        grid-column: 2; min-width: 0; position: sticky; top: 20px; align-self: start;
        padding: 2px 0 24px 0;   /* column-gap handles the left inset now */
    }
    .fewset-sp .fewset-qs-info { padding: 14px 0 6px; }
    /* related/recent rails align to the SAME global container as the main row */
    .fewset-sp .fewset-sp-related {
        max-width: 1920px; margin-inline: auto;
        padding-left: 56px; padding-right: 0;
    }
    /* tighten the gap beneath the add-to-cart cluster (theme default was 30px) */
    body.fewset-sp div.product form.cart { margin-bottom: 16px; }

    /* price → reviews: the pricebar carries a 14px bottom pad (shop.css, shared
       with the quick-shop) and the reviews trigger sat ~22px below the price.
       Trim both so the stars hug the price. */
    .fewset-sp .fewset-qs-side .fewset-qs-pricebar { padding-bottom: 2px; }
    .fewset-sp .fewset-pr-trigger { padding-top: 4px; padding-bottom: 4px; margin-top: 0; }
}

/* ── MOBILE: swipe gallery + REORDERED info ──────────────────────────── */
@media (max-width: 768px) {
    /* GeneratePress puts 30px around the article/content on mobile — kill it
       so the gallery and info run edge-to-edge like the modal */
    .fewset-sp .inside-article,
    .fewset-sp.separate-containers .inside-article,
    .fewset-sp .site-content,
    .fewset-sp .one-container .site-content,
    .fewset-sp .inside-page-header { padding: 0 !important; }

    .fewset-sp .fewset-qs-main-row { display: block; position: relative; }
    .fewset-sp .woocommerce-product-gallery { width: 100% !important; margin: 0 !important; padding: 0; }
    .fewset-sp .woocommerce-product-gallery__wrapper {
        display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
        transform: none !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        width: 100% !important; margin: 0 !important;
    }
    .fewset-sp .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }
    .fewset-sp .woocommerce-product-gallery__image {
        flex: 0 0 100%; scroll-snap-align: center; margin: 0 !important; width: 100% !important;
        opacity: 1 !important; position: relative !important; left: auto !important;
    }
    .fewset-sp .woocommerce-product-gallery__image a,
    .fewset-sp .woocommerce-product-gallery__image img {
        display: block; width: 100% !important; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
    }
    .fewset-sp .flex-control-nav, .fewset-sp .flex-direction-nav { display: none !important; }

    /* the order items are children of .summary — make IT the flex container */
    .fewset-sp .fewset-qs-side { display: block; padding: 0; }
    .fewset-sp .summary.entry-summary { display: flex !important; flex-direction: column; }
    /* 10px site gutter on mobile; the rails keep their LEFT gutter but run to
       the right edge (the scroll track bleeds off-screen). */
    .fewset-sp .fewset-qs-pricebar { order: 0; padding: 16px 10px 0; }
    .fewset-sp form.cart         { order: 1; padding: 0 10px; margin: 8px 0 14px; }
    /* Tighten the form → shipping-USP gap (was ~46px: a WC `form.cart`
       margin-bottom override + the shipslot's 16px margin-top). */
    body.fewset-sp div.product form.cart { margin-bottom: 8px; }
    .fewset-sp .fewset-qs-shipslot { order: 2; padding: 0 10px; margin-top: 4px; }
    /* Back-in-stock trigger is a bare .summary child with NO order, so it
       defaulted to order:0 and floated ABOVE the size form on mobile. Pin it to
       order:2 (its priority-32 DOM slot keeps it just before the shipslot) so it
       sits BELOW the size variations. The `body.` prefix lifts specificity to
       0,2,1 so width:auto BEATS the base `.fewset-sp .fewset-bis-trigger{width:100%}`
       defined LATER in this file — without it width:100% won, and 100% + the 10px
       side margins overflowed the button ~10px past the free-shipping panel's
       right edge (the "width/margins mismatch"). width:auto + align-items:stretch
       + 10px margins now insets it flush with the shipslot panel. */
    body.fewset-sp .fewset-bis-trigger { order: 2; width: auto; margin: 6px 10px 0; }
    .fewset-sp .fewset-qs-info     { order: 3; padding: 18px 10px 10px; }
    .fewset-sp .fewset-pdp-extras  { order: 4; padding: 0 10px 16px; }
    .fewset-sp .fewset-sp-related  { padding: 0 0 0 10px; }
    /* The wrapper's 10px is the rail's single left gutter. The rail's own parts
       each add their NATIVE 10px on top, which double-padded them:
         · .kr-head (heading)  → 10 + 10 = 20px  ✗   → zero it → 10px
         · .kr-viewport (cards)→ 10 + 10 = 20px  ✗   → zero it → 10px (track's
           5px hover-outline pad is offset by its own -5px, so cards land at 10) */
    .fewset-sp .fewset-sp-related .kr-head     { padding-left: 0; }
    .fewset-sp .fewset-sp-related .kr-viewport { padding-left: 0; }
}

/* ── NAME / PRICE / BREADCRUMB ───────────────────────────────────────── */
.fewset-sp .fewset-qs-name {
    font-size: var(--h3); font-weight: 700; line-height: 1.12;
    letter-spacing: -0.01em; margin: 0 0 10px; word-break: normal; overflow-wrap: break-word; hyphens: none;
}
.fewset-sp .fewset-qs-price { font-size: var(--h5); }

/* PRICE BLOCK — matches the reference: prominent current price (red when
   discounted) + "su PVM"; original "Pradinė kaina"; Omnibus lowest price. */
.fewset-sp .fewset-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
/* Price → --h5 (18px): a clear step BELOW the --h3 (30px) title so the two no
   longer read as the same size. Mobile sticky bar overrides it to --text-lg. */
.fewset-sp .fewset-price__now { font-size: var(--h5); font-weight: 700; color: var(--on-surface); line-height: 1.1; }
.fewset-sp .fewset-price__now.is-sale { color: #B3261E; }
.fewset-sp .fewset-price__now del { color: color-mix(in srgb, var(--on-surface) 40%, transparent); font-weight: 500; font-size: .7em; margin-right: 6px; }
.fewset-sp .fewset-price__now ins { text-decoration: none; }
.fewset-sp .fewset-price__vat {
    font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--label-md); font-weight: 600;
    letter-spacing: .03em; color: color-mix(in srgb, var(--on-surface) 50%, transparent);
}
/* struck-through original, INLINE next to the sale price (no label) */
.fewset-sp .fewset-price__was {
    margin: 0; font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--text-base);
    letter-spacing: .01em;
}
.fewset-sp .fewset-price__was span {
    text-decoration: line-through;
    color: color-mix(in srgb, var(--on-surface) 42%, transparent);
}
.fewset-sp .fewset-price__lowest {
    margin: 3px 0 0; font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--label-lg);
    color: color-mix(in srgb, var(--on-surface) 45%, transparent); letter-spacing: .01em;
}
.fewset-sp .fewset-price__lowest span { color: color-mix(in srgb, var(--on-surface) 60%, transparent); }

/* BADGES over the product-page gallery — top-RIGHT, flush, so they never
   collide with the "Atgal" back button (top-left). */
.fewset-sp .woocommerce-product-gallery .fewset-badges.fewset-sp-badges {
    position: absolute; top: 12px; right: 0; left: auto; bottom: auto; z-index: 5;
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
    pointer-events: none;
}
/* Our badges replace WooCommerce's default sale splash — hide any leftover. */
.fewset-sp .onsale,
.fewset-sp .woocommerce-product-gallery .onsale { display: none !important; }

/* The size the model wears is bolded in the model card line. */
.fewset-sp .fewset-pv-model__line b { font-weight: 700; color: var(--on-surface); }
.fewset-sp .fewset-pdp-crumb {
    font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--label-md); color: color-mix(in srgb, var(--on-surface) 50%, transparent);
    margin: 0 0 12px; line-height: 1.6;
}
.fewset-sp .fewset-pdp-crumb a { color: color-mix(in srgb, var(--on-surface) 50%, transparent); text-decoration: none; }
.fewset-sp .fewset-pdp-crumb a:hover { color: var(--on-surface); }
.fewset-sp .fewset-pdp-crumb .fewset-pdp-crumb__sep {
    display: inline-block; vertical-align: middle; margin: 0 5px; color: color-mix(in srgb, var(--on-surface) 30%, transparent);
}

/* =====================================================================
   CUSTOM VARIATION UI (.fewset-pv) — built by JS from the plugin's data.
   WVS's swatches and WC's stock/price block are hidden; we render our own.
   ===================================================================== */
.fewset-sp .variations_form.fewset-custom-vars .variations,
.fewset-sp .variations_form.fewset-custom-vars .woocommerce-variation.single_variation,
.fewset-sp .variations_form.fewset-custom-vars .reset_variations { display: none !important; }

/* fallback: if JS never builds our UI, reveal WVS's own swatches after 1.5s */
.fewset-sp .variations_form .variations { opacity: 0; animation: fewsetVarsReveal 0s linear 1.5s forwards; }
.fewset-sp .variations_form.fewset-custom-vars .variations { animation: none; }
@keyframes fewsetVarsReveal { to { opacity: 1; } }

.fewset-sp .fewset-pv { margin: 0 0 2px; }
.fewset-sp .fewset-pv-row { margin-bottom: 18px; }
.fewset-sp .fewset-pv-row--size { margin-bottom: 12px; }
.fewset-sp .fewset-pv-label {
    /* Match the "Aprašymas / Sudėtis ir detalės" accordion heads exactly
       (.fewset-pdp-acc__head in shop.css): --label-md (11px) · 600 · .1em · solid
       --on-surface — NOT the heavier 12px/700/45%-muted it used before. */
    font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--label-md); font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface); margin: 0 0 9px;
}
.fewset-sp .fewset-pv-name { font-size: var(--text-sm); font-weight: 600; color: color-mix(in srgb, var(--on-surface) 70%, transparent); text-transform: none; letter-spacing: 0.02em; }

/* COLOUR — photo tiles in a grid that fills the row width. A minimum tile
   size keeps them from cramming on the narrow desktop info column; equal
   columns keep every tile the same size on mobile and desktop. */
.fewset-sp .fewset-pv-colors {
    display: flex; flex-wrap: wrap; gap: 12px;
}
.fewset-sp .fewset-pv-color {
    width: 64px; padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    -webkit-tap-highlight-color: transparent;
}
.fewset-sp .fewset-pv-color__img {
    display: block; width: 64px; height: 64px;            /* 1:1 */
    background-repeat: no-repeat;
    background-size: var(--cs-zoom, 185%);                /* zoom into the garment */
    background-position: var(--cs-focus, 50% 28%);        /* category / per-product focal point */
    border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent);
    transition: border-color .15s ease, outline-color .15s ease;
}
.fewset-sp .fewset-pv-color:hover .fewset-pv-color__img { border-color: color-mix(in srgb, var(--on-surface) 50%, transparent); }
.fewset-sp .fewset-pv-color.is-selected .fewset-pv-color__img { border-color: var(--on-surface); outline: 1.5px solid var(--on-surface); outline-offset: -1.5px; }
.fewset-sp .fewset-pv-color.is-unavailable { opacity: .3; cursor: not-allowed; }
@media (max-width: 768px) {
    .fewset-sp .fewset-pv-colors { gap: 10px; }
    .fewset-sp .fewset-pv-color,
    .fewset-sp .fewset-pv-color__img { width: 60px; }
    .fewset-sp .fewset-pv-color__img { height: 60px; }
}

/* variation low-stock badge — sits inside the top badge stack, beneath NAUJIENA */
.fewset-sp .woocommerce-product-gallery__image { position: relative; }
.fewset-sp .fewset-sp-badges .fewset-pv-lowbadge[hidden] { display: none; }

/* SIZE — bordered buttons, black when selected */
.fewset-sp .fewset-pv-sizes { display: flex; flex-wrap: wrap; gap: 5px; }
.fewset-sp .fewset-pv-size {
    min-width: 44px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 13px; border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent); background: var(--surface); border-radius: 0; cursor: pointer;
    font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--label-lg); font-weight: 600; color: var(--on-surface); transition: all .15s;
}
.fewset-sp .fewset-pv-size:hover { border-color: var(--on-surface); }
.fewset-sp .fewset-pv-size.is-selected { background: var(--on-surface); color: var(--surface); border-color: var(--on-surface); }
.fewset-sp .fewset-pv-size.is-unavailable { opacity: .25; cursor: not-allowed; text-decoration: line-through; }

/* STOCK BAR — full-width, two rows: a colour-coded PRIMARY state line (dot +
   "Turime"/"Liko tik N"/"Nėra sandėlyje") and a muted LOCATION line that splits
   the stock into Parduotuvėje (shop) vs Sandėlyje (warehouse). One state colour
   (--st-col) drives the dot, the primary text and the tint. */
.fewset-sp .fewset-pv-stock {
    --st-col: #2f7d45;            /* in stock (green) */
    --st-dot: #3a8a4f;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    width: 100%; box-sizing: border-box; margin: 2px 0 12px; padding: 10px 14px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    background: color-mix(in srgb, var(--st-col) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--st-col) 24%, transparent);
}
.fewset-sp .fewset-pv-stock[hidden] { display: none; }
.fewset-sp .fewset-pv-stock.fewset-low-stock { --st-col: #B45309; --st-dot: #c9851a; }
.fewset-sp .fewset-pv-stock.out-of-stock   { --st-col: #c0392b; --st-dot: #c0392b; }

/* PRIMARY ROW — dot + state text */
.fewset-sp .fewset-pv-stock__primary {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--label-md); font-weight: 600; letter-spacing: .04em; line-height: 1; color: var(--st-col);
}
.fewset-sp .fewset-pv-stock__primary::before {
    content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--st-dot);
}
/* LOCATION ROW — muted, indented under the state text (6px dot + 8px gap) */
.fewset-sp .fewset-pv-stock__loc {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-left: 14px;
    font-size: 10px; font-weight: 500; letter-spacing: .02em; line-height: 1.2;
    color: color-mix(in srgb, var(--on-surface) 55%, transparent);
}
.fewset-sp .fewset-pv-stock__loc:empty { display: none; }
.fewset-sp .fewset-pv-stock__seg { display: inline-flex; align-items: center; gap: 5px; }
.fewset-sp .fewset-pv-stock__seg::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.fewset-sp .fewset-pv-stock__seg.is-shop::before    { background: var(--st-col); opacity: .85; }
.fewset-sp .fewset-pv-stock__seg.is-storage::before { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-surface) 45%, transparent); }
.fewset-sp .fewset-pv-stock__seg.is-both::before    { background: var(--st-col); opacity: .85; }   /* in shop AND warehouse */
.fewset-sp .fewset-pv-stock__seg b { font-weight: 700; color: var(--on-surface); }
/* the shop / both segment is a LINK to the shop-info popup (desktop bar) — the
   ⓘ badge signals it (no underline, matching the mobile strip). */
.fewset-sp .fewset-pv-stock__seg.is-shop, .fewset-sp .fewset-pv-stock__seg.is-both { cursor: pointer; color: var(--on-surface); }
.fewset-sp .fewset-pv-stock__i {
    flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
    border: 1.2px solid currentColor; display: inline-flex; align-items: center; justify-content: center;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700;
    font-size: 8px; line-height: 1; color: color-mix(in srgb, var(--on-surface) 55%, transparent);
}
.fewset-sp .fewset-pv-stock__seg.is-shop:hover .fewset-pv-stock__i,
.fewset-sp .fewset-pv-stock__seg.is-both:hover .fewset-pv-stock__i { color: var(--on-surface); }

/* MODEL ("Modelis") — a compact filled card with face thumbnail, under the size */
.fewset-sp .fewset-pv-model { margin: 16px 0 14px; background: var(--neutral-100); }   /* breathing room above the stock bar */
.fewset-sp .fewset-pv-model__head { display: flex; align-items: stretch; gap: 0; padding: 0; }
.fewset-sp .fewset-pv-model__face { flex: 0 0 auto; display: block; width: 33px; height: 44px; }
.fewset-sp .fewset-pv-model__face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 0; background: transparent; display: block; }
.fewset-sp .fewset-pv-model__ico { flex: 0 0 auto; color: color-mix(in srgb, var(--on-surface) 50%, transparent); display: inline-flex; }
.fewset-sp .fewset-pv-model__toggle {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
    padding: 0 14px 0 12px; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--font-primary, 'Poppins', sans-serif);
}
.fewset-sp .fewset-pv-model__txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.fewset-sp .fewset-pv-model__name { font-size: var(--label-md); font-weight: 700; color: var(--on-surface); letter-spacing: .02em; line-height: 1.25; }
.fewset-sp .fewset-pv-model__line { font-size: var(--label-md); color: color-mix(in srgb, var(--on-surface) 60%, transparent); letter-spacing: .01em; line-height: 1.25; }
.fewset-sp .fewset-pv-model__chev {
    flex: 0 0 auto; width: 7px; height: 7px; border-right: 1.5px solid color-mix(in srgb, var(--on-surface) 45%, transparent);
    border-bottom: 1.5px solid color-mix(in srgb, var(--on-surface) 45%, transparent); transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.fewset-sp .fewset-pv-model.is-open .fewset-pv-model__chev { transform: translateY(1px) rotate(225deg); }
.fewset-sp .fewset-pv-model__panel { padding: 4px 14px 16px; }
.fewset-sp .fewset-pv-model__panel[hidden] { display: none; }
.fewset-sp .fewset-pv-model__list { margin: 0; padding: 0; list-style: none; }
.fewset-sp .fewset-pv-model__list li {
    display: flex; align-items: baseline; gap: 12px; padding: 5px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent); font-size: var(--label-lg);
}
.fewset-sp .fewset-pv-model__list li:last-child { border-bottom: 0; }
.fewset-sp .fewset-pv-model__list span {
    font-size: var(--label-md); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--on-surface) 40%, transparent);
}
.fewset-sp .fewset-pv-model__list b { margin-left: auto; font-weight: 500; color: color-mix(in srgb, var(--on-surface) 80%, transparent); letter-spacing: .03em; }
.fewset-sp .fewset-pv-model__all {
    display: inline-block; margin-top: 10px; font-size: var(--label-md); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface);
    text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 35%, transparent); padding-bottom: 2px;
}
.fewset-sp .fewset-pv-model__all:hover { border-bottom-color: var(--on-surface); }

/* Size guide button inline with the DRABUŽIŲ DYDIS label — no grey hover */
.fewset-sp .fewset-pv-label--sg { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fewset-sp .fewset-pv-label--sg a,
.fewset-sp .fewset-pv-label--sg button {
    flex: 0 0 auto; margin: 0; padding: 0; white-space: nowrap;
    background: none !important; border: 0 !important; box-shadow: none !important;
}
.fewset-sp .fewset-pv-label--sg a:hover,
.fewset-sp .fewset-pv-label--sg button:hover,
.fewset-sp .fewset-pv-label--sg a:focus,
.fewset-sp .fewset-pv-label--sg button:focus {
    background: none !important; color: var(--on-surface) !important; box-shadow: none !important; outline: none;
}

/* =====================================================================
   ADD-TO-CART ROW → modal actions (scoped to the cart row; rails untouched)
   ===================================================================== */
.fewset-sp form.cart { display: block; margin: 6px 0 14px; }
.fewset-sp form.cart .quantity { display: none !important; }
.fewset-sp .single_variation_wrap { margin: 0; }
.fewset-sp .variations_form.fewset-custom-vars .single_variation_wrap { display: block !important; }
.fewset-sp .variations_form.fewset-custom-vars .woocommerce-variation-add-to-cart,
.fewset-sp .woocommerce-variation-add-to-cart { display: flex !important; align-items: stretch; gap: 10px; margin-top: 14px; }
.fewset-sp .sis-dg-cart-row-wrap { display: flex; align-items: stretch; gap: 10px; flex: 1 1 auto; margin: 0; }

/* .button bumps specificity to 0,3,0 so this beats WooCommerce's
   `.woocommerce button.button` (0,2,1) which otherwise wins font-size/padding/display. */
.fewset-sp .single_add_to_cart_button.button {
    flex: 1 1 auto; min-height: 52px; padding: 0 20px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--on-surface) !important; color: var(--surface) !important; border: 0 !important; border-radius: 0 !important;
    font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--label-md); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
    transition: background .15s ease; line-height: 1;
}
/* cart icon (the header bag) — masked so it follows the button text colour and
   survives WC's textContent updates; hidden until a variation is picked. */
.fewset-sp .single_add_to_cart_button::before {
    content: ''; flex: 0 0 auto; width: 18px; height: 18px; background-color: currentColor;
    -webkit-mask: url("../images/icon-cart.svg") center / contain no-repeat;
            mask: url("../images/icon-cart.svg") center / contain no-repeat;
}
.fewset-sp .single_add_to_cart_button.disabled::before,
.fewset-sp .single_add_to_cart_button:disabled::before,
.fewset-sp .single_add_to_cart_button.wc-variation-selection-needed::before { display: none; }
.fewset-sp .single_add_to_cart_button:hover { background: var(--primary-hover) !important; }
.fewset-sp .single_add_to_cart_button.disabled,
.fewset-sp .single_add_to_cart_button:disabled,
.fewset-sp .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: .35; cursor: not-allowed; background: var(--on-surface) !important;
}
/* the deriniai "+" ONLY inside the cart row (rail cards keep their own size) */
.fewset-sp .sis-dg-cart-row-wrap .sis-dg-add-btn {
    flex: 0 0 52px; width: 52px; height: 52px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent); background: var(--surface); color: var(--on-surface);
    border-radius: 0; cursor: pointer; transition: border-color .15s ease;
}
.fewset-sp .sis-dg-cart-row-wrap .sis-dg-add-btn:hover { border-color: var(--on-surface); }
.fewset-sp .sis-dg-cart-row-wrap .sis-dg-add-btn.is-disabled,
.fewset-sp .sis-dg-cart-row-wrap .sis-dg-add-btn:disabled { opacity: .35; cursor: not-allowed; }
/* wishlist heart in the cart row — NO shadow */
.fewset-sp .fewset-wl-heart--single {
    flex: 0 0 52px; width: 52px; height: 52px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent); background: var(--surface); cursor: pointer; color: var(--on-surface);
    filter: none !important; box-shadow: none !important;
}
.fewset-sp .fewset-wl-heart--single .fewset-wl-heart__label { display: none; }
.fewset-sp .fewset-wl-heart--single.is-active { color: #c0392b; }
.fewset-sp .fewset-wl-heart--single.is-active .fewset-wl-heart__svg { fill: currentColor; }

/* =====================================================================
   BACK BUTTON — minimal, same corner over the photo
   ===================================================================== */
.fewset-sp-back {
    position: absolute; top: 10px; left: 10px; z-index: 6;
    display: inline-flex; align-items: center; gap: 4px;
    height: 27px; padding: 0 10px 0 7px; border-radius: 0;
    background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--on-surface); border: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
    font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--label-md); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
    box-shadow: none; transition: background .15s ease, color .15s ease;
}
.fewset-sp-back svg { width: 12px; height: 12px; display: block; stroke: currentColor; }
.fewset-sp-back:hover { background: var(--on-surface); color: var(--surface); }

/* MOBILE: a little shadow over the top of the photo so the transparent back
   button (and the runner above it) read cleanly. Put on .fewset-qs-main-row::before
   — NOT the gallery's ::before, which the spinner-killer below clears. */
@media (max-width: 768px) {
    body.fewset-sp .fewset-qs-main-row::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 96px;
        z-index: 3; pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
    }
    body.fewset-sp .fewset-sp-back {
        background: transparent; border-color: transparent; color: #fff;
        -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
    }
    body.fewset-sp .fewset-sp-back:hover { background: transparent; color: #fff; opacity: .82; }
}

/* DESKTOP: don't float the back button over the photo. Instead the breadcrumb
   row gets a back arrow (prepended in single-product.js), so "back" lives with
   the breadcrumb trail. */
@media (min-width: 769px) {
    .fewset-sp .fewset-sp-back { display: none !important; }
}
/* Desktop utility bar: ‹ Atgal + breadcrumb, full-width above the gallery+info
   grid (assembled in single-product.js). Mobile keeps the in-gallery back. */
.fewset-sp-utilbar { display: none; }
@media (min-width: 769px) {
    .fewset-sp-utilbar {
        display: flex; align-items: center; gap: 12px;
        /* same 1920 + 56px container as the gallery/info grid, so the back
           button + breadcrumb start at the gallery's left edge — not the
           screen edge. */
        max-width: 1920px; box-sizing: border-box;
        padding: 7px 56px 8px; margin: 0 auto 6px;
        border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 7%, transparent);
    }
    .fewset-sp-utilbar .fewset-pdp-crumb { margin: 0; font-size: 10px; }
    .fewset-sp-utilbar .fewset-pdp-crumb__sep { width: 7px; height: 7px; }
}
.fewset-sp-utilback {
    display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    color: var(--on-surface); -webkit-tap-highlight-color: transparent;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.fewset-sp-utilback:hover, .fewset-sp-utilback:focus, .fewset-sp-utilback:active { color: var(--on-surface); background: none; }

/* =====================================================================
   No "strange loading" — kill the loading spinner that WVS/WC overlays on
   the GALLERY (and the form) during a colour swap. The gallery sits OUTSIDE
   the form, so this is scoped to the whole product container.
   ===================================================================== */
.fewset-sp div.product .blockUI,
.fewset-sp div.product .blockOverlay,
.fewset-sp .woocommerce-product-gallery::before,
.fewset-sp .woocommerce-product-gallery::after,
.fewset-sp .woocommerce-product-gallery .blockUI,
.fewset-sp .woocommerce-product-gallery .blockOverlay,
.fewset-sp .woocommerce-product-gallery [class*="loading"],
.fewset-sp .woocommerce-product-gallery [class*="loader"],
.fewset-sp .woocommerce-product-gallery [class*="spinner"],
.fewset-sp .variations_form .wvs-loading,
.fewset-sp .variations_form.loading::before,
.fewset-sp .variations_form .loading::after {
    display: none !important; content: none !important; opacity: 0 !important;
    animation: none !important; background: none !important; background-image: none !important;
}
.fewset-sp .variations_form, .fewset-sp form.cart, .fewset-sp .woocommerce-product-gallery { cursor: default !important; }

/* =====================================================================
   MOBILE SWIPE PROGRESS — overlaid on the photo, scrollbar-style thumb
   ===================================================================== */
.fewset-sp-swipe-progress { display: none; }
@media (max-width: 768px) {
    .fewset-sp-swipe-progress {
        display: block; position: absolute; left: 16px; right: 16px; bottom: 12px;
        z-index: 6; height: 3px; background: color-mix(in srgb, var(--surface) 45%, transparent); pointer-events: none;
    }
    .fewset-sp-swipe-progress__fill {
        position: absolute; top: 0; left: 0; height: 100%;
        width: 24px; background: var(--surface); will-change: transform;
        box-shadow: 0 1px 3px rgba(0,0,0,.25);
    }
}

/* ── ACCORDIONS + RELATED ────────────────────────────────────────────── */
.fewset-sp .fewset-pdp-extras { margin-top: 18px; }
.fewset-sp .fewset-pdp-acc__body { font-family: var(--font-primary, 'Poppins', sans-serif); font-size: var(--text-sm); line-height: 1.6; color: color-mix(in srgb, var(--on-surface) 84%, var(--surface)); }
.fewset-sp .fewset-pdp-acc__body * { max-width: 100%; }
.fewset-sp .fewset-pdp-acc__body div { min-height: 0 !important; }
/* §4 — GP-luxe forces text-decoration:underline on every <a>; beat it for the
   PDP content links (0,2,1 specificity, no !important) so they read clean. */
.fewset-sp .fewset-pdp-acc__body a,
.fewset-sp .fewset-pusp a { text-decoration: none; }
/* Sudėtis ir detalės — composition text + SKU, in the design language */
.fewset-sp .fewset-pdp-sudetis { font-size: var(--text-sm); line-height: 1.75; color: var(--neutral-800); font-weight: 400; }
.fewset-sp .fewset-pdp-sudetis p { margin: 0 0 9px; }
.fewset-sp .fewset-pdp-sudetis p:last-child { margin-bottom: 0; }
.fewset-sp .fewset-pdp-sku {
    display: flex; align-items: baseline; gap: 12px;
    margin: 16px 0 0; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
}
.fewset-sp .fewset-pdp-sku span {
    font-size: var(--label-md); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--on-surface) 40%, transparent); white-space: nowrap;
}
.fewset-sp .fewset-pdp-sku__val {
    margin-left: auto; font-size: var(--label-lg); font-weight: 500; letter-spacing: .06em; color: color-mix(in srgb, var(--on-surface) 75%, transparent);
}
.fewset-sp .fewset-sp-related { margin-top: 36px; }
.fewset-sp .fewset-qs-shipslot:empty { display: none; }
/* PDP shipping-USP heading ("Nemokamas pristatymas …") — lighter + a touch
   smaller than the global .fewset-pusp__head (--text-sm / 700). PDP-scoped so the
   cart / shop USP is untouched. Tune font-size / font-weight here. */
.fewset-sp .fewset-pusp__head { font-size: var(--label-lg); font-weight: 600; letter-spacing: .02em; }
/* Free-shipping progress message ("Iki nemokamo pristatymo…") was 15px — bigger
   than the rest of the shipping block (12px). Bring it to --text-sm (13px). */
.fewset-sp .fewset-qs-shipslot .fewset-fpp-msg { font-size: var(--text-sm) !important; line-height: 1.4; }

/* DRABUŽIŲ DYDIS row: label left, size-chart link right (ruler icon + text). */
/* full width (min-width too — width:100% alone left it content-sized) so the
   size-chart link's right edge lines up with the wishlist button. */
/* align-items:baseline (not center) so "DYDŽIŲ LENTELĖ" sits on the SAME text
   baseline as the "DRABUŽIŲ DYDIS" label — truly inline, not floating a touch
   lower. */
.fewset-sp .fewset-pv-label--sg { display: flex; width: 100%; min-width: 100%; box-sizing: border-box; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Apply the clean look to the RAW .wsgp-trigger too — not only the JS-added
   .fewset-sp-sg-link — so the server-rendered trigger never flashes as a gray
   default <button> before JS relocates it next to the size label (the plugin's
   own reset CSS is lazy-loaded, so it isn't there on first paint). Identical
   rules, so no conflict once both classes are present. */
.fewset-sp .wsgp-trigger,
.fewset-sp .fewset-sp-sg-link {
    /* display:inline (blockifies to block as a flex item) so the BUTTON's
       baseline is its TEXT baseline — an inline-flex button takes the icon's
       box-bottom as its baseline, which rode the link ~3px high above the
       "DRABUŽIŲ DYDIS" label. letter-spacing .1em matches the label exactly
       (was .05em → it read as a different font). */
    flex: 0 0 auto; display: inline !important; align-items: baseline;
    background: none !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; height: auto !important; min-height: 0 !important;
    color: color-mix(in srgb, var(--on-surface) 60%, transparent) !important;
    font-family: var(--font-primary, 'Poppins', sans-serif) !important;
    font-size: var(--label-md) !important; font-weight: 600 !important; letter-spacing: .1em !important;
    text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fewset-sp .wsgp-trigger:hover, .fewset-sp .wsgp-trigger:focus, .fewset-sp .fewset-sp-sg-link:hover, .fewset-sp .fewset-sp-sg-link:focus { color: var(--on-surface) !important; background: none !important; text-decoration: none !important; }
.fewset-sp .wsgp-trigger svg, .fewset-sp .fewset-sp-sg-link svg { width: 14px !important; height: 14px !important; vertical-align: -2px; margin-right: 4px; }

/* Back-in-stock "Pranešti, kai grįš į sandėlį" trigger → FULL-WIDTH on the PDP,
   matching the add-to-cart / wishlist / deriniai cluster (was inline-flex, so it
   shrank to its text). */
.fewset-sp .fewset-bis-trigger { display: flex; width: 100%; box-sizing: border-box; justify-content: center; }

/* Stock bar desktop padding bump (the two-row layout + colours come from the
   base .fewset-pv-stock rule above, driven by --st-col). */
@media (min-width: 769px) {
    .fewset-sp .fewset-pv-stock { padding: 11px 14px; }
}

/* =====================================================================
   MOBILE STICKY ACTION BAR (.fewset-sp-stickybar)
   Phones only: the immersive PDP swaps the global bottom tab-bar for a
   compact bar holding price + stock + size-guide (info row) and the
   wishlist / deriniai "+" / add-to-cart cluster (actions row). Built and
   populated by js/single-product.js (§1f) — it MOVES the live nodes in; on
   desktop they go home and this stays hidden. Sizes are deliberately
   compact (smaller than the in-page controls).
   ===================================================================== */
.fewset-sp-stickybar { display: none; }

@media (max-width: 768px) {
    /* clear the fixed bar so the related rails / footer aren't hidden behind it
       (bar is ~89px tall with the 15px top pad + 15px gap — keep a small buffer) */
    body.fewset-sp { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }

    body.fewset-sp .fewset-sp-stickybar {
        display: flex;
        flex-direction: column;
        gap: 15px;   /* breathing room between the price row and the buttons */
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1000;
        padding: 15px 10px calc(9px + env(safe-area-inset-bottom));
        background: var(--surface);   /* solid (no translucency / blur) */
        border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
    }

    /* Hide the sticky bar while ANY overlay is open (.fewset-locked = cart / search
       / mega). The mega DRAWER lives inside the header, so it's trapped in the
       header's z:100 stacking context; the sticky bar sits at the root at z:1000,
       which paints OVER the full-screen mega (the "bottom sticky overlapping").
       Hiding it makes every overlay truly full-screen — and drops a bottom-fixed
       element that can twitch during the iOS scroll-lock. */
    body.fewset-sp.fewset-locked .fewset-sp-stickybar { display: none; }

    /* INFO ROW — price (with breathing room) · stock · size-guide (far right).
       align-items:center keeps the small stock pill vertically centred on the price. */
    body.fewset-sp .fewset-sp-sb__info { display: flex; align-items: center; gap: 12px; min-height: 0; }
    body.fewset-sp .fewset-sp-sb__info .fewset-qs-pricebar { padding: 0 !important; margin: 0; display: flex; align-items: center; gap: 8px; }
    body.fewset-sp .fewset-sp-sb__info .fewset-price { gap: 8px; align-items: center; }
    body.fewset-sp .fewset-sp-sb__info .fewset-price__now { font-size: var(--text-lg); line-height: 1; margin: 0; }   /* token (17px); margin:0 kills the base .fewset-qs-price margin that mis-centred it vs stock */
    body.fewset-sp .fewset-sp-sb__info .fewset-price__vat { display: none; }
    /* On sale: show the original price inline + struck-through next to the red
       now-price. font-size:0 drops the verbose "Pradinė kaina:" text node; the
       inner <span> (the price) restores its size. Only renders when on_sale. */
    body.fewset-sp .fewset-sp-sb__info .fewset-price__was { display: inline-block; min-width: max-content; width: max-content; flex: 0 0 auto; margin: 0; font-size: 0; line-height: 1; vertical-align: middle; align-self: center; }
    body.fewset-sp .fewset-sp-sb__info .fewset-price__was span {
        font-size: var(--text-sm); white-space: nowrap; text-decoration: line-through;
        color: color-mix(in srgb, var(--on-surface) 45%, transparent);
    }
    /* sticky-bar COPY of the stock pill: no room for the location row → flat
       neutral one-liner (the in-page bar keeps the full two-row design). */
    body.fewset-sp .fewset-sp-sb__info .fewset-pv-stock {
        flex-direction: row; align-items: center; gap: 7px;
        width: auto; margin: 0; padding: 5px 10px; align-self: center;
        background: var(--neutral-100); border: 0;
    }
    body.fewset-sp .fewset-sp-sb__info .fewset-pv-stock__loc { display: none; }
    body.fewset-sp .fewset-sp-sb__info .fewset-pv-stock__primary { font-size: var(--label-md); }
    body.fewset-sp .fewset-sp-sb__info .fewset-pv-stock[hidden] { display: none; }
    /* size-guide trigger -> small underlined link, pushed to the far right */
    body.fewset-sp .fewset-sp-sb__info .wsgp-trigger {
        margin-left: auto; flex: 0 0 auto;
        background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
        font-family: var(--font-primary, 'Poppins', sans-serif);
        font-size: var(--label-md); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
        color: color-mix(in srgb, var(--on-surface) 60%, transparent);
        text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap;
    }
    body.fewset-sp .fewset-sp-sb__info .wsgp-trigger svg { display: none; }

    /* ACTIONS ROW — add-to-cart LEFT (fills) · wishlist · deriniai "+" (right).
       Order is forced so it's identical whether deriniai wrapped before or after. */
    body.fewset-sp .fewset-sp-sb__actions { display: flex; }
    body.fewset-sp .fewset-sp-sb__cart {
        display: flex !important; flex: 1 1 auto; gap: 8px; margin: 0 !important; align-items: stretch;
    }
    body.fewset-sp .fewset-sp-sb__cart .sis-dg-cart-row-wrap { display: contents; }
    body.fewset-sp .fewset-sp-sb__cart .quantity { display: none !important; }

    body.fewset-sp .fewset-sp-sb__cart .single_add_to_cart_button {
        order: 1; flex: 1 1 auto; min-height: 32px; padding: 0 12px; margin: 0; gap: 7px;
        font-size: 10px; letter-spacing: .06em;
    }
    body.fewset-sp .fewset-sp-sb__cart .single_add_to_cart_button::before { width: 15px; height: 15px; }
    body.fewset-sp .fewset-sp-sb__cart .fewset-wl-heart--single {
        order: 2; flex: 0 0 32px; width: 32px; height: 32px; margin: 0;
    }
    body.fewset-sp .fewset-sp-sb__cart .sis-dg-add-btn {
        order: 3; flex: 0 0 32px; width: 32px; height: 32px; margin: 0;
        /* the deriniai plugin forces min-height:44 + align-self:stretch on
           .sis-dg-add-btn--inline, which stretched it (and the whole row) to
           44px — override both so it's a real 32px square. */
        min-height: 32px; align-self: center;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent);
        background: var(--surface); color: var(--on-surface); border-radius: 0;
    }
    /* keep the glyphs proportional inside the 32px buttons (the heart is an svg;
       the deriniai mark is a 24px .sis-dg-add-btn__ic background image) */
    body.fewset-sp .fewset-sp-sb__cart .fewset-wl-heart--single svg { width: 15px; height: 15px; }
    body.fewset-sp .fewset-sp-sb__cart .sis-dg-add-btn .sis-dg-add-btn__ic,
    body.fewset-sp .fewset-sp-sb__cart .sis-dg-add-btn svg { width: 16px; height: 16px; }

    /* Lift the back-to-top pill above the sticky bar so it isn't clipped. */
    body.fewset-sp .fewset-btt { bottom: calc(96px + env(safe-area-inset-bottom)); }
    /* Wishlist + add-to-cart toasts (.fewset-wl-toast): pin to the LEFT (mirroring
       the back-to-top pill on the right), on the same bottom baseline, just above
       the sticky bar. Left-aligned (drop the translateX(-50%) centering) + flex so
       the text reads straight from the left edge. */
    body.fewset-sp .fewset-wl-toast {
        bottom: calc(96px + env(safe-area-inset-bottom));
        left: 14px; right: auto; max-width: calc(100vw - 80px);
        transform: translateY(12px);
        display: flex; align-items: center; text-align: left;
        /* match the "Į viršų" back-to-top pill exactly: type AND padding
           (the toast base is a roomier 12px 22px) */
        padding: 9px 14px;
        font-size: 10px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase;
    }
    body.fewset-sp .fewset-wl-toast.is-visible { transform: translateY(0); }
    /* the add-to-cart toast's dismiss "×" is 20px → it bloats that toast ~9px
       past the back-to-top pill; shrink it so both toast variants match. */
    body.fewset-sp .fewset-wl-toast .fewset-wl-toast__x { font-size: 14px; }
}

/* ── MOBILE "Yra fizinėje parduotuvėje" strip + shop-info popup ───────────
   The strip sits in the bottom toast slot (same spot as .fewset-wl-toast) but is
   LIGHT + persistent (vs the dark transient toast) so they read differently. A
   real toast covers it (z below the toast's 10000 + JS cover()); it restores on
   dismiss. Mobile only — desktop shows the location in the in-page bar. ─────── */
.fewset-shopstrip {
    position: fixed; z-index: 9990;
    bottom: calc(96px + env(safe-area-inset-bottom)); left: 14px; right: auto;
    max-width: calc(100vw - 80px);
    display: none; align-items: center; gap: 8px;
    margin: 0; padding: 9px 14px;
    background: var(--surface, #fff); color: var(--on-surface, #1A1A1A);
    /* inset ring (not a real border) so the box height EXACTLY matches the toast */
    box-shadow: 0 6px 24px rgba(26, 26, 26, .16), inset 0 0 0 1px color-mix(in srgb, var(--on-surface) 12%, transparent);
    font-family: var(--font-primary, 'Poppins', sans-serif);
    /* same box as the toast: 10px / 500 / 1.45 line-height / 9px 14px padding */
    font-size: 10px; font-weight: 500; letter-spacing: .02em; line-height: 1.45;
    cursor: pointer; opacity: 0; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, box-shadow .15s ease; pointer-events: none;
}
@media (max-width: 768px) { .fewset-shopstrip { display: inline-flex; } }
.fewset-shopstrip.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* an open overlay (cart / search / mega) takes the screen — drop the strip */
body.fewset-locked .fewset-shopstrip { opacity: 0 !important; pointer-events: none !important; }
/* pressed feedback — clearly tappable */
.fewset-shopstrip.is-visible:active { transform: translateY(2px); box-shadow: 0 2px 10px rgba(26, 26, 26, .12); }
.fewset-shopstrip__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #2f7d45; }
.fewset-shopstrip__txt { white-space: nowrap; }
/* trailing ⓘ info badge = "tap for details" (sized so it doesn't make the strip
   taller than the toast) */
.fewset-shopstrip__info {
    flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
    border: 1.3px solid currentColor; display: inline-flex; align-items: center; justify-content: center;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700;
    font-size: 9px; letter-spacing: 0; line-height: 1; text-transform: none;
}

.fewset-shopmodal { position: fixed; inset: 0; z-index: 10010; display: none; }
.fewset-shopmodal.is-open { display: block; }
body.fewset-shopmodal-open { overflow: hidden; }
.fewset-shopmodal__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, .42); opacity: 0; transition: opacity .25s ease; }
.fewset-shopmodal.is-open .fewset-shopmodal__backdrop { opacity: 1; }
.fewset-shopmodal__panel {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%);
    width: 100%; max-width: 480px; box-sizing: border-box;
    background: var(--surface, #fff); padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -16px 50px rgba(26, 26, 26, .18);
    transition: transform .3s var(--ease-luxe, ease);
}
.fewset-shopmodal.is-open .fewset-shopmodal__panel { transform: translateX(-50%) translateY(0); }
@media (min-width: 601px) {
    .fewset-shopmodal__panel { bottom: auto; top: 50%; width: 440px; transform: translate(-50%, -46%); opacity: 0;
        transition: transform .3s ease, opacity .3s ease; }
    .fewset-shopmodal.is-open .fewset-shopmodal__panel { transform: translate(-50%, -50%); opacity: 1; }
}
.fewset-shopmodal__x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--on-surface); cursor: pointer; }
.fewset-shopmodal__title { font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 1rem; font-weight: 600; margin: 0 30px 14px 0; color: var(--on-surface); }
.fewset-shopmodal__sec { margin: 0 0 14px; }
.fewset-shopmodal__lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--on-surface) 45%, transparent); margin: 0 0 4px; }
.fewset-shopmodal__sec p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--on-surface); }
.fewset-shopmodal__map { display: inline-block; margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--on-surface); text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   GIFT NOTICE (inc/product-gifts.php) — quiet band under the add-to-cart
   form (summary priority 32, between the size guide and the shipping USP).
   ========================================================================== */

/* White compact card under the add-to-cart form, breathing room on both
   sides; the present corner-tag stays BLACK — that's the gift marker used
   across cards, cart and checkout. */
.fewset-sp .fewset-gwp-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 2px;
    padding: 10px 14px 10px 10px;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.16);
}
/* small gift thumb (3:4 like all product imagery) with the present tag */
.fewset-sp .fewset-gwp-note__media {
    position: relative;
    flex: 0 0 42px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface-dim, #f2f2f2);
}
.fewset-sp .fewset-gwp-note__media img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}
.fewset-sp .fewset-gwp-note__media .fewset-gwp-badge {
    position: absolute;
    right: 0; bottom: 0;
    width: 16px; height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #1A1A1A);
    color: #fff;
    font-style: normal;
}
.fewset-sp .fewset-gwp-note__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fewset-sp .fewset-gwp-note__eyebrow {
    font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--on-surface-variant, #757575);
}
.fewset-sp .fewset-gwp-note__name {
    font-size: 12px; font-weight: 600;
    line-height: 1.35;
}
.fewset-sp .fewset-gwp-note__price { font-size: 11px; line-height: 1.3; }
.fewset-sp .fewset-gwp-note__price del { color: var(--on-surface-variant, #757575); margin-right: 2px; }
.fewset-sp .fewset-gwp-note__price strong { color: var(--error, #B3261E); font-weight: 600; }

@media (max-width: 1024px) {
    /* .summary is a flex container on mobile — unordered children float to
       the top (the back-in-stock lesson). Pin between the form (1) and the
       shipslot (2): order 2 + DOM position keeps it just above the USP. */
    .fewset-sp .fewset-gwp-note { order: 2; margin: 8px 10px 0; padding: 9px 12px 9px 9px; }
}