/* ============================================================
   StoneAge — design system  (grayscale brand kit)
   INK #0a0a0b · CARBON #16161a · SLATE #6f7178 · SILVER #b9c0c8 · CHROME #eceef1
   Accent = light gray/chrome (no orange). Purple kept ONLY for gamification.
   Fonts: Archivo Black (display) · Space Mono (labels/meta) · Manrope (body)
   NOTE: the --amber* / .btn-amber / .text-amber names are kept for compatibility
   but now hold the CHROME (light-gray) accent.
   ============================================================ */

:root {
    /* grayscale ramp */
    --ink: #0a0a0b;
    --carbon: #16161a;
    --slate: #6f7178;
    --silver: #b9c0c8;
    --chrome: #eceef1;

    /* surfaces (dark → slightly lighter) */
    --stone-950: #070708;
    --stone-900: #0a0a0b;
    --stone-850: #101012;
    --stone-800: #16161a;
    --stone-700: #26262b;

    --line: rgba(236, 238, 241, 0.08);
    --line-strong: rgba(236, 238, 241, 0.16);

    --bone: #eceef1;   /* primary text (CHROME) */
    --muted: #9a9ea6;  /* secondary text */
    --muted-2: #6f7178; /* SLATE */

    /* accent = light gray (replaces the old amber/orange) */
    --amber: #e7e9ec;
    --amber-600: #c9ccd2;
    --amber-ink: #0a0a0b;

    /* gamification accent (kept) */
    --purple: #8B7BF4;
    --purple-600: #6B5BD6;
    --purple-ink: #160F2E;

    --danger: #b23a3a;
    --success: #2f6f3a;

    --radius: 10px;
    --radius-lg: 14px;

    --font-body: 'Manrope', 'Noto Sans Georgian', system-ui, sans-serif;
    --font-display: 'Archivo Black', 'Noto Sans Georgian', sans-serif;
    --font-mono: 'Space Mono', ui-monospace, monospace;
}

@font-face { font-family: "NinoMtavruli"; src: url(/media/NinoMtavruli.ttf); font-display: swap; }

* { box-sizing: border-box; }

/* Root font size drives every rem in this sheet, so the S/M/L switch scales the
   whole interface by overriding one variable. See wwwroot/js/text-size.js. */
:root { --sa-text-scale: 1; }
:root[data-text-size="s"] { --sa-text-scale: .9; }
:root[data-text-size="m"] { --sa-text-scale: 1; }
:root[data-text-size="l"] { --sa-text-scale: 1.15; }

html { position: relative; min-height: 100%; font-size: calc(16px * var(--sa-text-scale)); }

body {
    font-family: var(--font-body);
    background-color: var(--stone-900);
    background-image:
        radial-gradient(900px 520px at 100% -10%, rgba(236, 238, 241, 0.05), transparent 60%),
        radial-gradient(1000px 600px at -10% 0%, rgba(110, 113, 120, 0.10), transparent 55%);
    background-attachment: fixed;
    color: var(--bone);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; animation: fadeUp .5s ease both; }

a { color: var(--bone); text-decoration: none; transition: color .15s ease; }
a:hover { color: #fff; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: .005em; font-weight: 400; }

.display-hero {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-size: clamp(2.6rem, 7vw, 5rem);
    margin: 0;
    /* Georgian compounds are single unbreakable tokens — "კონფიდენციალურობის"
       alone is wider than a phone. Without this the heading pushes the whole page
       into horizontal scroll. */
    overflow-wrap: break-word;
}

.text-amber { color: var(--chrome) !important; }
.text-purple { color: var(--purple) !important; }
.text-bone { color: var(--bone) !important; }
.text-muted-stone { color: var(--muted) !important; }

/* ---------- Eyebrow / chips (Space Mono) ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-weight: 700;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 6px;
    background: var(--chrome); color: var(--ink);
}
.eyebrow.eyebrow-purple { background: rgba(139,123,244,.16); color: var(--purple); border: 1px solid rgba(139,123,244,.35); }
.eyebrow.eyebrow-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }

/* ---------- Navbar ---------- */
.sa-nav {
    background: rgba(10, 10, 11, 0.86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 1000;
}
.sa-brand { display: flex; align-items: center; gap: 9px; }
.sa-brand .wordmark {
    font-family: var(--font-display); font-weight: 400;
    font-size: 1.3rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
}
/* 22x30 keeps the stone's own 0.736 ratio at roughly the previous visual weight. */
.sa-brand .emblem { width: 22px; height: 30px; object-fit: contain; display: block; transition: transform .2s ease; }
.sa-brand:hover .emblem { transform: rotate(-6deg) scale(1.08); }

/* Brand kit wordmark treatment: trailing word is outlined */
.wm-outline { color: transparent !important; -webkit-text-stroke: 1.4px var(--silver); text-stroke: 1.4px var(--silver); }
.display-hero .wm-outline { -webkit-text-stroke: 2px var(--slate); text-stroke: 2px var(--slate); }

/* Georgian glyphs are loop-heavy (e.g. ე) and self-intersect with -webkit-text-stroke
   at large sizes, producing stray render artifacts. Layered text-shadow gives the same
   outline look without path self-overlap.

   The selector must test the ELEMENT's own language (.wm-outline:lang(ka)), not an
   ancestor's. Written as ":lang(ka) .wm-outline" it also matched the navbar wordmark,
   because <html lang="ka"> is an ancestor of everything — so the Latin "AGE" in the
   logo picked up the 8-layer shadow and rendered as a thick blurred blob whenever the
   site was switched to Georgian. The brand wordmark carries lang="en" and stays on the
   crisp stroke path. */
.wm-outline:lang(ka) {
    -webkit-text-stroke: 0;
    text-stroke: 0;
    color: transparent !important;
    text-shadow:
        -1px -1px 0 var(--silver), 1px -1px 0 var(--silver),
        -1px  1px 0 var(--silver), 1px  1px 0 var(--silver),
         0   -1px 0 var(--silver), 0    1px 0 var(--silver),
        -1px  0   0 var(--silver), 1px  0   0 var(--silver);
}
.display-hero .wm-outline:lang(ka) {
    text-shadow:
        -1.4px -1.4px 0 var(--slate), 1.4px -1.4px 0 var(--slate),
        -1.4px  1.4px 0 var(--slate), 1.4px  1.4px 0 var(--slate),
         0     -1.4px 0 var(--slate), 0      1.4px 0 var(--slate),
        -1.4px  0     0 var(--slate), 1.4px  0     0 var(--slate);
}
.sa-nav .nav-link {
    color: var(--muted); font-weight: 600; font-size: .95rem;
    padding: .4rem .85rem; border-radius: 8px; transition: color .15s ease, background .15s ease;
}
.sa-nav .nav-link:hover { color: var(--bone); background: rgba(236,238,241,.05); }
.sa-icon-btn {
    width: 40px; height: 40px; border-radius: 9px; display: inline-grid; place-items: center;
    color: var(--bone); background: rgba(236,238,241,.05); border: 1px solid var(--line); font-size: 19px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.sa-icon-btn:hover { background: var(--chrome); color: var(--ink); border-color: var(--chrome); transform: translateY(-1px); }
.navbar-toggler { border-color: var(--line-strong); }
.sa-nav .navbar-toggler { color: var(--bone); line-height: 1; }
.sa-nav .navbar-toggler .bi { font-size: 1.5rem; }

/* Language switch (Space Mono) */
.lang-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; font-family: var(--font-mono); }
.lang-switch a { padding: 5px 11px; font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; transition: background .15s ease, color .15s ease; }
.lang-switch a.active { background: var(--chrome); color: var(--ink); }
.lang-switch a:hover:not(.active) { background: rgba(236,238,241,.07); color: var(--bone); }

/* Text-size switch — deliberately matches .lang-switch so the two read as a pair. */
.size-switch { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; font-family: var(--font-mono); }
.size-switch button {
    padding: 5px 10px; font-size: .78rem; font-weight: 700; color: var(--muted);
    letter-spacing: .04em; background: transparent; border: 0; cursor: pointer;
    font-family: inherit; transition: background .15s ease, color .15s ease;
}
.size-switch button.active { background: var(--chrome); color: var(--ink); }
.size-switch button:hover:not(.active) { background: rgba(236,238,241,.07); color: var(--bone); }

/* ---------- Navbar top row: never wrap the hamburger ----------
   Brand + account icons + toggler share one row. Previously the brand was
   unshrinkable, so on a phone the three together exceeded the container and the
   toggler dropped to a second line. The rule is: the icons and the toggler keep
   their size (they are touch targets), and the BRAND gives up space instead.
   That is what makes this hold at any width rather than at the two we tested. */
.sa-brand { min-width: 0; flex-shrink: 1; overflow: hidden; }
.sa-brand .wordmark { white-space: nowrap; overflow: hidden; }
.sa-brand .emblem { flex-shrink: 0; }
.sa-nav-account { flex-shrink: 0; }
.sa-nav .navbar-toggler { flex-shrink: 0; }

@media (max-width: 991.98px) {
    /* Below the lg breakpoint the collapse is closed, so this row carries
       everything. Tighten the brand first — the icons stay finger-sized. */
    .sa-brand { gap: 6px; }
    .sa-brand .wordmark { font-size: 1.05rem; letter-spacing: .06em; }
    .sa-brand .emblem { width: 18px; height: 25px; }
    .sa-nav-account { gap: 6px !important; }
    .sa-icon-btn { width: 38px; height: 38px; font-size: 17px; }
}

@media (max-width: 400px) {
    /* Smallest phones. The wordmark is allowed to clip rather than push the
       hamburger off the row — the emblem still identifies the brand. */
    .sa-brand .wordmark { font-size: .95rem; letter-spacing: .02em; }
    .sa-nav-account { gap: 4px !important; }
    .sa-icon-btn { width: 36px; height: 36px; font-size: 16px; }
    .sa-nav .navbar-toggler { padding: .25rem .5rem; }
    .sa-nav .navbar-toggler .bi { font-size: 1.3rem; }
}

@media (max-width: 360px) {
    /* A wrapping flex container assigns items to lines using their NATURAL width,
       then shrinks — so a brand that is merely shrinkable still pushes the
       hamburger onto a second row. At 320px: brand 119 + icons 156 + toggler 44
       = 319 against 296 usable. Dropping the wordmark (the emblem still marks the
       brand and the whole thing stays a link home) takes the row to ~224px and
       leaves real headroom, instead of tuning it to fit one device exactly. */
    .sa-brand .wordmark { display: none; }
    .sa-brand .emblem { width: 20px; height: 27px; }
}

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-body); font-weight: 700; border-radius: 9px; padding: .6rem 1.2rem; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; border: 1px solid transparent; }
.btn:active { transform: scale(.98); }
.btn-amber, .btn-primary { background: var(--chrome); color: var(--ink); border-color: var(--chrome); }
.btn-amber:hover, .btn-primary:hover { background: #fff; border-color: #fff; color: var(--ink); transform: translateY(-1px); }
.btn-purple { background: var(--purple); color: #fff; border-color: var(--purple); }
.btn-purple:hover { background: var(--purple-600); border-color: var(--purple-600); color: #fff; transform: translateY(-1px); }
.btn-ghost-stone { background: transparent; color: var(--bone); border-color: var(--line-strong); }
.btn-ghost-stone:hover { background: rgba(236,238,241,.06); color: var(--bone); border-color: var(--silver); transform: translateY(-1px); }
.btn-success { background: var(--success); border-color: var(--success); color: #eafff0; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-danger { color: #d98a8a; border-color: var(--danger); background: transparent; }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }

/* ---------- Cards / panels ---------- */
.card, .sa-panel {
    background: var(--stone-850);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--bone);
}
.card-header { background: var(--stone-800); border-bottom: 1px solid var(--line); }
.card-footer { background: transparent; border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- Product cards ---------- */
.product-card { overflow: hidden; transition: transform .18s ease, border-color .18s ease; height: 100%; animation: fadeUp .45s ease both; }
.product-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.product-media { position: relative; aspect-ratio: 4 / 5; background: var(--stone-800); overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.product-card:hover .product-media img { transform: scale(1.05); }
.product-media .placeholder-ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-2); font-size: 2.6rem; }
.product-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-family: var(--font-mono);
    font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 6px; background: var(--chrome); color: var(--ink);
}
.product-badge.limited { background: var(--ink); color: var(--chrome); border: 1px solid rgba(236,238,241,.45); }
.product-title { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: 0; color: var(--bone); }
.product-price { font-family: var(--font-mono); font-weight: 700; color: var(--chrome); font-size: 1.1rem; }
.add-btn { width: 38px; height: 38px; border-radius: 9px; display: inline-grid; place-items: center;
    background: var(--chrome); color: var(--ink); border: none; font-size: 17px; transition: background .15s, transform .15s; }
.add-btn:hover { background: #fff; transform: scale(1.08); }
.product-card-actions { display: flex; align-items: center; gap: 8px; }

/* Two cards per row on a phone leaves ~130px of content width. A four-digit
   price plus both action buttons needs more than that, and the buttons were
   being clipped off the card — let the row wrap instead. */
.product-card-footer { flex-wrap: wrap; gap: 8px; }
.product-comment-btn {
    height: 38px; min-width: 44px; padding: 0 10px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
    font-family: var(--font-mono); font-size: .72rem; cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.product-comment-btn:hover {
    color: var(--bone); border-color: var(--silver); background: rgba(236,238,241,.06);
    transform: translateY(-1px);
}
.wish-btn {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line-strong); background: rgba(10,10,11,.55); backdrop-filter: blur(4px);
    color: var(--chrome); display: grid; place-items: center; font-size: 15px; cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.wish-btn:hover { transform: scale(1.1); background: rgba(10,10,11,.82); }
.wish-btn.active { color: var(--purple); border-color: rgba(139,123,244,.5); }
.wish-btn.loading { opacity: .5; pointer-events: none; }
.cat-chip { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line-strong); color: var(--muted); background: transparent; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.cat-chip:hover { color: var(--bone); border-color: var(--silver); }
.cat-chip.active { background: var(--chrome); color: var(--ink); border-color: var(--chrome); }

/* ---------- Profile: wishlist + custom-design grids ---------- */
.wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.wish-card { position: relative; }
.wish-thumb { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--stone-800); border: 1px solid var(--line); }
.wish-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.wish-card:hover .wish-thumb img { transform: scale(1.05); }
.wish-thumb .ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted-2); font-size: 1.8rem; }
.wish-remove-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(178,58,58,.5); background: rgba(10,10,11,.6); backdrop-filter: blur(4px); color: #e0a3a3; display: grid; place-items: center; cursor: pointer; transition: background .15s ease, transform .12s ease; }
.wish-remove-btn:hover { background: var(--danger); color: #fff; transform: scale(1.08); }
.wish-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; }
.wish-name { font-size: .82rem; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.design-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--stone-850); }
.design-thumb { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.design-thumb img { width: 100%; height: 100%; object-fit: contain; }
.design-thumb .ph { color: var(--muted-2); font-size: 2rem; }
.design-thumb .status-pill { position: absolute; top: 8px; left: 8px; }
.design-meta { padding: 10px 12px; }
.design-card-extra:not([hidden]) { animation: fadeUp .3s ease both; }
.design-toggle-wrap { display: flex; justify-content: center; margin-top: 16px; }
.design-toggle { min-width: 132px; }
.design-toggle span { align-items: center; justify-content: center; }
.design-toggle span:not([hidden]) { display: inline-flex; }

/* ---------- Gamification (purple — the one pop of colour) ---------- */
.xp-strip {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(90deg, rgba(139,123,244,.14), rgba(139,123,244,.04));
    border: 1px solid rgba(139,123,244,.30);
    border-radius: var(--radius-lg); padding: 14px 18px;
}
.level-badge {
    width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--purple); color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem;
}
.level-badge.maxed { background: var(--chrome); color: var(--ink); }
.xp-track { height: 9px; background: var(--stone-950); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.xp-fill { height: 100%; background: var(--purple); border-radius: 6px; animation: xpGrow 1s ease both; }
.xp-fill.maxed { background: var(--chrome); }

.progress { background: var(--stone-950); border: 1px solid var(--line); height: 14px; border-radius: 7px; }
.progress-bar { background: var(--purple); }
.progress-bar.bg-warning { background: var(--chrome) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background: var(--stone-800); border: 1px solid var(--line-strong); color: var(--bone);
    border-radius: 9px; padding: .6rem .85rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    background: var(--stone-800); color: var(--bone);
    border-color: var(--silver); box-shadow: 0 0 0 3px rgba(236,238,241,.12);
}
.form-control::placeholder { color: var(--muted-2); }
label { color: var(--muted); font-family: var(--font-mono); font-weight: 400; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; }
.form-check-input { background-color: var(--stone-800); border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--chrome); border-color: var(--chrome); }
.form-check-label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: .9rem; }

/* ---------- Auth ---------- */
.auth-wrap { max-width: 440px; margin: 3rem auto; }
.auth-card { background: var(--stone-850); border: 1px solid var(--line); border-radius: 18px; padding: 2.2rem; }

/* ---------- Alerts / validation ---------- */
.alert { border-radius: 11px; border: 1px solid var(--line-strong); }
.alert-success { background: rgba(47,111,58,.16); color: #b7e3c2; border-color: rgba(47,111,58,.5); }
.alert-secondary, .alert-danger { background: rgba(178,58,58,.14); color: #e6b1b1; border-color: rgba(178,58,58,.45); }
.text-danger { color: #e0a3a3 !important; }
.validation-msg { color: #e0a3a3; font-size: .82rem; opacity: .9; }

/* ---------- Accordion ---------- */
.accordion-item { background: var(--stone-850); border: 1px solid var(--line); }
.accordion-button { background: var(--stone-800); color: var(--bone); font-weight: 700; }
.accordion-button:not(.collapsed) { background: var(--stone-700); color: var(--chrome); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(236,238,241,.12); }
.accordion-body { background: var(--stone-850); color: var(--muted); }

/* ---------- Footer ---------- */
.sa-footer {
    flex-shrink: 0; border-top: 1px solid var(--line);
    background: var(--stone-950); color: var(--muted); padding: 1.5rem 0; margin-top: 3rem;
    font-family: var(--font-mono); font-size: .82rem;
}
.sa-footer a { color: var(--muted); }
.sa-footer a:hover { color: var(--chrome); }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0; }
/* Phone: the two hero CTAs sat at different widths and heights because the
   Georgian labels wrap ("შექმენი საკუთარი მაისური" ran to three lines at 20px,
   giving an 81px button next to a 51px one). Full width and a slightly smaller
   label keeps them level and comfortably tappable in both languages. */
@media (max-width: 575.98px) {
    .hero .btn-lg {
        width: 100%;
        min-height: 44px;
        font-size: 1.05rem;
        padding-inline: 1rem;
    }
}
/* iPhone SE and friends: the longest Georgian label still wrapped at 1.05rem.
   min-height above keeps the smaller text from dropping the button under 44px. */
@media (max-width: 360px) {
    .hero .btn-lg {
        font-size: .92rem;
        padding-inline: .65rem;
    }
}
.hero-visual {
    border: 1px solid var(--line); border-radius: 18px; background: var(--stone-850);
    aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; position: relative;
}
.hero-visual img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.hero-visual:hover img { transform: scale(1.03); }
/* brand-kit mascot: desaturated to grayscale with a faint glow behind the gem */
.hero-visual.mascot { background: radial-gradient(60% 45% at 50% 52%, rgba(236,238,241,.10), transparent 70%), var(--stone-850); }
.hero-visual.mascot img { filter: grayscale(1) contrast(1.06) brightness(.96); }
/* art projector: a paper sheet, not a black box. The frame background matches the
   paper colour baked into both GIFs (#fcfcff), so `contain` letterboxing reads as
   sheet margin instead of bars — every animation fits whole, none get stretched. */
.hero-visual.art-projector {
    width: min(100%, 480px);
    margin-inline: auto;
    /* site.js sets --projector-ratio from the active slide's own width/height, so
       each animation fills the sheet instead of floating in blank paper. 16/9 is
       only the fallback for a no-JS / no-slide render. Height is capped so a tall
       slide can't swallow the fold on a phone. */
    aspect-ratio: var(--projector-ratio, 16 / 9);
    max-height: min(58vh, 420px);
    /* No transition on aspect-ratio: animating it here left the box stuck at the
       previous ratio (the computed value never reached the new one, so the frame
       kept the old height and the art floated in blank paper again). The 1.1s
       crossfade already covers the reframe. */
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fcfcff;
    box-shadow: 0 14px 36px rgba(0,0,0,.26);
}
.hero-visual.art-projector .carousel-inner,
.hero-visual.art-projector .carousel-item {
    width: 100%;
    height: 100%;
}
/* slow dissolve between animations. The outgoing item's hold-then-hide delay has to
   match the fade duration, otherwise it drops out mid-crossfade and the paper flashes. */
.hero-visual.art-projector.carousel-fade .carousel-item {
    transition: opacity 1.1s ease-in-out;
}
.hero-visual.art-projector.carousel-fade .active.carousel-item-start,
.hero-visual.art-projector.carousel-fade .active.carousel-item-end {
    transition: opacity 0s 1.1s;
}
@media (prefers-reduced-motion: reduce) {
    .hero-visual.art-projector.carousel-fade .carousel-item { transition: none; }
}
.projector-slide {
    overflow: hidden;
    background: #fcfcff;
}
/* ---------- Idle projector (every slide hidden) ----------
   No film in the projector, so the sheet goes dark instead of showing a blank
   white rectangle. Keeps the frame, drops the paper. */
.hero-visual.art-projector.projector-idle {
    background: radial-gradient(70% 60% at 50% 45%, rgba(236,238,241,.07), transparent 70%), var(--stone-850);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.projector-idle-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    padding: 1.25rem;
    z-index: 1;
}
/* Two classes on purpose: `.hero-visual img { width: 100% }` above is (0,1,1) and
   would otherwise blow the emblem up to fill the whole panel. */
.projector-idle .projector-idle-emblem {
    width: 33px;
    height: 44px;
    object-fit: contain;
    opacity: .5;
    filter: grayscale(1);
    animation: projectorPulse 3.2s ease-in-out infinite;
}
.projector-idle-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--bone);
}
.projector-idle-sub {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
}
/* A faint beam drifting across the empty sheet — the projector is on, the reel
   is empty. Subtle on purpose; it should read as texture, not animation. */
.hero-visual.art-projector.projector-idle::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(236,238,241,.06) 50%, transparent 62%);
    background-size: 260% 100%;
    animation: projectorSweep 7s linear infinite;
    pointer-events: none;
}
@keyframes projectorPulse {
    0%, 100% { opacity: .32; }
    50%      { opacity: .6; }
}
@keyframes projectorSweep {
    from { background-position: 130% 0; }
    to   { background-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .projector-idle-emblem { animation: none; opacity: .45; }
    .hero-visual.art-projector.projector-idle::after { animation: none; }
}
/* Clickable (promo/ad) slides: the anchor must fill the frame like a bare img. */
.projector-slide .projector-link {
    display: block;
    width: 100%;
    height: 100%;
}
.projector-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    transition: transform .5s ease;
    filter: contrast(1.04);
}
.hero-visual.art-projector:hover img { transform: scale(1.008); }
/* The wrapper keeps Bootstrap's .carousel-indicators class so the active dot stays in
   sync, so these rules have to out-specify the default bar styling and reset it. */
.hero-visual.art-projector .projector-indicators {
    position: absolute;
    z-index: 4;
    left: 50%;
    right: auto;
    bottom: 8px;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}
.hero-visual.art-projector .projector-indicators [data-bs-target] {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    text-indent: 0;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    background: transparent;
    background-clip: border-box;
    opacity: .4;
    transition: opacity .4s ease, background-color .4s ease;
}
.hero-visual.art-projector .projector-indicators [data-bs-target].active {
    background: #1a1a1a;
    opacity: .85;
}
/* The dots are deliberately 6px, which is far too small to hit with a thumb.
   A transparent ::before pad gives each one a 44px target without changing how
   the dot looks or how the row is spaced. */
@media (pointer: coarse) {
    .hero-visual.art-projector .projector-indicators { gap: 14px; }
    .hero-visual.art-projector .projector-indicators [data-bs-target] { position: relative; }
    .hero-visual.art-projector .projector-indicators [data-bs-target]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}
.hero-stat { border-left: 2px solid var(--chrome); padding-left: 12px; }
.hero-stat .n { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--bone); }
.hero-stat .l { color: var(--muted); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }

/* legacy helpers */
.ProgtiqvaFont, .ProgtiqvaFontBold, .ProgtiqvaFontBolder { font-family: var(--font-display); }
.FontNumber { font-family: var(--font-mono); }

/* ---------- Tee maker ---------- */
.tee-stage {
    display: flex; justify-content: center; align-items: center;
    background:
        linear-gradient(rgba(236,238,241,.025) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--stone-900);
    border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-height: 320px;
}
.tee-stage .canvas-container { max-width: 100%; }
.swatch { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--line-strong); cursor: pointer; padding: 0; transition: transform .12s ease, border-color .12s ease; }
.swatch:hover { transform: translateY(-2px); }
.swatch.active { border-color: var(--chrome); box-shadow: 0 0 0 2px rgba(236,238,241,.5); }
.mode-tab { color: var(--muted); border: none; background: transparent; font-weight: 700; border-radius: 8px; padding: .4rem 1rem; }
.mode-tab.active { background: var(--chrome); color: var(--ink); }

/* side switcher (front / back / left / right) */
.side-tabs { display: flex; gap: 6px; background: var(--stone-800); border: 1px solid var(--line); border-radius: 10px; padding: 5px; }
.side-tab { flex: 1; border: none; background: transparent; color: var(--muted); font-weight: 700; font-size: .85rem; border-radius: 7px; padding: .4rem .5rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
.side-tab.active { background: var(--chrome); color: var(--ink); }
.side-tab:hover:not(.active) { color: var(--bone); }

/* 3D tee designer — studio stage: soft key glow, floor shadow, vignette */
.tee3d-wrap { position: relative; }
.tee3d-stage {
    width: 100%; height: clamp(420px, 58vw, 640px); min-height: 0;
    border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; touch-action: none; cursor: grab;
    background:
        radial-gradient(75% 46% at 50% 96%, rgba(7,7,8,.85), transparent 68%),
        radial-gradient(58% 52% at 50% 38%, rgba(236,238,241,.09), transparent 72%),
        radial-gradient(120% 96% at 50% 50%, transparent 58%, rgba(7,7,8,.55) 100%),
        linear-gradient(rgba(236,238,241,.02) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(236,238,241,.02) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(180deg, var(--stone-850), var(--stone-950));
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tee3d-stage:hover { border-color: rgba(236,238,241,.28); }
.tee3d-stage:focus-visible {
    outline: none;
    border-color: var(--silver);
    box-shadow: 0 0 0 3px rgba(236,238,241,.14);
}
.tee3d-stage:active { cursor: grabbing; }

/* 2D fallback when WebGL is unavailable */
.tee3d-stage.tee3d-fallback { display: grid; place-items: center; padding: 14px; cursor: default; }
.tee3d-fallback-canvas { max-width: 100%; max-height: 82%; border-radius: 10px; border: 1px solid var(--line); }
.tee3d-fallback-note { color: var(--muted); font-family: var(--font-mono); font-size: .7rem; margin: 10px 0 0; text-align: center; }
.face-badge {
    position: absolute; top: 12px; left: 12px; pointer-events: none;
    font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    background: var(--chrome); color: var(--ink); padding: 4px 10px; border-radius: 6px;
}
.tee3d-spinhint {
    position: absolute; bottom: 12px; right: 12px; pointer-events: none;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--muted);
}

/* size selection — rounded, soft, clear selected state */
.size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.size-grid.print { display: grid; grid-template-columns: repeat(3, 1fr); }
.size-card {
    background: var(--stone-800); border: 1px solid var(--line-strong); border-radius: 12px;
    color: var(--bone); cursor: pointer; padding: 10px 14px; font-weight: 700; min-width: 50px; text-align: center;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.size-card:hover { border-color: var(--silver); transform: translateY(-1px); }

/* admin orders: light initial payload + centered on-demand preview */
.order-card { content-visibility: auto; contain-intrinsic-size: 300px; }
.order-color-dot {
    display: inline-block; width: 11px; height: 11px; border-radius: 3px;
    border: 1px solid var(--line-strong); vertical-align: -1px;
}
.order-files-label {
    color: var(--muted); font-size: .64rem; text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: .3rem;
}
.order-preview-trigger {
    display: grid; place-items: center; position: relative; width: min(100%, 320px);
    min-height: 210px; margin-inline: auto; padding: 12px; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: 14px;
    background: var(--stone-900); overflow: hidden;
    transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.order-preview-trigger:hover {
    border-color: var(--silver); background: var(--stone-800); transform: translateY(-2px);
}
.order-preview-trigger img {
    width: 100%; height: 185px; object-fit: contain; border-radius: 10px;
}
.order-preview-action {
    position: absolute; inset-inline: 12px; bottom: 10px; padding: 7px 10px;
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: rgba(10,10,11,.82); color: var(--chrome);
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em;
    backdrop-filter: blur(6px);
}
.order-preview-empty {
    display: grid; place-items: center; gap: 6px; width: min(100%, 320px); min-height: 210px;
    margin-inline: auto; border: 1px dashed var(--line-strong); border-radius: 14px;
    color: var(--muted);
}
.order-preview-empty i { font-size: 1.8rem; }
.order-preview-modal { background: var(--stone-950); border: 1px solid var(--line-strong); }
.order-preview-modal .modal-header { border-color: var(--line); }
.order-preview-stage-wrap {
    position: relative; width: min(100%, 720px); min-height: 560px; margin-inline: auto;
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    background: radial-gradient(60% 60% at 50% 44%, rgba(236,238,241,.07), transparent 72%), var(--stone-900);
}
.order-preview-3d-stage { width: 100%; height: 560px; cursor: grab; touch-action: none; }
.order-preview-3d-stage:active { cursor: grabbing; }
.order-preview-static {
    display: block; width: 100%; height: 560px; padding: 24px; object-fit: contain;
}
.order-preview-static[hidden], .order-preview-3d-stage[hidden] { display: none; }
.order-preview-spin {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    color: var(--muted); font-family: var(--font-mono); font-size: .68rem;
    white-space: nowrap; pointer-events: none;
}
.order-preview-spin[hidden], .order-preview-stage-wrap .face-badge[hidden] { display: none; }

@media (max-width: 767.98px) {
    .order-preview-stage-wrap { min-height: 410px; }
    .order-preview-3d-stage, .order-preview-static { height: 410px; }
    .order-preview-trigger { min-height: 190px; }
}
.size-card.active { border-color: var(--chrome); background: var(--chrome); color: var(--ink); }
.print-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; text-align: left; }
.print-card .ps-code { font-family: var(--font-display); font-size: 1rem; line-height: 1; }
.print-card .ps-dim { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); }
.print-card .ps-price { font-family: var(--font-mono); font-size: .72rem; color: var(--silver); }
.print-card.active .ps-dim, .print-card.active .ps-price { color: var(--ink); }

/* ---------- Order status pills ---------- */
.status-pill { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line-strong); }
.status-new { background: rgba(139,123,244,.16); color: var(--purple); border-color: rgba(139,123,244,.4); }
.status-inprogress { background: rgba(236,238,241,.1); color: var(--chrome); }
.status-completed { background: rgba(47,111,58,.18); color: #93d3a4; border-color: rgba(47,111,58,.5); }
.status-cancelled { background: rgba(178,58,58,.16); color: #e0a3a3; border-color: rgba(178,58,58,.45); }

/* ---------- Animations (small + restrained) ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes xpGrow { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 575.98px) {
    .auth-card { padding: 1.5rem; }
}
/* compact admin catalogue thumbnails */
.admin-product-thumb{width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--stone-800);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted-2)}
.admin-product-thumb img,.edit-product-image{width:100%;height:100%;object-fit:cover}
.edit-product-image{width:84px;height:84px;border-radius:10px;border:1px solid var(--line)}
/* Numbered step headers in the designer control column */
.step-head { display: flex; align-items: center; gap: 10px; }
.step-no {
    font-family: var(--font-mono); font-weight: 700; font-size: .7rem;
    color: var(--ink); background: var(--chrome); border-radius: 6px;
    padding: 3px 7px; letter-spacing: .08em;
}
.mode-toggle { background: var(--stone-800); border: 1px solid var(--line); border-radius: 11px; }

/* Segmented Front / Right / Back / Left / reset switcher under the stage */
.tee-view-controls {
    display: flex; justify-content: center; gap: 5px; flex-wrap: wrap;
    background: var(--stone-800); border: 1px solid var(--line);
    border-radius: 11px; padding: 5px; margin-top: 12px;
}
.tee-view-controls .btn {
    flex: 1 1 auto; min-width: 64px;
    border: none; background: transparent; color: var(--muted);
    font-weight: 700; font-size: .85rem; border-radius: 8px; padding: .42rem .6rem;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.tee-view-controls .btn:hover { color: var(--bone); background: rgba(236,238,241,.06); transform: none; }
.tee-view-controls .btn.active { background: var(--chrome); color: var(--ink); }
.tee-view-controls .btn:focus-visible { box-shadow: 0 0 0 3px rgba(236,238,241,.14); outline: none; }

@media (max-width: 575.98px) {
    .tee3d-stage { height: clamp(350px, 112vw, 480px); border-radius: 12px; }
    .tee3d-spinhint { bottom: 9px; right: 9px; font-size: .56rem; }
    .face-badge { top: 9px; left: 9px; }
    .tee-view-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tee-view-controls .btn { min-width: 0; padding-inline: .35rem; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; }
}
.recovery-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.recovery-code-grid code{color:var(--bone);font-size:.9rem}

/* ---------- Live announcement bar ---------- */
.sa-announce {
    background: var(--stone-800);
    border-bottom: 1px solid var(--line-strong);
    color: var(--bone);
    font-size: .88rem;
}
.sa-announce.promo { background: rgba(139,123,244,.14); border-bottom-color: rgba(139,123,244,.35); }
.sa-announce-inner { display: flex; align-items: center; gap: 12px; padding: .55rem 0; }
.sa-announce-text { flex: 1 1 auto; min-width: 0; }
.sa-announce-link {
    flex: 0 0 auto; font-family: var(--font-mono); font-size: .72rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--chrome);
    border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; white-space: nowrap;
}
.sa-announce-link:hover { color: #fff; border-bottom-color: var(--chrome); }
.sa-announce.promo .sa-announce-link { color: var(--purple); }
.sa-announce-close {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
    border: none; background: transparent; color: var(--muted);
    display: grid; place-items: center; cursor: pointer; font-size: .8rem;
    transition: background .15s ease, color .15s ease;
}
.sa-announce-close:hover { background: rgba(236,238,241,.08); color: var(--bone); }
@media (max-width: 575.98px) {
    .sa-announce { font-size: .8rem; }
    .sa-announce-link { display: none; }
}

/* ---------- Demo preview bar ----------
   Sits above the announcement bar. Chrome hairline stripe rather than a colour
   alert: it must read as a state of the site, not as an error. */
.sa-demo-bar {
    background: repeating-linear-gradient(
        135deg,
        var(--stone-850) 0 14px,
        var(--stone-800) 14px 28px
    );
    border-bottom: 1px solid var(--line-strong);
    color: var(--bone);
    font-size: .84rem;
}
.sa-demo-inner {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: .5rem 0; text-align: center;
}
.sa-demo-bar strong {
    font-family: var(--font-mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--chrome);
}
.sa-demo-bar .bi { color: var(--silver); flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .sa-demo-bar { font-size: .76rem; }
    .sa-demo-inner { padding: .45rem .75rem; }
}
.sa-demo-note {
    color: var(--muted); font-size: .85rem; max-width: 60ch;
    border-left: 2px solid var(--line-strong); padding-left: .75rem;
}

/* Prices during demo preview. Cosmetic obfuscation only — the figures stay in
   the markup because the tee total is computed from them client-side. Do not
   treat this as a way to keep a price secret. */
.sa-price-hidden {
    filter: blur(6px);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    /* Blur alone leaves a legible silhouette at large sizes; dropping contrast
       finishes the job without changing layout width. */
    opacity: .65;
}

/* ---------- Admin tables ---------- */
.sa-table { color: var(--bone); border-color: var(--line); }
.sa-table > :not(caption) > * > * { background: transparent; color: var(--bone); border-bottom-color: var(--line); padding: .7rem .75rem; }
.sa-table thead th {
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); font-weight: 400;
}
.sa-table tbody tr:hover > * { background: rgba(236,238,241,.03); }

/* ---------- Promotions + notifications ---------- */
.notification-bell { position: relative; }
.notification-count {
    position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px;
    padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
    background: var(--amber); color: var(--ink); border: 2px solid var(--ink);
    font-family: var(--font-mono); font-size: .58rem; font-weight: 800; line-height: 1;
}
.promotion-visualizer-grid { display: grid; gap: 12px; }
.promotion-visualizer {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 1.15rem 1.25rem; border-radius: 14px;
    border: 1px solid rgba(139,123,244,.36);
    background: linear-gradient(125deg, rgba(139,123,244,.16), rgba(236,238,241,.035));
    overflow: hidden; position: relative;
}
.promotion-visualizer::after {
    content: ""; position: absolute; width: 150px; height: 150px; right: -70px; top: -85px;
    border: 1px solid rgba(139,123,244,.26); border-radius: 50%; pointer-events: none;
}
.promotion-visualizer h2, .promotion-visualizer h3 {
    color: var(--bone); font-size: 1.05rem; margin: .4rem 0 .25rem;
}
.promotion-visualizer p { color: var(--muted); font-size: .86rem; margin: 0 0 .35rem; }
.promotion-validity { color: var(--muted); font-family: var(--font-mono); font-size: .66rem; }
.promotion-value {
    flex: 0 0 auto; color: var(--purple); font-family: var(--font-display);
    font-size: clamp(1.5rem,4vw,2.35rem); letter-spacing: -.03em; position: relative; z-index: 1;
}
.notification-list { display: grid; gap: 12px; }
.user-notification {
    display: flex; gap: 14px; padding: 1rem 1.1rem; border-radius: 14px;
    border: 1px solid var(--line); background: var(--stone-900);
}
.user-notification.unread { border-color: var(--line-strong); background: var(--stone-800); }
.user-notification.promotion { border-color: rgba(139,123,244,.34); }
.user-notification.important { border-color: rgba(230,179,74,.38); }
.notification-icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; color: var(--chrome); background: rgba(236,238,241,.06);
}
.user-notification.promotion .notification-icon { color: var(--purple); background: rgba(139,123,244,.12); }
.user-notification.important .notification-icon { color: var(--amber); background: rgba(230,179,74,.1); }
.user-notification.commentreply, .user-notification.commentlike { border-color: rgba(139,123,244,.26); }
.user-notification.commentreply .notification-icon,
.user-notification.commentlike .notification-icon { color: var(--purple); background: rgba(139,123,244,.12); }
.user-notification h2 { color: var(--bone); font-size: .98rem; margin: 0; }
.notification-time { color: var(--muted-2); font-family: var(--font-mono); font-size: .62rem; }
.notification-message { color: var(--muted); margin: .65rem 0 0; white-space: pre-line; }
.notification-promo-summary {
    display: inline-flex; align-items: center; gap: 10px; margin-top: .75rem;
    padding: .5rem .7rem; border: 1px solid rgba(139,123,244,.28); border-radius: 9px;
    color: var(--muted); font-size: .76rem;
}
.notification-promo-summary strong { color: var(--purple); font-family: var(--font-display); font-size: 1rem; }
.notification-audience-option { cursor: pointer; }
.notification-audience-option input { position: absolute; opacity: 0; pointer-events: none; }
.notification-audience-option span {
    display: block; padding: .65rem .85rem; border: 1px solid var(--line);
    border-radius: 9px; color: var(--muted); transition: .15s ease;
}
.notification-audience-option input:checked + span {
    border-color: rgba(139,123,244,.55); color: var(--bone); background: rgba(139,123,244,.12);
}
.notification-recipient-grid {
    display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 8px; max-height: 290px; overflow: auto; padding-right: 4px;
}
.notification-recipient {
    display: flex; align-items: center; gap: 10px; padding: .65rem .75rem;
    border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
.notification-recipient:has(input:checked) { border-color: var(--line-strong); background: rgba(236,238,241,.035); }
.notification-recipient input { accent-color: var(--purple); }
.notification-recipient span { min-width: 0; }
.notification-recipient strong, .notification-recipient small {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notification-recipient strong { color: var(--bone); font-size: .82rem; }
.notification-recipient small { color: var(--muted); font-size: .68rem; }

/* ---------- Product discussions ---------- */
.discussion-modal-content {
    overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px;
    background: var(--stone-900); box-shadow: 0 30px 90px rgba(0,0,0,.65);
}
.discussion-shell {
    display: grid; grid-template-columns: minmax(0,1.08fr) minmax(410px,.92fr);
    height: min(82vh,760px); min-height: 590px;
}
.discussion-product-preview {
    position: relative; min-width: 0; overflow: hidden; background: var(--stone-950);
    border-right: 1px solid var(--line);
}
.discussion-product-preview > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.discussion-product-placeholder {
    width: 100%; height: 100%; display: grid; place-items: center;
    color: var(--muted-2); font-size: 4rem;
    background: radial-gradient(circle at 50% 35%, var(--stone-700), var(--stone-950) 65%);
}
.discussion-product-preview::after {
    content: ""; position: absolute; inset: 48% 0 0;
    background: linear-gradient(transparent, rgba(7,7,8,.92));
    pointer-events: none;
}
.discussion-product-caption {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
    padding: 2.2rem 1.6rem 1.4rem;
}
.discussion-product-caption span {
    color: var(--silver); font-family: var(--font-mono); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .12em;
}
.discussion-product-caption h2 { margin: .35rem 0 0; font-size: clamp(1.3rem,3vw,2rem); }
.discussion-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--stone-850); }
.discussion-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
    padding: 1.15rem 1.2rem 1rem; border-bottom: 1px solid var(--line);
}
.discussion-header .eyebrow { font-size: .56rem; padding: 3px 7px; letter-spacing: .12em; }
.discussion-header h2 { margin: .55rem 0 .15rem; font-size: 1.25rem; }
.discussion-header p { margin: 0; color: var(--muted); font-size: .75rem; }
.discussion-close {
    width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--line); background: var(--stone-900);
    color: var(--muted); cursor: pointer; transition: .15s ease;
}
.discussion-close:hover { color: var(--bone); border-color: var(--silver); transform: rotate(5deg); }
.discussion-comments-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.2rem; }
.discussion-empty {
    min-height: 100%; display: grid; place-content: center; justify-items: center;
    padding: 2rem; text-align: center;
}
.discussion-empty > i { color: var(--purple); font-size: 2.5rem; }
.discussion-empty h3 { margin: .8rem 0 .25rem; font-size: 1rem; }
.discussion-empty p { margin: 0; color: var(--muted); font-size: .82rem; }
.discussion-list { display: grid; gap: 1rem; }
.comment-thread { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.comment-thread:last-child { padding-bottom: 0; border-bottom: 0; }
.comment-row { display: flex; align-items: flex-start; gap: 10px; }
.comment-avatar {
    width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
    border-radius: 50%; color: var(--ink); background: var(--chrome);
    font-family: var(--font-mono); font-weight: 800; font-size: .72rem;
}
.comment-content { min-width: 0; flex: 1 1 auto; }
.comment-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; }
.comment-heading strong { color: var(--bone); font-size: .78rem; }
.comment-heading time { color: var(--muted-2); font-family: var(--font-mono); font-size: .56rem; }
.comment-content > p {
    margin: .28rem 0 .35rem; color: var(--bone); font-size: .82rem;
    line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere;
}
.comment-actions { display: flex; align-items: center; gap: 12px; }
.comment-action {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 0;
    border: 0; background: transparent; color: var(--muted);
    font-size: .68rem; font-weight: 700; cursor: pointer; transition: color .15s ease;
}
.comment-action:hover, .comment-action.active { color: var(--purple); }
.comment-action.loading { opacity: .5; pointer-events: none; }
.comment-like-count {
    min-width: 16px; padding: 1px 5px; border-radius: 99px;
    color: var(--muted); background: rgba(236,238,241,.05);
    font-family: var(--font-mono); font-size: .58rem; text-align: center;
}
.comment-action.active .comment-like-count { color: var(--purple); background: rgba(139,123,244,.12); }
.comment-replies {
    display: grid; gap: .8rem; margin: .85rem 0 0 43px; padding-left: 12px;
    border-left: 1px solid rgba(139,123,244,.25);
}
.comment-row-reply .comment-avatar {
    width: 28px; height: 28px; flex-basis: 28px; font-size: .62rem;
    color: var(--bone); background: var(--stone-700);
}
.comment-reply-form, .discussion-composer form {
    display: flex; align-items: flex-end; gap: 8px;
}
.comment-reply-form {
    margin: .8rem 0 0 43px; padding: 8px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--stone-900);
}
.comment-reply-form textarea, .discussion-composer textarea {
    min-height: 38px; max-height: 120px; flex: 1 1 auto; resize: vertical;
    padding: 8px 10px; border: 0; outline: 0; background: transparent;
    color: var(--bone); font-family: var(--font-body); font-size: .8rem; line-height: 1.35;
}
.comment-reply-form textarea::placeholder, .discussion-composer textarea::placeholder { color: var(--muted-2); }
.comment-reply-form button, .discussion-composer form button {
    width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
    border: 0; border-radius: 9px; background: var(--chrome); color: var(--ink);
    cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.comment-reply-form button:hover, .discussion-composer form button:hover { background: #fff; transform: translateY(-1px); }
.comment-reply-form.loading, .discussion-composer form.loading { opacity: .65; }
.discussion-composer { flex: 0 0 auto; padding: .85rem 1.2rem 1rem; border-top: 1px solid var(--line); background: var(--stone-800); }
.discussion-composer form {
    padding: 5px 5px 5px 9px; border: 1px solid var(--line-strong);
    border-radius: 11px; background: var(--stone-900);
}
.discussion-composer > span {
    display: block; margin: 5px 4px 0; color: var(--muted-2);
    font-family: var(--font-mono); font-size: .54rem;
}
.discussion-signin { display: flex; align-items: center; gap: 10px; }
.discussion-signin > i { color: var(--purple); font-size: 1.25rem; }
.discussion-signin > div { min-width: 0; flex: 1 1 auto; }
.discussion-signin strong, .discussion-signin span { display: block; }
.discussion-signin strong { color: var(--bone); font-size: .76rem; }
.discussion-signin span { color: var(--muted); font-size: .65rem; }
.discussion-loading {
    min-height: 420px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; color: var(--muted); font-size: .82rem;
}
.discussion-loading .spinner-border { width: 2rem; height: 2rem; color: var(--purple); }
.discussion-load-error > i { color: #d98a8a; font-size: 2rem; }

@media (max-width: 991.98px) {
    .discussion-shell { grid-template-columns: minmax(0,.85fr) minmax(390px,1.15fr); }
}
@media (max-width: 767.98px) {
    .discussion-modal-content { border: 0; border-radius: 0; height: 100dvh; }
    .discussion-shell {
        grid-template-columns: 1fr; grid-template-rows: 210px minmax(0,1fr);
        height: 100dvh; min-height: 0;
    }
    .discussion-product-preview { border-right: 0; border-bottom: 1px solid var(--line); }
    .discussion-product-caption { padding: 2rem 1rem .8rem; }
    .discussion-product-caption h2 { font-size: 1.2rem; }
    .discussion-header { padding: .8rem 1rem; }
    .discussion-header .eyebrow { display: none; }
    .discussion-header h2 { margin: 0 0 .1rem; font-size: 1.05rem; }
    .discussion-comments-scroll { padding: .9rem 1rem; }
    .discussion-composer { padding: .7rem 1rem .8rem; }
}
@media (max-width: 575.98px) {
    .promotion-visualizer { align-items: flex-start; }
    .promotion-value { font-size: 1.4rem; }
    .user-notification { padding: .9rem; }
    .discussion-shell { grid-template-rows: 165px minmax(0,1fr); }
    .comment-replies, .comment-reply-form { margin-left: 24px; }
    .discussion-signin { align-items: flex-start; flex-wrap: wrap; }
    .discussion-signin .btn { width: 100%; }
}

/* ---------- Touch targets ----------
   A fingertip needs ~44px; a mouse pointer does not. These controls were 34–38px,
   so on a phone the wishlist heart, add-to-cart, comment button and the navbar
   hamburger were all easy to miss. Scoped to (pointer: coarse) so the desktop
   look is untouched — the visual size of the icons stays the same, only the
   hit area grows. */
@media (pointer: coarse) {
    .sa-nav .navbar-toggler { min-width: 44px; min-height: 44px; }

    .wish-btn, .add-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .product-comment-btn { min-height: 44px; }

    .cat-chip { padding-top: 12px; padding-bottom: 12px; }

    /* Footer links sat at 20px tall. Padding gives them a real hit area without
       moving them visually. */
    .sa-footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* A 16px checkbox is a miserable target — "Remember me" was almost unhittable. */
    .form-check-input {
        width: 1.35rem;
        height: 1.35rem;
        margin-top: .1rem;
    }
    .form-check-label { min-height: 44px; display: inline-flex; align-items: center; }

    /* Secondary text links ("Forgot password?") still need a thumb-sized row. */
    .auth-card a.small, a.small { min-height: 44px; display: inline-flex; align-items: center; }
}

/* =====================================================================
   Giveaways
   Purple is the gamification accent in this brand kit, so it carries the
   level chips and the entry CTA; everything else stays on the grayscale
   ramp. Card metrics mirror .product-card so store and giveaway read as
   one shop.
   ===================================================================== */

.ga-section-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 1rem;
}

/* ---- viewer standing strip ---- */
.ga-standing {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--stone-850);
}
.ga-standing-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ga-standing-note { color: var(--muted); font-size: .92rem; }

/* ---- level chip: dim at the bottom, solid purple at the top ---- */
.ga-level-chip {
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid rgba(139,123,244,.35);
    background: rgba(139,123,244,.12);
    color: var(--purple);
    white-space: nowrap;
}
.ga-level-chip.level-0 { border-color: var(--line-strong); background: transparent; color: var(--muted-2); }
.ga-level-chip.level-3 { border-color: rgba(139,123,244,.5);  background: rgba(139,123,244,.2); }
.ga-level-chip.level-4 { border-color: rgba(139,123,244,.65); background: rgba(139,123,244,.28); }
.ga-level-chip.level-5 { border-color: var(--purple); background: var(--purple); color: #fff; }

/* ---- cards ---- */
.ga-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.ga-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--stone-850);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
    animation: fadeUp .45s ease both;
}
.ga-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.ga-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--stone-800);
    display: grid; place-items: center;
    overflow: hidden;
}
.ga-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ga-card:hover .ga-card-media img { transform: scale(1.05); }
.ga-card-media .ph { color: var(--muted-2); font-size: 2.2rem; }
.ga-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.ga-card-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--bone); margin: 0; }
.ga-card-tagline { color: var(--muted); font-size: .88rem; margin: 0; }
.ga-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; }
.ga-worth { font-family: var(--font-display); color: var(--chrome); font-size: 1.05rem; }
.ga-req { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }

/* ---- status flag ---- */
.ga-flag {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: .66rem;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 6px;
    background: rgba(10,10,11,.82);
    border: 1px solid var(--line-strong);
    color: var(--bone);
}
.ga-flag.live { border-color: rgba(139,123,244,.55); color: #fff; }
.ga-flag.done { color: var(--muted-2); }
.ga-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--purple);
    animation: gaPulse 1.8s ease-in-out infinite;
}
@keyframes gaPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- countdown ---- */
.ga-countdown {
    font-family: var(--font-mono); font-size: .76rem;
    color: var(--muted); letter-spacing: .04em; margin-top: 4px;
}
.ga-countdown.urgent { color: var(--purple); }
.ga-timer {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--stone-850);
}
.ga-timer-label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.ga-timer-value { font-family: var(--font-display); font-size: 1.25rem; color: var(--bone); }
.ga-timer.urgent .ga-timer-value { color: var(--purple); }

/* ---- gallery ---- */
.ga-gallery-main {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden; background: var(--stone-800);
    display: grid; place-items: center;
}
.ga-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.ga-gallery-empty .ph { color: var(--muted-2); font-size: 3rem; }
.ga-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.ga-thumb {
    flex: 0 0 auto; width: 72px; height: 72px; padding: 0;
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
    background: var(--stone-800); cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
    opacity: .65;
}
.ga-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ga-thumb.active, .ga-thumb:hover { border-color: var(--silver); opacity: 1; }

/* ---- detail header ---- */
.ga-back { display: inline-flex; align-items: center; text-decoration: none; }
.ga-title { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--bone); line-height: 1.1; }
.ga-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ga-fact { display: flex; flex-direction: column; gap: 2px; }
.ga-fact-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.ga-fact-value { font-family: var(--font-display); font-size: 1.1rem; color: var(--bone); }

/* ---- entry panel ---- */
.ga-entry {
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(139,123,244,.07), transparent 60%), var(--stone-850);
}
.ga-entry-head {
    display: block;
    font-family: var(--font-mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--bone); margin-bottom: 8px;
}
.ga-entry-head.entered { color: var(--purple); }
.ga-entry-note { color: var(--muted); font-size: .88rem; margin: 8px 0 0; }
.ga-odds { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ga-odds-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ga-odds-row span { color: var(--muted); font-size: .88rem; }
.ga-odds-row strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--chrome); }

.ga-progress { height: 8px; border-radius: 999px; background: var(--stone-700); overflow: hidden; margin-top: 12px; }
.ga-progress > span { display: block; height: 100%; background: var(--purple); border-radius: 999px; }

.ga-winner-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ga-winner-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ga-winner-name { font-family: var(--font-display); color: var(--bone); }

.ga-description p { color: var(--muted); margin-bottom: .6rem; }

/* ---- level ladder ---- */
.ga-ladder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ga-rung {
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    padding: 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--stone-850);
}
.ga-rung.mine { border-color: var(--purple); background: linear-gradient(180deg, rgba(139,123,244,.12), transparent 70%), var(--stone-850); }
.ga-rung.below { opacity: .5; }
.ga-rung-spend { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
.ga-rung-odds { font-family: var(--font-display); font-size: 1.4rem; color: var(--chrome); }
.ga-rung-you { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); }

/* ---- empty state ---- */
.ga-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 3rem 1rem; text-align: center;
    border: 1px dashed var(--line-strong); border-radius: 14px;
    background: var(--stone-850);
}
.ga-empty img { opacity: .45; filter: grayscale(1); }
.ga-empty-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--bone); }
.ga-empty-sub { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

@media (max-width: 575.98px) {
    .ga-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .ga-facts { gap: 10px 18px; }
    .ga-entry { padding: 15px; }
    .ga-ladder-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (pointer: coarse) {
    .ga-thumb { width: 64px; height: 64px; }
}