/* ------------------------------------------------------------------
   Components — nav, hamburger drawer, hero, product card, footer, forms
   Mobile-first; breakpoints layer on at 768px and 1024px.
   ------------------------------------------------------------------ */

/* ---- Sticky nav -------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* 0.75.6 — Pink horizontal menu bar with white pill-button tabs (0.75.7
   pop-pass). Sits directly under .site-nav, sticky just under the nav so
   it stays visible as the page scrolls. Brand-pink background with white
   rounded-pill buttons sitting on top — directly inherits the .hero-jump
   chip aesthetic that previously appeared under the homepage banner
   (0.75.6 removed those; this layer brings the pop back into the bar). */
.site-menu {
    position: sticky;
    top: var(--nav-height-mobile);
    z-index: 99;
    background: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
    .site-menu { top: var(--nav-height); }
}
.site-menu__inner {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.site-menu__link {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--color-primary-dark);
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 8px 22px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    /* 0.75.8 — inset 1.5px brand-pink ring just inside the white pill,
       independent of the outer border, for extra pop against the bar. */
    box-shadow: inset 0 0 0 1.5px var(--color-primary);
    transition: background 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.site-menu__link:hover,
.site-menu__link:focus-visible {
    background: var(--color-primary-dark);
    color: #fff;
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    /* Combine inset ring (same colour as bg now so it disappears) + lift shadow. */
    box-shadow: inset 0 0 0 1.5px var(--color-primary-dark), 0 2px 8px rgba(0,0,0,0.18);
    text-decoration: none;
}
@media (max-width: 767px) {
    /* 0.75.15 — centre the three pill destinations on mobile (was
       flex-start). overflow-x: auto on .site-menu__inner is retained
       above so 4+ destinations would still horizontal-scroll cleanly. */
    .site-menu__inner { justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
    .site-menu__link  { padding: 6px 16px; font-size: 13px; }
}
.site-nav__inner {
    height: var(--nav-height-mobile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .site-nav__inner { height: var(--nav-height); }
}
/* 0.75.18 — stacked mobile header. Single-row flex layout was pushing
   the hamburger (and sometimes Cart) off-screen on iPhone Pro Max
   because logo + search input + 3 actions don't fit in 430px. Grid
   restructures to: row 1 = logo (left) + actions justified end
   (Sign in / Cart / hamburger); row 2 = search input spanning full
   width. height: auto + min-height keeps the sticky offset on
   .site-menu (which uses --nav-height-mobile as its top) in sync. */
@media (max-width: 767px) {
    .site-nav__inner {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        height: auto;
        min-height: var(--nav-height-mobile);
        row-gap: var(--space-2);
        align-items: center;
    }
    .site-nav__brand   { grid-row: 1; grid-column: 1; }
    .site-nav__actions { grid-row: 1; grid-column: 2; justify-self: end; }
    .site-nav__search  {
        grid-row: 2;
        grid-column: 1 / -1;
        margin: 0;
        max-width: none;
        min-width: 0;
        flex: 0 1 auto;
    }
}

.site-nav__brand {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.site-nav__brand:hover { text-decoration: none; }
.site-nav__logo {
    height: 88px;
    width: auto;
    display: block;
}
@media (min-width: 768px) {
    .site-nav__logo { height: 128px; }
}
.site-nav__brand small {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-body);
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
@media (max-width: 479px) {
    /* At the narrowest widths, drop the "PREORDER" subtitle so the brand
       sits comfortably alongside the action buttons without wrapping. */
    .site-nav__brand { font-size: var(--font-size-base); }
    .site-nav__brand small { display: none; }
    .site-nav__logo { height: 72px; }
}

.site-nav__links {
    display: none;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__links a {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    padding: var(--space-2) 0;
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
}
@media (min-width: 1024px) {
    .site-nav__links { display: flex; }
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
@media (max-width: 767px) {
    /* 0.75.15 — swap which auth CTA stays in the top bar on mobile.
       Previously Sign in was hidden + Create account remained pink-
       buttoned in the bar; the drawer carried Sign in. Colin's feedback
       2026-05-15: Sign in is the only obvious mobile CTA users hunt for,
       and Create account belongs in the drawer alongside Sign in's
       partner action. So: Sign in stays visible, Create account moves
       to the drawer. Drawer NAV_HTML already lists both, so the swap
       costs nothing on the drawer side.
       Account + Sign out + VAT toggle remain drawer-only on mobile
       (synced via drawer's own .vat-toggle). */
    .site-nav__actions [data-auth-signup],
    .site-nav__actions [data-auth-account],
    .site-nav__actions [data-auth-signout],
    .site-nav__actions > .vat-toggle {
        display: none !important;
    }
    .site-nav__actions { gap: var(--space-2); }
}

/* VAT toggle inside the drawer — sits below the menu list, label on the
   right of the toggle so it reads as "VAT (toggle) · ex. VAT". */
.nav-drawer__vat-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------- Global search (top nav) ---------- */
.site-nav__search {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
    min-width: 180px;
    margin: 0 var(--space-3);
}
.site-nav__search-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary);
    background: #fff;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}
.site-nav__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint, rgba(233,30,99,0.15));
}
.site-nav__search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 200;
}
.site-nav__search-dropdown[hidden] { display: none; }
.site-nav__search-empty {
    padding: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.site-nav__search-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.site-nav__search-row:last-child { border-bottom: none; }
.site-nav__search-variant {
    flex: 1;
    display: block;
    color: var(--color-text);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    min-width: 0;
}
.site-nav__search-variant:hover,
.site-nav__search-result--active {
    background: var(--color-primary-tint, rgba(233,30,99,0.08));
    text-decoration: none;
}
.site-nav__search-variant-head { display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.site-nav__search-pos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    min-width: 110px;
    align-items: flex-end;
}
.site-nav__search-po {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-primary-tint, rgba(233,30,99,0.12));
    color: var(--color-primary);
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}
.site-nav__search-po:hover,
.site-nav__search-po.site-nav__search-result--active {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}
@media (max-width: 767px) {
    /* Tight enough to share the 375px container with logo + cart + hamburger
       without pushing the actions block off-screen. min-width: 90 leaves a
       readable input on iPhone SE (320 px) too. */
    .site-nav__search { margin: 0 var(--space-2); min-width: 90px; flex: 1; }
    .site-nav__search-input { padding: 6px 10px; font-size: 13px; }
    .site-nav__search-pos { min-width: 90px; }
}

/* ---------- Product page: "Due in on these shipments" list ---------- */
.product-detail__po-list {
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    background: #fff;
}
.product-detail__po-list-heading {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}
.product-detail__po-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.product-detail__po-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-tint, rgba(233,30,99,0.04));
}
.product-detail__po-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}
.product-detail__po-chip:hover {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}
.product-detail__po-meta {
    flex: 1;
    min-width: 0;
}
.product-detail__po-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}
.product-detail__po-link:hover { text-decoration: underline; }
@media (max-width: 520px) {
    .product-detail__po-row { flex-wrap: wrap; }
    .product-detail__po-link { width: 100%; text-align: right; }
}

/* 0.80.0 — Due In / Pre Alloc / Allocated to you / Ordered / Available
   grid inside each PO row on the product page. Compact horizontal layout
   that flow-wraps on narrow viewports. */
.product-detail__po-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
}
.product-detail__po-breakdown .text-xs { line-height: 1.2; margin-bottom: 2px; }
.product-detail__po-row--fully-allocated {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}
.product-detail__po-row--fully-allocated .product-detail__po-chip {
    background: var(--color-text-muted);
}

.vat-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    user-select: none;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.vat-toggle:hover {
    background: var(--color-primary-tint, rgba(233,30,99,0.08));
}
.vat-toggle__switch {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #ddd;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
}
.vat-toggle__switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: left 0.15s ease;
}
.vat-toggle[data-state="inc"] .vat-toggle__switch {
    background: var(--color-primary);
}
.vat-toggle[data-state="inc"] .vat-toggle__switch::after {
    left: 18px;
}

/* Hamburger */
.hamburger {
    width: 32px; height: 32px;
    border: none; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.hamburger span {
    width: 20px; height: 2px; background: var(--color-text);
    position: relative;
}
.hamburger span::before, .hamburger span::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--color-text);
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 80%; max-width: 360px;
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 200;
    padding: var(--space-5);
    overflow-y: auto;
}
.nav-drawer[aria-hidden="false"] { transform: translateX(0); }
.nav-drawer__backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    z-index: 150;
}
.nav-drawer[aria-hidden="false"] + .nav-drawer__backdrop,
.nav-drawer__backdrop[data-open="true"] {
    opacity: 1; pointer-events: auto;
}
.nav-drawer ul { list-style: none; padding: 0; }
.nav-drawer li { margin: 0 0 var(--space-3); }
.nav-drawer a {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}
.nav-drawer__close {
    position: absolute; top: var(--space-3); right: var(--space-3);
    background: transparent; border: none; font-size: 24px; cursor: pointer;
}

/* ---- Hero -------------------------------------------------------- */
.hero {
    padding: var(--space-6) 0 var(--space-7);
    text-align: center;
}
.hero__title {
    font-size: var(--font-size-h1);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
    .hero { padding: var(--space-8) 0; }
    .hero__title { font-size: var(--font-size-hero); }
}
.hero__subtitle { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.hero__preorder-band {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

/* ---- Product grid + card ---------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
}

.product-card {
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex; flex-direction: column;
    position: relative;
}
.product-card:hover { box-shadow: var(--shadow-md); }
.product-card__image {
    aspect-ratio: 1 / 1;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    object-fit: contain;
    margin-bottom: var(--space-3);
}
.product-card__name {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
    line-height: 1.3;
    color: var(--color-text);
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__sku { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.product-card__pack { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.product-card__eta {
    font-size: var(--font-size-xs);
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    padding: 2px var(--space-2);
    border-radius: 10px;
    display: inline-block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
}
.product-card__price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-top: auto;
    margin-bottom: var(--space-2);
}
.product-card__price small { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-body); }
.product-card__add {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
}

/* ---- Product detail --------------------------------------------- */
.product-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin: var(--space-5) 0;
}
@media (min-width: 768px) {
    .product-detail { grid-template-columns: 5fr 6fr; gap: var(--space-7); }
}
.product-detail__image {
    aspect-ratio: 1 / 1;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    object-fit: contain;
    width: 100%;
}
.product-detail__price { font-size: 28px; font-weight: var(--font-weight-bold); margin: var(--space-3) 0; }
.qty-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 120px;
}
.qty-input button { background: #fff; border: none; width: 36px; height: 42px; cursor: pointer; font-size: 18px; touch-action: manipulation; }
.qty-input button:hover { background: var(--color-bg-alt); }
.qty-input input {
    border: none;
    text-align: center;
    flex: 1;
    height: 42px;
    padding: 0;
    min-width: 0;
    appearance: textfield;
    -moz-appearance: textfield;
}
.qty-input input::-webkit-outer-spin-button,
.qty-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-input input:focus { outline: none; }

/* 0.75.22 — global mobile bump for qty steppers (brand-listing cards,
   brand-product page, cart). 36x42 default fails Apple HIG 44x44 tap
   target minimum; below that, two missed taps in a row trigger iOS
   double-tap-zoom. touch-action: manipulation on .qty-input button
   above kills the zoom; this rule prevents the missed taps that
   were causing the zoom in the first place. /po page has its own
   48x48 override inside the @media block further down. */
@media (max-width: 767px) {
    .qty-input { height: 48px; width: 100%; }
    .qty-input button { width: 48px; height: 48px; font-size: 20px; }
    .qty-input input { height: 48px; }
}

/* ---- Cart + checkout tables -------------------------------------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.cart-table th { font-weight: var(--font-weight-medium); color: var(--color-text-muted); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.03em; }
/* 0.26.3: Unit price + VAT columns are detail-only — desktop trade users
   want the per-line breakdown (invoice-style verification), but on phones
   they push Qty and Remove off-screen. Hide both under 768 px; the totals
   box at the foot of the cart still shows aggregate VAT for mobile users. */
@media (max-width: 767px) {
    .cart-table .cart-table__col--detail { display: none; }
    /* 0.75.23 — cart-table → stacked card per row on mobile. Even with
       the .cart-table__col--detail columns hidden, the remaining 4
       columns (Item, Qty, Line total, Remove) compete for ~398px of
       viewport — and after 0.75.22 the qty stepper grew to 144px wide,
       which crushed the Item column to ~80px so product names wrapped
       character-by-character. Convert each <tr> into a stacked card
       (image+name row 1, qty stepper row 2, line total + Remove row 3).
       Markup stays as a <table> — pure CSS. */
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tbody tr { display: block; }
    .cart-table tbody tr {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-border);
    }
    .cart-table tbody td {
        display: block;
        padding: 0;
        border: none;
        min-width: 0;
        width: auto;
    }
    /* The Item cell (1st td) keeps its existing .cart-item flex layout
       so image + name stay side-by-side. */
    .cart-table tbody td + td { margin-top: var(--space-3); }
    /* Qty cell — qty-input is already 100% wide on mobile from 0.75.22 */
    .cart-table tbody tr > td:nth-child(2) .qty-input { width: 100%; }
    /* Line total cell — synthesise a 'Total:' label since thead is hidden. */
    .cart-table tbody tr > td:nth-last-child(2) {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-lg);
    }
    .cart-table tbody tr > td:nth-last-child(2)::before {
        content: 'Total: ';
        color: var(--color-text-muted);
        font-weight: var(--font-weight-body);
        font-size: var(--font-size-base);
        margin-right: var(--space-2);
    }
    /* Remove button — full width on its own row. */
    .cart-table tbody tr > td:last-child .btn {
        display: block;
        width: 100%;
        text-align: center;
    }
}
/* 0.26.4: variant thumbnail in the Item cell so customers visually
   recognise their basket lines. 56 px desktop, 40 px mobile so the row
   doesn't bloat. object-fit: cover keeps non-square images centred
   without distortion; placeholder.svg renders at the same dims. */
.cart-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cart-item__thumb {
    /* 0.31.1 — bumped from 56 → 80 desktop (40 → 56 mobile) so the basket
       image is properly visible. Cart row has width to accommodate. */
    width: 80px;
    height: 80px;
    border-radius: 6px;
    /* 0.112.32 — contain (was cover) so packshots are never cropped. Product
       images vary in aspect; cover was clipping the top/bottom of tall cans
       and theatre boxes on the basket. contain letterboxes against the
       surface-2 background instead. */
    object-fit: contain;
    flex: 0 0 auto;
    background: var(--color-surface-2, #f5f5f5);
}
.cart-item__text { min-width: 0; flex: 1 1 auto; }
/* 0.112.32 — basket expiry line (instock tenant). Only renders when the line
   carries an earliest_expiry (NULL on preorder-tenant lines).
   0.112.33 — colour-tiered: neutral by default, amber under 90 days, red
   under 30 (or past). Weight bumped on the flagged tiers so it isn't a
   colour-only cue (the JS also appends "· short-dated" on the red tier). */
.cart-item__expiry { color: var(--color-text-muted, #6b7280); }
.cart-item__expiry--soon   { color: #9a6700; font-weight: 600; }
.cart-item__expiry--urgent { color: #b42318; font-weight: 600; }
@media (max-width: 767px) {
    .cart-item__thumb { width: 56px; height: 56px; }
}
/* 0.26.5: bumped 360 → 420. The 0.26.4-era totals box squeezed both
   "Shipping (ex. VAT)" (label wrapped to 2 lines) and the new ETA copy
   ("Ships Tue 5 May, delivers Wed 6 May" wrapped mid-sentence). 420 fits
   both at base font; the cart card is wider than this so no overflow. */
.cart-totals { max-width: 420px; margin-left: auto; margin-top: var(--space-5); }
.cart-totals__row { display: flex; justify-content: space-between; padding: var(--space-2) 0; }
.cart-totals__row--grand { border-top: 2px solid var(--color-text); padding-top: var(--space-3); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); }

/* ---- Footer ------------------------------------------------------ */
/* 0.74.47: full spec mirror of sweetandglory.com main-site footer —
   color #666, 14px body / 18px headings, Source Sans Pro (global),
   line-height 1.25 (tighter than the global 1.5), headings 600 weight
   with 8px bottom padding. White bg + light-grey separator preserved
   from 0.74.46. Hover darkens to #333 for click affordance. */
.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-6) 0;
    background: var(--color-bg);
    color: #666;
    font-size: var(--font-size-sm);
    line-height: 1.25;
    border-top: 1px solid var(--color-border);
}
.site-footer a { color: #666; }
.site-footer a:hover { color: #333; }
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.site-footer__col h3 {
    color: #666;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    padding-bottom: var(--space-2);
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--space-2); }
/* 0.74.48: social icons row — mirrors sweetandglory.com main-site
   Facebook/Instagram/LinkedIn/X anchors. Right-aligned on desktop,
   centered on mobile. Inline SVG (no Font Awesome dependency). */
.site-footer__social {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.site-footer__social a {
    color: #666;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: color 0.15s ease;
}
.site-footer__social a:hover { color: #333; }
.site-footer__social svg { width: 24px; height: 24px; display: block; }
@media (max-width: 767px) {
    .site-footer__social { justify-content: center; }
}
.site-footer__legal { border-top: 1px solid var(--color-border); margin-top: var(--space-4); padding-top: var(--space-4); color: #666; }

/* ---- Incoming shipments panel (homepage) ------------------------- */
.incoming-countries {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.country-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    border-radius: 14px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}
.country-chip__flag {
    font-size: var(--font-size-base);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.country-chip__flag .flag-img {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    object-fit: cover;
}

/* Generic flag image + placeholder (shared across homepage + PO page). */
.flag-img {
    display: inline-block;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    object-fit: cover;
    vertical-align: middle;
}
.flag-placeholder {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
}

/* Month headers between shipment groups */
.shipments-group-heading {
    color: var(--color-primary);
    font-size: var(--font-size-h3);
    letter-spacing: 0.04em;
    margin: var(--space-5) 0 var(--space-3);
}
.shipments-group-heading:first-child { margin-top: 0; }

.shipments-card {
    padding: 0;
    overflow: hidden;
}
.shipments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.shipments-table thead th {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}
.shipments-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.shipments-table tbody tr:last-child td { border-bottom: none; }
.shipments-table tbody tr:hover { background: var(--color-bg-alt); }

.shipments-table__flag { width: 64px; }
.shipments-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
}
.shipments-flag .flag-img {
    width: 40px;
    height: 30px;
}
.shipments-table__id { width: 120px; white-space: nowrap; }
.shipments-id-link {
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    font-size: var(--font-size-base);
}
.shipments-id-link:hover { text-decoration: underline; }
.shipments-table__details { min-width: 280px; }
.shipments-table__action { width: 120px; text-align: right; }

.btn-order {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* 0.74.29: align with .btn — use accessible button bg tokens so
       white-on-button hits ~6.5:1. */
    background: var(--color-primary-button);
    color: #fff;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.btn-order:hover { background: var(--color-primary-button-hover); color: #fff; text-decoration: none; }

@media (max-width: 767px) {
    /* Stack the shipment row on mobile */
    .shipments-table thead { display: none; }
    /* 0.75.21 — back off the 0.75.20 24/24 gap+padding combo: button
       was still being clipped at the viewport edge (Colin's screenshot
       2026-05-15 b). Reverted to 16/16 which is still symmetric
       (button sits halfway between PO text and card border) but
       leaves ~10-12px of measured slack to absorb font / letter-
       spacing variance in the rendered "ORDER ›" content.
       0.75.20 history: 24/24 was mathematically inside the card box
       but a few px of computed button width or container rounding
       pushed it past the viewport edge.
       tbody set to display: block so it doesn't carry table-row-group
       width quirks; tr widths now constrained by the parent
       .shipments-card box (overflow: hidden + position: relative).
       All td get min-width: 0 so any column can shrink. */
    .shipments-table tbody { display: block; }
    .shipments-table tbody tr { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; gap: 2px var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
    .shipments-table tbody td { padding: 0; border: none; min-width: 0; }
    .shipments-table__flag { grid-row: 1 / span 2; }
    .shipments-table__id { grid-column: 2; grid-row: 1; }
    .shipments-table__details { grid-column: 2; grid-row: 2; min-width: 0; }
    .shipments-table__action { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
    .btn-order { padding: 6px 12px; }
}

/* 0.75.21 — kill any residual horizontal page scroll on mobile. Safety
   backstop in case any other element overflows the viewport — without
   this users can finger-swipe the whole page left/right (Colin reported
   this in 0.75.15 → fixed there, but multiple later CSS changes could
   regress it). overflow-x: clip is preferred over: hidden because it
   doesn't establish a scrolling context, so the .site-nav and
   .site-menu (both position: sticky) continue to stick to the
   viewport instead of to body. Browser support: Chrome 90+, Firefox 81+,
   Safari 16+ — all customers' phones. */
@media (max-width: 767px) {
    html, body { overflow-x: clip; }
}

/* ---- Single-PO detail page (/po.html) ---------------------------- */
.po-page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin: var(--space-5) 0;
}
/* Grid items default to min-width: auto, which lets the inner products
   table (8 cols, no min-width) push each grid cell wider than the
   container. Forcing min-width: 0 lets the .card[overflow-x:auto]
   wrapper scroll the table horizontally instead of overflowing the page. */
.po-sidebar,
.po-main { min-width: 0; }
@media (min-width: 1024px) {
    .po-page-layout { grid-template-columns: 240px 1fr; gap: var(--space-6); }
}

/* Breadcrumbs (above PO hero) */
.po-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-medium);
}
.po-breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.po-breadcrumbs a:hover { color: var(--color-primary); }
.po-breadcrumbs__arrow { color: var(--color-border-strong); }
.po-breadcrumbs__current { color: var(--color-primary); font-weight: var(--font-weight-bold); }

/* PO hero: big "SHIPMENT …" + status + due */
.po-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.po-hero__flag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 60px;
}
.po-hero__flag .flag-img {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-sm);
}
.po-hero__body { flex: 1; min-width: 260px; }
.po-hero__title {
    color: var(--color-primary);
    font-size: 36px;
    letter-spacing: 0.03em;
    margin: 0 0 var(--space-2);
    line-height: 1.1;
    word-break: break-word;
}
@media (max-width: 640px) {
    .po-hero__title { font-size: 26px; }
}
.po-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--font-size-base);
}
.po-hero__meta strong { font-weight: var(--font-weight-bold); }
.po-status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.po-intro { max-width: 760px; }
.po-intro p { margin: 0 0 var(--space-2); }

/* --- Legacy header card (kept for backwards-compat, not currently used) --- */
.po-header-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.po-header-card__flag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 54px;
}
.po-header-card__flag .flag-img {
    width: 72px;
    height: 54px;
    border-radius: var(--radius-sm);
}
.po-header-card__flag .flag-placeholder {
    font-size: 48px;
}
.po-header-card__body h1 { font-size: var(--font-size-h2); margin: 0; }

.po-sidebar {
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    align-self: start;
}
/* 0.74.15 — sticky only on the >=1024px sidebar layout. Below that the
   page is single-column so the filter renders inline above the products;
   sticky there glues the filter to the middle of the viewport while
   product rows scroll past behind it. */
@media (min-width: 1024px) {
    .po-sidebar {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-3));
    }
}
.po-filter-group { margin-bottom: var(--space-5); }
.po-filter-group:last-child { margin-bottom: 0; }
.po-filter-heading {
    font-size: var(--font-size-base);
    margin: 0;
    display: inline-block;
}
.po-filter-subheading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}
.po-filter-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: var(--space-2);
}
.po-filter-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: var(--font-size-sm);
    cursor: pointer;
    user-select: none;
}
.po-filter-item input { width: auto; margin: 0; }
.po-filter-item:hover { color: var(--color-primary); }

.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); }

/* ---- PO quick-order table (/po.html) ---------------------------- */
.po-products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.po-products-table thead th {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-3) var(--space-3);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    /* 0.80.5 — headers may wrap onto two lines so multi-word labels like
       "ALREADY ALLOCATED" and "ALLOCATED TO YOU" don't force their columns
       wider than their content needs. Short labels (SKU, PRICE, DUE IN…)
       still fit on one line. line-height tightened so the header row stays
       compact when something does wrap. */
    white-space: normal;
    line-height: 1.2;
    vertical-align: middle;
}
.po-products-table tbody td {
    /* 0.80.4 — vertical padding kept generous; horizontal trimmed to
       var(--space-2) so 9 columns + the merged Order cell fit comfortably
       inside the card on a typical 1280-1440px viewport without horizontal
       overflow clipping the Add-to-basket button. */
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.po-products-table thead th { padding: var(--space-3) var(--space-2); }
.po-products-table tbody tr:last-child td { border-bottom: none; }
.po-products-table tbody tr:hover { background: var(--color-bg-alt); }

/* 0.80.4 — column widths shrunk across the board so the 9-column table fits
   in the available card width without overflow-x clipping the rightmost
   cell. Previously the table needed ~1140px min and clipped on viewports
   under ~1300px; now ~950px min comfortably fits a 1100px card. */
.po-products-table__img { width: 72px; min-width: 72px; }
.po-products-table__img img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
}
.po-products-table__sku {
    width: 76px;
    min-width: 76px;
    white-space: nowrap;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
}
.po-products-table__name { min-width: 220px; }
.po-products-table__name a { color: var(--color-primary); font-weight: var(--font-weight-medium); text-decoration: none; }
.po-products-table__name a:hover { text-decoration: underline; }
.po-products-table__price { text-align: right; white-space: nowrap; }
.po-products-table__qty { text-align: right; white-space: nowrap; width: 72px; min-width: 72px; }
/* 0.80.6 — center-align modifier for the Already Allocated column. The bar
   underneath the number is also center-anchored visually (flex-end on the
   bar puts the slate segment at the right edge of the cell). */
.po-products-table__qty--center { text-align: center; }
/* 0.80.3 — Order column hosts both the qty stepper AND the Add-to-basket
   button (vertical stack). 0.80.4 — shrunk to 124px to fit the row.
   padding-right ensures the button doesn't touch the table border. */
.po-products-table__order { width: 124px; min-width: 124px; padding-right: var(--space-2); }
.po-products-table__order-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
}
.po-products-table__order-cell .btn-update { width: 100%; padding-left: 4px; padding-right: 4px; font-size: var(--font-size-xs); }
.po-products-table__order .qty-input {
    width: 100%;
    height: 32px;
}
.po-products-table__order .qty-input button {
    width: 28px;
    height: 32px;
    font-size: 16px;
    color: var(--color-text);
}
.po-products-table__order .qty-input input {
    height: 32px;
    width: 100%;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    /* Hide the browser's native spinner — the −/+ buttons are the stepper. */
    appearance: textfield;
    -moz-appearance: textfield;
}
.po-products-table__order .qty-input input::-webkit-outer-spin-button,
.po-products-table__order .qty-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.po-products-table__order .qty-input input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* 0.80.0 — stacked progress bar under the Available qty on the PO table +
   product page. Visualises Pre Allocated / Allocated to you / Ordered by
   others / Available as four left-to-right segments coloured to match the
   columns so the eye spots fully-reserved lines instantly. */
.po-bar {
    /* 0.80.6 — flex-end anchors the single allocated-progress segment to
       the right of the container. The bar "fills leftward" as more stock
       is locked: 0% = no visible bar against a faint slate track, 100% =
       fully filled. Matches the "gauge that empties as stock is taken"
       mental model. */
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 6px;
    background: var(--color-bg-alt);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.po-bar__seg                  { display: block; height: 100%; }
/* 0.80.1 — bar simplified to three segments: Already Allocated (everything
   spoken for outside you) / Allocated to you / Available. The previous
   four-segment split (OW vs other customers) was merged — customers don't
   need that distinction; what matters is "how much is gone vs left". */
.po-bar__seg--prealloc        { background: #94a3b8; }   /* slate — already allocated to existing pre-orders */
.po-bar__seg--yours           { background: #f472b6; }   /* pink — your contribution */
.po-bar__seg--avail           { background: #34d399; }   /* green — buyable */

/* 0.80.0 — "Fully reserved" badge on PO rows where effective_qty=0. Sits
   under the product description. Pink-tinted so it doesn't compete with the
   Add-to-basket CTA but is unmissable on every fully-allocated row. */
.po-pill {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.po-pill--reserved {
    background: rgba(236, 72, 153, 0.12);
    color: var(--color-primary);
    border: 1px solid rgba(236, 72, 153, 0.30);
}

/* Visually de-emphasise rows that are fully allocated — readable, but
   subordinate to rows that can still be ordered. */
.po-products-table tbody tr[data-fully-allocated="true"] {
    background: rgba(0, 0, 0, 0.015);
}
.po-products-table tbody tr[data-fully-allocated="true"]:hover {
    background: rgba(0, 0, 0, 0.03);
}
.po-products-table tbody tr[data-fully-allocated="true"] .po-products-table__name a {
    color: var(--color-text-muted);
}

.btn-update {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    cursor: pointer;
    white-space: nowrap;
}
.btn-update:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-update:disabled { background: #ccc; cursor: not-allowed; }

/* 0.75.19 — /po quick-order layout on mobile.
   The 8-column desktop table (img, sku, name, price, due-in, ordered,
   stepper, button) requires ~860px to render and was clipping the
   right ~half of the row on iPhone Pro Max — the qty stepper and Add
   to basket button (the two interactive cells customers actually need)
   sat off-screen. Convert each <tr> into a card and the <tbody> into
   a 2-column grid; the header row is hidden and per-cell labels are
   synthesised via ::before pseudo-elements (markup unchanged, so po.js
   doesn't need to know about the responsive shape). Desktop layout
   above (>=768px) is untouched. */
@media (max-width: 767px) {
    .po-products-table { display: block; border: 0; }
    .po-products-table thead { display: none; }
    .po-products-table tbody {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    .po-products-table tbody tr {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        border: 1px solid var(--color-primary);
        border-radius: var(--radius-sm);
        background: #fff;
    }
    .po-products-table tbody tr:hover    { background: #fff; }
    .po-products-table tbody tr:last-child td,
    .po-products-table tbody td {
        display: block;
        padding: 0;
        border: none;
        width: auto;
        min-width: 0;
        text-align: left;
        white-space: normal;
    }
    .po-products-table__img    { width: 100%; }
    .po-products-table__img img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        background: var(--color-bg-alt);
        padding: var(--space-2);
        border-radius: var(--radius-sm);
    }
    .po-products-table__sku    { font-size: var(--font-size-xs); }
    .po-products-table__name a { font-size: var(--font-size-base); }
    .po-products-table__price  { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); }
    /* Synthesise per-row labels on mobile so the bare numbers in the
       availability + ordered cells have context (no thead to lean on).
       Available cell has no [data-ordered-qty]; ordered cell does. */
    .po-products-table__qty {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
        font-weight: var(--font-weight-body);
    }
    .po-products-table__qty:not([data-ordered-qty])::before {
        content: 'Due in: ';
    }
    .po-products-table__qty[data-ordered-qty]:not(:empty)::before {
        content: 'In basket: ';
    }
    .po-products-table__qty[data-ordered-qty]:empty { display: none; }
    .po-products-table__qty strong { color: var(--color-text); font-weight: var(--font-weight-bold); }
    /* Push the order controls to the bottom of the card so the Add-to-
       basket buttons line up across tiles even when descriptions wrap
       to different heights. */
    .po-products-table__order { margin-top: auto; }
    /* 0.75.22 — bump qty stepper to 48x48 on mobile (was 32x36 from the
       desktop-scoped rule above). Below Apple HIG 44x44 minimum the
       buttons were fat-finger missing and triggering iOS double-tap
       zoom on /po. touch-action: manipulation on .btn already kills
       the zoom; the size bump is what stops the missed taps. */
    .po-products-table__order .qty-input { width: 100%; height: 48px; }
    .po-products-table__order .qty-input button { width: 48px; height: 48px; font-size: 20px; }
    .po-products-table__order .qty-input input { width: 100%; height: 48px; font-size: 16px; }
    .po-products-table__order .btn-update {
        padding: 10px 12px;
        font-size: var(--font-size-sm);
        white-space: nowrap;
    }
}

/* ---- My account page --------------------------------------------- */
.account-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-5);
    overflow-x: auto;
}
.account-tab {
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}
.account-tab:hover { color: var(--color-primary); }
.account-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.account-filter-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--color-bg-alt);
    padding: 4px;
    border-radius: var(--radius-md);
}
.account-filter {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
}
.account-filter[aria-selected="true"] {
    background: #fff;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-sm);
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}
.address-card {
    position: relative;
    padding: var(--space-4);
}
.address-card--default {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}
.address-card__lines { color: var(--color-text); line-height: 1.6; }
.address-default-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    vertical-align: middle;
    margin-left: 4px;
}

/* Checkout address picker (radio cards) */
/* Container-border convention (0.20.7): match top-nav pill style. */
.address-pick {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    cursor: pointer;
    background: #fff;
}
.address-pick:hover { box-shadow: 0 0 0 1px var(--color-primary); }
.address-pick input[type=radio] { margin-top: 4px; width: auto; }
.address-pick--selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
    background: var(--color-primary-tint);
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.orders-table thead th {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}
.orders-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.orders-table tbody tr:last-child td { border-bottom: none; }
.orders-table tbody tr:hover { background: var(--color-bg-alt); }

.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: #e2e3e5;
    color: #383d41;
}
.status-pill--pending_payment { background: #fff3cd; color: #856404; }
.status-pill--paid            { background: #fde5ee; color: var(--color-primary-dark); }
.status-pill--ow_so_created   { background: #d4edda; color: #155724; }
.status-pill--ow_so_failed    { background: #f8d7da; color: #721c24; }
.status-pill--fulfilled       { background: #d4edda; color: #155724; }
.status-pill--cancelled       { background: #e2e3e5; color: #383d41; }
.status-pill--refunded        { background: #f8d7da; color: #721c24; }
/* 0.75.4 — display_status (5-state badge): ON HOLD / BALANCE REQUIRED /
   PAID / PROCESSING / SHIPPED. Class names are display_status lowercased
   with spaces → hyphens (deriveDisplayStatus output passed straight
   through to .status-pill--{lower-kebab}). */
.status-pill--on-hold          { background: #fff3cd; color: #856404; }
.status-pill--balance-required { background: #ffe0b2; color: #8a4b00; }
.status-pill--paid             { background: #fde5ee; color: var(--color-primary-dark); }
.status-pill--processing       { background: #cce5ff; color: #004085; }
/* 0.90.7 — abandoned-Stripe-checkout state. Amber/red palette signals
   "you still need to pay" vs the neutral PROCESSING blue that previously
   hid the action gap. Pairs with the 0.75.32 "Pay now" CTA in the
   expanded order detail. */
.status-pill--awaiting-payment { background: #ffe0b2; color: #b00020; font-weight: 600; }
.status-pill--shipped          { background: #d4edda; color: #155724; }

/* Expandable order rows on /account.html Orders tab */
.orders-table--expandable .order-row { cursor: pointer; }
.order-row__chevron {
    color: var(--color-text-muted, #777);
    transition: transform 0.15s ease;
    text-align: center;
    user-select: none;
}
.order-row[aria-expanded="true"] .order-row__chevron {
    transform: rotate(90deg);
    color: var(--color-primary);
}
.order-detail-row > .order-detail-cell {
    background: var(--color-bg-alt, #fafafa);
    padding: var(--space-4);
}
.order-detail__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 900px) {
    .order-detail__grid { grid-template-columns: 2fr 1fr; }
}
.order-detail__heading {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #777);
}
.order-lines-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.order-lines-table thead th {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    text-align: left;
    color: var(--color-text-muted, #777);
    font-weight: var(--font-weight-medium);
}
.order-lines-table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.order-lines-table tbody tr:last-child td { border-bottom: none; }

.order-detail__side { display: flex; flex-direction: column; gap: var(--space-4); }
.order-detail__totals dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    font-size: var(--font-size-sm);
}
.order-detail__totals dt { color: var(--color-text-muted, #777); }
.order-detail__totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.order-detail__totals .order-detail__grand { font-weight: var(--font-weight-medium); color: var(--color-primary-dark); padding-top: 4px; border-top: 1px solid var(--color-border); }
.order-detail__addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px) {
    .order-detail__addresses { grid-template-columns: 1fr; }
}
.order-detail__address { background: #fff; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-3); }

/* ---- Form layouts ------------------------------------------------ */
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.card {
    background: #fff;
    /* Container-border convention (0.20.7): match top-nav pill style. */
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

/* ---- Product detail: availability + transform card --------------- */
.product-detail__pack {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text);
    font-size: var(--font-size-md);
}
.product-detail__availability {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
}
.product-detail__availability-num {
    display: inline-block;
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    margin-right: var(--space-2);
    line-height: 1;
}
.product-detail__availability-word {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.product-detail__availability--empty {
    border-left-color: #aaa;
    color: var(--color-text-muted);
}
.product-detail__transform {
    padding: var(--space-4);
    /* 0.92.14 — was hardcoded #fde5ee preorder pink. Tenant-aware now. */
    background: var(--color-primary-tint);
    border-radius: var(--radius-md);
}
.product-detail__transform-link {
    display: inline-block;
    margin-top: var(--space-1);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}
.product-detail__transform-link:hover { text-decoration: underline; }

/* ---- Cart page: reservation banner ------------------------------ */
.cart-reservation {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    /* 0.92.14 — was hardcoded #fde5ee + #f7c6d7 preorder pink. Tenant-aware now. */
    background: var(--color-primary-tint);
    border: 1px solid var(--color-primary-tint);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
}
.cart-reservation__icon {
    font-size: 1.25rem;
    line-height: 1;
}
.cart-reservation--expired {
    background: #fff3cd;
    border-color: #ffe49a;
    color: #856404;
}

/* 0.84.3 — dispatch-from notice. Renders at the top of every preorder
   basket's totals stack to make the dispatch-after-stock-lands semantics
   un-missable. Sits in the same column as the totals (max-width: 420px)
   so it occupies the full width of the totals strip. Amber palette
   distinguishes it from the pink reservation banner — pink = active
   countdown timer, amber = scheduled future date. */
.cart-dispatch-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: var(--radius-md);
    color: #6b5a17;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}
.cart-dispatch-notice__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.cart-dispatch-notice__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cart-dispatch-notice__body strong {
    font-size: var(--font-size-base);
}

/* ---- Cart page: min-order shortfall banner (0.21.0) ---------------- */
/* Renders under the cart totals block when this cart's subtotal is below
   the configurable min-order floor (Settings → Shipping rules). The
   Proceed-to-checkout button is disabled alongside; defensive 400 at
   POST /api/checkout/session catches any crafted request that slips by. */
.cart-min-order-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0 0 auto;
    max-width: 360px;
    background: #fff3cd;
    border: 1px solid #ffe49a;
    border-radius: var(--radius-md);
    color: #856404;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}
.cart-min-order-banner__icon {
    font-size: 1.25rem;
    line-height: 1;
}
.btn[disabled], .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Cart page: delivery-postcode banner (0.22.0) ------------------ */
/* Sits between the <h1> heading and the first cart section. Drives the
   per-cart shipping row via POST /api/shipping/quote. Content varies
   between "postcode known" (compact label + Change) and "postcode
   missing" (inline input). */
.postcode-banner {
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.postcode-banner__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.postcode-banner__form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.postcode-banner__form[hidden] { display: none; }

/* ---- Cart page: shipping row + dims row in the totals block (0.22.0) ---------- */
.cart-totals__row--shipping { color: var(--color-text); gap: var(--space-4); }
.cart-totals__row--shipping .text-error {
    color: #721c24;
    font-weight: var(--font-weight-medium);
}
/* Stacked value cell: amount on top, VAT + carrier meta right-aligned beneath. (0.22.2) */
.cart-shipping-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
    min-width: 0;
}
.cart-shipping-value__amount { font-weight: var(--font-weight-medium); white-space: nowrap; }
.cart-shipping-value__vat,
.cart-shipping-value__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
}
/* 0.26.2: ETA copy ("Ships Tue 5 May, delivers Wed 6 May") was rendering
   at .meta size (xs / muted) which made it easy to miss. Bump up: bigger,
   regular text colour, slightly more weight. Still right-aligned with the
   shipping row.
   0.26.5: nowrap so the dispatch promise reads as one phrase instead of
   wrapping mid-sentence ("Ships Tue 5 May, delivers Wed 6" + "May" on
   line 2 was Colin's repro). The 360 px totals box can accommodate ~35
   chars at base size; if a future longer ETA copy bursts, the totals box
   widens with it (no width clamp on the eta line itself). */
.cart-shipping-value__eta {
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    margin-top: 4px;
    white-space: nowrap;
}
.cart-totals__row--dims {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.cart-totals__row--postcode { font-size: var(--font-size-sm); }
.cart-postcode-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.cart-postcode-cell input[data-cart-postcode-input] {
    width: 110px;
    padding: 4px 8px;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------------
   Generic breadcrumbs — used on /brand/, /brand-product/, /product/.
   /po/ has its own .po-breadcrumbs style (kept for backwards-compat).
   Mirrors po-breadcrumbs visually so the site feels consistent.
   ------------------------------------------------------------------ */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs__sep { color: var(--color-border-strong); }
.breadcrumbs__current {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* ------------------------------------------------------------------
   Cookie consent banner (UK PECR/GDPR — Google Consent Mode v2)
   Injected by layout.js on first visit; sits at bottom of viewport
   above the fold so it can't be missed.
   ------------------------------------------------------------------ */
.consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 2px solid var(--color-primary);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    padding: var(--space-3) var(--space-4);
}
.consent-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.consent-banner__text {
    margin: 0;
    flex: 1;
    min-width: 220px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.consent-banner__text a {
    color: var(--color-primary);
    text-decoration: underline;
}
.consent-banner__buttons {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
.consent-banner__btn {
    padding: 8px 18px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.consent-banner__btn:hover { opacity: 0.85; }
.consent-banner__btn--accept {
    /* 0.74.29: accessible button bg variant for 4.5:1+ on white text. */
    background: var(--color-primary-button);
    color: #fff;
    border-color: var(--color-primary-button);
}
@media (max-width: 600px) {
    .consent-banner__inner { flex-direction: column; align-items: stretch; }
    .consent-banner__buttons { width: 100%; }
    .consent-banner__btn { flex: 1; padding: 12px 16px; }
}

/* ---------- /search page (0.43.0) ----------
   Site-wide search across both pipelines (preorder + brand catalogue).
   Reuses .brand-variant-grid + .brand-variant-card from brand-catalogue.css
   so cards match the look of the brand pages. .search-card adds the PO
   chip strip used on preorder results. */
.search-page__form {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.search-page__input {
    flex: 1 1 280px;
    padding: 10px 14px;
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.search-page__input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.search-page__status { margin-bottom: var(--space-4); }
.search-page__section { margin-top: var(--space-5); }
.search-page__section-title { margin-bottom: var(--space-1); }

.search-card__pos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-2);
}
.search-card__po-chip {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-primary-tint, rgba(233,30,99,0.12));
    color: var(--color-primary);
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}
.search-card__po-chip:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ---------- Accessibility (0.45.0) ----------
   Skip-to-main-content link injected by layout.js as the first child of
   <header data-site-nav>. Off-screen by default; slides into view on
   keyboard focus. Mouse users never see it. Sighted keyboard users
   get a one-Tab path past 8+ nav links to the page's main content. */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: var(--space-3);
    z-index: 1100;
    padding: 12px 20px;
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: top 0.15s ease-out;
}
.skip-to-main:focus,
.skip-to-main:focus-visible {
    top: var(--space-3);
    outline: 2px solid #fff;
    outline-offset: 2px;
    color: #fff;
    text-decoration: none;
}

/* Buttons get a visible keyboard focus ring. :focus-visible (rather than
   :focus) so mouse users don't see a ring after click — only keyboard
   users get the indicator, which is the WCAG 2.4.7 requirement. Outline
   sits OUTSIDE the button via offset so it doesn't crowd the existing
   border-radius. */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.btn-secondary:focus-visible,
.btn-ghost:focus-visible {
    outline-color: var(--color-primary);
}

/* <main id="main"> gets focused programmatically by the skip-link. We
   don't want a default browser focus ring on the page body — the user
   has just navigated TO main, the visible cue is the page already
   scrolled there. Suppress only when focused programmatically. */
main:focus { outline: none; }

/* qty-input had `outline: none` on the inner <input> with no replacement
   indicator — keyboard users couldn't tell when the qty field was
   focused. Move the focus ring to the OUTER container via :focus-within
   so the wrapping pill grows a visible ring without changing layout. */
.qty-input:focus-within {
    box-shadow: 0 0 0 2px var(--color-primary);
    outline-offset: 2px;
}

/* "See all results for X →" footer link added to the top-nav search
   dropdown. Always visible (whether there are results or not) so the user
   can fall through to the full-page search. */
.site-nav__search-see-all {
    display: block;
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-align: center;
}
.site-nav__search-see-all:hover { background: var(--color-primary); color: #fff; }


/* 0.75.36 — Newsletter signup banner, sits above the 4-column footer grid.
   Soft pink to match the site palette, with a single-row form on desktop +
   stacked layout on mobile. Hidden by default via JS while the Mailchimp
   action URL is unset, so the empty banner never ships. */
.site-footer__newsletter {
    /* 0.92.14 — tenant-aware via --color-primary-tint (overridden per
       tenant by layout.js's /api/site/config fetch). Was a hardcoded pink
       gradient (#fff3f7 → #ffe8f0) + rgba pink borders pre-0.92.14, which
       stayed preorder pink on instock regardless of the brand colour
       override. Solid tint replaces the gradient — visual loss negligible
       (the gradient was sub-perceptible), gain is correct tenant colour
       on every page footer. */
    background: var(--color-primary-tint);
    border-top: 1px solid var(--color-primary-tint);
    border-bottom: 1px solid var(--color-primary-tint);
    padding: var(--space-5) 0;
}
.site-footer__newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.site-footer__newsletter-copy {
    flex: 1 1 320px;
    min-width: 0;
}
.site-footer__newsletter-title {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    color: #2a2a2a;
}
.site-footer__newsletter-subtitle {
    margin: 0;
    color: var(--color-text-muted, #555);
    font-size: 0.95rem;
}
.site-footer__newsletter-form {
    display: flex;
    gap: var(--space-2);
    flex: 0 1 auto;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
}
.site-footer__newsletter-input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.site-footer__newsletter-input:focus {
    outline: 2px solid #EF5190;
    outline-offset: 1px;
    border-color: #EF5190;
}
.site-footer__newsletter-btn {
    padding: 10px 22px;
    font-weight: 600;
    flex: 0 0 auto;
}
.site-footer__newsletter-status {
    flex: 1 0 100%;
    margin: 6px 0 0 0;
    font-size: 0.9rem;
    min-height: 1.2em;
}
.site-footer__newsletter-status--ok    { color: #2d7a36; }
.site-footer__newsletter-status--error { color: #b3261e; }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 720px) {
    .site-footer__newsletter-inner { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .site-footer__newsletter-copy  { flex: 0 0 auto; }  /* override the 320px flex-basis used at desktop — otherwise leaves a 320px-tall blank gap below copy on mobile */
    .site-footer__newsletter-form  { flex-wrap: wrap; }
    .site-footer__newsletter-input { flex: 1 1 100%; }
    .site-footer__newsletter-btn   { flex: 1 1 100%; }
}

/* 0.75.39 — Homepage section title links. The h2 wraps an <a> for the
   destination page (e.g. Incoming shipments → /due-in). Color: inherit
   so the heading still reads as a heading; subtle hover affordance via
   pink underline. */
.section-title-link {
    color: inherit;
    text-decoration: none;
}
.section-title-link:hover,
.section-title-link:focus {
    color: #EF5190;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* 0.85.0 — Generic SSR description body, used by /product, /po, /seasonal
   (the brand pages use the matching .brand-hero__description block in
   brand-catalogue.css). Server-side ssr-pages.js fills the
   [data-seo-description] placeholder when ops has typed a body under the
   Page descriptions admin tab. The block remains `hidden` (HTML attribute)
   until SSR populates it, so the visual layout is unchanged for pages
   without copy. */
.seo-description {
    margin: var(--space-5) 0 var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text, #1a1a1a);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.6;
    max-width: 70ch;
}
.seo-description p {
    margin: 0 0 var(--space-3);
}
.seo-description p:last-child {
    margin-bottom: 0;
}