/* GlorySmile — foundation: tokens, base, shared components.
   Page-specific styles live in assets/css/pages/<page>.css. */

/* fonts.css is linked separately in each page head (parallel download, no @import chain). */

/* ---------- Tokens ---------- */
:root {
  /* colour: "V34 Night", the whole site is drenched in the brand's deep violet. No white surfaces anywhere. */
  --base: #160B3E;        /* page base: deep royal violet */
  --base-2: #1C0E50;      /* alternate band */
  --surface: #241264;     /* raised surfaces: drawer, cards, inputs */
  --surface-2: #301A80;   /* hover / pressed surfaces */
  --text: #F5F1FF;        /* text: lilac-tinted pearl */
  --text-2: #C3B6F0;      /* secondary text: 9:1 on bg, 7:1 on surface */
  --hair: #3A2880;        /* hairlines, quiet fills */
  --line: #8E7CD6;        /* form control borders: >= 3:1 on bg and surface (WCAG 1.4.11) */
  --ultra: #6C3BFF;       /* the accent: V34 corrector violet. on-accent text 5:1 */
  --ultra-deep: #5424F0;  /* hover / pressed */
  --violet-hi: #A98BFF;   /* violet as text, icons and focus on dark: 6.7:1 on bg */
  --lilac: #DCCFFF;       /* hover on light buttons */
  --on-accent: #FBF9FF;   /* text on ultra */
  --night: #0A0620;       /* LED dark room: deeper than the page */
  --glow: #3D8BFF;        /* LED blue, only inside the dark room */
  --halo: conic-gradient(from 210deg, #FF9BE0, #9FC2FF, #A6FFE6, #FFE6A6, #C7A8FF, #FF9BE0);
  /* legacy names (page CSS): on the violet base they invert meaning, so light = text and dark = surface */
  --enamel: var(--base);
  --pearl: var(--surface);
  --ink: var(--text);
  --ink-2: var(--text-2);
  --mist: var(--hair);

  /* type */
  --f-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --f-text: 'Onest', 'Segoe UI', system-ui, sans-serif;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.3125rem;
  --t-xl: clamp(1.625rem, 2.4vw + 0.8rem, 2.5rem);
  --t-2xl: clamp(2.25rem, 5vw + 0.5rem, 5rem);
  --t-3xl: clamp(3rem, 9vw, 9.5rem);
  --t-mega: clamp(4.5rem, 21.5vw, 24rem);

  /* space + shape */
  --gutter: clamp(1.125rem, 4vw, 3.5rem);
  --section: clamp(5rem, 12vw, 11rem);
  --max: 1520px;
  --bar-h: 34px;          /* announcement bar on top of the header */
  --nav-h: 76px;          /* the logo / nav / cart row */
  --header-h: 110px;      /* bar + nav at the top of the page: layout offsets (main padding, hero); plain px */
  --nav-compact: 60px;    /* the header once the page scrolls: the bar folds away, the nav row shrinks */
  --sticky-top: var(--header-h);   /* what sticky things pin under; follows the header (html.is-scrolled) */
  --r-pill: 999px;
  --r-soft: 28px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Native UI (scrollbars, selects, date pickers, autofill menus) renders dark to match the violet base */
:root { color-scheme: dark; scrollbar-color: var(--hair) var(--night); accent-color: var(--ultra); }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sticky-top) + 16px); }
html.is-scrolled { --sticky-top: var(--nav-compact); }
body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--enamel);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* Safari < 16 */
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
p { text-wrap: pretty; max-width: 62ch; }
::selection { background: var(--ultra); color: var(--on-accent); }

:focus-visible { outline: 3px solid var(--violet-hi); outline-offset: 3px; border-radius: 6px; }
.on-night :focus-visible, .on-ink :focus-visible { outline-color: var(--text); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: -100px; z-index: 200;
  background: var(--ultra); color: var(--on-accent); padding: 0.85rem 1.25rem; border-radius: var(--r-pill);
  text-decoration: none; font-weight: 600; box-shadow: 0 0 24px rgba(108, 59, 255, 0.8);
}
.skip:focus-visible { outline-color: var(--text); }
.skip:focus { top: 1rem; }

/* Type helpers */
.display { font-family: var(--f-display); font-weight: 300; letter-spacing: -0.04em; line-height: 0.92; }
.h-mega { font-size: var(--t-mega); }
.h-3xl { font-size: var(--t-3xl); }
.h-2xl { font-size: var(--t-2xl); }
.h-xl { font-size: var(--t-xl); }
.lead { font-size: var(--t-l); line-height: 1.4; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.price { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Price offer: the kit's actual separate-price comparison. The struck price and the pill never drop below 13px. */
.offer { display: inline-grid; gap: 0.35rem; min-width: 0; max-width: 100%; vertical-align: middle; white-space: normal; }
.offer__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.55em; }
.offer__before { font-size: max(0.8125rem, 0.65em); line-height: 1.25; color: var(--text-2); text-decoration-color: var(--violet-hi); }
.kitprice .offer__before { font-size: var(--t-m); white-space: normal; }
.offer__now { font-size: 1em; line-height: 1.15; color: var(--text); }
.offer__discount { padding: 0.25em 0.6em; border-radius: var(--r-pill); background: var(--lilac); color: var(--base); font-family: var(--f-text); font-size: 0.8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: 0; }
.offer__label { color: var(--text-2); font-family: var(--f-text); font-size: 0.8125rem; font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.line__price .offer { justify-items: end; text-align: right; font-size: var(--t-m); }
.line__price .offer__prices, .buybar__price .offer__prices { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0.25rem 0.35rem; }
.line__price .offer__now, .buybar__price .offer__now { grid-column: 1; grid-row: 1; }
.line__price .offer__discount, .buybar__price .offer__discount { grid-column: 2; grid-row: 1; }
.line__price .offer__before, .buybar__price .offer__before { grid-column: 1 / -1; grid-row: 2; }
.line__price .offer__before { justify-self: end; white-space: normal; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ultra); --fg: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 56px; padding: 0.9rem 1.9rem;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-text); font-size: var(--t-m); font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { --bg: var(--ultra-deep); }
.btn:active { transform: scale(0.97); }
.btn--ink { --bg: var(--text); --fg: var(--base); }
.btn--ink:hover { --bg: var(--lilac); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: currentColor; }
.btn--ghost:hover { --bg: var(--text); --fg: var(--base); border-color: var(--text); }
.btn--light { --bg: var(--text); --fg: var(--base); }
.btn--light:hover { --bg: var(--lilac); }
.on-night .btn--ghost { --fg: var(--text); }
.on-night .btn--ghost:hover { --bg: var(--text); --fg: var(--night); border-color: var(--text); }
.btn--block { width: 100%; }
.btn--sm { min-height: 46px; padding: 0.65rem 1.25rem; font-size: var(--t-s); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }
.btn.is-added { --bg: var(--text); --fg: var(--base); }

/* Round icon button (+, ×, arrows) */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--pearl); color: var(--ink); border: 1.5px solid var(--mist);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.icon-btn:hover { background: var(--text); color: var(--base); border-color: var(--text); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn--ultra { background: var(--ultra); color: var(--on-accent); border-color: var(--ultra); }
.icon-btn--ultra:hover { background: var(--ultra-deep); border-color: var(--ultra-deep); }

/* ---------- Halo (signature ring) ---------- */
.halo {
  --size: 60vmin; --ring: 2px;
  width: var(--size); aspect-ratio: 1; border-radius: 50%;
  background: var(--halo);
  /* the ring never goes below 2px: thinner pastel lines disappear on enamel */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - max(2px, var(--ring))), #000 calc(100% - max(2px, var(--ring)) + 0.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - max(2px, var(--ring))), #000 calc(100% - max(2px, var(--ring)) + 0.5px));
  /* saturate lifts the pastel ring off the enamel; the glow makes it read as light, on every page */
  filter: saturate(2.4) drop-shadow(0 0 18px rgba(170, 190, 255, 0.75));
  pointer-events: none;
}
.halo-dot { display: inline-block; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--halo); vertical-align: middle; }

/* Image frames: arches and circles echo plinths and the halo */
.frame { position: relative; overflow: hidden; background: var(--pearl); }
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame--arch { border-radius: var(--r-pill) var(--r-pill) var(--r-soft) var(--r-soft); }
.frame--circle { border-radius: 50%; aspect-ratio: 1; }
.frame--soft { border-radius: var(--r-soft); }
/* Packshots are shot on a deep violet studio sweep: they sit in the frame as they are, no blend, no lift. */
.shot { background: var(--shot-bg, var(--surface)); }
.shot > img { object-fit: cover; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--text);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease);
}
/* Over a hero photo: a soft night veil behind the bar keeps the nav readable on the brightest part of the halo */
body[data-header^='overlay'] .site-header::before {
  content: ''; position: absolute; inset: 0 0 -56px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 6, 32, 0.62), rgba(10, 6, 32, 0.28) 55%, rgba(10, 6, 32, 0));
  transition: opacity 0.35s var(--ease);
}
body[data-header^='overlay'] .site-header.is-solid::before { opacity: 0; }
/* where the hero's halo highlight runs right behind a word, a tight night shadow keeps the letters at AA */
body[data-header^='overlay'] .site-header:not(.is-solid) :is(.nav a, .cart-btn__label) {
  text-shadow: 0 0 2px rgba(10, 6, 32, 0.7), 0 0 8px rgba(10, 6, 32, 0.85), 0 0 18px rgba(10, 6, 32, 0.7);
}
body[data-header^='overlay'] .site-header:not(.is-solid) .cart-btn:hover .cart-btn__label { text-shadow: none; }
.site-header__in { height: var(--nav-h); transition: height 0.35s var(--ease); display: flex; align-items: center; gap: clamp(0.75rem, 3vw, 2.5rem); }
.site-header.is-solid, body:not([data-header^='overlay']) .site-header {
  background: rgba(19, 9, 54, 0.9);   /* no color-mix(): Safari < 16.2 */
  background: color-mix(in srgb, var(--base) 90%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(169, 139, 255, 0.16), 0 18px 40px -28px rgba(5, 2, 18, 0.9);
}
body[data-header='overlay-night'] .site-header:not(.is-solid) { color: var(--text); }
body:not([data-header^='overlay']) main { padding-top: var(--header-h); }

.brand {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  text-decoration: none; transition: opacity 0.25s var(--ease);
}
.brand:hover { opacity: 0.8; }
/* The supplier's serif wordmark: a touch more stroke so its hairlines hold on the dark bar */
.brand svg { display: block; height: 33px; width: auto; }
.brand svg path:first-child { stroke-width: 26; }

.nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.5rem); }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 500; letter-spacing: 0.005em; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 2px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
/* the current page is lit: violet light under its name */
.nav a[aria-current='page']::after { background: var(--violet-hi); box-shadow: 0 0 12px 1px rgba(169, 139, 255, 0.85); }

/* Header pills: a quiet outline, the light fill on hover */
.cart-btn, .menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 48px;
  border-radius: var(--r-pill); border: 1.5px solid rgba(245, 241, 255, 0.42); font-weight: 600;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.cart-btn { padding: 0.35rem 0.4rem 0.35rem 1.25rem; }
.cart-btn:hover, .menu-btn:hover { background: var(--text); color: var(--base); border-color: var(--text); }
.cart-btn:active, .menu-btn:active { transform: scale(0.96); }
.cart-btn__count {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 0.45rem; border-radius: var(--r-pill);
  background: var(--ultra); color: var(--on-accent); font-size: var(--t-s); font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 16px rgba(108, 59, 255, 0.85);
}
.cart-btn__count.is-zero { background: var(--hair); color: var(--text); box-shadow: none; }
.cart-btn svg { display: none; width: 22px; height: 22px; }
.cart-btn__count.is-bump { animation: bump 0.5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

/* Menu: two bars that turn into a cross inside the open menu */
.menu-btn { display: none; width: 48px; padding: 0; }
.menu-btn__bars { position: relative; width: 18px; height: 10px; border-block: 2px solid currentColor; }

@media (max-width: 820px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  /* Phones: a bag with the count as a badge on its shoulder */
  .cart-btn__label { display: none; }
  .cart-btn { position: relative; width: 48px; padding: 0; }
  .cart-btn svg { display: block; }
  .cart-btn__count {
    position: absolute; top: -5px; right: -7px;
    min-width: 22px; height: 22px; padding: 0 0.3rem; font-size: 0.8125rem;
  }
  .cart-btn__count.is-zero { display: none; }
  .brand svg { height: 27px; }
}
/* Announcement bar: the shop's standing offers on top of the header. Phones: the first one only.
   Once the page scrolls (app.js: .is-compact) it folds away and the nav row shrinks to --nav-compact. */
.annbar {
  height: var(--bar-h); display: flex; align-items: center; overflow: hidden;
  transition: height 0.35s var(--ease), opacity 0.25s var(--ease), border-color 0.35s var(--ease);
  background: var(--night); color: var(--text-2); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(169, 139, 255, 0.16);
}
.annbar__in { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); max-width: none; white-space: nowrap; }
.annbar__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.annbar__item:first-child { color: var(--text); }
.annbar svg { width: 16px; height: 16px; flex: none; color: var(--violet-hi); }
.site-header.is-compact .annbar { height: 0; opacity: 0; border-bottom-color: transparent; }
.site-header.is-compact .site-header__in { height: var(--nav-compact); }
.brand svg { transition: height 0.35s var(--ease); }
.site-header.is-compact .brand svg { height: 27px; }
@media (max-width: 820px) {
  .site-header.is-compact .brand svg { height: 24px; }
  :root { --bar-h: 32px; --header-h: 108px; }
  .annbar__item + .annbar__item { display: none; }
}

/* 320px (400% zoom) */
@media (max-width: 360px) {
  .site-header__in { gap: 0.5rem; }
  .brand svg { height: 23px; }
}

/* Full-screen mobile menu: the night room, an ultraviolet light in the corner and one rising behind the five */
.menu {
  position: fixed; inset: 0; z-index: 90; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(110% 55% at 100% 0%, rgba(108, 59, 255, 0.5), rgba(108, 59, 255, 0) 70%),
    radial-gradient(85% 38% at 50% 100%, rgba(108, 59, 255, 0.42), rgba(108, 59, 255, 0) 72%),
    var(--night);
  color: var(--text);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
/* The top bar mirrors the header: same logo spot, same bag, the bars become a cross */
.menu__top { flex: none; display: flex; align-items: center; gap: clamp(0.75rem, 3vw, 2.5rem); height: var(--nav-h); }
.menu__close { background: transparent; color: var(--text); border-color: rgba(245, 241, 255, 0.42); }
.menu__links { display: grid; justify-items: start; margin-top: clamp(1.25rem, 5vh, 3rem); }
.menu__links a {
  display: inline-flex; align-items: center; gap: 0.18em; min-height: 44px;
  font-family: var(--f-display); font-weight: 300; font-size: clamp(2.625rem, 13vw, 4.5rem); letter-spacing: -0.045em; line-height: 1.12;
  text-decoration: none; transition: color 0.25s var(--ease);
}
.menu__links a:hover, .menu__links a:active { color: var(--lilac); }
.menu__links a[aria-current='page'] { color: var(--violet-hi); }
.menu__links a[aria-current='page']::after {
  content: ''; width: 0.16em; height: 0.16em; margin-left: 0.12em; border-radius: 50%;
  background: var(--violet-hi); box-shadow: 0 0 14px 2px rgba(169, 139, 255, 0.9);
}
.menu__shop { position: relative; margin-top: auto; padding-top: 2.5rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
/* The halo crests over the five like the ring over the hero plinths: a flat arc, edge to edge, that clears every
   thumbnail and label. The box is only the visible cap (radius 110vw, so the ends dip 12vw), so nothing scrolls. */
.menu__shop::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; translate: -50% 0; width: 100vw; height: calc(12.2vw + 34px);
  top: calc(2.5rem - 12vw - 0.85rem - 16px);   /* 16px of room above the crest for the bloom */
  background: var(--halo);
  /* a 2px line inside a soft bloom of its own colour (a drop-shadow would be cut away by the mask) */
  -webkit-mask: radial-gradient(circle 110vw at 50% calc(110vw + 16px), transparent calc(110vw - 16px), rgba(0, 0, 0, 0.2) calc(110vw - 6px), #000 calc(110vw - 2px), #000 110vw, rgba(0, 0, 0, 0.2) calc(110vw + 5px), transparent calc(110vw + 14px));
          mask: radial-gradient(circle 110vw at 50% calc(110vw + 16px), transparent calc(110vw - 16px), rgba(0, 0, 0, 0.2) calc(110vw - 6px), #000 calc(110vw - 2px), #000 110vw, rgba(0, 0, 0, 0.2) calc(110vw + 5px), transparent calc(110vw + 14px));
  filter: saturate(1.5);   /* pearl iridescence, not a rainbow */
  opacity: 0.9;
}
.menu__shop a { display: grid; justify-items: center; gap: 0.5rem; text-decoration: none; font-size: var(--t-xs); font-weight: 500; color: var(--text-2); text-align: center; }
.menu__shop .frame {
  width: 100%; aspect-ratio: 1;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3), 0 10px 28px -10px rgba(108, 59, 255, 0.9);
  transition: box-shadow 0.3s var(--ease);
}
.menu__shop a:hover { color: var(--text); }
.menu__shop a:hover .frame { box-shadow: 0 0 0 1.5px var(--violet-hi), 0 10px 32px -8px rgba(108, 59, 255, 1); }
.menu__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem;
  margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid rgba(169, 139, 255, 0.18);
  font-size: var(--t-s); color: var(--text-2);
}
.menu__base a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
/* Opening: the words arrive one after another (drawer-class feedback; reduced motion makes it instant) */
.menu:not([hidden]) .menu__links a, .menu:not([hidden]) .menu__shop a { animation: menu-in 0.6s var(--ease) both; }
.menu:not([hidden]) .menu__links a:nth-child(2) { animation-delay: 0.04s; }
.menu:not([hidden]) .menu__links a:nth-child(3) { animation-delay: 0.08s; }
.menu:not([hidden]) .menu__links a:nth-child(4) { animation-delay: 0.12s; }
.menu:not([hidden]) .menu__shop a { animation-delay: 0.16s; }
.menu:not([hidden]) .menu__shop::before { animation: halo-on 1.1s var(--ease) 0.2s both; }   /* the light comes on over the five */
@keyframes halo-on { from { opacity: 0; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Product tile (shop grids, related) ---------- */
.tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }   /* never wider than its grid cell */
.tile__media {
  aspect-ratio: 1; border-radius: var(--r-soft); isolation: isolate;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.14);
  transition: box-shadow 0.6s var(--ease);
}
.tile__media img { transition: transform 0.8s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile:hover .tile__media { box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.34), 0 36px 70px -36px rgba(108, 59, 255, 0.95); }
.tile__row { display: flex; align-items: flex-start; gap: 1rem; }   /* "+" on the name line, even when names wrap */
.tile__name { font-family: var(--f-text); font-weight: 600; font-size: var(--t-l); line-height: 1.2; letter-spacing: -0.01em; }
.tile__name a { text-decoration: none; }
.tile__name a::after { content: ''; position: absolute; inset: 0; } /* whole tile clickable */
.tile__meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; min-width: 0; margin-right: auto; }   /* a long word wraps instead of sliding under the "+" */
.tile__price { font-size: var(--t-m); color: var(--text-2); }
/* "+" is the shop action: the accent, lit */
.tile .icon-btn {
  position: relative; z-index: 1;
  background: var(--ultra); color: var(--on-accent); border-color: var(--ultra);
  box-shadow: 0 10px 26px -10px rgba(108, 59, 255, 0.95);
}
.tile .icon-btn:hover { background: var(--text); color: var(--base); border-color: var(--text); }

/* Dark tile (LED, item.dark): the night packshot (item.imgDark) in its own dark room, but the same
   tile rhythm as the others (no card around the name, names and prices on one line across the grid) */
.tile--night .tile__media { background: var(--night); box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.24); }
.tile--night .tile__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(closest-side, rgba(61, 139, 255, 0.14), transparent 70%);
}
.tile--night:hover .tile__media { box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.5), 0 36px 70px -36px rgba(61, 139, 255, 0.8); }

/* Quantity stepper: an inset pill */
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(169, 139, 255, 0.38); border-radius: var(--r-pill);
  background: rgba(10, 6, 32, 0.4);
}
.qty button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text); transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.qty button:hover { background: var(--surface-2); }
.qty button:active { transform: scale(0.88); }
.qty button:focus-visible { outline-offset: -1px; border-radius: 50%; }
.qty button[aria-disabled='true'] { opacity: 0.35; cursor: default; }
.qty button[aria-disabled='true']:hover { background: none; }
.qty output { min-width: 2.25ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.qty svg { width: 16px; height: 16px; }

/* ---------- Cart drawer ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 95; background: rgba(6, 3, 20, 0.68);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(480px, 100vw);
  display: flex; flex-direction: column; color: var(--text);
  background:
    radial-gradient(90% 38% at 100% 0%, rgba(108, 59, 255, 0.38), rgba(108, 59, 255, 0) 72%),
    var(--base-2);
  border-left: 1px solid rgba(169, 139, 255, 0.2);
  box-shadow: -40px 0 110px rgba(5, 2, 18, 0.7);
  transform: translateX(102%); transition: transform 0.55s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer-backdrop.is-open { opacity: 1; }
.drawer[hidden], .drawer-backdrop[hidden] { display: none; }
.drawer__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--nav-h); padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(169, 139, 255, 0.16);
}
.drawer__title { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); letter-spacing: -0.035em; }
.drawer__count {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 0.45rem; border-radius: var(--r-pill);
  background: var(--ultra); color: var(--on-accent); box-shadow: 0 0 16px rgba(108, 59, 255, 0.85);
  font-family: var(--f-text); font-size: var(--t-s); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.drawer__count.is-zero { display: none; }
.drawer .icon-btn { background: transparent; border-color: rgba(245, 241, 255, 0.3); }
.drawer .icon-btn:hover { background: var(--text); color: var(--base); border-color: var(--text); }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.5rem; }
.drawer__foot {
  flex: none; display: grid; gap: 0.8rem;
  padding: 1.25rem 1.5rem max(1.25rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(169, 139, 255, 0.16); background: rgba(10, 6, 32, 0.45);
}
.drawer__line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.drawer__line .muted { color: var(--text-2); }
.drawer__total { padding-top: 0.8rem; border-top: 1px solid rgba(169, 139, 255, 0.16); font-size: var(--t-l); font-weight: 600; }
.drawer__total .price { font-size: var(--t-xl); line-height: 1; }
.drawer .btn { box-shadow: 0 16px 40px -14px rgba(108, 59, 255, 0.95); }
.drawer__note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; max-width: none; font-size: var(--t-s); color: var(--text-2); }
.drawer__note svg { width: 20px; height: 20px; flex: none; color: var(--violet-hi); }
.free-ship { font-weight: 600; color: var(--violet-hi); }

/* "Добави и": up to three small rows under the cart lines */
.xsell { margin-top: 0.5rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid rgba(169, 139, 255, 0.16); }
.xsell__title { font-family: var(--f-display); font-weight: 300; font-size: var(--t-l); letter-spacing: -0.03em; margin-bottom: 0.85rem; }
.xsell__list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.xsell__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  padding: 0.6rem 0.6rem 0.6rem 0.6rem; border-radius: 20px; background: rgba(36, 18, 100, 0.55);
  box-shadow: inset 0 0 0 1px rgba(169, 139, 255, 0.16);
}
.xsell__img { width: 56px; aspect-ratio: 1; }
.xsell__meta { display: grid; gap: 0.15rem; min-width: 0; }
.xsell__name { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xsell__name:hover { color: var(--lilac); }
.xsell__price { font-size: var(--t-s); color: var(--text-2); }
.xsell__add {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem 0 0.8rem; border-radius: var(--r-pill);
  border: 1.5px solid rgba(245, 241, 255, 0.42); font-weight: 600; font-size: var(--t-s);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.xsell__add:hover { background: var(--text); color: var(--base); border-color: var(--text); }
.xsell__add:active { transform: scale(0.96); }
.xsell__add svg { width: 16px; height: 16px; }

/* Payment badges (GS.payBadges): pill chips, card marks as small white cards */
.paybadges { display: grid; gap: 0.75rem; }
.paybadges__title { font-weight: 600; font-size: var(--t-s); color: var(--text); }
.paybadges__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem; }
.paybadges--full .paybadges__list { justify-content: flex-start; }
.paybadge {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 32px; padding: 0 0.75rem 0 0.6rem; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; color: var(--text-2); line-height: 1;
  background: rgba(169, 139, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(169, 139, 255, 0.24);
}
.paybadge svg { width: 16px; height: 16px; flex: none; color: var(--violet-hi); }
.paybadge--card { padding: 0; background: none; box-shadow: none; }
.paybadge--card svg { width: 48px; height: 32px; color: inherit; border-radius: 6px; box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3); }   /* "Безплатна" in the text face, not a price */

/* Empty: the halo as a lit empty ring around the bag, then the way to the shop and the five */
.drawer__empty { min-height: 100%; display: grid; align-content: center; justify-items: center; gap: 1.5rem; padding: 2.5rem 0; text-align: center; }
.drawer__halo { position: relative; display: grid; place-items: center; width: 168px; aspect-ratio: 1; }
.drawer__halo::before {
  content: ''; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.55), rgba(108, 59, 255, 0));
}
/* the same lit halo as in the menu and the footer: a line in a soft bloom of its own colour (12px of room for the outer bloom) */
.drawer__halo .halo {
  --size: calc(100% + 24px); position: absolute; left: -12px; top: -12px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 32px), rgba(0, 0, 0, 0.22) calc(100% - 21px), #000 calc(100% - 15px), #000 calc(100% - 12px), rgba(0, 0, 0, 0.22) calc(100% - 7px), transparent 100%);
          mask: radial-gradient(farthest-side, transparent calc(100% - 32px), rgba(0, 0, 0, 0.22) calc(100% - 21px), #000 calc(100% - 15px), #000 calc(100% - 12px), rgba(0, 0, 0, 0.22) calc(100% - 7px), transparent 100%);
  filter: saturate(1.5);
}
.drawer__halo svg { position: relative; width: 44px; height: 44px; color: var(--text); }
/* one line in the 480px drawer and on a 360px phone */
.drawer__empty-title { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); letter-spacing: -0.035em; line-height: 1.1; }
.drawer__picks { list-style: none; padding: 1.75rem 0 0; margin-top: 0.5rem; width: 100%; border-top: 1px solid rgba(169, 139, 255, 0.16); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.drawer__picks a { display: grid; justify-items: center; gap: 0.45rem; text-decoration: none; font-size: var(--t-xs); font-weight: 500; color: var(--text-2); }
.drawer__picks .frame { width: 100%; max-width: 72px; aspect-ratio: 1; box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3); transition: box-shadow 0.3s var(--ease); }
.drawer__picks a:hover { color: var(--text); }
.drawer__picks a:hover .frame { box-shadow: 0 0 0 1.5px var(--violet-hi), 0 8px 26px -8px rgba(108, 59, 255, 1); }

/* Cart line (drawer + checkout): thumb spans two rows; name + price on top, stepper + remove below.
   minmax(0, 1fr) lets the name column shrink, so the price never leaves a 360px drawer. */
.line {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas: 'img name price' 'img act act';
  column-gap: 1rem; row-gap: 0.45rem; align-items: center;
  padding: 1.25rem 0; border-bottom: 1px solid rgba(169, 139, 255, 0.14);
}
.line > div { display: contents; }
.line__img { grid-area: img; width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3), 0 10px 26px -10px rgba(108, 59, 255, 0.9); }
/* name and price share the first baseline: a two-line name keeps its price on the first line */
.line__name { grid-area: name; align-self: baseline; font-weight: 600; line-height: 1.25; }
.line__name a { text-decoration: none; transition: color 0.2s var(--ease); }
.line__name a:hover { color: var(--lilac); }
.line__actions { grid-area: act; display: flex; align-items: center; gap: 0.75rem; }
.line__remove {
  min-height: 44px; padding-inline: 0.25rem; font-size: var(--t-s); color: var(--text-2);
  text-decoration: underline; text-decoration-color: rgba(195, 182, 240, 0.45); text-underline-offset: 0.25em;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.line__remove:hover { color: var(--text); text-decoration-color: currentColor; }
.line__price { grid-area: price; align-self: baseline; line-height: 1.25; }

/* Free-shipping meter: a light that fills as the cart grows */
.meter { display: grid; gap: 0.6rem; font-size: var(--t-s); color: var(--text-2); padding-bottom: 0.2rem; }
.meter strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.meter.is-free { color: var(--violet-hi); font-weight: 600; }
.meter__track { height: 6px; border-radius: var(--r-pill); background: rgba(169, 139, 255, 0.16); overflow: hidden; }
.meter__fill { height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #9FC2FF, #C7A8FF, var(--ultra)); box-shadow: 0 0 14px rgba(169, 139, 255, 0.75); transition: width 0.6s var(--ease); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 0.45rem; }
.field label, .field legend { font-weight: 600; font-size: var(--t-s); }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: 0.9rem 1.1rem; border-radius: 16px;
  border: 1.5px solid var(--line); background: var(--base-2); color: var(--text); font-size: var(--t-m);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--violet-hi); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--violet-hi); background-color: var(--surface); box-shadow: 0 0 0 4px rgba(169, 139, 255, 0.28); }
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--text-2); opacity: 0.7; }
.field input:disabled, .field select:disabled, .field textarea:disabled, .input:disabled { opacity: 0.5; cursor: not-allowed; }
/* Selects: our own chevron, the native list renders dark (color-scheme) */
.field select, select.input {
  -webkit-appearance: none; appearance: none; padding-right: 3rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A98BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 18px;
}
.field select option { background: var(--surface); color: var(--text); }
/* Chrome / Safari autofill paints inputs pale: keep them on the violet field */
.field input:-webkit-autofill, .field textarea:-webkit-autofill, .field select:-webkit-autofill, .input:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--base-2) inset; box-shadow: 0 0 0 100px var(--base-2) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.field input:-webkit-autofill:focus, .field textarea:-webkit-autofill:focus, .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset, 0 0 0 4px rgba(169, 139, 255, 0.28);
          box-shadow: 0 0 0 100px var(--surface) inset, 0 0 0 4px rgba(169, 139, 255, 0.28);
}
.field [aria-invalid='true'] { border-color: #FF5C85; }
.field [aria-invalid='true']:focus { box-shadow: 0 0 0 4px rgba(255, 92, 133, 0.25); }
.field__error { color: #FF8FAA; font-size: var(--t-s); font-weight: 500; }
.field__hint { color: var(--text-2); font-size: var(--t-s); }

/* Choice cards (radio as big pills) */
.choice {
  position: relative; display: flex; align-items: center; gap: 0.9rem; min-height: 64px; padding: 0.9rem 1.2rem;
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--base-2); cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.choice:hover { border-color: var(--violet-hi); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text-2); flex: none; display: grid; place-items: center; }
.choice__dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--violet-hi); box-shadow: 0 0 10px rgba(169, 139, 255, 0.9); transform: scale(0); transition: transform 0.2s var(--ease); }
.choice:has(input:checked) { border-color: var(--violet-hi); background: var(--surface); box-shadow: 0 0 0 3px rgba(169, 139, 255, 0.22), 0 14px 34px -18px rgba(108, 59, 255, 0.9); }
.choice:has(input:checked) .choice__dot { border-color: var(--violet-hi); }
.choice:has(input:checked) .choice__dot::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 3px solid var(--violet-hi); outline-offset: 3px; }
.choice:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
/* Without :has() (Firefox < 121) the dot still shows the choice and the focus */
.choice input:checked + .choice__dot { border-color: var(--violet-hi); }
.choice input:checked + .choice__dot::after { transform: scale(1); }
@supports not selector(:has(*)) {
  .choice input:focus-visible + .choice__dot { outline: 3px solid var(--violet-hi); outline-offset: 3px; }
}

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid rgba(169, 139, 255, 0.2); }
.acc details { border-bottom: 1px solid rgba(169, 139, 255, 0.2); }
.acc summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 64px; padding: 1rem 0; font-weight: 600; font-size: var(--t-l);
  transition: color 0.2s var(--ease);
}
.acc summary:hover { color: var(--lilac); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; width: 12px; height: 12px; flex: none; margin-right: 6px; border-right: 2px solid var(--violet-hi); border-bottom: 2px solid var(--violet-hi); transform: rotate(45deg) translateY(-4px); transition: transform 0.3s var(--ease); }
.acc details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.acc details > div { padding: 0 0 1.5rem; color: var(--text-2); }

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; border-block: 1px solid rgba(169, 139, 255, 0.2); padding-block: 1.1rem; }
.marquee__track { display: flex; width: max-content; gap: 2.5rem; animation: marquee 38s linear infinite; }
.marquee__item { display: inline-flex; align-items: center; gap: 2.5rem; font-family: var(--f-display); font-weight: 300; font-size: var(--t-xl); letter-spacing: -0.03em; white-space: nowrap; }
.marquee:hover .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Pause control (WCAG 2.2.2): <button class="marquee__toggle" type="button" data-marquee-toggle aria-pressed="false"
   aria-label="Спри движението"></button>, inside the .marquee (outside any aria-hidden part) or right next to it.
   app.js toggles .is-paused on the marquee + aria-pressed; the icon is pause (bars) / play (triangle). */
.marquee__toggle {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--text); border: 1.5px solid rgba(169, 139, 255, 0.4);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.marquee__toggle:hover { background: var(--text); color: var(--base); border-color: var(--text); }
.marquee__toggle::before { content: ''; box-sizing: border-box; width: 11px; height: 13px; border-inline: 3.5px solid currentColor; }
.marquee__toggle[aria-pressed='true']::before {
  width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor;
}
.marquee > .marquee__toggle { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 1; }

/* ---------- Trust facts ---------- */
/* Transparent cells split by hairlines: the strip sits on whatever band the page gives it.
   The hairlines run full bleed; above --max the cells keep to the .wrap column, so icons line up with logo and footer. */
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid rgba(169, 139, 255, 0.2);
  padding-inline: max(0px, (100% - var(--max)) / 2);
}
.facts > .facts { display: contents; }   /* GS.facts() poured into an existing .facts box */
.fact {
  display: flex; align-items: center; gap: 1.1rem; max-width: none;
  padding: clamp(1.25rem, 2.4vw, 2.25rem) var(--gutter);
  font-weight: 500; line-height: 1.35;
}
.fact + .fact { border-left: 1px solid rgba(169, 139, 255, 0.2); }
.fact span { text-wrap: balance; }   /* "неотворени продукти" wraps as a pair, never one orphan */
.fact svg {
  width: 54px; height: 54px; padding: 14px; flex: none; border-radius: 50%; color: var(--violet-hi);
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.5), rgba(108, 59, 255, 0.12));
  box-shadow: inset 0 0 0 1px rgba(169, 139, 255, 0.34), 0 0 30px -6px rgba(108, 59, 255, 0.75);
}
@media (max-width: 820px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { padding-block: 1rem; }
  .fact + .fact { border-left: 0; border-top: 1px solid rgba(169, 139, 255, 0.2); }
  .fact svg { width: 48px; height: 48px; padding: 12px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); z-index: 120;
  transform: translate(-50%, calc(100% + 3rem)); visibility: hidden;
  display: flex; align-items: center; gap: 0.8rem; width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  min-height: 56px; padding: 0.5rem 1.4rem 0.5rem 0.5rem; border-radius: var(--r-pill);
  /* the night pill: reads on violet photos and on the darkest bands (lilac rim + ultraviolet bloom) */
  background: var(--night); color: var(--text); font-weight: 600; line-height: 1.25;
  border: 1.5px solid rgba(169, 139, 255, 0.55);
  box-shadow: 0 24px 60px -12px rgba(5, 2, 18, 0.8), 0 0 48px -6px rgba(108, 59, 255, 0.85);
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform 0.45s var(--ease); }
.toast__icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ultra); color: var(--on-accent); box-shadow: 0 0 18px rgba(108, 59, 255, 0.9);
}
.toast__icon svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
/* The night room closes every page: the wordmark lit from below by an ultraviolet source, the halo rising behind it */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--night); color: var(--text);
  padding-top: clamp(4rem, 9vw, 8rem);
  border-top: 1px solid rgba(169, 139, 255, 0.16);
}
.site-footer::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: 0; width: min(150vw, 1900px); aspect-ratio: 2.2; translate: -50% 42%;
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.62), rgba(108, 59, 255, 0.2) 50%, rgba(108, 59, 255, 0));
}
/* The halo rises behind the wordmark and fades out before the base line, so it never cuts through its text.
   --top = how much of the ring shows above the footer's bottom edge. */
.site-footer::after {
  --d: min(118vw, 1400px); --top: clamp(250px, 31vw, 470px);
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; width: var(--d); aspect-ratio: 1; translate: -50% 0;
  bottom: calc(var(--top) - var(--d));
  border-radius: 50%; background: var(--halo);
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 30px), rgba(0, 0, 0, 0.2) calc(100% - 20px), #000 calc(100% - 16px), #000 calc(100% - 14px), rgba(0, 0, 0, 0.2) calc(100% - 9px), transparent 100%),
    linear-gradient(#000 calc(var(--top) - 190px), transparent calc(var(--top) - 100px));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 30px), rgba(0, 0, 0, 0.2) calc(100% - 20px), #000 calc(100% - 16px), #000 calc(100% - 14px), rgba(0, 0, 0, 0.2) calc(100% - 9px), transparent 100%),
    linear-gradient(#000 calc(var(--top) - 190px), transparent calc(var(--top) - 100px));
  mask-composite: intersect;
  /* the same lit halo as over the menu's five: a 2px line in a soft bloom of its own colour */
  filter: saturate(1.5);
  opacity: 0.8;
}
.site-footer a { text-decoration: none; }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.footer__brand { display: grid; align-content: start; justify-items: start; gap: 1.75rem; }
.footer__lead { font-family: var(--f-display); font-weight: 300; font-size: var(--t-xl); letter-spacing: -0.035em; line-height: 1.12; max-width: 13ch; }
.footer__brand .btn { box-shadow: 0 16px 40px -14px rgba(108, 59, 255, 0.95); }
.footer__col h2 { font-family: var(--f-text); font-weight: 600; font-size: var(--t-s); letter-spacing: 0; color: var(--text-2); margin-bottom: 0.35rem; }
.footer__col ul { list-style: none; padding: 0; display: grid; }
.footer__col a {   /* 44px touch rows; a name that wraps keeps an even rhythm */
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.55rem; line-height: 1.3;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.footer__col a:hover { color: var(--lilac); text-decoration-color: currentColor; }
.footer__word {
  display: grid; justify-items: center; gap: clamp(1rem, 1.8vw, 1.75rem); margin-top: clamp(3.5rem, 9vw, 8rem); padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
  color: var(--text);
}
/* Solid pearl letters with a violet bloom (no mask on the svg: a mask would clip the bloom into a visible box) */
.footer__word svg {
  width: min(100%, 1240px); height: auto; overflow: visible;
  filter: drop-shadow(0 0 34px rgba(169, 139, 255, 0.5));
}
/* The registered mark keeps its small-logo proportion instead of shouting at wordmark scale */
.footer__word svg path + path { transform: scale(0.5); transform-box: fill-box; transform-origin: 0 0; }
.footer__motto { font-family: var(--f-text); font-size: clamp(0.9375rem, 1.6vw, 1.25rem); letter-spacing: 0.02em; color: var(--text-2); }
/* the hairline starts and ends with the content edges (not the padded box), at every width */
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 1.5rem max(1.5rem, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(169, 139, 255, 0.2), rgba(169, 139, 255, 0.2)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  font-size: var(--t-s); color: var(--text-2);
}
.footer__base .paybadges__list { justify-content: flex-start; }
/* Tablet: the shop column gets the room for "Моментален коректор V34" on one line */
@media (max-width: 900px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; } .footer__brand { grid-column: 1 / -1; } }
/* Phones: shop full width, then help + contact; the contact column is the wider one, so the e-mail fits down to 341px */
@media (max-width: 680px) { .footer__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .footer__col--shop { grid-column: 1 / -1; } }
@media (max-width: 400px) { .footer__grid { column-gap: 1rem; } }
/* 320px (400% zoom): one column */
@media (max-width: 340px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .footer__brand .btn { width: 100%; } }

/* ---------- Glory Kit price (GS.kitPriceHTML): the price + the honest sum of separate prices ---------- */
.kitprice { display: inline-grid; gap: 0.35rem; }
.kitprice__now { font-size: var(--t-xl); line-height: 1; }
.kitprice__sep { font-size: var(--t-s); color: var(--text-2); }

/* ---------- JS-rendered pages: main reserves a screen, so the footer never paints above and jumps ---------- */
body[data-page='product'] main, body[data-page='checkout'] main { min-height: 100vh; min-height: 100svh; }
[data-shop-grid]:empty { min-height: 100vh; min-height: 100svh; }   /* shop: the static kit band waits below the grid */

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none; }
  .marquee__toggle { display: none; }   /* nothing moves, nothing to pause */
}

/* ---------- Back to top: a night disc ringed by the halo, the ring fills with the scroll ---------- */
.to-top {
  --p: 0;
  position: fixed; z-index: 60;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  color: var(--text);
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.55), rgba(10, 6, 32, 0.94) 78%), var(--night);
  box-shadow: 0 22px 50px -14px rgba(5, 2, 18, 0.95), 0 0 42px -8px rgba(108, 59, 255, 0.85);
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.86);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s,
              bottom 0.45s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.35s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* the track: a faint violet hairline ring */
.to-top::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(169, 139, 255, 0.22);
}
/* the progress: the iridescent halo, shown from 12 o'clock clockwise up to --p of the turn */
.to-top::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: var(--halo);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)),
                conic-gradient(#000 calc(var(--p) * 360deg), transparent 0);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)),
                conic-gradient(#000 calc(var(--p) * 360deg), transparent 0);
          mask-composite: intersect;
  filter: drop-shadow(0 0 5px rgba(230, 214, 255, 0.95)) drop-shadow(0 0 12px rgba(169, 139, 255, 0.7));
}
.to-top svg { position: relative; width: 26px; height: 26px; stroke-width: 2.2; transition: transform 0.35s var(--ease); }
.to-top:hover { background: var(--text); color: var(--ultra); box-shadow: 0 22px 50px -14px rgba(5, 2, 18, 0.95), 0 0 54px -4px rgba(199, 168, 255, 0.95); }
.to-top:hover svg { transform: translateY(-3px); }
.to-top:active { transform: scale(0.94); }
.to-top:focus-visible { outline: 3px solid var(--violet-hi); outline-offset: 4px; }
/* phones: a touch smaller, and above the product page's sticky add-to-cart bar when it is up */
@media (max-width: 820px) {
  .to-top { width: 56px; height: 56px; }
  .to-top svg { width: 23px; height: 23px; }
}
@media (max-width: 899px) {   /* product.css shows the buybar below 900px */
  body:has(.buybar.is-on) .to-top { bottom: calc(max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem)) + 84px); }
}
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top svg { transition: opacity 0.2s linear, visibility 0s linear 0.2s; }
  .to-top.is-on { transition: opacity 0.2s linear; }
}