/* store.css — AzStore storefront design system (T8, v2.36.0).
   Moved out of partials/store_styles*.html so it ships ONCE with the immutable
   static cache headers instead of ~45 KB inlined into every HTML response
   (audit S-14). Per-store theme tokens (--color-primary etc.) stay inline in
   base.html; everything here reads them through var(). Edit here, never in
   the (now empty) partials. Served at /static/css/store.css?v=<version>. */

/* ============================================================
   AzStore Storefront Design System
   Mirrors admin_styles.html pattern. Single source of truth.
   All contrast ratios validated against WCAG AA (4.5:1 normal, 3:1 large).
   ============================================================ */

/* --- Design Tokens --- */
:root {
    --color-bg:            var(--store-bg, #FFFFFF);
    --color-surface:       #FFFFFF;
    --color-text:          #1A1A1A;
    --color-text-muted:    #6B7280;
    --color-text-whisper:  #6B7280;
    --color-border:        #E5E7EB;
    --color-border-light:  #F3F4F6;
    --color-error:         #C53030;
    --color-success:       #276749;
    /* WhatsApp click-to-chat (v2.31.0). Deep brand-adjacent green: white text
       on #0B7A6B = 5.25:1 (AA normal); the hover step is darker still. */
    --color-whatsapp:      #0B7A6B;
    --color-whatsapp-dark: #075E52;

    --space-section: 5rem;   /* 80px — between page sections */
    --space-group:   2.5rem; /* 40px — between related items */
    --space-item:    1.5rem; /* 24px — between list/grid items */
    --space-inner:   1rem;   /* 16px — inside components */
    --space-tight:   0.5rem; /* 8px — inline elements */
}

/* --- Typography Scale (strict stops) --- */
/* Cairo (AR) + Inter (EN) loaded via Google Fonts in base.html */

.store-display {
    font-size: 2.5rem; font-weight: 700; line-height: 1.2;
    color: var(--color-text);
}
.store-heading {
    font-size: 1.5rem; font-weight: 700; line-height: 1.3;
    color: var(--color-text);
}
.store-subheading {
    font-size: 1.125rem; font-weight: 600; line-height: 1.4;
    color: var(--color-text);
}
.store-body {
    font-size: 1rem; font-weight: 400; line-height: 1.6;
    color: var(--color-text);
}
.store-caption {
    font-size: 0.875rem; font-weight: 500; line-height: 1.5;
    color: var(--color-text);
}
.store-whisper {
    font-size: 0.75rem; font-weight: 600; line-height: 1.5;
    color: var(--color-text-whisper);
    /* WCAG: #6B7280 = 5.0:1 on white, passes AA for normal text (>= 4.5:1).
       Note: this is NOT large text (large = >= 14pt bold / 18.66px). Use only for tertiary info. */
}

/* --- Gold Rule (decoration only, max 3 per viewport) ---
   WCAG: gold #B68B3C = 2.7:1 on cream. FAILS text AA.
   Never use as text color. Use only for: 1px rules, badge pips, icon tints. */
.store-gold-rule {
    border: none; height: 1px;
    background-color: var(--color-accent);
    margin: var(--space-inner) 0;
}

/* --- Buttons --- */
.store-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; border-radius: 0.5rem;
    font-size: 0.875rem; font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer; border: none;
    min-height: 2.75rem; /* 44px touch target */
}
.store-btn--primary {
    background-color: var(--color-primary);
    color: #FFFFFF; /* 8.3:1 on #035E55 */
}
.store-btn--primary:hover { background-color: var(--color-primary-dark); }
.store-btn--primary:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
}
/* Disabled = unmistakably disabled: faded, not-allowed cursor, no hover shift.
   Set BOTH the disabled attribute and aria-disabled="true" (templates + JS do). */
.store-btn:disabled, .store-btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed;
}
.store-btn--primary:disabled:hover, .store-btn--primary[aria-disabled="true"]:hover {
    background-color: var(--color-primary);
}
.store-btn--outline {
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
}
.store-btn--outline:hover {
    background-color: var(--color-primary);
    color: #FFFFFF;
}
.store-btn--outline:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
}

/* --- Cookie-consent banner (v2.34.0) ---
   Pinned to the bottom, non-modal; a bottom sheet on phones. Surface on
   surface with a border so it reads on any --store-bg; text tokens only
   (#1A1A1A / #6B7280 on #FFFFFF = 16.1:1 / 4.8:1, AA). The reject control is
   a plain text button in --color-text-muted (4.8:1) with an underline so it
   is not colour-alone. */
.consent {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--color-surface); color: var(--color-text);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(100%); transition: transform 0.2s ease;
    padding-bottom: env(safe-area-inset-bottom);
}
.consent--open { transform: translateY(0); }
.consent--closing { transform: translateY(100%); }
.consent__inner {
    max-width: 72rem; margin: 0 auto; padding: 1rem 1.25rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
}
.consent__copy { flex: 1 1 22rem; min-width: 0; }
.consent__title { font-weight: 700; font-size: 0.9375rem; margin: 0 0 0.25rem; color: var(--color-text); }
.consent__text { font-size: 0.875rem; line-height: 1.5; margin: 0; color: var(--color-text-muted); }
.consent__link { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.consent__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.consent__btn { padding-inline: 1.125rem; }
.consent__reject {
    background: none; border: none; cursor: pointer; padding: 0.5rem 0.25rem; min-height: 2.75rem;
    font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted);
    text-decoration: underline; text-underline-offset: 3px;
}
.consent__reject:hover { color: var(--color-text); }
.consent__reject:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) {
    .consent { border-radius: 1rem 1rem 0 0; border-top-width: 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.14); }
    .consent__inner { flex-direction: column; align-items: stretch; gap: 0.875rem; padding: 1.125rem 1rem 1rem; }
    .consent__actions { flex-direction: column; align-items: stretch; }
    .consent__btn { width: 100%; }
    .consent__reject { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

/* --- Form Inputs --- */
.store-input {
    display: block; width: 100%;
    padding: 0.75rem 1rem; border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text);
    font-size: 1rem; min-height: 3rem; /* 48px touch target */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.store-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
    outline: none;
}
.store-input::placeholder { color: var(--color-text-whisper); }

.store-label {
    display: block; font-size: 0.875rem; font-weight: 500;
    color: var(--color-text-muted); margin-bottom: 0.375rem;
}

/* --- Header --- */
.store-header {
    position: sticky; top: 0; z-index: 50;
    background-color: var(--color-bg);
    transition: border-color 0.2s ease;
    border-bottom: 1px solid transparent;
}
.store-header--scrolled {
    border-bottom-color: var(--color-border);
}
.store-header__inner {
    max-width: 80rem; margin: 0 auto; padding: 0 1rem;
    display: flex; align-items: center; justify-content: space-between;
    height: 4rem; /* 64px */
}
.store-header__logo { display: flex; align-items: center; min-width: 0; }
.store-header__logo img { height: 2rem; width: auto; }
.store-header__logo-text {
    font-size: 1.25rem; font-weight: 700;
    color: var(--color-text);
    /* brand name stays on ONE line at small widths — ellipsis + a smaller step */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 60vw;
}
@media (max-width: 640px) {
    .store-header__logo-text { font-size: 1.0625rem; max-width: 48vw; }
}

.store-nav { display: flex; align-items: center; gap: 2rem; }
/* The desktop nav is `hidden md:flex` in header.html, but this <style> block is
   emitted AFTER output.css, so `.store-nav{display:flex}` out-ranked Tailwind's
   `.hidden` and the links leaked onto phones — squeezing the brand name. Own
   the breakpoint here (same 768px as Tailwind's md). */
@media (max-width: 767.98px) {
    .store-nav { display: none; }
}
.store-nav-link {
    font-size: 0.875rem; font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.store-nav-link:hover { color: var(--color-primary); }
.store-nav-link--active { color: var(--color-primary); font-weight: 600; }

.store-icon-btn {
    position: relative; padding: 0.5rem;
    border-radius: 0.5rem; color: var(--color-text);
    background: transparent; border: none; cursor: pointer;
    transition: color 0.15s ease;
    min-width: 2.75rem; min-height: 2.75rem; /* 44px touch */
    display: inline-flex; align-items: center; justify-content: center;
}
.store-icon-btn:hover { color: var(--color-primary); }
.store-icon-btn:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
}

.store-icon-dot {
    position: absolute; top: 0.125rem;
    width: 0.5rem; height: 0.5rem;
    background-color: var(--color-primary);
    border-radius: 9999px;
}
[dir="rtl"] .store-icon-dot { left: 0.125rem; }
[dir="ltr"] .store-icon-dot { right: 0.125rem; }

/* --- Product Card --- */
.product-card {
    display: block; text-decoration: none; color: inherit;
    transition: color 0.15s ease;
}
.product-card:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 4px;
    border-radius: 0.5rem;
}
.product-card__image {
    aspect-ratio: 1 / 1; overflow: hidden;
    background-color: var(--color-bg);
}
.product-card__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: none; /* no scale on hover — Apple discipline */
}
.product-card__image--placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--color-border);
}
.product-card__image--oos {
    opacity: 0.5; /* out of stock: muted, no overlay */
}
/* Sold-out label under the name (D4 rule: simple + tracked + stock<=0). Muted,
   not red — it is a state, not an alarm; the faded image already says it. */
.product-card__soldout {
    margin-top: 0.25rem;
    font-size: 0.75rem; font-weight: 600; line-height: 1.4;
    color: var(--color-text-muted);
}
.product-card__name {
    margin-top: 0.75rem;
    font-size: 1.125rem; font-weight: 600; line-height: 1.4;
    color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.15s ease;
}
.product-card:hover .product-card__name { color: var(--color-primary); }

/* --- Card rating (D3: social proof on listing cards) --- */
.product-card__rating {
    display: flex; align-items: center; gap: 0.25rem;
    margin-top: 0.35rem;
    font-size: 0.8rem; line-height: 1;
    color: var(--color-text-muted);
}
.product-card__rating-star { color: var(--color-accent, #B68B3C); font-size: 0.9rem; }
.product-card__rating-value { font-weight: 600; color: var(--color-text); }

/* --- Price Pair ---
   Wraps per WHOLE price (each <bdi>/child is nowrap) so "أ.م" never lands alone
   on a new line at 390px — the compare-at price drops to its own line instead. */
.price-pair {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 0.5rem; row-gap: 0.125rem; margin-top: 0.25rem;
}
.price-pair > *, .price-pair bdi { white-space: nowrap; }
.price-pair__current {
    font-size: 0.875rem; font-weight: 700;
    color: var(--color-primary); /* 7.1:1 on cream */
}
.price-pair__original {
    font-size: 0.875rem; font-weight: 400;
    color: var(--color-text-muted);
    text-decoration: line-through;
}
/* Price range prefix — "من 8500 أ.م" / "From 8500 MRU" on cards + detail
   before a variant is chosen. Muted, never bold: the number carries the weight. */
.price-pair__from {
    font-size: 0.8125rem; font-weight: 500;
    color: var(--color-text-muted);
}

/* --- Scarcity nudge (D4: "Only N left" on cards + detail) --- */
.product-card__scarcity {
    margin-top: 0.35rem;
    font-size: 0.75rem; font-weight: 600; line-height: 1;
    color: var(--color-error);
}
.product-detail__scarcity {
    font-size: 0.9rem; font-weight: 600;
    color: var(--color-error);
    margin: 0 0 0.25rem;
}

/* --- Free-shipping progress (D4: cart AOV nudge) --- */
.freeship-progress__track {
    height: 0.5rem; border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}
.freeship-progress__fill {
    height: 100%; border-radius: 999px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

/* --- Section Wrapper --- */
.store-section {
    max-width: 80rem; margin: 0 auto;
    padding: 0 1rem;
    margin-top: var(--space-section);
    margin-bottom: var(--space-section);
}

/* --- Cart Page ---
   v2.27.0: one card per line — image | body (title / variant / unit price) on
   top, ONE foot row (stepper · remove · line total). Desktop keeps the 120px
   image spanning both rows; ≤640px shrinks the image and lets the foot row
   take the full width so nothing floats. */
.cart-item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-areas: "img body" "img foot";
    column-gap: 1rem; row-gap: 0.75rem;
    align-items: start;
    padding: var(--space-inner) 0;
    border-bottom: 1px solid var(--color-border-light);
}
.cart-item__image {
    grid-area: img;
    width: 7.5rem; height: 7.5rem; /* 120px */
    border-radius: 0.5rem; overflow: hidden;
    background-color: var(--color-bg);
}
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__body {
    grid-area: body; min-width: 0;
    display: flex; flex-direction: column; gap: 0.375rem;
}
.cart-item__foot {
    grid-area: foot;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.cart-item__total {
    margin-inline-start: auto;
    font-size: 1rem; font-weight: 700; line-height: 1.5;
    color: var(--color-text); white-space: nowrap;
}
.cart-item__remove {
    display: inline-flex; align-items: center; gap: 0.25rem;
    min-height: 2.75rem; padding: 0 0.5rem; /* 44px target */
    background: none; border: none; cursor: pointer;
    font-size: 0.8125rem; font-weight: 500;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}
.cart-item__remove:hover { color: var(--color-error); }
.cart-item__remove > span { font-size: 1.125rem; line-height: 1; }
@media (max-width: 640px) {
    .cart-item {
        grid-template-columns: 5rem minmax(0, 1fr);
        grid-template-areas: "img body" "foot foot";
    }
    .cart-item__image { width: 5rem; height: 5rem; }
}
/* Cart item title hover — CSS-only, no inline event handlers (06-M4) */
.cart-item__title-link { color: var(--color-text); }
.cart-item__title-link:hover { color: var(--color-primary); }

/* --- Wishlist --- */
.wishlist-row {
    display: flex; align-items: center; gap: 1rem;
    padding: var(--space-inner) 0;
    border-bottom: 1px solid var(--color-border-light);
}
.wishlist-row__image {
    width: 6.25rem; height: 6.25rem; /* 100px */
    flex-shrink: 0; border-radius: 0.5rem; overflow: hidden;
    background-color: var(--color-bg);
}
.wishlist-row__image img { width: 100%; height: 100%; object-fit: cover; }

/* --- Checkout Progress --- */
.checkout-progress {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: var(--space-group);
}
.checkout-progress__step {
    display: flex; align-items: center;
}
.checkout-progress__dot {
    width: 2rem; height: 2rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
}
.checkout-progress__dot--active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.checkout-progress__dot--done {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #FFFFFF;
}
.checkout-progress__line {
    width: 3rem; height: 2px;
    background: var(--color-border);
}
.checkout-progress__line--done {
    background: var(--color-primary);
}

/* --- Search Overlay --- */
.search-overlay {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100; background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-100%);
    transition: transform 0.2s ease;
    padding: 1rem;
}
.search-overlay--open { transform: translateY(0); }
.search-overlay__input {
    width: 100%; max-width: 48rem; margin: 0 auto; display: block;
    padding: 1rem 1.25rem; border: none; background: transparent;
    font-size: 1.25rem; font-weight: 500;
    color: var(--color-text);
    outline: none;
}
.search-overlay__input::placeholder { color: var(--color-text-whisper); }
.search-overlay__results {
    max-width: 48rem; margin: 0 auto;
    border-top: 1px solid var(--color-border-light);
}
.search-result {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0;
    text-decoration: none; color: var(--color-text);
    transition: color 0.15s ease;
}
.search-result:hover { color: var(--color-primary); }
.search-result__image {
    width: 3rem; height: 3rem; border-radius: 0.25rem;
    overflow: hidden; flex-shrink: 0;
    background-color: var(--color-bg);
}
.search-result__image img { width: 100%; height: 100%; object-fit: cover; }

/* --- Variant Chips (v2.27.0: real pills; was a text underline) ---
   States are pure CSS off the sr-only radio: hover / :checked (primary border +
   8% primary tint) / --oos (muted + line-through, dashed border). 44px touch
   target, logical padding so RTL needs nothing extra. */
.variant-selector {
    display: inline-flex; margin: 0; cursor: pointer;
}
.variant-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    min-height: 2.75rem; min-width: 2.75rem; padding: 0 1rem;
    border: 1.5px solid var(--color-border); border-radius: 9999px;
    background: var(--color-surface); color: var(--color-text);
    font-size: 0.875rem; font-weight: 500; line-height: 1;
    cursor: pointer; user-select: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.variant-selector:hover .variant-chip { border-color: var(--color-text-muted); }
.variant-selector input:checked + .variant-chip {
    border-color: var(--color-primary); color: var(--color-primary); font-weight: 600;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.variant-selector input:focus-visible + .variant-chip {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
}
.variant-selector--oos .variant-chip {
    color: var(--color-text-muted); text-decoration: line-through;
    border-style: dashed;
}
.variant-selector--oos input:checked + .variant-chip {
    color: var(--color-error); border-color: var(--color-error); background: transparent;
}
.variant-selector input:disabled + .variant-chip { cursor: not-allowed; opacity: 0.6; }

/* --- Availability hint under the add-to-cart button --- */
.stock-indicator {
    display: block; margin: 0.25rem 0 0;
    font-size: 0.875rem; font-weight: 500; line-height: 1.5;
}
.stock-indicator--in   { color: var(--color-success); }
.stock-indicator--out  { color: var(--color-error); }
.stock-indicator--hint { color: var(--color-text-muted); font-weight: 400; }

/* --- Footer --- */
.store-footer {
    border-top: 1px solid var(--color-accent); /* gold rule */
    padding: var(--space-group) 1rem;
    text-align: center;
}
.store-footer__links {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 1rem;
    font-size: 0.75rem; font-weight: 500;
    color: var(--color-text-muted);
}
.store-footer__links a {
    color: var(--color-text-muted); text-decoration: none;
    transition: color 0.15s ease;
}
/* Shared payment-method badges (footer + product trust strip). Left-aligned by
   default so it matches the trust strip's other rows; the footer re-centers. */
.payment-badges {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
/* Footer keeps the original centered, 1rem-gap spacing; the product-page strip
   uses the tighter 0.5rem gap that matches its other rows. */
.store-footer .payment-badges { justify-content: center; gap: 1rem; margin-top: 0.75rem; }
.store-footer__links a:hover { color: var(--color-primary); }
.store-footer__links .store-footer__sep {
    color: var(--color-border); font-size: 0.625rem;
}
.store-footer__copyright {
    font-size: 0.75rem; color: var(--color-text-whisper);
    margin-top: 0.75rem;
}
.store-footer__social {
    display: flex; align-items: center; justify-content: center;
    gap: 0.75rem; margin-top: 0.75rem;
}
.store-footer__social a {
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}
.store-footer__social a:hover { color: var(--color-primary); }

/* --- Announcement Bar --- */
.announcement-bar {
    padding: 0.5rem 1rem; text-align: center;
    font-size: 0.75rem; font-weight: 500;
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
}

/* --- Account Card (white on cream for elevation) --- */
.store-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 0.75rem;
    padding: var(--space-group);
}

/* --- Status Badge (storefront — simpler than admin) --- */
.store-badge {
    display: inline-flex; align-items: center;
    padding: 0.125rem 0.5rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 500;
}
.store-badge--success {
    background: rgba(39, 103, 73, 0.1); color: var(--color-success);
}
.store-badge--pending {
    background: rgba(180, 130, 60, 0.1); color: #8B6914;
}
.store-badge--error {
    background: rgba(197, 48, 48, 0.1); color: var(--color-error);
}
.store-badge--muted {
    background: rgba(99, 94, 79, 0.1); color: var(--color-text-muted);
}

/* --- Flash Messages --- */
.store-flash {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border-radius: 0.5rem;
    margin-bottom: 1rem; font-size: 0.875rem;
}
.store-flash--success {
    background: rgba(39, 103, 73, 0.08); border: 1px solid rgba(39, 103, 73, 0.2);
    color: var(--color-success);
}
.store-flash--error {
    background: rgba(197, 48, 48, 0.08); border: 1px solid rgba(197, 48, 48, 0.2);
    color: var(--color-error);
}

/* --- Quantity Stepper --- */
.qty-stepper {
    display: inline-flex; align-items: center;
    border: 1px solid var(--color-border); border-radius: 0.5rem;
    overflow: hidden;
}
.qty-stepper__btn {
    width: 2.75rem; height: 2.75rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface); border: none;
    color: var(--color-text); cursor: pointer;
    font-size: 1.125rem;
    transition: background 0.15s ease;
}
.qty-stepper__btn:hover { background: var(--color-bg); }
.qty-stepper__value {
    width: 3rem; text-align: center;
    font-size: 0.875rem; font-weight: 600;
    color: var(--color-text);
    border: none; background: transparent;
}

/* --- Hero --- */
.store-hero {
    min-height: 60vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 5rem 1rem;
    background-size: cover; background-position: center;
}
.store-hero--fallback {
    background: var(--color-bg);
    /* v2.27.0: no 60vh floor or 5rem padding — the fallback hero is a compact
       statement, and the first section after it closes the old ~200px gap. */
    min-height: 0;
    padding: var(--space-group) 1rem var(--space-inner);
}
.store-hero__inner {
    width: 100%; max-width: 80rem; margin: 0 auto; /* same rail as .store-section */
    text-align: center;
}
.store-hero__subtitle {
    margin: 0.75rem auto 0; max-width: 36rem;
    font-size: 1.125rem; line-height: 1.6;
    color: var(--color-text-muted);
}
.store-hero--fallback .store-hero__cta { margin-top: 0; }
.store-hero + .store-section { margin-top: var(--space-group); }

/* --- Homepage category tiles (fallback hero) --- */
.home-cats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-item); margin-top: var(--space-group);
    text-align: start;
}
@media (min-width: 768px) {
    /* Fixed-width tracks + centred: 1-3 tiles sit in the middle instead of
       clustering at the start edge; 4 tiles still fill the row. */
    .home-cats { grid-template-columns: repeat(auto-fit, minmax(10rem, 16rem)); justify-content: center; }
}
.cat-tile {
    position: relative; display: block; aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border); border-radius: 0.75rem; overflow: hidden;
    background: var(--color-surface); color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.cat-tile:hover { border-color: var(--color-primary); }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile__name {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    transition: color 0.15s ease;
}
/* Name-only tile (no category image): compact strip, not an empty 4:3 box —
   fixed 5.5rem, name centred, faint primary tint (tokens only). Image tiles
   keep the 4:3 box above. */
.cat-tile--text {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: auto; height: 5.5rem;
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.cat-tile--text .cat-tile__name {
    position: static; background: transparent; border: 0;
    padding: 0.5rem 0.875rem; font-size: 1rem; text-align: center;
}
.cat-tile:hover .cat-tile__name { color: var(--color-primary); }
.store-hero__title {
    font-size: 2.5rem; font-weight: 700; line-height: 1.2;
    max-width: 40rem; margin: 0 auto;
}
.store-hero__cta {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: var(--space-group);
    padding: 0.875rem 2rem; border-radius: 0.5rem;
    font-size: 1rem; font-weight: 600;
    transition: background-color 0.15s ease;
}

/* --- Mobile Menu (slides from right/left based on dir) --- */
.mobile-menu {
    position: fixed; top: 0; z-index: 60;
    width: 80vw; min-width: 280px; max-width: 20rem; height: 100dvh; height: 100vh;
    background: var(--color-surface);
    transition: transform 0.25s ease;
    padding: var(--space-group) var(--space-inner);
    overflow-y: auto;
}
.mobile-menu { right: 0; transform: translateX(100%); }
.mobile-menu--open { transform: translateX(0); }
.mobile-menu-backdrop {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,0.3);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.mobile-menu-backdrop--open { opacity: 1; pointer-events: auto; }

.mobile-menu__link {
    display: block; padding: 0.75rem 0;
    font-size: 1rem; font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
}
.mobile-menu__link:hover { color: var(--color-primary); }

/* --- RTL Adjustments --- */
[dir="rtl"] .checkout-progress { direction: rtl; }
[dir="rtl"] .mobile-menu { left: 0; right: auto; transform: translateX(-100%); }
[dir="rtl"] .mobile-menu.mobile-menu--open { transform: translateX(0); }

/* --- Breadcrumb Links --- */
.breadcrumb-link {
    color: var(--color-text-muted); text-decoration: none;
    transition: color 0.15s;
}
.breadcrumb-link:hover { color: var(--color-primary); }

/* --- WhatsApp Share --- */
.whatsapp-share {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; font-size: 0.875rem;
    color: #15803d; background: #f0fdf4;
    border: 1px solid #bbf7d0; border-radius: 0.5rem;
    text-decoration: none; transition: background 0.15s;
}
.whatsapp-share:hover { background: #dcfce7; }

/* --- Focus Visible (global for storefront) --- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Scrollbar (subtle) --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
/* ============================================================
   v2.31.0 — Train 3 "MR conversion" storefront additions
   (tokens only; every pair AA-checked, see docs/conventions.md)
   ============================================================ */

/* --- WhatsApp buttons + floating click-to-chat --- */
.store-btn--whatsapp {
    background-color: var(--color-whatsapp);
    color: #FFFFFF;
}
.store-btn--whatsapp:hover { background-color: var(--color-whatsapp-dark); }
/* T8: secondary (outline) WhatsApp button — the "order on WhatsApp" path next to the primary add-to-cart. */
.store-btn--whatsapp-outline { background: transparent; color: var(--color-whatsapp-dark); border: 1.5px solid var(--color-whatsapp); }
.store-btn--whatsapp-outline:hover { background: color-mix(in srgb, var(--color-whatsapp) 8%, transparent); }
.store-btn--whatsapp:focus-visible { outline: 2px solid var(--color-whatsapp); outline-offset: 2px; }
.wa-float {
    position: fixed; z-index: 45;
    inset-inline-end: 1.25rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    width: 3.5rem; height: 3.5rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-whatsapp); color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.wa-float:hover { background: var(--color-whatsapp-dark); transform: translateY(-1px); }
.wa-float svg { width: 1.75rem; height: 1.75rem; }
/* Lift the floating button above the sticky add-to-cart bar on phones. */
@media (max-width: 767.98px) {
    body.has-sticky-cart .wa-float { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
}
.wa-cta-card {
    border: 1px solid color-mix(in srgb, var(--color-whatsapp) 35%, transparent);
    background: color-mix(in srgb, var(--color-whatsapp) 6%, var(--color-surface));
}

/* --- Cart drawer (slide-in, v2.31.0) --- */
.cart-drawer-backdrop {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.cart-drawer-backdrop--open { opacity: 1; pointer-events: auto; }
.cart-drawer {
    position: fixed; top: 0; bottom: 0; z-index: 75;
    inset-inline-end: 0;
    width: min(26rem, 100vw);
    background: var(--color-surface);
    box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    visibility: hidden;
}
[dir="rtl"] .cart-drawer { transform: translateX(-100%); box-shadow: 8px 0 30px rgba(0,0,0,0.12); }
.cart-drawer--open { transform: translateX(0); visibility: visible; }
[dir="rtl"] .cart-drawer--open { transform: translateX(0); }
.cart-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border-light);
}
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem; }
.cart-drawer__line {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.75rem; padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border-light);
}
.cart-drawer__img {
    width: 4.5rem; height: 4.5rem; border-radius: 0.5rem; overflow: hidden;
    background: var(--color-bg); display: flex; align-items: center; justify-content: center;
    color: var(--color-border);
}
.cart-drawer__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-drawer__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); text-decoration: none; }
.cart-drawer__title:hover { color: var(--color-primary); }
.cart-drawer__meta { font-size: 0.75rem; color: var(--color-text-muted); }
.cart-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.cart-drawer__total { font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
.cart-drawer__remove {
    background: none; border: none; cursor: pointer; padding: 0.25rem 0.5rem;
    font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); min-height: 2rem;
}
.cart-drawer__remove:hover { color: var(--color-error); }
.cart-drawer__foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.cart-drawer__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.cart-drawer__empty { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }
.cart-drawer .qty-stepper__btn { width: 2.25rem; height: 2.25rem; }
.cart-drawer .qty-stepper__value { width: 2.25rem; }
.cart-drawer__note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.5rem; text-align: center; }
body.drawer-open { overflow: hidden; }

/* --- Sticky mobile add-to-cart bar (product page) --- */
.sticky-cart-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    display: none; align-items: center; gap: 0.75rem;
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
}
.sticky-cart-bar__price { flex: 1; min-width: 0; }
.sticky-cart-bar__label { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cart-bar__value { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.sticky-cart-bar .store-btn { flex: 0 0 auto; min-width: 9.5rem; }
/* Shown only once product-sticky.js has taken over (body.has-sticky-cart) —
   the bar ships with [hidden], so JS-off never paints a dead bar. */
@media (max-width: 767.98px) {
    body.has-sticky-cart .sticky-cart-bar:not([hidden]) { display: flex; }
    body.has-sticky-cart { padding-bottom: 5rem; }
}

/* --- Product card badges + quick add (v2.31.0) --- */
.product-card { position: relative; }
.product-card__link { display: block; text-decoration: none; color: inherit; }
.product-card__badges {
    position: absolute; top: 0.5rem; inset-inline-start: 0.5rem; z-index: 2;
    display: flex; flex-direction: column; gap: 0.25rem; pointer-events: none;
}
.product-card__badge {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.25rem;
    font-size: 0.6875rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border);
}
.product-card__badge--new { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.product-card__badge--sale { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 40%, transparent); }
.product-card__badge--soldout { color: var(--color-text-muted); }
.product-card__quick {
    position: absolute; bottom: 0.5rem; inset-inline-end: 0.5rem; z-index: 2;
    margin: 0;
}
.product-card__quick-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.875rem;
    border-radius: 9999px; border: none; cursor: pointer;
    background: var(--color-primary); color: #FFFFFF;
    font-size: 0.8125rem; font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.product-card__quick-btn:hover { background: var(--color-primary-dark); }
.product-card__quick-btn:disabled { opacity: 0.6; cursor: wait; }
.product-card__quick-btn svg { width: 1.125rem; height: 1.125rem; }
.product-card__quick-btn .product-card__quick-text { display: none; }
@media (min-width: 768px) {
    .product-card__quick { opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; }
    .product-card:hover .product-card__quick, .product-card:focus-within .product-card__quick { opacity: 1; transform: translateY(0); }
    .product-card__quick-btn .product-card__quick-text { display: inline; }
}
/* Server-rendered without a CSRF token (listing pages): hidden until JS wires it. */
.product-card__quick[hidden] { display: none; }

/* --- In-place add toast --- */
.store-toast {
    position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 90;
    max-width: 20rem; width: calc(100% - 2rem);
    padding: 0.75rem 1rem; border-radius: 0.75rem;
    background: var(--color-primary); color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    font-size: 0.875rem; font-weight: 500;
    transition: opacity 0.3s ease;
}
.store-toast--error { background: var(--color-error); }

/* --- Homepage (v2.31.0 imagery-first) --- */
.store-hero--image {
    position: relative; min-height: 60vh; overflow: hidden;
    background-size: cover; background-position: center;
}
.store-hero--image::before {
    content: ""; position: absolute; inset: 0;
    /* 0.55 overlay: white text on the darkest plausible photo stays ≥ 4.5:1 */
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%);
}
.store-hero--image .store-hero__inner { position: relative; padding: var(--space-section) var(--space-group); }
.store-hero--image .store-hero__title, .store-hero--image .store-hero__subtitle { color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.store-hero--image .store-hero__subtitle { color: rgba(255,255,255,0.92); }
.store-hero--image .store-hero__cta { background: #FFFFFF; color: var(--color-primary); }
.store-hero--image .store-hero__cta:hover { background: var(--color-border-light); }
.features-bar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
    max-width: 80rem; margin: var(--space-group) auto 0; padding: 0 1rem;
}
@media (min-width: 768px) { .features-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature-tile {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1rem; border-radius: 0.75rem;
    border: 1px solid var(--color-border-light);
    background: var(--color-surface);
}
.feature-tile svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--color-primary); }
.feature-tile__title { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.feature-tile__sub { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.home-cats--section { margin-top: 0; text-align: start; }
.home-cats--section .cat-tile { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
    .home-cats--section { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
}
.cat-tile--image .cat-tile__name {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    color: #FFFFFF; border-top: 0; padding-top: 1.5rem;
}
.cat-tile--image:hover .cat-tile__name { color: #FFFFFF; }

/* --- Cart page: estimate block + coupon + inline confirm --- */
.cart-estimate {
    border: 1px solid var(--color-border-light); border-radius: 0.75rem;
    padding: var(--space-inner); background: var(--color-surface);
    margin-bottom: var(--space-inner);
}
.cart-estimate__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--color-text-muted); padding: 0.25rem 0; }
.cart-estimate__row--total { border-top: 1px solid var(--color-border); margin-top: 0.5rem; padding-top: 0.75rem; font-size: 1rem; font-weight: 700; color: var(--color-text); }
.cart-estimate__row--total .cart-estimate__val { color: var(--color-primary); }
.cart-estimate__discount { color: var(--color-success); }
/* v2.32.0 promotions: cart rows, drawer rows, card/detail badge */
.cart-estimate__row--promo { color: var(--color-text); }
.cart-estimate__row--save { font-weight: 600; color: var(--color-success); }
.cart-promo-tag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.125rem; height: 1.125rem; border-radius: 0.25rem; margin-inline-end: 0.25rem;
    font-size: 0.6875rem; font-weight: 700; line-height: 1;
    background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); color: var(--color-success);
}
.cart-drawer__promos { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.25rem 0 0.75rem; }
.cart-drawer__promos:empty { display: none; }
.cart-drawer__promo { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.cart-drawer__promo-amt { color: var(--color-success); font-weight: 600; white-space: nowrap; }
.cart-drawer__promo--save { font-weight: 600; color: var(--color-success); border-top: 1px dashed var(--color-border-light); padding-top: 0.25rem; }
.product-card__badge--promo { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }
.promo-badge {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.25rem;
    font-size: 0.75rem; font-weight: 700; line-height: 1.5;
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
}
.promo-list { display: grid; grid-template-columns: 1fr; gap: var(--space-item); }
@media (min-width: 768px) { .promo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promo-card {
    display: flex; flex-direction: column; gap: 0.375rem;
    padding: var(--space-inner); border-radius: 0.75rem;
    border: 1px solid var(--color-border-light); background: var(--color-surface);
}
.promo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.promo-card__name { font-weight: 600; color: var(--color-text); }
.promo-card__desc { font-size: 0.875rem; color: var(--color-text-muted); }
.promo-card__targets { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; }
.promo-card__target {
    font-size: 0.75rem; padding: 0.125rem 0.625rem; border-radius: 9999px;
    border: 1px solid var(--color-border); color: var(--color-text-muted); text-decoration: none;
}
.promo-card__target:hover { color: var(--color-primary); border-color: var(--color-primary); }
.cart-coupon { display: flex; gap: 0.5rem; }
.store-link-btn {
    background: none; border: 0; padding: 0.5rem 0.25rem; min-height: 2.75rem; cursor: pointer;
    font: inherit; font-size: 0.875rem; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 0.2em;
}
.store-link-btn:hover { color: var(--color-error); }
.store-link-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cart-coupon .store-input { flex: 1; min-height: 2.75rem; padding: 0.5rem 0.875rem; font-size: 0.875rem; text-transform: uppercase; }
.cart-coupon__applied { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; }
.cart-coupon__code { font-family: ui-monospace, monospace; font-weight: 700; color: var(--color-primary); }
.confirm-pop {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.5rem 0.75rem; border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
    font-size: 0.8125rem; color: var(--color-text);
}
.confirm-pop__btn {
    min-height: 2.25rem; padding: 0 0.75rem; border-radius: 0.375rem; cursor: pointer;
    font-size: 0.8125rem; font-weight: 600; border: 1px solid transparent;
}
.confirm-pop__btn--yes { background: var(--color-error); color: #FFFFFF; }
.confirm-pop__btn--no { background: transparent; color: var(--color-text); border-color: var(--color-border); }

/* --- Checkout: wallet details inside the selected method + copy buttons --- */
.pay-method__details {
    margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 1px dashed var(--color-border);
    display: flex; flex-direction: column; gap: 0.5rem;
}
.pay-method__details[hidden] { display: none; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; }
.pay-row__label { color: var(--color-text-muted); }
.pay-row__value { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; font-family: ui-monospace, monospace; color: var(--color-primary); }
.copy-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; min-height: 2.25rem; padding: 0 0.5rem; border-radius: 0.375rem;
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text-muted); cursor: pointer; font-size: 0.75rem; font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.copy-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.copy-btn--done { color: var(--color-success); border-color: var(--color-success); }
.copy-btn svg { width: 1rem; height: 1rem; }

/* --- Shipping option rows (server-hidden for the current wilaya) --- */
.ship-option[hidden] { display: none; }
.ship-option { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.ship-option:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.ship-empty { font-size: 0.875rem; color: var(--color-error); padding: 0.75rem; border: 1px dashed var(--color-border); border-radius: 0.5rem; }
.ship-empty[hidden] { display: none; }
select.store-input { appearance: auto; }

/* --- Checkout step 1 (T8): region hint, numbered wallet steps, mini-summary --- */
.ship-hint { font-size: 0.875rem; color: var(--color-text-muted); padding: 0.75rem; border: 1px dashed var(--color-border); border-radius: 0.5rem; background: var(--color-bg); }
.ship-hint[hidden], [data-ship-list][hidden], [data-address-city][hidden], [data-address-postal][hidden] { display: none; }
.pay-steps { margin: 0 0 0.5rem; padding-inline-start: 1.25rem; font-size: 0.8125rem; color: var(--color-text); line-height: 1.6; }
.pay-steps li { margin-bottom: 0.25rem; }
.checkout-summary summary::-webkit-details-marker { display: none; }
.checkout-more summary { list-style: none; }
.checkout-more summary::-webkit-details-marker { display: none; }
.checkout-more summary::before { content: "+ "; font-weight: 700; }
.checkout-more[open] summary::before { content: "− "; }

/* --- Option group pulse (T8, S-12): the sticky bar points at what to choose --- */
@keyframes option-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.option-pulse { animation: option-pulse 0.9s ease-out 2; border-radius: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .option-pulse { animation: none; outline: 2px solid var(--color-primary); outline-offset: 6px; } }

/* --- Phone field with dial-code badge (T8, S-03) --- */
.phone-field { position: relative; }
.phone-field__badge {
    position: absolute; inset-block: 0; inset-inline-start: 0.875rem;
    display: flex; align-items: center; pointer-events: none;
    font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); direction: ltr;
}
.phone-field .store-input { padding-inline-start: 3.5rem; letter-spacing: 0.04em; }
.phone-field:not(:has(.phone-field__badge)) .store-input { padding-inline-start: 1rem; }

/* --- Post-checkout account nudge --- */
.account-nudge { border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); }

/* ===== catalog depth (was store_styles_catalog.html) ===== */
/* --- Faceted filters (pf = product filters) --- */
.pf { margin-bottom: var(--space-group); }
.pf__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.pf__count { color: var(--color-text-muted); font-size: 0.875rem; }
.pf__toggle { display: none; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.pf__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pf__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 0.75rem; }
.pf__panel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.75rem; }
.pf__panel-head, .pf__panel-foot { display: none; }
.pf-group { position: relative; }
.pf-group > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.5rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 0.875rem; cursor: pointer; user-select: none; white-space: nowrap; }
.pf-group > summary::-webkit-details-marker { display: none; }
.pf-group > summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.7; }
.pf-group[open] > summary { border-color: var(--color-primary); color: var(--color-primary); }
.pf-group > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pf-group--active > summary { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); border-color: var(--color-primary); }
.pf-group__body { position: absolute; inset-inline-start: 0; top: calc(100% + 0.4rem); z-index: 30; min-width: 14rem; max-width: 20rem; max-height: 22rem; overflow: auto; padding: 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.pf-option { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0.25rem 0.25rem; border-radius: 0.5rem; color: var(--color-text); font-size: 0.875rem; cursor: pointer; }
.pf-option:hover { background: var(--color-border-light); }
.pf-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); flex-shrink: 0; }
.pf-option__count { margin-inline-start: auto; color: var(--color-text-muted); font-size: 0.75rem; }
.pf-price { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pf-price .store-input { min-height: 44px; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.pf-price__hint { grid-column: 1 / -1; color: var(--color-text-muted); font-size: 0.75rem; }
.pf__select { min-height: 44px; padding: 0.5rem 2rem 0.5rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 0.875rem; }
.pf__apply { min-height: 44px; }
.pf__clear { align-self: center; color: var(--color-text-muted); font-size: 0.875rem; text-decoration: underline; padding: 0.5rem; }
.pf__clear:hover { color: var(--color-text); }
.pf__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.pf-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.25rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); color: var(--color-text); font-size: 0.8125rem; text-decoration: none; }
.pf-chip:hover { border-color: var(--color-primary); }
.pf-chip__x { font-size: 1rem; line-height: 1; color: var(--color-text-muted); }
@media (max-width: 767px) {
  .pf--js .pf__toggle { display: inline-flex; }
  .pf--js .pf__panel { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; background: var(--color-surface); overflow-y: auto; }
  .pf--js.pf--open .pf__panel { display: flex; }
  .pf--js .pf__panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--color-border); font-weight: 600; }
  .pf--js .pf__panel-foot { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 1rem; border-top: 1px solid var(--color-border); position: sticky; bottom: 0; background: var(--color-surface); }
  .pf--js .pf-group { border-bottom: 1px solid var(--color-border-light); }
  .pf--js .pf-group > summary { width: 100%; border: none; border-radius: 0; padding: 0.9rem 1rem; justify-content: space-between; }
  .pf--js .pf-group__body { position: static; max-width: none; border: none; box-shadow: none; padding: 0 1rem 0.75rem; }
  .pf--js .pf__select { margin: 0.75rem 1rem; }
  .pf--js .pf__panel > .pf__apply, .pf--js .pf__panel > .pf__clear { display: none; }
  .pf__close { min-width: 44px; min-height: 44px; border: none; background: none; font-size: 1.5rem; line-height: 1; color: var(--color-text); cursor: pointer; }
  body.pf-lock { overflow: hidden; }
}

/* --- Tag chips --- */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.tag-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0.15rem 0.7rem; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.8125rem; text-decoration: none; }
.tag-chip:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* --- Size guide (details → modal when JS runs) --- */
.size-guide { margin: 0.25rem 0 1rem; }
.size-guide > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--color-primary); font-size: 0.875rem; font-weight: 500; text-decoration: underline; cursor: pointer; }
.size-guide > summary::-webkit-details-marker { display: none; }
.size-guide__panel { margin-top: 0.75rem; }
.size-guide__table { overflow-x: auto; }
.size-guide__table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.size-guide__table th, .size-guide__table td { border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; text-align: start; }
.size-guide__table th { background: var(--color-border-light); font-weight: 600; }
.size-guide__close { display: none; }
.size-guide--modal[open] .size-guide__panel { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; margin: 0; padding: 1rem; background: rgba(0,0,0,0.55); }
.size-guide--modal[open] .size-guide__dialog { width: min(40rem, 100%); max-height: 90vh; overflow: auto; padding: 1.25rem; background: var(--color-surface); border-radius: 1rem; }
.size-guide--modal .size-guide__close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: none; background: none; font-size: 1.5rem; cursor: pointer; color: var(--color-text); }
.size-guide__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }

/* --- Product video --- */
.pv-thumb { position: relative; }
.pv-thumb__badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); color: #fff; font-size: 1.25rem; pointer-events: none; }
.pv-thumb--empty { background: var(--color-border-light); }
.pv-player { display: none; aspect-ratio: 16 / 9; background: #000; }
.pv-player--on { display: block; }
.pv-player video, .pv-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.pv-nojs { margin-top: 0.75rem; }
.pv-nojs > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--color-primary); font-size: 0.875rem; font-weight: 500; cursor: pointer; text-decoration: underline; }
.pv-nojs > summary::-webkit-details-marker { display: none; }
.pv-nojs video { width: 100%; max-height: 60vh; background: #000; margin-top: 0.5rem; }
.pv-js .pv-nojs { display: none; }

/* --- Review photos --- */
.rv-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.rv-photos a { display: block; width: 72px; height: 72px; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--color-border); }
.rv-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-field__hint { display: block; margin-top: 0.25rem; color: var(--color-text-muted); font-size: 0.75rem; }
.rv-lightbox { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.9); }
.rv-lightbox--open { display: flex; }
.rv-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; }
.rv-lightbox__close { position: absolute; top: 1rem; inset-inline-end: 1rem; min-width: 44px; min-height: 44px; border: none; background: none; color: #fff; font-size: 2rem; cursor: pointer; }

/* ===== homepage sections (was store_styles_home.html) ===== */
.home-sec__sub { color: var(--color-text-muted); margin-top: 0.25rem; }
/* Announcement strip (in-page, distinct from the top announcement bar). */
.home-strip { border-radius: 0.75rem; padding: 0.875rem 1.25rem; text-align: center; font-size: 0.95rem; font-weight: 600; margin-top: var(--space-group); margin-bottom: var(--space-group); }
.home-strip__link { text-decoration: underline; text-underline-offset: 3px; }
.home-strip__sub { display: block; font-weight: 400; font-size: 0.85rem; opacity: 0.92; margin-top: 0.25rem; }
/* Rich text / banner */
.home-rich { display: grid; gap: var(--space-group); align-items: center; }
.home-rich--image { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .home-rich--image { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.home-rich--center { text-align: center; }
.home-rich--center .home-rich__body { margin: 0 auto; max-width: 42rem; }
.home-rich__media img { width: 100%; height: auto; border-radius: 0.75rem; display: block; object-fit: cover; }
.home-rich__lead { color: var(--color-text-muted); margin-top: 0.5rem; }
.home-rich__text { margin-top: var(--space-inner); color: var(--color-text); }
.home-rich__text p + p { margin-top: 0.75rem; }
.home-rich__cta { margin-top: var(--space-item); }
/* Testimonials — horizontal snap carousel on phones, 3-up grid on desktop. */
.home-quotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 80%); gap: var(--space-item); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) { .home-quotes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
.home-quote { scroll-snap-align: start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: var(--space-item); margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.home-quote__stars { color: #B8860B; letter-spacing: 0.1em; font-size: 0.95rem; }
.home-quote__body { margin: 0; color: var(--color-text); line-height: 1.6; }
.home-quote__title { display: block; margin-bottom: 0.25rem; }
.home-quote__meta { font-size: 0.85rem; color: var(--color-text-muted); }
.home-quote__product { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Image grid — Instagram-style square tiles. */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-tight); }
@media (min-width: 640px) { .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-inner); } }
.home-grid__tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0.5rem; background: var(--color-border-light); }
.home-grid__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.home-grid__tile:hover img { transform: scale(1.03); }
.home-grid__cap { position: absolute; inset-inline: 0; bottom: 0; padding: 0.5rem 0.75rem; font-size: 0.8rem; color: #FFFFFF; background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0)); }
/* Signup */
.home-signup__inner { padding: var(--space-group) var(--space-item); text-align: center; }
.home-signup__sub { color: var(--color-text-muted); margin: 0.5rem auto var(--space-item); max-width: 36rem; }
.home-signup__form { display: grid; gap: var(--space-inner); max-width: 28rem; margin: 0 auto; text-align: start; }
.home-signup__consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); }
.home-signup__consent input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--color-primary); }
.home-signup .store-flash { max-width: 28rem; margin: 0 auto; }

/* --- T8 (S-07/S-13) phone-first spacing: hero ≤45vh, text on the dark bottom band, tighter sections --- */
@media (max-width: 767.98px) {
    .store-section { margin-top: 1.5rem; margin-bottom: 2rem; }
    .store-hero + .store-section { margin-top: 1.5rem; }
    .store-hero--image { min-height: 40vh; max-height: 45vh; align-items: flex-end; }
    .store-hero--image .store-hero__inner { padding: 1.25rem 1rem 1.5rem; }
    .store-hero--image .store-hero__title { font-size: 1.75rem; }
    .store-hero--image .store-hero__subtitle { font-size: 1rem; margin-top: 0.375rem; }
    .store-hero--image .store-hero__cta { margin-top: 1rem; }
    .features-bar { margin-top: 1rem; }
}
/* Bottom-only gradient: the photo stays a photo; white text sits on the dark band (≥4.5:1 at the bottom third). */
.store-hero--image::before { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.72) 100%); }
.store-hero--image .store-hero__title, .store-hero--image .store-hero__subtitle { text-shadow: 0 1px 3px rgba(0,0,0,0.45); }