/* ===========================================================================
   HEXA REDESIGN — homepage bands + sale layer (Phase 5)
   ===========================================================================

   The twelve PageBuilder bands the design's homepage is made of, the brand
   marquee widget, and the sale/outlet screen.

   Design source: "Hexa Storefront.dc.html"
     onHome 146-459 — every band below, in the order the design stacks them
     onSale 1196-1253
   and "Hexa Widgets.dc.html"
     isHero 1347   isTrust 1353   isCatRail 1355   isTabsGrid 1357
     isBanners 1359   isCoupon 1361   isTopChart 1363   isDrop 1365
     isLookbook 1367   isReviews 1369   isJournal 1371   isNewsletter 1373
     isBrands 1375

   ---------------------------------------------------------------------------
   WHY A FIFTH FILE
   ---------------------------------------------------------------------------
   One layer per phase, loading after hexa.css, hexa-shop.css, hexa-flow.css
   and hexa-account.css. Each layer OWNS its block names: a `.hexa-<block>`
   declared here appears in no earlier sheet, and `hexa_css_check.php` fails the
   build if that stops being true. That is what lets five files cascade in a
   fixed order without any of them needing !important.

   ⚠️ THIS LAYER IS DIFFERENT FROM THE OTHER FOUR IN ONE WAY: its markup is
   rendered by PAGE BUILDER ADDONS, not by theme blades. Three consequences,
   and all three are load-bearing:

     1. An addon's HTML is CACHED for 24h. Anything that must run per-render
        cannot live in a `@push`, and anything stateful has to be re-derivable
        from the DOM.
     2. A band can appear MORE THAN ONCE on a page, and in any order, because a
        merchant drags them. So no rule may assume "the first one", no id may
        be a constant, and every inline script scopes itself to its own root.
     3. A band can be dropped onto ANY page — the About page, a CMS page —
        beside bands from other phases. Each band therefore carries its own
        `.hexa` wrapper and its own palette attribute, exactly like the Phase 4
        addons do.

   ---------------------------------------------------------------------------
   BLOCKS DECLARED HERE
   ---------------------------------------------------------------------------
   hexa-hero    hexa-trust   hexa-catrail  hexa-tabs   hexa-promo
   hexa-coupon  hexa-chart   hexa-drop     hexa-look   hexa-revs
   hexa-jgrid   hexa-news    hexa-marq     hexa-sale

   `hexa-jgrid`, not `hexa-jn`: Phase 4's journal INDEX is `hexa-jn` and this is
   the homepage's three-card teaser. Two different components, two names — the
   alternative is one block declared in two layers, which is exactly the
   collision the gate exists to catch.

   ---------------------------------------------------------------------------
   WHAT THIS LAYER REUSES RATHER THAN REDECLARES
   ---------------------------------------------------------------------------
   .hexa-btn / --grad / --ink / --out / --line / --lift    hexa.css section 6
   .hexa-chip, .hexa-eyebrow, .hexa-badge                  hexa.css section 6
   .hexa-hex, .hexa-i, .hexa-num, .hexa-grad-text, .hexa-ltr   hexa.css 5
   .hexa-rail, .hexa-scroller, .hexa-sr                    hexa.css 5
   .hexa-band, .hexa-grid, .hexa-grid--fit, .hexa-two      hexa.css 7
   .hexa-card (the ONE product card)                       hexa-shop.css
   @keyframes hexa-kb                                      hexa-shop.css
   @keyframes hexa-marq / hexa-marq-r / hexa-pulse         hexa.css 8

   ⚠️ THE KEYFRAMES ARE NOT REDECLARED HERE. `hexa-marq-r` and `hexa-pulse` are
   already in hexa.css and `hexa-kb` in hexa-shop.css — a second @keyframes with
   the same name in a LATER sheet silently wins for every user of the first,
   including ones this phase never touched. Phase 4 recorded the same rule.

   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   0. Band-level tokens.

   Two scrims and one dark-band foreground set, declared here because Phase 5 is
   the first layer that paints text over photography at full-bleed width.
   --------------------------------------------------------------------------- */

.hexa-hero,
.hexa-promo,
.hexa-look,
.hexa-catrail,
.hexa-chart {
    /* The design's three photo scrims, transcribed rather than approximated:
       the hero runs to .9 over a 45% midpoint (SF:152), the category and
       lookbook captions to .9/.92 with no midpoint (SF:215, 376), and the
       promo pair carries its own per-banner value (SF:1942). */
    --hexa-scrim-hero: linear-gradient(to top, rgba(15, 13, 12, .9) 0%, rgba(15, 13, 12, .35) 45%, rgba(15, 13, 12, .15) 100%);
    --hexa-scrim-cap: linear-gradient(to top, rgba(15, 13, 12, .9), transparent);
    --hexa-scrim-look: linear-gradient(to top, rgba(15, 13, 12, .92), transparent);
}

/* On a photograph or the ink band the design never uses --hexa-sub for the
   quiet text — it uses white at a fixed opacity, because --hexa-sub is a
   mid-grey tuned for a LIGHT surface and disappears on a dark one. These are
   the four levels it actually uses. */
.hexa-hero,
.hexa-promo,
.hexa-look,
.hexa-catrail,
.hexa-drop,
.hexa-coupon,
.hexa-sale {
    --hexa-onphoto:      rgba(255, 255, 255, .76);
    --hexa-onphoto-dim:  rgba(255, 255, 255, .55);
    --hexa-onphoto-line: rgba(255, 255, 255, .35);
    --hexa-onphoto-soft: rgba(255, 255, 255, .16);
}


/* ---------------------------------------------------------------------------
   1. HERO SLIDER — SF:148-184. Widgets isHero 1347.

   Full-bleed, `height: clamp(430px, 58cqi, 700px)` over --hexa-ink, with every
   slide absolutely stacked and crossfaded on opacity.

   ⚠️ OPACITY, NOT display, and the reason is not stylistic: the design
   transitions `opacity .9s ease` (SF:150), and `display:none` cannot be
   transitioned at all — the slide would pop. Every slide therefore stays in
   the layout and the inactive ones are simply transparent and inert.
   --------------------------------------------------------------------------- */

.hexa-hero {
    position: relative;
    height: clamp(430px, 58cqi, 700px);
    background: var(--hexa-ink);
    overflow: hidden;
}

.hexa-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity .9s ease;
    /* An invisible slide must not eat the click meant for the visible one's
       button. */
    pointer-events: none;
}

.hexa-hero__slide.is-active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

.hexa-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* SF:151 — the design frames faces and torsos slightly above centre. */
    object-position: 50% 22%;
    background: var(--hexa-sf);
    animation: hexa-kb 11s ease-out infinite alternate;
}

/* A slow infinite zoom is exactly the motion vestibular disorders react to,
   and it runs on the largest element on the page. */
@media (prefers-reduced-motion: reduce) {
    .hexa-hero__img {
        animation: none;
    }
}

/* The merchant's own opt-out, which is a different thing from the reader's:
   this one is a design decision that applies to everybody. */
.hexa-hero__img--still {
    animation: none;
}

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

/* The content rail sits on the BOTTOM edge, both columns aligned to their
   baseline-end, wrapping to a stack when the frame is narrow (SF:155). */
.hexa-hero__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 5;
    padding: clamp(22px, 4cqi, 58px) clamp(16px, 4cqi, 58px) clamp(20px, 3cqi, 40px);
    display: flex;
    align-items: flex-end;
    gap: 26px;
    flex-wrap: wrap;
}

.hexa-hero__copy {
    flex: 1;
    min-width: min(100%, 320px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4cqi, 18px);
}

/* NOT `.hexa-eyebrow`: the shared eyebrow's marker is a 6x7 hexagon and this
   one is a 26px rule (SF:157), it is white rather than --hexa-sub, and its
   tracking is .18em rather than .2em. Three differences is a different
   component, not a variant. */
.hexa-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 11px/1 var(--hexa-font);
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .72);
}

.hexa-hero__eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--hexa-grad);
    display: block;
    flex: 0 0 auto;
}

.hexa-hero__title {
    margin: 0;
    font: 800 clamp(30px, 6.4cqi, 84px)/.95 var(--hexa-font);
    color: #FFF;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* The design's ONE gradient-clipped hero word (SF:158). `.hexa-grad-text` is
   the shared utility; this only adds the line break the design draws. */
.hexa-hero__t2 {
    display: block;
}

.hexa-hero__sub {
    margin: 0;
    max-width: 44ch;
    font: 300 clamp(12px, 1.25cqi, 15.5px)/1.75 var(--hexa-font);
    color: var(--hexa-onphoto);
}

.hexa-hero__ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* The secondary hero button is the ONLY button in the design bordered in
   translucent white — it sits on a photograph, where --hexa-ln is invisible
   (SF:162). */
.hexa-hero__cta2 {
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, .42);
    background: transparent;
    color: #FFF;
    font-weight: 400;
}

.hexa-hero__cta2:hover {
    background: rgba(255, 255, 255, .14);
    color: #FFF;
}

/* The counter column: NN / NN, a progress rule, then the controls. */
.hexa-hero__nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.hexa-hero__count {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.hexa-hero__n {
    font: 800 clamp(28px, 3.4cqi, 46px)/1 var(--hexa-num);
    color: #FFF;
}

.hexa-hero__total {
    font: 400 12px/1 var(--hexa-num);
    color: rgba(255, 255, 255, .5);
    padding-bottom: 6px;
}

.hexa-hero__prog {
    width: clamp(120px, 16cqi, 200px);
    height: 2px;
    background: rgba(255, 255, 255, .24);
    overflow: hidden;
}

.hexa-hero__progbar {
    height: 2px;
    background: var(--hexa-grad);
    transition: width var(--hexa-t-prog);
}

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

/* 40px here, not the 42px of every other arrow in the design (SF:172 vs 205).
   Transcribed, not normalised. */
.hexa-hero__arrow {
    width: 40px;
    height: 40px;
    border: 1px solid var(--hexa-onphoto-line);
    border-radius: var(--hexa-r);
    background: rgba(15, 13, 12, .35);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

.hexa-hero__arrow .hexa-i {
    font-size: 19px;
}

/* The "next slide" preview: a hexagon-cropped thumbnail plus two lines. */
.hexa-hero__next {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FFF;
}

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

.hexa-hero__nextlabels {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}

.hexa-hero__nextk {
    font: 400 9px/1 var(--hexa-font);
    letter-spacing: .14em;
    color: var(--hexa-onphoto-dim);
}

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


/* ---------------------------------------------------------------------------
   2. TRUST STRIP — SF:186-196. Widgets isTrust 1353.

   Four cells, `auto-fit` at a 210px floor, over --hexa-pp with a bottom rule.
   The icon is gradient-clipped TEXT, which is why it is a `.hexa-i` carrying
   `.hexa-grad-text` rather than a filled hexagon.
   --------------------------------------------------------------------------- */

.hexa-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    border-bottom: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(16px, 2cqi, 26px) clamp(14px, 2.4cqi, 30px);
    border-inline-end: 1px solid var(--hexa-ln);
}

/* The design draws a divider after EVERY cell including the last, which leaves
   a hairline hanging off the right edge of the band. Dropped on the last cell
   only — `:last-child` rather than a count, because the strip is a repeater and
   a merchant may write three rows or six. */
.hexa-trust__item:last-child {
    border-inline-end: 0;
}

.hexa-trust__icon {
    font-size: 22px;
}

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

.hexa-trust__h {
    font: 700 13px/1.2 var(--hexa-font);
}

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


/* ---------------------------------------------------------------------------
   3. SECTION HEAD — SF:199-209, 228-238, 301-307, 365-369, 426-429.

   Five bands open with the same head: an eyebrow + h2 on one side, controls on
   the other, aligned to their baseline-end and wrapping. Declared ONCE here and
   reused by each band rather than transcribed five times — the design uses the
   identical flex row every time, only the controls differ.
   --------------------------------------------------------------------------- */

.hexa-shead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: clamp(18px, 2.4cqi, 32px);
}

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

.hexa-shead__h {
    margin: 0;
    font: 800 clamp(22px, 3.2cqi, 42px)/1.08 var(--hexa-font);
    letter-spacing: -.01em;
}

/* Two bands write their eyebrow WITHOUT the hexagon marker (SF:230, 366) and
   three write it with (SF:201, 303, 400 uses none). Rather than two eyebrow
   classes, the marker is suppressed where the design omits it. */
.hexa-shead__eyebrow--plain::before {
    display: none;
}

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

/* A note that sits where the controls would (SF:306). */
.hexa-shead__note {
    font: 300 11.5px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
    max-width: 38ch;
}

/* The rail arrows. 42x42 everywhere except the hero (SF:205, 428). */
.hexa-shead__arrow {
    width: 42px;
    height: 42px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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


/* ---------------------------------------------------------------------------
   4. CATEGORY RAIL — SF:198-225. Widgets isCatRail 1355.

   Pattern D. Tall cards, a hexagon index top-start, and a caption over a scrim.
   --------------------------------------------------------------------------- */

.hexa-catrail {
    padding: clamp(34px, 5cqi, 72px) var(--hexa-gut) clamp(10px, 2cqi, 24px);
}

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

.hexa-catrail__card {
    flex: 0 0 clamp(180px, 25cqi, 300px);
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    background: var(--hexa-sf);
    color: var(--hexa-ink);
}

.hexa-catrail__img {
    width: 100%;
    height: clamp(230px, 32cqi, 400px);
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.hexa-catrail__card:hover .hexa-catrail__img {
    transform: scale(1.07);
}

.hexa-catrail__n {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    width: 30px;
    height: 34px;
    background: rgba(15, 13, 12, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10.5px/1 var(--hexa-num);
    color: #FFF;
    /* It sits on the card's own anchor. */
    pointer-events: none;
}

.hexa-catrail__cap {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 16px 16px 14px;
    background: var(--hexa-scrim-cap);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

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

.hexa-catrail__name {
    font: 700 clamp(14px, 1.6cqi, 19px)/1.1 var(--hexa-font);
    color: #FFF;
}

.hexa-catrail__count {
    font: 300 10.5px/1 var(--hexa-font);
    color: rgba(255, 255, 255, .7);
}

.hexa-catrail__go {
    color: #FFF;
    font-size: 19px;
}


/* ---------------------------------------------------------------------------
   5. PRODUCT TABS GRID — SF:227-272. Widgets isTabsGrid 1357.

   Filter tabs over a Pattern A grid at the design's STANDING 215px floor.

   ⚠️ THE CARDS ARE `.hexa-card`, Phase 2's file, not a second card written
   here. The design passes the same <dc-import name="HexaCard"> on the homepage
   as on the listing (SF:240 vs SF:532) — same size hint, same body, same CTA.
   A homepage-only copy would be the seventh place to fix a card bug.
   --------------------------------------------------------------------------- */

.hexa-tabs {
    padding: clamp(28px, 4cqi, 60px) var(--hexa-gut);
}

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

/* The tab is the shared chip at the design's own tab metrics (SF:235): a word
   in Almarai 700/11.5, not the chip's Archivo numerals. */
.hexa-tabs__tab {
    padding: 11px 16px;
    font: 700 11.5px/1 var(--hexa-font);
    min-width: 0;
}

.hexa-tabs__grid {
    --hexa-a-min: 215px;
}

/* A tab whose filter matches nothing still has to say so. The design draws no
   empty state for this band — flagged in the handoff — so this is the
   theme's own, built from the Phase 3 empty-state metrics. */
.hexa-tabs__empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: clamp(30px, 5cqi, 60px) 20px;
    border: 1px dashed var(--hexa-ln);
    text-align: center;
    color: var(--hexa-sub);
    font: 300 12.5px/1.7 var(--hexa-font);
}


/* ---------------------------------------------------------------------------
   6. PROMO BANNERS — SF:274-288. Widgets isBanners 1359.

   Pattern B proportions (1.35fr 1fr), collapsing to one column at the single
   760px switch. Each banner is a photograph, a scrim, and a bottom-anchored
   copy stack ending in a white CTA that becomes the gradient on hover.
   --------------------------------------------------------------------------- */

.hexa-promo {
    padding: clamp(18px, 2.6cqi, 36px) var(--hexa-gut) clamp(6px, 1cqi, 14px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4cqi, 18px);
}

.hexa-promo__pair {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(10px, 1.4cqi, 18px);
}

/* The design's `bannerCols` is a plain ternary on `narrow` (SF:1938), which is
   the same 760px boolean the whole design uses. */
@media (max-width: 760px) {
    .hexa-promo__pair {
        grid-template-columns: 1fr;
    }
}

.hexa-promo__card {
    position: relative;
    overflow: hidden;
    background: var(--hexa-sf);
    color: #FFF;
    min-height: clamp(190px, 24cqi, 320px);
    display: flex;
}

.hexa-promo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Per-banner focal point (SF:1941) — the first is framed high, the second
       centred. Supplied inline by the addon from the merchant's own setting. */
    object-position: var(--hexa-promo-pos, 50% 50%);
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.hexa-promo__card:hover .hexa-promo__img {
    transform: scale(1.06);
}

.hexa-promo__scrim {
    position: absolute;
    inset: 0;
    background: var(--hexa-promo-scrim, var(--hexa-scrim-cap));
}

.hexa-promo__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(16px, 2.4cqi, 32px);
    width: 100%;
}

.hexa-promo__eyebrow {
    color: rgba(255, 255, 255, .8);
    letter-spacing: .18em;
    font-size: 10px;
}

.hexa-promo__title {
    font: 800 clamp(18px, 2.5cqi, 32px)/1.12 var(--hexa-font);
    max-width: 20ch;
}

.hexa-promo__sub {
    font: 300 11.5px/1.6 var(--hexa-font);
    color: rgba(255, 255, 255, .78);
    max-width: 32ch;
}

/* A `<span>` styled as a button, because the whole card is the anchor — an
   <a> inside an <a> is invalid and the parser un-nests it. */
.hexa-promo__cta {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    margin-top: 4px;
    padding: 12px 18px;
    background: #FFF;
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

.hexa-promo__cta .hexa-i {
    font-size: 16px;
}


/* ---------------------------------------------------------------------------
   7. COUPON STRIP — SF:289-297. Widgets isCoupon 1361.

   An ink band with a vertical gradient edge, a dashed code chip that copies,
   and a gradient CTA. Lives inside the promo band in the design; here it is its
   own addon so a merchant can use either without the other.
   --------------------------------------------------------------------------- */

.hexa-coupon {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2cqi, 26px);
    flex-wrap: wrap;
    padding: clamp(14px, 2cqi, 24px) clamp(16px, 2.4cqi, 32px);
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    position: relative;
    overflow: hidden;
}

/* The one VERTICAL gradient in the design (SF:290) — `--hexa-grad-v`, declared
   in hexa.css beside the 120deg one for exactly this. */
.hexa-coupon::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--hexa-grad-v);
}

.hexa-coupon__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 190px;
}

.hexa-coupon__title {
    font: 800 clamp(14px, 1.7cqi, 20px)/1.25 var(--hexa-font);
}

.hexa-coupon__sub {
    font: 300 11.5px/1.6 var(--hexa-font);
    color: var(--hexa-f-dim);
}

/* The code. A BUTTON, not the design's span: it copies, and a click target has
   to be focusable from the keyboard. Everything else is the design's (SF:295). */
.hexa-coupon__code {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px dashed var(--hexa-f-edge);
    background: transparent;
    color: var(--hexa-bg);
    font: 800 13px/1 var(--hexa-num);
    letter-spacing: .14em;
    transition: border-color var(--hexa-t-line), background var(--hexa-t-line);
}

.hexa-coupon__code:hover {
    background: var(--hexa-f-line);
}

.hexa-coupon__code .hexa-i {
    font-size: 16px;
    color: var(--hexa-f-head);
}

/* The copied acknowledgement. The design has no such state — it is a static
   mock and never copies anything — so this is the theme's own, and it is
   deliberately the SAME dashed chip with only the glyph and label swapped, so
   nothing moves and the row does not reflow under the cursor. */
.hexa-coupon__code.is-copied {
    border-color: var(--hexa-a2);
    border-style: solid;
}

.hexa-coupon__code.is-copied .hexa-i {
    color: var(--hexa-a2);
}


/* ---------------------------------------------------------------------------
   8. TOP CHART — SF:300-338. Widgets isTopChart 1363.

   Pattern B at the chart's own aside width (230-340px), a ranked list on the
   left and a preview panel on the right that follows the hovered row.
   --------------------------------------------------------------------------- */

.hexa-chart {
    padding: clamp(20px, 3cqi, 44px) var(--hexa-gut) clamp(30px, 4.4cqi, 64px);
}

.hexa-chart__body {
    display: grid;
    grid-template-columns: 1fr minmax(230px, 340px);
    gap: clamp(14px, 2cqi, 30px);
    align-items: stretch;
}

/* SF:1945-1946: narrow drops to one column AND hides the preview entirely —
   it is a hover affordance, and there is no hover on a phone. */
@media (max-width: 760px) {
    .hexa-chart__body {
        grid-template-columns: 1fr;
    }

    .hexa-chart__preview {
        display: none;
    }
}

.hexa-chart__list {
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid var(--hexa-ln);
    min-width: 0;
}

.hexa-chart__row {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6cqi, 20px);
    padding: clamp(12px, 1.7cqi, 20px) clamp(8px, 1.2cqi, 16px);
    border-bottom: 1px solid var(--hexa-ln);
    background: transparent;
    transition: background var(--hexa-t-line);
}

.hexa-chart__row.is-active,
.hexa-chart__row:hover {
    background: var(--hexa-sf);
}

/* The rank numeral is --hexa-ln at rest and --hexa-acd when the row leads
   (SF:312) — a hairline colour used as TEXT, which is unusual enough to be
   worth stating: it is deliberate, the resting numerals are meant to recede. */
.hexa-chart__n {
    font: 800 clamp(20px, 2.6cqi, 34px)/1 var(--hexa-num);
    color: var(--hexa-ln);
    min-width: 44px;
    transition: color var(--hexa-t-line);
}

.hexa-chart__row.is-active .hexa-chart__n,
.hexa-chart__row:hover .hexa-chart__n {
    color: var(--hexa-acd);
}

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

/* SF:1953 hides the thumbnail when narrow, keeping the row readable at 320px. */
@media (max-width: 760px) {
    .hexa-chart__thumb {
        display: none;
    }
}

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

.hexa-chart__name {
    font: 700 clamp(12.5px, 1.4cqi, 15px)/1.35 var(--hexa-font);
    color: var(--hexa-ink);
}

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

.hexa-chart__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 300 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

/* The 3px round dot between the category and the rating (SF:316). `50%` on a
   3x3 box is a CIRCLE, which the radius gate permits and separately asserts is
   only ever used on a square. */
.hexa-chart__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--hexa-sub);
    display: block;
    flex: 0 0 auto;
}

.hexa-chart__figures {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

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

.hexa-chart__sold {
    font: 400 10px/1 var(--hexa-font);
    color: var(--hexa-acd);
    white-space: nowrap;
}

.hexa-chart__add {
    width: 38px;
    height: 38px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

.hexa-chart__add .hexa-i {
    font-size: 18px;
}

.hexa-chart__preview {
    position: relative;
    overflow: hidden;
    background: var(--hexa-sf);
    min-height: clamp(240px, 30cqi, 420px);
}

/* The photograph fills its pane. The FADE is the pane's job, not the image's
   — an earlier draft gave both an opacity transition, which meant two
   mechanisms for one effect and a pane that could be visible while its own
   photograph was not. */
.hexa-chart__pimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hexa-chart__pn {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 9px 14px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 800 11px/1 var(--hexa-num);
    letter-spacing: .08em;
    z-index: 2;
}

.hexa-chart__pcap {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 18px;
    background: var(--hexa-scrim-cap);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
}

.hexa-chart__pname {
    font: 700 clamp(14px, 1.7cqi, 20px)/1.25 var(--hexa-font);
    color: #FFF;
}

.hexa-chart__prow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hexa-chart__pprice {
    font: 700 13px/1 var(--hexa-num);
    color: #FFF;
}

.hexa-chart__pview {
    padding: 10px 15px;
    background: #FFF;
    color: var(--hexa-ink);
    font: 700 11px/1 var(--hexa-font);
}

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

/* Each preview pane is stacked; only the active one is interactive, or the
   topmost invisible pane would swallow the visible one's button. */
.hexa-chart__pane {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--hexa-t-line) ease;
}

.hexa-chart__pane.is-active {
    opacity: 1;
    pointer-events: auto;
}


/* ---------------------------------------------------------------------------
   9. DROP COUNTDOWN — SF:340-362. Widgets isDrop 1365.

   An ink band with a gradient top edge, a live clock, and two offset images.
   --------------------------------------------------------------------------- */

.hexa-drop {
    position: relative;
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    overflow: hidden;
    padding: clamp(30px, 4.6cqi, 70px) var(--hexa-gut);
}

.hexa-drop::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: var(--hexa-grad);
}

.hexa-drop__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(20px, 3cqi, 50px);
    align-items: center;
}

.hexa-drop__copy {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6cqi, 20px);
    min-width: 0;
}

.hexa-drop__eyebrow {
    font: 700 10.5px/1 var(--hexa-font);
    letter-spacing: .2em;
    color: var(--hexa-f-dim);
}

.hexa-drop__title {
    margin: 0;
    font: 800 clamp(24px, 3.8cqi, 50px)/1.05 var(--hexa-font);
}

.hexa-drop__sub {
    margin: 0;
    max-width: 46ch;
    font: 300 clamp(12px, 1.2cqi, 14.5px)/1.8 var(--hexa-font);
    color: var(--hexa-f-mid);
}

.hexa-drop__clock {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.hexa-drop__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 64px;
    padding: 13px 10px;
    border: 1px solid var(--hexa-f-edge);
}

.hexa-drop__v {
    font: 800 clamp(17px, 2cqi, 24px)/1 var(--hexa-num);
    /* The digits change every second; without a fixed advance the box jitters
       between 1 and 8. */
    font-variant-numeric: tabular-nums;
}

.hexa-drop__l {
    font: 400 9.5px/1 var(--hexa-font);
    color: var(--hexa-f-dim);
}

.hexa-drop__cta {
    align-self: flex-start;
    margin-top: 6px;
}

.hexa-drop__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.hexa-drop__img {
    width: 100%;
    height: clamp(200px, 26cqi, 330px);
    object-fit: cover;
    background: var(--hexa-sf);
}

/* The offset that makes the pair read as a drop rather than a grid (SF:358). */
.hexa-drop__img:first-child {
    margin-top: clamp(16px, 3cqi, 44px);
}

/* When the countdown has run out there is nothing to count. The design draws
   no such state (its clock is a static object); this is the theme's own. */
.hexa-drop__live {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border: 1px solid var(--hexa-a2);
    color: var(--hexa-bg);
    font: 700 12px/1 var(--hexa-font);
    align-self: flex-start;
}


/* ---------------------------------------------------------------------------
   10. LOOKBOOK RAIL — SF:364-388. Widgets isLookbook 1367.

   Pattern D with CENTRE snap (not start — SF:372), a big Archivo index, a
   pulsing hotspot, and a caption with chips over the hard scrim.
   --------------------------------------------------------------------------- */

.hexa-look {
    padding: clamp(34px, 5cqi, 72px) var(--hexa-gut);
}

.hexa-look__head {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: clamp(18px, 2.4cqi, 30px);
}

.hexa-look__sub {
    margin: 0;
    max-width: 60ch;
    font: 300 clamp(12px, 1.2cqi, 14.5px)/1.8 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-look__rail {
    gap: clamp(10px, 1.4cqi, 18px);
}

.hexa-look__item {
    flex: 0 0 clamp(260px, 42cqi, 520px);
    scroll-snap-align: center;
    position: relative;
    overflow: hidden;
    background: var(--hexa-sf);
}

.hexa-look__img {
    width: 100%;
    height: clamp(300px, 44cqi, 560px);
    object-fit: cover;
    display: block;
}

.hexa-look__n {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    font: 800 clamp(30px, 4.4cqi, 58px)/1 var(--hexa-num);
    color: rgba(255, 255, 255, .9);
    pointer-events: none;
}

/* The hotspot. Its position is per-look and comes from the merchant's own two
   percentages, so it arrives as a pair of custom properties rather than as a
   generated class. */
.hexa-look__spot {
    position: absolute;
    inset-block-start: var(--hexa-spot-y, 50%);
    inset-inline-start: var(--hexa-spot-x, 50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .28);
    animation: hexa-pulse 2.6s ease-in-out infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hexa-look__spot {
        animation: none;
    }
}

.hexa-look__cap {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 20px;
    background: var(--hexa-scrim-look);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hexa-look__name {
    font: 700 clamp(15px, 1.9cqi, 22px)/1.15 var(--hexa-font);
    color: #FFF;
}

.hexa-look__chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

/* NOT `.hexa-chip`: this one is a frosted label over a photograph, with its own
   background, blur and white type (SF:380). The shared chip is a hairline
   control on a light surface. */
.hexa-look__chip {
    padding: 8px 12px;
    background: var(--hexa-onphoto-soft);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .25);
    font: 400 10.5px/1 var(--hexa-font);
    color: #FFF;
}

.hexa-look__add {
    align-self: flex-start;
    margin-top: 4px;
    padding: 11px 18px;
    background: #FFF;
    color: var(--hexa-ink);
    font: 700 11px/1 var(--hexa-font);
    border: 0;
}

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


/* ---------------------------------------------------------------------------
   11. BRAND MARQUEE — SF:390-396. Widgets isBrands 1375.

   A WidgetBuilder widget rather than a page-builder band, per the card. Runs
   `hexa-marq-r` (the REVERSE direction) at 30s, which is what makes it drift
   against the header ticker's `hexa-marq` at 26s.
   --------------------------------------------------------------------------- */

.hexa-marq {
    border-block: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    overflow: hidden;
    padding: clamp(16px, 2cqi, 26px) 0;
}

.hexa-marq__track {
    display: flex;
    gap: 40px;
    white-space: nowrap;
    animation: hexa-marq-r 30s linear infinite;
    /* The list is emitted TWICE and the keyframe travels exactly 50%, so the
       second copy lands where the first began. Halving the distance or
       emitting one copy both produce a visible jump. */
    width: max-content;
}

/* An infinite horizontal drift is motion; honour the preference rather than
   leaving it running. */
@media (prefers-reduced-motion: reduce) {
    .hexa-marq__track {
        animation: none;
    }
}

.hexa-marq__item {
    display: flex;
    align-items: center;
    gap: 40px;
    font: 700 clamp(15px, 2.2cqi, 28px)/1 var(--hexa-num);
    letter-spacing: .06em;
    color: var(--hexa-sub);
    opacity: .65;
}

.hexa-marq__sep {
    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;
}


/* ---------------------------------------------------------------------------
   12. REVIEWS ROTATOR — SF:398-423. Widgets isReviews 1369.

   Two panes on one `auto-fit` 290px grid: the heading with the average score
   and the dash navigation, and the quote card.
   --------------------------------------------------------------------------- */

.hexa-revs {
    padding: clamp(34px, 5cqi, 72px) var(--hexa-gut);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(18px, 2.6cqi, 40px);
}

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

.hexa-revs__title {
    margin: 0;
    font: 800 clamp(22px, 3.2cqi, 40px)/1.08 var(--hexa-font);
}

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

/* One of the design's four gradient-clipped figures (SF:403). */
.hexa-revs__avg {
    font: 800 clamp(26px, 3cqi, 40px)/1 var(--hexa-num);
}

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

.hexa-revs__dots {
    display: flex;
    gap: 7px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* A 4px-tall dash that widens from 14px to 32px when its review is showing. */
.hexa-revs__dot {
    width: 14px;
    height: 4px;
    border: 0;
    padding: 0;
    background: var(--hexa-ln);
    transition: width var(--hexa-t-line), background var(--hexa-t-line);
}

.hexa-revs__dot.is-active {
    width: 32px;
    background: var(--hexa-grad);
}

.hexa-revs__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px, 2.6cqi, 34px);
    background: var(--hexa-pp);
    border: 1px solid var(--hexa-ln);
    position: relative;
    min-height: 210px;
    min-width: 0;
}

/* The faint hexagon in the corner (SF:413). */
.hexa-revs__mark {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 44px;
    height: 50px;
    background: var(--hexa-grad);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
    opacity: .16;
    pointer-events: none;
}

/* Each review is a stacked pane so the card does not resize between a short
   quote and a long one — the design's card is `min-height:210px` and its own
   rotation never reflows the page. */
.hexa-revs__pane {
    display: none;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.hexa-revs__pane.is-active {
    display: flex;
    animation: hexa-fade .45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hexa-revs__pane.is-active {
        animation: none;
    }
}

.hexa-revs__q {
    margin: 0;
    font: 400 clamp(14px, 1.6cqi, 19px)/1.7 var(--hexa-font);
    text-wrap: pretty;
}

.hexa-revs__who {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

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

.hexa-revs__name {
    font: 700 12.5px/1 var(--hexa-font);
}

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


/* ---------------------------------------------------------------------------
   13. JOURNAL GRID — SF:425-442. Widgets isJournal 1371.

   The homepage's three-post teaser. `auto-fit` at 250px, which is NARROWER
   than the journal index's own 290px (Phase 4) — two different bands, and the
   floors are not interchangeable.
   --------------------------------------------------------------------------- */

.hexa-jgrid {
    padding: 0 var(--hexa-gut) clamp(34px, 5cqi, 72px);
}

/* This band's head is smaller than the shared one (SF:427 draws
   clamp(20px,2.8cqi,36px), not clamp(22px,3.2cqi,42px)) and carries no
   eyebrow. */
.hexa-jgrid__h {
    font-size: clamp(20px, 2.8cqi, 36px);
}

.hexa-jgrid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(12px, 1.6cqi, 22px);
}

.hexa-jgrid__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--hexa-ink);
    min-width: 0;
}

.hexa-jgrid__media {
    position: relative;
    overflow: hidden;
    background: var(--hexa-sf);
    display: block;
}

.hexa-jgrid__img {
    width: 100%;
    height: clamp(160px, 20cqi, 240px);
    object-fit: cover;
    display: block;
    transition: transform .7s;
}

.hexa-jgrid__card:hover .hexa-jgrid__img {
    transform: scale(1.06);
}

/* An ink chip, not the gradient badge — the journal's category marker is the
   one badge in the design drawn in ink (SF:435). */
.hexa-jgrid__chip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 7px 11px;
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 10px/1 var(--hexa-font);
    pointer-events: none;
}

.hexa-jgrid__title {
    font: 700 clamp(14px, 1.6cqi, 18px)/1.4 var(--hexa-font);
    color: var(--hexa-ink);
    transition: color var(--hexa-t-line);
}

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

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


/* ---------------------------------------------------------------------------
   14. NEWSLETTER BAND — SF:444-458. Widgets isNewsletter 1373.

   The only FULL-GRADIENT surface in the design. Inset from the page edge by
   the gutter rather than full-bleed (SF:444 uses `margin`, not `padding`).
   --------------------------------------------------------------------------- */

.hexa-news {
    margin: 0 var(--hexa-gut) clamp(30px, 4cqi, 60px);
    position: relative;
    overflow: hidden;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    padding: clamp(26px, 4cqi, 56px);
}

.hexa-news__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: clamp(18px, 2.6cqi, 40px);
    align-items: center;
    position: relative;
    z-index: 2;
}

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

.hexa-news__title {
    margin: 0;
    font: 800 clamp(21px, 3cqi, 38px)/1.1 var(--hexa-font);
}

.hexa-news__sub {
    margin: 0;
    max-width: 44ch;
    font: 300 clamp(12px, 1.2cqi, 14.5px)/1.7 var(--hexa-font);
    opacity: .9;
}

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

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

/* NOT `.hexa-field`: the shared field is a hairline input on a light surface.
   This one sits ON the gradient, so its border and fill are translucent white
   and its text is --hexa-on (SF:452). */
.hexa-news__input {
    flex: 1;
    min-width: 170px;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--hexa-r);
    background: rgba(255, 255, 255, .14);
    color: var(--hexa-on);
    font: 400 12.5px/1 var(--hexa-font);
    outline: none;
}

/* A placeholder inherits `color` at reduced opacity in some engines and not in
   others; stated so the hint is legible on the gradient in all of them. */
.hexa-news__input::placeholder {
    color: var(--hexa-on);
    opacity: .72;
}

.hexa-news__input:focus {
    border-color: #FFF;
    background: rgba(255, 255, 255, .22);
}

.hexa-news__btn {
    padding: 15px 24px;
    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-news__btn:hover {
    background: #FFF;
    color: var(--hexa-ink);
}

.hexa-news__note {
    font: 300 10.5px/1.5 var(--hexa-font);
    opacity: .82;
}

/* The subscribe response. The platform's newsletter endpoint answers with a
   message; the design draws no slot for one, so this is the theme's own and it
   sits under the note rather than replacing the form. */
.hexa-news__msg {
    font: 700 11px/1.5 var(--hexa-font);
    /* Hidden until it has something to say — an empty line still occupies its
       leading and shifts the note. */
    display: none;
}

.hexa-news__msg.is-shown {
    display: block;
}


/* ---------------------------------------------------------------------------
   15. SALE / OUTLET SCREEN — SF:1196-1253.

   Not an addon: a theme blade, like the shop and category screens. Three bands
   — a gradient hero with the same clock, a tier rail, and the standing 215px
   product grid.
   --------------------------------------------------------------------------- */

.hexa-sale__hero {
    position: relative;
    overflow: hidden;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    padding: clamp(26px, 4cqi, 58px) var(--hexa-gut);
}

/* The oversized hexagon bleeding off the top-end corner (SF:1199). */
.hexa-sale__mark {
    position: absolute;
    inset-block-start: -30%;
    inset-inline-end: -6%;
    width: min(46%, 420px);
    aspect-ratio: 1;
    background: rgba(255, 255, 255, .16);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
    pointer-events: none;
}

.hexa-sale__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6cqi, 20px);
}

.hexa-sale__eyebrow {
    font: 700 11px/1 var(--hexa-font);
    letter-spacing: .2em;
    opacity: .85;
}

.hexa-sale__title {
    margin: 0;
    font: 800 clamp(28px, 5.4cqi, 74px)/.98 var(--hexa-font);
}

.hexa-sale__sub {
    margin: 0;
    max-width: 48ch;
    font: 300 clamp(12px, 1.2cqi, 15px)/1.7 var(--hexa-font);
    opacity: .92;
}

.hexa-sale__clock {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* The same clock as the drop band, but ON the gradient rather than on ink, so
   it is filled and bordered in translucent white (SF:1206). */
.hexa-sale__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 64px;
    padding: 13px 10px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
}

.hexa-sale__v {
    font: 800 clamp(17px, 2cqi, 24px)/1 var(--hexa-num);
    font-variant-numeric: tabular-nums;
}

.hexa-sale__l {
    font: 400 9.5px/1 var(--hexa-font);
    opacity: .8;
}

.hexa-sale__tiers {
    gap: 8px;
    padding: clamp(16px, 2cqi, 24px) var(--hexa-gut);
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-sale__tier {
    flex: 0 0 auto;
    padding: 11px 16px;
    font: 700 11.5px/1 var(--hexa-font);
    min-width: 0;
}

.hexa-sale__grid {
    padding: clamp(24px, 3.4cqi, 50px) var(--hexa-gut) clamp(34px, 5cqi, 70px);
    --hexa-a-min: 215px;
}


/* ---------------------------------------------------------------------------
   16. LEGACY CONTAINMENT.

   The pre-redesign `hexfashion.css` loads FIRST and is 3,400 lines of
   four-deep selectors built around `--main-color-one`. Phases 1-4 each swept
   what their own screens touched; this is the Phase 5 sweep, and it is aimed
   only at what a PAGE BUILDER band can inherit.

   The bands here are new markup with new class names, so almost nothing
   collides — but a page-builder addon renders inside the platform's own
   `.container`/`.row` scaffolding on some page types, and the legacy sheet
   styles those.
   --------------------------------------------------------------------------- */

/* The legacy sheet gives `section` a vertical rhythm and `img` a max-width that
   fights `object-fit`. Reset INSIDE a Hexa band only. */
.hexa .hexa-hero img,
.hexa .hexa-catrail img,
.hexa .hexa-promo img,
.hexa .hexa-chart img,
.hexa .hexa-drop img,
.hexa .hexa-look img,
.hexa .hexa-revs img,
.hexa .hexa-jgrid img {
    max-width: 100%;
    height: auto;
}

/* ...except where the design sets an explicit height, which the rule above
   would otherwise undo. Stated after it, at equal specificity, in source order
   — the same shape the other four layers use. */
.hexa .hexa-hero__img,
.hexa .hexa-catrail__img,
.hexa .hexa-promo__img,
.hexa .hexa-chart__pimg,
.hexa .hexa-look__img,
.hexa .hexa-jgrid__img {
    height: 100%;
}

.hexa .hexa-catrail__img {
    height: clamp(230px, 32cqi, 400px);
}

.hexa .hexa-look__img {
    height: clamp(300px, 44cqi, 560px);
}

.hexa .hexa-jgrid__img {
    height: clamp(160px, 20cqi, 240px);
}

.hexa .hexa-drop__img {
    height: clamp(200px, 26cqi, 330px);
}

.hexa .hexa-chart__thumb,
.hexa .hexa-hero__nextimg,
.hexa .hexa-revs__img {
    height: auto;
}

.hexa .hexa-chart__thumb {
    height: 50px;
}

.hexa .hexa-hero__nextimg {
    height: 52px;
}

.hexa .hexa-revs__img {
    height: 48px;
}

/* The legacy sheet styles `button` with its own padding and a purple hover.
   Every band's controls are buttons, so the reset is stated at band scope. */
.hexa-hero button,
.hexa-catrail button,
.hexa-tabs button,
.hexa-promo button,
.hexa-coupon button,
.hexa-chart button,
.hexa-drop button,
.hexa-look button,
.hexa-revs button,
.hexa-jgrid button,
.hexa-news button,
.hexa-sale button {
    font-family: inherit;
    cursor: pointer;
}

/* `.hexa-band`'s own gutter must not be doubled by the platform container the
   addon may land inside. */
.hexa-hero,
.hexa-trust,
.hexa-marq {
    /* These three are full-bleed by design — they carry no gutter at all. */
    margin-inline: 0;
}