/* ============================================================
   Sprint p10 — Product page redesign (msofas-style minimalist).

   Layout (≥768):
     LEFT col 7  — gallery hero + thumbnail strip
     RIGHT col 5 — flags → H1 → price → USP badges → variants → cart
     BELOW (full-width) — tabs (description / details / attachments)

   Stack on mobile: gallery → info → tabs.

   Targets msofas.pl visual: no boxed containers, hair-line dividers
   only, black typography (#1a1a1a), brand-green accents (#6FA72F),
   square corners everywhere, generous whitespace.
   ============================================================ */

/* field_style.css:1521 sets `main { overflow: hidden }` which kills
   position:sticky on every descendant. Override on product-page body
   only (same pattern p3 uses for listing pages). */
body.page-product main,
body.product main {
    overflow: clip !important;
}

/* ─── 0. Layout wrapper ──────────────────────────────────────── */
body.product .product-page,
#main.product-page {
    padding: 12px 0 48px;
}

/* CSS Grid hero region — three logical children:
     info-top    (flags + H1 + price)
     gallery     (hero + thumb strip)
     info-bottom (USPs + short desc + variants + cart)

   Desktop (≥768): 7|5 columns; gallery spans both rows in col 1, info
   sections stack in col 2 (top in row 1, bottom in row 2). End result
   visually mirrors a "gallery left | info column right" 2-col layout.

   Mobile (<768): single column, ordered info-top → gallery → info-
   bottom so the product NAME + PRICE land above the fold (the user's
   first paint on a phone shows name + price, not just an image). */
.product-page .product-hero {
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 48px;
    row-gap: 0;
    margin: 0 0 48px;
}

.product-page .product-hero__gallery {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0; /* contain images inside the grid track */
}

.product-page .product-hero__info-top {
    grid-column: 2;
    grid-row: 1;
}

.product-page .product-hero__info-bottom {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .product-page .product-hero {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 20px;
        margin: 0 0 32px;
    }
    .product-page .product-hero__info-top {
        grid-column: 1;
        grid-row: 1;
    }
    .product-page .product-hero__gallery {
        grid-column: 1;
        grid-row: 2;
    }
    .product-page .product-hero__info-bottom {
        grid-column: 1;
        grid-row: 3;
    }
}

/* ─── 1. Gallery ─────────────────────────────────────────────── */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-gallery__hero {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: #fff;
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.product-gallery__hero-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* show whole product without cropping */
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.product-gallery__hero:hover .product-gallery__hero-img {
    transform: scale(1.02);
}

.product-gallery__zoom-hint {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.product-gallery__hero:hover .product-gallery__zoom-hint,
.product-gallery__hero:focus-visible .product-gallery__zoom-hint {
    opacity: 1;
}

.product-gallery__hero:focus-visible {
    outline: 2px solid #6FA72F;
    outline-offset: 2px;
}

/* ─── 1b. Thumbnail strip — products may have 20+ images, force a
   single horizontal row with overflow-x scroll. Some theme rules
   set `overflow-x: hidden` (computed value won't let us scroll), so
   use !important. */
.product-gallery__thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    padding-bottom: 8px;
    width: 100%;
    max-width: 100%;
}

.product-gallery__thumbs::-webkit-scrollbar {
    height: 6px;
}
.product-gallery__thumbs::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 0;
}

.product-gallery__thumb {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.18s ease;
    position: relative;
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.product-gallery__thumb:hover {
    border-color: #1a1a1a;
}

.product-gallery__thumb.selected,
.product-gallery__thumb[aria-selected="true"] {
    border-color: #6FA72F;
    box-shadow: inset 0 0 0 1px #6FA72F;
}

.product-gallery__thumb:focus-visible {
    outline: none;
    border-color: #6FA72F;
    box-shadow: inset 0 0 0 1px #6FA72F;
}

/* ─── 2. Info sections ───────────────────────────────────────── */
/* info-top owns: flags + H1 + price (visible above the fold on mobile)
   info-bottom owns: USP badges + short desc + variants + cart      */

.product-info__flags {
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-flag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    border-radius: 0;
    line-height: 1.4;
}

.product-flag--sale {
    background: #c0392b;
}

.product-flag--new {
    background: #6FA72F;
}

.product-info__title {
    margin: 0 0 16px;
    padding: 0;
    border: none;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: #1a1a1a;
    letter-spacing: -0.01em;
    text-align: left !important;
}

.product-info__price {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid #f0f0f0;
}

/* The included product-prices.tpl emits .current-price, .regular-price.
   Restyle minimally to fit the new layout (legacy CSS lives in p2). */
.product-info__price .current-price,
.product-info__price .product-price,
.product-info__price .price {
    color: #c0392b !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.product-info__price .regular-price {
    color: #999 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-decoration: line-through;
    margin-right: 10px;
}

.product-info__price .discount {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 8px;
    background: #c0392b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Hide the legacy per-option `+ £X for selected fabric` rows — the
   `.product-options-summary` below sums them into one compact line. */
.product-options-surcharge {
    display: none !important;
}

/* Customization options summary — one compact line replacing the
   legacy N-row "+ £X for selected fabric" list. Shows the running
   total with surcharges baked in, plus the delta in subtler text. */
.product-options-summary {
    margin: 10px 0 0;
    padding: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    color: #1a1a1a;
    font-size: 13px;
    line-height: 1.4;
    border-top: 1px solid #f0f0f0;
}

.product-options-summary[hidden] {
    display: none !important;
}

.product-options-summary__label {
    color: #888;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.product-options-summary__total {
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.product-options-summary__diff {
    color: #888;
    font-size: 12px;
    font-weight: 400;
}

/* ─── 3. USP badges — 2 per row, flex-basis 50% - gap ─────────
   User wants exactly 2 chips per row at desktop; the previous flex-
   wrap with `gap: 8px` packed 3-4 per row depending on text length.
   `flex: 0 0 calc(50% - 4px)` = each chip takes half the width minus
   half the gap so two chips + one 8px gap fit exactly. */
.product-info__usps {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-info__usp {
    flex: 0 0 calc(50% - 4px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #f8f8f8;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.3;
    transition: background 0.18s ease, color 0.18s ease;
    box-sizing: border-box;
}

.product-info__usp:hover {
    background: #f0f0f0;
    color: #6FA72F;
}

.product-info__usp svg {
    flex: 0 0 16px;
    stroke: currentColor;
}

@media (max-width: 540px) {
    .product-info__usp {
        flex: 0 0 100%;
    }
}

/* ─── 4. Short description ───────────────────────────────────── */
.product-info__short {
    margin: 0 0 24px;
    padding: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}

.product-info__short p {
    margin: 0 0 10px;
}

.product-info__short p:last-child {
    margin-bottom: 0;
}

/* ─── 5. Variants (size, fabric swatches, side selector) ─────── */
.product-page {
    margin: 0;
}

.product-page .product-variants {
    margin: 0;
    padding: 0;
}

.product-page .product-variants-item,
.product-page .product-variants .product-variants-item {
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.product-page .product-variants-item label,
.product-page .product-variants-item .control-label {
    display: block;
    margin: 0 0 10px !important;
    padding: 0;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-transform: none;
    letter-spacing: 0;
}

/* Color/fabric swatch grid */
.product-page .product-variants-item ul,
.product-page .product-variants-item .input-color-group,
.product-page .product-variants-item .input-container {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-page .product-variants-item li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Swatch chip (color image / fabric thumbnail) */
.product-page .product-variants-item .input-color,
.product-page .product-variants-item label.color {
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    cursor: pointer;
    background-size: cover !important;
    background-position: center !important;
    transition: border-color 0.18s ease, transform 0.15s ease;
    box-shadow: none !important;
}

.product-page .product-variants-item .input-color:hover,
.product-page .product-variants-item label.color:hover {
    border-color: #1a1a1a !important;
    transform: scale(1.04);
}

.product-page .product-variants-item .input-color:checked,
.product-page .product-variants-item input[type="radio"]:checked + label.color,
.product-page .product-variants-item input[type="radio"]:checked + .input-color {
    border-color: #6FA72F !important;
    box-shadow: inset 0 0 0 1px #6FA72F, 0 0 0 1px #6FA72F !important;
}

/* Hide the legacy radio input — we use the label as the visible swatch */
.product-page .product-variants-item input[type="radio"]:not(.input-color) {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Radio-group variants (e.g. corner side L/R, sofa firmness). PS emits:
   <ul><li><input class="input-radio"><span class="radio-label">Label</span></li>
   Hide the native input + style the .radio-label as a button-like chip
   so it matches the swatch grid and the msofas reference for "Wybierz
   stronę narożnika" (square chips with brand-green ring when active). */
.product-page .product-variants-item .input-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.product-page .product-variants-item .radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 44px;
    padding: 0 16px;
    margin: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.product-page .product-variants-item li:hover .radio-label {
    border-color: #1a1a1a;
}

.product-page .product-variants-item .input-radio:checked + .radio-label,
.product-page .product-variants-item li:has(.input-radio:checked) .radio-label {
    border-color: #6FA72F !important;
    color: #6FA72F !important;
    box-shadow: inset 0 0 0 1px #6FA72F;
}

.product-page .product-variants-item .input-radio:focus-visible + .radio-label {
    outline: 2px solid #6FA72F;
    outline-offset: 2px;
}

/* Text-only dropdowns (e.g. side, size) */
.product-page .product-variants-item select,
.product-page .product-variants-item .form-control {
    display: block;
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    color: #1a1a1a;
    font-size: 14px;
    box-shadow: none !important;
    transition: border-color 0.18s ease;
}

.product-page .product-variants-item select:focus {
    outline: none;
    border-color: #6FA72F !important;
}

/* "Show more" toggle on fabric grid (legacy theme leaves a black box) */
.product-page .show-more,
.product-page button.show-more {
    display: inline-flex;
    align-items: center;
    margin: 12px 0 0 !important;
    padding: 8px 16px !important;
    background: transparent !important;
    color: #1a1a1a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: 1px solid #1a1a1a !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.product-page .show-more:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* ─── 5b. Product customization (PS custom fields) ────────────
   This site uses PS's `customizations.fields` system heavily (corner
   orientation, fabric, seats foam, topper, shelf, frame, etc.).
   product-customization.tpl ships hundreds of lines of inline styles
   + custom class names (.input-corner-orientation-product-page, etc.).
   The styles below RESET the legacy chrome and reskin each variant
   type as a clean swatch/select matching the rest of the page.
   ───────────────────────────────────────────────────────────── */

/* Outer card — kill bg/border/box-shadow from theme */
.product-page .product-customization,
.product-page .product-customization .card,
.product-page .product-customization .card-block {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-page .product-customization > .card > form > ul,
.product-page .product-customization ul.clearfix {
    list-style: none;
    margin: 0 !important;
    padding: 0;
}

/* Per-field row */
.product-page .product-customization-item {
    list-style: none;
    margin: 0 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Field label ("* Orientation") — override the tpl's inline
   `style="font-size:20px;font-weight:600;color:red"`. The red color
   was supposed to highlight the asterisk only but it bleeds onto the
   whole label in the legacy markup. Use display:flex so asterisk and
   field name sit on one line. */
.product-page .product-customization-item > label {
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    text-transform: none !important;
    line-height: 1.3;
}

/* The leading asterisk text node — wrap in subtler red star */
.product-page .product-customization-item > label > span {
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Required asterisk inherits red from label's color:red — we just
   restyle the asterisk text node via ::first-letter pseudo. Simpler:
   force entire label black; the asterisk is the leading "*" text. */

/* Validation "Select X!" label — was a bright red box, demote to a
   small inline message under the input. Hidden if user hasn't
   interacted (PS only marks `.is_customized` after save). */
.product-page .product-customization-item > label[style*="background-color: red"],
.product-page .product-customization-item > label[style*="background-color:red"] {
    display: inline-block !important;
    margin: 6px 0 0 !important;
    padding: 4px 8px !important;
    background: transparent !important;
    color: #c0392b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none;
    border: none !important;
    border-left: 2px solid #c0392b !important;
    padding-left: 8px !important;
}

/* "Check the fabric >" link — clean black underlined link */
.product-page .product-customization .show-fabric-btn {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 0;
    color: #1a1a1a !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: color 0.18s ease;
}

.product-page .product-customization .show-fabric-btn:hover {
    color: #6FA72F !important;
}

/* Radio-image swatch (orientation L/R, foam soft/hard, topper YES/NO).
   Markup: <ul><li class="input-container-corner"><input class="input-
   corner-orientation-product-page"><span class="corner-orientation-
   product-page" style="background-image:url(...)">...</span></li></ul>
   Reset all the legacy chrome and rebuild as a clean 160×80 chip. */
.product-page .product-customization-item ul#group_3,
.product-page .product-customization-item ul#group_4,
.product-page .product-customization-item ul[id^="group_"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    width: auto !important;
    max-width: none !important;
}

.product-page .product-customization-item .input-container,
.product-page .product-customization-item .input-container-corner {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    float: none !important;
}

/* Hide the invisible radio input — but keep it click-receiving (the
   label/span overlay handles UI). PS markup has input ABOVE span. */
.product-page .product-customization-item .input-corner-orientation-product-page {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 2;
}

/* Chip — flat, NO border in default state per user feedback. The bg-image
   (naroznik-lewy.png, twardosc.jpg, topper.jpg) comes from the tpl as an
   inline `style="background-image:url(...)"` — must use longhand
   `background-color` not shorthand `background` here, since shorthand
   would reset the inline bg-image to none. */
.product-page .product-customization-item .corner-orientation-product-page {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-direction: column !important;
    gap: 4px;
    width: 160px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 8px 12px 8px 80px !important;
    background-color: #f8f8f8 !important;
    background-size: 60px !important;
    background-position: 10px center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: right !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: box-shadow 0.18s ease, background-color 0.18s ease;
}

.product-page .product-customization-item .input-container:hover .corner-orientation-product-page {
    background-color: #f0f0f0 !important;
}

/* Checked / hover — single inset ring in brand green; no actual border
   so element height stays stable across state changes. Override the
   legacy `border: 2px solid #414141` from theme.css:8953. */
.product-page .product-customization-item .input-corner-orientation-product-page:checked + .corner-orientation-product-page,
.product-page .product-customization-item .input-corner-orientation-product-page:hover + .corner-orientation-product-page {
    border: none !important;
    background-color: #fff !important;
    box-shadow: inset 0 0 0 2px #6FA72F !important;
}

/* Inner positioned price/label divs inside the swatch — reset to flow
   nicely. Legacy uses position:absolute with right:7px / top:12px which
   doesn't scale; convert to flex inside the chip. */
.product-page .product-customization-item .corner-orientation-product-page > div,
.product-page .product-customization-item .corner-orientation-product-page .button-hover-product-page {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1a1a1a !important;
    line-height: 1.2;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: right !important;
}

/* Single uniform layout: image (bg or inline <img>) on LEFT, text on
   RIGHT. Padding-left 80px reserves space for the legacy bg-image (set
   via inline style on the span). Inline-image variants (Topper YES/NO,
   Seats foam) have their <img> wrapped in a div — those collapse to
   zero-height children once we constrain them below. The chip itself
   stays at a stable 76px height regardless of which image source the
   tpl uses. */
.product-page .product-customization-item .corner-orientation-product-page {
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 4px;
    padding: 8px 12px 8px 80px !important;
    overflow: hidden !important;
}

/* Inner wrapper div that holds an inline <img> (Topper, Seats foam) —
   the legacy markup gives it `style="width:50%; height:auto"` which
   means the chip grows to fit the natural aspect ratio of the image
   (sometimes 200×80, sometimes square — causing each chip to render
   at a different height). Lock the wrapper to absolute-positioned
   60×60 box, then `<img>` inside fits via object-fit. */
.product-page .product-customization-item .corner-orientation-product-page > div:has(> img),
.product-page .product-customization-item .corner-orientation-product-page > div:has(img) {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.product-page .product-customization-item .corner-orientation-product-page > div > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

/* Chip must be relative so the absolute image wrapper anchors to it */
.product-page .product-customization-item .corner-orientation-product-page {
    position: relative !important;
}

/* Selects (Fabric, Shelf, Bed dimensions, Topper, Mattress, Frame,
   SameFabric, Feet, USB, Lamp, Drink holder, Front feet, etc.) */
.product-page .product-customization-item select.form-control,
.product-page .product-customization-item select {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    padding: 10px 14px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    padding-right: 36px !important;
}

.product-page .product-customization-item select:focus {
    outline: none !important;
    border-color: #6FA72F !important;
}

/* Save customization button — hidden by tpl (display:none on submit
   button) but the wrapping <div> creates extra space. Collapse it. */
.product-page .product-customization form > div:has(#customSave) {
    display: none !important;
}

/* ─── 5c. Stock status — flat inline indicator ────────────────
   Legacy markup wrapped "IN STOCK" in a 2px-green-border filled box.
   The tpl now emits `.product-stock-status` + a 8px brand-green dot;
   reads as a subtle availability hint, not a screaming banner. */
.product-page .product-stock-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 12px;
    padding: 0;
    background: transparent;
    border: none;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1;
}

.product-page .product-stock-status__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6FA72F;
    flex: 0 0 8px;
}

.product-page .product-stock-status--in .product-stock-status__dot {
    background: #6FA72F;
}

.product-page .product-stock-status--low .product-stock-status__dot {
    background: #e67e22;
}

.product-page .product-stock-status--out .product-stock-status__dot {
    background: #c0392b;
}

/* ─── 6. Add to cart ────────────────────────────────────────── */
.product-page .product-add-to-cart {
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #f0f0f0;
}

.product-page .product-add-to-cart .product-quantity {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.product-page .qty,
.product-page .product-quantity .qty {
    flex: 0 0 auto;
}

/* Qty input */
.product-page input[name="qty"],
.product-page .input-group .form-control {
    width: 64px !important;
    height: 48px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    font-size: 16px !important;
    font-weight: 600;
    text-align: center;
    box-shadow: none !important;
}

.product-page .input-group-btn-vertical,
.product-page .bootstrap-touchspin-up,
.product-page .bootstrap-touchspin-down {
    display: none !important; /* drop touch-spin chevrons — bare input is cleaner */
}

/* Main Add-to-cart button */
.product-page .add-to-cart,
.product-page button.add-to-cart {
    flex: 1 1 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px !important;
    padding: 0 24px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #1a1a1a !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.product-page .add-to-cart:hover:not(:disabled),
.product-page button.add-to-cart:hover:not(:disabled) {
    background: #6FA72F !important;
    border-color: #6FA72F !important;
}

/* Disabled (PS marks add-to-cart `.disabled` until required variants
   are selected). Theme ships a translucent bright-green opacity:0.4
   look; replace with a quiet light-gray + dark text. */
.product-page .add-to-cart:disabled,
.product-page .add-to-cart.disabled,
.product-page button.add-to-cart:disabled,
.product-page button.add-to-cart.disabled {
    background: #e5e5e5 !important;
    background-color: #e5e5e5 !important;
    color: #888 !important;
    border-color: #e5e5e5 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

.product-page .add-to-cart:disabled:hover,
.product-page .add-to-cart.disabled:hover {
    background: #e5e5e5 !important;
    color: #888 !important;
    border-color: #e5e5e5 !important;
}

.product-page .add-to-cart .material-icons {
    display: none; /* drop legacy shopping-cart icon, brand-cleaner without */
}

/* ─── 7. Tabs (full-width below) ─────────────────────────────── */
.product-tabs {
    margin: 48px 0;
    padding: 0;
}

.product-tabs__nav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.product-tabs__nav .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: transparent !important;
    border: none !important;
}

.product-tabs__nav .nav-link {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 16px 28px !important;
    background: transparent !important;
    color: #888 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    transition: color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    bottom: -1px;
    cursor: pointer;
}

.product-tabs__nav .nav-link:hover {
    color: #1a1a1a !important;
    box-shadow: inset 0 -2px 0 #ddd;
}

.product-tabs__nav .nav-link.active {
    color: #1a1a1a !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 #6FA72F !important;
}

.product-tabs__content {
    padding: 32px 0 0;
    color: #444;
    font-size: 15px;
    line-height: 1.7;
}

.product-tabs__content p {
    margin: 0 0 14px;
}

.product-tabs__content h1,
.product-tabs__content h2,
.product-tabs__content h3 {
    margin: 24px 0 12px;
    padding: 0;
    border: none;
    color: #1a1a1a;
    font-size: 20px;
    font-weight: 600;
}

.product-tabs__content strong {
    color: #1a1a1a;
}

/* Product features / data sheet — flat rows, no alternating gray bg */
.product-tabs__content table,
.product-tabs__content .data-sheet,
#product-details table,
#product-details .data-sheet {
    border-collapse: collapse !important;
    margin: 16px 0 !important;
    width: 100% !important;
    max-width: 720px;
    background: transparent !important;
    border: none !important;
}

.product-tabs__content tr,
#product-details tr,
.product-tabs__content .data-sheet > * {
    background: transparent !important;
    border: none !important;
}

.product-tabs__content td,
.product-tabs__content th,
.product-tabs__content dt,
.product-tabs__content dd,
#product-details td,
#product-details th,
#product-details dt,
#product-details dd {
    padding: 12px 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 14px !important;
    text-align: left;
    color: #444;
    line-height: 1.4;
}

.product-tabs__content th,
.product-tabs__content dt,
#product-details th,
#product-details dt {
    font-weight: 600 !important;
    color: #1a1a1a !important;
    width: 40%;
}

/* "Data sheet" heading inside the tab */
#product-details h2,
#product-details h3,
.product-tabs__content h2,
.product-tabs__content h3 {
    margin: 8px 0 16px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    border: none !important;
}

/* Reference row (Reference / SKU) — flat treatment. Hide entirely
   when the value span is empty (product-details.tpl uses `isset` not
   `not empty` so it renders the label even with no SKU value). */
#product-details .product-reference,
.product-tabs__content .product-reference {
    margin: 0 0 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #444;
}

#product-details .product-reference label,
.product-tabs__content .product-reference label {
    color: #1a1a1a;
    font-weight: 600;
    margin-right: 12px;
}

#product-details .product-reference:has(span[itemprop="sku"]:empty),
.product-tabs__content .product-reference:has(span[itemprop="sku"]:empty) {
    display: none !important;
}

/* ─── 8. "You might also like" cross-sell ────────────────────── */
.product-accessories {
    margin: 64px 0 32px;
    padding: 32px 0 0;
    border-top: 1px solid #f0f0f0;
}

.product-accessories__title {
    margin: 0 0 28px;
    padding: 0;
    border: none;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    line-height: 1.2;
}

.product-accessories__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #6FA72F;
    margin: 10px 0 0;
}

.product-accessories__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 991px) {
    .product-accessories__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .product-accessories__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ─── 9. Hero zoom modal ─────────────────────────────────────── */
/* The legacy `<div id="product-modal" class="modal fade">` rendered by
   product-images-modal.tpl is opened on hero click. Reskin it from
   Bootstrap 3 chrome to a minimalist black-backdrop dialog so it
   doesn't clash with the rest of the page after click. */
#product-modal.modal {
    background: rgba(255, 255, 255, 0.97);
}

#product-modal .modal-dialog {
    max-width: 1200px;
    width: 95vw;
    margin: 32px auto;
}

#product-modal .modal-content {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#product-modal .modal-header,
#product-modal .modal-footer {
    background: transparent !important;
    border: none !important;
    padding: 0;
}

#product-modal .modal-header {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

/* The PS modal renders <button class="close-modal-btn close-button">
   (NOT Bootstrap's `.close` — different theme-shipped markup). Target
   both selectors so the restyle holds across upgrades.

   theme.css:11171 ships `@media (min-width:768px) { .close-button {
   display: none } }` (legacy: close hidden on desktop?? Yes — really).
   Override with `display: flex !important` so the close button is
   visible at every breakpoint inside our modal. */
#product-modal .close-modal-btn,
#product-modal .close-button,
#product-modal .modal-header .close {
    display: flex !important;
    position: absolute !important;
    top: 16px;
    right: 16px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1a1a1a !important;
    width: 40px !important;
    height: 40px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    text-align: center;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    cursor: pointer;
    text-shadow: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: background 0.18s ease, color 0.18s ease;
}

#product-modal .close-modal-btn:hover,
#product-modal .close-button:hover,
#product-modal .modal-header .close:hover {
    background: #6FA72F !important;
    color: #fff !important;
}

#product-modal .close-modal-btn span,
#product-modal .close-button span {
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

/* Beat theme.css:9186 — uses #id + 2 class chain. Match selector depth
   so our reset wins specificity, then enforce with !important on the
   destructive `margin-left: -60%` that pushes the modal off-screen. */
#product-modal .modal-content .modal-body,
#product-modal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

/* theme.css:9229 sets `#product-modal .modal-content .modal-body
   .product-images { margin-left: 2.5rem }` — push thumbs to centre by
   wiping the legacy margin. */
#product-modal .modal-content .modal-body .product-images,
#product-modal .product-images {
    margin: 0 !important;
}

/* theme.css:9213 `position: relative` on .thumbnails — keep but center.
   theme.css:9217 `.mask` ships max-height 49rem + 2rem top margin —
   reset to flow naturally inside the modal body. */
#product-modal .modal-content .modal-body .thumbnails,
#product-modal .thumbnails {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#product-modal .modal-content .modal-body .mask,
#product-modal .js-modal-mask {
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#product-modal figure {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Hero in modal — fill the dialog width on desktop, cap at 80vh tall
   so it fits the viewport with the thumbnail strip below. Theme.css
   ships a hardcoded `width` attribute on the <img> from the legacy
   tpl; force responsive sizing via !important. */
#product-modal .modal-content .modal-body .product-cover-modal,
#product-modal .js-modal-product-cover,
#product-modal .product-cover-modal {
    width: 100% !important;
    max-width: 1200px !important;
    max-height: 80vh !important;
    height: auto !important;
    object-fit: contain;
    display: block !important;
    background: #fff;
    margin: 0 auto !important;
}

#product-modal figure {
    margin: 0 !important;
    padding: 0;
    width: 100%;
    text-align: center;
}

#product-modal #thumbnails,
#product-modal .thumbnails {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none;
    text-align: center;
}

#product-modal .js-modal-mask {
    overflow: hidden !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Force the modal thumb list to be a clean horizontal row, NOT the
   legacy vertical aside pattern. theme.css ships rules that float
   thumbs left + stack them as a sidebar; override to a single row
   with horizontal scroll. */
#product-modal .product-images,
#product-modal .js-modal-product-images {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    width: 100% !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    justify-content: center;
}

#product-modal .product-images .thumb-container,
#product-modal .js-modal-product-images > li {
    display: inline-block !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
    list-style: none;
}

#product-modal .product-images img.thumb,
#product-modal .js-modal-thumb {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    object-position: center;
    border: none !important;
    box-shadow: inset 0 0 0 2px transparent !important;
    cursor: pointer;
    transition: box-shadow 0.18s ease;
    display: block;
}

#product-modal .product-images img.thumb.selected,
#product-modal .product-images img.thumb:hover,
#product-modal .js-modal-thumb.selected,
#product-modal .js-modal-thumb:hover {
    border: none !important;
    box-shadow: inset 0 0 0 2px #6FA72F !important;
}

/* Hide the up/down arrows beside the thumbnails (legacy markup for
   vertical aside scroll). Modal thumbs now scroll horizontally so
   the arrows are dead weight. */
#product-modal .arrows,
#product-modal .js-modal-arrows {
    display: none !important;
}

/* ─── 9b. Modal nav arrows + counter + footer (msofas-style) ─── */

/* Prev/next nav arrows positioned at modal sides, vertically centered.
   Click handler in JS swaps the hero src and counter. */
#product-modal .product-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.18s ease, color 0.18s ease;
}

#product-modal .product-modal__nav:hover,
#product-modal .product-modal__nav:focus-visible {
    background: #6FA72F;
    color: #fff;
    outline: none;
}

#product-modal .product-modal__nav--prev {
    left: 24px;
}

#product-modal .product-modal__nav--next {
    right: 24px;
}

@media (max-width: 767px) {
    #product-modal .product-modal__nav {
        width: 40px;
        height: 40px;
    }
    #product-modal .product-modal__nav--prev {
        left: 8px;
    }
    #product-modal .product-modal__nav--next {
        right: 8px;
    }
}

/* Footer area below hero — divider + counter + thumb strip */
#product-modal .product-modal__footer {
    width: 100%;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Counter "1 / 5" — small uppercase text above thumbs */
#product-modal .product-modal__counter {
    color: #555;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

#product-modal .product-modal__counter-sep {
    color: #999;
    margin: 0 2px;
}

#product-modal .product-modal__counter .js-modal-counter-current {
    color: #1a1a1a;
    font-weight: 700;
}

@media (max-width: 767px) {
    #product-modal .modal-dialog {
        margin: 16px auto;
        width: 100vw;
    }
    #product-modal img {
        max-height: 70vh;
    }
}

/* ─── 9b. Description tab — force Poppins over inline BO styles ───
   BO descriptions often contain inline font-family: 'Times New Roman'
   from Word / Google Docs paste. Override with !important so the
   product copy matches the rest of the theme. */
.product-tabs #description,
.product-tabs #description *,
.product-tabs .product-description,
.product-tabs .product-description *,
#description,
#description *,
.product-description,
.product-description * {
    font-family: "Poppins", sans-serif !important;
}

/* ─── 9c. Product "Fabrics" tab (msofas/brattex-style preview) ───
   Grouped fabric catalogue. Each group: title + USP badges (inline,
   right-anchored to the title-wrap), then total price for that group.
   First 6 fabric thumbnails plus "+N See all" tile. Click any thumb
   opens single-preview lightbox; "See all" opens grid-mode lightbox.
   Pick = AJAX save (no page reload). */

.product-fabrics {
    padding: 8px 0 24px;
}

.product-fabrics__intro {
    margin: 0 0 24px;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

.product-fabrics__section {
    margin-bottom: 28px;
}

.product-fabrics__section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #777;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ececec;
}

/* ── fabric group card ── */
.fabric-group {
    margin-bottom: 12px;
    padding: 16px 18px;
    background: #fafafa;
    transition: background 0.18s ease;
}

.fabric-group:hover {
    background: #f5f5f5;
}

.fabric-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.fabric-group__title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
}

.fabric-group__title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin: 0;
    white-space: nowrap;
}

.fabric-group__badges {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.fabric-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    background: #f5f7f2;
    color: #6FA72F;
    border-radius: 10px;
    white-space: nowrap;
}

.fabric-badge--water { background: #eef5fb; color: #2980b9; }
.fabric-badge--pets  { background: #fdf3ec; color: #d35400; }

.fabric-group__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
}

.fabric-group__price-amount {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.1;
}

.fabric-group__price-surcharge {
    font-size: 13px;
    color: #6FA72F;
    font-weight: 700;
    line-height: 1;
}

/* ── thumb grid: first 6 visible + "See all" tile ── */
.fabric-group__thumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.fabric-thumb {
    position: relative;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fabric-thumb:hover,
.fabric-thumb:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    outline: none;
}

.fabric-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fabric-thumb__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 6px;
    background: rgba(26, 26, 26, 0.78);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.fabric-thumb:hover .fabric-thumb__name,
.fabric-thumb:focus-visible .fabric-thumb__name {
    opacity: 1;
    transform: translateY(0);
}

.fabric-group__see-more {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.18s ease;
}

.fabric-group__see-more:hover,
.fabric-group__see-more:focus-visible {
    background: #6FA72F;
    outline: none;
}

.fabric-group__see-more-icon {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.fabric-group__see-more-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 0 4px;
}

/* ── picked-thumb state (mirrors current <select> selection) ── */
.fabric-thumb.is-picked {
    box-shadow: 0 0 0 3px #6FA72F, 0 4px 12px rgba(111, 167, 47, 0.25);
    transform: translateY(-1px);
}

/* ── lightbox ── */
.fabric-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.fabric-lightbox.is-open {
    display: flex;
}

.fabric-lightbox__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.fabric-lightbox__dialog {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.fabric-lightbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    flex: 0 0 auto;
}

.fabric-lightbox__title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: #1a1a1a;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.fabric-lightbox__title .js-fabric-lightbox-group-name {
    color: #6FA72F;
}

.fabric-lightbox__fabric-name {
    color: #555;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
    font-size: 13px;
}

.fabric-lightbox__close {
    background: transparent;
    border: none;
    color: #1a1a1a;
    cursor: pointer;
    padding: 4px;
    transition: color 0.18s ease;
}

.fabric-lightbox__close:hover {
    color: #6FA72F;
}

/* ── single preview mode ── */
.fabric-lightbox__single {
    position: relative;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    overflow-y: auto;
}

.fabric-lightbox__preview {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    overflow: hidden;
}

.fabric-lightbox__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fabric-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.18s ease;
    z-index: 2;
}

.fabric-lightbox__nav:hover {
    background: #6FA72F;
}

.fabric-lightbox__nav--prev { left: 16px; }
.fabric-lightbox__nav--next { right: 16px; }

.fabric-lightbox__actions {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 480px;
}

.fabric-lightbox__see-all-btn,
.fabric-lightbox__pick-btn {
    flex: 1 1 0;
    border: none;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    min-height: 44px;
}

.fabric-lightbox__see-all-btn {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
}

.fabric-lightbox__see-all-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

.fabric-lightbox__pick-btn {
    background: #6FA72F;
    color: #fff;
}

.fabric-lightbox__pick-btn:hover { background: #5a8f25; }
.fabric-lightbox__pick-btn:disabled,
.fabric-lightbox__pick-btn.is-loading {
    opacity: 0.65;
    cursor: wait;
}

/* ── group grid mode ── */
.fabric-lightbox__group {
    padding: 20px 24px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.fabric-lightbox__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.fabric-lightbox__item {
    cursor: pointer;
    background: #fafafa;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fabric-lightbox__item:hover,
.fabric-lightbox__item:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    outline: none;
}

.fabric-lightbox__item-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.fabric-lightbox__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fabric-lightbox__item-footer {
    padding: 8px 10px;
    background: #fff;
}

.fabric-lightbox__item-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* ── loader overlay ── */
.fabric-lightbox__loader {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fabric-lightbox__loader[hidden] { display: none; }

.fabric-lightbox__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e0e0e0;
    border-top-color: #6FA72F;
    border-radius: 50%;
    animation: fabric-spin 0.8s linear infinite;
}

@keyframes fabric-spin {
    to { transform: rotate(360deg); }
}

/* Brief highlight on the targeted fabric section when the user clicks
   "Browse fabric gallery" under a customization select — pulse fades. */
.product-fabrics__section.is-flash {
    animation: fabric-section-flash 1.2s ease;
}

@keyframes fabric-section-flash {
    0%   { background: rgba(111, 167, 47, 0); }
    20%  { background: rgba(111, 167, 47, 0.08); }
    100% { background: rgba(111, 167, 47, 0); }
}

/* Force-hide the dropdown that the rich picker card replaces. Match the
   specificity of `.product-page .product-customization-item select.form-control`
   so our `display: none` wins (same depth, later in cascade). */
.product-page .product-customization-item select.js-fabric-hidden-select,
.js-fabric-hidden-select {
    display: none !important;
}

/* ── Sprint p11 — Rich fabric picker card replacing 100+ option dropdown.
   Renders below the customization label "Fabric (seat and backrest)" etc.
   Shows currently chosen fabric (thumb + name) + CTA opening the same
   lightbox the Fabrics tab uses. Hidden <select> preserves form submit
   contract; nothing else in PS knows we replaced its UI. */
.fabric-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #fafafa;
    margin-top: 6px;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.fabric-picker:hover {
    background: #f5f5f5;
}

.fabric-picker.is-empty {
    background: #fffaf0;
    border-left: 3px solid #6FA72F;
}

.fabric-picker__preview {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.fabric-picker__thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background-color: #e5e5e5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fabric-picker.is-empty .fabric-picker__thumb {
    background-image: linear-gradient(135deg, #f0f0f0 25%, transparent 25%, transparent 50%, #f0f0f0 50%, #f0f0f0 75%, transparent 75%);
    background-size: 12px 12px;
}

.fabric-picker__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fabric-picker__name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.fabric-picker__hint {
    font-size: 11px;
    color: #888;
    line-height: 1.2;
}

.fabric-picker__cta {
    flex: 0 0 auto;
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: background 0.18s ease;
    white-space: nowrap;
}

.fabric-picker__cta:hover {
    background: #6FA72F;
}

.fabric-picker.is-empty .fabric-picker__cta {
    background: #6FA72F;
}

.fabric-picker.is-empty .fabric-picker__cta:hover {
    background: #5a8f25;
}

@media (max-width: 767px) {
    .fabric-picker {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }
    .fabric-picker__cta {
        width: 100%;
        text-align: center;
    }
}

/* Server-side validation message rendered after AJAX Pick when a
   required fabric kind is still empty. Re-mounted near the matching
   picker card so the customer sees exactly which one is missing. */
.fabric-picker__error {
    margin: 6px 0 0;
    padding: 6px 12px;
    color: #c0392b;
    font-size: 12px;
    font-weight: 600;
    background: rgba(192, 57, 43, 0.08);
    border-left: 3px solid #c0392b;
}

/* Add-to-cart button shows why it's disabled ("Pick a fabric first")
   when a required customization is still empty. The wrapper <span>
   catches clicks that the disabled <button> swallows. */
.js-add-to-cart-guard {
    cursor: pointer;
}

button.add-to-cart.is-fabric-required {
    opacity: 1 !important;
    background: #999 !important;
}

button.add-to-cart.is-fabric-required:hover {
    background: #6FA72F !important;
    color: #fff !important;
}

/* Flash highlight on the fabric tab when add-to-cart fires
   without a fabric selected — pulls the eye to the picker. */
.product-tabs__nav .nav-link[href="#product-fabrics"].is-required-flash {
    background: rgba(111, 167, 47, 0.15);
    box-shadow: 0 0 0 2px #6FA72F inset;
}

.fabric-picker.is-required-flash {
    animation: fabric-picker-flash 0.6s ease 3;
}

@keyframes fabric-picker-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(214, 50, 50, 0.0); }
    50%      { box-shadow: 0 0 0 3px rgba(214, 50, 50, 0.5); }
}

/* ── view-fabric-gallery link below customization selects ── */
.fabric-gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #6FA72F;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s ease;
}

.fabric-gallery-link:hover {
    color: #5a8f25;
    border-bottom-color: currentColor;
}

.fabric-gallery-link::after {
    content: '→';
    font-size: 13px;
}

/* ── RWD ── */
@media (max-width: 991px) {
    .fabric-group__price-amount { font-size: 15px; }
    .fabric-group__thumbs {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 767px) {
    .product-fabrics__intro { margin-bottom: 18px; }
    .product-fabrics__section { margin-bottom: 22px; }
    .product-fabrics__section-title {
        font-size: 11px;
        letter-spacing: 1.4px;
    }
    .fabric-group {
        padding: 14px;
        margin-bottom: 10px;
    }
    .fabric-group__header {
        gap: 8px;
        margin-bottom: 12px;
    }
    .fabric-group__title { font-size: 14px; }
    .fabric-group__price-amount { font-size: 14px; }
    .fabric-group__price-surcharge { font-size: 11px; }
    .fabric-badge { font-size: 9px; padding: 2px 6px; }
    .fabric-group__thumbs {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    .fabric-thumb__name {
        font-size: 9px;
        padding: 3px 4px;
    }
    .fabric-group__see-more-icon { font-size: 16px; }
    .fabric-group__see-more-label { font-size: 9px; }

    .fabric-lightbox { padding: 12px 8px; }
    .fabric-lightbox__dialog {
        max-height: calc(100vh - 24px);
    }
    .fabric-lightbox__header { padding: 12px 14px; }
    .fabric-lightbox__single { padding: 16px 14px; gap: 14px; }
    .fabric-lightbox__nav {
        width: 36px;
        height: 36px;
    }
    .fabric-lightbox__nav--prev { left: 8px; }
    .fabric-lightbox__nav--next { right: 8px; }
    .fabric-lightbox__actions { flex-direction: column; gap: 8px; }
    .fabric-lightbox__group { padding: 14px; }
    .fabric-lightbox__grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 419px) {
    .fabric-group__thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
    .fabric-group__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .fabric-group__price {
        margin-left: 0;
    }
}

/* ─── 10. Mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    .product-page .product-hero {
        gap: 24px;
    }
    .product-page .product-hero__gallery,
    .product-page .product-hero__info {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .product-info__title {
        font-size: 22px;
    }
    .product-info__price .current-price,
    .product-info__price .product-price,
    .product-info__price .price {
        font-size: 24px !important;
    }
    .product-tabs__nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .product-tabs__nav .nav-link {
        padding: 12px 18px !important;
        white-space: nowrap;
    }
    .product-tabs {
        margin: 32px 0;
    }
    .product-accessories {
        margin: 40px 0 24px;
    }
}