/* ===========================================================================
   HEXA REDESIGN — content + account layer (Phase 4)
   ===========================================================================

   Screens: sign in, register, forgot / reset password, the account dashboard
   and everything inside its shell, the journal index, the article, FAQ + size
   guide, contact, about, and the 404.

   Design source: "Hexa Storefront.dc.html"
     onAccount 1106-1156   onAuth   1158-1194   onBlog  1255-1290
     onArticle 1292-1336   onFaq    1338-1377   onAbout 1379-1414
     onContact 1416-1460
   and "Hexa Widgets.dc.html"
     isAuth 950-983   isAccount 985-1022   isBlogIdx 1070-1090
     isArticle 1092-1115   isFaq 1117-1136   isContact 1138-1180

   The 404 has NO storefront screen and no widget card. It is built from the
   design system plus onSearch's own no-results state, and every value that had
   to be chosen rather than read is commented as such at section 12.

   ---------------------------------------------------------------------------
   WHY A FOURTH FILE
   ---------------------------------------------------------------------------
   One layer per phase, loading after hexa.css, hexa-shop.css and hexa-flow.css.

   ⚠️ NO BLOCK NAME MAY BE DECLARED IN TWO LAYERS. Every block below was
   grepped against ALL THREE earlier sheets before use. Taken already:

     Phase 1  hexa-acc(!) hexa-aside hexa-badge hexa-band hexa-brand hexa-btn
              hexa-chip hexa-count hexa-crumb hexa-drawer hexa-eyebrow
              hexa-field hexa-footer hexa-grad hexa-grid hexa-header hexa-hex
              hexa-i hexa-iconbtn hexa-lang hexa-ltr hexa-menubtn hexa-mobnav
              hexa-nav hexa-num hexa-overlay hexa-pagehead hexa-rail
              hexa-scroller hexa-search hexa-side hexa-sr hexa-toast hexa-two
     Phase 2  hexa-buy hexa-card hexa-cathero hexa-catintro hexa-cmp hexa-filter
              hexa-gal hexa-lightbox hexa-pager hexa-pdp hexa-qv hexa-rel
              hexa-shop hexa-srp hexa-stickybuy hexa-subcats hexa-toolbar
     Phase 3  hexa-bag hexa-co hexa-empty hexa-fail hexa-pay hexa-res hexa-sheet
              hexa-slots hexa-steps hexa-sum hexa-tl hexa-track hexa-wish

   ⚠️ `hexa-acc` IS TAKEN — it is Phase 2's product DETAILS ACCORDION, not
   "account". The account blocks below are `hexa-dash*`, and the FAQ accordion
   reuses Phase 2's `hexa-acc` by SCOPE rather than redeclaring it, which is
   what the ownership rule actually permits. Naming the account area `hexa-acc`
   would have restyled every product page's accordion, on every screen,
   invisibly.

   This layer introduces, and only these:

     hexa-auth      sign in / register / password        hexa-dash   account shell + body
     hexa-jn        journal index                        hexa-post   the article
     hexa-faq       FAQ + size guide                     hexa-ct     contact
     hexa-about     the about page                       hexa-404    not found
     hexa-prose     tenant HTML from the editor (no classes to hook)

   ---------------------------------------------------------------------------
   WHAT THIS LAYER MAY NOT DO
   ---------------------------------------------------------------------------
   No new colour: every value resolves to one of the ten palette tokens. Radii
   stay 0 / 2px; a 50% radius appears only on a genuinely square box. Units are
   cqi. The single structural breakpoint is 760px.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   0. The two scrim tokens this layer needs.

   Declared on `.hexa` beside Phase 2's `--hexa-scrim`, and deliberately NOT
   reusing it: the design writes THREE different scrims over photography and
   they are not the same value. The category hero is `.9 → .25` (Phase 2), the
   auth pane is `.9 → .2` (SF:1162) and the article hero is `.92 → .2`
   (SF:1296). Collapsing them into one token would be inventing a value the
   design did not choose — the whole point of transcribing rather than porting.

   Like Phase 2's, they do not vary per palette: a scrim over a photograph has
   to stay dark whatever the accent is doing.
   --------------------------------------------------------------------------- */

.hexa {
    /* Storefront 1162 — the auth art pane. */
    --hexa-scrim-auth: linear-gradient(to top, rgba(15, 13, 12, .9), rgba(15, 13, 12, .2));
    /* Storefront 1296 — the article hero. Harder at the foot, because a
       headline sits on it rather than a short pitch line. */
    --hexa-scrim-hard: linear-gradient(to top, rgba(15, 13, 12, .92), rgba(15, 13, 12, .2));
}


/* ===========================================================================
   1. AUTH — Storefront 1158-1194.

   `authCols` is `1fr 1fr` and `authImgDisp` is `block`, both collapsing when
   narrow (SF:2084). So: half art, half form, and the art pane DISAPPEARS below
   760px rather than stacking — a 50vh photo above a login form on a phone is
   the design's own decision, and it is `display:none`, not an order swap.

   ⚠️ THE FORM PANE IS ALSO USED BY FORGOT / RESET PASSWORD, which the design
   never draws. Those two get the same pane with a single field, so a shopper
   who mistypes a password does not land on a page from a different theme.
   =========================================================================== */

.hexa-auth {
    display: grid;
    /* SF:1159 — `min-height:520px`. */
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
}

/* ── The art pane (1160-1167) ─────────────────────────────────────────────
   A photo under a bottom-anchored scrim with the pitch over it. The scrim is
   the design's literal `rgba(15,13,12,.9)` → `rgba(15,13,12,.2)`, which is a
   FIXED value over photography rather than a palette colour: it has to darken
   any image a tenant uploads, and --hexa-ink moves with the palette. Declared
   as a token at section 0 above. */
.hexa-auth__art {
    position: relative;
    overflow: hidden;
    background: var(--hexa-ink);
}

.hexa-auth__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* SF:1161 — the slow ken-burns drift, declared in hexa.css. */
    animation: hex-kb 16s ease-out infinite alternate;
}

.hexa-auth__scrim {
    position: absolute;
    inset: 0;
    background: var(--hexa-scrim-auth);
    /* The scrim sits over the link-free photo, but a decoration that overlaps
       anything interactive must never eat its clicks. */
    pointer-events: none;
}

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

.hexa-auth__pitchtitle {
    /* SF:1164 — 800 clamp(20px,2.6cqi,34px)/1.15 Almarai. */
    font: 800 clamp(20px, 2.6cqi, 34px) / 1.15 var(--hexa-font);
    color: #FFF;
    margin: 0;
}

.hexa-auth__pitchsub {
    /* SF:1165 — 300 11.5px/1.7, 75% white, 36ch measure. */
    font: 300 11.5px/1.7 var(--hexa-font);
    color: rgba(255, 255, 255, .75);
    max-width: 36ch;
}

/* ── The form pane (1168-1192) ───────────────────────────────────────────── */
.hexa-auth__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(22px, 3.4cqi, 54px);
    justify-content: center;
    /* Without this the pane's own grid track can be wider than the column and
       a long validation message pushes the layout sideways. */
    min-width: 0;
}

/* Two tabs in a --sf trough, the active one raised to --pp (SF:1169-1173).
   They are LINKS, not buttons: sign-in and register are two routes, and a
   button that navigates lies to a screen reader. */
.hexa-auth__tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--hexa-sf);
    align-self: flex-start;
}

.hexa-auth__tab {
    padding: 11px 20px;
    border: 0;
    background: transparent;
    color: var(--hexa-sub);
    font: 700 12px/1 var(--hexa-font);
    text-decoration: none;
}

.hexa-auth__tab.is-active {
    background: var(--hexa-pp);
    color: var(--hexa-ink);
}

.hexa-auth__title {
    margin: 0;
    /* SF:1174 — 800 clamp(22px,3cqi,36px)/1.1. */
    font: 800 clamp(22px, 3cqi, 36px) / 1.1 var(--hexa-font);
    color: var(--hexa-ink);
}

/* The design draws label-above-field as a flex column with a 6px gap
   (SF:1176-1179). Register needs nine fields where the design sketches three,
   so the fields live in their own container and the gap is declared once. */
.hexa-auth__fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hexa-auth__label {
    font: 400 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    /* The design's 16px rhythm between one field and the next label. The first
       label needs no lead, or the block gains a phantom top margin. */
    margin-block-start: 10px;
}

.hexa-auth__fields > .hexa-auth__label:first-child {
    margin-block-start: 0;
}

/* ⚠️ Bootstrap ships `.form-control`, and several of these inputs must keep
   that class because the platform's own scripts and the live state/city
   autocomplete select on it. So the field styling is written against BOTH the
   bare element and the vendor class, at a specificity that wins. */
.hexa-auth__form input[type="text"],
.hexa-auth__form input[type="email"],
.hexa-auth__form input[type="tel"],
.hexa-auth__form input[type="password"],
.hexa-auth__form select,
.hexa-auth__form .form-control {
    /* SF:1178 — 15px padding, 1px --ln, 2px radius, --pp ground. */
    padding: 15px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    font: 400 12.5px/1 var(--hexa-font);
    outline: none;
    width: 100%;
    /* Bootstrap's own height/shadow, out-declared rather than fought. */
    height: auto;
    box-shadow: none;
}

.hexa-auth__form input:focus,
.hexa-auth__form select:focus,
.hexa-auth__form .form-control:focus {
    /* SF:1178 style-focus — the border darkens to --ink. No glow ring. */
    border-color: var(--hexa-ink);
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    box-shadow: none;
}

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

/* The select needs its own chevron: `appearance:none` removes the native one
   and leaves a blank gutter. Same treatment as checkout's. */
.hexa-auth__form select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 34px;
}

.hexa-auth__sel {
    position: relative;
    display: block;
}

.hexa-auth__sel::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    line-height: 1;
    color: var(--hexa-sub);
    position: absolute;
    inset-inline-end: 12px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Remember-me + forgot, on one wrapping row (SF:1181-1184). */
.hexa-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-start: 6px;
}

.hexa-auth__remember {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 300 11.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    cursor: pointer;
}

/* SF:1182 draws a 15px bordered square. `appearance:none` on a checkbox that
   the platform reads by NAME is safe — the value still posts. */
.hexa-auth__remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1px solid var(--hexa-ln);
    border-radius: 0;
    background: var(--hexa-pp);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    cursor: pointer;
}

.hexa-auth__remember input[type="checkbox"]::before {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-size: 12px;
    line-height: 1;
    color: var(--hexa-on);
    opacity: 0;
}

.hexa-auth__remember input[type="checkbox"]:checked {
    background: var(--hexa-grad);
    border-color: transparent;
}

.hexa-auth__remember input[type="checkbox"]:checked::before {
    opacity: 1;
}

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

/* ⚠️ THE SUBMIT BUTTON MUST HOLD PLAIN TEXT ON THE LOGIN SCREEN.
   `components/custom-js/ajax-login.blade.php` does `el.text('Please Wait..')`,
   which REPLACES the button's entire contents — a nested icon span is
   destroyed on the first click and never comes back. The design draws no icon
   here anyway (SF:1185), so the two agree; this note exists so nobody adds
   one. */
.hexa-auth__submit {
    padding: 16px;
    border: 0;
    border-radius: 2px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 12.5px/1 var(--hexa-font);
    cursor: pointer;
    margin-block-start: 14px;
    width: 100%;
    transition: transform .25s ease;
}

.hexa-auth__submit:hover {
    transform: translateY(-2px);
}

/* "or", with a rule either side (SF:1186). */
.hexa-auth__or {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 300 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-auth__or::before,
.hexa-auth__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hexa-ln);
}

/* The design's social row (SF:1187-1191).
   ⚠️ DEVIATION, and it is a deliberate omission rather than an oversight: this
   platform has NO social login — there is no Socialite config, no provider
   route and no `provider` column on users. Drawing Google and Facebook buttons
   would be drawing two buttons that cannot work. The row is kept and used for
   the ONE alternative sign-in the platform does have (OTP, when the SmsGateway
   module is installed), and renders nothing at all when it is not. */
.hexa-auth__socials {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.hexa-auth__social {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    font: 600 11.5px/1 var(--hexa-font);
    text-decoration: none;
    transition: border-color .3s ease;
}

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

.hexa-auth__social .hexa-i {
    font-size: 17px;
}

/* The password reveal. The platform's script does
   `closest('.auth-input-wrapper').find('input')` and already knows how to swap
   a Material Symbols ligature, so the wrapper keeps the vendor class and the
   button holds a ligature span. */
.hexa-auth__wrap {
    position: relative;
    display: block;
}

.hexa-auth__wrap input {
    padding-inline-end: 44px;
}

.hexa-auth__reveal {
    position: absolute;
    inset-inline-end: 6px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--hexa-sub);
    cursor: pointer;
    padding: 0;
}

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

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

/* The optional-details collapsible on register.
   ⚠️ The panel is closed with the `hidden` ATTRIBUTE, not a CSS rule: the
   platform's `slideToggle()` writes an inline `display`, which cannot beat a
   stylesheet rule it does not know about — the panel would open to zero
   height. A display declaration here would also out-specify the UA's [hidden],
   which is the same trap Phase 3's bag hit from the other side. */
.hexa-auth__more {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 0;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    cursor: pointer;
    margin-block-start: 10px;
}

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

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

.hexa-auth__more .hexa-i {
    font-size: 18px;
    color: var(--hexa-sub);
    margin-inline-start: auto;
    transition: transform .3s ease;
}

/* The platform toggles `.rotated` on the chevron itself. */
.hexa-auth__more .hexa-i.rotated {
    transform: rotate(180deg);
}

.hexa-auth__extra {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The live state / city autocomplete. The <ul> is absolutely positioned
   against `.hexa-auth__wrap`, which is why that wrapper carries
   `position:relative` above — without it the dropdown escapes to the page. */
.hexa-auth__form .state-dropdown,
.hexa-auth__form .city-dropdown {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 20;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: var(--hexa-pp);
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
}

.hexa-auth__form .state-dropdown li,
.hexa-auth__form .city-dropdown li {
    padding: 11px 13px;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    font: 400 11.5px/1 var(--hexa-font);
    cursor: pointer;
}

.hexa-auth__form .state-dropdown li:hover,
.hexa-auth__form .city-dropdown li:hover {
    background: var(--hexa-sf);
}

/* The platform's flash + validation blocks land inside this pane. */
.hexa-auth__form .alert {
    padding: 12px 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: var(--hexa-sf);
    color: var(--hexa-ink);
    font: 400 11.5px/1.6 var(--hexa-font);
    margin: 0;
}

.hexa-auth__form .alert ul {
    margin: 0;
    padding-inline-start: 18px;
}

/* The design's three perks, under the form. Hub copy so a shop can say what is
   actually true of it. */
.hexa-auth__perks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hexa-auth__perk {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 300 11px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-auth__perk .hexa-i {
    font-size: 16px;
    color: var(--hexa-acd);
    flex: 0 0 auto;
}

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

.hexa-auth__foot a {
    color: var(--hexa-acd);
    font-weight: 700;
}


/* ===========================================================================
   2. THE ACCOUNT SHELL — Storefront 1106-1123.

   `shopCols` (SF:1107) is Pattern C: `minmax(190px,240px) 1fr`, sticky aside at
   top:86px. The same track the shop listing uses, which is why both read the
   same custom properties.

   ⚠️ THIS SHELL WRAPS EVERY ACCOUNT SCREEN — dashboard, orders, order detail,
   addresses, wallet, loyalty, downloads, refunds, tickets, password. Each
   child drops into `@yield('section')` untouched, so the panel and table rules
   below have to be generic enough for screens this design never drew.
   =========================================================================== */

.hexa-dash {
    display: grid;
    grid-template-columns: minmax(var(--hexa-c-min, 190px), var(--hexa-c-max, 240px)) 1fr;
    gap: clamp(16px, 2.4cqi, 36px);
    align-items: start;
    padding: clamp(22px, 3.2cqi, 46px) clamp(14px, 4cqi, 58px) clamp(34px, 5cqi, 70px);
}

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

.hexa-dash__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    padding: clamp(16px, 2.2cqi, 24px);
    position: sticky;
    top: var(--hexa-sticky);
}

/* The identity block (SF:1109-1115): a gradient hexagon holding the initial,
   then name over email. */
.hexa-dash__who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hexa-dash__avatar {
    /* SF:1110 — 42×48, which is the theme's 0.87 hexagon ratio. */
    width: 42px;
    height: 48px;
    background: var(--hexa-grad);
    clip-path: var(--hexa-clip);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 15px/1 var(--hexa-num);
    color: var(--hexa-on);
    flex: 0 0 auto;
    overflow: hidden;
}

/* A tenant with an uploaded avatar gets the photo, still hexagon-clipped. */
.hexa-dash__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.hexa-dash__whon {
    font: 700 13px/1 var(--hexa-font);
    color: var(--hexa-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hexa-dash__whom {
    font: 300 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hexa-dash__rule {
    height: 1px;
    background: var(--hexa-ln);
}

/* The rail (SF:1117-1121). The design draws five items; this platform has
   eleven working destinations and dropping six would remove working features
   to match a mock, so the design's SHAPE takes the real route list. */
.hexa-dash__nav {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-ink);
    font: 700 12px/1 var(--hexa-font);
    text-align: start;
    text-decoration: none;
}

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

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

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

.hexa-dash__nav .hexa-i {
    font-size: 18px;
    flex: 0 0 auto;
}

/* Sign out (SF:1122) — outlined, --acd text, its own 6px lead. */
.hexa-dash__out {
    margin-block-start: 6px;
    padding: 13px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-acd);
    font: 700 11.5px/1 var(--hexa-font);
    text-align: center;
    text-decoration: none;
}

.hexa-dash__out:hover {
    background: var(--hexa-sf);
    color: var(--hexa-acd);
}

.hexa-dash__main {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2cqi, 22px);
    min-width: 0;
}

/* ── Stat tiles (SF:1125-1132) ────────────────────────────────────────────
   `repeat(auto-fit, minmax(min(100%,140px),1fr))` — Pattern A at a 140px
   floor, the smallest in the theme. */
.hexa-dash__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 10px;
}

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

.hexa-dash__statv {
    /* Archivo — this is a numeral, and the design is explicit about it. */
    font: 800 clamp(18px, 2.2cqi, 26px) / 1 var(--hexa-num);
    color: var(--hexa-ink);
}

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

/* ── A panel (SF:1133-1144) ───────────────────────────────────────────────
   Bordered --pp box, a titled head with a hairline under it, then rows. */
.hexa-dash__panel {
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-dash__panelhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px clamp(14px, 2cqi, 20px);
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-dash__panelt {
    font: 800 12.5px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

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

/* An order row (SF:1136-1142): number, date, status chip, total pushed to the
   end, then the action. Wraps rather than scrolling on a phone. */
.hexa-dash__order {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px clamp(14px, 2cqi, 20px);
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-dash__order:last-child {
    border-bottom: 0;
}

.hexa-dash__orderno {
    font: 600 11.5px/1 var(--hexa-num);
    color: var(--hexa-ink);
    min-width: 88px;
}

.hexa-dash__orderd {
    font: 300 11px/1 var(--hexa-font);
    color: var(--hexa-sub);
    min-width: 96px;
}

/* The status chip. The design fills the FIRST row's chip with the gradient and
   leaves the rest --sf (SF:2082) — that is "the live one stands out", not
   "row one is special", so the modifier is applied by MEANING here: an order
   still moving gets the gradient, a finished one does not. */
.hexa-dash__pill {
    padding: 7px 11px;
    background: var(--hexa-sf);
    color: var(--hexa-sub);
    font: 700 10px/1 var(--hexa-font);
}

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

.hexa-dash__ordertotal {
    font: 700 12.5px/1 var(--hexa-num);
    color: var(--hexa-ink);
    margin-inline-start: auto;
}

.hexa-dash__ordertotal del {
    color: var(--hexa-sub);
    font-weight: 400;
    font-size: 11px;
    margin-inline-end: 6px;
}

.hexa-dash__view {
    padding: 9px 13px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-ink);
    font: 400 10.5px/1 var(--hexa-font);
    text-decoration: none;
}

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

/* Cancel is destructive, so it reads as --acd rather than as a second neutral
   button beside "Details".
   ⚠️ `.cancel-btn` inside `form.order-cancel-form` is what the page's
   SweetAlert handler binds and submits. Both class names are load-bearing. */
.hexa-dash__cancel {
    padding: 9px 13px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-acd);
    font: 700 10.5px/1 var(--hexa-font);
    cursor: pointer;
}

.hexa-dash__cancel:hover {
    background: var(--hexa-sf);
}

/* ── Address cards (SF:1145-1153) ─────────────────────────────────────────
   `repeat(auto-fit, minmax(min(100%,220px),1fr))`. */
.hexa-dash__addrs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 10px;
}

.hexa-dash__addr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-dash__addrl {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 700 12px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-dash__addrtag {
    padding: 5px 8px;
    background: var(--hexa-sf);
    font: 700 9.5px/1 var(--hexa-font);
    color: var(--hexa-acd);
}

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

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

.hexa-dash__hi {
    margin: 0;
    font: 800 clamp(20px, 2.8cqi, 32px) / 1.1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-dash__empty {
    margin: 0;
    padding: 22px clamp(14px, 2cqi, 20px);
    font: 300 11.5px/1.7 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-dash__pager {
    margin-block-start: 4px;
}

/* ── Screens this design never drew ───────────────────────────────────────
   Wallet, loyalty, downloads, refunds, tickets, profile and password all render
   inside this shell as platform markup. They are given the theme's atoms
   generically rather than left in the legacy stylesheet's look — that sheet is
   deliberately NOT loaded for this theme, so without these rules those screens
   would render as unstyled Bootstrap. */
.hexa-dash__main .card,
.hexa-dash__main .cw-card,
.hexa-dash__main .lp-card {
    border: 1px solid var(--hexa-ln);
    border-radius: 0;
    background: var(--hexa-pp);
    box-shadow: none;
}

.hexa-dash__main .table {
    width: 100%;
    border-collapse: collapse;
    color: var(--hexa-ink);
    font: 400 11.5px/1.5 var(--hexa-font);
    margin: 0;
}

.hexa-dash__main .table th {
    padding: 13px clamp(10px, 1.4cqi, 16px);
    border-bottom: 1px solid var(--hexa-ln);
    background: var(--hexa-sf);
    font: 700 10.5px/1 var(--hexa-font);
    color: var(--hexa-ink);
    text-align: start;
    white-space: nowrap;
}

.hexa-dash__main .table td {
    padding: 13px clamp(10px, 1.4cqi, 16px);
    border-bottom: 1px solid var(--hexa-ln);
    vertical-align: middle;
}

/* A wide table on a phone scrolls inside its own box rather than widening the
   page — the same treatment the bag and the invoice get. */
.hexa-dash__main .table-responsive {
    overflow-x: auto;
    scrollbar-width: none;
}

.hexa-dash__main .table-responsive::-webkit-scrollbar {
    height: 0;
}

.hexa-dash__main .nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--hexa-sf);
    list-style: none;
    margin: 0 0 clamp(14px, 2cqi, 22px);
}

.hexa-dash__main .nav-pills .nav-link {
    padding: 11px 18px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-sub);
    font: 700 11.5px/1 var(--hexa-font);
    cursor: pointer;
}

.hexa-dash__main .nav-pills .nav-link.active {
    background: var(--hexa-pp);
    color: var(--hexa-ink);
}

.hexa-dash__main label {
    font: 400 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    margin-block-end: 6px;
    display: block;
}

.hexa-dash__main input[type="text"],
.hexa-dash__main input[type="email"],
.hexa-dash__main input[type="tel"],
.hexa-dash__main input[type="number"],
.hexa-dash__main input[type="password"],
.hexa-dash__main select,
.hexa-dash__main textarea,
.hexa-dash__main .form-control {
    padding: 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    font: 400 12px/1.5 var(--hexa-font);
    outline: none;
    width: 100%;
    height: auto;
    box-shadow: none;
}

.hexa-dash__main input:focus,
.hexa-dash__main select:focus,
.hexa-dash__main textarea:focus,
.hexa-dash__main .form-control:focus {
    border-color: var(--hexa-ink);
    box-shadow: none;
}

.hexa-dash__main .btn,
.hexa-dash__main .btn-default,
.hexa-dash__main button[type="submit"] {
    padding: 14px 22px;
    border: 0;
    border-radius: 2px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 11.5px/1 var(--hexa-font);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hexa-dash__main .btn:hover,
.hexa-dash__main button[type="submit"]:hover {
    color: var(--hexa-on);
}

.hexa-dash__main .alert {
    padding: 13px 15px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: var(--hexa-sf);
    color: var(--hexa-ink);
    font: 400 11.5px/1.6 var(--hexa-font);
}

.hexa-dash__main .badge {
    padding: 6px 10px;
    border-radius: 2px;
    font: 700 9.5px/1 var(--hexa-font);
}


/* ===========================================================================
   3. THE JOURNAL INDEX — Storefront 1255-1290.

   Header row with the eyebrow + title on one side and the category chips on
   the other, a featured split, then a 230px auto-fill grid.
   =========================================================================== */

.hexa-jn {
    padding: clamp(22px, 3.2cqi, 46px) clamp(14px, 4cqi, 58px) clamp(34px, 5cqi, 70px);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4cqi, 32px);
}

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

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

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

.hexa-jn__title {
    margin: 0;
    font: 800 clamp(24px, 3.4cqi, 44px) / 1.05 var(--hexa-font);
    color: var(--hexa-ink);
}

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

.hexa-jn__chip {
    padding: 10px 15px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11px/1 var(--hexa-font);
    text-decoration: none;
}

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

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

/* The featured split (SF:1268-1276). `repeat(auto-fit,minmax(min(100%,280px),1fr))`
   with a ZERO gap — the image and the body are two halves of one card, so they
   must touch. */
.hexa-jn__feat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 0;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    overflow: hidden;
    text-decoration: none;
}

.hexa-jn__featmedia {
    display: block;
    background: var(--hexa-sf);
}

.hexa-jn__featmedia img {
    width: 100%;
    height: clamp(220px, 30cqi, 380px);
    object-fit: cover;
    display: block;
}

.hexa-jn__featbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(18px, 2.6cqi, 38px);
    justify-content: center;
}

.hexa-jn__badge {
    align-self: flex-start;
    padding: 7px 11px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 10px/1 var(--hexa-font);
    text-decoration: none;
}

.hexa-jn__feattitle {
    font: 800 clamp(19px, 2.6cqi, 32px) / 1.25 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-jn__featexcerpt {
    font: 300 12px/1.8 var(--hexa-font);
    color: var(--hexa-sub);
    max-width: 46ch;
    margin: 0;
}

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

/* The post grid (SF:1277-1288). */
.hexa-jn__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: clamp(12px, 1.6cqi, 22px);
}

.hexa-jn__card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    color: var(--hexa-ink);
    text-decoration: none;
}

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

.hexa-jn__cardmedia img {
    width: 100%;
    height: clamp(150px, 18cqi, 220px);
    object-fit: cover;
    display: block;
    transition: transform .7s ease;
}

.hexa-jn__card:hover .hexa-jn__cardmedia img {
    transform: scale(1.06);
}

/* The card chip is INK, not gradient — the gradient is the featured card's
   (SF:1282 vs 1271). Two different chips, deliberately. */
.hexa-jn__cardchip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 6px 10px;
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 9.5px/1 var(--hexa-font);
}

.hexa-jn__cardtitle {
    font: 700 13.5px/1.45 var(--hexa-font);
    color: var(--hexa-ink);
}

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


/* ===========================================================================
   4. THE ARTICLE — Storefront 1292-1336.

   A full-bleed hero, then Pattern C's ARTICLE variant: `minmax(150px,200px) 1fr`
   (SF:2093), a narrower aside than the shop's.
   =========================================================================== */

.hexa-post__hero {
    position: relative;
    height: clamp(240px, 32cqi, 440px);
    overflow: hidden;
    background: var(--hexa-ink);
}

.hexa-post__hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hexa-post__scrim {
    position: absolute;
    inset: 0;
    /* SF:1296 — a HARDER scrim than the auth pane's (.92 vs .9). Two tokens,
       not one, because the design chose two values. */
    background: var(--hexa-scrim-hard);
    pointer-events: none;
}

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

.hexa-post__title {
    margin: 0;
    max-width: 24ch;
    font: 800 clamp(22px, 3.8cqi, 52px) / 1.1 var(--hexa-font);
    color: #FFF;
}

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

/* A post with no cover image gets the same head on the page ground rather than
   a black box — the design never draws this because its mock always has one. */
.hexa-post__head {
    padding: clamp(24px, 3.4cqi, 54px) clamp(14px, 4cqi, 58px) 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hexa-post__head .hexa-post__title {
    color: var(--hexa-ink);
}

.hexa-post__head .hexa-post__meta {
    color: var(--hexa-sub);
}

.hexa-post__body {
    display: grid;
    grid-template-columns: minmax(150px, 200px) 1fr;
    gap: clamp(18px, 3cqi, 50px);
    padding: clamp(24px, 3.4cqi, 54px) clamp(14px, 4cqi, 58px);
    align-items: start;
}

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

.hexa-post__side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: var(--hexa-sticky);
}

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

/* Share squares (SF:1306-1310): 36px bordered boxes with a two-letter mark.
   ⚠️ `single_post_share()` emits BARE <li> elements with no wrapping <ul> —
   the caller supplies it. Mira's Phase 2 shipped visible bullets by not
   knowing that, so the list is reset here explicitly. */
.hexa-post__share {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hexa-post__share li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hexa-post__share li a {
    width: 36px;
    height: 36px;
    border: 1px solid var(--hexa-ln);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10px/1 var(--hexa-num);
    color: var(--hexa-sub);
    text-decoration: none;
}

.hexa-post__share li a:hover {
    background: var(--hexa-ink);
    color: var(--hexa-bg);
}

/* The platform's share helper emits Line Awesome <i> glyphs; they are sized
   here rather than replaced, because the helper is shared by eight themes. */
.hexa-post__share li a i {
    font-size: 15px;
}

.hexa-post__rule {
    height: 1px;
    background: var(--hexa-ln);
}

.hexa-post__toc {
    font: 400 11.5px/1.5 var(--hexa-font);
    color: var(--hexa-sub);
    text-decoration: none;
}

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

.hexa-post__col {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8cqi, 24px);
    /* SF:1317 — a 70ch measure. The single most important value on the page. */
    max-width: 70ch;
}

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

.hexa-post__tag {
    padding: 8px 12px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    font: 400 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    text-decoration: none;
}

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

/* The author card (SF:1325-1332): hexagon avatar, name over role, a button. */
.hexa-post__author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(16px, 2cqi, 24px);
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    flex-wrap: wrap;
}

.hexa-post__avatar {
    width: 48px;
    height: 54px;
    object-fit: cover;
    clip-path: var(--hexa-clip);
    background: var(--hexa-sf);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hexa-sub);
    flex: 0 0 auto;
}

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

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

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

.hexa-post__authorcta {
    padding: 12px 16px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11px/1 var(--hexa-font);
    text-decoration: none;
}

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


/* ===========================================================================
   5. PROSE — the tenant's own HTML.

   Post bodies and CMS pages come out of an editor with NO classes to hook, so
   these are element rules, deliberately. Scoped under `.hexa-prose` so they
   can never reach the theme's own markup.

   The design's body values are SF:2102 (`300 clamp(12.5px,1.3cqi,15.5px)/1.9`)
   and the pull quote SF:2101 (`400 clamp(15px,2cqi,24px)/1.5`, a 2px --acd
   border with 18px of inline-start padding).
   =========================================================================== */

.hexa-prose {
    font: 300 clamp(12.5px, 1.3cqi, 15.5px) / 1.9 var(--hexa-font);
    color: var(--hexa-sub);
    text-wrap: pretty;
}

.hexa-prose p {
    margin: 0 0 clamp(14px, 1.8cqi, 24px);
}

.hexa-prose h1,
.hexa-prose h2,
.hexa-prose h3,
.hexa-prose h4 {
    color: var(--hexa-ink);
    font-family: var(--hexa-font);
    font-weight: 800;
    line-height: 1.25;
    margin: clamp(20px, 2.6cqi, 34px) 0 clamp(10px, 1.2cqi, 14px);
}

.hexa-prose h1 { font-size: clamp(21px, 2.8cqi, 34px); }
.hexa-prose h2 { font-size: clamp(18px, 2.3cqi, 28px); }
.hexa-prose h3 { font-size: clamp(16px, 1.9cqi, 22px); }
.hexa-prose h4 { font-size: clamp(14px, 1.6cqi, 18px); }

.hexa-prose a {
    color: var(--hexa-acd);
    text-decoration: underline;
}

.hexa-prose img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: clamp(16px, 2cqi, 26px) 0;
    background: var(--hexa-sf);
}

.hexa-prose blockquote {
    margin: clamp(16px, 2cqi, 26px) 0;
    padding: 0;
    padding-inline-start: 18px;
    border: 0;
    border-inline-start: 2px solid var(--hexa-acd);
    font: 400 clamp(15px, 2cqi, 24px) / 1.5 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-prose blockquote p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.hexa-prose ul,
.hexa-prose ol {
    margin: 0 0 clamp(14px, 1.8cqi, 24px);
    padding-inline-start: 22px;
}

.hexa-prose li {
    margin-block-end: 7px;
}

.hexa-prose hr {
    border: 0;
    height: 1px;
    background: var(--hexa-ln);
    margin: clamp(20px, 2.6cqi, 34px) 0;
}

.hexa-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: clamp(16px, 2cqi, 26px) 0;
    font-size: 12px;
}

.hexa-prose th,
.hexa-prose td {
    padding: 11px 13px;
    border: 1px solid var(--hexa-ln);
    text-align: start;
}

.hexa-prose th {
    background: var(--hexa-sf);
    color: var(--hexa-ink);
    font-weight: 700;
}

.hexa-prose code,
.hexa-prose pre {
    background: var(--hexa-sf);
    color: var(--hexa-ink);
    font-size: 12px;
}

.hexa-prose pre {
    padding: 14px;
    overflow-x: auto;
}


/* ===========================================================================
   6. COMMENTS — the blog module's own markup.

   Not in the design at all; the module emits it and this theme must not leave
   it unstyled. Element and vendor-class rules, scoped to the block.
   =========================================================================== */

.hexa-post__comments {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hexa-post__commentst {
    font: 800 13px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-post__comments .single-comment,
.hexa-post__comments .comment-list-item {
    display: flex;
    gap: 12px;
    padding: clamp(14px, 1.8cqi, 20px);
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    list-style: none;
}

.hexa-post__comments ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.hexa-post__comments .title {
    font: 700 12px/1.4 var(--hexa-font);
    color: var(--hexa-ink);
    margin: 0 0 5px;
}

.hexa-post__comments p {
    font: 300 11.5px/1.75 var(--hexa-font);
    color: var(--hexa-sub);
    margin: 0;
}

.hexa-post__comments .btn-replay {
    padding: 8px 12px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-acd);
    font: 700 10px/1 var(--hexa-font);
    cursor: pointer;
}

.hexa-post__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(16px, 2cqi, 24px);
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-post__form input[type="text"],
.hexa-post__form input[type="email"],
.hexa-post__form textarea,
.hexa-post__form .form-control {
    padding: 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: var(--hexa-bg);
    color: var(--hexa-ink);
    font: 400 12px/1.6 var(--hexa-font);
    outline: none;
    width: 100%;
    height: auto;
    box-shadow: none;
}

.hexa-post__form textarea {
    resize: vertical;
    min-height: 110px;
}

.hexa-post__form .form-control:focus {
    border-color: var(--hexa-ink);
    box-shadow: none;
}

.hexa-post__form button,
.hexa-post__form .btn {
    align-self: flex-start;
    padding: 14px 22px;
    border: 0;
    border-radius: 2px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 11.5px/1 var(--hexa-font);
    cursor: pointer;
}

.hexa-post__loadmore {
    align-self: flex-start;
    padding: 12px 18px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11px/1 var(--hexa-font);
    cursor: pointer;
}


/* ===========================================================================
   7. FAQ + SIZE GUIDE — Storefront 1338-1377.

   `artCols` again (SF:1344) — the article's narrow aside beside the content.

   ⚠️ THE ACCORDION REUSES PHASE 2's `.hexa-acc`. Its rows are structurally the
   PDP's rows: a full-width button with a +/− ligature that toggles a panel. A
   `.hexa-faq__acc` would have been a second copy of the same rules, drifting
   the moment one was edited. The only rules here are the ones where FAQ
   DIFFERS (17px rows rather than the PDP's, a 70ch answer measure), and they
   are written SCOPED — `.hexa-faq .hexa-acc__btn` — so this layer tweaks the
   block in context without claiming it.
   =========================================================================== */

.hexa-faq {
    padding: clamp(22px, 3.2cqi, 46px) clamp(14px, 4cqi, 58px) clamp(34px, 5cqi, 70px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.6cqi, 34px);
}

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

.hexa-faq__title {
    margin: 0;
    font: 800 clamp(24px, 3.4cqi, 42px) / 1.05 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-faq__sub {
    margin: 0;
    max-width: 56ch;
    font: 300 12px/1.75 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-faq__split {
    display: grid;
    grid-template-columns: minmax(150px, 200px) 1fr;
    gap: clamp(16px, 2.6cqi, 40px);
    align-items: start;
}

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

.hexa-faq__side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: var(--hexa-sticky);
}

/* SF:1347 — a 2px inline-start marker rather than a background pill; the
   active one takes --acd and an --sf ground. */
.hexa-faq__nav {
    padding: 12px 14px;
    border: 0;
    border-inline-start: 2px solid transparent;
    background: transparent;
    color: var(--hexa-sub);
    font: 700 11.5px/1 var(--hexa-font);
    text-align: start;
    cursor: pointer;
}

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

.hexa-faq__nav.is-active {
    border-inline-start-color: var(--hexa-acd);
    background: var(--hexa-sf);
    color: var(--hexa-ink);
}

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

/* Scoped tweaks to the shared accordion — see the note at the top. */
.hexa-faq .hexa-acc__btn {
    padding: 17px clamp(14px, 2cqi, 22px);
    font: 700 12.5px/1.4 var(--hexa-font);
}

.hexa-faq .hexa-acc__panel {
    padding: 0 clamp(14px, 2cqi, 22px) 18px;
    font: 300 12px/1.85 var(--hexa-font);
    max-width: 70ch;
}

/* The size table (SF:1359-1366): five equal columns with a 420px minimum, in a
   box that scrolls sideways rather than crushing. */
.hexa-faq__sizes {
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    overflow: auto;
    scrollbar-width: none;
}

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

.hexa-faq__sizest {
    display: block;
    padding: 15px clamp(14px, 2cqi, 22px);
    border-bottom: 1px solid var(--hexa-ln);
    font: 800 12.5px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-faq__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    min-width: 420px;
}

.hexa-faq__cell {
    padding: 12px 14px;
    border-bottom: 1px solid var(--hexa-ln);
    border-inline-end: 1px solid var(--hexa-ln);
    font: 400 11.5px/1 var(--hexa-num);
    color: var(--hexa-sub);
}

.hexa-faq__cell--head {
    background: var(--hexa-sf);
    font: 700 11px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

/* SF:2108 — the first column of each row is bold and --ink; even rows take the
   --bg ground. */
.hexa-faq__cell--first {
    font-weight: 700;
    color: var(--hexa-ink);
}

.hexa-faq__cell--zebra {
    background: var(--hexa-bg);
}

/* The help CTA (SF:1367-1373): a full-gradient band with an --ink button. */
.hexa-faq__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: clamp(16px, 2.2cqi, 26px);
    background: var(--hexa-grad);
    color: var(--hexa-on);
}

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

.hexa-faq__ctat {
    font: 800 14px/1.3 var(--hexa-font);
}

.hexa-faq__ctas {
    font: 300 11.5px/1.6 var(--hexa-font);
    opacity: .92;
}

.hexa-faq__ctabtn {
    padding: 14px 22px;
    border: 0;
    border-radius: 2px;
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 12px/1 var(--hexa-font);
    text-decoration: none;
}

.hexa-faq__ctabtn:hover {
    color: var(--hexa-bg);
}


/* ===========================================================================
   8. CONTACT — Storefront 1416-1460.

   `repeat(auto-fit,minmax(min(100%,290px),1fr))` — Pattern A, so the two panes
   are equal and collapse on their own with no breakpoint.
   =========================================================================== */

.hexa-ct {
    padding: clamp(22px, 3.2cqi, 46px) clamp(14px, 4cqi, 58px) clamp(34px, 5cqi, 70px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(18px, 2.6cqi, 40px);
    align-items: start;
}

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

.hexa-ct__intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hexa-ct__title {
    margin: 0;
    font: 800 clamp(24px, 3.4cqi, 42px) / 1.05 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-ct__sub {
    margin: 0;
    max-width: 46ch;
    font: 300 12px/1.8 var(--hexa-font);
    color: var(--hexa-sub);
}

/* Channel cards (SF:1421-1429): 170px floor, icon over heading over value. */
.hexa-ct__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 10px;
    margin-block-start: 4px;
}

.hexa-ct__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    text-decoration: none;
}

.hexa-ct__card .hexa-i {
    font-size: 20px;
    color: var(--hexa-acd);
}

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

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

/* The branch list (SF:1430-1442): a bordered box, each row a numbered --sf
   hexagon, then city over address, with the hours pushed to the end. */
.hexa-ct__branches {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    margin-block-start: 6px;
}

.hexa-ct__brancht {
    padding: 14px 16px;
    border-bottom: 1px solid var(--hexa-ln);
    font: 800 12.5px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-ct__branch {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-ct__branch:last-child {
    border-bottom: 0;
}

.hexa-ct__n {
    width: 26px;
    height: 29px;
    background: var(--hexa-sf);
    clip-path: var(--hexa-clip);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10px/1 var(--hexa-num);
    color: var(--hexa-sub);
    flex: 0 0 auto;
}

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

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

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

.hexa-ct__hours {
    font: 300 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    flex: 0 0 auto;
}

/* The form (SF:1444-1457). Its border is --ink, not --ln: the design makes the
   form the emphasised pane on the page. */
.hexa-ct__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(18px, 2.6cqi, 32px);
    border: 1px solid var(--hexa-ink);
    background: var(--hexa-pp);
}

.hexa-ct__formt {
    font: 800 13px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-ct__label {
    font: 400 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    display: block;
    margin-block-end: 6px;
}

/* SF:1449 — a TRANSPARENT ground here, unlike auth's --pp fields, because the
   card itself is already --pp. */
.hexa-ct__form input,
.hexa-ct__form textarea,
.hexa-ct__form .form-control {
    padding: 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: 2px;
    background: transparent;
    color: var(--hexa-ink);
    font: 400 12px/1 var(--hexa-font);
    outline: none;
    width: 100%;
    height: auto;
    box-shadow: none;
}

.hexa-ct__form textarea {
    font: 400 12px/1.6 var(--hexa-font);
    resize: vertical;
    min-height: 96px;
}

.hexa-ct__form input:focus,
.hexa-ct__form textarea:focus,
.hexa-ct__form .form-control:focus {
    border-color: var(--hexa-ink);
    box-shadow: none;
}

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

.hexa-ct__send {
    padding: 16px;
    border: 0;
    border-radius: 2px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 12.5px/1 var(--hexa-font);
    cursor: pointer;
    transition: transform .25s ease;
}

.hexa-ct__send:hover {
    transform: translateY(-2px);
}

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

/* The platform's map embed, when a shop configures one. */
.hexa-ct__map {
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-sf);
    overflow: hidden;
}

.hexa-ct__map iframe {
    display: block;
    width: 100%;
    height: clamp(220px, 30cqi, 380px);
    border: 0;
}


/* ===========================================================================
   9. ABOUT — Storefront 1379-1414.

   Three bands: an intro split, a stat strip, and a values grid.
   =========================================================================== */

.hexa-about__intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(18px, 2.8cqi, 44px);
    padding: clamp(24px, 3.4cqi, 56px) clamp(14px, 4cqi, 58px);
    align-items: center;
}

.hexa-about__introbody {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

.hexa-about__title {
    margin: 0;
    font: 800 clamp(25px, 4cqi, 54px) / 1.05 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-about__p {
    margin: 0;
    max-width: 52ch;
    font: 300 clamp(12px, 1.25cqi, 15px) / 1.85 var(--hexa-font);
    color: var(--hexa-sub);
}

/* Two images, the FIRST one dropped by a clamp so the pair is offset
   (SF:1388-1391). Not a decoration: it is what stops the pane reading as a
   plain 2-up. */
.hexa-about__shots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hexa-about__shots img {
    width: 100%;
    height: clamp(180px, 24cqi, 300px);
    object-fit: cover;
    background: var(--hexa-sf);
    display: block;
}

.hexa-about__shots img:first-child {
    margin-block-start: clamp(14px, 3cqi, 40px);
}

/* The stat strip (SF:1393-1400): rules top and bottom, a 160px floor, and each
   figure GRADIENT-CLIPPED. That clip is reserved — hero word, cart total,
   rating figure, and these — so it is not a decoration to reuse elsewhere. */
.hexa-about__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    border-block: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-about__stat {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: clamp(18px, 2.4cqi, 32px);
    border-inline-end: 1px solid var(--hexa-ln);
}

.hexa-about__statv {
    font: 800 clamp(22px, 3cqi, 38px) / 1 var(--hexa-num);
    background: var(--hexa-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

.hexa-about__values {
    padding: clamp(24px, 3.4cqi, 56px) clamp(14px, 4cqi, 58px);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.2cqi, 28px);
}

.hexa-about__valuest {
    margin: 0;
    font: 800 clamp(20px, 2.8cqi, 36px) / 1.1 var(--hexa-font);
    color: var(--hexa-ink);
}

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

.hexa-about__value {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: clamp(16px, 2.2cqi, 26px);
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-about__icon {
    width: 32px;
    height: 36px;
    background: var(--hexa-grad);
    clip-path: var(--hexa-clip);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hexa-about__icon .hexa-i {
    font-size: 17px;
    color: var(--hexa-on);
}

.hexa-about__valueh {
    font: 700 13.5px/1.3 var(--hexa-font);
    color: var(--hexa-ink);
}

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


/* ===========================================================================
   10. A CMS PAGE.

   Any page a tenant writes in the editor with the page builder OFF. Not in the
   design; without it the content renders full-bleed against the viewport edge.
   =========================================================================== */

.hexa-page {
    padding: clamp(22px, 3.2cqi, 46px) clamp(14px, 4cqi, 58px) clamp(34px, 5cqi, 70px);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2cqi, 22px);
}

.hexa-page__inner {
    max-width: 78ch;
}


/* ===========================================================================
   11. AUTH KEYFRAMES.

   `hex-kb` is the art pane's slow drift. Declared in hexa.css beside the other
   two keyframes, NOT here — a second @keyframes with the same name in a later
   sheet silently replaces the first, and this layer loads last.
   =========================================================================== */


/* ===========================================================================
   12. 404 — INVENTED, and flagged.

   The Storefront draws no 404 and the Widgets file has no card for one. Every
   value below is chosen from the design system rather than read from the
   design, which is why they are listed:

     · the big "404" reuses the footer wordmark's treatment (SF:1499) — an
       outlined figure in Archivo. The footer strokes it at 1px in
       rgba(246,242,239,.14) on the dark ground; on the light page ground it is
       the ink triplet at the same alpha, which is the same IDEA expressed in
       the palette's own terms rather than a second literal.
     · the clamp `clamp(64px,18cqi,220px)` is the footer's scale, one step down
       (the footer is 15cqi to 190px on a full-bleed band; this sits inside page
       padding).
     · the copy, the search field and the two buttons come from onSearch's
       no-results state (SF:838-846), which is the nearest thing the design has
       to "we could not find it".

   Anything here that later turns out to conflict with a real Hexa 404 should
   be replaced by the design's values, not reconciled with these.
   =========================================================================== */

.hexa-404 {
    padding: clamp(34px, 5cqi, 80px) clamp(14px, 4cqi, 58px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(12px, 1.6cqi, 20px);
}

.hexa-404__fig {
    font: 800 clamp(64px, 18cqi, 220px) / .9 var(--hexa-num);
    letter-spacing: .02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--hexa-ink-rgb), .18);
}

.hexa-404__title {
    margin: 0;
    font: 800 clamp(20px, 2.8cqi, 34px) / 1.15 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-404__text {
    margin: 0;
    max-width: 46ch;
    font: 300 12px/1.8 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-404__acts {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: center;
    margin-block-start: 6px;
}

.hexa-404__btn {
    padding: 15px 24px;
    border: 0;
    border-radius: 2px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 12px/1 var(--hexa-font);
    text-decoration: none;
    transition: transform .25s ease;
}

.hexa-404__btn:hover {
    transform: translateY(-2px);
    color: var(--hexa-on);
}

.hexa-404__btn--out {
    background: transparent;
    border: 1px solid var(--hexa-ln);
    color: var(--hexa-ink);
}

.hexa-404__btn--out:hover {
    background: var(--hexa-sf);
    color: var(--hexa-ink);
}


/* ===========================================================================
   13. THE ONE STRUCTURAL BREAKPOINT — 760px.

   `narrow` (SF:1882) collapses `authCols` to `1fr` and sets `authImgDisp` to
   `none` (SF:2084), and `artCols` to `1fr` (SF:2093). Pattern C's aside is
   hidden when narrow, exactly as the shop's is.
   =========================================================================== */

@media (max-width: 760px) {
    /* Auth: one column, and the art pane is GONE, not stacked. SF:2084. */
    .hexa-auth {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .hexa-auth__art {
        display: none;
    }

    /* The account rail stops being a sidebar. It stays visible — unlike the
       shop's filter column, it is the only navigation these pages have, so
       hiding it would strand a phone user inside their account. */
    .hexa-dash {
        grid-template-columns: 1fr;
    }

    .hexa-dash__side {
        position: static;
    }

    /* Article + FAQ: the aside is hidden when narrow, per Pattern C. Its
       contents are share links and a table of contents, both redundant on a
       phone where the whole article is one scroll. */
    .hexa-post__body,
    .hexa-faq__split {
        grid-template-columns: 1fr;
    }

    .hexa-post__side,
    .hexa-faq__side {
        display: none;
    }

    /* Not a design value: at 320px an order row's number and date minimums add
       up to more than the panel, so those floors are dropped and the row wraps
       instead of overflowing. */
    .hexa-dash__orderno,
    .hexa-dash__orderd {
        min-width: 0;
    }

    /* Same reasoning: the about pair stops being 2-up rather than shrinking to
       two 140px slivers, and the offset comes off with it. */
    .hexa-about__shots {
        grid-template-columns: 1fr;
    }

    .hexa-about__shots img:first-child {
        margin-block-start: 0;
    }
}