/* Edara Storefront — shared structural stylesheet for every theme.
 *
 * This file owns LAYOUT: the grid, the forms, the responsive behaviour, the
 * accessibility floor. A theme.css owns IDENTITY: colour, type, density,
 * decoration. The seam between them is the --t-* custom properties below.
 *
 * Why it is split this way: the previous generation had eight standalone
 * stylesheets, and structural fixes (a broken cart trigger, a missing focus
 * ring, an unreadable mobile grid) had to be made eight times and usually
 * were not. Anything a shopper needs in order to *use* the shop belongs here,
 * so it can only be right or wrong once.
 *
 * Adding a theme: set the --t-* values, style the handful of decorative hooks
 * you care about, and stop. If you find yourself re-declaring a grid or a
 * media query, the knob you need is probably missing — add it here instead.
 *
 * Colour tokens (--c-primary/--c-accent/--c-bg/--c-fg/--c-muted/--c-border,
 * --font) come from the inline block in base/layout.html: half are merchant
 * brand colours run through the AA-contrast resolver in color_utils.py, and
 * a theme adjusts them through the {% block c_* %} overrides, not from CSS.
 */

:root {
    /* Shape */
    --t-radius: 10px;
    --t-radius-sm: 6px;
    --t-card-radius: 12px;
    --t-btn-radius: 999px;

    /* Depth */
    --t-shadow: 0 1px 2px rgba(16, 18, 27, 0.04), 0 4px 16px rgba(16, 18, 27, 0.05);
    --t-shadow-hover: 0 2px 4px rgba(16, 18, 27, 0.06), 0 12px 28px rgba(16, 18, 27, 0.10);
    --t-card-border: 1px solid var(--c-border);
    --t-card-bg: #fff;

    /* Rhythm */
    --t-sec-pad: 72px;
    --t-sec-pad-sm: 44px;
    --t-container: 1200px;
    --t-gap: 24px;

    /* Type */
    --t-heading-font: var(--font);
    --t-heading-weight: 650;
    --t-heading-spacing: -0.02em;
    --t-heading-transform: none;
    --t-eyebrow-transform: uppercase;
    --t-eyebrow-spacing: 0.08em;

    /* Type scale — added to replace 17 one-off font-size literals that had
       drifted across 8 near-duplicate values (0.85/0.88/0.9/0.92/0.95/0.98/
       1.02/1.05rem) with no name behind any of them. Each step below is the
       most common value in its cluster; every literal it replaces is within
       3.4% of the step it now uses — a difference no shopper would notice,
       but one fewer magic number for the next person to accidentally
       reinvent a ninth value beside. Headline sizes stay as clamp()s in
       their own rules; they are fluid per-viewport treatments, not steps in
       a discrete scale. */
    --t-fs-xs: 0.85rem;  /* meta/caption text — category-go, stock badge, footer legal */
    --t-fs-sm: 0.9rem;   /* secondary UI text — nav links, buttons, quote attribution */
    --t-fs-md: 0.95rem;  /* tertiary text near body size — footer headings, form labels */
    --t-fs-lg: 1.05rem;  /* emphasized text — brand name, price, pull quotes */

    /* Density — the single biggest lever on how a vertical *feels*.
       A camera shop wants few, large cards; a spare-parts shop wants many. */
    --t-grid-min: 220px;
    --t-media-ratio: 1 / 1;
    --t-media-fit: contain;      /* never crop a product: a jar's lid, a shoe's toe */

    /* Surfaces */
    --t-surface: #f7f7f5;
    --t-header-bg: var(--c-bg);
    --t-header-fg: var(--c-fg);
    --t-header-border: 1px solid var(--c-border);
    --t-hero-bg: linear-gradient(180deg, var(--t-surface) 0%, var(--c-bg) 100%);
    --t-hero-pad: 88px;
    --t-hero-align: start;
    --t-footer-bg: var(--t-surface);
    --t-footer-fg: var(--c-fg);
    --t-footer-muted: var(--c-muted);   /* the address and "Powered by" lines; a dark footer sets its own */

    /* Status: fixed AA pairs on white rather than derived from brand colour,
       so stock and order state stay legible whatever the merchant picks.
       storefront.css reads them too (with the same values as fallbacks). */
    --st-ok-bg: #e7f5ec;   --st-ok-fg: #10603a;
    --st-warn-bg: #fdf1dd; --st-warn-fg: #8a5300;
    --st-err-bg: #fdeaea;  --st-err-fg: #97161b;

    /* Controls */
    --t-btn-weight: 600;
    --t-btn-transform: none;
    --t-btn-pad: 12px 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--c-fg);
    background: var(--c-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.container { max-width: var(--t-container); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 760px; }
.muted { color: var(--c-muted); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-accent); }

/* Arabic pages: a real Arabic face first in every stack. SfArabicBody/Head
   are declared (look.font_css, inline in the layout) only on Arabic pages and
   only for Arabic characters, so Latin text keeps the theme's own font and an
   English page never downloads them. The selectors theme.css files give the
   heading font directly are named here so they get it too. */
html:lang(ar) body { font-family: "SfArabicBody", var(--font); }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(ar) .sec-heading, html:lang(ar) .brand-name,
html:lang(ar) .product-card-title, html:lang(ar) .testimonial blockquote {
    font-family: "SfArabicHead", var(--t-heading-font);
}

h1, h2, h3, .sec-heading {
    font-family: var(--t-heading-font);
    font-weight: var(--t-heading-weight);
    letter-spacing: var(--t-heading-spacing);
    text-transform: var(--t-heading-transform);
    line-height: 1.15;
}

/* Visible focus ring on every interactive element. storefront.css sets a
   global one too; this keeps it correct on themed surfaces. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- header */
.site-header {
    background: var(--t-header-bg);
    color: var(--t-header-fg);
    border-bottom: var(--t-header-border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.header-main {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 16px 24px;
    min-height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The logo keeps its shape (images._fit_within): a wordmark shows at its width. */
.brand-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.brand picture { display: contents; }   /* the WebP twin's wrapper adds no box */
.brand-name { font-weight: 700; font-size: var(--t-fs-lg); letter-spacing: -0.01em; }
.main-nav { display: flex; gap: 24px; flex: 1; flex-wrap: wrap; }
.main-nav a { font-size: var(--t-fs-md); font-weight: 500; }
.cart-btn {
    padding: 9px 16px;
    border: 1px solid currentColor;
    border-radius: var(--t-btn-radius);
    font-size: var(--t-fs-sm);
    font-weight: 600;
    white-space: nowrap;
}
.lang-switch {
    font-size: var(--t-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.75;
    /* The system font: the store's web font for the OTHER script would be a
       whole download (Arabic on English pages is ~30 KB) for one word. */
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* The copy inside the phone menu shows only there. */
.main-nav .lang-switch-menu { display: none; }
/* Arabic letters join: letter-spacing tears them apart, and uppercase has no
   meaning in Arabic. A theme may space or capitalise its Latin labels, never
   these. */
html:lang(ar) body, html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3,
html:lang(ar) .main-nav a, html:lang(ar) .cart-btn, html:lang(ar) .brand-name, html:lang(ar) .btn,
html:lang(ar) .sec-heading, html:lang(ar) .eyebrow, html:lang(ar) .vp-label, html:lang(ar) .category-name,
html:lang(ar) .category-go, html:lang(ar) .stock-badge {
    letter-spacing: 0; text-transform: none;
}
.lang-switch:hover { opacity: 1; }
/* The phone menu button; hidden until the ≤640px breakpoint below. */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: var(--t-btn-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--t-fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* ---------------------------------------------------------------- buttons */
.btn {
    display: inline-block;
    padding: var(--t-btn-pad);
    border-radius: var(--t-btn-radius);
    font: inherit;
    font-weight: var(--t-btn-weight);
    text-transform: var(--t-btn-transform);
    font-size: var(--t-fs-md);
    cursor: pointer;
    border: 1px solid transparent;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn.primary:hover { box-shadow: var(--t-shadow-hover); color: var(--c-on-primary); }
.btn.ghost { background: transparent; color: var(--c-fg); border-color: var(--c-border); }
.btn.ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn-block { display: block; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* The showcase store's notice (layout.html), above the header on every page. */
.showcase-banner {
    margin: 0; padding: 8px 16px; text-align: center;
    font-size: 0.875rem; line-height: 1.4;
    background: var(--c-primary); color: var(--c-on-primary);
}

/* --------------------------------------------------------------- sections */
.sec { padding: var(--t-sec-pad) 0; }
.sec + .sec { padding-top: 0; }
.sec-heading { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 8px; }
.sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.sec-head .sec-heading { margin: 0; }
.sec-more { font-weight: 600; color: var(--c-accent); white-space: nowrap; }

/* Announcement bar (announcement.py): one line above the header. */
.announcement-bar {
    background: var(--c-primary); color: var(--c-on-primary);
    text-align: center; font-size: var(--t-fs-sm); font-weight: 600; line-height: 1.4;
    padding: 9px 16px;
}
.announcement-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Hero */
.sec-hero {
    background: var(--t-hero-bg);
    padding: var(--t-hero-pad) 0;
    text-align: var(--t-hero-align);
}
.sec-hero .hero-text { max-width: 620px; }
.sec-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 16px; }
.hero-sub { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--c-muted); margin: 0 0 28px; }

/* Value props */
.sec-value-props .vp-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--t-gap);
}
.vp-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 20px 22px;
    background: var(--t-card-bg);
    border: var(--t-card-border);
    border-radius: var(--t-card-radius);
}
.vp-label { font-weight: 700; }
.vp-body { color: var(--c-muted); font-size: var(--t-fs-sm); }

/* Product grid — shared by the featured section and the catalogue */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--t-grid-min), 1fr));
    gap: var(--t-gap);
}
/* One link per product, the title's, stretched over the whole card so the
   image still opens the product. The image used to be a second link hidden
   from screen readers (aria-hidden, tabindex -1), which a click still focused:
   focus inside aria-hidden, which browsers now flag and block. */
.product-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--t-card-bg);
    border: var(--t-card-border);
    border-radius: var(--t-card-radius);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover { box-shadow: var(--t-shadow-hover); transform: translateY(-2px); }
.product-card-media { display: block; background: var(--t-surface); }
.product-img, .gallery-main {
    display: block; width: 100%;
    aspect-ratio: var(--t-media-ratio);
    object-fit: var(--t-media-fit);
}
/* Accessible placeholder for a product with no image (role="img" in macros). */
.placeholder {
    background: repeating-linear-gradient(
        45deg, var(--t-surface), var(--t-surface) 10px,
        rgba(0, 0, 0, 0.035) 10px, rgba(0, 0, 0, 0.035) 20px);
}
.product-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card-title { font-size: var(--t-fs-md); font-weight: 600; margin: 0; line-height: 1.35; }
.product-card-title a::after { content: ""; position: absolute; inset: 0; }
.product-card-price { font-weight: 700; font-size: var(--t-fs-lg); }
/* Above the stretched title link, so the button still takes its own click. */
.product-card .add-to-cart-btn { margin-top: auto; width: 100%; position: relative; z-index: 1; }

/* Categories */
.category-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.category-tile a {
    display: flex; flex-direction: column; gap: 6px;
    padding: 22px;
    background: var(--t-card-bg);
    border: var(--t-card-border);
    border-radius: var(--t-card-radius);
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.category-tile a:hover { border-color: var(--c-accent); box-shadow: var(--t-shadow); }
.category-name { font-weight: 650; }
.category-go { font-size: var(--t-fs-xs); color: var(--c-accent); font-weight: 600; }

/* About / testimonials / contact CTA */
.sec-about-teaser .about-body { font-size: var(--t-fs-lg); color: var(--c-muted); margin: 0 0 20px; }
/* With the merchant's own photo: photo and text side by side, text-aligned
   to the start whatever the theme centres (one column again on phones). */
.sec-about-teaser--photo .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; text-align: start; }
.sec-about-teaser--photo .about-media { aspect-ratio: 4 / 3; border-radius: var(--t-card-radius); overflow: hidden; background: var(--t-surface); }
.sec-about-teaser--photo .about-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.testimonial-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--t-gap);
}
.testimonial {
    padding: 24px; background: var(--t-card-bg);
    border: var(--t-card-border); border-radius: var(--t-card-radius);
}
.testimonial blockquote { margin: 0 0 12px; font-size: var(--t-fs-lg); }
.testimonial cite { color: var(--c-muted); font-style: normal; font-size: var(--t-fs-sm); }
.sec-contact-cta { text-align: center; }
.sec-contact-cta .cta-sub { color: var(--c-muted); margin: 0 0 22px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------- catalogue */
.catalog-head h1, .cart h1, .checkout h1, .order-hero h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.empty-state { color: var(--c-muted); margin: 32px 0 16px; }

/* --------------------------------------------------------- product detail */
.product-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.product-gallery .gallery-main { border-radius: var(--t-card-radius); border: var(--t-card-border); }
/* Merchant photos from Edara are often ~550px wide: shown 600px wide on a 2x
   screen that is a 2x upscale; capped here, the same photo stays sharp. */
.product-gallery .gallery-main { max-inline-size: 440px; margin-inline: auto; }
.product-meta h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 8px; }
.product-title-alt { color: var(--c-muted); margin: 0 0 12px; }
.product-price-lg { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; margin: 12px 0; }
.product-sku { color: var(--c-muted); font-size: var(--t-fs-xs); margin: 14px 0 0; }
.product-description { margin-top: 22px; line-height: 1.7; }
.product-detail .add-to-cart-btn { margin-top: 8px; }

.stock-badge {
    display: inline-block; margin: 0 0 12px;
    padding: 4px 12px; border-radius: var(--t-radius-sm);
    font-size: var(--t-fs-xs); font-weight: 650;
}
/* Stock state in the --st-* pairs (see :root), on the product page and on cards. */
.stock-badge.is-in  { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.stock-badge.is-low, .card-badge.is-low { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.stock-badge.is-out, .card-badge.is-out, .stock-badge.is-sale { background: var(--st-err-bg); color: var(--st-err-fg); }

/* ------------------------------------------------------------ cart/forms */
.checkout-form { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.checkout-form .field { display: flex; flex-direction: column; gap: 6px; }
.checkout-form .field > span { font-weight: 600; font-size: var(--t-fs-sm); }
.checkout-form input, .checkout-form textarea {
    font: inherit; padding: 11px 13px;
    border: 1px solid var(--c-border); border-radius: var(--t-radius-sm);
    background: #fff; color: var(--c-fg);
}
.checkout-form input:focus, .checkout-form textarea:focus { border-color: var(--c-accent); }
.contact-info { margin-bottom: 20px; }
.sf-honeypot {
    /* Clipped in place, never pushed off to one side: left:-9999px scrolled
       every Arabic contact page sideways (the same bug the skip link had). */
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); opacity: 0;
}
/* Empty until storefront.js writes a result; as a flex item it would otherwise
   hold open a gap above the Send button. */
.contact-form [data-contact-status]:empty { display: none; }

/* P3 — variant picker (size/colour). Native radios stay in the DOM (never
   display:none) for accessibility/keyboard support; :has() just styles the
   label as a pill when its own radio is checked -- browsers without :has()
   still show a fully working, if plainer, list of radio + text pairs. */
.variant-picker { border: 0; padding: 0; margin: 16px 0; }
.variant-picker legend { font-weight: 600; padding: 0 0 8px; }
.variant-option {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--c-border, #e8e6e2); border-radius: var(--t-radius);
    padding: 8px 14px; margin: 0 8px 8px 0; cursor: pointer; font-size: var(--t-fs-sm);
}
.variant-option:has(input:checked) { border-color: var(--c-primary); font-weight: 600; }
.variant-option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.prose { line-height: 1.75; }
.prose img { border-radius: var(--t-radius-sm); }

/* A Look that picks a background also sets the hero's text colours: two themes
   write light hero text for their own dark hero, which a light background would
   hide. The full-photo hero keeps its white text on the photo. */
html[data-look-surface] .sec-hero:not(.sec-hero--full-image) { color: var(--c-fg); }
html[data-look-surface] .sec-hero:not(.sec-hero--full-image) .hero-sub { color: var(--c-muted); }

/* ------------------------------------------------------- section variants */
/* One modifier class per variant (sections.html), chosen by the store's Look.
   Structure only: colours, type and corners still come from the --t-* knobs,
   so every variant works in every theme, in both directions. A photo variant
   without a photo never gets its modifier, so it can't render an empty frame. */
.hero-media img, .cat-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

.sec-hero.sec-hero--centered { text-align: center; }
.sec-hero.sec-hero--centered .hero-text { margin-inline: auto; }

.sec-hero.sec-hero--split { text-align: start; padding: calc(var(--t-hero-pad) * 0.55) 0; }
.sec-hero.sec-hero--split .container {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: calc(var(--t-gap) * 2); align-items: center;
}
.sec-hero.sec-hero--split .hero-text { margin: 0; max-inline-size: none; }
.sec-hero.sec-hero--split .hero-media { aspect-ratio: 5 / 4; border-radius: var(--t-card-radius); overflow: hidden; background: var(--t-surface); }

/* Full photo. By default (phones, and a banner too small to fill a wide screen
   sharply: `--contained`, at most its own width) the whole photo shows at its
   own shape, with the words under it in the store's colours. */
.sec-hero.sec-hero--full-image {
    padding: calc(var(--t-hero-pad) * 0.3) 0 calc(var(--t-hero-pad) * 0.45);
    background: none; color: var(--c-fg);
}
.sec-hero.sec-hero--full-image .container { display: flex; flex-direction: column; gap: 20px; }
.sec-hero.sec-hero--full-image .hero-media {
    order: -1; inline-size: 100%; max-inline-size: var(--hero-photo-w, none); margin-inline: auto;
    border-radius: var(--t-card-radius); overflow: hidden;
}
.sec-hero.sec-hero--full-image .hero-media img { block-size: auto; }
.sec-hero.sec-hero--full-image .hero-sub { color: var(--c-muted); }
/* A wide screen and a photo big enough for it: the photo fills the band, the
   words sit over it. */
@media (min-width: 721px) {
    .sec-hero.sec-hero--overlay {
        position: relative; isolation: isolate; text-align: start;
        min-block-size: min(76vh, 620px); display: flex; align-items: flex-end;
        background: #1d1d1d; color: #fff; padding: calc(var(--t-hero-pad) * 0.6) 0;
    }
    .sec-hero.sec-hero--overlay .container { display: block; inline-size: 100%; }
    .sec-hero.sec-hero--overlay .hero-text { margin: 0; }
    .sec-hero.sec-hero--overlay .hero-media {
        position: absolute; inset: 0; z-index: -1; max-inline-size: none; border-radius: 0;
    }
    .sec-hero.sec-hero--overlay .hero-media::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.1) 62%);
    }
    .sec-hero.sec-hero--overlay .hero-media img { block-size: 100%; }
    .sec-hero.sec-hero--overlay h1 { color: #fff; }
    .sec-hero.sec-hero--overlay .hero-sub { color: rgba(255, 255, 255, 0.9); }
}

.sec-categories--image-tiles .category-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.sec-categories--image-tiles .category-tile a { aspect-ratio: 4 / 5; justify-content: flex-end; }
.sec-categories--image-tiles .has-photo a {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 18px; border: 0; align-items: flex-start; text-align: start; color: #fff;
}
.sec-categories--image-tiles .cat-media { position: absolute; inset: 0; z-index: -1; }
.sec-categories--image-tiles .cat-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 58%);
}
.sec-categories--image-tiles .has-photo .category-name { font-size: 1.15rem; color: #fff; }
.sec-categories--image-tiles .has-photo .category-go { color: rgba(255, 255, 255, 0.9); }

.sec-categories--chips .category-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sec-categories--chips .category-tile a {
    flex-direction: row; align-items: center; padding: 10px 20px; block-size: auto;
    border: 1px solid var(--c-border); border-radius: 999px; background: var(--t-card-bg);
}
.sec-categories--chips .category-go { display: none; }

.sec-featured-products--carousel .product-grid {
    grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: minmax(var(--t-grid-min), 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 10px;
}
.sec-featured-products--carousel .product-card { scroll-snap-align: start; }

.sec-value-props--row .vp-item {
    background: transparent; border: 0; border-radius: 0;
    border-inline-start: 2px solid var(--c-accent);
    padding-block: 4px; padding-inline: 16px 0;
    text-align: start; align-items: flex-start;
}
.sec-value-props--cards .vp-item {
    background: var(--t-card-bg); border: 1px solid var(--c-border);
    border-radius: var(--t-card-radius); padding: 22px;
    text-align: start; align-items: flex-start;
}
.sec-value-props--cards .vp-item::before {
    content: ""; inline-size: 30px; block-size: 30px; border-radius: 50%;
    background: color-mix(in srgb, var(--c-accent) 24%, transparent); margin-block-end: 10px;
}

@media (max-width: 720px) {
    .sec-hero.sec-hero--split .container { grid-template-columns: 1fr; }
    .sec-hero.sec-hero--split .hero-media { aspect-ratio: 4 / 3; }
    .sec-about-teaser--photo .container { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
    background: var(--t-footer-bg);
    color: var(--t-footer-fg);
    border-top: 1px solid var(--c-border);
    padding: 48px 0 28px;
    margin-top: 72px;
}
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.footer-brand { font-weight: 700; margin-bottom: 8px; }
.site-footer h4 { margin: 0 0 10px; font-size: var(--t-fs-md); }
.site-footer p { margin: 4px 0; }
.site-footer .muted { color: var(--t-footer-muted); }
.footer-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--c-border); font-size: var(--t-fs-xs); }

/* ------------------------------------------------------------ order page */
.order-notice { padding: 12px 16px; border-radius: var(--t-radius-sm); background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.order-notice.is-error { background: #fdecee; color: #b00020; }
.order-notice p { margin: 4px 0; }
/* "Tell me when it's back", under the buy box of an out-of-stock product. */
.stock-request { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--c-border, #e1e5ea); border-radius: var(--t-radius-sm); }
.stock-request-title { margin: 0 0 8px; font-weight: 600; }
.stock-request-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.stock-request-fields input { flex: 1 1 160px; min-width: 0; padding: 10px 12px; border: 1px solid var(--c-border, #e1e5ea); border-radius: var(--t-radius-sm); font: inherit; }
.stock-request-note { margin: 8px 0 0; font-size: .9rem; }
.stock-request-note.is-error { color: #b00020; }
/* A quantity offer under the product's price. */
.qty-offer { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-weight: 600; color: var(--c-primary); }
/* The floating WhatsApp button (layout.html), clear of the phone's bottom edge. */
.wa-float { position: fixed; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background: #25d366; color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .2); }
.wa-float:hover { filter: brightness(1.05); }
/* Checkout and cart end in their own button; a product page on a phone has its sticky buy bar. */
.page-checkout .wa-float, .page-cart .wa-float { display: none; }
@media (max-width: 720px) { .page-product .wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media print { .wa-float { display: none; } }
.order-answer h2 { margin: 0 0 4px; font-size: 1.05rem; }
.order-answer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.order-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 16px 0; }
.order-meta dt { font-size: var(--t-fs-sm); color: var(--c-muted); }
.order-meta dd { margin: 2px 0 0; font-weight: 600; }
.order-timeline-title { font-size: var(--t-fs-md); margin: 24px 0 8px; }
.order-timeline { list-style: none; margin: 0 0 16px; padding: 0; border-inline-start: 2px solid var(--c-border); }
.order-timeline li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 6px; padding-inline-start: 16px; position: relative; }
.order-timeline li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); }
.order-timeline time { font-size: var(--t-fs-sm); }

/* ======================================================= shopper journey
   Listing tools, the product buy box, the cart, checkout and the order page.
   Structural only: every colour is a --c-* brand colour or a fixed AA pair,
   every radius/shadow a --t-* knob, so each theme restyles them for free. */

/* `hidden` must win over any display a component sets (the empty-cart panel
   and the summary are grids, which would otherwise ignore it). */
[hidden] { display: none !important; }

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* Listing: count, category chips, search/filter/sort toolbar */
.catalog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.catalog-head h1 { margin: 0; }
.catalog-count { margin: 0; font-size: var(--t-fs-sm); }
.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: thin; }
.cat-chip {
    flex: none; padding: 7px 14px; border: 1px solid var(--c-border); border-radius: 999px;
    font-size: var(--t-fs-sm); font-weight: 500; white-space: nowrap; background: var(--c-bg);
}
.cat-chip:hover { border-color: var(--c-accent); color: var(--c-fg); }
.cat-chip[aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.catalog-tools { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 24px; }
.catalog-search {
    flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    border: 1px solid var(--c-border); border-radius: var(--t-radius); background: var(--c-bg); color: var(--c-muted);
}
.catalog-search:focus-within { border-color: var(--c-accent); }
.catalog-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 11px 0; font: inherit; color: var(--c-fg); outline: none; }
.catalog-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-fs-sm); cursor: pointer; }
.catalog-check input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.catalog-sort { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-fs-sm); color: var(--c-muted); }
.catalog-sort select {
    font: inherit; color: var(--c-fg); padding: 9px 12px; border: 1px solid var(--c-border);
    border-radius: var(--t-radius-sm); background: var(--c-bg);
}
/* storefront.js submits on change and marks the form; the button is the no-JS path. */
.catalog-tools.is-live .catalog-apply { display: none; }
.empty-panel { text-align: center; padding: 48px 16px; display: grid; justify-items: center; gap: 10px; }
.empty-panel svg { color: var(--c-muted); }
.empty-panel :is(h1, h2) { margin: 4px 0 0; }
.empty-panel p { margin: 0; }
.empty-panel .btn { margin-top: 8px; }

/* Card stock badge, on the image */
.product-card-media { position: relative; }
.card-badge {
    position: absolute; top: 10px; inset-inline-start: 10px;
    padding: 3px 10px; border-radius: var(--t-radius-sm);
    font-size: var(--t-fs-xs); font-weight: 650;
}

/* Product page */
.breadcrumbs ol { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--t-fs-sm); color: var(--c-muted); }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 4px; opacity: 0.6; }
.breadcrumbs [aria-current] { color: var(--c-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.buy-box { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.buy-box .add-to-cart-btn { flex: 1 1 160px; margin: 0; }
.buy-now-btn { flex: 1 1 140px; }
.qty-stepper {
    display: inline-flex; align-items: stretch; border: 1px solid var(--c-border);
    border-radius: var(--t-btn-radius); overflow: hidden; background: var(--c-bg);
}
.qty-stepper button {
    min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--c-fg);
    font: inherit; font-size: 1.15rem; cursor: pointer;
}
.qty-stepper button:hover { background: var(--t-surface); }
.qty-stepper input, .qty-stepper output {
    width: 44px; border: 0; text-align: center; font: inherit; font-weight: 600; background: transparent; color: var(--c-fg);
    display: grid; place-items: center;
    -moz-appearance: textfield; appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.assurance {
    list-style: none; margin: 20px 0 0; padding: 4px 16px;
    border: 1px solid var(--c-border); border-radius: var(--t-radius);
}
.assurance li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: var(--t-fs-sm); line-height: 1.45; }
.assurance li + li { border-top: 1px solid var(--c-border); }
.assurance svg, .delivery-eta svg { flex: none; color: var(--c-accent); margin-top: 1px; }
.assurance a { text-decoration: underline; text-underline-offset: 2px; }
.product-details-title { font-size: var(--t-fs-lg); margin: 28px 0 0; }
.product-description { margin-top: 8px; }
.product-share { margin: 20px 0 0; font-size: var(--t-fs-sm); }
.product-share a { text-decoration: underline; text-underline-offset: 2px; color: var(--c-muted); }
.sticky-buy { display: none; }

/* Cart page and the order summary card (cart, checkout, order page) */
.cart h1, .checkout h1 { margin: 0 0 24px; }
.cart-layout, .checkout-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 32px; align-items: start;
}
.cart-lines { border-top: 1px solid var(--c-border); }
.cart-line {
    display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 8px 16px;
    align-items: center; padding: 16px 0; border-bottom: 1px solid var(--c-border);
}
.cart-line-media { grid-row: span 2; width: 88px; aspect-ratio: 1; border-radius: var(--t-radius-sm); overflow: hidden; background: var(--t-surface); }
.cart-line-media img { width: 100%; height: 100%; object-fit: var(--t-media-fit); display: block; }
.cart-line-info { min-width: 0; }
.cart-line-title { font-weight: 600; }
.cart-line-title a:hover { color: var(--c-accent); }
.cart-line-unit { font-size: var(--t-fs-sm); color: var(--c-muted); }
.cart-line-total { font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.cart-line-controls { grid-column: 2 / -1; display: flex; align-items: center; gap: 12px; }
.summary-card {
    background: var(--t-card-bg); border: 1px solid var(--c-border);
    border-radius: var(--t-card-radius); padding: 22px;
}
.summary-card h2 { font-size: var(--t-fs-lg); margin: 0 0 14px; }
.cart-layout .summary-card, .checkout-layout .summary-card { position: sticky; top: 96px; }
.summary-rows { margin: 0 0 16px; }
.summary-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.summary-rows dt { color: var(--c-muted); }
.summary-rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.summary-rows .summary-total { border-top: 1px solid var(--c-border); margin-top: 6px; padding-top: 12px; font-size: var(--t-fs-lg); font-weight: 700; }
.summary-rows .summary-total dt { color: var(--c-fg); }
.summary-link { display: block; text-align: center; margin-top: 12px; font-size: var(--t-fs-sm); text-decoration: underline; text-underline-offset: 2px; }
.summary-pay { margin: 14px 0 0; font-size: var(--t-fs-xs); text-align: center; }
.free-ship { margin: 0 0 14px; font-size: var(--t-fs-sm); }
.free-ship-bar { height: 6px; border-radius: 3px; background: var(--c-border); overflow: hidden; margin-top: 8px; }
.free-ship-bar span { display: block; height: 100%; background: var(--c-primary); border-radius: 3px; }
.free-ship.is-done { color: var(--st-ok-fg); font-weight: 600; }
/* How long delivery takes: cart summary, checkout's address step, order page. */
.delivery-eta { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; font-size: var(--t-fs-sm); line-height: 1.45; }
.order-details .delivery-eta { margin: 0 0 16px; }
.min-order { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--t-radius-sm); background: var(--st-warn-bg); color: var(--st-warn-fg); font-size: var(--t-fs-sm); font-weight: 600; }

/* Sale prices: today's price, the list price struck through, and the saving. */
.price-was { color: var(--c-muted); font-weight: 400; font-size: 0.85em; margin-inline-start: 6px; }
/* Red only beside a struck-through price; :has() follows a variant switch. */
.product-card-price .price-now, .product-price-lg:has(.price-was:not([hidden])) .price-now { color: var(--st-err-fg); }
.product-price-lg .stock-badge.is-sale { margin: 0; margin-inline-start: 8px; vertical-align: middle; }
.card-badge.is-sale { inset-inline-start: auto; inset-inline-end: 10px; background: var(--st-err-fg); color: var(--st-err-on, #fff); }
/* A badge carries both wordings; the Look's sale_badge (<html data-look-sale-badge>)
   picks one, or none. Left out, it says the percentage. */
:root:not([data-look-sale-badge="amount"]) .is-sale .sale-amount,
[data-look-sale-badge="amount"] .is-sale .sale-pct, [data-look-sale-badge="none"] .is-sale { display: none; }

/* Checkout */
.checkout-steps {
    list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
    font-size: var(--t-fs-sm); color: var(--c-muted); counter-reset: step;
}
.checkout-steps li { display: flex; align-items: center; gap: 8px; counter-increment: step; }
.checkout-steps li::before {
    content: counter(step); display: inline-grid; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; border: 1px solid var(--c-border); font-size: var(--t-fs-xs); font-weight: 700;
}
.checkout-steps li.is-done::before { content: "\2713"; background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.checkout-steps li.is-done a { text-decoration: underline; text-underline-offset: 2px; }
.checkout-steps li.is-current { color: var(--c-fg); font-weight: 650; }
.checkout-steps li.is-current::before { border-color: var(--c-fg); }
.checkout-layout .checkout-form { max-width: none; gap: 20px; }
.co-section { border: 1px solid var(--c-border); border-radius: var(--t-card-radius); padding: 20px 22px 8px; margin: 0; background: var(--t-card-bg); min-width: 0; }
.co-section legend { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--t-fs-lg); padding: 0 6px; }
.co-num {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--c-primary); color: var(--c-on-primary); font-size: var(--t-fs-xs);
}
.co-section .field { margin-bottom: 14px; }
.field-hint { color: var(--c-muted); font-size: var(--t-fs-xs); }
/* Use my current location: the button, what happened, and view / remove. */
.co-location { display: grid; gap: 6px; justify-items: start; margin-bottom: 14px; }
.co-location .btn { display: inline-flex; align-items: center; gap: 8px; }
.co-location.is-set .field-hint { color: var(--st-ok-fg); font-weight: 600; }
.co-location-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-fs-sm); }
.co-location-links a, .linkbtn, .co-more > summary { text-decoration: underline; text-underline-offset: 2px; }
.linkbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pay-option:has(input:disabled) { opacity: .55; }
/* The one way to pay: a line, not a choice. */
.payment-choice.is-only .pay-option { border: 0; padding: 2px 0 10px; margin: 0; box-shadow: none; cursor: default; }
.payment-choice.is-only .pay-option input { display: none; }
.co-only-area { margin: 0 0 14px; font-size: var(--t-fs-sm); }
/* The email, folded away. */
.co-more { margin-bottom: 14px; }
.co-more > summary { cursor: pointer; font-size: var(--t-fs-sm); color: var(--c-accent); list-style: none; }
.co-more[open] > summary { margin-bottom: 10px; }
/* A returning shopper's saved details, in place of the form. */
.co-returning { display: grid; gap: 6px; justify-items: start; padding: 18px 22px; border: 1px solid var(--c-border); border-radius: var(--t-card-radius); background: var(--t-card-bg); }
.co-returning h2 { margin: 0; font-size: var(--t-fs-lg); }
.co-returning p { margin: 0; }
.checkout-form.is-returning [data-co-details], .checkout-form.is-returning .co-num { display: none; }
.checkout-form select {
    font: inherit; padding: 11px 13px; border: 1px solid var(--c-border);
    border-radius: var(--t-radius-sm); background: #fff; color: var(--c-fg);
}
.checkout-form input::placeholder { color: var(--c-muted); opacity: 0.7; }
.payment-choice { padding-bottom: 14px; }
.pay-option {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 10px;
    border: 1px solid var(--c-border); border-radius: var(--t-radius); cursor: pointer;
}
.pay-option:has(input:checked) { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.pay-option input { width: 18px; height: 18px; accent-color: var(--c-primary); flex: none; }
.pay-option-body { flex: 1; display: grid; gap: 2px; }
.pay-option svg { color: var(--c-muted); flex: none; }
.save-details { display: flex; align-items: center; gap: 10px; font-size: var(--t-fs-sm); cursor: pointer; }
.save-details input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.place-order { padding-block: 15px; font-size: var(--t-fs-lg); }
.privacy-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--t-fs-xs); }
.privacy-note svg { flex: none; margin-top: 2px; }
.co-summary-toggle > summary {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    cursor: pointer; list-style: none; font-weight: 700; font-size: var(--t-fs-lg); margin-bottom: 14px;
}
.co-summary-toggle > summary::-webkit-details-marker, .co-more > summary::-webkit-details-marker { display: none; }
.co-lines { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; }
.co-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: var(--t-fs-sm); }
.co-thumb { position: relative; width: 56px; height: 56px; border-radius: var(--t-radius-sm); background: var(--t-surface); border: 1px solid var(--c-border); }
.co-thumb img { width: 100%; height: 100%; object-fit: var(--t-media-fit); border-radius: inherit; display: block; }
.co-qty {
    position: absolute; top: -8px; inset-inline-end: -8px; min-width: 22px; height: 22px; padding: 0 6px;
    display: grid; place-items: center; border-radius: 11px;
    background: var(--c-fg); color: var(--c-bg); font-size: 0.75rem; font-weight: 700;
}
.co-line-title { font-weight: 600; line-height: 1.35; }
/* Discount code, in the checkout summary above the totals. */
.co-code { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--c-border); }
.co-code label { display: block; font-weight: 600; font-size: var(--t-fs-sm); margin-bottom: 6px; }
.co-code-row { display: flex; gap: 8px; }
.co-code-row input {
    flex: 1; min-width: 0; font: inherit; padding: 10px 12px; text-transform: uppercase;
    border: 1px solid var(--c-border); border-radius: var(--t-radius-sm); background: #fff; color: var(--c-fg);
}
.co-code-row input:focus { border-color: var(--c-accent); }
.co-code-row input[readonly] { background: var(--t-surface); }
.co-code-msg { margin: 6px 0 0; font-size: var(--t-fs-sm); color: var(--c-muted); }
.co-code-msg:empty { display: none; }
.co-code-msg.is-error { color: #b00020; }
.summary-rows .summary-discount dd { color: var(--c-accent); }
.co-line-price { font-variant-numeric: tabular-nums; }

/* Order page */
.order-hero { text-align: center; margin-bottom: 24px; }
.order-hero-icon {
    display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    background: var(--st-ok-bg); color: var(--st-ok-fg); margin-bottom: 12px;
}
.order-hero h1 { margin: 0 0 6px; }
.order-hero .order-ref { margin: 0; color: var(--c-muted); }
.order-progress { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.order-progress li {
    position: relative; display: grid; justify-items: center; gap: 8px; text-align: center;
    font-size: var(--t-fs-sm); color: var(--c-muted);
}
.order-progress li::before {
    content: ""; position: absolute; top: 9px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--c-border);
}
.order-progress li:first-child::before { content: none; }
.order-progress-dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-border); }
.order-progress li.is-done, .order-progress li.is-current { color: var(--c-fg); }
.order-progress li.is-done::before, .order-progress li.is-current::before { background: var(--c-primary); }
.order-progress li.is-done .order-progress-dot { background: var(--c-primary); border-color: var(--c-primary); }
.order-progress li.is-current .order-progress-dot { border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.order-progress li.is-current { font-weight: 650; }
.order-next { background: var(--t-surface); border-radius: var(--t-card-radius); padding: 18px 22px; margin-bottom: 20px; }
.order-next h2 { font-size: var(--t-fs-lg); margin: 0 0 8px; }
.order-next ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.order-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.order-details h2 + p { margin-top: 0; }
.order-details h2:not(:first-child) { margin-top: 18px; }
.order-address { line-height: 1.6; }
.order-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }

/* ------------------------------------------------------------ responsive */
/* The narrow-screen values are set on body, not :root: every theme sets its
   own values on :root in theme.css, which loads after this file, so a :root
   override here would lose to the theme's wide-screen spacing and grid. */
@media (max-width: 900px) {
    body { --t-sec-pad: var(--t-sec-pad-sm); --t-hero-pad: 56px; }
    .product-detail-grid { grid-template-columns: 1fr; gap: 28px; }
    /* The summary goes first on a narrow screen, folded to one line with the
       total (storefront.js closes the <details> below 900px). */
    .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .checkout-layout .co-summary { order: -1; position: static; padding: 16px 18px; }
    .cart-layout .summary-card { position: static; }
    .co-summary-toggle:not([open]) > summary { margin-bottom: 0; }
}
@media (max-width: 640px) {
    body { --t-grid-min: 150px; --t-gap: 14px; }
    .header-main { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
    .brand { flex: 1; min-width: 0; }
    .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-toggle { display: inline-flex; order: 2; }
    .cart-btn { order: 1; }
    /* The language switch moves into the menu, so the store name keeps the row. */
    .header-main > .lang-switch { display: none; }
    .main-nav .lang-switch-menu { display: block; opacity: 1; }
    /* Folded behind the menu button; one tappable row per link when open. */
    .main-nav { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; }
    .site-header.nav-open .main-nav { display: flex; }
    .main-nav a { display: block; padding: 12px 0; border-top: 1px solid var(--c-border); }
    .container { padding: 0 16px; }
    .product-card-body { padding: 12px; }
    .cta-actions { flex-direction: column; }
    .site-footer { margin-top: 44px; }
    .catalog-tools { gap: 10px 14px; }
    .catalog-search { flex-basis: 100%; }
    .card-badge { top: 6px; inset-inline-start: 6px; padding: 2px 8px; }
    .co-section { padding: 16px 14px 4px; }
    .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 6px 12px; }
    .cart-line-media { width: 72px; }
    .order-progress { font-size: var(--t-fs-xs); }
    /* Price and Add to cart stay in reach once the buy box scrolls away. */
    .page-product .sticky-buy:not([hidden]) {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--c-bg); border-top: 1px solid var(--c-border);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
    }
    .sticky-buy-price { font-weight: 700; font-size: var(--t-fs-lg); }
    .sticky-buy .btn { flex: 0 1 60%; }
    .page-product .site-footer { padding-bottom: 88px; }
}

/* Respect a reduced-motion preference — every transition here is decorative. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .btn:hover, .product-card:hover { transform: none; }
}