/* ===========================================================================
   HEXA REDESIGN — base layer (Phase 1: chrome)
   ===========================================================================

   The `hexfashion` theme's Hexa layer. Loaded AFTER hexfashion.css (see
   theme.json), so every selector here is scoped `.hexa` to outrank the legacy
   sheet and the core sheets that load after the theme's own.

   WHY A NEW FILE and not an append to hexfashion.css: the legacy sheet still
   serves every screen not yet ported, and two sessions appending to one
   stylesheet lose each other's work. Each phase gets its own layer.

   ---------------------------------------------------------------------------
   READ FIRST — how colour works here
   ---------------------------------------------------------------------------
   Nothing in this theme names a colour. TEN tokens carry the whole palette and
   five palettes re-declare those ten and nothing else. A literal hex inside a
   component rule is a bug: it is exactly what stops the palette switcher
   working.

     --hexa-bg    page ground
     --hexa-pp    card / panel / paper surface
     --hexa-sf    surface tint: bands, chips, inputs, image placeholders
     --hexa-ink   text, and the dark blocks (footer, drawer scrim, buttons)
     --hexa-sub   secondary text, meta, placeholders
     --hexa-a1    accent 1 — the gradient's FIRST stop
     --hexa-a2    accent 2 — the gradient's SECOND stop
     --hexa-acd   accent deep — links, hover, prices, meta emphasis
     --hexa-ln    hairline border
     --hexa-on    text ON a gradient / accent surface

   Two rules that are absolute in Hexa:

   1. THE GRADIENT IS ONE VALUE. Every accent fill in the design is
      `linear-gradient(120deg,var(--hexa-a1),var(--hexa-a2))`. One angle, both
      stops, no exceptions, no literal hex. It is published as --hexa-grad so a
      component never re-types it and a future change is one line.
   2. TEXT ON THE GRADIENT IS ALWAYS var(--hexa-on). Never #FFF, never ink.
      --hexa-on is a tinted near-white that differs per palette.

   All five Hexa palettes are LIGHT — including "Emerald Noir", which is a light
   mint despite the name. So unlike Mira's Noir & gold, nothing here inverts.
   That is a property of the current five, not a licence to assume direction:
   a hover still goes through a token.

   Borders and shadows recolour with the palette too — the ink RGB triplet is
   published as --hexa-ink-rgb so rgba() shades track the palette.

   Tokens are declared on `.hexa`, the wrapper element itself, NEVER on :root.
   A declaration on the element beats an inherited one whatever the source
   order, and the tenant's override block (css-variable.blade.php) targets the
   same element. A :root block cannot reach them.

   ---------------------------------------------------------------------------
   GEOMETRY — Hexa is SQUARE, and this is the signature
   ---------------------------------------------------------------------------
   border-radius is 2px on buttons and fields, and 0 everywhere else. There are
   NO pills, NO 50% circles, and no 4/6/8/12px radii — those are Bootstrap and
   legacy-theme leakage. Mira's rounded scale does NOT apply here.

   The HEXAGON is the theme's mark, and it is a clip-path, never an SVG, never
   an image, never a rotated square:
     polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)
   Its aspect ratio is always w:h ~= 0.87 (26x29, 24x27, 40x46, 42x48, 74x84).

   ---------------------------------------------------------------------------
   UNITS AND BREAKPOINTS
   ---------------------------------------------------------------------------
   Units are `cqi`, not `vw`: the frame is a container (container-type:
   inline-size) and the design is authored against it.

   The design contains ZERO media queries. There is exactly ONE structural
   switch, at 760px, which chooses between the wide header and the mobile row.
   Any other @media in this file is a bug.

   ---------------------------------------------------------------------------
   LOGICAL PROPERTIES ONLY
   ---------------------------------------------------------------------------
   inset-inline-start, margin-inline, padding-block, border-inline-end. Never
   left/right/margin-left. rtl.css must stay near-empty; if it grows, the fix
   belongs here, not there.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Tokens — the default palette (Ember Rose) and the four alternates.

   The palette is chosen by a data attribute on the same element, so switching
   is one attribute and never a second stylesheet. An unconfigured shop has no
   attribute at all and gets the block below, which is why the default must be
   the bare `.hexa` rule rather than [data-hexa-pal="ember"].
   --------------------------------------------------------------------------- */

.hexa {
    /* Ember Rose — the shipped default (Storefront 1355) */
    --hexa-bg:  #F6F2EF;
    --hexa-pp:  #FFFFFF;
    --hexa-sf:  #F0E6E1;
    --hexa-ink: #171012;
    --hexa-sub: #7C6A6E;
    --hexa-a1:  #FF8A6B;
    --hexa-a2:  #D4436B;
    --hexa-acd: #5B1F3E;
    --hexa-ln:  rgba(23, 16, 18, .12);
    --hexa-on:  #FFF6F2;

    /* The ink triplet, so rgba() shades follow the palette. Must be kept in
       step with --hexa-ink in every block below. */
    --hexa-ink-rgb: 23, 16, 18;
}

.hexa[data-hexa-pal="violet"] {
    /* Midnight Violet (Storefront 1356) */
    --hexa-bg:  #F5F3FA;
    --hexa-pp:  #FFFFFF;
    --hexa-sf:  #EBE6F6;
    --hexa-ink: #140F24;
    --hexa-sub: #6E6785;
    --hexa-a1:  #6C4AB6;
    --hexa-a2:  #C9A7FF;
    --hexa-acd: #2A1B57;
    --hexa-ln:  rgba(20, 15, 36, .12);
    --hexa-on:  #F9F6FF;

    --hexa-ink-rgb: 20, 15, 36;
}

.hexa[data-hexa-pal="copper"] {
    /* Sand & Copper (Storefront 1357) — the one palette whose --hexa-pp is not
       pure white. */
    --hexa-bg:  #F8F4EE;
    --hexa-pp:  #FFFDFA;
    --hexa-sf:  #EFE3D5;
    --hexa-ink: #221610;
    --hexa-sub: #7E6A58;
    --hexa-a1:  #E5A366;
    --hexa-a2:  #C0653A;
    --hexa-acd: #5E3220;
    --hexa-ln:  rgba(34, 22, 16, .12);
    --hexa-on:  #FFF7EF;

    --hexa-ink-rgb: 34, 22, 16;
}

.hexa[data-hexa-pal="emerald"] {
    /* Emerald Noir (Storefront 1358). LIGHT, despite the name — do not treat
       this as a dark palette. */
    --hexa-bg:  #F1F7F4;
    --hexa-pp:  #FFFFFF;
    --hexa-sf:  #DDEDE4;
    --hexa-ink: #0A211B;
    --hexa-sub: #5E7A6E;
    --hexa-a1:  #1E7A5F;
    --hexa-a2:  #7FD9AE;
    --hexa-acd: #062B24;
    --hexa-ln:  rgba(10, 33, 27, .12);
    --hexa-on:  #F2FFF8;

    --hexa-ink-rgb: 10, 33, 27;
}

.hexa[data-hexa-pal="lilac"] {
    /* Chrome Lilac (Storefront 1359). Its gradient runs LIGHT to DARK, the
       reverse of the other four — another reason a component never picks a
       stop by hand. */
    --hexa-bg:  #F5F4F8;
    --hexa-pp:  #FFFFFF;
    --hexa-sf:  #E8E6EF;
    --hexa-ink: #171423;
    --hexa-sub: #6C6880;
    --hexa-a1:  #A79BC8;
    --hexa-a2:  #4B4467;
    --hexa-acd: #2B2740;
    --hexa-ln:  rgba(23, 20, 35, .12);
    --hexa-on:  #F8F6FF;

    --hexa-ink-rgb: 23, 20, 35;
}


/* ---------------------------------------------------------------------------
   2. Derived tokens — declared once so no component re-types them.

   These are in a SECOND block on the same element rather than inside each
   palette, because they are compositions of the ten and must never be
   re-declared per palette. Adding a sixth palette means adding ten values, not
   fourteen.
   --------------------------------------------------------------------------- */

.hexa {
    /* THE gradient. One angle, both stops. Nothing else. */
    --hexa-grad: linear-gradient(120deg, var(--hexa-a1), var(--hexa-a2));
    /* The vertical variant, used only for the 4px rule down the coupon strip's
       inline-start edge (Storefront 290). Same stops, 180deg. */
    --hexa-grad-v: linear-gradient(180deg, var(--hexa-a1), var(--hexa-a2));

    /* The hexagon. A component sets width/height and gets the shape. */
    --hexa-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

    /* Radii. Two values exist in this theme and that is the whole scale. */
    --hexa-r: 2px;

    /* Type. Almarai for every word, Archivo for every numeral. */
    --hexa-font: 'Almarai', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hexa-num:  'Archivo', 'Almarai', system-ui, sans-serif;

    /* The page gutter, used by every full-width band (Storefront: clamp(14px,
       4cqi, 58px) appears on the hero, every section and the footer). */
    --hexa-gut: clamp(14px, 4cqi, 58px);
    /* The header's own narrower gutter (Storefront 78). */
    --hexa-gut-h: clamp(14px, 3cqi, 40px);

    /* Sticky offset for every aside in Patterns B and C (Storefront 486, 776,
       846, 1136, 1177 — all top:86px). */
    --hexa-sticky: 86px;

    /* Motion. The design's whole vocabulary; there is no `transition: all`. */
    --hexa-t-pal:  .45s ease;
    --hexa-t-line: .3s;
    --hexa-t-lift: .25s;
    --hexa-t-prog: .4s ease;
}


/* ---------------------------------------------------------------------------
   3. The frame.

   `container-type: inline-size` is what makes every cqi in this file mean
   anything. It also, unavoidably, makes .hexa a containing block for
   position:fixed — so the drawer, the toast and any modal are rendered as
   SIBLINGS of this element, each carrying its own .hexa class and palette
   attribute. See hexa-overlay below.
   --------------------------------------------------------------------------- */

.hexa {
    container-type: inline-size;
    background: var(--hexa-bg);
    color: var(--hexa-ink);
    font-family: var(--hexa-font);
    /* The palette switch animates, matching the design frame (Storefront 67). */
    transition: background var(--hexa-t-pal), color var(--hexa-t-pal);
}

/* An overlay host: a SIBLING of .hexa that carries the tokens but is NOT a
   container, so position:fixed inside it resolves against the viewport. Every
   drawer / toast / modal in this theme uses this wrapper. */
.hexa-overlay {
    container-type: normal;
}


/* ---------------------------------------------------------------------------
   4. Base resets.

   Every one of these is authored as `.hexa :where(...)` rather than `.hexa a`.
   `.hexa a` is (0,1,1) — the element selector counts — and would outrank a
   component class like `.hexa-btn` (0,1,0), silently repainting every button
   label. `:where()` contributes ZERO specificity, so these land at (0,1,0):
   still above the legacy sheet's bare `a`, still below any component that names
   its own value.
   --------------------------------------------------------------------------- */

.hexa :where(*, *::before, *::after) {
    box-sizing: border-box;
}

.hexa :where(a) {
    color: inherit;
    text-decoration: none;
    transition: color var(--hexa-t-line);
}

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

.hexa :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-family: var(--hexa-font);
    font-weight: 800;
    line-height: 1.05;
    color: inherit;
    letter-spacing: -.01em;
}

.hexa :where(p) {
    margin: 0;
}

.hexa :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hexa :where(img) {
    max-width: 100%;
    display: block;
}

.hexa :where(button) {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

.hexa :where(input, select, textarea) {
    font: inherit;
    color: inherit;
}

.hexa :where(input::placeholder, textarea::placeholder) {
    color: var(--hexa-sub);
    opacity: .8;
}

/* Vendor radius reset. Bootstrap and the legacy sheet both round controls; Hexa
   is square. This is a RESET, so it is deliberately broad — components below
   opt back in to 2px where the design has it. */
.hexa :where(input, select, textarea, button, .btn, .form-control, .form--control) {
    border-radius: 0;
}

.hexa ::selection {
    background: var(--hexa-a2);
    color: var(--hexa-on);
}


/* ---------------------------------------------------------------------------
   5. Utilities.
   --------------------------------------------------------------------------- */

/* The hexagon. Width and height come from the caller; the ratio is ~0.87. */
.hexa-hex {
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* The gradient-filled hexagon, which is how the mark is drawn everywhere. */
.hexa-hex--grad {
    background: var(--hexa-grad);
    color: var(--hexa-on);
}

/* Material Symbols. One class, used for every icon in the theme. `line-height:1`
   is what stops the ligature adding descender space inside a 38px button. */
.hexa-i {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-size: 19px;
    flex: 0 0 auto;
}

/* Numerals. Prices, counters, badges, totals — every figure in the design is
   Archivo, and every word is Almarai. */
.hexa-num {
    font-family: var(--hexa-num);
    font-weight: 700;
}

/* Gradient-clipped text. RESERVED: the design uses it only on the hero's second
   word, the cart total, the rating figure and the stat figures. It is not a
   general accent-text utility. */
.hexa-grad-text {
    background: var(--hexa-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Bidi isolation for a Latin figure inside Arabic copy. Without it "1 / 4"
   renders as "4 / 1" in RTL. The class name is HEXA'S OWN — writing another
   theme's name here styles nothing. */
.hexa-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* A horizontal snap rail (Pattern D). The scrollbar is hidden because the
   design pairs every rail with explicit arrow buttons. */
.hexa-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* A table/grid that must scroll rather than crush on a phone. */
.hexa-scroller {
    overflow-x: auto;
    scrollbar-width: none;
}

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

.hexa-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------------------
   6. Atoms — the button, field and chip the whole theme reuses.

   Values transcribed from the design's own controls; see the line reference on
   each block. A component that needs a variant extends these rather than
   re-declaring padding and type.
   --------------------------------------------------------------------------- */

/* The base button. Storefront 109/161/207: height or padding varies, the rest
   does not. */
.hexa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 24px;
    border: 0;
    border-radius: var(--hexa-r);
    font: 700 12.5px/1 var(--hexa-font);
    letter-spacing: .04em;
    white-space: nowrap;
    transition: background var(--hexa-t-line), color var(--hexa-t-line),
                border-color var(--hexa-t-line), transform var(--hexa-t-lift),
                filter var(--hexa-t-line);
}

/* Primary — the gradient fill. Hover BRIGHTENS rather than darkening, because
   there is no "darker accent" token that is correct in all five palettes
   (Chrome Lilac's gradient runs light-to-dark). Storefront 643/866. */
.hexa-btn--grad {
    background: var(--hexa-grad);
    color: var(--hexa-on);
}

.hexa-btn--grad:hover {
    filter: brightness(1.06);
    color: var(--hexa-on);
}

/* The hero / CTA variant lifts instead (Storefront 161, 355). */
.hexa-btn--lift:hover {
    transform: translateY(-2px);
}

/* Solid ink — the drawer trigger, the checkout button, the track button.
   Storefront 109/786/903. */
.hexa-btn--ink {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
}

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

/* Outline — "see all", "keep shopping", the secondary action everywhere.
   Storefront 207/578/904: 1px solid ink, inverting on hover. */
.hexa-btn--out {
    background: transparent;
    color: var(--hexa-ink);
    border: 1px solid var(--hexa-ink);
}

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

/* Hairline — the quieter outline, bordered with --hexa-ln instead of ink.
   Storefront 428/916/1163. */
.hexa-btn--line {
    background: transparent;
    color: var(--hexa-ink);
    border: 1px solid var(--hexa-ln);
    padding: 12px 18px;
    font-size: 11.5px;
}

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

/* The square icon button. 38px in the header, 42px on rail arrows, 34px in the
   drawer — the size is set by the caller, everything else is here.
   Storefront 100/121/205. */
.hexa-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    position: relative;
    transition: background var(--hexa-t-line), color var(--hexa-t-line),
                border-color var(--hexa-t-line);
}

.hexa-iconbtn:hover {
    background: var(--hexa-sf);
    color: var(--hexa-ink);
}

/* The inverting variant, used by rail arrows (Storefront 205-206). */
.hexa-iconbtn--inv:hover {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
}

/* A counter bubble on an icon button. SQUARE — there are no pills in Hexa.
   Storefront 103 (ink, wishlist) and 107 (gradient, bag). */
.hexa-count {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 9.5px/1 var(--hexa-num);
    pointer-events: none;
}

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

/* An empty badge is hidden, not omitted. The element must stay in the DOM for
   the header's counter refresher to find and fill it after an add-to-cart; a
   blade that renders it only when the count is non-zero gives the refresher
   nothing to write into, and the badge never appears until a page reload. */
.hexa-count:empty {
    display: none;
}

/* Text field. Storefront 474 (the select) and the checkout inputs. */
.hexa-field {
    width: 100%;
    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.4 var(--hexa-font);
    outline: none;
    transition: border-color var(--hexa-t-line);
}

.hexa-field:focus {
    border-color: var(--hexa-ink);
}

/* A chip / tag. Square, hairline, inverting. Storefront 265 (size chips),
   1140 (pagination). */
.hexa-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    padding: 8px 10px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 600 10.5px/1 var(--hexa-num);
    transition: background var(--hexa-t-line), color var(--hexa-t-line),
                border-color var(--hexa-t-line);
}

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

/* The eyebrow: a small caps-ish label preceded by a tiny gradient hexagon.
   Storefront 201/281/303. */
.hexa-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 700 10.5px/1 var(--hexa-font);
    letter-spacing: .2em;
    color: var(--hexa-sub);
}

.hexa-eyebrow::before {
    content: '';
    width: 6px;
    height: 7px;
    background: var(--hexa-grad);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
    display: block;
    flex: 0 0 auto;
}

/* A badge sitting on a product image. Storefront 245. */
.hexa-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 7px 11px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 10px/1 var(--hexa-font);
    z-index: 2;
    /* A badge overlaps the card's cover link. Without this it swallows the
       click and the card reads as broken. */
    pointer-events: none;
}

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


/* ---------------------------------------------------------------------------
   7. Section scaffolding — the four layout patterns.

   Declared once, used by every phase. A page blade picks a pattern class rather
   than re-deriving the grid, which is what keeps the column count identical
   across shop, category, search and wishlist.
   --------------------------------------------------------------------------- */

/* Every full-width band's horizontal padding. */
.hexa-band {
    padding-inline: var(--hexa-gut);
}

/* PATTERN A — the auto grid. N is supplied per use as --hexa-a-min; the design
   uses 215 on the listing, 200/300 for the density toggle, 190 in carousels,
   290 for category and journal cards, 220 for the trust strip.
   `min(100%, N)` is what keeps a single card from overflowing a narrow frame. */
.hexa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hexa-a-min, 215px)), 1fr));
    gap: clamp(10px, 1.5cqi, 20px);
}

/* auto-fit collapses empty tracks; the design uses it for content grids where a
   short row should stretch, and auto-fill for product grids where it must not. */
.hexa-grid--fit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hexa-a-min, 290px)), 1fr));
}

/* PATTERN B — content then a sticky aside. The aside's width is per use. */
.hexa-two {
    display: grid;
    grid-template-columns: 1fr minmax(var(--hexa-b-min, 250px), var(--hexa-b-max, 330px));
    gap: clamp(16px, 2.4cqi, 36px);
    align-items: start;
}

/* PATTERN C — a filter sidebar then the listing. */
.hexa-side {
    display: grid;
    grid-template-columns: minmax(var(--hexa-c-min, 190px), var(--hexa-c-max, 240px)) 1fr;
    gap: clamp(16px, 2.4cqi, 38px);
    align-items: start;
}

/* Shared by both asides. `min-width: 0` is what stops a long word or a wide
   table forcing the whole grid wider than the frame. */
.hexa-two > *,
.hexa-side > * {
    min-width: 0;
}

.hexa-aside {
    position: sticky;
    top: var(--hexa-sticky);
    display: flex;
    flex-direction: column;
}

/* THE ONE STRUCTURAL SWITCH. The design has zero media queries and one
   `narrow` boolean at 760px; this is it. Both two-pane patterns collapse to a
   single column and the sticky aside stops sticking. Nothing else in this file
   may add a breakpoint. */
@media (max-width: 760px) {
    .hexa-two,
    .hexa-side {
        grid-template-columns: 1fr;
    }

    .hexa-aside {
        position: static;
    }
}


/* ---------------------------------------------------------------------------
   8. Keyframes. The design's own set (Storefront 25-32), prefixed so they
   cannot collide with the legacy sheet's or another theme's.
   --------------------------------------------------------------------------- */

@keyframes hexa-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hexa-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hexa-marq {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes hexa-marq-r {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

@keyframes hexa-slide-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes hexa-pop {
    0%   { transform: scale(.5); opacity: 0; }
    70%  { transform: scale(1.06); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes hexa-pulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.5); }
}

/* Nobody's motion preference is worth a decorative marquee. */
@media (prefers-reduced-motion: reduce) {
    .hexa *,
    .hexa-overlay * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* ---------------------------------------------------------------------------
   8b. Print — the chrome comes off the page.

   Every screen in the theme is printable, and the invoice (Phase 3) is
   printed on purpose. None of the chrome belongs on paper.

   ⚠️ THESE RULES LIVE HERE, NOT IN THE LAYER THAT NEEDED THEM. They target
   Phase 1 blocks, and a block declared in two stylesheets is how a later edit
   silently restyles a page nobody was looking at. The rule is: the layer that
   DECLARES a block owns every rule about it, print included.

   Not a responsive breakpoint — a print query is not a width.
   --------------------------------------------------------------------------- */

@media print {
    .hexa-header,
    .hexa-ticker,
    .hexa-footer,
    .hexa-mobnav,
    .hexa-crumb,
    .hexa-pagehead,
    .hexa-overlay,
    .hexa-drawer,
    .hexa-toast {
        display: none !important;
    }
}


/* ===========================================================================
   9. CHROME — the announcement ticker (widget card 03).
   Storefront 69-75. A true marquee: the list is duplicated and translated -50%,
   which is why the animation lands exactly on a seam.
   =========================================================================== */

.hexa-ticker {
    display: flex;
    align-items: center;
    height: 34px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    overflow: hidden;
}

.hexa-ticker__track {
    display: flex;
    gap: 44px;
    white-space: nowrap;
    padding-inline-start: 44px;
    animation: hexa-marq var(--hexa-ticker-speed, 26s) linear infinite;
}

/* In RTL the track must travel the other way, or the text scrolls out of the
   side it entered from. */
[dir="rtl"] .hexa-ticker__track {
    animation-name: hexa-marq-r;
}

.hexa-ticker__msg {
    display: flex;
    align-items: center;
    gap: 44px;
    font: 700 11px/1 var(--hexa-font);
    letter-spacing: .04em;
}

/* The separator hexagon, drawn in --hexa-on because it sits on the gradient. */
.hexa-ticker__msg::after {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--hexa-on);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
    display: block;
    flex: 0 0 auto;
}

.hexa-ticker:hover .hexa-ticker__track {
    animation-play-state: paused;
}


/* ===========================================================================
   10. CHROME — the sticky header (widget card 02).
   Storefront 77-114.
   =========================================================================== */

.hexa-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /* The design's literal value. It is a translucent WHITE, not --hexa-pp,
       because the blur needs a fixed alpha to read the same over any content. */
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-header__row {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2cqi, 26px);
    padding-inline: var(--hexa-gut-h);
    height: clamp(58px, 5.4cqi, 70px);
}

/* ── Brand ───────────────────────────────────────────────────────────────── */

.hexa-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--hexa-ink);
    flex: 0 0 auto;
}

.hexa-brand__mark {
    width: 26px;
    height: 29px;
    font: 800 13px/1 var(--hexa-num);
}

.hexa-brand__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hexa-brand__name {
    font: 800 clamp(17px, 1.6cqi, 21px)/1 var(--hexa-num);
    letter-spacing: .24em;
}

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

/* A tenant that uploaded a logo gets the logo, capped to the bar height. */
.hexa-brand__img {
    max-height: 38px;
    width: auto;
    object-fit: contain;
}

/* ── Primary nav ─────────────────────────────────────────────────────────── */

.hexa-nav {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.7cqi, 24px);
    margin-inline-start: clamp(8px, 2cqi, 30px);
    /* position:static, so a child's absolutely-positioned sub-menu can span the
       whole header rather than the nav item. */
    position: static;
}

/* render_frontend_menu() emits `li > a` and, for a parent, a nested
   `ul.sub-menu`. These rules style what the PLATFORM emits — the design draws
   a different structure and it is the platform that decides the DOM. */
.hexa-nav > li {
    position: relative;
    display: flex;
    align-items: center;
}

.hexa-nav > li > a {
    position: relative;
    display: block;
    padding: 6px 0;
    white-space: nowrap;
    font: 700 11.5px/1 var(--hexa-font);
    letter-spacing: .06em;
    color: var(--hexa-ink);
}

/* The underline is a pseudo-element that grows on hover — the design animates
   `width` from 0 (Storefront 89). */
.hexa-nav > li > a::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 0;
    height: 2px;
    background: var(--hexa-grad);
    transition: width var(--hexa-t-line);
}

.hexa-nav > li > a:hover::after,
.hexa-nav > li.current-menu-item > a::after,
.hexa-nav > li.active > a::after {
    width: 100%;
}

.hexa-nav > li > a:hover {
    color: var(--hexa-acd);
}

/* ── The sub-menu panel ──────────────────────────────────────────────────── */
/* THE PLATFORM'S DOM, not the design's:
     li.menu-item-has-children
       └ ul.sub-menu            <- the panel
           └ li                 <- a column
               ├ a              <- the column heading
               └ ul.sub-menu    <- the links (MUST reset to static) */

.hexa-nav li.menu-item-has-children {
    position: static;
}

.hexa-nav .sub-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 70;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: clamp(14px, 2cqi, 32px);
    padding: clamp(18px, 2.4cqi, 34px) var(--hexa-gut-h);
    background: var(--hexa-pp);
    border-top: 1px solid var(--hexa-ln);
    border-bottom: 1px solid var(--hexa-ln);
    box-shadow: 0 26px 50px -28px rgba(var(--hexa-ink-rgb), .35);
    animation: hexa-fade .2s ease;
}

.hexa-nav > li:hover > .sub-menu,
.hexa-nav > li:focus-within > .sub-menu {
    display: grid;
}

.hexa-nav .sub-menu > li > a {
    display: block;
    padding-bottom: 8px;
    font: 700 11px/1 var(--hexa-font);
    letter-spacing: .14em;
    color: var(--hexa-sub);
}

/* The nested list is the column's links. Resetting position is not optional:
   left absolute it opens a second floating panel on top of the first. */
.hexa-nav .sub-menu .sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
}

.hexa-nav .sub-menu .sub-menu > li > a {
    padding: 0;
    font: 300 12px/1.5 var(--hexa-font);
    letter-spacing: 0;
    color: var(--hexa-ink);
}

.hexa-nav .sub-menu .sub-menu > li > a:hover {
    color: var(--hexa-acd);
}

/* ── Header actions ──────────────────────────────────────────────────────── */

.hexa-header__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The search "pill" — a bordered field. Storefront 95-98. */
/* ⚠️ `.hexa-search` IS A <form>, NOT A LINK. It shipped as an <a> and the
   search route rejected the empty query, bouncing the shopper to the homepage.
   `position:relative` is what the suggestion dropdown anchors to. */
.hexa-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-sub);
    max-width: 210px;
    transition: border-color var(--hexa-t-line), color var(--hexa-t-line);
}

.hexa-search:hover,
.hexa-search:focus-within {
    border-color: var(--hexa-ink);
    color: var(--hexa-ink);
}

/* Kept: the ticker and drawer promo reuse this. The header pill no longer
   renders a __ph span (it is a real placeholder attribute now). */
.hexa-search__ph {
    font: 400 11.5px/1 var(--hexa-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hexa-search input {
    border: 0;
    outline: none;
    background: none;
    width: 100%;
    min-width: 0;
    font: 400 11.5px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-search input::placeholder {
    color: var(--hexa-sub);
    opacity: 1;
}

/* The mobile row's field. It takes the whole row beside the Shop button, so the
   210px cap that suits the wide header would leave it stranded. */
.hexa-search--mob {
    flex: 1;
    max-width: none;
}

/* ── Live-search suggestions ────────────────────────────────────────────────
   ⚠️ THE MARKUP INSIDE IS THE PLATFORM'S, AND SO ARE TWO RULES THAT FIGHT THIS
   BOX. Both had to be beaten explicitly; the first version of this block did
   not, and Ahmed's shop showed a full-height column of prices floating over the
   hero with the dropdown itself measuring 1.6px wide.

   1. `common.css:10473` sets

          .product-suggestion-list { height: calc(100vh - 210px); overflow-y: scroll; }

      That is written for the platform's own full-screen search overlay, where
      the list IS the page. Inside a 210px header pill it becomes a
      viewport-tall strip. `height: auto` is therefore LOAD-BEARING — without
      it the list is always ~870px tall no matter how many results there are,
      and `:empty { display: none }` cannot save it because niceScroll (below)
      keeps the node non-empty.

   2. `main.js:49` runs

          $(".product-suggestion-list, …").niceScroll({})

      unconditionally on page load. niceScroll WRAPS the element, adds
      `tabindex="1"`, writes inline `overflow:hidden; outline:none`, and injects
      its own absolutely-positioned rail — that is where the `1.6 × 127.6`
      box in the inspector came from. It cannot be prevented from a stylesheet
      and must not be disabled globally (the platform's other three targets
      rely on it), so its inline overflow is overridden with `!important` and
      its rail is hidden. This is the documented exception to the project's
      no-`!important` rule: the value is inline, so nothing else can win.

   `:empty` still matters: the handler only ever REPLACES the list on a match,
   so an empty bordered box would otherwise sit under the header on every page. */
.hexa-suggest {
    position: absolute;
    /* Anchored to the pill's INLINE-END edge and allowed to grow inward. The
       pill is capped at 210px, which is too narrow for a name plus two prices,
       so `inset-inline: 0` (the first version) produced a 210px dropdown with
       everything ellipsized to nothing. Anchoring one edge and setting a
       min-width lets it overhang toward the page centre instead — and because
       both properties are logical, it overhangs the correct way in RTL without
       a second rule. */
    inset-inline-end: 0;
    inset-inline-start: auto;
    min-inline-size: 320px;
    max-inline-size: min(360px, calc(100vw - 32px));
    inset-block-start: calc(100% + 8px);
    z-index: 60;
    max-block-size: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.hexa-suggest .product-suggestion-list:empty {
    display: none;
}

.hexa-suggest .product-suggestion-list {
    /* Beats common.css's `height: calc(100vh - 210px)`. See the note above. */
    height: auto;
    max-height: none;
    /* niceScroll writes `overflow:hidden` INLINE, so only !important wins. */
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--hexa-pp);
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .3);
}

/* niceScroll's own furniture: the rail it injects as a sibling, and the
   wrapper it may put around the list. Hidden rather than removed, because the
   plugin keeps a handle on both. */
.hexa-suggest .nicescroll-rails {
    display: none !important;
}

/* ⚠️ THE ROW IS THE <a>, NOT THE <li>.

   `TenantFrontendController::topbar_search()` emits exactly this per result:

     <li class="product-suggestion-list-item">
       <a class="product-suggestion-list-link">
         <div class="product-image">…img…</div>
         <div class="product-info">
           <div class="product-info-top"><h6 class="product-name">…</h6></div>
           <div class="product-price"><div class="price-update-through">
             <span class="flash-price">…</span><span class="flash-old-prices">…</span>
           </div></div>
         </div>
       </a>
     </li>

   The first version of this block put `display:flex` on the `<li>`, which has
   ONE child, so the thumbnail and the text never became a row — and
   `common.css:10491` sets `.product-suggestion-list-link { display:block }`
   at a narrower width, so the name and price stacked one glyph per line. That
   is the vertical column of letters in Ahmed's screenshot.

   The `<li>` is therefore a plain block, and the `<a>` is the flex row. */
.hexa-suggest .product-suggestion-list-item {
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hexa-suggest .product-suggestion-list-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-inline-size: 0;
    padding: 8px;
    /* The design's only box radius. I tried 8px (Mira's language) and then
       1px, and the gate rejected both — correctly. The mock does contain 1px,
       but all seven uses are in its own DEMO TOOLBAR (the palette, device and
       language switchers), which is not part of the storefront. The shop
       itself is 2px and 50%, nothing else. */
    border-radius: var(--hexa-r);
    color: var(--hexa-ink);
    text-decoration: none;
}

.hexa-suggest .product-suggestion-list-link:hover {
    background: var(--hexa-sf);
    color: var(--hexa-acd);
}

/* The text column. `min-inline-size:0` is what lets a long product name
   ellipsize instead of forcing the flex row wider than the 210px pill. */
.hexa-suggest .product-info {
    flex: 1;
    min-inline-size: 0;
}

.hexa-suggest .product-info-top {
    margin-block-start: 0;
}

.hexa-suggest .product-name {
    margin: 0;
    font: 500 12.5px/1.35 var(--hexa-font);
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prices sit on ONE line beside each other. common.css gives these 16-18px,
   which is larger than the product name inside a header dropdown. */
.hexa-suggest .product-price {
    margin-block-start: 2px !important;
}

.hexa-suggest .price-update-through {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.hexa-suggest .flash-price {
    font: 600 12px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-suggest .flash-old-prices {
    font: 400 11px/1 var(--hexa-font);
    color: var(--hexa-sub);
    text-decoration: line-through;
}

/* The thumbnail. common.css sizes this 80-100px square, which is taller than
   the whole dropdown row. */
.hexa-suggest .product-image {
    inline-size: 40px;
    max-inline-size: 40px;
    block-size: 48px;
    padding: 0;
    border: 0;
    flex: none;
    overflow: hidden;
    border-radius: var(--hexa-r);
}

.hexa-suggest .product-image img {
    inline-size: 100%;
    block-size: 100%;
    max-block-size: none;
    object-fit: cover;
}

/* The drawer trigger. Solid ink with a two-line "hamburger" whose bars are
   deliberately unequal (14px / 9px, Storefront 110). */
.hexa-menubtn {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--hexa-r);
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 11.5px/1 var(--hexa-font);
    letter-spacing: .05em;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

.hexa-menubtn__bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hexa-menubtn__bars span {
    height: 1.5px;
    background: currentColor;
    display: block;
}

.hexa-menubtn__bars span:first-child { width: 14px; }
.hexa-menubtn__bars span:last-child  { width: 9px; }

/* ── The 760px switch ────────────────────────────────────────────────────── */
/* Both headers are in the DOM and CSS picks one. The menu comes from
   render_frontend_menu(), a rendering slot — building it twice server-side
   would mean two menu trees to keep in sync. */

.hexa-header__mob {
    display: none;
    align-items: center;
    gap: 8px;
    padding-inline: var(--hexa-gut-h);
    padding-block: 10px;
    border-top: 1px solid var(--hexa-ln);
}

@media (max-width: 760px) {
    .hexa-header__wide .hexa-nav,
    .hexa-header__wide .hexa-search {
        display: none;
    }

    .hexa-header__mob {
        display: flex;
    }
}


/* ===========================================================================
   11. CHROME — the side drawer (widget card 18).
   Storefront 116-144.

   Rendered as a SIBLING of .hexa inside .hexa-overlay. Nested inside the frame
   it would be trapped in the page column, because container-type makes .hexa a
   containing block for position:fixed.
   =========================================================================== */

.hexa-drawer {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
}

.hexa-drawer.is-open {
    display: block;
}

.hexa-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 13, 12, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: hexa-fade .3s ease;
    border: 0;
    width: 100%;
}

.hexa-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(420px, 88%);
    max-height: 100%;
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    display: flex;
    flex-direction: column;
    animation: hexa-slide-in .34s cubic-bezier(.2, .8, .2, 1);
    box-shadow: -30px 0 70px -20px rgba(0, 0, 0, .4);
}

/* The shadow must fall the other way when the panel is on the left. */
[dir="rtl"] .hexa-drawer__panel {
    box-shadow: 30px 0 70px -20px rgba(0, 0, 0, .4);
}

.hexa-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid var(--hexa-ln);
}

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

.hexa-drawer__body {
    flex: 1;
    overflow: auto;
    padding: 10px 26px 26px;
}

/* The drawer's menu is the SAME rendering slot as the header's. Here the tree
   is flattened to an indented list rather than a panel. */
.hexa-drawer__nav > li > a,
.hexa-drawer__nav .sub-menu > li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hexa-ln);
    color: var(--hexa-ink);
    font: 700 clamp(17px, 1.9cqi, 22px)/1.1 var(--hexa-font);
}

.hexa-drawer__nav > li > a:hover,
.hexa-drawer__nav .sub-menu > li > a:hover {
    color: var(--hexa-acd);
}

/* Flattened, never floating. */
.hexa-drawer__nav .sub-menu {
    position: static;
    display: block;
    padding: 0;
    padding-inline-start: 18px;
    background: none;
    border: 0;
    box-shadow: none;
}

.hexa-drawer__nav .sub-menu > li > a {
    font-size: 13px;
    font-weight: 400;
    color: var(--hexa-sub);
}

/* The row number, in Archivo because it is a figure. */
.hexa-drawer__n {
    font: 600 10px/1 var(--hexa-num);
    color: var(--hexa-sub);
    min-width: 18px;
}

.hexa-drawer__promo {
    margin-top: 22px;
    position: relative;
    overflow: hidden;
}

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

.hexa-drawer__promo-cap {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 13, 12, .86), transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px;
    /* The caption covers the image; only its button should take clicks. */
    pointer-events: none;
}

.hexa-drawer__promo-cap > * {
    pointer-events: auto;
}

.hexa-drawer__promo-title {
    font: 700 15px/1.3 var(--hexa-font);
    color: #FFF;
}

.hexa-drawer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 20px;
}

.hexa-drawer__links > a {
    padding: 13px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 400 12px/1 var(--hexa-font);
    text-align: center;
    transition: background var(--hexa-t-line);
}

.hexa-drawer__links > a:hover {
    background: var(--hexa-sf);
}


/* ===========================================================================
   12. CHROME — the breadcrumb (widget card 19).
   Storefront 464-466 (the shop screen's own crumb, which is the wide version
   and therefore the authority) and Widgets 522-524.
   =========================================================================== */

.hexa-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 16px;
    padding-inline: var(--hexa-gut);
    border-bottom: 1px solid var(--hexa-ln);
    font: 300 11px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-crumb a {
    color: var(--hexa-sub);
}

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

/* The current page. */
.hexa-crumb__cur {
    color: var(--hexa-ink);
}

/* A plain "/" — direction-neutral, so it needs no RTL handling, unlike a
   chevron. The design uses exactly this character. */
.hexa-crumb__sep {
    color: var(--hexa-sub);
    opacity: .7;
}

/* The page title, when the breadcrumb doubles as the page head
   (Storefront 467-471). */
.hexa-pagehead {
    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-pagehead__title {
    font: 800 clamp(24px, 3.6cqi, 46px)/1.05 var(--hexa-font);
}

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


/* ===========================================================================
   13. CHROME — the footer (widget card 16).
   Storefront 1294-1332.
   =========================================================================== */

.hexa-footer {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    padding-inline: var(--hexa-gut);
    padding-block: clamp(30px, 4.4cqi, 64px) 0;
    overflow: hidden;
}

/* On ink, every shade is the page ground at an alpha. These are the design's
   literal alphas, re-expressed against --hexa-bg so they follow the palette
   instead of freezing Ember Rose's #F6F2EF. */
.hexa-footer {
    --hexa-f-dim:  color-mix(in srgb, var(--hexa-bg) 65%, transparent);
    --hexa-f-mid:  color-mix(in srgb, var(--hexa-bg) 86%, transparent);
    --hexa-f-head: color-mix(in srgb, var(--hexa-bg) 50%, transparent);
    --hexa-f-line: color-mix(in srgb, var(--hexa-bg) 16%, transparent);
    --hexa-f-edge: color-mix(in srgb, var(--hexa-bg) 22%, transparent);
}

.hexa-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: clamp(20px, 3cqi, 44px);
    padding-bottom: clamp(22px, 3cqi, 42px);
}

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

.hexa-footer__brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hexa-footer__mark {
    width: 24px;
    height: 27px;
    font: 800 12px/1 var(--hexa-num);
}

.hexa-footer__name {
    font: 800 19px/1 var(--hexa-num);
    letter-spacing: .24em;
}

.hexa-footer__tagline {
    max-width: 34ch;
    font: 300 11.5px/1.8 var(--hexa-font);
    color: var(--hexa-f-dim);
}

/* Widget-zone headings. render_frontend_sidebar() emits the widget's own title
   element, so this styles what the PLATFORM emits rather than a class of ours. */
.hexa-footer__col h2,
.hexa-footer__col h3,
.hexa-footer__col h4,
.hexa-footer__col h5,
.hexa-footer__col .widget-title,
.hexa-footer__head {
    font: 700 11px/1 var(--hexa-font);
    letter-spacing: .14em;
    color: var(--hexa-f-head);
    margin: 0;
}

/* Footer link columns are ALSO a rendering slot; a menu widget emits a nested
   ul.sub-menu here too, and it must flatten rather than float. */
.hexa-footer__col ul,
.hexa-footer__col .sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    list-style: none;
}

.hexa-footer__col .sub-menu {
    padding-inline-start: 14px;
    margin-top: 12px;
}

.hexa-footer__col a {
    font: 300 12px/1 var(--hexa-font);
    color: var(--hexa-f-mid);
}

.hexa-footer__col a:hover {
    color: #FFF;
}

.hexa-footer__text {
    font: 300 12px/1.7 var(--hexa-font);
    color: var(--hexa-f-mid);
}

/* Social squares. Square, hairline, gradient on hover (Storefront 1304). */
.hexa-footer__social {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.hexa-footer__social a {
    width: 34px;
    height: 34px;
    border: 1px solid var(--hexa-f-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10px/1 var(--hexa-num);
    color: var(--hexa-bg);
    transition: background var(--hexa-t-line), border-color var(--hexa-t-line),
                color var(--hexa-t-line);
}

.hexa-footer__social a:hover {
    background: var(--hexa-grad);
    border-color: transparent;
    color: var(--hexa-on);
}

/* The WhatsApp / contact button (Storefront 1320). */
.hexa-footer__cta {
    align-self: flex-start;
    margin-top: 4px;
    padding: 11px 16px;
    border: 1px solid color-mix(in srgb, var(--hexa-bg) 30%, transparent);
    font: 700 11px/1 var(--hexa-font);
    color: var(--hexa-bg);
    transition: background var(--hexa-t-line), color var(--hexa-t-line),
                border-color var(--hexa-t-line);
}

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

.hexa-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-block: 16px;
    border-top: 1px solid var(--hexa-f-line);
}

.hexa-footer__copy {
    font: 300 11px/1 var(--hexa-font);
    color: color-mix(in srgb, var(--hexa-bg) 55%, transparent);
}

.hexa-footer__pay {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hexa-footer__pay span {
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--hexa-bg) 20%, transparent);
    font: 600 9.5px/1 var(--hexa-num);
    color: color-mix(in srgb, var(--hexa-bg) 75%, transparent);
}

/* The tenant's two bottom widget zones. They carry whatever a shop configured,
   so this only supplies rhythm — never a fixed column count, because the zones
   may be empty. */
.hexa-footer__zones:not(:empty) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
}

.hexa-footer__zones a {
    color: var(--hexa-f-mid);
    font: 300 11.5px/1.6 var(--hexa-font);
}

.hexa-footer__zones a:hover {
    color: #FFF;
}

/* The oversized outlined wordmark that closes the page (Storefront 1331). */
.hexa-footer__word {
    font: 800 clamp(50px, 15cqi, 190px)/.8 var(--hexa-num);
    letter-spacing: .02em;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--hexa-bg) 14%, transparent);
    white-space: nowrap;
    margin-inline-start: -.04em;
    padding-bottom: 6px;
    /* Purely decorative and very wide — it must never eat a click or announce
       itself to a screen reader. */
    pointer-events: none;
    user-select: none;
}


/* ===========================================================================
   14. CHROME — store notices / the add-to-cart toast (widget card 17).
   Storefront 1334-1341. Also a SIBLING of the frame, for the same
   position:fixed reason as the drawer.
   =========================================================================== */

.hexa-toast {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-start: 22px;
    z-index: 99;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    border: 1px solid var(--hexa-ln);
    box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .4);
    animation: hexa-pop .32s cubic-bezier(.2, .8, .2, 1);
    max-width: min(420px, calc(100vw - 44px));
}

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

.hexa-toast__img {
    width: 40px;
    height: 46px;
    object-fit: cover;
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
    background: var(--hexa-sf);
    flex: 0 0 auto;
}

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

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

.hexa-toast__name {
    font: 300 11px/1.3 var(--hexa-font);
    color: var(--hexa-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hexa-toast__cta {
    padding: 11px 15px;
    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;
    margin-inline-start: auto;
}


/* ===========================================================================
   14b. CHROME — the mobile bottom tab bar (widget card `isMobileBar`, lower bar).
   Widgets 1257-1278.

   ⚠️ THE DISPLAY CONTRACT IS THE PLATFORM'S, NOT THE DESIGN'S.

   `custom-style.css` ships `.mobile-nav { display:none }` unconditionally at
   (0,1,0), then turns it on with `display:flex` INSIDE
   `@media (min-width:300px) and (max-width:991.98px)`. So a rule of ours that
   sets `display` outside a query — and every `.hexa .hexa-mobnav` is at least
   (0,2,0) — switches the bar on at EVERY width, and it lands in normal flow
   under the footer because `position:fixed` lives in that query too. That is
   exactly how Orchid's mobile nav shipped onto desktop.

   So: state the hidden default at matching specificity, and put every visible
   property inside the platform's own 991.98px query. This is the ONE place in
   this file where a breakpoint other than 760px is correct — it is not Hexa's
   breakpoint, it is the platform element's.
   =========================================================================== */

.hexa .hexa-mobnav {
    display: none;
}

@media (min-width: 300px) and (max-width: 991.98px) {
    .hexa .hexa-mobnav {
        display: flex;
        align-items: stretch;
        background: var(--hexa-pp);
        border-top: 1px solid var(--hexa-ln);
        /* The design's own shadow for this bar (Widgets 1260), which lifts it
           off the page content scrolling underneath. */
        box-shadow: 0 -12px 30px -20px rgba(0, 0, 0, .4);
    }
}

/* Each tab takes an equal share (Widgets 1270: `flex:1`). With flex:1 the
   number of tabs is irrelevant, which is why the blade emits no column count. */
.hexa-mobnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 11px 4px;
    position: relative;
    color: var(--hexa-sub);
    /* A deviation from the card, and a deliberate one: the card is a static
       preview with no touch target minimum. 44px is the accessibility floor. */
    min-height: 44px;
}

.hexa-mobnav__item.is-active {
    color: var(--hexa-acd);
}

.hexa-mobnav__label {
    font: 400 9px/1 var(--hexa-font);
}

/* The badge on a tab sits inside the tab, not on an icon button, so it needs
   its own placement rather than .hexa-count's -6px overhang. */
.hexa-mobnav__item .hexa-count {
    inset-block-start: 6px;
    inset-inline-end: calc(50% - 22px);
}


/* ===========================================================================
   15. LEGACY CONTAINMENT.

   hexfashion.css loads BEFORE this file and paints shared platform controls
   from --main-color-one/two/three (the OLD theme-colour setting). Those
   controls render inside the new chrome, so each is re-pointed at the palette
   here.

   Losing to the legacy sheet is a SPECIFICITY problem, not a load-order one:
   its selectors are 4-6 classes deep. `:where(.hexa)` adds scope at ZERO
   specificity cost, so these rules match the legacy depth without !important.
   =========================================================================== */

/* The ajax wash that covers any cart button mid-request. */
:where(.hexa) .cart-loading::before,
:where(.hexa-overlay) .cart-loading::before {
    background: var(--hexa-grad);
    opacity: .12;
}

/* Back-to-top: square, ink, gradient on hover. */
:where(.hexa) .back-to-top,
:where(.hexa-overlay) .back-to-top,
body.hexfashion .back-to-top {
    border-radius: 0;
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    border: 0;
}

body.hexfashion .back-to-top:hover {
    background: var(--hexa-grad);
    color: var(--hexa-on);
}

/* ⚠️ THE COLOUR RULES THAT USED TO BE HERE HAVE MOVED into the
   `.hexa-suggest` block in section 10, and this note is what is left.

   They were written in PHASE 1, when the header search was a LINK and this
   theme had no dropdown of its own — they existed only to re-colour whatever
   the shared footer partial might emit. In Phase 5 the header became a real
   form with `.hexa-suggest`, and these rules quietly became the enemy:

     `body.hexfashion .product-suggestion-list`   = (0,1,1) + element
     `.hexa-suggest .product-suggestion-list`     = (0,1,1) + element

   Equal specificity, and this block sits ~750 lines LATER in the same file, so
   it won every tie. It re-applied a `border` and `background` to a list that
   the newer block had already styled, and — because it said nothing about
   `height` — left `common.css`'s `height: calc(100vh - 210px)` untouched.
   Result on the live shop: a viewport-tall column of prices floating over the
   hero.

   Two rules for the same element in one stylesheet is the actual defect. Do not
   reintroduce a `body.hexfashion .product-suggestion-list` rule; style the list
   through `.hexa-suggest`, which is scoped to the header that owns it. */


/* ===========================================================================
   16. The injected language + region switchers.

   `tenant/frontend/partials/navbar.blade.php` injects these at runtime and
   writes INLINE styles with !important of its own, because one injector has to
   survive eight themes. Everything here therefore needs !important too — this
   is the one place in the file where that is correct rather than a smell.

   The trigger is restyled to read as one of the 38px icon buttons beside it,
   and the caret is a Line Awesome glyph (the injector's markup), not a
   Material Symbol.
   =========================================================================== */

.hexa-lang .selected-language,
.hexa-lang .ov-region-current {
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid var(--hexa-ln) !important;
    border-radius: var(--hexa-r) !important;
    background: transparent !important;
    color: var(--hexa-ink) !important;
    font: 700 11.5px/1 var(--hexa-font) !important;
    letter-spacing: .05em !important;
    gap: 6px !important;
    transition: background .3s, color .3s, border-color .3s !important;
}

.hexa-lang .selected-language:hover,
.hexa-lang .ov-region-current:hover {
    background: var(--hexa-sf) !important;
    border-color: var(--hexa-ink) !important;
    color: var(--hexa-ink) !important;
}

.hexa-lang .selected-language i,
.hexa-lang .ov-region-current i {
    font-size: 11px !important;
    color: var(--hexa-sub) !important;
}

.hexa-lang .language_dropdown ul,
.hexa-lang .ov-region-dd ul {
    border-radius: 0 !important;
    background: var(--hexa-pp) !important;
    border: 1px solid var(--hexa-ln) !important;
    box-shadow: 0 22px 50px -18px rgba(var(--hexa-ink-rgb), .35) !important;
    padding: 6px !important;
    min-width: 132px !important;
}

.hexa-lang .language_dropdown ul li a,
.hexa-lang .ov-region-dd ul li a {
    border-radius: 0 !important;
    padding: 9px 12px !important;
    font: 400 11.5px/1 var(--hexa-font) !important;
    color: var(--hexa-ink) !important;
}

.hexa-lang .language_dropdown ul li a:hover,
.hexa-lang .language_dropdown ul li a.active,
.hexa-lang .ov-region-dd ul li a:hover,
.hexa-lang .ov-region-dd ul li a.active {
    background: var(--hexa-sf) !important;
    color: var(--hexa-acd) !important;
}