/* base.css — design system of the MOS-HOOKAH demo (018, build P6, 28.09).
   Brand: RF Dewi Expanded + Gropled, palette of DESIGN.md (#141414, #42CFF5, #9921FF, cyan→violet CTA gradient).
   Skeleton, rhythm and motion after timeless.club (refs/timeless: DESIGN.md, PRIEMY.md, motion/MOTION.md).
   One length unit --u: 1px at 1440, grows with the screen to 1.45px (2088 px wide column at 2560, margins grow).
   Motion: only transform and opacity; prefers-reduced-motion switches every transition off. */

@font-face { font-family: "RF Dewi Expanded"; src: url("/fonts/RFDewiExpanded_Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "RF Dewi Expanded"; src: url("/fonts/RFDewiExpanded_Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "RF Dewi Expanded"; src: url("/fonts/RFDewiExpanded_Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "RF Dewi Expanded"; src: url("/fonts/RFDewiExpanded_Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Gropled"; src: url("/fonts/Gropled_Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --u: clamp(0.8px, calc(100vw / 1440), 1.45px);
  --wrap: calc(1440 * var(--u));
  --pad: calc(48 * var(--u));
  --gap: calc(24 * var(--u));
  --col: calc((min(100vw, var(--wrap)) - 2 * var(--pad) - 11 * var(--gap)) / 12);

  --bg: #0b0b0c;          /* scenes, preloader, hero */
  --bg-2: #141414;        /* client darkColor: pages, cards */
  --bg-3: #1b1b1d;
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .22);
  --text: #ffffff;
  --text-2: #c7c8ca;      /* client textGray */
  --text-3: #838383;      /* client mediumGray */
  --cyan: #42cff5;        /* client accentColor */
  --cyan-2: #2bfff2;      /* client lightBlue */
  --violet: #9921ff;      /* client purpleColor */
  --warn: #ff005c;        /* client warnColor */
  --grad: linear-gradient(170deg, #2bfff2 -6.38%, #9921ff 124.11%);  /* client CTA gradient */
  --paper: #efece6;       /* light "paper" for documents, after tl publication */
  --ink: #141414;

  --f: "RF Dewi Expanded", "Segoe UI", system-ui, sans-serif;
  --f-disp: "Gropled", "RF Dewi Expanded", system-ui, sans-serif;
  --ease: cubic-bezier(.25, .25, 0, 1);          /* timeless main curve */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --hdr: calc(88 * var(--u));

  /* type scale in u (1440 = px) */
  --t-hero: calc(52 * var(--u));
  --t-h1: calc(44 * var(--u));
  --t-h2: calc(36 * var(--u));
  --t-h3: calc(22 * var(--u));
  --t-h4: calc(17 * var(--u));
  --t-l: calc(17 * var(--u));
  --t-m: max(13px, calc(14.5 * var(--u)));
  --t-s: max(12px, calc(12.5 * var(--u)));
  --t-xs: max(9.5px, calc(10.5 * var(--u)));
  --t-btn: max(10.5px, calc(11.5 * var(--u)));
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg-2); color: var(--text); -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; font-family: var(--f); font-size: var(--t-m); line-height: 1.55; font-weight: 400; background: var(--bg-2);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }

/* grain over everything: static, never animated */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sec { position: relative; padding: calc(150 * var(--u)) 0; }
.sec--tight { padding: calc(96 * var(--u)) 0; }
.full { position: relative; width: 100%; }

/* ---------- type ---------- */
.over { font-size: var(--t-xs); letter-spacing: .34em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.over--w { color: var(--text-2); }
.t-hero { font-size: var(--t-hero); line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; font-weight: 400; }
.h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: .03em; text-transform: uppercase; font-weight: 400; }
.h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; }
.h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; font-weight: 400; }
.h4 { font-size: var(--t-h4); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.lead { font-size: var(--t-l); line-height: 1.55; color: var(--text-2); }
.txt { color: var(--text-2); max-width: calc(470 * var(--u)); }
.txt p + p { margin-top: .9em; }
.small { font-size: var(--t-s); color: var(--text-3); line-height: 1.5; }
.num { font-family: var(--f-disp); font-weight: 700; letter-spacing: .01em; }
.grad-t { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cyan { color: var(--cyan); }
.muted { color: var(--text-3); }
.pre { white-space: pre-line; }   /* client lines kept verbatim in one text node; a newline breaks visually */
.pre::first-line { color: var(--text); font-weight: 600; }

/* ---------- buttons (tl: fill leaves on hover, two corner brackets rotate; ring is transform-only) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  height: calc(56 * var(--u)); padding: 0 calc(30 * var(--u)); font-size: var(--t-btn); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: #0b0b0c; white-space: nowrap; isolation: isolate; }
.btn__fill { position: absolute; inset: 0; background: var(--grad); z-index: -1; transition: opacity .25s var(--ease); }
.btn__ring { position: absolute; inset: 0; padding: 1px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .25s var(--ease); }
.btn__ring i { position: absolute; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 9%, var(--cyan-2) 9% 22%, transparent 22% 59%, var(--violet) 59% 72%, transparent 72%);
  transform: rotate(15deg); transition: transform .75s var(--ease); }
.btn__t { position: relative; }
.btn:hover .btn__fill, .btn:focus-visible .btn__fill { opacity: 0; }
.btn:hover .btn__ring, .btn:focus-visible .btn__ring { opacity: 1; }
.btn:hover .btn__ring i, .btn:focus-visible .btn__ring i { transform: rotate(160deg); }
.btn:hover, .btn:focus-visible { color: var(--text); }
.btn--ghost { color: var(--text); }
.btn--ghost .btn__fill { opacity: 0; }
.btn--ghost .btn__ring { opacity: 1; }
.btn--ghost .btn__ring i { background: conic-gradient(from 0deg, transparent 0 9%, var(--text-2) 9% 22%, transparent 22% 59%, var(--text-2) 59% 72%, transparent 72%); }
.btn--ghost:hover .btn__fill { opacity: 1; background: var(--text); }
.btn--ghost:hover { color: #0b0b0c; }
.btn--spin .btn__ring { opacity: 1; }
.btn--spin .btn__ring i { animation: btn-rot 4s linear 1s infinite; }
@keyframes btn-rot { to { transform: rotate(375deg); } }
.btn--sm { height: calc(44 * var(--u)); padding: 0 calc(20 * var(--u)); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .35; pointer-events: none; }

/* round "smoke ring" button (tl morph button): three uneven rings turning, transform only */
.orb { position: relative; display: inline-grid; place-items: center; width: calc(150 * var(--u)); aspect-ratio: 1; font-size: var(--t-btn);
  letter-spacing: .16em; text-transform: uppercase; font-weight: 600; text-align: center; line-height: 1.35; color: var(--text); }
.orb::before, .orb::after, .orb i { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.55);
  border-radius: 47% 53% 55% 45% / 52% 44% 56% 48%; animation: orb-a 9s linear infinite; pointer-events: none; }
.orb::after { border-color: rgba(66,207,245,.45); border-radius: 55% 45% 48% 52% / 45% 55% 45% 55%; animation: orb-b 12s linear infinite; inset: 4%; }
.orb i { border-color: rgba(153,33,255,.5); border-radius: 50% 50% 44% 56% / 56% 48% 52% 44%; animation: orb-a 15s linear infinite reverse; inset: -3%; }
.orb span { position: relative; transition: transform .6s var(--ease); }
.orb:hover span { transform: scale(1.06); }
.orb:hover::before { animation-duration: 3s; }
@keyframes orb-a { to { transform: rotate(360deg); } }
@keyframes orb-b { to { transform: rotate(-360deg) scale(1.02); } }

/* text link with underline that leaves on hover (tl) */
.lnk { position: relative; display: inline-block; padding-bottom: 3px; }
.lnk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .4s var(--ease); }
.lnk:hover::after { transform: scaleX(0); }
.lnk--in::after { transform: scaleX(0); transform-origin: left; }
.lnk--in:hover::after { transform: scaleX(1); }

/* arrow tag "flavour · price" pointing at a product (R02-R04) */
.tag { position: absolute; display: flex; align-items: center; gap: calc(10 * var(--u)); pointer-events: auto; white-space: nowrap; }
.tag__dot { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: var(--cyan-2); box-shadow: 0 0 0 calc(6 * var(--u)) rgba(43,255,242,.16), 0 0 calc(24 * var(--u)) rgba(43,255,242,.7); flex: none; }
.tag__line { width: calc(56 * var(--u)); height: 1px; background: linear-gradient(90deg, var(--cyan-2), rgba(255,255,255,.7)); transform-origin: left; flex: none; }
.tag__box { padding: calc(10 * var(--u)) calc(14 * var(--u)); background: rgba(11,11,12,.72); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tag__k { display: block; font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
.tag__v { display: block; font-size: calc(17 * var(--u)); letter-spacing: .04em; margin-top: 2px; }
.tag--l { flex-direction: row-reverse; }
.tag--up { flex-direction: column-reverse; gap: 0; align-items: center; }
.tag--up .tag__line { width: 1px; height: calc(70 * var(--u)); background: linear-gradient(0deg, var(--cyan-2), rgba(255,255,255,.7)); transform-origin: bottom; }
.tag--up .tag__box { text-align: center; }
.tag--l .tag__line { transform-origin: right; background: linear-gradient(270deg, var(--cyan-2), rgba(255,255,255,.7)); }

/* ---------- reveal (tl §3: heading 110%→100% width + fade ~1 s, paragraph +0.25 s, photo +0.5 s) ---------- */
.rv-h { opacity: 0; transform: scaleX(1.1); transform-origin: 50% 50%; transition: opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.rv-h.l { transform-origin: 0 50%; }
.rv-o { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv-p { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease) .25s, transform 1s var(--ease) .25s; }
.rv-f { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease) .5s, transform 1.2s var(--ease) .5s; }
.is-in .rv-h, .rv-h.is-in { opacity: 1; transform: none; }
.is-in .rv-o, .rv-o.is-in, .is-in .rv-p, .rv-p.is-in, .is-in .rv-f, .rv-f.is-in { opacity: 1; transform: none; }

/* photo with toner (tl: one darkening knob per frame) and slow zoom-out on reveal */
.ph { position: relative; overflow: hidden; background: var(--bg-3); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease) .35s; }
.is-in .ph img, .ph.is-in img, .is-in .ph video { transform: scale(1); }
.ph::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--shade, 0); pointer-events: none; }

/* ---------- header ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--hdr); pointer-events: none; }
.hdr::before { content: ""; position: absolute; inset: 0 0 -40% 0; background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.55) 45%, rgba(0,0,0,0)); pointer-events: none; transition: opacity .5s var(--ease); }
.hdr__in { position: relative; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap); pointer-events: auto; }
.hdr__l, .hdr__r { display: flex; align-items: center; gap: calc(26 * var(--u)); }
.hdr__r { justify-content: flex-end; }
.hdr__nav { display: flex; gap: calc(24 * var(--u)); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--text-2); }
.hdr__nav a { position: relative; white-space: nowrap; }
.hdr__nav a:hover, .hdr__nav a[aria-current] { color: var(--text); }
.hdr__nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--grad); }
.logo { display: block; width: calc(96 * var(--u)); }
.logo img, .logo svg { width: 100%; height: auto; }
.burger { position: relative; width: calc(52 * var(--u)); height: calc(52 * var(--u)); display: grid; place-items: center; flex: none; }
.burger b { position: absolute; left: 30%; right: 30%; height: 1px; background: var(--text); transition: transform .5s var(--ease), opacity .3s; }
.burger b:nth-child(1) { transform: translateY(-4px); } .burger b:nth-child(2) { transform: translateY(4px); }
.burger .btn__ring { opacity: 1; z-index: 0; }
.burger .btn__ring i { background: conic-gradient(from 0deg, transparent 0 10%, var(--text-2) 10% 20%, transparent 20% 60%, var(--text-2) 60% 70%, transparent 70%); transform: rotate(45deg); }
.burger:hover .btn__ring i { transform: rotate(225deg); }
.menu-open .burger b:nth-child(1) { transform: rotate(45deg); } .menu-open .burger b:nth-child(2) { transform: rotate(-45deg); }
.hdr__tel { font-size: var(--t-s); letter-spacing: .08em; white-space: nowrap; text-align: right; line-height: 1.25; }
.hdr__tel small { display: block; font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.hdr__tg { display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: 1px solid var(--line-2); border-radius: 50%; }
.hdr__tg:hover { border-color: var(--cyan); }
.cartbtn { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: var(--t-s); letter-spacing: .06em; white-space: nowrap; }
.cartbtn__n { min-width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0 6px; border-radius: 11px; background: var(--grad); color: #0b0b0c; font-weight: 700; display: grid; place-items: center; font-size: var(--t-xs); }
.cartbtn__sum { color: var(--text-2); }

/* side menu (tl ☰ panel) */
.menu { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.menu__shade { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .5s var(--ease); }
.menu__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(100%, calc(560 * var(--u))); padding: calc(120 * var(--u)) calc(56 * var(--u)) calc(48 * var(--u));
  background: linear-gradient(160deg, rgba(40, 14, 70, .97), rgba(12, 32, 44, .97)); transform: translateX(-102%); transition: transform .6s var(--ease); display: flex; flex-direction: column; gap: calc(40 * var(--u)); overflow: auto; }
.menu-open .menu { pointer-events: auto; }
.menu-open .menu__shade { opacity: 1; }
.menu-open .menu__panel { transform: none; }
.menu__list a { display: block; font-size: calc(30 * var(--u)); line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; transition: transform .4s var(--ease); }
.menu__list a:hover { transform: translateX(10px); color: var(--cyan); }
.menu__list small { font-size: var(--t-xs); letter-spacing: .2em; color: var(--cyan); vertical-align: super; margin-left: 8px; }
.menu__foot { margin-top: auto; display: grid; gap: calc(10 * var(--u)); font-size: var(--t-s); color: var(--text-2); }

/* section navigator "1/7 · NAME" (tl) */
.pnav { position: fixed; left: 50%; bottom: calc(26 * var(--u)); z-index: 55; transform: translate(-50%, 160%); opacity: 0; transition: transform .6s var(--ease), opacity .4s var(--ease); pointer-events: none; }
.pnav.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.pnav__btn { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(20 * var(--u)); background: rgba(20,20,20,.86); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.pnav__n { color: var(--cyan); }
.pnav__list { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); min-width: calc(300 * var(--u)); background: rgba(20,20,20,.95); border: 1px solid var(--line); padding: calc(10 * var(--u)) 0;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.pnav.open .pnav__list { opacity: 1; transform: none; pointer-events: auto; }
.pnav__list a { display: flex; gap: 12px; padding: calc(9 * var(--u)) calc(20 * var(--u)); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.pnav__list a:hover, .pnav__list a.cur { color: var(--text); }

/* floating Telegram button (tl "Новости" corner button) */
.fab { position: fixed; right: calc(26 * var(--u)); bottom: calc(26 * var(--u)); z-index: 55; }

/* ---------- footer-screen (tl home B11: giant brand word, flipping card) ---------- */
.foot { position: relative; overflow: hidden; background: var(--bg); padding: calc(120 * var(--u)) 0 calc(40 * var(--u)); }
.foot__word { font-family: var(--f-disp); font-weight: 700; font-size: calc(212 * var(--u)); line-height: .9; letter-spacing: -.01em; text-align: center; white-space: nowrap; color: #fff; }
.foot__word span { display: inline-block; }
.foot__grid { margin-top: calc(80 * var(--u)); }
.foot h4 { font-size: var(--t-xs); letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); font-weight: 600; margin-bottom: calc(18 * var(--u)); }
.foot li { margin: 6px 0; font-size: var(--t-s); color: var(--text-2); }
.foot li a:hover { color: var(--text); }
.foot__legal { margin-top: calc(70 * var(--u)); padding-top: calc(26 * var(--u)); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--gap); font-size: var(--t-xs); color: var(--text-3); letter-spacing: .04em; }
.foot__legal p { max-width: calc(640 * var(--u)); }

/* ---------- footer additions (home and all pages) ---------- */
.foot__stage { position: relative; }
.foot__card { position: absolute; left: 50%; top: 50%; width: calc(190 * var(--u)); aspect-ratio: 3 / 4; translate: -50% -50%; perspective: 900px; }
.foot__card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flip 7s var(--ease) infinite; }
.foot__card-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; border: 1px solid var(--line-2); }
.foot__card-in img + img { transform: rotateY(180deg); }
@keyframes flip { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.fab { width: calc(112 * var(--u)); font-size: calc(9.5 * var(--u)); background: rgba(11,11,12,.55); border-radius: 50%; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }


/* ---------- cart side panel ---------- */
.cart { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.cart__shade { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .5s var(--ease); }
.cart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, calc(560 * var(--u))); background: var(--bg-2); border-left: 1px solid var(--line);
  transform: translateX(102%); transition: transform .6s var(--ease); display: flex; flex-direction: column; }
.cart-open .cart { pointer-events: auto; }
.cart-open .cart__shade { opacity: 1; }
.cart-open .cart__panel { transform: none; }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding: calc(28 * var(--u)) calc(36 * var(--u)); border-bottom: 1px solid var(--line); }
.cart__close { width: calc(44 * var(--u)); height: calc(44 * var(--u)); position: relative; }
.cart__close::before, .cart__close::after { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: 1px; background: var(--text); transform: rotate(45deg); }
.cart__close::after { transform: rotate(-45deg); }
.cart__body { flex: 1; overflow: auto; padding: calc(24 * var(--u)) calc(36 * var(--u)); overscroll-behavior: contain; }
.cart__foot { padding: calc(24 * var(--u)) calc(36 * var(--u)) calc(30 * var(--u)); border-top: 1px solid var(--line); background: var(--bg-2); }
.steps { display: flex; gap: calc(18 * var(--u)); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.steps b { color: var(--cyan); font-weight: 600; }
.cline { display: grid; grid-template-columns: calc(64 * var(--u)) 1fr auto; gap: calc(14 * var(--u)); align-items: center; padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.cline img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg-3); }
.cline__t { font-size: var(--t-s); line-height: 1.4; }
.cline__t small { display: block; color: var(--text-3); font-size: var(--t-xs); letter-spacing: .04em; margin-top: 3px; }
.qty { display: flex; align-items: center; gap: 10px; }
.qty button { width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: var(--t-s); color: var(--text-2); }
.row--tot { font-size: calc(20 * var(--u)); color: var(--text); padding-top: 12px; }
.fld { display: block; margin-bottom: calc(14 * var(--u)); }
.fld span { display: block; font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.fld input, .fld select, .fld textarea { width: 100%; height: calc(50 * var(--u)); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 0 2px; font-size: var(--t-m); color: var(--text); border-radius: 0; }
.fld textarea { height: auto; min-height: calc(80 * var(--u)); padding-top: 10px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--cyan); }
.fld em { display: none; font-style: normal; font-size: var(--t-xs); color: var(--warn); margin-top: 6px; }
.fld.bad em { display: block; }
.fld.bad input { border-bottom-color: var(--warn); }
.opt { display: flex; align-items: flex-start; gap: 12px; padding: calc(14 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; font-size: var(--t-s); }
.opt input { margin-top: 3px; accent-color: var(--cyan); }
.opt:has(input:checked) { border-color: var(--cyan); }
.opt small { display: block; color: var(--text-3); font-size: var(--t-xs); margin-top: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 14px; border: 1px solid var(--line-2); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; }
.chip[aria-pressed="true"], .chip.on { border-color: var(--cyan); color: var(--cyan); }

/* ---------- 18+ gate ---------- */
.gate { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(5,5,6,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.gate.on { opacity: 1; pointer-events: auto; }
.gate__box { width: min(92vw, calc(520 * var(--u))); padding: calc(46 * var(--u)); border: 1px solid var(--line-2); background: rgba(20,20,20,.9); text-align: center; transform: translateY(20px); transition: transform .8s var(--ease); }
.gate.on .gate__box { transform: none; }
.gate__num { font-family: var(--f-disp); font-weight: 700; font-size: calc(84 * var(--u)); line-height: 1; }
.gate p { margin: calc(18 * var(--u)) 0 calc(28 * var(--u)); color: var(--text-2); font-size: var(--t-s); }

/* ---------- preloader (tl §1: the scene shows through) ---------- */
.pre-l { position: fixed; inset: 0; z-index: 96; background: var(--bg); display: grid; place-items: center; transition: opacity 1s var(--ease); }
.pre-l.out { opacity: 0; pointer-events: none; }
.pre-l__in { text-align: center; }
.pre-l__t { font-size: calc(26 * var(--u)); letter-spacing: .12em; text-transform: uppercase; }
.pre-l__n { font-family: var(--f-disp); font-weight: 700; font-size: calc(18 * var(--u)); color: var(--cyan); margin-top: calc(18 * var(--u)); letter-spacing: .1em; }
.pre-l__bar { width: calc(240 * var(--u)); height: 1px; margin: calc(18 * var(--u)) auto 0; background: var(--line); overflow: hidden; }
.pre-l__bar i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.pre-l__glow { position: absolute; left: 50%; top: 58%; width: calc(420 * var(--u)); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,104,40,.28), rgba(153,33,255,.10) 45%, transparent 70%); opacity: .0; transition: opacity 1.5s; }

/* ---------- page transition curtain (R18: brand on the background) ---------- */
.curtain { position: fixed; inset: 0; z-index: 97; pointer-events: none; }
.curtain__bg { position: absolute; inset: 0; background: #1a0826 center/cover no-repeat; transform: translateY(100%); transition: transform .7s var(--ease); }
.curtain__w { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; font-family: var(--f-disp); font-weight: 700; font-size: calc(170 * var(--u)); color: rgba(255,255,255,.92); opacity: 0; transition: opacity .4s; white-space: nowrap; }
.leaving .curtain__bg { transform: none; }
.leaving .curtain__w { opacity: 1; transition-delay: .25s; }
.arriving .curtain__bg { transform: none; transition: none; }
.arriving .curtain__w { opacity: 1; transition: none; }
.arrived .curtain__bg { transform: translateY(-100%); }

/* ---------- misc ---------- */
.hint { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
.hint svg { width: calc(34 * var(--u)); height: auto; }
.divider { height: 1px; background: var(--line); }
.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__q { width: 100%; display: grid; grid-template-columns: calc(60 * var(--u)) 1fr calc(30 * var(--u)); align-items: center; gap: var(--gap); padding: calc(24 * var(--u)) 0; text-align: left; font-size: calc(17 * var(--u)); letter-spacing: .03em; }
.acc__q b { font-family: var(--f-disp); color: var(--cyan); font-weight: 700; font-size: calc(15 * var(--u)); }
.acc__q i { position: relative; width: 16px; height: 16px; justify-self: end; }
.acc__q i::before, .acc__q i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--text); transition: transform .4s var(--ease); }
.acc__q i::after { transform: rotate(90deg); }
.acc__i.open .acc__q i::after { transform: rotate(0); }
.acc__a { display: grid; grid-template-rows: 0fr; }
.acc__a > div { overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.acc__i.open .acc__a > div { opacity: 1; transform: none; }
.acc__a p { padding: 0 0 calc(26 * var(--u)) calc(60 * var(--u) + var(--gap)); color: var(--text-2); max-width: calc(820 * var(--u)); }
.acc__i.open .acc__a { grid-template-rows: 1fr; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: calc(90 * var(--u)); z-index: 85; transform: translate(-50%, 20px); opacity: 0; transition: opacity .4s, transform .5s var(--ease);
  background: rgba(20,20,20,.95); border: 1px solid var(--cyan); padding: 14px 22px; font-size: var(--t-s); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* object frames: the client's photo in a box (the 3D viewer that lived here is gone since 28.09 — Operator: «убрать везде») */
.v3d { position: relative; }
.v3d__fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .rv-h, .rv-o, .rv-p, .rv-f { opacity: 1; transform: none; }
  .ph img { transform: none; }
}
.h1 s, .h2 s { text-decoration-thickness: .07em; text-decoration-color: var(--violet, #9921ff); color: var(--text-3); }