/* ===========================================================================
   HEXA REDESIGN — shop layer (Phase 2)
   ===========================================================================

   Screens: shop listing, category, product detail, quick view, compare, search.

   Design source: "Hexa Storefront.dc.html"
     onShop      462-543      onCategory  545-581     onProduct   583-674
     onCompare   676-709      onSearch    711-737
   Card:  "HexaCard.dc.html" (one component, used by all four grids + the
          related rail, exactly as the design does with <dc-import>).

   ---------------------------------------------------------------------------
   WHY A SEPARATE FILE
   ---------------------------------------------------------------------------
   One layer per phase. Two sessions appending to a single stylesheet lose each
   other's work, and hexa.css still serves every screen this phase has not
   ported.

   ⚠️ NO BLOCK NAME MAY BE DECLARED IN TWO LAYERS. This file loads AFTER
   hexa.css, so a repeated block silently restyles the chrome on every page of
   the site — Mira named its search PAGE `.mira-search`, which was already the
   header pill, and would have shipped a broken header everywhere. Every block
   below was grepped against hexa.css before being used. The search screen is
   `.hexa-srp`, never `.hexa-search`.

   ---------------------------------------------------------------------------
   WHAT THIS LAYER MAY NOT DO
   ---------------------------------------------------------------------------
   No new colour. Every value resolves to one of the ten palette tokens declared
   on `.hexa` in hexa.css. Two exceptions exist and both are the design's own
   literals over PHOTOGRAPHY, where the colour must not follow the palette
   because it sits on an image:

     --hexa-scrim     the category-hero gradient (Storefront 549)
     --hexa-onphoto   the 90%-white chip on a product image (HexaCard 15, SF 600)

   Radii stay 0 / 2px. The ONLY round things in this theme are the colour dots
   (`border-radius:50%`, Storefront 518/621 — the design draws swatches as
   circles) and that is a shape, not a corner.

   Units are cqi. The single structural breakpoint is 760px.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   0. The two photo-only tokens.

   Declared on `.hexa` so they sit beside the palette and are overridable, but
   they deliberately do NOT vary per palette: a scrim over a photograph has to
   stay dark whatever the accent, and a chip on an image has to stay near-white.
   --------------------------------------------------------------------------- */

.hexa {
    /* Storefront 549 — category hero. Two stops, bottom-heavy. */
    --hexa-scrim: linear-gradient(to top, rgba(15, 13, 12, .9), rgba(15, 13, 12, .25));
    /* HexaCard 15 / Storefront 600 — the wishlist chip and the zoom pill. */
    --hexa-onphoto: rgba(255, 255, 255, .9);
}


/* ===========================================================================
   1. THE PRODUCT CARD — "HexaCard.dc.html".

   ONE definition, four users: the shop grid, the category grid, the search
   results and the PDP related rail. Density comes from the WRAPPING GRID, never
   from the card, which is why the same file can sit in a 215px listing track
   and a 250px rail item.
   =========================================================================== */

.hexa-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--hexa-pp);
    border: 1px solid var(--hexa-ln);
    transition: border-color var(--hexa-t-line), transform var(--hexa-t-line);
    /* The card must be able to shrink inside a grid track, or a long product
       name forces the whole row wider than the frame. */
    min-width: 0;
}

.hexa-card:hover {
    border-color: var(--hexa-ink);
    transform: translateY(-3px);
}

/* ── Media ───────────────────────────────────────────────────────────────── */

.hexa-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--hexa-sf);
    /* The stacking context every child positions against. */
    z-index: 0;
}

/* The cover link. It wraps the images and fills the box, so the whole photo is
   clickable — but it is a SIBLING of the wishlist chip rather than its parent,
   because a <button> inside an <a> is hoisted out by the HTML parser. */
.hexa-card__cover {
    display: block;
    position: relative;
}

.hexa-card__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

/* ⚠️ THE HOVER IMAGE OVERLAPS THE COVER LINK.

   It must PAINT above the link to be crossfaded to, and must not EAT the click.
   Painting and hit-testing are separate questions: z-index lifts it, and
   `pointer-events:none` lets the pointer fall through to the anchor underneath.
   Mira shipped the click-eating version, then "fixed" it by raising the anchor,
   which put the anchor on top and the crossfade was never seen again. Never
   reorder the interactive element to solve an overlap — silence the decoration. */
.hexa-card__alt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .55s ease;
    z-index: 1;
    pointer-events: none;
}

.hexa-card__media:hover .hexa-card__alt {
    opacity: 1;
}

/* The sale/new flag. `.hexa-badge` in hexa.css already carries the gradient,
   the position and pointer-events:none; only the card's own padding differs. */
.hexa-card__badge {
    padding: 7px 11px;
    font-size: 10px;
}

/* The wishlist chip (HexaCard 15). Square, near-white over the photo. */
.hexa-card__wish {
    position: absolute;
    inset-block-start: 9px;
    inset-inline-end: 9px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hexa-onphoto);
    color: var(--hexa-ink);
    border: 0;
    z-index: 2;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

.hexa-card__wish:hover {
    background: var(--hexa-ink);
    color: #FFF;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.hexa-card__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 13px 13px;
    min-width: 0;
}

.hexa-card__cat {
    font: 400 9.5px/1 var(--hexa-font);
    letter-spacing: .1em;
    color: var(--hexa-sub);
}

.hexa-card__name {
    font: 700 13.5px/1.35 var(--hexa-font);
    color: var(--hexa-ink);
    /* Two lines maximum, so a long name cannot push the price row out of
       alignment across a grid of cards. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hexa-card__name:hover {
    color: var(--hexa-acd);
}

.hexa-card__prices {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hexa-card__price {
    font: 700 14px/1 var(--hexa-num);
}

.hexa-card__was {
    font: 400 11px/1 var(--hexa-num);
    color: var(--hexa-sub);
    text-decoration: line-through;
}

.hexa-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* Colour dots. `border-radius:50%` is the design's own (HexaCard 26) and is a
   SHAPE, not a rounded corner — it is not a licence for rounded boxes. */
.hexa-card__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--hexa-ln);
    display: block;
    flex: 0 0 auto;
}

.hexa-card__rating {
    margin-inline-start: auto;
    font: 400 10.5px/1 var(--hexa-num);
    color: var(--hexa-sub);
}

/* The card CTA (HexaCard 30). Full width, outlined, inverting. */
.hexa-card__cta {
    margin-top: 6px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--hexa-ink);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    text-align: center;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
    /* The label is wrapped in a span in the markup and lifted above the
       platform's ajax wash — see .cart-loading below. */
    position: relative;
}

.hexa-card__cta:hover {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
}

/* ⚠️ THE PLATFORM LAYERS A SPINNER OVER THIS BUTTON DURING THE AJAX.
   `.cart-loading::before` is a solid full-size overlay at z-index 5, revealed by
   `.active-loading`. It does not recolour the button, it BURIES THE LABEL — the
   symptom is an empty button mid-click. Recolouring the wash is not a fix; the
   label has to be lifted, and only an element can carry a z-index, which is why
   the markup wraps the text in a span. The design does this too. */
.hexa-card__cta > span,
.hexa-buy__add > span {
    position: relative;
    z-index: 6;
    /* Pinned to the "text on accent" token so it stays legible against the wash
       in all five palettes. */
    color: inherit;
}


/* ===========================================================================
   2. THE LISTING — shop + category + search share this scaffolding.
   Storefront 462-543.
   =========================================================================== */

/* Pattern C: sidebar then listing (Storefront 485/1817 —
   `minmax(190px,240px) 1fr`, aside sticky at 86px, hidden when narrow). The
   generic `.hexa-side` in hexa.css already encodes all of that. */
.hexa-shop {
    padding-inline: var(--hexa-gut);
    padding-bottom: clamp(34px, 5cqi, 70px);
}

/* The page head (Storefront 467-471): title + count on one side, sort and
   density on the other. */
.hexa-shop__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-inline: var(--hexa-gut);
    padding-block: clamp(22px, 3.2cqi, 44px) clamp(14px, 2cqi, 24px);
}

.hexa-shop__titles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.hexa-shop__title {
    font: 800 clamp(24px, 3.6cqi, 46px)/1.05 var(--hexa-font);
}

.hexa-shop__count {
    font: 300 12px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

/* ── Toolbar: sort select + density toggle (Storefront 472-483) ───────────── */

.hexa-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hexa-toolbar__label {
    font: 400 11px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-toolbar__select {
    padding: 12px 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    font: 400 11.5px/1 var(--hexa-font);
    outline: none;
}

/* ── The nice-select wrapper ─────────────────────────────────────────────────
   The platform's sort handler binds to `.shop-nice-select ul.list li.option`,
   so the nice-select plugin is left to run and it REPLACES the <select> with
   its own `.nice-select > .current + ul.list` markup. These rules style what
   the PLUGIN emits, not what the blade wrote — styling only the <select> would
   leave the visible control completely unstyled, which is precisely what this
   gate caught. */
.hexa-toolbar__nice .nice-select {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    font: 400 11.5px/1 var(--hexa-font);
    cursor: pointer;
    white-space: nowrap;
}

[dir="rtl"] .hexa-toolbar__nice .nice-select {
    padding: 0 14px 0 34px;
}

.hexa-toolbar__nice .nice-select::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 17px;
    line-height: 1;
    color: var(--hexa-sub);
    position: absolute;
    inset-inline-end: 10px;
    /* The plugin's own caret is a rotated border box; this replaces it, so the
       default must be neutralised rather than layered over. */
    border: 0;
    transform: none;
    margin: 0;
}

.hexa-toolbar__nice .nice-select .list {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline-start: 0;
    z-index: 30;
    min-width: 100%;
    display: none;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: var(--hexa-pp);
    border: 1px solid var(--hexa-ln);
    border-radius: 0;
    box-shadow: 0 22px 50px -18px rgba(var(--hexa-ink-rgb), .35);
}

.hexa-toolbar__nice .nice-select.open .list {
    display: block;
}

.hexa-toolbar__nice .nice-select .option {
    padding: 9px 12px;
    font: 400 11.5px/1 var(--hexa-font);
    color: var(--hexa-ink);
    cursor: pointer;
    white-space: nowrap;
}

.hexa-toolbar__nice .nice-select .option:hover,
.hexa-toolbar__nice .nice-select .option.selected {
    background: var(--hexa-sf);
    color: var(--hexa-acd);
}

.hexa-toolbar__density {
    display: flex;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    overflow: hidden;
}

.hexa-toolbar__density button {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

.hexa-toolbar__density button.is-active {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
}

/* ── The grid ────────────────────────────────────────────────────────────────
   ⚠️ auto-FILL, not auto-fit. The design files use auto-fit throughout because
   their placeholder counts always fill a row, so the two are indistinguishable
   there. They are not in production: auto-fit COLLAPSES the tracks it cannot
   fill and hands that width to the survivors, so a filter returning two products
   renders two enormous cards. That is a property of the mock, not an
   instruction. Every data-driven grid in this file is auto-fill.

   ⚠️ 215px IS THE DEFAULT AND IT IS NOT THE SAME AS THE TOGGLE'S 200px.
   The design draws three different floors and they are easy to conflate:

     215px  the STANDING floor — shop listing (573), category (573) and search
            (730) all use it, and category/search have no toggle at all
     200px  the shop toolbar's COMPACT setting (1819, `grid === 2 ? 300 : 200`)
     300px  the shop toolbar's LARGE setting

   So `--tight` belongs ONLY on the shop listing, and only once the shopper has
   pressed the compact button. An earlier revision put it on category and search
   too, which quietly shrank every card on those screens by 15px of floor. */
.hexa-shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hexa-a-min, 215px)), 1fr));
    gap: clamp(10px, 1.5cqi, 20px);
}

.hexa-shop__grid--wide { --hexa-a-min: 300px; }
.hexa-shop__grid--tight { --hexa-a-min: 200px; }

.hexa-shop__results {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2cqi, 26px);
    min-width: 0;
}

/* ── Pagination (Storefront 535-539) ─────────────────────────────────────── */

.hexa-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-top: 10px;
    flex-wrap: wrap;
}

/* The platform emits `ul.pagination > li > a|span`. These rules style what it
   EMITS rather than a class of ours, and they restate the legacy chain's depth:
   a single-class selector loses to `.pagination` in the sheets that load after
   the theme's own. */
.hexa-pager .pagination,
.hexa-pager ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ⚠️ TWO DIFFERENT PAGERS RENDER INTO THIS BLOCK, and they are not the same
   markup:

     shop listing   `ul.pagination-list > li > a.page-number[data-page]`
                    — the theme's own, bound by filter_product_request()
     category/search `{!! $paginator->links() !!}` → BOOTSTRAP markup, because
                    AppServiceProvider:64 calls `Paginator::useBootstrap()`:
                    `ul.pagination > li.page-item > a.page-link`

   Both are styled here. The Bootstrap variant also needs its own vendor rules
   neutralised — `.page-link` ships a border, a border-radius and a blue link
   colour from bootstrap.min.css, which loads AFTER the theme sheet. Restating
   the vendor's own selector depth is what wins; a bare `.hexa-pager a` would
   not. */
.hexa-pager .pagination .page-item .page-link,
.hexa-pager li a,
.hexa-pager li span {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 600 12px/1 var(--hexa-num);
    box-shadow: none;
    transition: background var(--hexa-t-line), color var(--hexa-t-line),
                border-color var(--hexa-t-line);
}

.hexa-pager .pagination .page-item .page-link:hover,
.hexa-pager li a:hover {
    border-color: var(--hexa-ink);
    background: transparent;
    color: var(--hexa-ink);
}

/* The disabled prev/next Bootstrap renders at either end. */
.hexa-pager .pagination .page-item.disabled .page-link {
    opacity: .4;
    pointer-events: none;
}

.hexa-pager li.active a,
.hexa-pager li.active span,
.hexa-pager .page-item.active .page-link {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    border-color: var(--hexa-ink);
}


/* ===========================================================================
   3. THE FILTER SIDEBAR — Storefront 486-527.
   =========================================================================== */

.hexa-filter {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.hexa-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    /* The design's one INK rule in the sidebar (Storefront 487), heavier than
       the hairlines below it. */
    border-bottom: 1px solid var(--hexa-ink);
}

.hexa-filter__title {
    font: 800 12px/1 var(--hexa-font);
    letter-spacing: .12em;
}

.hexa-filter__clear {
    border: 0;
    background: transparent;
    padding: 0;
    font: 400 11px/1 var(--hexa-font);
    color: var(--hexa-acd);
}

/* Active filter pills (Storefront 492-494). */
.hexa-filter__active {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hexa-filter__pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    background: var(--hexa-sf);
    font: 400 10.5px/1 var(--hexa-font);
    color: var(--hexa-ink);
    border: 0;
}

.hexa-filter__pill .hexa-i {
    font-size: 14px;
    color: var(--hexa-sub);
}

.hexa-filter__group {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.hexa-filter__legend {
    font: 700 11px/1 var(--hexa-font);
    letter-spacing: .1em;
    color: var(--hexa-sub);
}

/* Category rows: a square checkbox, the label, then the count. */
.hexa-filter__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 12px/1 var(--hexa-font);
    cursor: pointer;
}

.hexa-filter__box {
    width: 15px;
    height: 15px;
    border: 1px solid var(--hexa-ln);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hexa-on);
    flex: 0 0 auto;
    transition: background var(--hexa-t-line), border-color var(--hexa-t-line);
}

.hexa-filter__box .hexa-i {
    font-size: 12px;
    opacity: 0;
}

.hexa-filter__row.is-active .hexa-filter__box,
.hexa-filter__row.active .hexa-filter__box {
    background: var(--hexa-ink);
    border-color: var(--hexa-ink);
}

.hexa-filter__row.is-active .hexa-filter__box .hexa-i,
.hexa-filter__row.active .hexa-filter__box .hexa-i {
    opacity: 1;
}

.hexa-filter__rowlabel {
    flex: 1;
    min-width: 0;
}

.hexa-filter__n {
    font: 400 10.5px/1 var(--hexa-num);
    color: var(--hexa-sub);
}

/* Size chips (Storefront 508-512). */
.hexa-filter__sizes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hexa-filter__size {
    min-width: 38px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--hexa-ln);
    background: transparent;
    color: var(--hexa-ink);
    font: 600 11px/1 var(--hexa-num);
    cursor: pointer;
    transition: background var(--hexa-t-line), color var(--hexa-t-line),
                border-color var(--hexa-t-line);
}

.hexa-filter__size.is-active,
.hexa-filter__size.active {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    border-color: var(--hexa-ink);
}

/* Colour dots (Storefront 516-519). Circles by design. */
.hexa-filter__colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hexa-filter__color {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--hexa-ln);
    padding: 0;
    cursor: pointer;
    transition: border-color var(--hexa-t-line);
}

.hexa-filter__color.is-active,
.hexa-filter__color.active {
    border-color: var(--hexa-ink);
}

/* ── The nested category tree ────────────────────────────────────────────────
   ⚠️ THIS BLOCK REPLACES AN INLINE <style> THAT THE REWRITE DELETED.

   The platform's sidebar partial shipped ~25 lines of inline CSS defining
   `.cat-tree` / `.cat-children` / `.cat-toggle` — including the collapse
   animation and the open-state rotation. Rewriting the partial removed it, and
   without a replacement every sub-category renders permanently expanded and the
   toggle does nothing visible. Restated here in Hexa's own tokens.

   `max-height` rather than `display`, because the platform's JS only toggles the
   `.open` class and expects the transition to do the rest. */
.hexa-filter .cat-tree,
.hexa-filter .cat-children,
.hexa-filter .cat-grandchildren {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hexa-filter .cat-children,
.hexa-filter .cat-grandchildren {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease;
}

.hexa-filter .cat-parent.open > .cat-children {
    max-height: 600px;
}

.hexa-filter .cat-child.open > .cat-grandchildren {
    max-height: 400px;
}

/* Indent, in logical units so RTL mirrors for free. */
.hexa-filter .cat-child > a {
    padding-inline-start: 25px;
}

.hexa-filter .cat-grandchild > a {
    padding-inline-start: 40px;
    font-size: 11.5px;
}

.hexa-filter .cat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--hexa-sub);
    cursor: pointer;
    transition: transform .25s ease, color var(--hexa-t-line);
}

/* Open = the chevron turns a quarter to point DOWN. The glyph itself is chosen
   per locale in the blade (chevron_right in LTR, chevron_left in RTL), so the
   rotation direction has to mirror too or an open RTL branch points up. */
.hexa-filter .cat-parent.open > .cat-header .cat-toggle,
.hexa-filter .cat-child.open > a .cat-toggle {
    transform: rotate(90deg);
    color: var(--hexa-acd);
}

[dir="rtl"] .hexa-filter .cat-parent.open > .cat-header .cat-toggle,
[dir="rtl"] .hexa-filter .cat-child.open > a .cat-toggle {
    transform: rotate(-90deg);
}

/* The active branch, at every depth. */
.hexa-filter .cat-parent.active > .cat-header,
.hexa-filter .cat-child.active > a,
.hexa-filter .cat-grandchild.active > a {
    color: var(--hexa-acd);
    font-weight: 700;
}

.hexa-filter__apply {
    padding: 14px;
    border: 0;
    border-radius: var(--hexa-r);
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 12px/1 var(--hexa-font);
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

.hexa-filter__apply:hover {
    background: var(--hexa-acd);
    color: var(--hexa-on);
}

/* ── The price slider ────────────────────────────────────────────────────────
   ⚠️ SPECIFICITY, NOT LOAD ORDER. The legacy rule is FIVE classes deep:
     .price-range-slider .ui-range-slider.noUi-target .noUi-base .noUi-connect
   so `.hexa .noUi-connect` (2 classes) loses whatever the source order, and the
   bar keeps rendering in the tenant's old accent colour. `:where(.hexa)` adds
   scope at ZERO specificity cost, so these match the legacy depth without
   !important. Mira's first attempt at this contained the right string, read as
   covered, and still rendered red. */
:where(.hexa) .price-range-slider .ui-range-slider.noUi-target .noUi-base .noUi-connect,
:where(.hexa) .noUi-connect {
    background: var(--hexa-grad);
}

:where(.hexa) .price-range-slider .ui-range-slider.noUi-target .noUi-base .noUi-origin .noUi-handle,
:where(.hexa) .noUi-handle {
    background: var(--hexa-ink);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 13px;
    height: 13px;
}

:where(.hexa) .noUi-target {
    background: var(--hexa-sf);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 3px;
}

.hexa-filter__prices {
    display: flex;
    justify-content: space-between;
    font: 400 11px/1 var(--hexa-num);
    color: var(--hexa-sub);
}

/* ── The phone "Filters" trigger ─────────────────────────────────────────────
   Pattern C hides the sidebar under 760px (Storefront 1818), so on a phone the
   filters must be reachable some other way or they are simply gone. */
.hexa-filter__toggle {
    display: none;
}

@media (max-width: 760px) {
    .hexa-filter__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 13px;
        border: 1px solid var(--hexa-ink);
        border-radius: var(--hexa-r);
        background: transparent;
        color: var(--hexa-ink);
        font: 700 11.5px/1 var(--hexa-font);
    }

    .hexa-filter {
        display: none;
    }

    .hexa-filter.is-open {
        display: flex;
    }
}


/* ===========================================================================
   4. CATEGORY — the hero and its facts band. Storefront 545-581.
   =========================================================================== */

.hexa-cathero {
    position: relative;
    height: clamp(240px, 30cqi, 400px);
    overflow: hidden;
    background: var(--hexa-ink);
}

.hexa-cathero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: hexa-kb 14s ease-out infinite alternate;
}

.hexa-cathero__scrim {
    position: absolute;
    inset: 0;
    background: var(--hexa-scrim);
}

.hexa-cathero__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: clamp(18px, 3cqi, 44px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* On a photograph, not on the palette — these stay white in all five palettes
   because the ground is an image. */
.hexa-cathero__crumb {
    font: 300 11px/1 var(--hexa-font);
    color: rgba(255, 255, 255, .7);
}

.hexa-cathero__title {
    font: 800 clamp(26px, 4.6cqi, 62px)/1 var(--hexa-font);
    color: #FFF;
}

.hexa-cathero__sub {
    max-width: 52ch;
    font: 300 clamp(11.5px, 1.15cqi, 14px)/1.7 var(--hexa-font);
    color: rgba(255, 255, 255, .76);
}

/* The sub-category rail (Storefront 556-559). Pattern D. */
.hexa-subcats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: clamp(16px, 2cqi, 24px);
    padding-inline: var(--hexa-gut);
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-subcats::-webkit-scrollbar { height: 0; }

.hexa-subcats__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    transition: background var(--hexa-t-line), color var(--hexa-t-line),
                border-color var(--hexa-t-line);
}

.hexa-subcats__item.is-active {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    border-color: var(--hexa-ink);
}

.hexa-subcats__n {
    font: 400 10px/1 var(--hexa-num);
    opacity: .7;
}

/* Intro + facts (Storefront 561-571). Pattern A at a 260px floor, auto-FIT
   here because the item count is fixed content, not data-driven. */
.hexa-catintro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(16px, 2.4cqi, 40px);
    padding-block: clamp(26px, 3.6cqi, 52px);
    padding-inline: var(--hexa-gut);
    align-items: center;
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-catintro__text {
    font: 400 clamp(14px, 1.7cqi, 20px)/1.7 var(--hexa-font);
    text-wrap: pretty;
}

.hexa-catintro__facts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hexa-catintro__fact {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

/* Gradient-clipped figure — one of the four places the design allows it. */
.hexa-catintro__v {
    font: 800 clamp(18px, 2.2cqi, 28px)/1 var(--hexa-num);
    background: var(--hexa-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hexa-catintro__l {
    font: 300 10.5px/1.4 var(--hexa-font);
    color: var(--hexa-sub);
}

/* The ken-burns keyframe the hero uses (design `hex-kb`, Storefront 27). */
@keyframes hexa-kb {
    from { transform: scale(1.02); }
    to   { transform: scale(1.14); }
}


/* ===========================================================================
   5. PRODUCT DETAIL — Storefront 583-674.
   =========================================================================== */

/* Gallery + buy box. Pattern B at a 320px floor (Storefront 588), auto-fit so
   the two panes share the row and collapse together. */
.hexa-pdp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(20px, 3cqi, 50px);
    padding-block: clamp(20px, 3cqi, 44px);
    padding-inline: var(--hexa-gut);
    align-items: start;
}

.hexa-pdp > * { min-width: 0; }

/* ── Gallery ─────────────────────────────────────────────────────────────────
   Thumbnails run in a COLUMN beside the stage on desktop and a ROW beneath it
   when narrow (Storefront 1842: galleryDir row → column-reverse, thumbDir
   column → row). Expressed with flex-direction so no markup changes. */
.hexa-gal {
    display: flex;
    gap: 12px;
    flex-direction: row;
}

.hexa-gal__thumbs {
    display: flex;
    gap: 10px;
    flex-direction: column;
    /* A long product can have many images; the column scrolls rather than
       stretching the row past the stage. */
    overflow: auto;
    scrollbar-width: none;
    max-height: clamp(330px, 52cqi, 660px);
}

.hexa-gal__thumbs::-webkit-scrollbar { width: 0; height: 0; }

.hexa-gal__thumb {
    padding: 0;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-sf);
    width: 84px;
    height: 104px;
    overflow: hidden;
    flex: 0 0 auto;
    transition: border-color var(--hexa-t-line);
}

.hexa-gal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .7;
    transition: opacity var(--hexa-t-line);
}

.hexa-gal__thumb.is-active {
    border-color: var(--hexa-ink);
}

.hexa-gal__thumb.is-active img {
    opacity: 1;
}

.hexa-gal__stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--hexa-sf);
    min-width: 0;
}

/* ⚠️ `#shop_details_gallery_slider .long-img img` is the selector `syncImage()`
   writes to when a variant is chosen. The ids and the .long-img wrapper are the
   platform's and may not be renamed. */
.hexa-gal__stage img {
    width: 100%;
    height: clamp(330px, 52cqi, 660px);
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.hexa-gal__stage:hover img {
    transform: scale(1.08);
}

.hexa-gal__zoom {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-end: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    background: var(--hexa-onphoto);
    color: var(--hexa-ink);
    border: 0;
    font: 400 10.5px/1 var(--hexa-font);
}

.hexa-gal__zoom .hexa-i { font-size: 15px; }

.hexa-pdp__badge {
    padding: 9px 14px;
    font-size: 11px;
}

/* ── Buy box ─────────────────────────────────────────────────────────────── */

.hexa-buy {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5cqi, 18px);
    min-width: 0;
}

.hexa-buy__eyebrow {
    font: 400 10.5px/1 var(--hexa-font);
    letter-spacing: .14em;
    color: var(--hexa-sub);
}

.hexa-buy__title {
    font: 800 clamp(22px, 3.2cqi, 40px)/1.1 var(--hexa-font);
}

.hexa-buy__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hexa-buy__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 400 11.5px/1 var(--hexa-num);
    color: var(--hexa-sub);
}

.hexa-buy__sep {
    width: 1px;
    height: 12px;
    background: var(--hexa-ln);
    display: block;
}

.hexa-buy__stock {
    font: 400 11.5px/1 var(--hexa-font);
    color: var(--hexa-acd);
}

.hexa-buy__prices {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding-block: 6px;
    flex-wrap: wrap;
}

.hexa-buy__price {
    font: 800 clamp(24px, 3cqi, 36px)/1 var(--hexa-num);
}

.hexa-buy__was {
    font: 400 14px/1 var(--hexa-num);
    color: var(--hexa-sub);
    text-decoration: line-through;
    padding-bottom: 4px;
}

.hexa-buy__save {
    padding: 6px 10px;
    background: var(--hexa-sf);
    font: 700 10.5px/1 var(--hexa-font);
    color: var(--hexa-acd);
}

.hexa-buy__desc {
    font: 300 clamp(12px, 1.2cqi, 14.5px)/1.85 var(--hexa-font);
    color: var(--hexa-sub);
    max-width: 52ch;
}

.hexa-buy__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hexa-buy__grouphead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hexa-buy__label {
    font: 700 11.5px/1 var(--hexa-font);
    letter-spacing: .08em;
}

.hexa-buy__guide {
    font: 400 11px/1 var(--hexa-font);
    color: var(--hexa-acd);
}

/* ⚠️ VARIANT PICKERS ARE THE PLATFORM'S DOM.
   `.size-lists` (with data-type), `.size_list` / `.color_list` on the wrapper,
   and `li[data-display-value]` are all read by product-details-js. These rules
   style what the platform emits; the classes may not be renamed. Colour groups
   render as dots, everything else as chips. */
.hexa-buy .size-lists {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hexa-buy .size-lists li {
    min-width: 52px;
    padding: 13px 10px;
    text-align: center;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 600 12px/1 var(--hexa-num);
    cursor: pointer;
    transition: background var(--hexa-t-line), color var(--hexa-t-line),
                border-color var(--hexa-t-line);
}

.hexa-buy .size-lists li.active {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    border-color: var(--hexa-ink);
}

/* `.disabled` is applied by selectedAttributeSearch() to combinations that do
   not exist. It must READ as unavailable, not merely look dimmer. */
.hexa-buy .size-lists li.disabled {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Colour groups are circles (Storefront 621). */
.hexa-buy .size-lists.hexa-buy__colors li {
    width: 34px;
    height: 34px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    border-width: 2px;
    font-size: 0;
}

.hexa-buy__warn {
    font: 400 11px/1 var(--hexa-font);
    color: var(--hexa-acd);
}

/* ── The action row (Storefront 637-646) ─────────────────────────────────────
   quantity stepper · ONE filled button · square wishlist. The design has no
   third CTA in this row; Buy Now sits BELOW it as its own full-width outlined
   button. When the platform offers more controls than the design draws, move
   them out of the row — never squeeze them in, and never delete them. */
.hexa-buy__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
}

/* ⚠️ `.product-quantity` and `.quantity-btn` are what syncStock() HIDES when a
   chosen combination is out of stock. They are also why the legacy sheet drags
   `position:absolute; left:5px` onto the − and + — a rule that does not MENTION
   a property cannot override one that does, so each is unwound explicitly. */
.hexa-buy .product-quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    position: static;
    width: auto;
    background: transparent;
}

.hexa-buy .product-quantity .quantity-btn {
    position: static;
    width: 44px;
    height: 48px;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    font: 400 18px/1 var(--hexa-num);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexa-buy .product-quantity input {
    min-width: 34px;
    width: 44px;
    text-align: center;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    font: 700 13px/1 var(--hexa-num);
    padding: 0;
    height: 48px;
}

.hexa-buy__add {
    flex: 1;
    min-width: 170px;
    height: 48px;
    border: 0;
    border-radius: var(--hexa-r);
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 12.5px/1 var(--hexa-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: relative;
    transition: filter var(--hexa-t-line);
}

.hexa-buy__add:hover {
    filter: brightness(1.06);
}

.hexa-buy__wish {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
}

.hexa-buy__buy {
    height: 48px;
    border: 1px solid var(--hexa-ink);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 700 12.5px/1 var(--hexa-font);
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

.hexa-buy__buy:hover {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
}

/* Secondary actions the design does not draw in the row (compare, notify).
   Kept as text links so the platform features survive. */
.hexa-buy__links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hexa-buy__links a,
.hexa-buy__links button {
    border: 0;
    background: transparent;
    padding: 0;
    font: 400 11.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hexa-buy__links a:hover,
.hexa-buy__links button:hover {
    color: var(--hexa-acd);
}

/* ── The accordion (Storefront 647-654) ──────────────────────────────────────
   Replaces the platform's tab strip. The PANE IDS ARE KEPT (#description,
   #reviews, #ship_return) so the review ajax still lands. */
.hexa-acc {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hexa-ln);
    margin-top: 8px;
}

.hexa-acc__item {
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-acc__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 0;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    font: 700 12.5px/1 var(--hexa-font);
    text-align: start;
}

.hexa-acc__btn .hexa-i {
    color: var(--hexa-sub);
}

.hexa-acc__panel {
    display: none;
    padding: 0 0 16px;
    font: 300 12px/1.8 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-acc__item.is-open .hexa-acc__panel {
    display: block;
}

/* ⚠️ THE MARK IS A PLUS/MINUS, NOT A CHEVRON.
   The design draws `add` when closed and `remove` when open — SF:2025 for the
   product accordion and SF:2104 for the FAQ, both literally
   `glyph: open ? 'remove' : 'add'`. This layer originally shipped a rotating
   `expand_more`, which is a different control: a chevron says "there is more
   below", a plus/minus says "this expands in place". Plausible, and still an
   invention.

   Driven from CSS rather than from the markup so BOTH accordions and every
   future one get it for free, and so no script has to swap ligature text. The
   span is deliberately EMPTY in the blades — a Material Symbols ligature
   renders from generated content just as it does from a text node. */
.hexa-acc__btn .hexa-i::before {
    content: 'add';
}

.hexa-acc__item.is-open .hexa-acc__btn .hexa-i::before {
    content: 'remove';
}

/* The full-width variant, used for description / reviews / shipping below the
   buy box. Same mechanics, more room to breathe. */
.hexa-acc--wide .hexa-acc__btn {
    padding: 20px 0;
    font-size: 13.5px;
}

.hexa-acc--wide .hexa-acc__panel {
    padding-bottom: 24px;
    font-size: 12.5px;
    color: var(--hexa-ink);
}

/* ⚠️ THE PLATFORM'S PANES ARE `display:none` UNTIL A TAB IS CLICKED.
   `#description`, `#reviews` and `#ship_return` are `.tab-content-item`, and the
   legacy sheet hides every one that lacks `.active`. The tab strip that used to
   add that class is gone, so the accordion's own open state must also force the
   pane visible — otherwise every panel opens onto nothing. */
.hexa-acc__panel .tab-content-item {
    display: block;
}

/* ── Related rail (Storefront 657-672) — Pattern D ───────────────────────── */

.hexa-rel {
    padding-block: clamp(24px, 3.4cqi, 50px) clamp(34px, 5cqi, 70px);
    padding-inline: var(--hexa-gut);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2cqi, 26px);
}

.hexa-rel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.hexa-rel__title {
    font: 800 clamp(19px, 2.6cqi, 32px)/1.1 var(--hexa-font);
}

.hexa-rel__arrows {
    display: flex;
    gap: 8px;
}

.hexa-rel__arrows .hexa-iconbtn {
    width: 42px;
    height: 42px;
}

.hexa-rel__rail {
    gap: clamp(10px, 1.4cqi, 18px);
    padding-bottom: 6px;
}

.hexa-rel__item {
    flex: 0 0 clamp(180px, 22cqi, 250px);
    scroll-snap-align: start;
}

/* ── The mobile sticky add-to-bag bar (Widgets 1257-1267, UPPER bar) ─────────
   It PROXIES the real Add to Cart rather than reimplementing it, so variant
   validation stays single-sourced.

   ⚠️ It must clear the platform's `.mobile-nav`, which is fixed to the bottom
   edge from 300px to 991.98px at z-index 99. The height is MEASURED into
   --hexa-mobnav-h at runtime rather than hardcoded, because the bar's height is
   font-dependent. */
.hexa-stickybuy {
    display: none;
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--hexa-mobnav-h, 0px);
    z-index: 98;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--hexa-pp);
    border-top: 1px solid var(--hexa-ln);
    box-shadow: 0 -12px 30px -20px rgba(0, 0, 0, .4);
}

@media (max-width: 760px) {
    .hexa-stickybuy.is-visible {
        display: flex;
    }
}

.hexa-stickybuy__img {
    width: 38px;
    height: 44px;
    object-fit: cover;
    background: var(--hexa-sf);
    flex: 0 0 auto;
}

.hexa-stickybuy__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.hexa-stickybuy__name {
    font: 700 11px/1.3 var(--hexa-font);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hexa-stickybuy__price {
    font: 700 11.5px/1 var(--hexa-num);
}

.hexa-stickybuy__cta {
    padding: 12px 16px;
    border: 0;
    border-radius: var(--hexa-r);
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 11px/1 var(--hexa-font);
    white-space: nowrap;
}

/* ── The zoom lightbox ───────────────────────────────────────────────────────
   ⚠️ Rendered as a SIBLING of the frame inside `.hexa-overlay`. `.hexa` sets
   container-type:inline-size, which makes it a containing block for
   position:fixed — nested, the lightbox would be trapped in the page column. */
.hexa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 13, 12, .88);
}

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

.hexa-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hexa-lightbox__close {
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: transparent;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* A campaign banner above the buy box. The platform's own block, restyled to
   the palette — it is a promise about the price below it, so it stays first. */
.hexa-buy__campaign {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-sf);
}

.hexa-buy__campaigntitle {
    font: 700 15px/1.35 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-buy__campaignhint {
    font: 300 11.5px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

/* Shipping rows inside the accordion. */
.hexa-buy__ship {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-block: 8px;
    font: 300 12px/1.7 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-buy__shiptitle {
    font: 700 12px/1.4 var(--hexa-font);
    color: var(--hexa-ink);
}

/* The payment strip, inside the accordion rather than loose in the column. */
.hexa-buy__pay {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.hexa-buy__pay img {
    max-height: 24px;
    width: auto;
}

/* The share list the platform emits as bare <li>. */
.hexa-buy__share {
    position: relative;
}

.hexa-buy__share .social_share_wrapper_item {
    display: inline-flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-inline-start: 10px;
}

/* The specification table inside the accordion. Rows, not a bordered grid —
   the design has no table chrome anywhere. */
.hexa-acc__panel .specification-table {
    width: 100%;
    border-collapse: collapse;
}

.hexa-acc__panel .specification-table td {
    padding: 7px 0;
    border-bottom: 1px solid var(--hexa-ln);
    font: 300 12px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-acc__panel .specification-table td.spec-title {
    color: var(--hexa-ink);
    font-weight: 700;
    width: 45%;
}

/* ── The quantity stepper's own controls ─────────────────────────────────────
   The platform names them `.substract` and `.plus`, and the legacy sheet gives
   both `position:absolute; left:5px`. A rule that does not MENTION a property
   cannot override one that does, so position is unwound explicitly here. */
.hexa-buy .product-quantity .substract,
.hexa-buy .product-quantity .plus {
    position: static;
    width: 44px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--hexa-ink);
    font: 400 18px/1 var(--hexa-num);
    user-select: none;
}

/* `.quantity-btn` is the wrapper syncStock() hides. It must NOT inherit the
   stepper's flex sizing, since here it holds the full-width Buy Now button. */
.hexa-buy .quantity-btn {
    display: block;
    width: 100%;
}

.hexa-buy .quantity-btn .btn-wrapper {
    display: flex;
}

.hexa-buy .quantity-btn .hexa-buy__buy {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexa-buy .quantity-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ===========================================================================
   6. COMPARE — Storefront 676-709.
   A grid, not a <table>: the design draws a fixed label column and one column
   per product, and it SCROLLS rather than crushing (min-width 760px).
   =========================================================================== */

.hexa-cmp {
    padding-block: clamp(24px, 3.4cqi, 50px) clamp(34px, 5cqi, 70px);
    padding-inline: var(--hexa-gut);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4cqi, 30px);
}

.hexa-cmp__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hexa-cmp__title {
    font: 800 clamp(24px, 3.4cqi, 42px)/1.05 var(--hexa-font);
}

.hexa-cmp__sub {
    max-width: 60ch;
    font: 300 12px/1.7 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-cmp__scroll {
    overflow-x: auto;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    scrollbar-width: none;
}

.hexa-cmp__scroll::-webkit-scrollbar { height: 0; }

/* The column count is data-driven, so it is set inline from the item count
   rather than hardcoded to the design's three. */
.hexa-cmp__grid {
    display: grid;
    grid-template-columns: minmax(140px, 180px)
                           repeat(var(--hexa-cmp-cols, 3), minmax(200px, 1fr));
    min-width: 760px;
}

.hexa-cmp__cell {
    padding: 15px 18px;
    border-bottom: 1px solid var(--hexa-ln);
    border-inline-end: 1px solid var(--hexa-ln);
    font: 300 12px/1.6 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-cmp__rowhead {
    padding: 15px 18px;
    border-bottom: 1px solid var(--hexa-ln);
    border-inline-end: 1px solid var(--hexa-ln);
    background: var(--hexa-sf);
    font: 700 11.5px/1 var(--hexa-font);
}

.hexa-cmp__corner {
    padding: 18px;
    border-bottom: 1px solid var(--hexa-ln);
    border-inline-end: 1px solid var(--hexa-ln);
    font: 700 11px/1 var(--hexa-font);
    color: var(--hexa-sub);
    letter-spacing: .1em;
}

.hexa-cmp__product {
    padding: 18px;
    border-bottom: 1px solid var(--hexa-ln);
    border-inline-end: 1px solid var(--hexa-ln);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.hexa-cmp__remove {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    color: var(--hexa-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hexa-cmp__img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--hexa-sf);
}

.hexa-cmp__name {
    font: 700 13px/1.4 var(--hexa-font);
}

.hexa-cmp__price {
    font: 700 14px/1 var(--hexa-num);
}

.hexa-cmp__foot {
    padding: 18px;
    border-inline-end: 1px solid var(--hexa-ln);
}

.hexa-cmp__add {
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: var(--hexa-r);
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 11.5px/1 var(--hexa-font);
    position: relative;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

.hexa-cmp__add:hover {
    background: var(--hexa-grad);
    color: var(--hexa-on);
}

/* Empty state — the design has no compare-empty screen, so this is built from
   the system and flagged as an invention in the handoff. */
.hexa-cmp__empty {
    padding: clamp(30px, 5cqi, 70px) 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}


/* ===========================================================================
   7. SEARCH — Storefront 711-737.

   ⚠️ NAMED `.hexa-srp`, NOT `.hexa-search`. `.hexa-search` is the header pill,
   declared in hexa.css; reusing the name here would restyle the header on every
   page of the site, because this layer loads later. This is the exact collision
   Mira hit and the reason the layer-ownership gate exists.
   =========================================================================== */

.hexa-srp {
    padding-block: clamp(24px, 3.4cqi, 50px) clamp(34px, 5cqi, 70px);
    padding-inline: var(--hexa-gut);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4cqi, 30px);
}

.hexa-srp__top {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
}

.hexa-srp__title {
    text-align: center;
    font: 800 clamp(22px, 3cqi, 38px)/1.1 var(--hexa-font);
}

.hexa-srp__field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline: 18px;
    border: 1px solid var(--hexa-ink);
    border-radius: var(--hexa-r);
    background: var(--hexa-pp);
}

.hexa-srp__field .hexa-i {
    font-size: 21px;
    color: var(--hexa-sub);
}

.hexa-srp__field input {
    flex: 1;
    min-width: 0;
    padding-block: 18px;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    font: 400 14px/1 var(--hexa-font);
    outline: none;
}

.hexa-srp__chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
}

.hexa-srp__chip {
    padding: 9px 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-sub);
    font: 400 11px/1 var(--hexa-font);
    transition: border-color var(--hexa-t-line), color var(--hexa-t-line);
}

.hexa-srp__chip:hover {
    border-color: var(--hexa-ink);
    color: var(--hexa-ink);
}

.hexa-srp__count {
    font: 300 12px/1 var(--hexa-font);
    color: var(--hexa-sub);
    text-align: center;
}

/* The no-results variant. The design's "404" IS this state, not errors/404. */
.hexa-srp__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: clamp(30px, 5cqi, 70px);
    text-align: center;
}

.hexa-srp__emptymark {
    width: 74px;
    height: 84px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 800 30px/1 var(--hexa-num);
}

.hexa-srp__emptytitle {
    font: 800 clamp(19px, 2.4cqi, 28px)/1.15 var(--hexa-font);
}

.hexa-srp__emptysub {
    max-width: 46ch;
    font: 300 12.5px/1.8 var(--hexa-font);
    color: var(--hexa-sub);
}


/* ===========================================================================
   8. QUICK VIEW.

   The platform opens this into `#product_quick_view`. Its variant pickers carry
   `.quick-view-size-lists` / `.quick-view-value-input-area`, which is how
   product-details-js keeps the modal and the PDP from cross-firing — the PDP
   handlers are bound with `:not(.quick-view-size-lists)`. Those classes are
   load-bearing and may not be dropped.
   =========================================================================== */

.hexa-qv {
    position: relative;
    background: var(--hexa-pp);
    border: 1px solid var(--hexa-ln);
    max-width: min(920px, 100%);
    margin-inline: auto;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .45);
}

.hexa-qv__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(16px, 2.4cqi, 32px);
    padding: clamp(16px, 2.4cqi, 30px);
}

.hexa-qv__grid > * { min-width: 0; }

.hexa-qv__media {
    background: var(--hexa-sf);
    overflow: hidden;
}

.hexa-qv__media img {
    width: 100%;
    height: clamp(260px, 34cqi, 420px);
    object-fit: cover;
    display: block;
}

.hexa-qv__close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    z-index: 3;
}


/* ===========================================================================
   9. LEGACY CONTAINMENT — Phase 2's share.

   `hexfashion.css` loads first and paints shared PLATFORM controls from
   `--main-color-one` (the old theme-colour setting, red on a stock shop). Those
   controls render INSIDE these screens, so each is re-pointed at the palette.

   Losing to the legacy sheet is a SPECIFICITY problem, not a load-order one —
   its selectors run four to six classes deep. `:where(.hexa)` buys scope at zero
   specificity cost so these match that depth without !important.
   =========================================================================== */

/* The rating stars. The legacy rule hardcodes #FFBA5C and a 25px glyph. */
:where(.hexa) .filter-lists .list .rating-star,
:where(.hexa) .rating-star i,
:where(.hexa) .product-rating i {
    color: var(--hexa-a2);
    font-size: 13px;
}

/* The ajax wash over any cart button. Phase 1 recoloured it; this is the half
   that matters on the listing — see .hexa-card__cta above for why the LABEL
   needs lifting rather than the wash needing a new colour. */
:where(.hexa) .cart-loading::before {
    background: var(--hexa-grad);
    opacity: .12;
}

/* The quick-view modal shell is the platform's. */
:where(.hexa) #product_quick_view {
    background: rgba(15, 13, 12, .72);
}

/* `.single-shop-details-wrapper` carries legacy padding and a white ground that
   fights the palette on the PDP. */
:where(.hexa) .single-shop-details-wrapper {
    background: transparent;
    padding: 0;
}