/* ===========================================================================
   STOREFRONT — PRODUCTS SCREEN
   ---------------------------------------------------------------------------
   Loaded AFTER pages.css so it wins on equal specificity. Kept in its own file
   rather than appended to pages.css so this redesign can be read, reviewed and
   reverted on its own.

   Every class name the old markup used is kept and restyled, not renamed —
   renaming would have churned four test suites for no benefit to a shopper.

   THE PROBLEMS THIS FIXES, all visible in the before/after screenshots:
     * the desktop grid filled about half the page and left the rest empty
     * "Add to Cart" was WhatsApp green — a leftover from when orders went out
       through WhatsApp — and clashed with the maroon and gold brand
     * nothing let a shopper jump to a section; the only way to reach the
       powders was to scroll past every pickle
     * mobile type was so large that two products filled the screen
   =========================================================================== */

:root {
    --sf-ink:        #2a1c14;
    --sf-body:       #5c4a3d;
    /* Was #8a7a6c — 4.13:1 on white, under the 4.5:1 minimum, and used by six
       different pieces of small text. Darkening this one value clears all of
       them at once. */
    --sf-muted:      #6f6053;
    --sf-line:       #ece2d5;
    --sf-line-soft:  #f5efe6;
    --sf-card:       #ffffff;
    --sf-accent:     #8b0000;
    --sf-accent-dk:  #6d0000;
    --sf-accent-sft: #fdf3f1;
    --sf-gold:       #c5a059;
    --sf-gold-sft:   #fbf4e6;
    --sf-ok:         #1f7a3d;
    --sf-warn:       #b3261e;

    --sf-r-sm: 10px;
    --sf-r:    16px;
    --sf-r-lg: 22px;

    --sf-shadow:    0 1px 2px rgba(42, 28, 20, .05), 0 6px 18px rgba(42, 28, 20, .06);
    --sf-shadow-up: 0 2px 6px rgba(42, 28, 20, .07), 0 18px 38px rgba(42, 28, 20, .13);

    --sf-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ===========================================================================
   THE SHOP BAR — search + section pills, stuck under the site header
   ---------------------------------------------------------------------------
   `--admin-header-h` is measured and published by app.js on load, resize and
   every navigation, because the header's height changes with the viewport,
   with whether someone is signed in, and with how long their name is. A
   hardcoded offset leaves this bar either overlapping the header or floating
   below it.
   =========================================================================== */
.shop-bar {
    position: sticky;
    /* for the ::after fade */
    top: calc(var(--admin-header-h, 84px) - 1px);
    z-index: 60;
    margin: 0 0 22px;
    padding: 14px 0 10px;
    /* Fully opaque. The previous gradient ran out at 78% of the bar's height,
       which left the bottom 19px of the pill row see-through: product badges
       and weight tags scrolled visibly underneath the pills. */
    background: var(--bg-cream);
    /* The pills scroll horizontally inside this bar; the page never does. */
    max-width: 100%;
}

/* The soft edge belongs BELOW the bar, where content passes out of view. */
.shop-bar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 14px;
    background: linear-gradient(var(--bg-cream), rgba(253, 250, 245, 0));
    pointer-events: none;
}

.search-bar { margin: 0 0 12px; }

.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: 999px;
    padding: 0 16px;
    min-height: 52px;
    box-shadow: var(--sf-shadow);
    transition: border-color .18s var(--sf-ease), box-shadow .18s var(--sf-ease);
}
.search-field:focus-within {
    border-color: var(--sf-gold);
    box-shadow: 0 0 0 4px var(--sf-gold-sft), var(--sf-shadow);
}
.search-field input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 15px;
    color: var(--sf-ink);
    padding: 12px 0;
}
.search-field input::placeholder { color: var(--sf-muted); }
.search-icon { font-size: 15px; opacity: .55; }
.search-clear {
    border: none;
    background: var(--sf-line-soft);
    color: var(--sf-body);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    display: grid; place-items: center;
    transition: background .15s var(--sf-ease), transform .15s var(--sf-ease);
}
.search-clear:hover { background: var(--sf-line); transform: rotate(90deg); }

.search-summary {
    margin: 10px 2px 0;
    font-size: 13px;
    color: var(--sf-muted);
}

/* ---- section pills ---- */
.cat-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    /* The bar is inside a centred column with padding; the pills bleed to the
       edges so the last one does not look clipped mid-word on a phone. */
    padding: 2px 2px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.cat-nav::-webkit-scrollbar { display: none; }

/* The row scrolls sideways and, without this, the last visible pill is simply
   cut off mid-word — which reads as a layout bug rather than as "there is
   more". Fading the edge makes the overflow deliberate. */
@media (max-width: 900px) {
    .cat-nav {
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
                mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
}

.cat-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--sf-line);
    background: var(--sf-card);
    color: var(--sf-body);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    min-height: 44px;
    transition: background .18s var(--sf-ease), color .18s var(--sf-ease),
                border-color .18s var(--sf-ease), transform .12s var(--sf-ease);
}
.cat-pill:hover { border-color: var(--sf-gold); color: var(--sf-ink); }
.cat-pill:active { transform: scale(.96); }
.cat-pill.is-on {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(139, 0, 0, .22);
}
.cat-pill-count {
    font-size: 11.5px;
    font-weight: 700;
    /* Was opacity .55, which composited to 2.71:1 — the worst contrast on the
       page, on the one number these pills exist to show. */
    color: var(--sf-muted);
}
.cat-pill.is-on .cat-pill-count { color: rgba(255, 255, 255, .85); }

/* ===========================================================================
   SECTION HEADINGS
   =========================================================================== */
/* The element the pills actually scroll to. The offset MUST be on this
   wrapper: scrollIntoView reads scroll-margin from the element it is given,
   and putting it on the heading inside had no effect at all.
   --sf-sticky-h is measured by app.js from the real header + shop bar. */
.menu-section { scroll-margin-top: var(--sf-sticky-h, 240px); }

.section-header {
    display: flex;
    align-items: baseline;
    /* Beside the heading, not stranded at the far right of a 1170px row. A
       short section then reads as "two products", not as a broken layout with
       a lone tag floating in the void. */
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    scroll-margin-top: var(--sf-sticky-h, 240px);
    margin: 6px 0 16px;
    padding: 0;
    border: none;
}
.section-header h3 {
    font-family: var(--title-font);
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
    line-height: 1.15;
    color: var(--sf-ink);
    letter-spacing: -.01em;
    position: relative;
    padding-left: 14px;
}
/* The old build drew this rule with a border on the whole header, which sat
   oddly beside a two-line heading. A pseudo-element tracks the text instead. */
.section-header h3::before {
    content: "";
    position: absolute;
    left: 0; top: .18em; bottom: .18em;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(var(--sf-accent), var(--sf-gold));
}

.weight-tag {
    flex: 0 0 auto;
    background: var(--sf-gold-sft);
    /* #8a6d2f measured 4.45:1 on the gold tint — a rounding error away from
       the 4.5:1 minimum, which is not a place to leave small text. */
    color: #74591f;
    border: 1px solid #efe0c2;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

hr.divider {
    border: none;
    height: 1px;
    background: var(--sf-line);
    margin: 34px 0 30px;
}

/* ===========================================================================
   THE GRID
   ---------------------------------------------------------------------------
   auto-fill + minmax is the whole fix for the half-empty desktop page: the row
   takes as many cards as fit and they stretch to share the width, instead of
   every card sitting at one fixed size and leaving the remainder blank.
   =========================================================================== */
.product-grid {
    display: grid;
    /* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, which
       would stretch two products across the whole 1170px page and give a
       sparse section enormous cards next to a dense section's small ones.
       auto-fill keeps every card the same size everywhere; a short section
       simply leaves the remaining tracks empty, which is what every catalogue
       does and what more products will fill in. */
    /* 300px, not 250. At 1170px that is THREE tracks of 376px rather than four
       of 277 — so a two-product section leaves 34% of the row empty instead of
       51%, and the cards are big enough to sell a jar of pickle rather than
       index it. A sparse row cannot be eliminated with nine products; it can
       be made to look like a shelf with room on it. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 0;
}

/* ===========================================================================
   PRODUCT CARD
   =========================================================================== */
.item-card {
    display: flex;
    flex-direction: column;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
    transition: transform .22s var(--sf-ease), box-shadow .22s var(--sf-ease),
                border-color .22s var(--sf-ease);
    /* Staggered entrance, applied per card below. */
    animation: sf-rise .5s var(--sf-ease) both;
}
.item-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sf-shadow-up);
    border-color: #e2d3bf;
}

/* A short stagger only — long chains feel slow on a fast connection, and a
   shopper who scrolls quickly should never wait for an animation. */
.item-card:nth-child(1) { animation-delay: .00s; }
.item-card:nth-child(2) { animation-delay: .04s; }
.item-card:nth-child(3) { animation-delay: .08s; }
.item-card:nth-child(4) { animation-delay: .12s; }
.item-card:nth-child(5) { animation-delay: .16s; }
.item-card:nth-child(n+6) { animation-delay: .2s; }

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

/* While a search is being typed the grid must not animate. `track by` keeps
   the surviving cards' DOM nodes, and this stops the ones that do change from
   fading the whole grid in and out on every letter. */
body.is-filtering .item-card { animation: none; }

.image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(160deg, #f7f2ea, #efe7db);
}
.image-container img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--sf-ease);
}
.item-card:hover .image-container img { transform: scale(1.06); }

.image-container.is-tappable { cursor: pointer; }
/* Keyboard users get the same affordance as the mouse. */
.image-container.is-tappable:focus-visible {
    outline: 3px solid var(--sf-gold);
    outline-offset: -3px;
}

.badge {
    position: absolute;
    /* Bottom-left, not top-left. The shop's own photos carry a "COMBO OFFER"
       starburst in the upper half, and at 360px the badge covered half of it —
       the badge and the product's own artwork fighting each other.
       `top: auto` is REQUIRED: pages.css still declares top:10px on .badge,
       and an absolutely positioned box with both top and bottom set stretches
       between them — which made this badge 256px tall down the whole photo. */
    top: auto; bottom: 10px; left: 10px;
    background: rgba(139, 0, 0, .92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 7px;
    backdrop-filter: blur(3px);
}

.soldout-ribbon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(42, 28, 20, .55);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 15px;
    flex: 1;
    text-align: left;
}

.item-name {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sf-ink);
    margin: 0;
    /* Two lines maximum, and always two lines of space reserved, so the price
       and the button line up across a row whatever the names are. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.item-name.is-tappable { cursor: pointer; }
.item-name.is-tappable:hover { color: var(--sf-accent); }

.price {
    font-size: 17px;
    font-weight: 700;
    color: var(--sf-accent);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.price-from {
    font-size: 11px;
    font-weight: 600;
    color: var(--sf-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.stock-line {
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.stock-line::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sf-ok);
    flex: 0 0 auto;
}
.stock-line.is-low { color: var(--sf-warn); }
.stock-line.is-low::before { background: var(--sf-warn); animation: sf-pulse 1.8s ease-in-out infinite; }

@keyframes sf-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.8); }
}

/* The action sits at the bottom of the card whatever the name length. */
.item-info .buy-btn,
.item-info .card-stepper { margin-top: auto; }

/* ===========================================================================
   BUTTONS
   ---------------------------------------------------------------------------
   The green was WhatsApp's, from when checkout handed off to wa.me. Orders are
   placed in the application now, so the primary action wears the shop's own
   colour. Green is kept for CONFIRMATION only — the "Added" flash.
   =========================================================================== */
.buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: var(--sf-accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s var(--sf-ease), transform .12s var(--sf-ease),
                box-shadow .18s var(--sf-ease);
}
.buy-btn:hover {
    background: var(--sf-accent-dk);
    box-shadow: 0 6px 16px rgba(139, 0, 0, .26);
}
.buy-btn:active { transform: scale(.97); }
.buy-btn:focus-visible { outline: 3px solid var(--sf-gold); outline-offset: 2px; }

.buy-btn.customise-btn {
    background: var(--sf-card);
    color: var(--sf-accent);
    border: 1.5px solid var(--sf-accent);
}
.buy-btn.customise-btn:hover {
    background: var(--sf-accent-sft);
    box-shadow: 0 6px 16px rgba(139, 0, 0, .14);
}

.buy-btn.is-soldout,
.buy-btn.is-soldout:hover {
    background: #e8e0d5;
    color: #5b4e42;
    box-shadow: none;
    cursor: not-allowed;
}

/* ---- on-card stepper ---- */
.card-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--sf-accent);
    border-radius: 12px;
    padding: 0 4px;
    min-height: 42px;
    overflow: hidden;
    animation: sf-pop .22s var(--sf-ease);
}
@keyframes sf-pop {
    from { transform: scale(.94); }
    to   { transform: scale(1); }
}
.card-step-btn {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    min-width: 40px;
    min-height: 42px;
    padding: 0;
    border-radius: 10px;
    transition: background .15s var(--sf-ease);
}
.card-step-btn:hover:not([disabled]) { background: rgba(255, 255, 255, .16); }
.card-step-btn[disabled] { opacity: .38; cursor: not-allowed; }
.card-step-qty {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 1;
    text-align: center;
}

/* ===========================================================================
   SKELETONS
   ---------------------------------------------------------------------------
   Shown while the catalogue is in flight. A shopper on a slow connection sees
   the shape of the shop arriving rather than a blank cream page they might
   read as broken.
   =========================================================================== */
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.sk-card {
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    overflow: hidden;
    background: var(--sf-card);
}
.sk-media { width: 100%; aspect-ratio: 1 / 1; }
.sk-body  { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.sk-line  { height: 11px; border-radius: 6px; }
.sk-line.w70 { width: 70%; }
.sk-line.w40 { width: 40%; }
.sk-btn   { height: 42px; border-radius: 12px; margin-top: 4px; }

.sk-media, .sk-line, .sk-btn {
    background: linear-gradient(100deg, #f2ece3 30%, #faf6f0 50%, #f2ece3 70%);
    background-size: 220% 100%;
    animation: sf-shimmer 1.25s ease-in-out infinite;
}
@keyframes sf-shimmer {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}

.sk-heading {
    height: 26px; width: 190px; border-radius: 8px; margin-bottom: 18px;
    background: linear-gradient(100deg, #f2ece3 30%, #faf6f0 50%, #f2ece3 70%);
    background-size: 220% 100%;
    animation: sf-shimmer 1.25s ease-in-out infinite;
}

/* ===========================================================================
   NO RESULTS
   =========================================================================== */
.no-results {
    text-align: center;
    padding: 54px 20px;
    background: var(--sf-card);
    border: 1px dashed var(--sf-line);
    border-radius: var(--sf-r-lg);
    animation: sf-rise .4s var(--sf-ease) both;
}
.no-results-icon { font-size: 44px; margin-bottom: 10px; }
.no-results h4 { font-family: var(--title-font); font-size: 1.25rem; color: var(--sf-ink); margin-bottom: 6px; }
.no-results p  { color: var(--sf-muted); font-size: 14px; margin-bottom: 18px; }
.no-results .buy-btn { width: auto; display: inline-flex; padding: 11px 26px; }

/* ===========================================================================
   FLOATING CART
   =========================================================================== */
.cart-floater {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 900;
    width: 58px; height: 58px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sf-accent);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(139, 0, 0, .34);
    transition: transform .18s var(--sf-ease), box-shadow .18s var(--sf-ease);
}
.cart-floater:hover { transform: scale(1.07); box-shadow: 0 12px 30px rgba(139, 0, 0, .42); }
.cart-floater:active { transform: scale(.95); }

/* Fired by app.js whenever the basket count changes, so the button visibly
   acknowledges a tap that happened somewhere else on the page. */
.cart-floater.is-bumped { animation: sf-bump .45s var(--sf-ease); }
@keyframes sf-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22); }
    60%  { transform: scale(.94); }
    100% { transform: scale(1); }
}

.cart-count-pill {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sf-gold);
    color: #3a2a10;
    font-size: 12px;
    font-weight: 800;
    display: grid; place-items: center;
    border: 2px solid var(--bg-cream);
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 900px) {
    /* 200px keeps a tablet at three comfortable columns. The old 165px gave
       four cramped ones at 174px, narrower than the phone layout. */
    .product-grid, .sk-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}

@media (max-width: 560px) {
    /* Exactly two per row on a phone. auto-fill would drop to one card at this
       width, and one enormous card per screen is what the old build did. */
    .product-grid, .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .item-card { border-radius: var(--sf-r); }
    .item-info { padding: 11px 11px 12px; gap: 5px; }
    .item-name { font-size: 13px; min-height: 2.6em; }
    .price     { font-size: 15px; }
    .stock-line { font-size: 11px; }

    /* 44px, not 40 or 36. That is the documented minimum touch target in both
       Apple's and Google's guidance, and a stepper is the control people tap
       most often and fastest — the one place shaving pixels actually costs
       taps. The card is ~174px wide here, so two 44px buttons and the number
       fit comfortably. */
    .buy-btn, .card-stepper { min-height: 44px; font-size: 12.5px; border-radius: 10px; }
    .card-step-btn { min-width: 44px; min-height: 44px; font-size: 1.05rem; }

    .badge { font-size: 9px; padding: 4px 7px; top: auto; bottom: 8px; left: 8px; }
    .weight-tag { font-size: 11px; padding: 4px 10px; }

    .shop-bar { padding: 10px 0 8px; margin-bottom: 16px; }
    .search-field { min-height: 48px; padding: 0 13px; }
    .search-field input { font-size: 14px; padding: 12px 0; min-height: 44px; }

    hr.divider { margin: 26px 0 22px; }

    .cart-floater { width: 54px; height: 54px; right: 14px; bottom: 14px; font-size: 20px; }
}

/* ===========================================================================
   MOTION
   ---------------------------------------------------------------------------
   Everything above is decoration. Anyone who has asked their system to stop
   moving things gets the same shop, still.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .item-card, .no-results, .card-stepper { animation: none; }
    .item-card:hover { transform: none; }
    .item-card:hover .image-container img { transform: none; }
    .sk-media, .sk-line, .sk-btn, .sk-heading, .stock-line.is-low::before,
    .cart-floater.is-bumped { animation: none; }
    * { transition-duration: .01ms !important; }
}

/* ===========================================================================
   SITE HEADER + NOTICE BAR
   ---------------------------------------------------------------------------
   Global chrome rather than the products grid, but it is the first thing on
   the products screen and it was visibly broken on a phone: the shop's name
   ran off the right edge of a 390px screen, because pages.css grew the logo to
   60px BELOW 768px — larger than the 50px it uses on a desktop — while the
   title kept a fixed 1.3rem next to a fixed-width menu button.
   =========================================================================== */
.header-content { gap: 10px; }

.logo-title-group {
    min-width: 0;          /* lets the flex item shrink instead of overflowing */
    gap: 10px;
    text-decoration: none;
}

.main-title {
    font-size: clamp(1.05rem, 3.4vw, 1.8rem);
    letter-spacing: .01em;
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* Overrides pages.css, which sets 60px here — bigger on a phone than on a
       desktop, and the direct cause of the clipped title. */
    .logo-container img { width: 42px; height: 42px; margin-right: 0; }
}
@media (max-width: 380px) {
    .logo-container img { width: 36px; height: 36px; }
}

/* ---- the scrolling notice ---- */
.delivery-notice {
    overflow: hidden;
    white-space: nowrap;
    /* The track is twice the text width; masking the ends stops the loop point
       appearing as a hard edge mid-sentence. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.notice-track {
    display: inline-flex;
    gap: 60px;
    padding-left: 60px;
    animation: sf-marquee 26s linear infinite;
    will-change: transform;
}
.notice-track .notice-text { flex: 0 0 auto; }

/* Stopping on hover is the thing <marquee> could never do: a shopper who
   wants to finish reading a sentence can. */
.delivery-notice:hover .notice-track { animation-play-state: paused; }

@keyframes sf-marquee {
    from { transform: translateX(0); }
    /* -50% is exactly one copy of the duplicated text, so the loop is seamless. */
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .notice-track {
        animation: none;
        /* Static, and centred rather than left-parked mid-scroll. */
        justify-content: center;
        width: 100%;
        padding-left: 0;
    }
    .notice-track .notice-text:last-child { display: none; }
    .delivery-notice { white-space: normal; text-align: center; }
}

/* ===========================================================================
   CHECKOUT — carried over from the storefront palette
   ---------------------------------------------------------------------------
   Place order was still WhatsApp green, left over from when checkout handed
   off to wa.me. With the products page now in the shop's own maroon, a green
   final button looked like it belonged to a different site.

   It stays the heaviest button on the page — taller, with a stronger shadow —
   because it IS the most important action. It just wears the brand while doing
   it. Green is kept for confirmation only: the "Added" flash on a size.
   =========================================================================== */
.checkout-btn {
    background: var(--sf-accent);
    border: none;
    border-radius: 14px;
    min-height: 52px;
    font-size: 15px;
    font-weight: 650;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(139, 0, 0, .24);
    transition: background .18s var(--sf-ease), transform .12s var(--sf-ease),
                box-shadow .18s var(--sf-ease);
}
.checkout-btn:hover:not(:disabled) {
    background: var(--sf-accent-dk);
    box-shadow: 0 10px 26px rgba(139, 0, 0, .32);
}
.checkout-btn:active:not(:disabled) { transform: scale(.985); }
.checkout-btn:focus-visible { outline: 3px solid var(--sf-gold); outline-offset: 2px; }

.coupon-apply {
    background: var(--sf-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background .18s var(--sf-ease);
}
.coupon-apply:hover:not(:disabled) { background: var(--sf-accent-dk); }
.coupon-apply:disabled { background: #e8e0d5; color: #5b4e42; cursor: not-allowed; }

/* The one place green still belongs: a size that was just added. */
.variant-add-btn.is-added {
    background: var(--sf-ok);
    border-color: var(--sf-ok);
    color: #fff;
}

/* ###########################################################################
   #                                                                         #
   #   SITE-WIDE DESIGN SYSTEM                                               #
   #   Everything below applies to every screen, not just the shop.          #
   #                                                                         #
   ########################################################################### */

/* ===========================================================================
   1. BUTTONS — one family, used everywhere
   ---------------------------------------------------------------------------
   The site had five different button treatments across five screens: green
   pills on the shop, maroon pills on auth, a grey "Apply", a ghost on the
   account page. One family, three weights, so a shopper learns what a button
   looks like once.
   =========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 22px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font-family: var(--body-font);
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s var(--sf-ease), color .18s var(--sf-ease),
                border-color .18s var(--sf-ease), box-shadow .18s var(--sf-ease),
                transform .12s var(--sf-ease);
}
.btn:active { transform: scale(.975); }
.btn:focus-visible { outline: 3px solid var(--sf-gold); outline-offset: 2px; }
.btn:disabled { cursor: not-allowed; }

.btn-primary { background: var(--sf-accent); color: #fff; }
.btn-primary:hover:not(:disabled) {
    background: var(--sf-accent-dk);
    box-shadow: 0 8px 20px rgba(139, 0, 0, .26);
}
.btn-primary:disabled { background: #e8e0d5; color: #5b4e42; box-shadow: none; }
.btn-primary.is-added { background: var(--sf-ok); }

.btn-ghost {
    background: transparent;
    color: var(--sf-accent);
    border-color: var(--sf-line);
}
.btn-ghost:hover:not(:disabled) { background: var(--sf-accent-sft); border-color: var(--sf-accent); }

.btn-muted { background: #e8e0d5; color: #5b4e42; }

.btn-sm { min-height: 38px; padding: 9px 16px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }

/* The old names, mapped onto the new family so every screen inherits the
   change without 200 lines of template edits. */
.auth-submit {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: var(--sf-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(139, 0, 0, .2);
    transition: background .18s var(--sf-ease), box-shadow .18s var(--sf-ease),
                transform .12s var(--sf-ease);
}
.auth-submit:hover:not(:disabled) { background: var(--sf-accent-dk); box-shadow: 0 10px 24px rgba(139,0,0,.28); }
.auth-submit:active:not(:disabled) { transform: scale(.985); }
/* #e8e0d5 / #5b4e42 is 6.14:1. The previous #cfc4b6 with white text measured
   1.70:1 — a button-shaped slab with an invisible label, and it was the
   RESTING state of the coupon Apply button. */
.auth-submit:disabled { background: #e8e0d5; color: #5b4e42; box-shadow: none; cursor: not-allowed; }

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--sf-accent);
    font-weight: 650;
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn-link:hover { color: var(--sf-accent-dk); }

/* ===========================================================================
   2. FORM FIELDS — one input, everywhere
   =========================================================================== */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-full { grid-column: 1 / -1; }

.field label,
.field > span:first-child {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--sf-body);
    letter-spacing: .01em;
}
.field .optional { color: var(--sf-muted); font-weight: 500; }
.field .req { color: var(--sf-accent); }

.field input,
.field select,
.field textarea,
.cart-input {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1.5px solid var(--sf-line);
    border-radius: 11px;
    background: var(--sf-card);
    font-family: var(--body-font);
    font-size: 14.5px;
    color: var(--sf-ink);
    transition: border-color .16s var(--sf-ease), box-shadow .16s var(--sf-ease);
}
.field textarea, textarea.cart-input { min-height: 96px; resize: vertical; line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus,
.cart-input:focus {
    outline: none;
    border-color: var(--sf-gold);
    box-shadow: 0 0 0 4px var(--sf-gold-sft);
}
.field input::placeholder,
.field textarea::placeholder,
.cart-input::placeholder { color: #a2937f; }

.field input.error, .field textarea.error, .field select.error { border-color: var(--sf-warn); }
.field .error { color: var(--sf-warn); font-size: 12px; font-weight: 600; }
.field-hint { font-size: 12px; color: var(--sf-muted); }

.field-group-title {
    grid-column: 1 / -1;
    font-family: var(--title-font);
    font-size: 1.05rem;
    color: var(--sf-ink);
    margin: 10px 0 -4px;
}

.form-alert {
    display: flex;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
    background: #fdf2f0;
    border: 1px solid #f3c9c2;
    color: #8a1c14;
    margin-bottom: 16px;
    animation: sf-rise .28s var(--sf-ease);
}
.form-alert.success { background: #eefaf1; border-color: #bfe4c9; color: #1a6b34; }

/* ===========================================================================
   3. HERO + TRUST STRIP
   =========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--sf-r-lg);
    padding: 40px 38px;
    margin-bottom: 16px;
    background:
        radial-gradient(120% 140% at 88% 10%, rgba(197,160,89,.20), transparent 55%),
        linear-gradient(135deg, #fffdf8, #f8efe0);
    border: 1px solid #efe3cf;
}
/* A faint spice-tin pattern rather than a stock photograph — it never
   competes with the product images below it, and it costs nothing to load. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(139,0,0,.055) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
}
.hero-text { position: relative; z-index: 1; max-width: 620px; }

.hero-eyebrow {
    display: inline-block;
    background: rgba(139, 0, 0, .07);
    color: var(--sf-accent);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hero h2 {
    font-family: var(--title-font);
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
    line-height: 1.12;
    color: var(--sf-ink);
    letter-spacing: -.015em;
    margin-bottom: 12px;
}
.hero p { color: var(--sf-body); font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .btn-ghost { background: rgba(255,255,255,.7); }

.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}
.trust-strip li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r);
    padding: 13px 15px;
}
.trust-ico { font-size: 17px; margin-bottom: 3px; }
.trust-strip strong { font-size: 13px; font-weight: 650; color: var(--sf-ink); }
.trust-strip small  { font-size: 11.5px; color: var(--sf-muted); }

/* ===========================================================================
   4. FOOTER
   =========================================================================== */
.site-footer {
    margin-top: 64px;
    background: #2a1c14;
    color: #d9cbbc;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 46px 20px 34px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 32px;
}
.footer-brand strong {
    display: block;
    font-family: var(--title-font);
    font-size: 1.2rem;
    color: #fff;
    margin: 10px 0 8px;
}
.footer-brand p { font-size: 13px; line-height: 1.7; color: #b8a898; max-width: 34ch; }
.footer-logo { width: 46px; height: 46px; border-radius: 50%; }

.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h5 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sf-gold);
    margin-bottom: 4px;
}
.footer-col a {
    color: #d9cbbc;
    text-decoration: none;
    font-size: 13.5px;
    width: fit-content;
    transition: color .15s var(--sf-ease);
}
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-hours { font-size: 12.5px; color: #9c8b7b; line-height: 1.6; }

.footer-base {
    border-top: 1px solid rgba(255,255,255,.09);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 12.5px;
    color: #9c8b7b;
}
.footer-tag { font-style: italic; }

@media (max-width: 900px) {
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 26px; padding: 34px 18px 26px; }
}
@media (max-width: 560px) {
    .hero { padding: 26px 20px; border-radius: var(--sf-r); }
    .hero p { font-size: 14px; margin-bottom: 18px; }
    .hero-actions .btn { flex: 1 1 100%; }
    .trust-strip { gap: 8px; margin-bottom: 20px; }
    .trust-strip li { padding: 10px 12px; }
    .footer-inner { grid-template-columns: 1fr; }
    .footer-base { justify-content: center; text-align: center; }
}

/* ===========================================================================
   5. THE PRODUCT SHEET
   ---------------------------------------------------------------------------
   Rebuilt around the job it does: choosing a size. The sizes are the main
   event, the description supports them, and the way out is pinned so a
   shopper on a phone never has to scroll back up hunting for the × .
   =========================================================================== */
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(42, 28, 20, .55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s var(--sf-ease), visibility .24s var(--sf-ease);
}
.sheet-overlay.show { opacity: 1; visibility: visible; }

.sheet {
    /* The close button is absolutely positioned against this. Without it the
       × escaped to the top-right of the VIEWPORT, nowhere near the dialog. */
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: min(92vh, 900px);
    background: var(--sf-card);
    border-radius: var(--sf-r-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(42, 28, 20, .34);
    transform: translateY(18px) scale(.98);
    transition: transform .26s var(--sf-ease);
}
.sheet-overlay.show .sheet { transform: none; }

.sheet-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 3;
    width: 38px; height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--sf-ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
    transition: transform .16s var(--sf-ease), background .16s var(--sf-ease);
}
.sheet-close:hover { transform: rotate(90deg); background: #fff; }

/* The scrolling region, so the footer can stay pinned below it.
   `flex: 1` and `min-height: 0` are both required: without them this box sizes
   to its content, grows past the sheet's max-height, and the pinned footer
   covers the last size in the list instead of sitting under it. */
.sheet-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.sheet-media {
    position: relative;
    /* 16/9, not 16/11. The taller crop ate 47% of the sheet and pushed the
       last size row under the pinned footer, where it was sliced through the
       middle — on the most expensive variant. */
    aspect-ratio: 16 / 9;
    background: linear-gradient(160deg, #f7f2ea, #efe7db);
}
.sheet-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-flag {
    position: absolute;
    inset: 0;
    display: grid; place-items: center;
    background: rgba(42, 28, 20, .55);
    color: #fff;
    font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}

.sheet-body { padding: 22px 24px 26px; }

.sheet-head { margin-bottom: 18px; }
.sheet-head h3 {
    font-family: var(--title-font);
    font-size: 1.55rem;
    line-height: 1.15;
    color: var(--sf-ink);
    margin-bottom: 6px;
}
.sheet-price { font-size: 1.15rem; font-weight: 700; color: var(--sf-accent); }
.sheet-sizes-count { font-size: 12.5px; color: var(--sf-muted); margin-top: 4px; }

.sheet-section { margin-bottom: 20px; }
.sheet-section h4 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin-bottom: 9px;
}
.sheet-section p { font-size: 14px; line-height: 1.7; color: var(--sf-body); }
.sheet-ingredients {
    background: var(--sf-gold-sft);
    border: 1px solid #efe0c2;
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13.5px !important;
}
.sheet-empty {
    font-size: 13.5px;
    color: var(--sf-muted);
    font-style: italic;
    padding: 14px 0 4px;
}

/* ---- the size list ---- */
.sheet-sizes { margin-bottom: 4px; }

.size-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border: 1.5px solid var(--sf-line);
    border-radius: 13px;
    margin-bottom: 9px;
    transition: border-color .18s var(--sf-ease), background .18s var(--sf-ease);
}
.size-row:hover { border-color: #e0d0b8; }
/* A size already in the basket is stated, not just implied by the stepper. */
.size-row.is-in-cart { border-color: var(--sf-accent); background: var(--sf-accent-sft); }
.size-row.is-out { opacity: .6; background: var(--sf-line-soft); }

.size-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.size-name { font-size: 14.5px; font-weight: 650; color: var(--sf-ink); }
.size-note { font-size: 11.5px; font-weight: 600; color: var(--sf-muted); }
.size-note.is-low { color: var(--sf-warn); }
.size-note.is-out { color: var(--sf-warn); }
.size-price { font-size: 15px; font-weight: 700; color: var(--sf-ink); font-variant-numeric: tabular-nums; }
.size-action { display: flex; justify-content: flex-end; min-width: 108px; }

/* A fade so content scrolling under the footer reads as "there is more",
   rather than as a row chopped in half. */
.sheet-foot::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 20px;
    background: linear-gradient(rgba(255,255,255,0), var(--sf-card));
    pointer-events: none;
}

.sheet-foot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--sf-line);
    background: var(--sf-card);
}
.sheet-foot-sum { display: flex; flex-direction: column; margin-right: auto; }
.sheet-foot-sum strong { font-size: 13px; color: var(--sf-ink); }
.sheet-foot-sum span   { font-size: 12.5px; color: var(--sf-muted); }
.sheet-foot .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
    /* On a phone it becomes a bottom sheet — the shape a phone user expects,
       and it puts the sizes and the footer within thumb reach. */
    .sheet-overlay { padding: 0; place-items: end stretch; }
    .sheet {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--sf-r-lg) var(--sf-r-lg) 0 0;
        transform: translateY(100%);
    }
    .sheet-overlay.show .sheet { transform: none; }
    .sheet-media { aspect-ratio: 16 / 9; }
    .sheet-body { padding: 18px 16px 22px; }
    .sheet-head h3 { font-size: 1.3rem; }
    .sheet-foot { padding: 12px 14px; }
    .sheet-foot .btn { flex: 1 1 auto; padding: 12px 14px; }
    .sheet-foot-sum { flex: 1 1 100%; margin-bottom: 2px; }
}

/* ===========================================================================
   6. AUTH — sign in, register
   =========================================================================== */
.auth-page {
    /* flex, NOT grid. `place-items: center` on a grid auto-sizes the column to
       its content, which makes `width: min(720px, 100%)` on the card a cyclic
       percentage — it silently falls back to max-content, and .auth-card-wide
       rendered at exactly the same 449px as the narrow sign-in card. */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 26px 0 50px;
}
.auth-card {
    width: min(440px, 100%);
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    padding: 34px 32px;
    box-shadow: var(--sf-shadow);
    animation: sf-rise .38s var(--sf-ease) both;
}
.auth-card-wide { width: min(720px, 100%); }

.auth-head { text-align: center; margin-bottom: 24px; }
.auth-head h2 {
    font-family: var(--title-font);
    font-size: 1.7rem;
    color: var(--sf-ink);
    margin-bottom: 7px;
}
.auth-head p, .auth-head .muted { font-size: 13.5px; color: var(--sf-muted); line-height: 1.6; }

.auth-card .field-grid { margin-bottom: 20px; }
.auth-switch {
    margin-top: 18px;
    text-align: center;
    font-size: 13.5px;
    color: var(--sf-body);
    line-height: 2;
}
.auth-switch a { color: var(--sf-accent); font-weight: 650; text-underline-offset: 3px; }

@media (max-width: 560px) {
    .auth-card { padding: 26px 20px; border-radius: var(--sf-r); }
    .auth-card .field-grid { grid-template-columns: 1fr; gap: 14px; }
    .auth-head h2 { font-size: 1.45rem; }
}

/* ===========================================================================
   7. ACCOUNT
   =========================================================================== */
.account-page { padding-bottom: 40px; }

.account-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #fffdf8, #f8efe0);
    border: 1px solid #efe3cf;
    border-radius: var(--sf-r-lg);
    padding: 24px 26px;
    margin-bottom: 22px;
}
.account-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sf-accent);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    flex: 0 0 auto;
}
.account-hero-text { min-width: 0; }
.account-hero-text h2 {
    font-family: var(--title-font);
    font-size: 1.5rem;
    color: var(--sf-ink);
    margin-bottom: 3px;
}
.account-hero-text p, .account-hero-text .muted { font-size: 13.5px; color: var(--sf-muted); }

.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.account-card-full { grid-column: 1 / -1; }

.account-card {
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    padding: 22px 24px;
    box-shadow: var(--sf-shadow);
}
.account-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.account-card-head h3 {
    font-family: var(--title-font);
    font-size: 1.15rem;
    color: var(--sf-ink);
}

.detail-list { display: flex; flex-direction: column; }
.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--sf-line-soft);
    font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row > span:first-child { color: var(--sf-muted); flex: 0 0 auto; }
.detail-row > :last-child { color: var(--sf-ink); font-weight: 600; text-align: right; }

.address-block { font-size: 14px; line-height: 1.75; color: var(--sf-ink); }
.account-note { font-size: 13px; color: var(--sf-muted); line-height: 1.6; }
.edit-actions { display: flex; gap: 10px; margin-top: 18px; }
.account-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.account-signout { margin-top: 22px; text-align: center; }

@media (max-width: 760px) {
    .account-grid { grid-template-columns: 1fr; }
    .account-hero { padding: 18px; gap: 14px; }
    .account-avatar { width: 50px; height: 50px; font-size: 20px; }
    .account-card { padding: 18px 16px; }
}

/* ===========================================================================
   8. ORDERS — list, confirmation, tracking, timeline
   =========================================================================== */
.order-page { padding-bottom: 40px; }
.order-page-head { margin-bottom: 22px; }
.order-page-head h2 {
    font-family: var(--title-font);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    color: var(--sf-ink);
    margin-bottom: 5px;
}
.order-page-head p, .order-page-head .muted { font-size: 13.5px; color: var(--sf-muted); }

.order-card {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    padding: 18px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    box-shadow: var(--sf-shadow);
    transition: transform .18s var(--sf-ease), box-shadow .18s var(--sf-ease),
                border-color .18s var(--sf-ease);
    animation: sf-rise .4s var(--sf-ease) both;
}
.order-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow-up);
    border-color: #e2d3bf;
}
.order-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.order-card-number { font-size: 14.5px; font-weight: 700; color: var(--sf-ink); font-variant-numeric: tabular-nums; }
.order-card-date   { font-size: 12.5px; color: var(--sf-muted); }
.order-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--sf-line-soft);
    font-size: 14px;
    color: var(--sf-body);
}

/* ---- status pills: one colour language across the shop and the panel ---- */
.order-status, .order-status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
    background: var(--sf-line-soft);
    color: var(--sf-body);
}
.order-status::before, .order-status-label::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.status-placed           { background: #fff5e2; color: #8a5b00; }
.status-confirmed        { background: #e9f2ff; color: #1c4d8f; }
.status-packed           { background: #f0ecfd; color: #4b3a9c; }
.status-shipped          { background: #e6f6fb; color: #12657f; }
.status-out_for_delivery { background: #fdf0e6; color: #9a4a10; }
.status-delivered        { background: #e9f8ee; color: #1a6b34; }
.status-cancelled        { background: #fdecea; color: #8a1c14; }

/* ---- order placed ---- */
.order-confirm {
    text-align: center;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    padding: 44px 30px 34px;
    box-shadow: var(--sf-shadow);
    animation: sf-rise .45s var(--sf-ease) both;
}
.order-confirm-icon {
    width: 76px; height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #e9f8ee;
    color: var(--sf-ok);
    font-size: 36px;
    animation: sf-tick .55s var(--sf-ease) both .1s;
}
@keyframes sf-tick {
    0%   { transform: scale(.4); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}
.order-confirm h2 {
    font-family: var(--title-font);
    font-size: 1.7rem;
    color: var(--sf-ink);
    margin-bottom: 8px;
}
.order-confirm p { color: var(--sf-body); font-size: 14.5px; line-height: 1.7; }

.order-number-chip {
    display: inline-block;
    margin: 16px 0 6px;
    background: var(--sf-gold-sft);
    border: 1px dashed #e0c88f;
    border-radius: 11px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 700;
    color: #74591f;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.order-keep-note { margin-top: 16px; font-size: 13px; color: var(--sf-muted); }

/* ---- tracking banner ---- */
.order-status-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fffdf8, #f8efe0);
    border: 1px solid #efe3cf;
    border-radius: var(--sf-r-lg);
    padding: 20px 22px;
    margin-bottom: 20px;
}

/* ---- the timeline ---- */
.track-steps { position: relative; padding: 6px 0 0 6px; }
.track-step {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 22px;
}
/* The connecting rail, drawn behind the dots and stopped at the last one. */
.track-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12px; top: 22px; bottom: 0;
    width: 2px;
    background: var(--sf-line);
}
.track-step.is-done:not(:last-child)::before { background: #cfe6d6; }

.track-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sf-card);
    border: 2px solid var(--sf-line);
    color: transparent;
    font-size: 12px;
    z-index: 1;
}
.track-step.is-done .track-dot {
    background: var(--sf-ok);
    border-color: var(--sf-ok);
    color: #fff;
}
.track-step.is-done .track-dot::after { content: "✓"; }
.track-step.is-current .track-dot {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 5px rgba(139, 0, 0, .13);
    animation: sf-ping 2s ease-in-out infinite;
}
@keyframes sf-ping {
    0%, 100% { box-shadow: 0 0 0 5px rgba(139, 0, 0, .13); }
    50%      { box-shadow: 0 0 0 9px rgba(139, 0, 0, .05); }
}

.track-body { padding-top: 2px; min-width: 0; }
.track-label { font-size: 14.5px; font-weight: 650; color: var(--sf-ink); }
.track-step.is-done .track-label { color: var(--sf-body); }
.track-when  { font-size: 12.5px; color: var(--sf-muted); margin-top: 2px; }
.track-note  { font-size: 13px; color: var(--sf-body); margin-top: 5px; line-height: 1.6; }
.track-hint  { font-size: 13px; color: var(--sf-muted); margin-top: 4px; }
.track-cancelled .track-dot { background: var(--sf-warn); border-color: var(--sf-warn); }
.track-cancelled .track-dot::after { content: "×"; }

/* ---- the shared order summary block ---- */
.order-lines { display: flex; flex-direction: column; }
.order-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--sf-line-soft);
    font-size: 14px;
}
.order-line:last-child { border-bottom: none; }
.order-line-name  { color: var(--sf-ink); font-weight: 600; }
.order-line-qty   { color: var(--sf-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.order-line-total { font-weight: 700; color: var(--sf-ink); font-variant-numeric: tabular-nums; }

.order-totals { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sf-line); }
.order-total-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--sf-body);
}
.order-total-row.discount { color: var(--sf-ok); }
.order-total-row .free    { color: var(--sf-ok); font-weight: 650; }
.order-total-row .pending { color: #9a4a10; font-weight: 650; }
.order-total-row.grand {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--sf-line);
    font-size: 17px;
    font-weight: 700;
    color: var(--sf-ink);
}
.delivery-note {
    margin-top: 12px;
    background: var(--sf-gold-sft);
    border: 1px solid #efe0c2;
    border-radius: 11px;
    padding: 11px 13px;
    font-size: 12.5px;
    line-height: 1.65;
    color: #74591f;
}
.order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.order-meta-full { grid-column: 1 / -1; }

@media (max-width: 560px) {
    .order-card { padding: 15px 16px; }
    .order-card-top { flex-wrap: wrap; gap: 8px; }
    .order-meta { grid-template-columns: 1fr; }
    .order-confirm { padding: 32px 18px 26px; }
    .order-actions .btn { flex: 1 1 100%; }
}

/* ===========================================================================
   9. CHECKOUT
   =========================================================================== */
.checkout-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: var(--sf-card);
    border-bottom: 1px solid var(--sf-line);
    position: sticky;
    top: 0;
    z-index: 5;
}
.checkout-bar h4 { font-family: var(--title-font); font-size: 1.2rem; color: var(--sf-ink); }
.checkout-count { margin-left: auto; font-size: 13px; color: var(--sf-muted); font-weight: 600; }

.checkout-back {
    width: 38px; height: 38px;
    border: 1px solid var(--sf-line);
    border-radius: 50%;
    background: var(--sf-card);
    color: var(--sf-ink);
    font-size: 17px;
    cursor: pointer;
    transition: background .16s var(--sf-ease), transform .16s var(--sf-ease);
}
.checkout-back:hover { background: var(--sf-line-soft); transform: translateX(-2px); }

.checkout-card {
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: var(--sf-shadow);
}
.checkout-card h5 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin-bottom: 14px;
}
.checkout-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkout-card-head h5 { margin-bottom: 0; }

/* ---- basket lines ---- */
.cart-panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--sf-line-soft);
    background: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
.cart-panel-item:last-of-type { border-bottom: none; }
.cart-panel-item.is-unavailable {
    background: #fff8f7;
    border: 1px solid #f3c2be;
    border-radius: 12px;
    padding: 12px;
    margin: 8px 0;
}
.item-details { display: flex; flex-direction: column; gap: 3px; max-width: 58%; }
.item-details .item-name { font-size: 14.5px; font-weight: 650; color: var(--sf-ink); min-height: 0; }
.item-meta { font-size: 12.5px; color: var(--sf-muted); }
/* `flex-direction` MUST be named here. pages.css sets `column` on this
   selector, and an override that only redeclares display/align-items leaves
   that untouched — which stacked the stepper above the line total and made
   every basket row twice as tall as it needed to be. */
.item-actions { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.item-total-price { font-size: 15px; font-weight: 700; color: var(--sf-ink); font-variant-numeric: tabular-nums; }

.qty-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--sf-line);
    border-radius: 11px;
    overflow: hidden;
}
.qty-btn {
    width: 38px; height: 38px;
    border: none;
    background: var(--sf-card);
    color: var(--sf-ink);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s var(--sf-ease);
}
.qty-btn:hover:not([disabled]) { background: var(--sf-accent-sft); color: var(--sf-accent); }
.qty-btn[disabled] { opacity: .35; cursor: not-allowed; }
.qty-val { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.empty-cart-state { text-align: center; padding: 34px 10px; }
.empty-cart-state .empty-icon { font-size: 42px; margin-bottom: 10px; }
.empty-cart-state p { color: var(--sf-muted); font-size: 14.5px; margin-bottom: 18px; }
.empty-cart-state .buy-btn { width: auto; display: inline-flex; padding: 12px 26px; }

/* ---- coupons ---- */
.coupon-entry { display: flex; gap: 9px; }
.coupon-input { flex: 1; text-transform: uppercase; letter-spacing: .06em; }
.coupon-apply { min-width: 96px; min-height: 46px; padding: 0 18px; font-size: 14px; }

.coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #eefaf1;
    border: 1px dashed #9fd4b0;
    border-radius: 12px;
    padding: 13px 15px;
}
.coupon-applied strong { display: block; font-size: 14.5px; color: #1a6b34; letter-spacing: .04em; }
.coupon-applied small  { font-size: 12.5px; color: #3d7a52; }
.coupon-error { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--sf-warn); }

.coupon-offers { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.coupon-offers-title {
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--sf-muted);
}
.coupon-offer {
    /* Same trap as .item-actions — pages.css sets column here too. */
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    width: 100%;
    background: var(--sf-card);
    border: 1px dashed var(--sf-line);
    border-radius: 12px;
    padding: 11px 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color .16s var(--sf-ease), background .16s var(--sf-ease);
}
.coupon-offer:hover { border-color: var(--sf-accent); background: var(--sf-accent-sft); }
.coupon-offer-code {
    font-size: 13px; font-weight: 700; color: var(--sf-accent);
    letter-spacing: .05em; flex: 0 0 auto;
}
.coupon-offer-label { font-size: 12.5px; color: var(--sf-body); }

/* ---- guest / sign-in choice ---- */
.choice-primary, .choice-secondary {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 13px;
    padding: 15px 18px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 650;
    transition: transform .14s var(--sf-ease), box-shadow .16s var(--sf-ease);
}
.choice-primary { background: var(--sf-accent); border: none; color: #fff; }
.choice-primary:hover { box-shadow: 0 8px 20px rgba(139,0,0,.26); transform: translateY(-1px); }
.choice-secondary { background: var(--sf-card); border: 1.5px solid var(--sf-line); color: var(--sf-ink); }
.choice-secondary:hover { border-color: var(--sf-accent); transform: translateY(-1px); }
.choice-primary small, .choice-secondary small {
    display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; opacity: .85;
}
.choice-footnote { text-align: center; font-size: 13px; color: var(--sf-muted); margin-top: 4px; }
.choice-footnote a { color: var(--sf-accent); font-weight: 650; }

/* ---- address ---- */
.address-summary { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--sf-body); }
.address-summary strong { font-size: 15px; color: var(--sf-ink); }
.address-line { line-height: 1.6; }
.address-note { font-size: 12.5px; color: var(--sf-muted); font-style: italic; }
.address-fields { display: flex; flex-direction: column; gap: 12px; }
.guest-note { font-size: 13px; color: var(--sf-muted); }
.guest-note a { color: var(--sf-accent); font-weight: 650; }

.pincode-prompt { border-top: 1px dashed var(--sf-line); }
.pincode-prompt label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--sf-muted);
}

/* ---- the bill ---- */
.checkout-card.bill { position: sticky; top: 88px; }
.bill-row {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 8px 0; font-size: 14px; color: var(--sf-body);
}
.bill-row .pending { color: #9a4a10; font-weight: 650; }
.bill-row.discount { color: var(--sf-ok); font-weight: 600; }
.bill-row.grand {
    margin-top: 8px; padding-top: 13px;
    border-top: 1px solid var(--sf-line);
    font-size: 17px; font-weight: 700; color: var(--sf-ink);
}
.bill-sub { color: var(--sf-muted); }
.delivery-eta { color: var(--sf-ok); }
.free-delivery-nudge {
    margin-top: 12px;
    background: var(--sf-gold-sft);
    border: 1px solid #efe0c2;
    border-radius: 11px;
    padding: 11px 13px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #74591f;
}
.footer-note { margin-top: 10px; text-align: center; font-size: 11.5px; color: var(--sf-muted); }

/* ===========================================================================
   10. TOAST
   =========================================================================== */
.toast-error {
    position: fixed;
    left: 50%; top: 22px;
    z-index: 2000;
    transform: translate(-50%, -140%);
    background: #2a1c14;
    color: #fff;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 13.5px;
    font-weight: 600;
    max-width: min(460px, calc(100vw - 32px));
    text-align: center;
    box-shadow: 0 12px 34px rgba(42, 28, 20, .34);
    transition: transform .32s var(--sf-ease), opacity .32s var(--sf-ease);
    opacity: 0;
    pointer-events: none;
}
.toast-error.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 900px) {
    .checkout-card.bill { position: static; }
}
@media (max-width: 560px) {
    .checkout-card { padding: 16px; border-radius: var(--sf-r); }
    .checkout-bar { padding: 12px 14px; }
    /* The name, a three-button stepper and the line total do not fit on one
       390px row — the total was being clipped off the right edge. Two rows:
       what it is, then what you can do about it. */
    .cart-panel-item { flex-wrap: wrap; row-gap: 10px; }
    .item-details { max-width: 100%; flex: 1 1 100%; }
    .item-actions { flex: 1 1 100%; justify-content: space-between; gap: 10px; }
    .coupon-entry { flex-direction: column; }
    .coupon-apply { width: 100%; }
}

/* Reduced motion: the new pieces too. */
@media (prefers-reduced-motion: reduce) {
    .order-card, .order-confirm, .order-confirm-icon, .auth-card, .form-alert,
    .track-step.is-current .track-dot { animation: none; }
    .sheet { transition: none; }
}

/* ===========================================================================
   11. NEUTRALISING LEAKED ELEMENT SELECTORS
   ---------------------------------------------------------------------------
   pages.css styles bare `header` and `footer` — sticky, shadowed, z-index 1000
   — because when it was written the only ones on the page were the site's own.
   The product sheet uses <header> and <footer> for its own head and foot, and
   silently inherited all of it: the sheet's title block rendered as a floating
   white bar with a shadow, and its footer picked up the site footer's padding.

   Same class of bug as the `button { width: 100% }` in admin-login.css that
   once stretched the whole account page. Bare element selectors in a global
   stylesheet reach everything that will ever use that element.
   =========================================================================== */
.sheet-head,
.sheet-foot,
.site-footer {
    position: static;
    box-shadow: none;
    z-index: auto;
    text-align: left;
}
.sheet-head { background: none; padding: 0; }

/* pages.css also sets `footer { text-align: center; padding: 30px }`, which
   reached the site's OWN new footer: every column heading centred itself over
   a left-aligned stack of links, so SHOP / YOUR ACCOUNT / TALK TO US floated
   ~70px to the right of the things they label. */
.site-footer { padding: 0; }

/* And pages.css styled .order-confirm as navy-with-white-text. The redesign
   made it a white card but never reset `color`, leaving white-on-white that
   survives only because every child happens to set its own colour. */
.order-confirm { color: var(--sf-body); }
.order-confirm p { opacity: 1; }

/* The /home hero sits alone on its page, so it carries a little more height
   than the one stacked above the shop's product grid. */
.home-hero { padding: 56px 44px; margin-bottom: 22px; }
@media (max-width: 560px) { .home-hero { padding: 30px 20px; } }

/* ===========================================================================
   12. THE REST OF THE LEAKS, AND THE INCONSISTENCIES THEY CAUSED
   ---------------------------------------------------------------------------
   Everything in this section is a rule in pages.css that the redesign either
   half-overrode or never saw. Kept together so the pattern is obvious: when
   you restyle an element that pages.css already knew about, re-read what it
   said about it, not just the property you came to change.
   =========================================================================== */

/* ---- 12a. Partial flex overrides. `flex-direction` must be NAMED. ----------
   Six more of these. pages.css sets `column` (and in one case
   `column-reverse`) on each of these selectors — sometimes only inside a
   768px media query, which is why they looked right on a desktop and wrong on
   a phone. Redeclaring `display: flex` does not reset it. */
.order-status-banner,
.order-card-top,
.detail-row,
.account-cta,
.edit-actions,
.order-actions {
    flex-direction: row;
}
/* The status banner was also centring itself inside a 1170px card — that
   `align-items: center` was written for a row, and got a column. */
.order-status-banner { justify-content: flex-start; text-align: left; }
.order-card-top      { align-items: center; }
.detail-row          { align-items: baseline; }

@media (max-width: 560px) {
    /* These genuinely do want to stack on a phone — but deliberately, and
       still left-aligned rather than centred. */
    .order-card-top { flex-wrap: wrap; align-items: flex-start; }
    .edit-actions   { flex-direction: column-reverse; }
    .edit-actions .btn,
    .account-cta .btn { width: 100%; }
}

/* ---- 12b. The status colour landed on the timestamp, not the status --------
   order-detail.html puts `status-{{ order.status }}` on the banner CONTAINER,
   so every child inherited the status colour — the date went purple while the
   pill itself stayed neutral grey. Exactly inverted. The container keeps body
   colour; the pill inside takes the status colour. */
.order-status-banner { color: var(--sf-body); }
.order-status-banner small { color: var(--sf-muted); }

/* The palette itself was seven saturated hues — amber, blue, PURPLE, cyan,
   orange, green, red — none of which appear anywhere else in a maroon, gold
   and cream design. Warmed and desaturated so a status still reads at a glance
   without looking borrowed from another site. */
.status-placed,           .status-placed .order-status-label           { background: #fdf1dd; color: #7a5312; }
.status-confirmed,        .status-confirmed .order-status-label        { background: #eef1f7; color: #3c4a63; }
.status-packed,           .status-packed .order-status-label           { background: #f3eee7; color: #5c4a3d; }
.status-shipped,          .status-shipped .order-status-label          { background: #e9f2f4; color: #245c66; }
.status-out_for_delivery, .status-out_for_delivery .order-status-label { background: #fdeee2; color: #8a4614; }
.status-delivered,        .status-delivered .order-status-label        { background: #e9f5ec; color: #1f6b38; }
.status-cancelled,        .status-cancelled .order-status-label        { background: #fbeceb; color: #8a1c14; }

/* ---- 12c. The old navy is still painting headings on four screens ----------
   `--navy-blue: #1a2a44` belongs to the palette this design replaced.
   storefront.css never references it; pages.css uses it 43 times, and several
   of those rules had no counterpart here. The result was three heading
   colours on the Contact page alone. */
.account-cta h3,
.contact-card h3,
.contact-text strong,
.order-meta strong,
.order-meta-full strong,
.address-summary strong,
.account-hero-text h2 { color: var(--sf-ink); }

/* Every other page title on the site is ink; this one was the only maroon one. */
.contact-page > h2, .contact-head h2 { color: var(--sf-ink); }

/* ---- 12d. The Track card was the only auth card not centred ---------------
   track.html wraps .auth-card in .order-page (a plain block) rather than
   .auth-page, so it sat hard against the left edge with 870px of cream beside
   it while /signin and /register centred theirs. */
.order-page > .auth-card { margin-left: auto; margin-right: auto; }

/* ---- 12e. Two different steppers for the same control ---------------------
   The card used a maroon pill with 44px buttons; the basket used a cold
   #f1f3f5 box — a blue-grey that appears nowhere else in a warm palette —
   with square 38px buttons. One control, one look. */
.qty-stepper {
    background: var(--sf-card);
    border: 1.5px solid var(--sf-line);
    border-radius: 999px;
    overflow: hidden;
}
.qty-btn {
    width: 44px; height: 44px;
    background: transparent;
    color: var(--sf-accent);
    border-radius: 999px;
}
.qty-btn:hover:not([disabled]) { background: var(--sf-accent-sft); }

/* ---- 12f. Tap targets, and one button that was 42px on a desktop ----------- */
.buy-btn      { min-height: 44px; }
.sheet-close  { width: 44px; height: 44px; }
.checkout-back{ width: 44px; height: 44px; }
.btn-sm       { min-height: 44px; }
/* A text link is still a tap target. 25x20 is not one. */
.btn-link     { min-height: 44px; display: inline-flex; align-items: center; }
.footer-col a { min-height: 34px; display: inline-flex; align-items: center; }
@media (max-width: 560px) { .footer-col a { min-height: 44px; } }

/* ---- 12g. Small text below 4.5:1 ------------------------------------------ */
/* The announcement bar was the last survivor of the OLD palette — #d32f2f on
   #ffecb3 — which both clashed with the maroon used everywhere else and
   measured 4.24:1. One edit fixes the clash and the contrast together. */
.delivery-notice { background: var(--sf-gold-sft); }
.notice-text     { color: var(--sf-accent); }
.contact-text small { color: #6f6053; }
.account-hero-text p, .account-hero-text .muted { color: #6f6053; opacity: 1; }
/* A darker scrim so white text clears 4.5:1 over a pale packet photo. */
.soldout-ribbon, .sheet-flag { background: rgba(42, 28, 20, .72); }

/* ---- 12h. Small things that read as unfinished ---------------------------- */
/* Uppercasing the input also shouted the placeholder. */
.coupon-input { text-transform: uppercase; }
.coupon-input::placeholder { text-transform: none; }

/* A two-word note does not need a 1074px tinted bar. */
.track-note { display: inline-block; background: var(--sf-line-soft);
              border-radius: 8px; padding: 6px 10px; }

/* The confirmation screen mixed two unrelated button families side by side —
   179x72 with a 50px radius next to 180x50 with a 12px radius. */
.order-actions .btn-ghost.dark,
.order-actions .auth-submit.compact {
    min-height: 50px; width: auto; padding: 12px 24px;
    border-radius: 12px; font-size: 14.5px;
}
.order-actions .btn-ghost.dark {
    background: var(--sf-card); color: var(--sf-accent);
    border: 1.5px solid var(--sf-line); box-shadow: none;
}
.order-actions .btn-ghost.dark:hover { background: var(--sf-accent-sft); border-color: var(--sf-accent); }

/* The skeleton was ~47px shorter than a real card, so the grid jumped on load. */
.sk-body { gap: 10px; padding: 14px 14px 15px; }
.sk-line.w70 { height: 13px; }
.sk-card .sk-line:nth-of-type(1) { margin-bottom: 14px; }

/* An empty basket is a whole screen, not a card stranded in the top-left
   third of it with 700px of cream below and 570px beside. */
.checkout-card.is-empty {
    max-width: 460px;
    margin: 6vh auto 0;
    text-align: center;
    border: 1px dashed var(--sf-line);
    box-shadow: none;
}

/* The last of the navy. `.order-line-name span` and `.order-line-total` in
   pages.css carry `--navy-blue`, and the span selector (0,1,1) outranks the
   class alone — so every product name in an order summary stayed navy while
   the heading above it was ink. */
.order-line-name span  { color: var(--sf-ink); }
.order-line-name small { color: var(--sf-muted); }
.order-line-total      { color: var(--sf-ink); }