/* ==========================================================================
   Vitorize Storefront — Design System v2 (per design_handoff_vitorize)
   Premium gaming/digital marketplace · Persian RTL + English LTR
   Light + Dark themes (dedicated palettes) · Peyda + Funnel Display · .st-* / --st-*

   Brand identity:
   · Signature clipped-corner shape: small radius on top-start, large elsewhere
   · Soft glassmorphism surfaces (blur + saturate) with tinted 1px borders
   · Aurora teal radial glows on the page background
   · Folded-corner price ribbons on the accent gradient
   · All geometry is direction-aware — tokens flip under [dir="rtl"]
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Storefront fonts (self-hosted)
   -------------------------------------------------------------------------- */
html, body { margin: 0; min-height: 100%; max-width: 100%; overflow-x: clip; }
body { background: var(--st-bg, #fff); }

/* Vazirmatn — the application's default UI face. Same local webfonts the admin panel uses,
   so the storefront can never be left rendering a browser default when a configured
   brand font is absent or fails to load. */
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn/fonts/webfonts/Vazirmatn-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn/fonts/webfonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn/fonts/webfonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn/fonts/webfonts/Vazirmatn-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn/fonts/webfonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn/fonts/webfonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("/fonts/storefront/peyda-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Peyda"; src: url("/fonts/storefront/peyda-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Peyda"; src: url("/fonts/storefront/peyda-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Peyda"; src: url("/fonts/storefront/peyda-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Peyda"; src: url("/fonts/storefront/peyda-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Peyda"; src: url("/fonts/storefront/peyda-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

@font-face { font-family: "Funnel Display"; src: url("/fonts/storefront/funnel-display-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("/fonts/storefront/funnel-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("/fonts/storefront/funnel-display-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("/fonts/storefront/funnel-display-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("/fonts/storefront/funnel-display-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("/fonts/storefront/funnel-display-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: "Manrope"; src: url("/fonts/storefront/manrope-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/storefront/manrope-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/storefront/manrope-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/storefront/manrope-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/storefront/manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/storefront/manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   1 · Design tokens — Light (default)
   -------------------------------------------------------------------------- */
:root {
    /* The UA paints scrollbars (page and inner) from color-scheme, not from CSS tokens; without
       this the dark theme keeps bright light-mode scrollbars on every scrollable surface. */
    color-scheme: light;
    /* brand */
    --st-primary: #0D9488;
    --st-primary-2: #0891B2;
    --st-accent: #2DD4BF;
    --st-accent-2: #22D3EE;
    --st-grad: linear-gradient(135deg, #0D9488, #0891B2);
    --st-grad-accent: linear-gradient(135deg, #2DD4BF, #22D3EE);
    --st-on-grad: #ffffff;          /* text on --st-grad */
    --st-on-accent: #06251f;        /* text on --st-grad-accent — always */
    --st-primary-soft: rgba(13, 148, 136, 0.08);
    --st-primary-border: rgba(13, 148, 136, 0.3);

    /* page + surfaces */
    --st-bg: #ffffff;
    --st-bg-grad: linear-gradient(180deg, #F7FBFA 0%, #FFFFFF 40%, #F4FAF9 100%);
    --st-surface: rgba(255, 255, 255, 0.72);   /* glass — pair with blur */
    --st-surface-2: #F4FAF9;                    /* solid subtle fill */
    --st-elevated: #ffffff;                     /* solid surface (menus, toasts) */
    --st-chip: rgba(13, 148, 136, 0.08);
    --st-header-bg: rgba(255, 255, 255, 0.78);
    --st-hero-bg: linear-gradient(135deg, #0B1420, #0F2B28 60%, #0B1420);
    --st-aurora: 0.4;

    /* borders */
    --st-border: rgba(13, 148, 136, 0.14);
    --st-border-2: rgba(13, 148, 136, 0.32);
    --st-input-border: rgba(15, 23, 42, 0.12);
    --st-input-bg: #ffffff;

    /* text */
    --st-text: #0F172A;
    --st-text-2: rgba(15, 23, 42, 0.6);
    --st-muted: #64748B;

    /* semantic */
    --st-success: #15803D;  --st-on-success: #FFFFFF; --st-success-soft: rgba(22, 163, 74, 0.1);
    --st-warning: #B45309;  --st-on-warning: #FFFFFF; --st-warning-soft: rgba(217, 119, 6, 0.1);
    --st-danger: #DC2626;   --st-on-danger: #FFFFFF; --st-danger-soft: rgba(220, 38, 38, 0.1);
    --st-info: #0891B2;     --st-info-soft: rgba(8, 145, 178, 0.1);
    --st-amber: #F59E0B;

    /* elevation */
    --st-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.05);
    --st-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    --st-shadow-lg: 0 20px 44px rgba(15, 23, 42, 0.12);
    --st-shadow-btn: 0 10px 22px rgba(13, 148, 136, 0.24);
    --st-card-hover: 0 18px 40px rgba(13, 148, 136, 0.18);
    --st-glow: none;
    --st-ring: 0 0 0 3px rgba(13, 148, 136, 0.16);

    /* shared four-corner radii */
    --st-clip-sm: 18px;      /* small cards, tiles */
    --st-clip: 22px;         /* cards, tables, modals */
    --st-clip-xl: 32px;      /* hero panels, CTA bands */
    --st-clip-menu: 16px;    /* dropdowns, quick bars */
    --st-clip-btn: 13px;     /* buttons */
    --st-clip-media: 14px;   /* card media, skeleton media */
    --st-ribbon-clip: polygon(14px 0, 100% 0, 100% 100%, 0 100%);

    /* plain radii */
    --st-radius: 14px;
    --st-radius-lg: 20px;
    --st-radius-xl: 26px;

    /* motion */
    --st-t-fast: 160ms;
    --st-t-med: 220ms;
    --st-t-slow: 300ms;
    --st-ease: ease;
    --st-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

    /* layout */
    --st-header-h: 70px;

    /* One typography contract for the whole application. The storefront and the admin panel used to
       define their own faces independently, so a font chosen in Settings reached the shop and left the
       admin panel on its hard-coded Vazirmatn - which is why "some parts still use a different font".
       Both --st-font (storefront) and --font (admin) now alias --vz-font, and the runtime override in
       App.razor rewrites these three variables on :root, so one choice governs every shell.

       Persian and Latin are separate faces on purpose: Peyda covers Arabic-script codepoints only (see
       its unicode-range), so Latin text and Western digits are served by a companion rather than
       falling through to Tahoma. The last real family is a bundled face, so the chain never lands on
       system-ui/Arial/Times whatever an administrator selects. */
    --vz-font-fa: "Peyda";
    --vz-font-en: "Funnel Display", "Manrope";
    --vz-font: var(--vz-font-fa), var(--vz-font-en), "Vazirmatn", Tahoma, sans-serif;

    /* Kept as aliases so existing rules and any saved customisation keep working unchanged. */
    --font-fa: var(--vz-font-fa);
    --font-en: var(--vz-font-en);
    --st-font: var(--vz-font);

    /* legacy aliases (older markup) */
    --st-brand: var(--st-primary);
    --st-brand-2: var(--st-primary);
    --st-brand-3: var(--st-accent);
    --st-brand-grad: var(--st-grad);
    --st-brand-grad-2: var(--st-grad-accent);
    --bg-page: var(--st-bg); --bg-surface: var(--st-surface); --bg-surface-elevated: var(--st-elevated);
    --bg-input: var(--st-input-bg); --bg-dropdown: var(--st-elevated); --bg-hover: var(--st-surface-2);
    --bg-selected: var(--st-primary-soft); --text-primary: var(--st-text); --text-secondary: var(--st-text-2);
    --text-muted: var(--st-muted); --text-placeholder: var(--st-muted); --text-disabled: var(--st-muted);
    --border-default: var(--st-border); --border-strong: var(--st-border-2); --focus-ring: var(--st-primary);
    --shadow-elevated: var(--st-shadow-lg);
}

/* --------------------------------------------------------------------------
   1b · Dark theme — dedicated palette, not an inversion
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --st-grad: var(--st-grad-accent);
    --st-on-grad: #06251f;
    --st-primary: #2DD4BF;
    --st-primary-soft: rgba(45, 212, 191, 0.12);
    --st-primary-border: rgba(45, 212, 191, 0.35);

    --st-bg: #0B1420;
    --st-bg-grad: linear-gradient(180deg, #0B1420 0%, #0E1B26 50%, #0B1420 100%);
    --st-surface: rgba(255, 255, 255, 0.045);
    --st-surface-2: rgba(255, 255, 255, 0.05);
    --st-elevated: #101B27;
    --st-chip: rgba(45, 212, 191, 0.12);
    --st-header-bg: rgba(11, 20, 32, 0.78);
    --st-aurora: 1;

    --st-border: rgba(45, 212, 191, 0.16);
    --st-border-2: rgba(45, 212, 191, 0.3);
    --st-input-border: rgba(241, 245, 249, 0.14);
    --st-input-bg: rgba(255, 255, 255, 0.05);

    --st-text: #F1F5F9;
    --st-text-2: rgba(241, 245, 249, 0.62);
    --st-muted: #94A3B8;

    --st-success: #4ADE80;  --st-on-success: #06251F; --st-success-soft: rgba(74, 222, 128, 0.14);
    --st-warning: #FBBF24;  --st-on-warning: #422006; --st-warning-soft: rgba(251, 191, 36, 0.14);
    --st-danger: #F87171;   --st-on-danger: #450A0A; --st-danger-soft: rgba(248, 113, 113, 0.14);
    --st-info: #22D3EE;     --st-info-soft: rgba(34, 211, 238, 0.14);
    --st-amber: #FBBF24;

    --st-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --st-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --st-shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.5);
    --st-shadow-btn: 0 10px 22px rgba(45, 212, 191, 0.28);
    --st-card-hover: 0 0 0 1px rgba(45, 212, 191, 0.3), 0 18px 44px rgba(0, 0, 0, 0.55);
    --st-glow: 0 0 0 1px rgba(45, 212, 191, 0.22), 0 0 26px rgba(45, 212, 191, 0.14);
    --st-ring: 0 0 0 3px rgba(45, 212, 191, 0.22);

    --st-brand-2: var(--st-accent);
}

/* --------------------------------------------------------------------------
   1c · RTL — keep directional ribbon tails on the reading start side
   -------------------------------------------------------------------------- */
[dir="rtl"] {
    --st-ribbon-clip: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   2 · Base shell + aurora background
   -------------------------------------------------------------------------- */
.st-shell {
    min-height: 100vh;
    background: var(--st-bg-grad);
    color: var(--st-text);
    font-family: var(--st-font);
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    transition: background var(--st-t-slow) var(--st-ease), color var(--st-t-slow) var(--st-ease);
}
/* ------------------------------------------------------------------ font contract
   The application font used to be applied to .st-shell only, so <body> itself resolved to the
   browser default serif ("Times New Roman") and any element rendered outside the shell inherited
   it. Anchoring it at the root makes the font a property of the document, not of one container.

   Native form controls do NOT inherit typography from their parent: a <button> or <select> uses the
   user agent's own font (Arial in Chromium) unless told otherwise. Components that happened to
   declare `font-family: inherit` looked right while ones that did not - the product variant cards
   and the quantity stepper among them - rendered in Arial beside Persian text. One normalisation
   removes the whole class of bug instead of patching each control as it is noticed.

   Only font-family is inherited here: font-size and font-weight stay with each component, so this
   cannot shift any existing layout. */
/* Only the root element is set here. admin.css declares its own `html, body` font using the admin
   --font token and is linked before this file, so claiming `body` too would let the storefront's
   brand font leak into the admin panel at equal specificity. Setting `html` alone keeps the safety
   net (nothing can fall back to the browser serif) while leaving each shell its own typography. */
html {
    font-family: var(--st-font);
}

button,
input,
select,
textarea,
optgroup,
option {
    font-family: inherit;
}

/* Same reasoning as the font normalisation above, for colour. The UA stylesheet paints buttons with
   an explicit black `buttontext` that does not inherit, so any custom button that never declared its
   own colour - the product variant cards were the reported case - rendered black text in both themes:
   unremarkable on the light surface, invisible on the dark one. Inheriting resolves to the shell's
   themed text colour, and every styled button that declares its own colour still wins. */
button {
    color: inherit;
}

.st-shell::before,
.st-shell::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--st-aurora);
    transition: opacity var(--st-t-slow) var(--st-ease);
}
.st-shell::before {
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.16), transparent 65%);
    top: -160px; inset-inline-start: -140px;
    animation: st-aurora-1 18s ease-in-out infinite;
}
.st-shell::after {
    width: 440px; height: 440px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.12), transparent 65%);
    bottom: -140px; inset-inline-end: -120px;
    animation: st-aurora-2 22s ease-in-out infinite;
}
.st-shell * { box-sizing: border-box; }
.st-shell a { color: inherit; text-decoration: none; }
.st-shell ::selection { background: rgba(45, 212, 191, 0.3); }
.st-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.st-main { flex: 1; padding: 26px 0 60px; }

/* --------------------------------------------------------------------------
   3 · Typography
   h1 25–34/800 · h2 21–30/800 · card title 15/700 · body 13.5–15 · meta 11–12.5
   Persian body line-height 1.65–1.85 · prices keep Latin digits
   -------------------------------------------------------------------------- */
.st-shell h1, .st-shell h2, .st-shell h3, .st-shell h4 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
.st-shell h1 { font-size: clamp(25px, 3vw, 34px); line-height: 1.4; }
.st-shell h2 { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.45; letter-spacing: -0.02em; }
.st-shell h3 { font-size: 17px; font-weight: 700; }
.st-shell h4 { font-size: 15px; font-weight: 700; }
.st-shell p { line-height: 1.8; }
.st-muted { color: var(--st-muted); }
.vz-error-ui { display: none; position: fixed; bottom: 0; inset-inline: 0; background: var(--st-surface-2); color: var(--st-warning); padding: 12px 20px; box-shadow: var(--st-shadow-lg); z-index: 1000; text-align: center; }
#blazor-error-ui .reload { color: var(--st-primary); font-weight: 700; margin: 0 8px; }
#blazor-error-ui .dismiss { cursor: pointer; float: left; }
.st-mono, .st-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* section heading with animated gradient underline */
.st-heading { position: relative; padding-bottom: 12px; }
.st-heading::after {
    content: ""; position: absolute; bottom: 0; inset-inline-start: 0;
    height: 3px; width: 52px; border-radius: 3px;
    background: var(--st-grad-accent);
    animation: st-underline 600ms var(--st-ease) both;
}
.st-section { margin-top: 48px; }
.st-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.st-section__title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.st-section__title .bar { width: 5px; height: 22px; border-radius: 4px; background: var(--st-grad-accent); }
.st-section__more { font-size: 13px; color: var(--st-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

/* --------------------------------------------------------------------------
   4 · Buttons — 800 weight, clipped-corner radius, lift on hover
   -------------------------------------------------------------------------- */
.st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px;
    border-radius: var(--st-clip-btn);
    border: 1px solid transparent;
    font-size: 13.5px; font-weight: 800; font-family: inherit;
    cursor: pointer; white-space: nowrap;
    background: var(--st-elevated); color: var(--st-text);
    transition: transform var(--st-t-fast) var(--st-ease), box-shadow var(--st-t-fast) var(--st-ease),
                background var(--st-t-fast) var(--st-ease), color var(--st-t-fast) var(--st-ease),
                border-color var(--st-t-fast) var(--st-ease), filter var(--st-t-fast) var(--st-ease);
}
.st-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.st-btn:focus-visible { outline: none; box-shadow: var(--st-ring); }
.st-btn:active:not(:disabled) { transform: translateY(0) scale(0.99); }

.st-btn--primary { background: var(--st-grad); color: var(--st-on-grad); box-shadow: var(--st-shadow-btn); }
.st-btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(13, 148, 136, 0.32); }
:root[data-theme="dark"] .st-btn--primary:hover:not(:disabled) { box-shadow: 0 16px 32px rgba(45, 212, 191, 0.4); }

.st-btn--accent { background: var(--st-grad-accent); color: var(--st-on-accent); box-shadow: 0 12px 26px rgba(45, 212, 191, 0.35); }
.st-btn--accent:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(45, 212, 191, 0.45); }

.st-btn--outline { background: transparent; border-color: var(--st-border-2); color: var(--st-text); }
.st-btn--outline:hover:not(:disabled) { border-color: var(--st-primary); color: var(--st-primary); background: var(--st-primary-soft); }

.st-btn--ghost { background: transparent; color: var(--st-text-2); }
.st-btn--ghost:hover:not(:disabled) { background: var(--st-surface-2); color: var(--st-text); }

.st-btn--danger { background: var(--st-danger); color: var(--st-on-danger); }
.st-btn--danger:hover:not(:disabled) { filter: brightness(1.08); }

.st-btn--sm { height: 36px; padding: 0 14px; font-size: 12.5px; }
.st-btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }
.st-btn--block { width: 100%; }

.st-iconbtn {
    width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--st-border); background: var(--st-elevated); color: var(--st-text-2);
    display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer;
    transition: all var(--st-t-fast) var(--st-ease);
}
.st-iconbtn:hover { color: var(--st-primary); border-color: var(--st-primary-border); }
.st-iconbtn .badge {
    position: absolute; top: -6px; inset-inline-start: -6px;
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px;
    background: var(--st-grad); color: var(--st-on-grad);
    font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--st-glow);
}

/* --------------------------------------------------------------------------
   5 · Form controls
   -------------------------------------------------------------------------- */
.st-input, .st-select, .st-textarea {
    width: 100%; min-height: 46px;
    border: 1px solid var(--st-input-border); border-radius: 12px;
    padding: 11px 14px;
    background: var(--st-input-bg); color: var(--st-text);
    font-size: 13.5px; font-family: inherit;
    transition: border-color var(--st-t-fast) var(--st-ease), box-shadow var(--st-t-fast) var(--st-ease);
}
.st-input::placeholder, .st-textarea::placeholder { color: var(--st-muted); }

/* --------------------------------------------------------------------------
   Persian date field
   The calendar and its buttons previously came from admin.css, which the customer pages load only
   because /customer/* is treated as an admin-asset route. That made one field on the identity form
   look like it belonged to a different product - 44px tall against its neighbours' 46px, a different
   radius, border and focus ring - and left it unstyled the moment that route rule changed. These
   rules put it on the storefront tokens the rest of the form already uses.
   -------------------------------------------------------------------------- */
.st-datepicker { position: relative; }
.st-datepicker .vz-datepicker__entry { display: flex; align-items: center; gap: 6px; }
.st-datepicker .st-datepicker__entry { min-width: 0; flex: 1; direction: ltr; text-align: center; }
.st-datepicker .vz-iconaction {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--st-input-border); border-radius: 12px;
    background: var(--st-input-bg); color: var(--st-text-2); cursor: pointer;
    font-family: inherit;
    transition: border-color var(--st-t-fast) var(--st-ease), color var(--st-t-fast) var(--st-ease);
}
.st-datepicker .vz-iconaction:hover:not(:disabled) { border-color: var(--st-primary); color: var(--st-primary); }
.st-datepicker .vz-iconaction:disabled { opacity: .55; cursor: not-allowed; }
.st-datepicker.is-readonly .vz-datepicker__entry { opacity: .65; }

/* The popup calendar, on storefront surfaces. */
.st-datepicker .vz-cal {
    position: absolute; z-index: 120; inset-inline-start: 0; top: calc(100% + 8px);
    width: min(320px, calc(100vw - 32px)); padding: 14px;
    background: var(--st-elevated); color: var(--st-text);
    border: 1px solid var(--st-border); border-radius: 16px; box-shadow: var(--st-shadow-lg);
}
.st-datepicker .vz-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.st-datepicker .vz-cal__head--selectors { gap: 8px; }
.st-datepicker .vz-cal__head--selectors .st-input,
.st-datepicker .vz-cal__head--selectors .vz-input { min-height: 38px; padding: 6px 10px; font-size: 12.5px; }
.st-datepicker .vz-cal__title { font-weight: 700; font-size: 13px; }
.st-datepicker .vz-cal__nav {
    width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--st-border);
    background: var(--st-surface-2); color: var(--st-text); cursor: pointer; font-family: inherit;
}
.st-datepicker .vz-cal__nav:disabled { opacity: .45; cursor: not-allowed; }
.st-datepicker .vz-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.st-datepicker .vz-cal__dow { text-align: center; font-size: 10.5px; color: var(--st-muted); padding: 4px 0; }
.st-datepicker .vz-cal__day {
    aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: 9px;
    background: none; color: var(--st-text); font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.st-datepicker .vz-cal__day:hover:not(:disabled):not(.empty) { background: var(--st-surface-2); }
.st-datepicker .vz-cal__day.selected { background: var(--st-primary-soft); border-color: var(--st-primary); font-weight: 700; }
.st-datepicker .vz-cal__day.today { border-color: var(--st-border-2); }
.st-datepicker .vz-cal__day:disabled { opacity: .35; cursor: not-allowed; }
.st-datepicker .vz-cal__day.empty { cursor: default; }
.st-datepicker .vz-cal__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.st-datepicker .vz-cal__foot button {
    background: none; border: none; color: var(--st-primary);
    font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.st-datepicker .vz-cal__foot button.clear { color: var(--st-muted); }

.st-shell :is(input[type="email"], input[type="url"], input[type="number"], input[inputmode="tel"], input[inputmode="numeric"]) { direction: ltr; text-align: start; }
.st-textarea { min-height: 110px; resize: vertical; line-height: 1.85; }
.st-input:focus, .st-select:focus, .st-textarea:focus { outline: none; border-color: var(--st-primary); box-shadow: var(--st-ring); }
.st-input.invalid, .st-select.invalid, .st-textarea.invalid { border-color: var(--st-danger); }
.st-label { font-size: 12.5px; font-weight: 700; margin-bottom: 7px; display: block; }
.st-field { margin-bottom: 16px; }
.st-hint { font-size: 11.5px; color: var(--st-muted); margin-top: 5px; }
.st-error { font-size: 11.5px; color: var(--st-danger); margin-top: 5px; }
.st-btn--surface-danger { background: var(--st-elevated); color: var(--st-danger); }

/* custom checkbox — 17px, rounded 6 */
.st-check { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; color: var(--st-text-2); cursor: pointer; }
.st-check input {
    appearance: none; -webkit-appearance: none;
    width: 17px; height: 17px; flex: 0 0 17px;
    border-radius: 6px; border: 1.5px solid var(--st-input-border);
    background: var(--st-input-bg);
    display: inline-grid; place-content: center;
    cursor: pointer; margin: 0;
    transition: background var(--st-t-fast) var(--st-ease), border-color var(--st-t-fast) var(--st-ease);
}
.st-check input:checked { background: var(--st-grad); border-color: transparent; }
.st-check input:checked::before {
    content: ""; width: 9px; height: 5px;
    border: 2px solid var(--st-on-grad); border-top: 0; border-right: 0;
    transform: rotate(-45deg) translateY(-1px);
}
.st-check input:focus-visible { outline: none; box-shadow: var(--st-ring); }
.st-check:hover { color: var(--st-text); }

/* toggle switch — 40 × 22 */
.st-switch {
    appearance: none; -webkit-appearance: none;
    position: relative; width: 40px; height: 22px; flex: 0 0 40px;
    border-radius: 100px; border: 1px solid var(--st-input-border);
    background: var(--st-chip); cursor: pointer; margin: 0;
    transition: background var(--st-t-med) var(--st-ease), border-color var(--st-t-med) var(--st-ease);
}
.st-switch::before {
    content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform var(--st-t-med) var(--st-ease-sheet);
}
.st-switch:checked { background: var(--st-grad); border-color: transparent; }
.st-switch:checked::before { transform: translateX(18px); }
[dir="rtl"] .st-switch:checked::before { transform: translateX(-18px); }
.st-switch:focus-visible { outline: none; box-shadow: var(--st-ring); }

/* price range slider */
.st-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--st-chip); outline: none; cursor: pointer; }
.st-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--st-elevated); border: 2px solid var(--st-primary);
    box-shadow: var(--st-shadow); cursor: grab;
}
.st-range::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--st-elevated); border: 2px solid var(--st-primary);
    box-shadow: var(--st-shadow); cursor: grab;
}
.st-range:active::-webkit-slider-thumb { cursor: grabbing; }

/* quantity stepper */
.st-qty { display: inline-flex; align-items: center; border: 1px solid var(--st-input-border); border-radius: 11px; overflow: hidden; }
.st-qty button { width: 40px; height: 42px; border: none; background: var(--st-surface-2); color: var(--st-text); font-size: 18px; cursor: pointer; transition: background var(--st-t-fast) var(--st-ease); }
.st-qty button:hover { background: var(--st-chip); }
.st-qty button:disabled { opacity: .45; cursor: not-allowed; }
.st-qty span { width: 50px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-shell input.st-qty__input { width: 64px; height: 42px; box-sizing: border-box; padding: 0; border: none; border-inline: 1px solid var(--st-input-border); background: var(--st-surface); color: var(--st-text); direction: ltr; text-align: center; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; outline: none; appearance: textfield; -moz-appearance: textfield; }
.st-qty__input:focus { box-shadow: inset 0 0 0 1px var(--st-input-border); }
.st-qty__input::-webkit-inner-spin-button,
.st-qty__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* --------------------------------------------------------------------------
   6 · Dropdowns & menus — clipped corner, pop-in
   -------------------------------------------------------------------------- */
.st-pmenu { position: relative; }
.st-dropdown {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
    min-width: 210px; padding: 8px;
    background: var(--st-elevated); border: 1px solid var(--st-border);
    border-radius: var(--st-clip-menu);
    box-shadow: var(--st-shadow-lg); z-index: 160;
    animation: st-modal-in var(--st-t-fast) var(--st-ease);
    /* A menu can never be wider or taller than the space it has: without these a panel anchored
       near a viewport edge grows straight off-screen, and a long menu runs past the fold with no
       way to reach its last item. */
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}
/* Anchor the panel's inline-END edge to the trigger so it grows back into the page instead of
   toward the viewport edge. Required for triggers that sit at the far inline-end of a bar — in
   RTL the header's account button is the left-most control, and the default inline-start anchor
   sends a 210px panel straight past x=0. */
.st-dropdown--end { inset-inline-start: auto; inset-inline-end: 0; }
/* Click-catcher behind an open header dropdown.
   .st-header sets backdrop-filter, which makes it the containing block for fixed-position
   descendants — so a plain `inset: 0` here collapses to the header's own ~70px box and clicks
   anywhere below the header never reach the catcher, leaving the menu stuck open. The header is
   sticky at top:0, so its origin coincides with the viewport origin; viewport units therefore
   restore true full-screen coverage. left/width are used deliberately: the containing block spans
   the full viewport width in both directions, so logical properties would add no value here. */
.st-dropdown-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 120; }
.st-dropdown a, .st-dropdown button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border-radius: 9px;
    font-size: 13px; font-weight: 600; color: var(--st-text-2);
    background: none; border: none; text-align: start; font-family: inherit; cursor: pointer;
    transition: background var(--st-t-fast) var(--st-ease), color var(--st-t-fast) var(--st-ease);
}
.st-dropdown a:hover, .st-dropdown button:hover { background: var(--st-primary-soft); color: var(--st-text); }
.st-dropdown .danger { color: var(--st-danger); }
.st-dropdown .danger:hover { background: var(--st-danger-soft); color: var(--st-danger); }
.st-dropdown__divider { height: 1px; background: var(--st-border); margin: 6px 4px; }

/* chevron that rotates when its parent is .is-open */
.st-chevron { display: inline-flex; transition: transform var(--st-t-med) var(--st-ease); }
.is-open > .st-chevron, .is-open .st-chevron--auto { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   7 · Cards & surfaces — glass + signature clip
   -------------------------------------------------------------------------- */
.st-glass {
    background: var(--st-surface);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--st-border);
}
.st-card {
    background: var(--st-surface);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--st-border);
    border-radius: var(--st-clip);
    box-shadow: var(--st-shadow);
}
.st-card--solid { background: var(--st-elevated); -webkit-backdrop-filter: none; backdrop-filter: none; }
.st-card__pad { padding: 22px; }
.st-card__head { padding: 18px 22px; border-bottom: 1px solid var(--st-border); display: flex; align-items: center; gap: 10px; font-weight: 700; }

/* hover-lift utility (tiles, quick-access cards) */
.st-lift { transition: transform var(--st-t-fast) var(--st-ease), box-shadow var(--st-t-fast) var(--st-ease), border-color var(--st-t-fast) var(--st-ease); }
.st-lift:hover { transform: translateY(-3px); box-shadow: var(--st-card-hover); border-color: var(--st-primary-border); }

/* --------------------------------------------------------------------------
   8 · Product cards — folded ribbon, wishlist, hover quick-add
   -------------------------------------------------------------------------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.st-pcard {
    position: relative; display: flex; flex-direction: column;
    background: var(--st-surface);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--st-border);
    border-radius: var(--st-clip-sm);
    overflow: hidden;
    transition: transform 180ms var(--st-ease), box-shadow 180ms var(--st-ease), border-color 180ms var(--st-ease);
}
.st-pcard:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--st-card-hover); border-color: var(--st-primary-border); }
/* PRODUCT MEDIA IS SQUARE. Product artwork is presented 1:1 everywhere it appears so cards,
   wishlist tiles and skeletons all share one geometry and nothing shifts when an image loads or
   falls back to the placeholder. This applies to product media only — category, brand, banner,
   hero, blog and CMS imagery keep their own ratios. */
.st-pcard__media { position: relative; aspect-ratio: 1/1; background: var(--st-surface-2); overflow: hidden; border-radius: var(--st-clip-media); }
.st-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--st-t-slow) var(--st-ease); }
.st-pcard:hover .st-pcard__media img { transform: scale(1.05); }
.st-pcard__media .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--st-muted); }

/* folded-corner ribbon on the accent gradient */
.st-ribbon {
    position: absolute; top: 0; inset-inline-end: 0; z-index: 2;
    background: var(--st-grad-accent); color: var(--st-on-accent);
    font-size: 10px; font-weight: 800;
    padding-block: 6px; padding-inline-start: 18px; padding-inline-end: 14px;
    clip-path: var(--st-ribbon-clip);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.st-ribbon--lg { font-size: 11px; padding-block: 7px; padding-inline-start: 22px; padding-inline-end: 18px; }

.st-pcard__off {
    position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
    background: var(--st-danger); color: #fff;
    font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 8px;
}
.st-ribbon ~ .st-pcard__off, .st-ribbon + .st-pcard__off { top: 34px; }
.st-pcard__wish {
    position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(0, 0, 0, 0.45); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--st-t-fast) var(--st-ease), color var(--st-t-fast) var(--st-ease), transform var(--st-t-fast) var(--st-ease);
}
.st-pcard__wish:hover { transform: scale(1.08); }
.st-pcard__wish.active { background: var(--st-danger); }

/* quick-add bar — fades/slides in on hover */
.st-pcard__quick {
    position: absolute; inset-inline: 12px; bottom: 12px; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px;
    background: var(--st-elevated); border: 1px solid var(--st-border);
    border-radius: var(--st-clip-menu); box-shadow: var(--st-shadow-lg);
    opacity: 0; transform: translateY(6px);
    transition: opacity 180ms var(--st-ease), transform 180ms var(--st-ease);
    pointer-events: none;
}
.st-pcard:hover .st-pcard__quick, .st-pcard:focus-within .st-pcard__quick { opacity: 1; transform: translateY(0); pointer-events: auto; }

.st-pcard__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.st-pcard__cat { font-size: 11px; color: var(--st-muted); }
.st-pcard__title { font-size: 15px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 48px; }
.st-pcard__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-pcard__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 6px; }

.st-price { display: flex; flex-direction: column; gap: 2px; }
.st-price__old { font-size: 11.5px; color: var(--st-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.st-price__now { font-size: 15px; font-weight: 800; color: var(--st-text); font-variant-numeric: tabular-nums; }
.st-price__unit { font-size: 11px; color: var(--st-muted); font-weight: 600; }

.st-stars { color: var(--st-amber); font-size: 13px; letter-spacing: 1px; display: inline-flex; gap: 1px; }
.st-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--st-text-2); }

/* image with graceful fallback (never a broken icon) */
.st-img { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--st-surface-2); }
.st-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-img--contain img { object-fit: contain; padding: 8px; }
.st-img__ph {
    position: absolute; inset: 0; align-items: center; justify-content: center;
    color: var(--st-muted);
    background: linear-gradient(135deg, var(--st-surface-2), var(--st-chip));
}
:root[data-theme="dark"] .st-img__ph { background: linear-gradient(135deg, #12222E, #0C1722); }

/* --------------------------------------------------------------------------
   9 · Filters — glass sidebar, accordion groups, chips
   -------------------------------------------------------------------------- */
.st-filters {
    background: var(--st-surface);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--st-border);
    border-radius: var(--st-clip);
    padding: 18px; box-shadow: var(--st-shadow);
    position: sticky; top: calc(var(--st-header-h) + 16px);
}
.st-fgroup { padding: 14px 0; border-bottom: 1px solid var(--st-border); }
.st-fgroup:last-child { border-bottom: none; }
.st-fgroup__t { font-size: 13px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.st-fgroup__body { animation: st-rise var(--st-t-med) var(--st-ease) both; }
.st-fgroup .count { font-size: 11px; color: var(--st-muted); font-weight: 600; }

/* selected-filter chips */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chipbtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 100px;
    background: var(--st-primary-soft); border: 1px solid var(--st-primary-border);
    color: var(--st-primary); font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: all var(--st-t-fast) var(--st-ease);
    animation: st-rise 200ms var(--st-ease) both;
}
.st-chipbtn .x { font-size: 13px; line-height: 1; opacity: 0.7; }
.st-chipbtn:hover { background: var(--st-danger-soft); border-color: var(--st-danger); color: var(--st-danger); }
.st-chipbtn--clear { background: transparent; border-color: var(--st-border-2); color: var(--st-muted); }
.st-chipbtn--clear:hover { border-color: var(--st-danger); color: var(--st-danger); background: transparent; }

/* category icon-pill rail */
.st-pillrail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.st-pillrail::-webkit-scrollbar { display: none; }
.st-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 100px; white-space: nowrap;
    background: var(--st-elevated); border: 1px solid var(--st-border);
    color: var(--st-text-2); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: all var(--st-t-fast) var(--st-ease);
}
.st-pill:hover { border-color: var(--st-primary-border); color: var(--st-primary); }
.st-pill.active { background: var(--st-grad); color: var(--st-on-grad); border-color: transparent; box-shadow: var(--st-shadow-btn); }

/* --------------------------------------------------------------------------
   10 · Badges & tags
   -------------------------------------------------------------------------- */
.st-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 100px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.st-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-badge.plain::before { display: none; }
.st-badge--success { background: var(--st-success-soft); color: var(--st-success); }
.st-badge--danger { background: var(--st-danger-soft); color: var(--st-danger); }
.st-badge--warning { background: var(--st-warning-soft); color: var(--st-warning); }
.st-badge--info { background: var(--st-info-soft); color: var(--st-info); }
.st-badge--brand { background: var(--st-primary-soft); color: var(--st-primary); }
.st-badge--muted { background: var(--st-chip); color: var(--st-text-2); }

.st-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 700; background: var(--st-chip); color: var(--st-text-2); }
.st-tag--brand { background: var(--st-primary-soft); color: var(--st-primary); }
.st-tag--warn { background: var(--st-warning-soft); color: var(--st-warning); }
.st-tag--verify { background: var(--st-info-soft); color: var(--st-info); }

/* --------------------------------------------------------------------------
   11 · Modals, side panels, bottom sheet
   -------------------------------------------------------------------------- */
.st-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(4, 12, 16, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: st-backdrop-in 200ms var(--st-ease);
}
.st-dialog {
    width: 100%; max-width: 460px; overflow: hidden;
    background: var(--st-elevated); border: 1px solid var(--st-border);
    border-radius: var(--st-clip);
    box-shadow: var(--st-shadow-lg);
    animation: st-modal-in var(--st-t-med) var(--st-ease);
}
.st-dialog__b { padding: 24px; }
.st-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--st-border); }

/* Shared Razor modal is also used by public product/cart workflows.  Keep its
   viewport contract in the storefront bundle instead of depending on Admin CSS. */
.st-shell .vz-overlay {
    position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(4, 12, 16, .62); backdrop-filter: blur(3px);
}
.st-shell .vz-dialog {
    inline-size: min(560px, 100%); max-inline-size: 100%; max-block-size: calc(100dvh - 32px);
    display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--st-border);
    border-radius: var(--st-clip); color: var(--st-text); background: var(--st-elevated); box-shadow: var(--st-shadow-lg);
}
.st-shell .vz-dialog.sm { inline-size: min(440px, 100%); }
.st-shell .vz-dialog.lg { inline-size: min(860px, 100%); }
.st-shell .vz-dialog.xl { inline-size: min(1080px, 100%); }
.st-shell .vz-dialog__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--st-border); }
.st-shell .vz-dialog__head > div:nth-child(2) { min-width: 0; }
.st-shell .vz-dialog__title { min-width: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.st-shell .vz-dialog__close { margin-inline-start: auto; inline-size: 40px; block-size: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--st-text-2); background: var(--st-surface-2); }
.st-shell .vz-dialog__body { min-width: 0; min-height: 0; padding: 18px; overflow: auto; overscroll-behavior: contain; }
.st-shell .vz-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--st-border); }

/* side panel — slides from inline-end, direction-aware */
.st-panel {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 210;
    width: 380px; max-width: 90vw; padding: 26px; overflow-y: auto;
    background: var(--st-elevated);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 280ms var(--st-ease-sheet);
}
[dir="rtl"] .st-panel { transform: translateX(-100%); }
.st-panel.is-open { transform: translateX(0); }

/* bottom sheet (mobile filters) */
.st-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    max-height: 85vh; overflow-y: auto; padding: 20px;
    background: var(--st-elevated);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 280ms var(--st-ease-sheet);
}
.st-sheet.is-open { transform: translateY(0); }
.st-sheet__grip { width: 44px; height: 4px; border-radius: 4px; background: var(--st-border-2); margin: 0 auto 16px; }

/* --------------------------------------------------------------------------
   12 · Toasts — bottom inline-end, slide in, auto-dismiss
   -------------------------------------------------------------------------- */
.st-toast-host {
    position: fixed; bottom: 28px; inset-inline-end: 28px; z-index: 400;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    pointer-events: none;
}
.st-toast {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: 14px;
    background: var(--st-elevated); color: var(--st-text);
    border: 1px solid var(--st-primary-border);
    box-shadow: var(--st-shadow-lg);
    font-weight: 600; font-size: 13.5px;
    pointer-events: auto;
    animation: st-toast-in var(--st-t-med) var(--st-ease);
}
.st-toast.is-leaving { animation: st-toast-out 180ms var(--st-ease) forwards; }
.st-toast__ic {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--st-grad); color: var(--st-on-grad);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.st-toast--success { border-color: var(--st-success); }
.st-toast--success .st-toast__ic { background: var(--st-success); color: var(--st-on-success); }
.st-toast--danger { border-color: var(--st-danger); }
.st-toast--danger .st-toast__ic { background: var(--st-danger); color: var(--st-on-danger); }
.st-toast--warning { border-color: var(--st-warning); }
.st-toast--warning .st-toast__ic { background: var(--st-warning); color: var(--st-on-warning); }

/* --------------------------------------------------------------------------
   13 · Loading states — spinner + shimmer skeletons
   -------------------------------------------------------------------------- */
.st-spinner {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid var(--st-chip); border-top-color: var(--st-primary);
    animation: st-spin 0.8s linear infinite;
}
.st-spinner.sm { width: 18px; height: 18px; border-width: 2px; }

.st-skeleton {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--st-chip) 25%, var(--st-border) 50%, var(--st-chip) 75%);
    background-size: 200% 100%;
    animation: st-shimmer 1.3s linear infinite;
}
/* Matches .st-pcard__media so the skeleton reserves exactly the card's real height. */
.st-skeleton--media { aspect-ratio: 1/1; border-radius: var(--st-clip-media); }
.st-skeleton--title { height: 16px; width: 70%; }
.st-skeleton--text { height: 12px; }
.st-skeleton--text.short { width: 45%; }
.st-skeleton--btn { height: 38px; border-radius: var(--st-clip-btn); }
.st-skeleton--circle { border-radius: 50%; }

/* skeleton product card composition */
.st-skel-card { border: 1px solid var(--st-border); border-radius: var(--st-clip-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--st-surface); }

/* --------------------------------------------------------------------------
   14 · Animation rules
   Screen enter: fade + rise 300–400ms · hover lifts 160–180ms
   Menus/modals: 160–280ms · sheets: 280ms cubic-bezier(0.32,0.72,0,1)
   -------------------------------------------------------------------------- */
@keyframes st-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes st-screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes st-modal-in { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes st-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes st-toast-out { to { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes st-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-underline { from { width: 0; } to { width: 52px; } }
@keyframes st-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes st-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes st-aurora-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } }
@keyframes st-aurora-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 40px) scale(1.1); } }

/* entrance utilities — add to elements that enter with the screen */
.st-anim { animation: st-rise 400ms var(--st-ease) both; }
.st-anim.d1 { animation-delay: 60ms; }
.st-anim.d2 { animation-delay: 120ms; }
.st-anim.d3 { animation-delay: 180ms; }
.st-anim.d4 { animation-delay: 240ms; }
.st-anim.d5 { animation-delay: 300ms; }
.st-screen { animation: st-screen-in 300ms var(--st-ease) both; }

@media (prefers-reduced-motion: reduce) {
    .st-shell *, .st-shell *::before, .st-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .st-shell::before, .st-shell::after { animation: none; }
}

/* ==========================================================================
   Page components (kept from v1, re-themed to v2 tokens — refined per-page
   in later phases)
   ========================================================================== */

/* ----- header ----- */
.st-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--st-header-bg);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--st-border);
}
.st-header__row { height: var(--st-header-h); display: flex; align-items: center; gap: 18px; }
.st-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }
.st-logo__mark { width: 38px; height: 38px; border-radius: 11px; background: var(--st-grad); color: var(--st-on-grad); display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--st-glow); }
.st-logo__img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(13, 148, 136, 0.25)); }
:root[data-theme="dark"] .st-logo__img { filter: drop-shadow(0 0 12px rgba(45, 212, 191, 0.45)); }
.st-logo__img--dark { display: none; }
:root[data-theme="dark"] .st-logo__img--light { display: none; }
:root[data-theme="dark"] .st-logo__img--dark { display: block; }
.st-logo__word { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }
.st-nav { display: flex; align-items: center; gap: 4px; }
.st-nav a { padding: 9px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--st-text-2); transition: all var(--st-t-fast) var(--st-ease); }
.st-nav a:hover, .st-nav a.active { color: var(--st-primary); background: var(--st-primary-soft); }
.st-search { flex: 1; max-width: 460px; position: relative; }
.st-search input {
    width: 100%; height: 44px; border-radius: 12px;
    border: 1px solid var(--st-input-border); background: var(--st-input-bg); color: var(--st-text);
    padding-block: 0; padding-inline-start: 44px; padding-inline-end: 14px;
    font-size: 13px; font-family: inherit;
    transition: border-color var(--st-t-fast) var(--st-ease), box-shadow var(--st-t-fast) var(--st-ease);
}
.st-search input:focus { outline: none; border-color: var(--st-primary); box-shadow: var(--st-ring); }
.st-search .ico { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--st-muted); }
.st-header__actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.st-mobile-search { display: none; }

.st-search-start { max-width: 680px; margin: 54px auto; padding: 38px; text-align: center; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-clip); box-shadow: var(--st-shadow-sm); }
.st-search-start__icon { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--st-primary-soft); color: var(--st-primary); }
.st-search-start h1 { font-size: 24px; font-weight: 800; }
.st-search-start p { margin: 9px 0 24px; color: var(--st-muted); font-size: 13.5px; }
.st-search-start__form { display: flex; gap: 9px; max-width: 540px; margin: auto; }
.st-search-start__form input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--st-input-border); border-radius: 12px; background: var(--st-input-bg); color: var(--st-text); padding: 0 13px; font: inherit; }
.st-search-start__form input:focus { outline: none; border-color: var(--st-primary); box-shadow: var(--st-ring); }

.st-review-replies { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--st-border); display: grid; gap: 9px; }
.st-review-reply { padding: 11px 13px; border-inline-start: 3px solid var(--st-primary); border-radius: 0 10px 10px 0; background: var(--st-primary-soft); }
.st-review-reply__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-review-reply p { margin-top: 7px; color: var(--st-text-2); font-size: 13px; line-height: 1.9; }

/* theme toggle */
.st-theme-toggle { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--st-border); background: var(--st-elevated); color: var(--st-amber); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--st-t-fast) var(--st-ease); }
:root[data-theme="dark"] .st-theme-toggle { color: var(--st-accent); }
.st-theme-toggle:hover { border-color: var(--st-primary-border); }

.st-avatar { width: 40px; height: 40px; border-radius: 11px; background: var(--st-grad); color: var(--st-on-grad); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; }

/* ----- hero ----- */
.st-hero {
    border-radius: var(--st-clip-xl); overflow: hidden;
    background: var(--st-hero-bg); color: #fff; position: relative;
    padding: 44px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: center;
    border: 1px solid var(--st-border);
    box-shadow: var(--st-shadow-lg);
}
.st-hero::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(45, 212, 191, 0.25), transparent 70%); top: -120px; inset-inline-start: -80px; }
.st-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(45, 212, 191, 0.16); border: 1px solid rgba(45, 212, 191, 0.35); color: #5EEAD4; padding: 7px 15px; border-radius: 100px; font-size: 12.5px; font-weight: 700; margin-bottom: 16px; }
.st-hero__title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; line-height: 1.4; letter-spacing: -0.01em; position: relative; }
.st-hero__title .hl { color: var(--st-accent); }
.st-hero__desc { margin-top: 14px; color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.8; max-width: 460px; }
.st-hero__cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; position: relative; }
.st-hero__art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.st-hero__card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--st-clip); padding: 22px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); width: 100%; max-width: 320px; }

.st-hero__banner { display: block; width: 100%; aspect-ratio: 16/10; border-radius: var(--st-clip); overflow: hidden; box-shadow: var(--st-shadow); }
.st-hero__logo { text-align: center; padding: 20px; position: relative; }
.st-hero__logo img { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 12px 32px rgba(45, 212, 191, 0.45)); animation: st-float 4s ease-in-out infinite; }
.st-hero__logo-word { font-size: 34px; font-weight: 800; letter-spacing: 3px; margin-top: 14px; color: #fff; }
.st-hero__logo-sub { opacity: 0.82; font-size: 13px; margin-top: 6px; }
.st-campaign { display: block; position: relative; aspect-ratio: 2 / 1; border-radius: var(--st-clip); overflow: hidden; box-shadow: var(--st-shadow); }
.st-campaign .st-img, .st-campaign picture, .st-campaign img { width: 100%; height: 100%; }
.st-campaign picture { display: block; }
@media (max-width: 767px) { .st-campaign { aspect-ratio: 4 / 5; } }

.st-hero-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.st-trust { background: var(--st-surface); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid var(--st-border); border-radius: var(--st-clip-sm); padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--st-shadow-sm); }
.st-trust__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--st-chip); color: var(--st-primary); display: flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.st-trust__t { font-size: 13.5px; font-weight: 700; }
.st-trust__s { font-size: 11.5px; color: var(--st-muted); }

/* ----- category tiles / brand strip ----- */
.st-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.st-cat { background: var(--st-surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--st-border); border-radius: var(--st-clip-sm); padding: 20px 12px; text-align: center; transition: all 180ms var(--st-ease); }
.st-cat:hover { transform: translateY(-3px); box-shadow: var(--st-card-hover); border-color: var(--st-primary-border); }
.st-cat__ic { width: 52px; height: 52px; border-radius: 15px; background: var(--st-chip); color: var(--st-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.st-cat__t { font-size: 13px; font-weight: 700; }

.st-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.st-brand-tile { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-clip-sm); height: 76px; display: flex; align-items: center; justify-content: center; padding: 12px; transition: all var(--st-t-fast) var(--st-ease); }
.st-brand-tile:hover { border-color: var(--st-primary-border); }
.st-brand-tile img { max-height: 42px; max-width: 100%; object-fit: contain; }
.st-brand-tile span { font-weight: 700; color: var(--st-text-2); }

/* ----- layout helpers ----- */
.st-split { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.st-shop { display: grid; grid-template-columns: 268px 1fr; gap: 22px; align-items: start; }
.st-stack { display: flex; flex-direction: column; gap: 16px; }
.st-spread { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.st-divider { height: 1px; background: var(--st-border); margin: 16px 0; }

.st-bc { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--st-muted); margin-bottom: 18px; flex-wrap: wrap; }
.st-bc a:hover { color: var(--st-primary); }

/* ----- product detail ----- */
.st-pd { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.st-gallery__main { aspect-ratio: 16/11; border-radius: var(--st-clip); overflow: hidden; background: var(--st-surface-2); border: 1px solid var(--st-border); }
.st-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.st-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.st-gallery__thumb { width: 70px; height: 56px; border-radius: 10px; overflow: hidden; border: 2px solid var(--st-border); cursor: pointer; transition: border-color var(--st-t-fast) var(--st-ease); }
.st-gallery__thumb.active { border-color: var(--st-primary); }
.st-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-buybox {
    background: var(--st-surface);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--st-border); border-radius: var(--st-clip);
    padding: 22px; box-shadow: var(--st-shadow);
    position: sticky; top: calc(var(--st-header-h) + 16px);
}
.st-variant { display: flex; gap: 8px; flex-wrap: wrap; }
.st-variant button { padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--st-input-border); background: var(--st-elevated); color: var(--st-text); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all var(--st-t-fast) var(--st-ease); }
.st-variant button.active { border-color: var(--st-primary); background: var(--st-primary-soft); color: var(--st-primary); }

.st-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--st-border); margin-bottom: 18px; }
.st-tab { padding: 11px 16px; font-size: 13.5px; font-weight: 700; color: var(--st-muted); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; transition: color var(--st-t-fast) var(--st-ease), border-color var(--st-t-fast) var(--st-ease); }
.st-tab:hover { color: var(--st-text); }
.st-tab.active { color: var(--st-primary); border-bottom-color: var(--st-primary); }

/* ----- customer area ----- */
.st-acc { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
.st-acc__side { background: var(--st-surface); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--st-border); border-radius: var(--st-clip); padding: 16px; box-shadow: var(--st-shadow-sm); position: sticky; top: calc(var(--st-header-h) + 16px); }
.st-acc__user { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; border-bottom: 1px solid var(--st-border); margin-bottom: 12px; }
.st-acc__nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--st-text-2); margin-bottom: 3px; transition: all var(--st-t-fast) var(--st-ease); }
.st-acc__nav a:hover { background: var(--st-surface-2); color: var(--st-text); }
.st-acc__nav a.active { background: var(--st-primary-soft); color: var(--st-primary); font-weight: 700; }
.st-acc__nav a .ic { width: 20px; display: flex; }
.st-acc__nav a.danger { color: var(--st-danger); }
.st-acc__mobile-toggle { display: none; }

.st-stat { background: var(--st-surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--st-border); border-radius: var(--st-clip-sm); padding: 18px; box-shadow: var(--st-shadow-sm); }
.st-stat__ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.st-stat__v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-stat__l { font-size: 12.5px; color: var(--st-muted); }
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

/* ----- tables ----- */
.st-table-wrap { overflow-x: auto; }

/* Tables without a dedicated customer mobile-record list become labeled cards on phones.
   The labels are copied from the table head by mobile-table-cards.js. */
@media (max-width: 760px) {
    .st-table-wrap.st-mobile-cards { overflow: visible; }
    .st-table-wrap.st-mobile-cards .st-table,
    .st-table-wrap.st-mobile-cards .st-table tbody { display: block; width: 100%; }
    .st-table-wrap.st-mobile-cards .st-table thead { display: none; }
    .st-table-wrap.st-mobile-cards .st-table tbody { display: grid; gap: 10px; padding: 10px; }
    .st-table-wrap.st-mobile-cards .st-table tbody tr {
        display: block; min-width: 0; padding: 13px; border: 1px solid var(--st-border);
        border-radius: var(--st-radius-md, 16px); background: var(--st-surface, #fff);
    }
    .st-table-wrap.st-mobile-cards .st-table tbody td {
        display: grid; grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr); gap: 8px 12px;
        min-width: 0; padding: 9px 0; border: 0; border-bottom: 1px solid var(--st-border);
        text-align: start; white-space: normal; overflow-wrap: anywhere;
    }
    .st-table-wrap.st-mobile-cards .st-table tbody td:last-child { border-bottom: 0; }
    .st-table-wrap.st-mobile-cards .st-table tbody td::before {
        content: attr(data-mobile-label); color: var(--st-text-3); font-size: 11px; font-weight: 800;
    }
}
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table thead th { text-align: start; padding: 13px 15px; color: var(--st-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; background: var(--st-surface-2); border-bottom: 1px solid var(--st-border); white-space: nowrap; }
.st-table tbody td { padding: 14px 15px; border-bottom: 1px solid var(--st-border); }
.st-table tbody tr:last-child td { border-bottom: none; }
.st-table tbody tr:hover { background: var(--st-primary-soft); }

/* Compact records preserve every table value and action on narrow screens. */
.st-mobile-records { display: none; }
.st-mobile-record {
    padding: 14px 16px;
    border-bottom: 1px solid var(--st-border);
}
.st-mobile-record:last-child { border-bottom: none; }
.st-mobile-record__head, .st-mobile-record__row, .st-mobile-record__actions {
    display: flex; align-items: center; gap: 10px;
}
.st-mobile-record__head { justify-content: space-between; margin-bottom: 12px; }
.st-mobile-record__number { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.st-mobile-record__rows { display: grid; gap: 8px; }
.st-mobile-record__row { justify-content: space-between; color: var(--st-muted); font-size: 12px; }
.st-mobile-record__row > :last-child { color: var(--st-text); font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.st-mobile-record__actions { margin-top: 14px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .st-mobile-records { display: block; }
    .st-mobile-records + .st-table-wrap, .st-table-wrap.st-mobile-records-desktop { display: none; }
    .st-mobile-record__actions .st-btn { flex: 1 1 130px; justify-content: center; }
}

/* ----- chat (tickets) ----- */
.st-chat { max-height: 460px; overflow-y: auto; padding: 16px; background: var(--st-surface-2); border-radius: var(--st-radius); }
.st-msg { margin-bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; }
.st-msg.me { align-items: flex-end; }
.st-msg__b { max-width: 80%; padding: 11px 15px; border-radius: 14px; font-size: 13px; line-height: 1.85; background: var(--st-elevated); border: 1px solid var(--st-border); }
.st-msg.me .st-msg__b { background: var(--st-primary-soft); border-color: transparent; }
.st-msg__t { font-size: 11px; color: var(--st-muted); margin-top: 4px; }

/* ----- gift code library ----- */
.st-codecard {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: var(--st-surface);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--st-border);
    border-radius: var(--st-clip-sm);
    box-shadow: var(--st-shadow-sm);
    transition: border-color var(--st-t-fast) var(--st-ease), box-shadow var(--st-t-fast) var(--st-ease);
}
.st-codecard:hover { border-color: var(--st-primary-border); box-shadow: var(--st-shadow); }
.st-codecard__ic {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px;
    background: var(--st-chip); color: var(--st-primary);
    display: flex; align-items: center; justify-content: center;
}
.st-codecard__info { flex: 1; min-width: 0; }
.st-codecard__title { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-codecard__meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--st-muted); margin-top: 5px; flex-wrap: wrap; }
.st-codecard__order { display: inline-flex; align-items: center; gap: 4px; color: var(--st-primary); font-weight: 600; }
.st-codecard__code {
    font-family: var(--font-en);
    font-size: 13px; font-weight: 700; letter-spacing: 1px;
    padding: 9px 14px; border-radius: 10px;
    background: var(--st-surface-2); border: 1px dashed var(--st-border-2);
    color: var(--st-text-2); white-space: nowrap; max-width: 260px;
    overflow: hidden; text-overflow: ellipsis;
    transition: all var(--st-t-med) var(--st-ease);
}
.st-codecard__code.revealed {
    background: var(--st-primary-soft); border-color: var(--st-primary-border);
    color: var(--st-primary); border-style: solid;
    animation: st-rise 220ms var(--st-ease);
}
.st-codecard__actions { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 720px) {
    .st-codecard { flex-wrap: wrap; }
    .st-codecard__info { flex: 1 1 calc(100% - 60px); }
    .st-codecard__code { flex: 1 1 100%; max-width: none; text-align: center; }
    .st-codecard__actions { margin-inline-start: auto; }
}

/* Rendered CKEditor HTML inherits the same mixed-script storefront stack. */
.st-rich-content,
.st-rich-content :is(h1, h2, h3, h4, h5, h6, p, table, thead, tbody, tr, th, td, ul, ol, li, blockquote) {
    font-family: inherit;
}
.st-rich-content :is(code, pre, kbd, samp) {
    font-family: var(--font-en);
}

/* ----- empty / error states ----- */
.st-state { text-align: center; padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: st-rise 300ms var(--st-ease) both; }
.st-state__ic { width: 76px; height: 76px; border-radius: var(--st-clip-sm); background: var(--st-chip); color: var(--st-primary); display: flex; align-items: center; justify-content: center; }

/* ----- alerts ----- */
.st-alert { display: flex; gap: 11px; padding: 13px 16px; border-radius: 12px; font-size: 13px; align-items: flex-start; line-height: 1.7; }
.st-alert--info { background: var(--st-info-soft); color: var(--st-info); }
.st-alert--warn { background: var(--st-warning-soft); color: var(--st-warning); }
.st-alert--danger { background: var(--st-danger-soft); color: var(--st-danger); }
.st-alert--success { background: var(--st-success-soft); color: var(--st-success); }

/* ----- pagination ----- */
.st-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 26px; }
.st-pager button { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--st-border); background: var(--st-elevated); color: var(--st-text-2); font-weight: 700; font-family: inherit; cursor: pointer; transition: all var(--st-t-fast) var(--st-ease); }
.st-pager button:hover:not(:disabled):not(.active) { border-color: var(--st-primary-border); color: var(--st-primary); }
.st-pager button.active { background: var(--st-grad); color: var(--st-on-grad); border-color: transparent; box-shadow: var(--st-shadow-btn); }
.st-pager button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ----- checkout steps ----- */
.st-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.st-step { display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 12px; background: var(--st-elevated); border: 1px solid var(--st-border); font-size: 13px; font-weight: 700; color: var(--st-muted); transition: all var(--st-t-fast) var(--st-ease); }
.st-step.active { color: var(--st-primary); border-color: var(--st-primary-border); background: var(--st-primary-soft); }
.st-step.done { color: var(--st-success); }
.st-step__n { width: 24px; height: 24px; border-radius: 50%; background: var(--st-chip); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.st-step.active .st-step__n { background: var(--st-grad); color: var(--st-on-grad); }

.st-sumrow { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 13.5px; }
.st-sumrow.total { border-top: 1px dashed var(--st-border-2); margin-top: 8px; padding-top: 14px; font-weight: 800; font-size: 16px; }

/* ----- footer ----- */
.st-footer { background: var(--st-surface); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-top: 1px solid var(--st-border); margin-top: 50px; }
:root[data-theme="dark"] .st-footer { background: #0A121C; }
.st-footer__main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; padding: 44px 0 30px; }
.st-footer__brand p { color: var(--st-muted); font-size: 13px; line-height: 2; margin-top: 12px; max-width: 280px; }
.st-footer__note { font-size: 12.5px !important; color: var(--st-text-2) !important; }
.st-footer__contact { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.st-footer__contact span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--st-muted); }
.st-footer__col h4 { font-size: 14px; margin-bottom: 14px; }
.st-footer__col a { display: block; color: var(--st-text-2); font-size: 13px; padding: 5px 0; transition: color var(--st-t-fast) var(--st-ease); }
.st-footer__col a:hover { color: var(--st-primary); }
.st-footer__bottom { border-top: 1px solid var(--st-border); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--st-muted); }
.st-socials { display: flex; gap: 8px; }
.st-socials a { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--st-border); display: flex; align-items: center; justify-content: center; color: var(--st-text-2); transition: all var(--st-t-fast) var(--st-ease); }
.st-socials a:hover { color: var(--st-primary); border-color: var(--st-primary-border); }

/* ----- mobile ----- */
.st-bottomnav { display: none; }
.st-mobile-only { display: none; }

@media (max-width: 1024px) {
    /* Several pages provide their desktop tracks inline; force the shared
       split primitive back to one bounded column at responsive widths. */
    .st-split { grid-template-columns: minmax(0, 1fr) !important; }
    .st-split > * { min-width: 0; }
    .st-pd { grid-template-columns: 1fr; }
    .st-shop { grid-template-columns: 1fr; }
    .st-acc { grid-template-columns: 1fr; }
    .st-footer__main { grid-template-columns: 1fr 1fr; }
    .st-hero { grid-template-columns: 1fr; }
    .st-hero__art { display: none; }
    .st-acc__side, .st-filters, .st-buybox, .st-cart-sum { position: static !important; top: auto !important; }
    .st-container { padding: 0 22px; }
}

/* The full desktop header is just wider than portrait tablets once localized
   account labels are present. Keep navigation visible, but use the same
   icon-only secondary actions already used on phones. */
@media (max-width: 900px) {
    .st-header__row { gap: 12px; }
    .st-nav a { padding-inline: 10px; }
    .st-header__actions { gap: 8px; min-width: 0; }
    .st-mobile-hide { display: none; }
}

@media (max-width: 720px) {
    .st-nav, .st-search { display: none; }
    .st-mobile-only { display: inline-flex; }
    .st-mobile-hide { display: none; }
    .st-mobile-search { display: flex; position: fixed; inset: 0; z-index: 140; align-items: flex-start; padding: max(14px, env(safe-area-inset-top, 0px)) 14px 14px; background: color-mix(in srgb, var(--st-header-bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    .st-mobile-search__bar { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-surface); box-shadow: var(--st-shadow); }
    .st-mobile-search__bar > svg { flex: 0 0 auto; color: var(--st-muted); margin-inline-start: 4px; }
    .st-mobile-search__bar input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; color: var(--st-text); font: inherit; }
    .st-mobile-search__submit { height: 38px; flex: 0 0 auto; border: 0; border-radius: 9px; padding: 0 11px; background: var(--st-primary); color: var(--st-on-grad); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
    .st-mobile-search__close { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--st-muted); cursor: pointer; }
    .st-search-start { margin: 28px auto; padding: 28px 18px; }
    .st-search-start__form { flex-direction: column; }
    .st-search-start__form .st-btn { justify-content: center; }
    .st-footer__main { grid-template-columns: 1fr 1fr; }
    .st-hero { padding: 26px; }
    .st-hero__title { font-size: 24px; }
    .st-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .st-main { padding-bottom: 90px; }
    /* The footer is a sibling of .st-main, so .st-main's clearance does not protect it: at the end
       of the page the fixed bottom nav sat on top of the last footer row. Reserve the bar's height
       on the footer itself (plus the safe-area inset on notched devices). */
    .st-footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
    .st-bottomnav {
        display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 110;
        background: var(--st-header-bg);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        backdrop-filter: blur(16px) saturate(150%);
        border-top: 1px solid var(--st-border);
        /* The page reserved the bar's height, but the bar never applied the inset to itself, so on a
           notched phone its icons sat inside the home-indicator strip. */
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
    }
    .st-bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--st-muted); padding: 4px 10px; border-radius: 10px; }
    .st-bottomnav a.active { color: var(--st-primary); }
    .st-acc__side { position: static; padding: 12px; }
    .st-acc__user { padding: 4px 6px 10px; margin-bottom: 8px; }
    .st-acc__mobile-toggle { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 11px; background: var(--st-surface-2); color: var(--st-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
    .st-acc__mobile-toggle > span { display: inline-flex; align-items: center; gap: 8px; }
    .st-acc__mobile-chevron { transition: transform var(--st-t-fast) var(--st-ease); }
    .st-acc__mobile-toggle[aria-expanded="true"] .st-acc__mobile-chevron { transform: rotate(180deg); }
    .st-acc__nav { display: none; padding-top: 8px; }
    .st-acc__nav.is-open { display: block; }
    .st-pcard__title { min-height: auto; }
    .st-container { padding: 0 16px; }
    .st-toast-host { inset-inline: 16px; bottom: 96px; align-items: stretch; }
}

/* ==========================================================================
   Homepage v2 (Claude Design handoff) — hero slider, marquee, bento, steps,
   newsletter, mega menu, search suggestions, section reveal
   ========================================================================== */

/* Section reveal — fade + rise as content enters */
@keyframes st-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.st-reveal { animation: st-reveal var(--st-t-slow) var(--st-ease) both; }
@media (prefers-reduced-motion: reduce) { .st-reveal { animation: none; } }

/* ----- Hero: banner slider + floating stat stack ----- */
.st-hwrap { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: stretch; margin-top: 26px; }
.st-hslider {
    position: relative; aspect-ratio: 2 / 1; border-radius: var(--st-clip-xl); overflow: hidden;
    border: 1px solid var(--st-border); box-shadow: var(--st-shadow-lg);
    background: var(--st-hero-bg);
}
.st-hslider__img { position: absolute; inset: 0; }
.st-hslider__img .st-img, .st-hslider__img picture, .st-hslider__img img { width: 100%; height: 100%; object-fit: cover; }
.st-hslider__img picture { display: block; }
.st-hslider__aurora { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.st-hslider__aurora.a1 { top: -15%; inset-inline-end: -6%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(45,212,191,0.28), transparent 70%); animation: st-aurora1 16s ease-in-out infinite; }
.st-hslider__aurora.a2 { bottom: -18%; inset-inline-start: 10%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(34,211,238,0.22), transparent 70%); animation: st-aurora2 18s ease-in-out infinite; }
@keyframes st-aurora1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,14px); } }
@keyframes st-aurora2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-12px); } }
.st-hslider__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,20,32,0.86) 0%, rgba(11,20,32,0.55) 55%, rgba(11,20,32,0.15) 100%); }
[dir="rtl"] .st-hslider__overlay { background: linear-gradient(260deg, rgba(11,20,32,0.86) 0%, rgba(11,20,32,0.55) 55%, rgba(11,20,32,0.15) 100%); }
.st-hslide {
    position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: 0 52px; max-width: 600px;
}
.st-hslide__kicker {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    padding: 7px 15px; border-radius: 100px; margin-bottom: 20px;
    background: rgba(45,212,191,0.16); border: 1px solid rgba(45,212,191,0.35);
    color: #5EEAD4; font-size: 12.5px; font-weight: 700;
}
.st-hslide__kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-accent); animation: st-pulse 2s infinite; }
@keyframes st-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
.st-hslide__title { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; color: #fff; }
.st-hslide__sub { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0 0 26px; max-width: 440px; }
.st-hslide__cta {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    padding: 14px 28px; border: none; border-radius: var(--st-clip-btn);
    background: var(--st-grad-accent); color: var(--st-on-accent); font-weight: 800; font-size: 14.5px;
    box-shadow: 0 12px 26px rgba(45,212,191,0.35); cursor: pointer; text-decoration: none;
    transition: transform var(--st-t-fast) var(--st-ease), box-shadow var(--st-t-fast) var(--st-ease);
}
.st-hslide__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(45,212,191,0.45); }
.st-hslide__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-hslide__cta2 {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px; border-radius: var(--st-clip-btn);
    background: var(--st-surface-2); color: var(--st-text); font-weight: 700; font-size: 14px;
    border: 1px solid var(--st-border); text-decoration: none;
    transition: transform var(--st-t-fast) var(--st-ease), border-color var(--st-t-fast) var(--st-ease);
}
.st-hslide__cta2:hover { transform: translateY(-2px); border-color: var(--st-primary); color: var(--st-primary); }
.st-hslide.enter .st-hslide__ctas { animation: st-reveal 550ms var(--st-ease) 180ms both; }
.st-hslide.enter .st-hslide__kicker { animation: st-reveal 500ms var(--st-ease) both; }
.st-hslide.enter .st-hslide__title { animation: st-reveal 550ms var(--st-ease) 60ms both; }
.st-hslide.enter .st-hslide__sub { animation: st-reveal 550ms var(--st-ease) 120ms both; }
.st-hslide.enter .st-hslide__cta { animation: st-reveal 550ms var(--st-ease) 180ms both; }
.st-hslider__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.14); backdrop-filter: blur(6px); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background var(--st-t-fast) var(--st-ease);
}
.st-hslider__arrow:hover { background: rgba(255,255,255,0.26); }
.st-hslider__arrow.prev { inset-inline-start: 18px; }
.st-hslider__arrow.next { inset-inline-end: 18px; }
.st-hslider__dots { position: absolute; bottom: 18px; inset-inline: 0; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.st-hslider__dot { width: 8px; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.4); cursor: pointer; transition: width var(--st-t-med) var(--st-ease), background var(--st-t-med) var(--st-ease); border: none; padding: 0; }
.st-hslider__dot.active { width: 26px; background: var(--st-accent); }

.st-hstats { display: flex; flex-direction: column; gap: 16px; }
.st-hstat {
    padding: 20px 22px; border-radius: var(--st-clip-sm);
    background: var(--st-surface); backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--st-border); box-shadow: var(--st-shadow);
    display: flex; align-items: center; gap: 14px;
}
.st-hstat:first-child { box-shadow: var(--st-shadow-lg); }
.st-hstat.accent { background: linear-gradient(150deg, rgba(45,212,191,0.14), rgba(34,211,238,0.06)); flex: 1; }
.st-hstat__ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--st-clip-btn); background: var(--st-primary-soft); color: var(--st-primary); display: flex; align-items: center; justify-content: center; }
.st-hstat__t { font-weight: 800; font-size: 15px; }
.st-hstat__s { font-size: 12px; color: var(--st-text-2); margin-top: 2px; }

/* ----- Marquee (platforms strip) ----- */
.st-marquee { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--st-border); border-bottom: 1px solid var(--st-border); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.st-marquee__track { display: flex; gap: 48px; width: max-content; animation: st-marquee 32s linear infinite; }
.st-marquee:hover .st-marquee__track { animation-play-state: paused; }
.st-marquee__item { font-weight: 800; font-size: 19px; color: var(--st-muted); white-space: nowrap; }
@keyframes st-marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .st-marquee__track { animation-name: st-marquee-rtl; }
@keyframes st-marquee-rtl { to { transform: translateX(50%); } }

/* ----- Bento category grid ----- */
.st-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; gap: 14px; }
.st-bento__tile {
    padding: 16px; border-radius: var(--st-clip-sm); background: var(--st-surface);
    backdrop-filter: blur(14px) saturate(150%); border: 1px solid var(--st-border); box-shadow: var(--st-shadow);
    display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: var(--st-text);
    transition: transform var(--st-t-med) var(--st-ease), box-shadow var(--st-t-med) var(--st-ease), border-color var(--st-t-med) var(--st-ease);
}
.st-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--st-card-hover); border-color: var(--st-border-2); }
.st-bento__tile.lead { grid-column: span 2; grid-row: span 2; padding: 22px; background: linear-gradient(150deg, rgba(45,212,191,0.18), rgba(34,211,238,0.06)); }
.st-bento__ic { width: 34px; height: 34px; border-radius: var(--st-clip-btn); background: var(--st-primary-soft); color: var(--st-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.st-bento__tile.lead .st-bento__ic { width: 44px; height: 44px; }
.st-bento__ic .st-img, .st-bento__ic img { width: 100%; height: 100%; object-fit: cover; }
.st-bento__t { font-weight: 700; font-size: 12.5px; }
.st-bento__tile.lead .st-bento__t { font-size: 16px; font-weight: 800; }
.st-bento__c { font-size: 11px; color: var(--st-muted); margin-top: 2px; }

/* ----- How it works / Why Vitorize (numbered steps) — note: distinct from
   the checkout .st-steps stepper above; named .st-hiw to avoid collision ----- */
.st-hiw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.st-hiw__step {
    position: relative; padding: 28px 24px; border-radius: var(--st-clip-sm);
    background: var(--st-surface); backdrop-filter: blur(14px); border: 1px solid var(--st-border); box-shadow: var(--st-shadow);
}
.st-hiw__num {
    position: absolute; top: -14px; inset-inline-start: 22px; width: 28px; height: 28px; border-radius: 8px;
    background: var(--st-grad-accent); color: var(--st-on-accent); font-weight: 800; font-size: 13px;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--st-shadow-btn);
}
.st-hiw__ic { width: 46px; height: 46px; border-radius: var(--st-clip-btn); background: var(--st-primary-soft); color: var(--st-primary); display: flex; align-items: center; justify-content: center; margin: 6px 0 12px; }
.st-hiw__t { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.st-hiw__d { font-size: 13px; color: var(--st-text-2); line-height: 1.7; }
.st-section__center { text-align: center; margin-bottom: 30px; }
.st-section__kicker { font-size: 12px; font-weight: 800; color: var(--st-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.st-section__h { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin: 0; }

/* ----- Newsletter ----- */
.st-news {
    position: relative; overflow: hidden; padding: 48px; border-radius: var(--st-clip-xl);
    background: var(--st-hero-bg); box-shadow: var(--st-shadow-lg); text-align: center;
}
.st-news__aurora { position: absolute; top: -20%; inset-inline-start: 20%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,0.3), transparent 70%); filter: blur(10px); animation: st-aurora1 14s ease-in-out infinite; }
.st-news__in { position: relative; max-width: 560px; margin: 0 auto; }
.st-news__t { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 10px; }
.st-news__s { font-size: 14px; color: rgba(255,255,255,0.72); margin: 0 0 24px; line-height: 1.7; }
.st-news__form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; }
.st-news__form input { flex: 1; height: 48px; border-radius: var(--st-clip-btn); border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); color: #fff; padding: 0 16px; font-family: inherit; font-size: 13.5px; outline: none; }
.st-news__form input::placeholder { color: rgba(255,255,255,0.5); }
.st-news__form input:focus { border-color: var(--st-accent); }
@media (max-width: 560px) { .st-news { padding: 32px 20px; } .st-news__form { flex-direction: column; } }

/* ----- Header: mega menu ----- */
.st-nav__mega { position: relative; }
/* Above the scrim (z 159), so the open menu's trigger keeps receiving clicks and can toggle shut. */
.st-nav__trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: none; font: inherit; color: inherit; position: relative; z-index: 161; }
.st-nav__trigger .chev { font-size: 9px; transition: transform var(--st-t-med) var(--st-ease); display: inline-block; }
.st-nav__trigger.open .chev { transform: rotate(180deg); }
.st-nav__trigger.open { color: var(--st-primary); }
.st-mega__ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: var(--st-primary-soft); color: var(--st-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.st-mega__ic .st-img, .st-mega__ic img { width: 100%; height: 100%; object-fit: cover; }
.st-scrim { position: fixed; inset: 0; z-index: 159; }

/* Category mega menu: a category rail beside a live product preview of the hovered category,
   ordered by the storefront's configured default sort, with "see all" as the final action of
   both panes. Fixed and centered under the header so it never clips at the viewport edge. */
.st-catmenu {
    position: fixed; top: calc(var(--st-header-h) + 10px); left: 50%; transform: translateX(-50%);
    width: min(960px, calc(100vw - 28px)); z-index: 160;
    display: grid; grid-template-columns: 252px 1fr;
    border-radius: var(--st-clip); background: var(--st-elevated);
    border: 1px solid var(--st-border); box-shadow: var(--st-shadow-lg);
    overflow: hidden; animation: st-reveal 200ms var(--st-ease);
}
.st-catmenu__side {
    display: flex; flex-direction: column; gap: 2px; padding: 10px;
    background: var(--st-surface-2); border-inline-end: 1px solid var(--st-border);
    max-height: min(480px, calc(100vh - var(--st-header-h) - 40px)); overflow-y: auto; scrollbar-width: thin;
}
.st-catmenu__cat {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: var(--st-clip-btn); color: var(--st-text); text-decoration: none;
    font-weight: 700; font-size: 13px; transition: background var(--st-t-fast) var(--st-ease), color var(--st-t-fast) var(--st-ease);
}
.st-catmenu__cat:hover, .st-catmenu__cat.active { background: var(--st-primary-soft); color: var(--st-primary); }
.st-catmenu__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-catmenu__chev { opacity: 0; display: inline-flex; transition: opacity var(--st-t-fast) var(--st-ease); }
.st-catmenu__cat:hover .st-catmenu__chev, .st-catmenu__cat.active .st-catmenu__chev { opacity: 1; }
.st-catmenu__all {
    margin-top: 6px; padding: 9px 10px; border-top: 1px solid var(--st-border);
    display: flex; align-items: center; gap: 8px; color: var(--st-primary);
    font-weight: 700; font-size: 12.5px; text-decoration: none; border-radius: var(--st-clip-btn);
}
.st-catmenu__all:hover { background: var(--st-primary-soft); }
.st-catmenu__panel {
    padding: 16px 18px;
    max-height: min(480px, calc(100vh - var(--st-header-h) - 40px)); overflow-y: auto; scrollbar-width: thin;
}
.st-catmenu__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.st-catmenu__title { font-weight: 800; font-size: 15px; }
.st-catmenu__more { display: inline-flex; align-items: center; gap: 4px; color: var(--st-primary); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.st-catmenu__more:hover { text-decoration: underline; }
.st-catmenu__section-title { margin: 14px 0 9px; color: var(--st-muted); font-size: 11px; font-weight: 800; }
.st-catmenu__children { padding: 1px 0 3px; }
.st-catmenu__children .st-catmenu__section-title { margin-top: 0; }
.st-catmenu__child-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-catmenu__child { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 8px; color: var(--st-text); background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 10px; text-decoration: none; font-size: 12px; font-weight: 700; transition: border-color var(--st-t-fast) var(--st-ease), color var(--st-t-fast) var(--st-ease); }
.st-catmenu__child:hover { color: var(--st-primary); border-color: var(--st-primary); }
.st-catmenu__child > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-catmenu__child-ic { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: var(--st-primary); background: var(--st-primary-soft); }
.st-catmenu__child-ic .st-img, .st-catmenu__child-ic img { width: 100%; height: 100%; object-fit: cover; }
.st-catmenu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-catmenu__item {
    display: flex; flex-direction: column; gap: 8px; padding: 10px; min-width: 0;
    border-radius: var(--st-clip-sm); border: 1px solid var(--st-border); background: var(--st-surface);
    text-decoration: none; color: var(--st-text);
    transition: border-color var(--st-t-fast) var(--st-ease), transform var(--st-t-fast) var(--st-ease);
}
.st-catmenu__item:hover { border-color: var(--st-primary); transform: translateY(-2px); }
.st-catmenu__thumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--st-chip); display: grid; place-items: center; }
.st-catmenu__thumb .st-img, .st-catmenu__thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-catmenu__name {
    font-size: 12.5px; font-weight: 700; line-height: 1.7; min-height: 42px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.st-catmenu__price { font-size: 13px; font-weight: 800; }
.st-catmenu__price .unit { font-size: 10.5px; color: var(--st-muted); font-weight: 600; }
.st-catmenu__seeall {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--st-clip-sm); border: 1px dashed var(--st-primary-border, var(--st-border));
    background: var(--st-primary-soft); color: var(--st-primary);
    font-size: 12.5px; font-weight: 700; text-decoration: none; min-height: 120px;
    transition: transform var(--st-t-fast) var(--st-ease);
}
.st-catmenu__seeall:hover { transform: translateY(-2px); }
.st-catmenu__empty { padding: 32px 12px; text-align: center; color: var(--st-muted); font-size: 13px; }
.st-catmenu__skel { border-radius: var(--st-clip-sm); background: var(--st-chip); min-height: 150px; animation: st-pulse 1.2s ease-in-out infinite; }
.st-category-groups { display: grid; gap: 24px; }
.st-category-group { padding: 16px; border: 1px solid var(--st-border); border-radius: var(--st-clip); background: var(--st-surface); }
.st-category-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.st-category-group__parent, .st-category-group__all { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.st-category-group__parent { min-width: 0; color: var(--st-text); font-size: 16px; font-weight: 800; }
.st-category-group__parent:hover { color: var(--st-primary); }
.st-category-group__ic { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; color: var(--st-primary); background: var(--st-primary-soft); }
.st-category-group__ic .st-img, .st-category-group__ic img { width: 100%; height: 100%; object-fit: cover; }
.st-category-group__all { color: var(--st-primary); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.st-category-group__all:hover { text-decoration: underline; }
.st-category-group__empty { display: block; padding: 14px; border: 1px dashed var(--st-primary-border); border-radius: var(--st-clip-btn); color: var(--st-primary); background: var(--st-primary-soft); text-align: center; font-weight: 700; font-size: 13px; text-decoration: none; }
@keyframes st-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ----- Header search suggestions ----- */
.st-search__drop {
    position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 160;
    padding: 8px; border-radius: var(--st-clip-menu); background: var(--st-elevated);
    border: 1px solid var(--st-border); box-shadow: var(--st-shadow-lg); animation: st-reveal 160ms var(--st-ease);
}
.st-search__label { font-size: 10.5px; font-weight: 700; color: var(--st-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 8px; }
.st-search__item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; color: var(--st-text); text-decoration: none; transition: background var(--st-t-fast) var(--st-ease); }
.st-search__item:hover { background: var(--st-primary-soft); }
.st-search__item span { font-size: 13px; font-weight: 600; }

@media (max-width: 980px) {
    .st-hwrap { grid-template-columns: 1fr; }
    .st-hstats { flex-direction: row; }
    .st-hstat.accent { display: none; }
    .st-hiw { grid-template-columns: 1fr; }
    .st-bento { grid-template-columns: repeat(2, 1fr); }
    .st-mega { width: 92vw; grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .st-hslider { aspect-ratio: 4 / 5; }
}
@media (max-width: 620px) {
    .st-hslide { padding: 0 26px; }
    .st-hstats { flex-direction: column; }
}

/* ==========================================================================
   Product Listing + Product Detail v2 (Claude Design handoff)
   ========================================================================== */

/* ----- Product card: rating + stock (extends existing .st-pcard) ----- */
.st-pcard__rate { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; }
.st-pcard__stars { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; background: rgba(245,179,66,0.14); color: #E8890C; font-weight: 800; }
:root[data-theme="dark"] .st-pcard__stars { color: #F5B342; }
.st-pcard__reviews { color: var(--st-muted); font-weight: 600; }
.st-pcard__stock { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; padding: 4px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 800; }
.st-pcard__stock.out { background: var(--st-danger-soft); color: var(--st-danger); }

/* Out-of-stock badge. One definition drives every product surface — cards in listings, the home
   sections, search, related products and the detail page's main image — so availability can never
   be styled one way in one place and another way elsewhere. Deliberately small: it labels the
   image, it does not cover it. Positioned with inset-inline-* so RTL places it correctly. */
.st-oos {
    position: absolute; top: 10px; inset-inline-start: 10px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 100px;
    font-size: 11px; font-weight: 800; line-height: 1.6; letter-spacing: -0.01em;
    color: #fff;
    background: rgba(17, 24, 39, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    backdrop-filter: saturate(150%) blur(8px);
    pointer-events: none;
}
.st-oos::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--st-danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}
/* The wishlist control already owns the inline-start corner on a card, so the badge yields to it. */
.st-pcard__media .st-oos { inset-inline-start: auto; inset-inline-end: 10px; top: 10px; }
.st-pcard__media .st-oos ~ .st-pcard__off { top: 44px; }

/* Detail page: the image is larger, so the badge scales a little with it. */
.st-gallery__main .st-oos, .st-buy__media .st-oos { top: 14px; inset-inline-start: 14px; font-size: 12px; padding: 6px 13px; }

/* An unavailable product's image is muted so the state reads at a glance, not only from the pill. */
.st-oos-media { filter: saturate(0.55) opacity(0.82); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .st-oos {
        background: rgba(2, 6, 23, 0.78);
        border-color: rgba(255, 255, 255, 0.14);
    }
}
:root[data-theme="dark"] .st-oos {
    background: rgba(2, 6, 23, 0.78);
    border-color: rgba(255, 255, 255, 0.14);
}

/* ----- Category pill rail ----- */
.st-catrail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 6px; scrollbar-width: thin; }
.st-catpill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 16px 6px 8px; border-radius: 100px; font-family: inherit; font-weight: 700; font-size: 13px; background: var(--st-surface); color: var(--st-text-2); border: 1px solid var(--st-border); cursor: pointer; text-decoration: none; transition: all var(--st-t-fast) var(--st-ease); }
[dir="rtl"] .st-catpill { padding: 6px 8px 6px 16px; }
.st-catpill:hover { border-color: var(--st-border-2); color: var(--st-text); }
.st-catpill.active { background: var(--st-primary-soft); color: var(--st-primary); border-color: var(--st-primary-border); }
.st-catpill__ic { width: 26px; height: 26px; border-radius: 50%; background: var(--st-chip); color: var(--st-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.st-catpill.active .st-catpill__ic { background: var(--st-grad-accent); color: var(--st-on-accent); }
.st-catpill__ic .st-img, .st-catpill__ic img { width: 100%; height: 100%; object-fit: cover; }

/* ----- Listing layout ----- */
.st-listing { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 18px; }
.st-lgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ----- Filter sidebar (sticky glass) ----- */
.st-fsidebar { position: sticky; top: 90px; padding: 22px; border-radius: var(--st-clip); background: var(--st-surface); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--st-border); box-shadow: var(--st-shadow); max-height: calc(100vh - 108px); overflow-y: auto; }
.st-fhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.st-fhead__t { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.st-fhead__count { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 100px; background: var(--st-grad-accent); color: var(--st-on-accent); }
.st-fhead__clear { font-size: 12px; font-weight: 700; color: var(--st-primary); cursor: pointer; background: none; border: none; }
.st-fsearch { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--st-clip-btn); background: var(--st-input-bg); border: 1px solid var(--st-input-border); margin-bottom: 16px; }
.st-fsearch input { border: none; outline: none; background: transparent; color: var(--st-text); font-size: 12.5px; flex: 1; font-family: inherit; }
.st-fsearch .ic { color: var(--st-muted); display: flex; }
.st-fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.st-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 100px; background: var(--st-primary-soft); color: var(--st-primary); font-size: 11.5px; font-weight: 700; }
[dir="rtl"] .st-fchip { padding: 5px 12px 5px 6px; }
.st-fchip button { width: 16px; height: 16px; border-radius: 50%; background: var(--st-primary); color: var(--st-on-accent); display: flex; align-items: center; justify-content: center; font-size: 9px; cursor: pointer; border: none; padding: 0; }

.st-fg { border-bottom: 1px solid var(--st-border); padding: 13px 0; }
.st-fg:last-child { border-bottom: none; }
.st-fg__head { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; user-select: none; }
.st-fg__label { font-weight: 700; font-size: 12px; color: var(--st-text-2); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 7px; }
.st-fg__sel { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 100px; background: var(--st-grad-accent); color: var(--st-on-accent); }
.st-fg__chev { font-size: 11px; color: var(--st-muted); transition: transform var(--st-t-med) var(--st-ease); display: inline-block; }
.st-fg__chev.open { transform: rotate(180deg); }
.st-fg__body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; animation: st-reveal var(--st-t-med) var(--st-ease) both; }
.st-fopt { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0; border: none; background: none; font: inherit; text-align: start; font-size: 13px; font-weight: 600; color: var(--st-text-2); cursor: pointer; user-select: none; }
.st-fopt:hover { color: var(--st-text); }
.st-fopt__l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-fopt__l span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-fbox { width: 17px; height: 17px; flex: 0 0 17px; border-radius: 6px; background: var(--st-input-bg); border: 1.5px solid var(--st-input-border); display: flex; align-items: center; justify-content: center; color: var(--st-on-accent); transition: background var(--st-t-fast) var(--st-ease), border-color var(--st-t-fast) var(--st-ease); }
.st-fbox.on { background: var(--st-grad-accent); border-color: transparent; }
.st-fopt__c { font-size: 11px; color: var(--st-muted); }
.st-fg__empty { font-size: 11.5px; color: var(--st-muted); padding: 4px 0; }

.st-dpills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-dpill { padding: 7px 13px; border-radius: 100px; font-size: 12px; font-weight: 700; background: var(--st-surface); color: var(--st-text-2); border: 1px solid var(--st-border); cursor: pointer; transition: all var(--st-t-fast) var(--st-ease); }
.st-dpill:hover { border-color: var(--st-border-2); }
.st-dpill.active { background: var(--st-grad-accent); color: var(--st-on-accent); border-color: transparent; }

.st-prange { margin-top: 12px; }
.st-prange__inputs { display: flex; gap: 8px; margin-bottom: 10px; }
.st-prange__inputs input { flex: 1; min-width: 0; height: 40px; border-radius: var(--st-clip-btn); border: 1px solid var(--st-input-border); background: var(--st-input-bg); color: var(--st-text); padding: 0 12px; font-size: 12.5px; font-family: inherit; outline: none; }
.st-prange__inputs input:focus { border-color: var(--st-primary); }

.st-toprated { padding-top: 6px; }
.st-toprated__item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--st-clip-btn); text-decoration: none; color: var(--st-text); transition: background var(--st-t-fast) var(--st-ease); }
.st-toprated__item:hover { background: var(--st-primary-soft); }
.st-toprated__ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--st-clip-media); overflow: hidden; background: var(--st-surface-2); }
.st-toprated__ic .st-img, .st-toprated__ic img { width: 100%; height: 100%; object-fit: cover; }
.st-toprated__t { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-toprated__m { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; }
.st-toprated__m .r { color: #E8890C; font-weight: 700; }
.st-toprated__m .p { font-weight: 800; color: var(--st-primary); }

/* ----- Results header + custom sort ----- */
.st-results { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.st-results__count { font-weight: 700; font-size: 14px; color: var(--st-text-2); }
.st-results__count b { color: var(--st-text); }
.st-sort { position: relative; }
.st-sort__btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--st-clip-btn); border: 1px solid var(--st-input-border); background: var(--st-input-bg); color: var(--st-text); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.st-sort__btn .chev { font-size: 10px; color: var(--st-muted); }
.st-sort__menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 200px; padding: 6px; border-radius: var(--st-clip-menu); background: var(--st-elevated); border: 1px solid var(--st-border); box-shadow: var(--st-shadow-lg); z-index: 160; animation: st-reveal 160ms var(--st-ease); }
.st-sort__opt { padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--st-text); background: none; border: none; width: 100%; text-align: start; transition: background var(--st-t-fast) var(--st-ease); }
.st-sort__opt:hover { background: var(--st-primary-soft); }
.st-sort__opt.active { background: var(--st-primary-soft); color: var(--st-primary); font-weight: 700; }

/* ----- Empty state ----- */
.st-empty { padding: 70px 30px; text-align: center; border-radius: var(--st-clip-xl); background: var(--st-surface); border: 1px solid var(--st-border); }
.st-empty__ic { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: var(--st-clip-sm); background: var(--st-primary-soft); color: var(--st-primary); display: flex; align-items: center; justify-content: center; }
.st-empty__t { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.st-empty__s { font-size: 13.5px; color: var(--st-text-2); margin-bottom: 22px; }

/* ----- Mobile filter FAB + bottom sheet ----- */
.st-fab { display: none; position: fixed; bottom: 84px; inset-inline-end: 20px; z-index: 60; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 100px; background: var(--st-grad-accent); color: var(--st-on-accent); font-weight: 800; font-size: 13.5px; box-shadow: var(--st-shadow-lg); border: none; cursor: pointer; }
.st-fab__c { background: var(--st-on-accent); color: var(--st-primary); font-size: 11px; padding: 2px 7px; border-radius: 100px; }
.st-filter-scroll-locked { overflow: hidden; overscroll-behavior: none; }
.st-filter-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; }
.st-filter-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); animation: st-fade 0.25s var(--st-ease); }
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
.st-filter-sheet__panel { position: relative; z-index: 1; width: 100%; block-size: min(86dvh, 760px); max-block-size: 100dvh; display: flex; flex-direction: column; background: var(--st-elevated); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,0.3); animation: st-filter-sheet-up 0.32s var(--st-ease-sheet); outline: none; }
.st-filter-sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 16px 20px; border-bottom: 1px solid var(--st-border); }
.st-filter-sheet__title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.st-filter-sheet__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; padding: 0; border: 1px solid var(--st-input-border); border-radius: var(--st-clip-btn); background: var(--st-input-bg); color: var(--st-text); cursor: pointer; }
.st-filter-sheet__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; }
.st-filter-sheet__footer { display: flex; gap: 10px; flex: 0 0 auto; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--st-border); background: var(--st-elevated); }
.st-filter-sheet__footer .st-btn { flex: 1 1 0; min-width: 0; }
@keyframes st-filter-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@supports not (height: 100dvh) { .st-filter-sheet__panel { block-size: 86vh; max-block-size: 100vh; } }

/* ==========================================================================
   Product Detail v2
   ========================================================================== */
.st-pd2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 44px; align-items: start; margin-top: 8px; }
.st-pd2 > * { min-width: 0; }

/* Gallery: vertical thumb rail + main with glow */
.st-gal { position: relative; display: flex; gap: 14px; margin-bottom: 28px; }
.st-gal__glow { position: absolute; top: 12%; inset-inline-start: 60px; width: 260px; height: 260px; border-radius: 50%; background: var(--st-grad-accent); filter: blur(60px); opacity: 0.28; z-index: 0; pointer-events: none; }
.st-gal__rail { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.st-gal__thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: var(--st-clip-media); overflow: hidden; border: 2px solid transparent; opacity: 0.6; cursor: pointer; background: var(--st-surface-2); transition: opacity var(--st-t-fast) var(--st-ease), border-color var(--st-t-fast) var(--st-ease); }
.st-gal__thumb:hover { opacity: 1; }
.st-gal__thumb.active { opacity: 1; border-color: var(--st-primary); }
.st-gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Product detail main image: square, matching the 1:1 product media rule. */
.st-gal__main { position: relative; z-index: 1; flex: 1; min-width: 0; aspect-ratio: 1/1; border-radius: 28px; overflow: hidden; box-shadow: var(--st-shadow-lg); background: var(--st-surface-2); }
.st-gal__main .st-img, .st-gal__main img { width: 100%; height: 100%; object-fit: cover; animation: st-reveal 400ms var(--st-ease) both; }
.st-gal__badge { position: absolute; top: 0; inset-inline-start: 0; z-index: 2; background: var(--st-grad-accent); color: var(--st-on-accent); font-size: 11px; font-weight: 800; padding: 7px 18px 7px 22px; clip-path: var(--st-ribbon-clip); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }

/* Description trust chips + why band + share */
.st-trustchips { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin: 18px 0 8px; }
.st-trustchip { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--st-clip-menu); background: var(--st-surface); border: 1px solid var(--st-border); white-space: nowrap; }
.st-trustchip__ic { width: 28px; height: 28px; border-radius: 9px; background: var(--st-primary-soft); color: var(--st-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-trustchip__t { font-weight: 700; font-size: 12.5px; }
.st-trustchip__s { font-size: 11px; color: var(--st-muted); }
.st-whyband { position: relative; overflow: hidden; padding: 26px 28px; border-radius: var(--st-clip); background: linear-gradient(140deg, #0b1420, #0f2b28 65%, #0b1420); margin: 20px 0 8px; }
.st-whyband__aurora { position: absolute; top: -40px; inset-inline-end: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,0.25), transparent 70%); }
.st-whyband__t { position: relative; font-weight: 800; font-size: 16px; color: #f5fbfa; margin-bottom: 16px; }
.st-whyband__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.st-whyitem { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--st-clip-media); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.st-whyitem__ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(45,212,191,0.15); color: #5EEAD4; display: flex; align-items: center; justify-content: center; }
.st-whyitem__t { font-weight: 700; font-size: 12px; color: #f5fbfa; }
.st-whyitem__s { font-size: 11px; color: rgba(245,251,250,0.55); line-height: 1.5; }
.st-metarow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 8px 8px; flex-wrap: wrap; background-color: var(--st-bg); border-radius: 10px; }
.st-metarow__l { display: flex; gap: 16px; font-size: 12px; color: var(--st-muted); flex-wrap: wrap; }
.st-metarow__l b { font-weight: 700; color: var(--st-text-2); }
.st-share { display: flex; align-items: center; gap: 8px; }
.st-share__b { width: 30px; height: 30px; border-radius: 8px; background: var(--st-primary-soft); color: var(--st-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; transition: background var(--st-t-fast) var(--st-ease); }
.st-share__b:hover { background: var(--st-chip); }

/* Reviews summary */
.st-revsum { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 18px; border-radius: var(--st-clip-sm); background: var(--st-surface); border: 1px solid var(--st-border); }
.st-revsum__n { font-size: 34px; font-weight: 800; line-height: 1; }
.st-revsum__stars { color: #E8890C; font-size: 15px; letter-spacing: 2px; }
:root[data-theme="dark"] .st-revsum__stars { color: #F5B342; }
.st-revsum__c { font-size: 12px; color: var(--st-muted); margin-top: 3px; }


/* --------------------------------------------------------------------------
   Sticky purchase bar (phones)
   Both actions, not just add-to-cart: leaving "buy now" in the card would still put it a screen away,
   which is the complaint. Sits above the bottom navigation and above the home indicator, and exists
   only where the buy card stops being sticky.
   -------------------------------------------------------------------------- */
.st-buybar { display: none; }
@media (max-width: 1000px) {
    .st-buybar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; inset-inline: 0; z-index: 105;
        bottom: calc(63px + env(safe-area-inset-bottom, 0px));
        padding: 10px 14px;
        background: var(--st-header-bg);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        backdrop-filter: blur(16px) saturate(150%);
        border-top: 1px solid var(--st-border);
    }
    .st-buybar__price { display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; }
    .st-buybar__now { font-weight: 800; font-size: 15px; color: var(--st-text); }
    .st-buybar__unit { font-size: 11px; color: var(--st-muted); }
    .st-buybar__actions { display: flex; gap: 8px; flex: 1; min-width: 0; }
    /* 44px is the smallest comfortable tap target, and both buttons get the same one. */
    .st-buybar__btn { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font-size: 13px; }
    /* Clear the bar as well as the navigation, so the page can still be scrolled to its end. */
    .st-pd2 { padding-bottom: 76px; }
}

/* ----- Buy box (sticky) ----- */
/* The sticky column must never outgrow the viewport: a taller column pins at the top and its lower
   half - the purchase buttons - becomes unreachable, because page scroll no longer moves it. The
   column is capped to the viewport and lays out as a flex column, so the variant list is the part
   that gives way (it already scrolls internally) and the CTAs always stay on screen. If everything
   else still cannot fit (very short viewports full of alerts), the column itself scrolls as a last
   resort instead of hiding the buttons behind nothing. */
.st-buy {
    position: sticky; top: 90px;
    max-height: calc(100vh - 106px);
    display: flex; flex-direction: column; min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.st-buy > * { flex: 0 0 auto; }
.st-buy__card { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
.st-buy__card > * { flex: 0 0 auto; }
.st-buy__card .st-vcards--bounded { flex: 0 1 auto; min-height: 96px; }
.st-buy__kicker { font-size: 11.5px; font-weight: 700; color: var(--st-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.st-buy__title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; line-height: 1.35; }
.st-buy__rate { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13.5px; color: var(--st-text-2); font-weight: 600; }
.st-buy__rate .stars { color: #E8890C; font-size: 14px; letter-spacing: 1px; }
:root[data-theme="dark"] .st-buy__rate .stars { color: #F5B342; }
.st-buy__card { margin-top: 8px; padding: 22px; border-radius: 22px; background: var(--st-surface); backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--st-border); box-shadow: var(--st-shadow-lg); animation: st-reveal 420ms var(--st-ease) 80ms both; }
.st-buy__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.st-buy__now { font-size: 30px; font-weight: 800; }
.st-buy__unit { font-size: 14px; color: var(--st-muted); font-weight: 600; }
.st-buy__old { font-size: 15px; color: var(--st-muted); text-decoration: line-through; }
.st-buy__save { font-size: 12px; font-weight: 700; color: var(--st-success); margin-bottom: 14px; }
.st-buy__lbl { font-size: 12.5px; font-weight: 700; color: var(--st-text-2); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 10px; }
.st-vcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
/* A product with dozens of SKUs used to make the purchase card taller than the viewport, pushing
   "add to cart" and "buy now" below the fold. The selector is bounded instead and scrolls inside
   itself, so the CTAs stay directly beneath it however many variants exist. The bound only kicks
   in once there are enough variants to warrant it (see .st-vcards--bounded). */
.st-vcards--bounded {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
    padding-inline-end: 6px;
    scrollbar-width: thin;
    /* Fades the cut-off edge so it reads as "more below" rather than a clipped layout. */
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.st-vcards--bounded::-webkit-scrollbar { width: 8px; }
.st-vcards--bounded::-webkit-scrollbar-thumb { background: var(--st-border-2); border-radius: 100px; }
.st-vcards--bounded::-webkit-scrollbar-track { background: transparent; }

/* Which SKU is selected must stay obvious once the list scrolls out of view. */
.st-vsummary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 8px 0 2px; padding: 8px 12px; border-radius: var(--st-clip-media);
    background: var(--st-primary-soft); border: 1px solid var(--st-primary);
    font-size: 12.5px; font-weight: 700;
}
.st-vsummary__n { color: var(--st-muted); font-weight: 600; font-size: 11.5px; }

/* An unavailable SKU is not a choice; it stays visible but reads as unselectable. */
.st-vcard[disabled], .st-vcard.is-out { opacity: 0.55; cursor: not-allowed; }
.st-vcard[disabled]:hover, .st-vcard.is-out:hover { border-color: var(--st-border); }

.st-vcard { padding: 9px 12px; border-radius: var(--st-clip-media); border: 2px solid var(--st-border); background: var(--st-surface-2); cursor: pointer; text-align: start; transition: border-color var(--st-t-fast) var(--st-ease), background var(--st-t-fast) var(--st-ease); }
.st-vcard:hover { border-color: var(--st-border-2); }
/* Keyboard users had no visible selection at all on these buttons. */
.st-vcard:focus-visible { outline: none; border-color: var(--st-primary); box-shadow: var(--st-ring); }
.st-vcard.active { border-color: var(--st-primary); background: var(--st-primary-soft); }
/* Two rows, not three: the title on its own line, price and availability sharing the next one. That
   is roughly 62px a card instead of 88px, which is what actually buys the purchase buttons their place
   on the screen - a taller scroll box would only have hidden the problem. */
.st-vcard__t { font-weight: 700; font-size: 13px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-vcard__p { font-size: 12px; color: var(--st-text-2); display: inline; }
.st-vcard__stock { font-size: 10.5px; color: var(--st-muted); display: inline; margin-inline-start: 8px; }

@media (max-width: 640px) {
    /* The product-page trust chip rail duplicates the purchase card reassurance
       on phones and takes a full scrollable row. Keep the product page focused. */
    .st-product-tab-content .st-trustchips { display: none; }
    /* A full-width card gives each mobile variant enough room to show its title in full. */
    .st-vcards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .st-vcards--bounded {
        max-height: min(38vh, 280px);
        mask-image: none;
        -webkit-mask-image: none;
    }
    .st-vcard { min-width: 0; }
    .st-vcard__t {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.6;
        margin-bottom: 6px;
    }
    .st-vcard__p, .st-vcard__stock { white-space: normal; overflow-wrap: anywhere; }
}



.st-buy__qty { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; }
.st-buy__secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 11.5px; color: var(--st-muted); }

@media (max-width: 1000px) {
    .st-listing { grid-template-columns: 1fr; }
    .st-fsidebar { display: none; }
    .st-lgrid { grid-template-columns: repeat(2, 1fr); }
    .st-fab { display: inline-flex; }
    .st-pd2 { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    /* On the desktop the gallery/content column sits beside the purchase
       panel. Once stacked, expose that wrapper's children to the parent grid
       so the purchase decision follows the gallery instead of all rich
       content appearing before the price and primary action. */
    .st-pd2 > div:first-child { display: contents; }
    .st-pd2 .st-gal { grid-row: 1; }
    /* Choosing a version, quantity and purchase action is the primary task on a product page.
       Keep the buy box directly after the image on phones; otherwise its variants end up below
       the long description just because the desktop columns have been stacked. */
    .st-pd2 > .st-buy { grid-row: 2; }
    .st-pd2 .st-ptabs { grid-row: 3; }
    .st-pd2 .st-product-tab-content { grid-row: 4; }
    .st-pd2 .st-product-features { grid-row: 5; }
    /* Stays 1:1 (no height override, which would defeat aspect-ratio); contain keeps the whole
       artwork visible on a narrow screen without changing the square container. */
    .st-gal__main .st-img, .st-gal__main img { object-fit: contain; }
    /* On phones the buy box flows with the page (the sticky buy bar carries the CTAs), so the
       desktop viewport cap and flex layout are lifted along with the stickiness. */
    .st-buy { position: static; max-height: none; display: block; overflow-y: visible; }
    .st-whyband__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .st-lgrid { grid-template-columns: 1fr; }
    .st-gal__main .st-img, .st-gal__main img { object-fit: contain; }
    .st-gal__thumb { width: 52px; height: 52px; flex-basis: 52px; }
    .st-cart-item { display: grid !important; grid-template-columns: 70px minmax(0, 1fr); align-items: start !important; }
    .st-cart-item__image { grid-column: 1; grid-row: 1; }
    .st-cart-item__info { grid-column: 2; grid-row: 1; }
    .st-cart-item > .st-qty { grid-column: 1; grid-row: 2; }
    .st-cart-item__total { grid-column: 2; grid-row: 2; min-width: 0 !important; }
}

@media (max-width: 400px) {
    .st-header__row { gap: 8px; }
    .st-logo { gap: 0; }
    .st-logo__word { display: none; }
    .st-header__actions { min-width: 0; gap: 6px; }
    .st-shell .vz-dialog__head, .st-shell .vz-dialog__body { padding-inline: 14px; }
    .st-shell .vz-dialog__foot { padding-inline: 14px; }
    .st-shell .vz-dialog__foot > * { flex: 1 1 120px; }
}

.st-heart-on { color: var(--st-danger); fill: var(--st-danger); }

/* ----- Cart / Checkout v2 ----- */
.st-promo { display: flex; gap: 8px; margin-bottom: 8px; }
.st-promo input { flex: 1; min-width: 0; }
.st-promo__msg { font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.st-promo__msg.ok { color: var(--st-success); }
.st-promo__msg.err { color: var(--st-danger); }
.st-cart-trust { display: flex; justify-content: center; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--st-border); flex-wrap: wrap; }
.st-cart-trust span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--st-muted); font-weight: 600; }
.st-paycards { display: flex; flex-direction: column; gap: 10px; }
.st-paycard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--st-clip-media); border: 2px solid var(--st-border); background: var(--st-surface-2); cursor: pointer; transition: border-color var(--st-t-fast) var(--st-ease), background var(--st-t-fast) var(--st-ease); }
.st-paycard:hover { border-color: var(--st-border-2); }
.st-paycard.active { border-color: var(--st-primary); background: var(--st-primary-soft); }
.st-paycard.disabled { opacity: 0.55; cursor: not-allowed; }
.st-paycard__ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--st-clip-btn); background: var(--st-chip); color: var(--st-primary); display: flex; align-items: center; justify-content: center; }
.st-paycard__t { font-weight: 700; font-size: 14px; }
.st-paycard__s { font-size: 12px; color: var(--st-text-2); margin-top: 2px; }
.st-paycard__radio { margin-inline-start: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--st-border-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-paycard.active .st-paycard__radio { border-color: var(--st-primary); }
.st-paycard.active .st-paycard__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--st-grad-accent); }
.st-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--st-muted); margin-top: 12px; }
.st-delivery-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--st-text-2); padding: 12px 14px; border-radius: var(--st-clip-media); background: var(--st-primary-soft); margin-top: 12px; }
.st-delivery-note .ic { color: var(--st-primary); flex-shrink: 0; }

/* ==========================================================================
   Branded error / empty-state pages (F4) — mascot-driven
   ========================================================================== */
.st-errpage {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 64px 22px 72px; max-width: 560px; margin: 0 auto;
}
.st-shell select, .st-shell option, .st-shell optgroup { color: var(--st-text); background-color: var(--st-elevated); color-scheme: light; }
:root[data-theme="dark"] .st-shell select, :root[data-theme="dark"] .st-shell option, :root[data-theme="dark"] .st-shell optgroup { color-scheme: dark; }
.st-shell input::placeholder, .st-shell textarea::placeholder { color: var(--st-muted); opacity: 1; }
.st-shell :is(input,select,textarea,button):disabled { opacity: .62; cursor: not-allowed; }

/* Product specifications, sanitized rich content and dynamic customer information */
.st-product-features { margin: 22px 0; }.st-product-features h2 { font-size: 18px; margin-bottom: 12px; }
.st-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0; }
.st-feature-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--st-border); border-radius: var(--st-clip-sm); background: var(--st-surface-2); }
.st-feature-card__icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--st-primary-soft); color: var(--st-primary); }
.st-feature-card dt { color: var(--st-muted); font-size: 12px; }.st-feature-card dd { margin: 2px 0 0; color: var(--st-text); font-weight: 750; overflow-wrap: anywhere; }
.st-rich-content { line-height: 1.95; color: var(--st-text-2); font-size: 14.5px; overflow-wrap: anywhere; }
.st-rich-content :is(h2,h3,h4) { color: var(--st-text); margin: 1.3em 0 .5em; }.st-rich-content :is(ul,ol) { padding-inline-start: 24px; }
.st-rich-content a { color: var(--st-primary); text-decoration: underline; }.st-rich-content img { max-width: 100%; height: auto; }

/* Author-picked text colours go dark-blind. The sanitizer deliberately keeps the style attribute, so
   a colour chosen in the editor - or carried along by pasted content - survives into this container.
   Black text an admin wrote on the editor's white canvas is then rendered onto a dark surface and
   disappears. In dark mode those colours are ignored in favour of the theme's own text colour;
   light mode keeps them, so nothing an author designed is lost where it was designed.
   The :not([style*="background"]) guard leaves highlighted runs alone: when the author set a
   background as well, the pair was chosen together and forcing the foreground would break it. */
:root[data-theme="dark"] .st-rich-content [style*="color"]:not([style*="background"]) { color: var(--st-text-2) !important; }
:root[data-theme="dark"] .st-rich-content :is(h1, h2, h3, h4, h5, h6)[style*="color"]:not([style*="background"]) { color: var(--st-text) !important; }
:root[data-theme="dark"] .st-rich-content a[style*="color"]:not([style*="background"]) { color: var(--st-primary) !important; }
.st-rich-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }.st-rich-content :is(td,th) { border: 1px solid var(--st-border); padding: 8px; }
/* CKEditor 5 content classes (image alignment/resize, table & code figures). */
.st-rich-content figure { margin: 1em 0; }
.st-rich-content figure.image { display: table; }
.st-rich-content figure.image img { display: block; max-width: 100%; height: auto; }
.st-rich-content figure.image > figcaption { display: table-caption; caption-side: bottom; font-size: 12.5px; color: var(--st-muted); padding: 6px 4px; text-align: center; }
.st-rich-content .image-style-align-center, .st-rich-content figure.image.image-style-align-center { margin-inline: auto; }
.st-rich-content .image-style-align-left, .st-rich-content figure.image.image-style-align-left { float: inline-start; margin-inline-end: 1em; }
.st-rich-content .image-style-align-right, .st-rich-content figure.image.image-style-align-right { float: inline-end; margin-inline-start: 1em; }
.st-rich-content img.image_resized, .st-rich-content figure.image.image_resized { height: auto; }
.st-rich-content figure.image.image_resized img { width: 100%; }
.st-rich-content figure.table { display: block; overflow-x: auto; }
.st-rich-content figure.table > figcaption { font-size: 12.5px; color: var(--st-muted); padding: 6px 4px; text-align: center; }
.st-rich-content pre { background: var(--st-surface-2, #f4f6f9); border: 1px solid var(--st-border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; direction: ltr; text-align: left; }
.st-rich-content :is(p,h2,h3,h4,li)[style*="text-align"] { /* honour inline alignment */ }
.st-dynamic-form { display: grid; gap: 14px; }.st-field { display: grid; gap: 6px; }.st-help { color: var(--st-muted); font-size: 12px; }
/* Required vs optional product-input markers. The optional chip is informational, never an error state. */
.st-label .req { color: var(--st-danger); font-weight: 700; }
.st-label .st-optional { color: var(--st-muted); font-weight: 600; font-size: 11px; background: var(--st-surface-2); border: 1px solid var(--st-border); border-radius: 999px; padding: 1px 7px; margin-inline-start: 4px; white-space: nowrap; }
.st-input.is-invalid, .st-select.is-invalid, .st-textarea.is-invalid { border-color: var(--st-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-danger) 18%, transparent); }
.st-check.is-invalid { color: var(--st-danger); }
.st-field__error { color: var(--st-danger); font-size: 12px; font-weight: 650; }
.st-input-summary { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 6px 0; color: var(--st-text-2); font-size: 11.5px; }.st-input-summary span { overflow-wrap: anywhere; }
.st-order-inputs { display: grid; gap: 6px; margin: 8px 0 0; }.st-order-inputs div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 9px; border-radius: 8px; background: var(--st-surface-2); }.st-order-inputs dt { color: var(--st-muted); }.st-order-inputs dd { margin: 0; color: var(--st-text); overflow-wrap: anywhere; }
.st-footer__seals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }.st-footer__seals a { width: 92px; height: 92px; display: grid; place-items: center; border: 1px solid var(--st-border); border-radius: var(--st-clip-sm); background: var(--st-elevated); }/* width/height auto beats the providers' pasted width=/height= attributes, so every badge keeps
   its own aspect ratio inside the uniform box. */
.st-footer__seals img { width: auto; height: auto; max-width: 78px; max-height: 78px; object-fit: contain; }
@media (max-width: 760px) { .st-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .st-feature-grid { grid-template-columns: 1fr; }.st-feature-card { padding: 12px; } }
.st-errpage__art { position: relative; margin-bottom: 14px; display: flex; justify-content: center; }
.st-mascot {
    width: clamp(150px, 42vw, 224px); height: auto; display: block;
    filter: drop-shadow(0 22px 40px rgba(13, 148, 136, 0.28));
    animation: st-float 4.5s ease-in-out infinite;
}
:root[data-theme="dark"] .st-mascot { filter: drop-shadow(0 22px 44px rgba(45, 212, 191, 0.30)); }
.st-mascot--svg .st-mascot__sparks path { transform-box: fill-box; transform-origin: center; animation: st-twinkle 2.6s ease-in-out infinite; }
.st-mascot--svg .st-mascot__sparks path:nth-child(2) { animation-delay: 0.5s; }
.st-mascot--svg .st-mascot__sparks path:nth-child(3) { animation-delay: 1s; }
.st-mascot--svg .st-mascot__sparks path:nth-child(4) { animation-delay: 1.5s; }
.st-errpage__art { flex-direction: column; align-items: center; gap: 2px; }
/* Its own line under the mascot: the absolutely-positioned corner badge this used to be landed on
   the mascot's face at real content widths and read as a rendering glitch. */
.st-errpage__code {
    font-size: clamp(38px, 10vw, 60px); font-weight: 900; line-height: 1.1;
    background: var(--st-grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: 0.95; letter-spacing: -2px; pointer-events: none;
}
.st-errpage__title { font-size: clamp(22px, 5vw, 30px); font-weight: 800; margin-top: 6px; }
.st-errpage__msg { color: var(--st-muted); font-size: 15px; line-height: 2; inline-size: min(100%, 440px); max-inline-size: 100%; overflow-wrap: anywhere; }
.st-errpage__extra { width: 100%; margin: 4px 0; }
.st-errpage__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.st-errpage .st-mascot, .st-errpage__title, .st-errpage__msg, .st-errpage__actions { animation: st-reveal 600ms var(--st-ease) both; }
.st-errpage__title { animation-delay: 60ms; }
.st-errpage__msg { animation-delay: 120ms; }
.st-errpage__actions { animation-delay: 180ms; }
.st-errpage .st-mascot { animation: st-float 4.5s ease-in-out infinite, st-reveal 600ms var(--st-ease) both; }

/* Inline (in-card) empty state variant — smaller mascot, no page padding */
.st-errpage--inline { padding: 40px 18px; max-width: 420px; }
.st-errpage--inline .st-mascot { width: clamp(110px, 30vw, 150px); }

@keyframes st-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes st-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
    .st-mascot, .st-errpage .st-mascot, .st-mascot--svg .st-mascot__sparks path { animation: none !important; }
}
.st-empty__mascot { width: clamp(104px, 26vw, 148px) !important; height: auto; margin: 0 auto 8px; }
/* Keyboard accessibility and reduced-motion defaults. */
.st-skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100000;transform:translateY(-150%);padding:10px 16px;border-radius:10px;background:var(--st-accent,#0ea5a8);color:#fff;font-weight:700}
.st-skip-link:focus{transform:translateY(0);outline:3px solid var(--st-focus,#f59e0b);outline-offset:2px}
/* Keyboard focus ring for controls a user can actually reach with Tab. */
:where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--st-focus,#f59e0b);outline-offset:2px}
/* FIX-16: tabindex="-1" marks an element as programmatically focusable only — never reachable by
   Tab. Blazor's <FocusOnNavigate Selector="h1"/> stamps it on the page heading after every route
   change, and modals/skip-targets use it for focus management. Suppressing the ring here removes
   both the amber site ring above and the browser's default `outline:auto`, without touching any
   control a keyboard user can actually reach. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Checkout: one card per cart line that needs product information, so the customer can always tell
   which values belong to which purchased item. */
.st-itemform { border: 1px solid var(--st-border); border-radius: var(--st-clip-btn); padding: 14px; background: var(--st-surface); }
.st-itemform__head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--st-border); }
.st-itemform__media { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; overflow: hidden; background: var(--st-surface-2); display: flex; align-items: center; justify-content: center; color: var(--st-muted); }
.st-itemform__media img { width: 100%; height: 100%; object-fit: cover; }
.st-itemform__t { font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.st-itemform__s { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; color: var(--st-text-2); font-size: 12px; }
@media (max-width: 480px) {
    .st-itemform { padding: 12px; }
    .st-itemform__media { width: 38px; height: 38px; flex: 0 0 38px; }
}

/* FAQ answers are plain text (never MarkupString), so line breaks survive through styling rather
   than through markup. pre-line preserves the administrator's newlines and still collapses runs of
   spaces and wraps long lines normally. Shared by the product, global and home FAQ surfaces. */
.st-faq__a {
    padding: 0 20px 18px;
    color: var(--st-text-2);
    font-size: 13.5px;
    line-height: 2;
    white-space: pre-line;
    overflow-wrap: anywhere;
}