/* ===========================================================================
   HEXA REDESIGN — purchase-flow layer (Phase 3)
   ===========================================================================

   Screens: bag, wishlist, checkout, order confirmed, payment failed, invoice,
   track order.

   Design source: "Hexa Storefront.dc.html"
     onCart    850-905     onCheckout 907-983     onSuccess 985-1019
     onWishlist 1021-1065  onTrack    1067-1104
   and "Hexa Widgets.dc.html"
     isInvoice  920-948    isPayFail  1183-1203

   Payment-failed and invoice have NO storefront screen — they exist only as
   widget cards. Both are built from the card plus the nearest full screen
   (onSuccess), and every value that had to be chosen rather than read is
   commented as such below.

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

   ⚠️ NO BLOCK NAME MAY BE DECLARED IN TWO LAYERS. Every block below was
   grepped against BOTH earlier sheets before use. The taken names are:

     hexa-acc hexa-aside hexa-badge hexa-band hexa-brand hexa-btn hexa-buy
     hexa-card hexa-cathero hexa-catintro hexa-chip hexa-cmp hexa-count
     hexa-crumb hexa-drawer hexa-eyebrow hexa-field hexa-filter hexa-footer
     hexa-gal hexa-grad hexa-grid hexa-header hexa-hex hexa-i hexa-iconbtn
     hexa-lang hexa-lightbox hexa-ltr hexa-menubtn hexa-mobnav hexa-nav
     hexa-num hexa-overlay hexa-pagehead hexa-pager hexa-pdp hexa-qv
     hexa-rail hexa-rel hexa-scroller hexa-search hexa-shop hexa-side
     hexa-sr hexa-srp hexa-stickybuy hexa-subcats hexa-ticker hexa-toast
     hexa-toolbar hexa-two

   This layer introduces, and only these:

     hexa-bag       the cart list          hexa-sum      the summary aside
     hexa-wish      the wishlist grid      hexa-empty    the shared empty state
     hexa-steps     the hex step row       hexa-co       checkout sections
     hexa-slots     delivery windows       hexa-pay      payment methods
     hexa-res       order confirmed        hexa-fail     payment failed
     hexa-sheet     the invoice            hexa-track    track order
     hexa-tl        the vertical timeline (shared: confirmed + track)

   ---------------------------------------------------------------------------
   WHAT THIS LAYER MAY NOT DO
   ---------------------------------------------------------------------------
   No new colour: every value resolves to one of the ten palette tokens. Radii
   stay 0 / 2px, with the single documented exception of the payment method's
   radio, which the design draws as a circle (`border-radius:50%`, SF:948) —
   that is a shape, like the colour dots in Phase 2, not a corner.

   Units are cqi. The single structural breakpoint is 760px, plus the print
   query for the invoice, which is not a responsive breakpoint at all.
   =========================================================================== */


/* ===========================================================================
   1. THE BAG — Storefront 850-905.

   ⚠️ THE CART IS STILL A <table> AND MUST STAY ONE.

   Two AJAX paths in the page's own script depend on the table elements:

     1. `$('#cart_tbody').html(data.markup)` after a quantity change, where
        data.markup is rendered SERVER-side from
        markup_for_controller/cart_products.blade.php. That partial and the
        page partial must emit the same row shape, or the bag looks right on
        load and reverts to platform markup on the first + click.

     2. `.load(location.href + " .custom--table.table-border.radius-10")`
        after a remove, which re-fetches by that exact class string.

   So the <table>/<tr>/<td> stay and their display is re-declared here. The
   design's row is a flex strip: image, then a body column. `display:contents`
   on the cell dissolves it so its children join the row's flex context.
   =========================================================================== */

.hexa-bag {
    display: grid;
    /* Pattern B — Storefront 856, `cartCols` = `1fr minmax(250px,330px)`
       (SF:2050). Same track as checkout, which is why both pages read the
       same custom properties. */
    grid-template-columns: 1fr minmax(250px, 330px);
    gap: clamp(16px, 2.4cqi, 36px);
    align-items: start;
}

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

/* The list panel — SF:857. One bordered card, rows separated by hairlines. */
.hexa-bag__list {
    display: flex;
    flex-direction: column;
    background: var(--hexa-pp);
    border: 1px solid var(--hexa-ln);
}

/* ── Undoing the table ────────────────────────────────────────────────────
   The elements stay in the DOM for the two AJAX paths; only their boxes are
   re-declared. */

.hexa-bag__table {
    display: block;
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.hexa-bag__table thead {
    /* Kept for screen readers — the visual row is self-describing. Not
       `display:none`, which would take it out of the accessibility tree too.
       This is `.hexa-sr`'s technique; it is repeated rather than reused
       because a <thead> cannot carry a utility class without the AJAX
       partial repeating it too. No `clip-path: inset(50%)` here — the
       `clip` rect already does the work, and an inset() would be the only
       non-hexagon clip-path in the theme. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hexa-bag__table tbody {
    display: block;
}

.hexa-bag__table tr {
    display: flex;
    gap: clamp(12px, 1.6cqi, 20px);
    padding: clamp(14px, 2cqi, 22px);
    border-bottom: 1px solid var(--hexa-ln);
}

.hexa-bag__table td {
    /* The cell itself must disappear so its children join the row's flex
       context — the design has no cell boxes, it has one strip. */
    display: contents;
}

/* ⚠️ `display:contents` on the element DEFEATS the `hidden` attribute: a
   display declaration from a class or element rule beats the UA sheet's
   `[hidden] { display:none }`. The platform's five-cell row keeps two cells
   this design does not show, so they are re-hidden explicitly. */
.hexa-bag__table td[hidden] {
    display: none;
}

/* ── The row's own parts ─────────────────────────────────────────────────── */

/* SF:860 — a fixed-ratio thumbnail that never shrinks. */
.hexa-bag__thumb {
    display: block;
    flex: 0 0 auto;
    width: clamp(80px, 9cqi, 110px);
    height: clamp(100px, 11cqi, 140px);
    background-color: var(--hexa-sf);
    background-size: cover;
    background-position: center;
}

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

/* SF:862 — name and meta at the start, the remove control at the end. */
.hexa-bag__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

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

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

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

/* SF:865 — "Size: M · Black" on one line. */
.hexa-bag__meta {
    font: 300 11px/1.5 var(--hexa-font);
    color: var(--hexa-sub);
}

/* SF:867 — a 30px square icon button, hairline bordered. */
.hexa-bag__remove {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hexa-ln);
    background: transparent;
    color: var(--hexa-sub);
    cursor: pointer;
    transition: border-color var(--hexa-t-line), color var(--hexa-t-line);
}

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

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

/* SF:869 — the stepper and the line total, pushed to the bottom of the body
   so rows of different heights still align their controls. */
.hexa-bag__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── The quantity stepper — SF:870-874 ────────────────────────────────────
   ⚠️ `.product-quantity`, `.substract`, `.plus` and `.quantity-input` are the
   platform's hooks: the script reads `el.parent().find('.quantity-input')`
   and calls `stepUp`/`stepDown` on the input, so the input must remain a real
   `type=number` and the buttons must remain its siblings. */

.hexa-bag .product-quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--hexa-ln);
    /* The legacy sheet positions this control absolutely inside a table cell.
       Unwound here rather than fought with !important elsewhere. */
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
}

.hexa-bag .product-quantity .substract,
.hexa-bag .product-quantity .plus {
    width: 34px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    font: 400 16px/1 var(--hexa-num);
    cursor: pointer;
    transition: background var(--hexa-t-line);
}

.hexa-bag .product-quantity .substract:hover,
.hexa-bag .product-quantity .plus:hover {
    background: var(--hexa-sf);
}

.hexa-bag .product-quantity .substract .hexa-i,
.hexa-bag .product-quantity .plus .hexa-i {
    font-size: 16px;
}

.hexa-bag .product-quantity input.quantity-input {
    min-width: 28px;
    width: 34px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hexa-ink);
    font: 700 12px/1 var(--hexa-num);
    text-align: center;
    outline: none;
    /* The spinner would sit on top of the design's own +/− buttons. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.hexa-bag .product-quantity input.quantity-input::-webkit-outer-spin-button,
.hexa-bag .product-quantity input.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* SF:875 — the line total. */
.hexa-bag__line {
    font: 700 14px/1 var(--hexa-num);
    color: var(--hexa-ink);
    white-space: nowrap;
}

/* ── The list's footer row — SF:880-886 ───────────────────────────────────
   "Keep shopping" at the start, the coupon field + Apply at the end. */

.hexa-bag__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: clamp(14px, 2cqi, 20px);
}

.hexa-bag__keep {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 400 11.5px/1 var(--hexa-font);
    cursor: pointer;
    transition: background var(--hexa-t-line);
}

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

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

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

/* SF:883 — a 150px field. It shrinks below that on a narrow row rather than
   pushing the Apply button off the panel. */
.hexa-bag__couponin {
    width: 150px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 400 11.5px/1 var(--hexa-font);
    outline: none;
    transition: border-color var(--hexa-t-line);
}

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

.hexa-bag__couponin::placeholder {
    color: var(--hexa-sub);
}

.hexa-bag__apply {
    flex: 0 0 auto;
    padding: 12px 16px;
    border: 1px solid var(--hexa-ink);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    cursor: pointer;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

/* The bag's head — SF:852-855. Title at the start, piece count at the end. */
.hexa-bag__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

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

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

/* The page shell — SF:851. */
.hexa-bag__page {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4cqi, 32px);
    padding: clamp(22px, 3.2cqi, 46px) var(--hexa-gut) clamp(34px, 5cqi, 70px);
}


/* ===========================================================================
   2. THE SUMMARY ASIDE — Storefront 888-902 (bag) and 958-980 (checkout).

   One block, two users. The differences the design actually draws:
     bag       gradient-clipped total (896), three trust rows (899-901)
     checkout  a line-item review list (960-969), a PLAIN total (976), a note
   Both are `position:sticky; top:86px` inside a 1px INK border — the summary
   is the only panel in the theme with an ink border rather than a hairline.
   =========================================================================== */

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

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

/* Letter-spacing is an LTR-only refinement: Arabic is cursive and tracking
   breaks the joins. Same rule as the earlier layers. */
[dir="rtl"] .hexa-sum__title {
    letter-spacing: 0;
}

/* SF:891 — label at the start, figure at the end, figure in Archivo. */
.hexa-sum__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font: 400 12px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-sum__v {
    color: var(--hexa-ink);
    font-family: var(--hexa-num);
    text-align: end;
}

/* SF:893 — a 1px rule drawn as an element, not a border. */
.hexa-sum__rule {
    height: 1px;
    background: var(--hexa-ln);
}

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

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

.hexa-sum__totalv {
    font: 800 clamp(19px, 2.2cqi, 26px)/1 var(--hexa-num);
    color: var(--hexa-ink);
}

/* SF:896 — the BAG's total is gradient-clipped text. The CHECKOUT's (976) is
   not: it is plain ink. One of the few places the two panels genuinely
   differ, so it is a modifier rather than the default. */
.hexa-sum__totalv--grad {
    background: var(--hexa-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hexa-sum__cta {
    padding: 16px;
    border: 0;
    border-radius: var(--hexa-r);
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 12.5px/1 var(--hexa-font);
    text-align: center;
    cursor: pointer;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

/* SF:978 — checkout's confirm button STARTS as the gradient rather than
   arriving there on hover. */
.hexa-sum__cta--grad {
    background: var(--hexa-grad);
    color: var(--hexa-on);
}

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

/* Not available: no shipping method could be resolved for the chosen address.
   The platform expressed this with INLINE styles carrying the legacy theme's
   purple, which beat every rule in this file. It is a class now, and the
   design has no "disabled" state to copy — so this is the theme's own ink at
   40%, which reads as unavailable in all five palettes without introducing a
   grey that belongs to none of them. */
.hexa-sum__cta--off {
    background: transparent;
    border: 1px solid var(--hexa-ln);
    color: var(--hexa-sub);
    cursor: not-allowed;
}

.hexa-sum__cta--off:hover {
    background: transparent;
    color: var(--hexa-sub);
    filter: none;
}

/* SF:900 — a trust row: deep-accent icon, then quiet text. */
.hexa-sum__trust {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 300 11px/1.5 var(--hexa-font);
    color: var(--hexa-sub);
}

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

/* SF:979 — the terms note under the confirm button. */
.hexa-sum__note {
    font: 300 10.5px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

/* "Return to Cart" — the platform's, not the design's. The design assumes the
   step row is the way back, but that row is an indicator rather than a set of
   links (nothing in the mock's `coSteps` is clickable), so the real link
   stays, as the quietest thing in the panel. */
.hexa-sum__back {
    align-self: center;
    font: 400 11px/1 var(--hexa-font);
    color: var(--hexa-sub);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

/* ── The checkout review list — SF:960-969 ────────────────────────────────
   A 44×52 thumbnail, name + "size × qty", then the line total. */

.hexa-sum__item {
    display: flex;
    align-items: center;
    gap: 11px;
}

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

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

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

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

.hexa-sum__itemline {
    font: 700 12px/1 var(--hexa-num);
    white-space: nowrap;
}

/* SF:974 — checkout's total sits above a border rather than after a rule
   element. */
.hexa-sum__total--ruled {
    padding-top: 6px;
    border-top: 1px solid var(--hexa-ln);
}

/* ── Platform rows that render INSIDE the summary ─────────────────────────
   ⚠️ FLAGGED DEVIATION, and the same one Mira hit: shipping methods cannot be
   moved into the main column. `shipping_tax_ajax.blade.php` returns the
   radios AND the tax/total rows as ONE response that replaces
   `.shipping_method_wrapper`, so a theme cannot separate them. The design
   draws delivery slots in the main column (SF:933-943); those are the SLOT
   picker, which is ours. The carrier radios stay here and are styled to
   match the summary's own rows. */

.hexa-sum .shipping_method_wrapper h6 {
    margin: 0 0 8px;
    font: 800 12px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-sum .coupon-contents-details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hexa-sum .coupon-contents-details-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 0;
    font: 400 12px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-sum .coupon-contents-details-list-item > span:last-child {
    color: var(--hexa-ink);
    font-family: var(--hexa-num);
    text-align: end;
}

.hexa-sum .coupon-contents-details-list-item h6 {
    margin: 0;
    font: 400 12px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

/* The grand total row the AJAX re-renders. It has to read as the design's
   total, not as another line item. */
.hexa-sum .coupon-contents-details-list-item.price-total {
    align-items: baseline;
    padding-top: 6px;
    border-top: 1px solid var(--hexa-ln);
}

.hexa-sum .coupon-contents-details-list-item.price-total h6,
.hexa-sum .coupon-contents-details-list-item.price-total .coupon-title {
    font: 800 13px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-sum .coupon-contents-details-list-item.price-total .coupon-price {
    font: 800 clamp(19px, 2.2cqi, 26px)/1 var(--hexa-num);
    color: var(--hexa-ink);
}

/* The carrier radio, drawn as the design's own — SF:948 draws the payment
   radio as a 16px ring with an 8px fill. Reused so the two pickers on the
   same page do not disagree. */
.hexa-sum .coupon-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hexa-sum .coupon-radio-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    /* A radio is a circle in this design too — a shape, not a corner. */
    border: 1px solid var(--hexa-ln);
    border-radius: 50%;
    background: transparent;
    position: relative;
    cursor: pointer;
    transition: border-color var(--hexa-t-line);
}

.hexa-sum .coupon-radio-item input[type="radio"]::before {
    content: "";
    position: absolute;
    /* SF:948 draws the fill as an explicit 8px×8px dot inside the 16px ring,
       not as an inset. Written the design's way — and a square box is also
       what makes this provably a circle rather than a pill. */
    inset-block-start: 3px;
    inset-inline-start: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hexa-ink);
    transform: scale(0);
    transition: transform var(--hexa-t-line);
}

.hexa-sum .coupon-radio-item input[type="radio"]:checked {
    border-color: var(--hexa-ink);
}

.hexa-sum .coupon-radio-item input[type="radio"]:checked::before {
    transform: scale(1);
}

.hexa-sum .coupon-radio-item label {
    margin: 0;
    font: 400 12px/1.4 var(--hexa-font);
    color: var(--hexa-ink);
    cursor: pointer;
}

/* "Shipping is not available for your selected area". The platform said this
   with Bootstrap's `.text-danger`, a red that belongs to no palette. It is a
   real dead end for the customer, so it is emphasised rather than quiet —
   deep accent, which is the theme's own way of raising a voice. */
.hexa-sum__warn {
    color: var(--hexa-acd);
    font: 700 11.5px/1.5 var(--hexa-font);
}


/* ===========================================================================
   3. THE EMPTY STATE — the design draws none.

   The bag, the wishlist and the compare board can all be empty, and the
   platform's own empty view is a stock illustration with a Bootstrap button.
   Built from the design system: a gradient hexagon, a title, a line of quiet
   copy, one outlined action. Same shape as the Phase 2 search empty state so
   the two do not read as different products.
   =========================================================================== */

.hexa-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: clamp(40px, 7cqi, 90px) var(--hexa-gut);
    text-align: center;
}

.hexa-empty__mark {
    width: 62px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hexa-on);
}

.hexa-empty__mark .hexa-i {
    font-size: 28px;
}

.hexa-empty__title {
    margin: 0;
    font: 800 clamp(19px, 2.6cqi, 30px)/1.1 var(--hexa-font);
}

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


/* ===========================================================================
   4. THE WISHLIST — Storefront 1021-1065.

   A Pattern A grid at the STANDING 215px floor, with no summary aside — a
   different screen from the bag, served by the same controller.
   =========================================================================== */

.hexa-wish {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.2cqi, 28px);
    padding: clamp(22px, 3.2cqi, 46px) var(--hexa-gut) clamp(34px, 5cqi, 70px);
}

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

.hexa-wish__titles {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

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

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

.hexa-wish__browse {
    padding: 13px 20px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

/* SF:1030 — the STANDING floor, 215px. Not the shop's compact 200px: the
   wishlist has no density toggle, exactly like category and search. */
.hexa-wish__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
    gap: clamp(10px, 1.5cqi, 20px);
}

/* SF:1063 — the dashed note strip under the grid. */
.hexa-wish__note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px dashed var(--hexa-ln);
    font: 300 11.5px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

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

/* The wishlist cell is the product card with a second control beside the
   wishlist chip, so the two stack in the media box's corner. The card's own
   `.hexa-card__wish` supplies the chip; this only groups them.

   `.hexa-wish__cell` is on the card itself: the remove handler fades and
   removes `el.closest('.hexa-wish__cell')`, so it is a JS hook. It also
   carries `min-width:0` — the card rule sets it, but a hook that only exists
   in script is one refactor away from being deleted as unused, and the
   comment is the point. */
.hexa-wish__cell {
    min-width: 0;
}

.hexa-wish__acts {
    position: absolute;
    inset-block-start: 9px;
    inset-inline-end: 9px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Inside the group the chips are back in flow — the card's rule positions a
   lone chip absolutely, which would stack the two on top of each other. */
.hexa-wish__acts .hexa-card__wish {
    position: static;
    inset: auto;
}


/* ===========================================================================
   5. THE CHECKOUT STEPS — Storefront 909-917.

   Three hexagons with a number, a label, and a hairline connector. Steps 1
   and 2 are lit (`i <= 1`, SF:2072); the third is `--sf` with `--sub` text.
   The connector is hidden on the LAST step, not the first.
   =========================================================================== */

.hexa-steps {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.4cqi, 18px);
    flex-wrap: wrap;
}

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

/* SF:912 — 26×29, which is the hexagon's 0.87 ratio. */
.hexa-steps__n {
    width: 26px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--hexa-sf);
    color: var(--hexa-sub);
    font: 700 11px/1 var(--hexa-num);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
}

.hexa-steps__step.is-done .hexa-steps__n {
    background: var(--hexa-grad);
    color: var(--hexa-on);
}

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

.hexa-steps__step.is-done .hexa-steps__l {
    color: var(--hexa-ink);
}

/* SF:914 — the connector. */
.hexa-steps__line {
    width: clamp(16px, 3cqi, 52px);
    height: 1px;
    background: var(--hexa-ln);
}


/* ===========================================================================
   6. CHECKOUT — Storefront 907-983.

   Pattern B again, the same track as the bag. The main column is a stack of
   bordered sections; the aside is .hexa-sum.
   =========================================================================== */

.hexa-co {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4cqi, 30px);
    padding: clamp(22px, 3.2cqi, 46px) var(--hexa-gut) clamp(34px, 5cqi, 70px);
}

.hexa-co__split {
    display: grid;
    grid-template-columns: 1fr minmax(250px, 330px);
    gap: clamp(16px, 2.4cqi, 36px);
    align-items: start;
}

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

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

/* The order form is a plain block: its sections are `.hexa-co__sec`, and they
   carry the spacing. It exists as a class so the stack reads the same whether
   the sections are inside the form (contact, address) or outside it (slots,
   payment — a <button> inside a form submits it). */
.hexa-co__form {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2cqi, 22px);
}

/* The guest create-account panel. Its own block rather than the platform's
   `.checkout-form-open`, which main.js toggles globally — see the blade. */
.hexa-co__signup {
    display: none;
}

.hexa-co__signup.active {
    display: block;
}

/* SF:921 — one bordered section. */
.hexa-co__sec {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(16px, 2.2cqi, 26px);
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

/* SF:922 — a quiet Archivo ordinal, then the heading. */
.hexa-co__h {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 800 12.5px/1 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-co__n {
    font: 700 10px/1 var(--hexa-num);
    color: var(--hexa-sub);
}

/* SF:923 — the field grid. `auto-fit` with a 180px floor, so a section with
   one field gives it the full width and a section with four wraps to two. */
.hexa-co__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 10px;
}

/* A field that must not share its row — the address textarea, the order
   note. The design's own address field is full width (SF:1699 is one long
   value), and a two-line note beside a one-line field looks broken. */
.hexa-co__fields--wide {
    grid-template-columns: 1fr;
}

/* SF:925-928 — label above field. The platform emits `.single-input` with a
   `.label-title` and a `.form--control`, so BOTH the design's own classes and
   the platform's are styled: the country/state/city partials are shared
   components this theme must not edit. */
.hexa-co__field,
.hexa-co .single-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* The shared partials ship Bootstrap spacing utilities. */
    margin: 0 !important;
    position: relative;
}

.hexa-co__label,
.hexa-co .label-title {
    margin: 0 !important;
    font: 400 10.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
    text-transform: none;
    letter-spacing: 0;
}

.hexa-co__in,
.hexa-co .form--control,
.hexa-co .form-control {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 400 12px/1 var(--hexa-font);
    outline: none;
    box-shadow: none;
    transition: border-color var(--hexa-t-line);
}

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

.hexa-co__in::placeholder,
.hexa-co .form--control::placeholder {
    color: var(--hexa-sub);
}

/* A <select> needs its own chevron: `appearance:none` removes the UA arrow,
   and the design has no native control anywhere. The glyph is drawn with a
   border trick rather than a background image so it follows the palette. */
.hexa-co select.form--control,
.hexa-co select.hexa-co__in {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 34px;
    cursor: pointer;
}

.hexa-co__field--select::after,
.hexa-co .single-input:has(select)::after {
    content: "";
    position: absolute;
    inset-inline-end: 14px;
    /* Sits on the field, which is below the 6px gap and the 10.5px label. */
    inset-block-start: calc(100% - 26px);
    width: 7px;
    height: 7px;
    border-inline-end: 1px solid var(--hexa-sub);
    border-block-end: 1px solid var(--hexa-sub);
    transform: rotate(45deg);
    pointer-events: none;
}

/* A textarea is taller and must not be vertically centred like an input. */
.hexa-co textarea.form--control,
.hexa-co textarea.hexa-co__in {
    min-height: 96px;
    line-height: 1.6;
    resize: vertical;
}

/* ── Disclosure panels ────────────────────────────────────────────────────
   Three collapsible blocks on this page, and they are toggled by three
   different mechanisms — all of them the platform's:

     .checkout-form-open            `.click-open-form`, in the GLOBAL main.js,
                                    unscoped: `$('.checkout-form-open').toggleClass('active')`
     .hexa-co__signup               this page's own handler (see the blade for
                                    why it is not `.checkout-form-open`)
     .checkout-address-form-wrapper `.click-open-form3`, global main.js

   Each needs its own closed/open pair; none replaces another. */
.hexa-co__collapse {
    display: none;
    margin-top: 12px;
}

.hexa-co__collapse.active {
    display: block;
}

/* The shift-address panel is toggled by `.click-open-form3`, which adds
   `.active` to the WRAPPER rather than to a `.hexa-co__collapse`. It carries
   both classes, so this pair only exists to catch the other order. */
.hexa-co .checkout-address-form-wrapper.active {
    display: block;
}

.hexa-co__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 11.5px/1 var(--hexa-font);
    color: var(--hexa-acd);
    cursor: pointer;
}

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

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

.hexa-co__loginrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.hexa-co__loginlinks {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font: 400 11px/1 var(--hexa-font);
}

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

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

.hexa-co__loginbtn {
    margin-top: 12px;
    width: 100%;
    border: 0;
    cursor: pointer;
}

/* The platform's own live state/city dropdown, restyled. It is positioned by
   the shared component's inline CSS; only its skin is ours. */
.hexa-co .live-dropdown {
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    box-shadow: 0 22px 50px -18px rgba(var(--hexa-ink-rgb), .35);
}

.hexa-co .live-dropdown div {
    font: 400 12px/1.5 var(--hexa-font);
    color: var(--hexa-ink);
}

.hexa-co .live-dropdown div:hover {
    background: var(--hexa-sf);
}


/* ===========================================================================
   7. DELIVERY SLOTS — Storefront 933-943.

   ⚠️ CURRENTLY UNUSED — NOTHING RENDERS THESE CLASSES.

   The design draws a "Tomorrow / Thursday / Friday" window picker at checkout
   and this theme built it. Ahmed removed it: the platform has no
   delivery-window feature, so the shop was offering a customer a choice it had
   no way to honour (the pick was appended as text to the order note).

   The rules are KEPT ON PURPOSE, not left behind by accident: if the platform
   ever grows real slots, restoring the band is markup-only. Removing this block
   is safe if that never happens — see checkout_left_side.blade.php.
   =========================================================================== */

.hexa-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 9px;
}

/* SF:937 — a two-line button: day, then hours. Text starts at the inline
   start, so it mirrors correctly. */
.hexa-slots__btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--hexa-t-line), background var(--hexa-t-line);
}

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

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

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

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

/* A hidden input, so it has nothing to style — but it IS a `hexa-` class in a
   blade, and a name with no rule anywhere reads as a typo to the next person.
   Declared, with the reason, rather than left dangling. */
.hexa-slot-input {
    display: none;
}


/* ===========================================================================
   8. PAYMENT METHODS — Storefront 944-956.

   ⚠️ THE PLATFORM OWNS THIS LIST. `PaymentGatewayRenderHelper` emits
   `.payment-gateway-wrapper ul li[data-gateway]` and the page script toggles
   `.selected` on the `li`, so the LIST STRUCTURE IS NOT OURS TO REPLACE. The
   design's row — radio, label + sub, trailing icon — is applied to what the
   helper emits, and the cash-on-delivery checkbox is dressed as the same row
   so the picker reads as one control set.
   =========================================================================== */

.hexa-pay {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* The helper's <ul> is a flex row of 100px tiles by default. */
.hexa-pay .payment-gateway-wrapper ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hexa-pay .payment-gateway-wrapper ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    text-align: start;
    overflow: visible;
    cursor: pointer;
    transition: border-color var(--hexa-t-line), background var(--hexa-t-line);
}

.hexa-pay .payment-gateway-wrapper ul li:hover {
    border-color: var(--hexa-ink);
}

.hexa-pay .payment-gateway-wrapper ul li.selected {
    border-color: var(--hexa-ink);
    background: var(--hexa-sf);
}

/* The helper's own selected marker is a purple corner tick drawn with
   ::before/::after and a Line Awesome glyph. Replaced by the design's radio:
   ::before becomes the ring, ::after the fill. */
.hexa-pay .payment-gateway-wrapper ul li::before {
    content: "";
    position: static;
    order: -2;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid var(--hexa-ln);
    border-radius: 50%;
    background: transparent;
    visibility: visible;
    opacity: 1;
    transition: border-color var(--hexa-t-line);
}

.hexa-pay .payment-gateway-wrapper ul li::after {
    content: "";
    position: static;
    order: -1;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    /* Pulled back over the ring so the two read as one control. */
    margin-inline-start: -20px;
    margin-inline-end: 12px;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 0;
    padding: 0;
    visibility: visible;
    opacity: 1;
    transition: background var(--hexa-t-line);
}

.hexa-pay .payment-gateway-wrapper ul li.selected::before {
    border-color: var(--hexa-ink);
}

.hexa-pay .payment-gateway-wrapper ul li.selected::after {
    background: var(--hexa-ink);
}

/* Gateway logos stay, sized to the design's trailing-icon slot (SF:953). */
.hexa-pay .payment-gateway-wrapper ul li img {
    max-height: 22px;
    width: auto;
    margin-inline-start: auto;
}

/* The cash-on-delivery checkbox, dressed as the same row. */
.hexa-pay__cod {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--hexa-t-line), background var(--hexa-t-line);
}

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

.hexa-pay__cod:has(input:checked) {
    border-color: var(--hexa-ink);
    background: var(--hexa-sf);
}

.hexa-pay__cod input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--hexa-ln);
    border-radius: 50%;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hexa-pay__cod input[type="checkbox"]::before {
    content: "";
    position: absolute;
    /* The same 16/8 ring as the design's payment radio (SF:948), so the COD
       row and the gateway rows read as one control set. */
    inset-block-start: 3px;
    inset-inline-start: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hexa-ink);
    transform: scale(0);
    transition: transform var(--hexa-t-line);
}

.hexa-pay__cod input[type="checkbox"]:checked {
    border-color: var(--hexa-ink);
}

.hexa-pay__cod input[type="checkbox"]:checked::before {
    transform: scale(1);
}

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

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

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

.hexa-pay__cod .hexa-i {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--hexa-sub);
}

/* The wallet / loyalty / gift-card cards the helper also renders. Left
   structurally alone — they carry their own ids and JS — but given the
   theme's surface so they do not arrive as white Bootstrap panels. */
.hexa-pay .card,
.hexa-co__sec .cw-checkout-card,
.hexa-co__sec .lp-checkout-card {
    border: 1px solid var(--hexa-ln) !important;
    border-radius: var(--hexa-r) !important;
    background: var(--hexa-pp) !important;
    box-shadow: none !important;
}

/* The terms checkbox — square, because it is a real checkbox and not a
   choice between options. */
.hexa-co__agree {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 300 11px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-co__agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    position: relative;
    cursor: pointer;
}

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

.hexa-co__agree input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: 4px;
    width: 4px;
    height: 8px;
    border-inline-end: 1.5px solid var(--hexa-bg);
    border-block-end: 1.5px solid var(--hexa-bg);
    transform: rotate(45deg);
}

.hexa-co__agree label {
    margin: 0;
    cursor: pointer;
}

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

/* The gift-card / coupon mini forms inside the aside. */
.hexa-sum__form {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hexa-sum__form .form--control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 400 11.5px/1 var(--hexa-font);
    outline: none;
}

.hexa-sum__form .form--control:focus {
    border-color: var(--hexa-ink);
}

.hexa-sum__form .btn-submit {
    padding: 12px 16px;
    border: 1px solid var(--hexa-ink);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    cursor: pointer;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

.hexa-sum__form .alert {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: var(--hexa-sf);
    color: var(--hexa-ink);
    font: 300 11px/1.5 var(--hexa-font);
}


/* ===========================================================================
   9. ORDER CONFIRMED — Storefront 985-1019.

   Centred column: the popping hexagon, title + sub, a fact row, the vertical
   timeline in a bordered panel, then two buttons.
   =========================================================================== */

.hexa-res {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.4cqi, 32px);
    padding: clamp(28px, 4cqi, 60px) var(--hexa-gut) clamp(34px, 5cqi, 70px);
}

/* SF:987 — 74×84, the gradient, and the design's own hex-pop. */
.hexa-res__mark {
    width: 74px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hexa-on);
    animation: hexa-pop .5s cubic-bezier(.2, .8, .2, 1);
}

.hexa-res__mark .hexa-i {
    font-size: 36px;
}

.hexa-res__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

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

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

/* SF:992-999 — the fact row. A flex row that wraps, NOT a grid: the design
   sizes each cell by its content with a 150px floor. */
.hexa-res__facts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

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

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

.hexa-res__factv {
    font: 800 14px/1 var(--hexa-num);
    color: var(--hexa-ink);
}

/* SF:1000 — the timeline panel. */
.hexa-res__panel {
    width: min(760px, 100%);
    padding: clamp(18px, 2.4cqi, 30px);
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-res__acts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* SF:1015-1016 — an ink button that becomes the gradient, and an outlined
   button that becomes ink. */
.hexa-res__btn {
    padding: 15px 26px;
    border: 0;
    border-radius: var(--hexa-r);
    background: var(--hexa-ink);
    color: var(--hexa-bg);
    font: 700 12px/1 var(--hexa-font);
    cursor: pointer;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

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

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


/* ===========================================================================
   10. THE VERTICAL TIMELINE — Storefront 1001-1012 (confirmed) and
   1087-1101 (track).

   One block, two users. The differences the design draws:
     confirmed  18px pad-bottom, no timestamp
     track      22px pad-bottom, a timestamp on the same baseline as the head
   The rail is a hexagon dot over a 1px line that FILLS the remaining height,
   which is why the item is a flex row and the rail a flex column.
   =========================================================================== */

.hexa-tl {
    display: flex;
    flex-direction: column;
}

.hexa-tl__item {
    display: flex;
    gap: 14px;
}

.hexa-tl__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

/* SF:1004 — 18×20. */
.hexa-tl__dot {
    width: 18px;
    height: 20px;
    flex: 0 0 auto;
    background: var(--hexa-sf);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
}

.hexa-tl__item.is-done .hexa-tl__dot {
    background: var(--hexa-grad);
}

.hexa-tl__line {
    width: 1px;
    flex: 1;
    background: var(--hexa-ln);
}

.hexa-tl__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 20px;
    flex: 1;
    min-width: 0;
}

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

.hexa-tl__item.is-done .hexa-tl__h {
    color: var(--hexa-ink);
}

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

/* SF:1094-1097 — the track variant puts the heading and the timestamp on one
   baseline. */
.hexa-tl__topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.hexa-tl__time {
    font: 400 10.5px/1 var(--hexa-num);
    color: var(--hexa-sub);
    white-space: nowrap;
}

.hexa-tl--track .hexa-tl__body {
    padding-bottom: 22px;
}

/* The last item has no connector, so its body needs no trailing space. */
.hexa-tl__item:last-child .hexa-tl__body {
    padding-bottom: 0;
}


/* ===========================================================================
   11. TRACK ORDER — Storefront 1067-1103.

   Pattern A with a 290px floor, NOT Pattern B: the design uses
   `repeat(auto-fit, minmax(min(100%,290px),1fr))` (SF:1068), so the two panes
   are equal and collapse on their own without a breakpoint.
   =========================================================================== */

.hexa-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(16px, 2.4cqi, 36px);
    align-items: start;
    padding: clamp(22px, 3.2cqi, 46px) var(--hexa-gut) clamp(34px, 5cqi, 70px);
}

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

.hexa-track__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hexa-track__title {
    margin: 0;
    font: 800 clamp(23px, 3.2cqi, 40px)/1.05 var(--hexa-font);
}

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

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

/* SF:1073 — an INK-bordered field, heavier than the theme's usual hairline,
   because it is the screen's primary control. */
.hexa-track__in {
    flex: 1;
    min-width: 160px;
    padding: 15px;
    border: 1px solid var(--hexa-ink);
    border-radius: var(--hexa-r);
    background: var(--hexa-pp);
    color: var(--hexa-ink);
    font: 600 12.5px/1 var(--hexa-num);
    outline: none;
}

.hexa-track__in::placeholder {
    color: var(--hexa-sub);
    font-family: var(--hexa-font);
    font-weight: 400;
}

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

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

/* SF:1076-1083 — the courier card. */
.hexa-track__courier {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

/* SF:1077 — the avatar is hexagon-clipped, 46×52. */
.hexa-track__avatar {
    width: 46px;
    height: 52px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    background: var(--hexa-sf);
    color: var(--hexa-sub);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
}

.hexa-track__avatar .hexa-i {
    font-size: 22px;
}

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

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

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

/* SF:1082 — a 38px square action. */
.hexa-track__call {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hexa-ln);
    background: transparent;
    color: var(--hexa-ink);
    transition: background var(--hexa-t-line);
}

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

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

/* SF:1085 — the status panel. */
.hexa-track__state {
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2.4cqi, 28px);
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-track__statetitle {
    padding-bottom: 18px;
    font: 800 12.5px/1 var(--hexa-font);
}

/* No result yet, or an order id that matched nothing. The design draws
   neither; both are built from the system. */
.hexa-track__idle {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 300 11.5px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

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

.hexa-track__facts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 18px;
}

.hexa-track__fact {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
    padding: 12px 14px;
    border: 1px solid var(--hexa-ln);
}

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

.hexa-track__factv {
    font: 800 12.5px/1 var(--hexa-num);
}

.hexa-track__invoice {
    margin-top: 16px;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

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


/* ===========================================================================
   12. PAYMENT FAILED — Widgets 1183-1203.

   No storefront screen exists, so the card is the authority and the page
   shell is borrowed from onSuccess (SF:986), which is the nearest full
   screen. The one value the card omits is the outer padding, taken from
   onSuccess.

   The mark is the design's inversion of the success hexagon: INK fill with an
   --a1 glyph, not the gradient (Widgets 1185).
   =========================================================================== */

.hexa-fail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: clamp(28px, 4cqi, 60px) var(--hexa-gut) clamp(34px, 5cqi, 70px);
    text-align: center;
}

.hexa-fail__mark {
    width: 62px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hexa-ink);
    color: var(--hexa-a1);
    -webkit-clip-path: var(--hexa-clip);
    clip-path: var(--hexa-clip);
}

.hexa-fail__mark .hexa-i {
    font-size: 30px;
}

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

[dir="rtl"] .hexa-fail__kicker {
    letter-spacing: 0;
}

.hexa-fail__title {
    margin: 0;
    font: 800 clamp(19px, 2.6cqi, 32px)/1.05 var(--hexa-font);
}

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

.hexa-fail__facts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Widgets 1191 — note `text-align:start`, so the cell's own text is NOT
   centred even though the column is. */
.hexa-fail__fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
    padding: 14px 18px;
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
    text-align: start;
}

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

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

.hexa-fail__acts {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: center;
}

.hexa-fail__retry {
    padding: 14px 22px;
    border: 0;
    border-radius: var(--hexa-r);
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 11.5px/1 var(--hexa-font);
    cursor: pointer;
    transition: filter var(--hexa-t-line);
}

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

.hexa-fail__alt {
    padding: 14px 22px;
    border: 1px solid var(--hexa-ink);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11.5px/1 var(--hexa-font);
    cursor: pointer;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

/* Widgets 1201 — the support strip, on --sf with no border. */
.hexa-fail__support {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    background: var(--hexa-sf);
    font: 300 11px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

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


/* ===========================================================================
   13. THE INVOICE SHEET — Widgets 920-947.

   Again no storefront screen. The card draws a 560px sheet; the page wraps it
   in the standard gutter and adds a print bar, which the card has no room
   for.

   The card's own line rows are `name ×qty line` with a 74px figure column —
   read literally, including the `text-align:end` on the figure.
   =========================================================================== */

.hexa-sheet__page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(22px, 3.2cqi, 46px) var(--hexa-gut) clamp(34px, 5cqi, 70px);
}

.hexa-sheet__bar {
    width: min(560px, 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

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

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

.hexa-sheet__tool {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    border: 1px solid var(--hexa-ln);
    border-radius: var(--hexa-r);
    background: transparent;
    color: var(--hexa-ink);
    font: 700 11px/1 var(--hexa-font);
    cursor: pointer;
    transition: background var(--hexa-t-line), color var(--hexa-t-line);
}

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

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

/* Widgets 922 — the sheet itself. */
.hexa-sheet {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    padding: clamp(16px, 2.2cqi, 26px);
    border: 1px solid var(--hexa-ln);
    background: var(--hexa-pp);
}

.hexa-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

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

/* Widgets 925 — a 23×26 gradient hexagon carrying the shop's initial. */
.hexa-sheet__mark {
    width: 23px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--hexa-on);
    font: 800 11px/1 var(--hexa-num);
}

.hexa-sheet__name {
    font: 800 14px/1 var(--hexa-num);
    letter-spacing: .2em;
}

[dir="rtl"] .hexa-sheet__name {
    letter-spacing: 0;
}

/* Widgets 928 — the meta block is end-aligned. */
.hexa-sheet__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: end;
}

.hexa-sheet__doc {
    font: 800 12px/1.3 var(--hexa-font);
}

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

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

/* Widgets 935 — a line row. */
.hexa-sheet__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 11.5px/1.5 var(--hexa-font);
    color: var(--hexa-ink);
}

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

.hexa-sheet__rowvariant {
    display: block;
    font: 300 10px/1.5 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-sheet__rowq {
    font-family: var(--hexa-num);
    color: var(--hexa-sub);
}

.hexa-sheet__rowline {
    min-width: 74px;
    font: 700 11.5px/1 var(--hexa-num);
    text-align: end;
}

/* Widgets 943 — a totals row. The final row is heavier and inked. */
.hexa-sheet__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font: 400 11.5px/1 var(--hexa-font);
    color: var(--hexa-sub);
}

.hexa-sheet__total > span:last-child {
    font-family: var(--hexa-num);
}

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

/* Widgets 945 — the validity note. */
.hexa-sheet__note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    background: var(--hexa-sf);
    font: 300 10.5px/1.6 var(--hexa-font);
    color: var(--hexa-sub);
}

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

/* The parties block — the card has no room for one, but an invoice without a
   seller and a buyer is not an invoice. Built from the sheet's own rhythm. */
.hexa-sheet__parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 14px;
}

.hexa-sheet__party {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

[dir="rtl"] .hexa-sheet__partyk {
    letter-spacing: 0;
}

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

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

.hexa-sheet__status {
    display: inline-flex;
    align-self: flex-start;
    padding: 7px 11px;
    background: var(--hexa-grad);
    color: var(--hexa-on);
    font: 700 10px/1 var(--hexa-font);
}

.hexa-sheet__status--due {
    background: var(--hexa-sf);
    color: var(--hexa-acd);
}

/* ── Print ────────────────────────────────────────────────────────────────
   Not a responsive breakpoint.

   ⚠️ THE CHROME-HIDING RULES ARE NOT HERE. Hiding the header, ticker, footer,
   mobile bar, crumb and overlay for print means writing `.hexa-header { }` —
   which DECLARES a Phase 1 block in the Phase 3 layer, and a block owned by
   two sheets is how a later edit silently restyles a page nobody was looking
   at. They live in hexa.css, beside the blocks they belong to. Only the
   sheet's own print behaviour is here.

   ⚠️ `print-color-adjust: exact` is the whole trick. Without it a browser
   drops backgrounds and gradients when printing, so the gradient hexagon and
   the tinted note strip would come out blank — and an earlier revision
   "solved" that by hardcoding #000000/#999999, which is a literal colour in a
   theme whose entire premise is five palettes. With the property set, the
   design's own tokens print, and this block needs no colour of its own. */
@media print {
    .hexa-sheet__bar {
        display: none !important;
    }

    .hexa-sheet__page {
        padding: 0;
    }

    .hexa-sheet {
        max-width: none;
        border: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


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

   The design has no @media at all; this is the `narrow` switch its script
   applies at the same width (`device === 'phone' || 'tablet'`, SF:1882), and
   `cartCols` collapsing to `1fr` (SF:2050) is exactly what it does.
   =========================================================================== */

@media (max-width: 760px) {
    .hexa-bag,
    .hexa-co__split {
        grid-template-columns: 1fr;
    }

    .hexa-sum {
        position: static;
    }

    /* The bag row keeps its image beside the body, but the thumbnail's clamp
       floor is most of a narrow screen, so the row is allowed to wrap. */
    .hexa-bag__table tr {
        flex-wrap: wrap;
    }

    /* Not a design value: at 320px a 150px field plus a button overflows the
       panel, so the coupon takes the full row rather than scrolling the
       page sideways. */
    .hexa-bag__coupon {
        width: 100%;
    }

    .hexa-bag__couponin {
        flex: 1;
        width: auto;
    }
}