/* ГОЛОГРАФ — «жемчужная студия»: светлый перламутровый фон (#F3F1EC → #E6E2DA),
   чернила #141519, голографические карты из CSS (фольга, гильош, блик, наклон).
   Шрифты: Geologica (текст и заголовки) + Martian Mono (подписи капсом).
   Грузится ПОСЛЕ style.css/ui.css только на витрине: перекрывает движок через
   переменные + точечные правила. Админка остаётся на style.css. */

:root {
  /* палитра студии */
  --g-bg: #F3F1EC; --g-bg2: #EEEBE5; --g-floor: #E6E2DA; --g-white: #FFFFFF;
  --g-ink: #141519; --g-ink2: #2B2D33; --g-text2: #3B3934; --g-mut: #5E5A54;
  --g-line: rgba(20, 21, 25, .12); --g-line2: rgba(20, 21, 25, .22);
  --g-ok: #1C6E45; --g-warn: #8A5300; --g-red: #A3261D;
  --g-holo: linear-gradient(100deg, hsl(350,90%,72%), hsl(45,95%,66%), hsl(140,75%,62%), hsl(200,95%,68%), hsl(275,85%,74%));
  --g-shadow: 0 1px 0 rgba(20,21,25,.04), 0 18px 40px rgba(60,50,35,.08);
  --g-r: 24px; --g-r-sm: 14px;
  --g-sans: 'Geologica', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --g-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* переменные движка — те же цвета, чтобы страницы движка стали светлыми */
  --bg: var(--g-bg); --bg2: var(--g-bg2); --card: #FFFFFF; --card2: #F7F6F2;
  --line: var(--g-line); --line2: var(--g-line2); --text: var(--g-ink); --mut: var(--g-mut);
  --acc: var(--g-ink); --acc-deep: #000; --acc-ink: #FFFFFF; --acc-soft: rgba(20,21,25,.12);
  --warn: var(--g-warn); --c-red: var(--g-red); --c-blue: #1F4FA8; --ok: var(--g-ok);
  --radius: 20px; --font-disp: var(--g-sans); --font-body: var(--g-sans);
}

html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body { background: var(--g-bg); color: var(--g-ink); font: 400 16px/1.55 var(--g-sans); }
a { color: var(--g-ink); text-decoration: none; }
a:hover { color: #000; }
h1, h2, h3 { font-family: var(--g-sans); }
.mut, .fine { color: var(--g-mut); }
[hidden] { display: none !important; }
::selection { background: rgba(140, 200, 245, .45); }
.wrap { max-width: 1440px; padding: 0 64px; }
.g-main { padding-bottom: 24px; }
.g-main-home { max-width: none; padding: 0; }
.g-nw { white-space: nowrap; }
.g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--g-ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 500; }
.g-skip:focus { top: 12px; color: #fff; }
#pageload { background: var(--g-holo); box-shadow: none; height: 3px; }
:focus-visible { outline: 2px solid var(--g-ink); outline-offset: 3px; }

/* ------------------------------------------------ типографика */
.g-eyebrow { font: 500 12px/1.4 var(--g-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--g-mut); }
.g-eyebrow a { color: var(--g-mut); text-decoration: underline; text-underline-offset: 3px; }
.g-h1 { margin: 0; font: 600 88px/.98 var(--g-sans); letter-spacing: -.045em; color: var(--g-ink); }
.g-h1-page { font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; margin-top: 14px; }
.g-h1-sub { color: var(--g-mut); font-weight: 500; }
.g-h2 { margin: 18px 0 0; font: 600 clamp(36px, 4.6vw, 64px)/1 var(--g-sans); letter-spacing: -.04em; }
.g-h3 { margin: 10px 0 0; font: 600 clamp(26px, 2.6vw, 36px)/1.05 var(--g-sans); letter-spacing: -.03em; }
.g-lead { margin: 16px 0 0; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--g-mut); }
.g-fine { font-size: 13px; line-height: 1.5; color: var(--g-mut); }
.g-fine a { color: var(--g-ink); text-decoration: underline; text-underline-offset: 2px; }
.g-step-lbl { display: block; font: 500 11px/1 var(--g-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g-mut); }

/* ------------------------------------------------ кнопки, чипы, поля (свои и движка) */
.g-btn, .btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; font: 500 16px/1 var(--g-sans);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s; filter: none; box-shadow: none;
}
.g-ink, .btn { background: var(--g-ink); color: #FFFFFF; border: 1px solid var(--g-ink); }
.g-ink:hover, .btn:hover { background: var(--g-ink2); color: #FFFFFF; transform: none; filter: none; }
.g-ghost, .btn-ghost { background: transparent; color: var(--g-ink); border: 1px solid var(--g-line2); }
.g-ghost:hover, .btn-ghost:hover { border-color: var(--g-ink); color: var(--g-ink); background: rgba(255,255,255,.5); }
.g-sm, .btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-xs { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.btn-lg { min-height: 56px; font-size: 16.5px; }
.g-wide, .btn-block { display: flex; width: 100%; }
.btn-cancel-big { background: transparent; color: var(--g-ink); border: 1px solid var(--g-line2); }
.btn[disabled], .g-btn[disabled] { opacity: .55; cursor: default; }
.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--g-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: var(--g-red); }
.g-chip, .tab, .chip-price {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; font: 500 15px/1 var(--g-sans); cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--g-ink); border: 1px solid var(--g-line2); transition: background .2s, border-color .2s;
}
.g-chip span, .tab span { color: var(--g-mut); font-weight: 400; font-size: 13px; }
.g-chip:hover, .tab:hover, .chip-price:hover { border-color: var(--g-ink); color: var(--g-ink); }
.g-chip.on, .tab.on, .chip-price.on { background: var(--g-ink); color: #FFFFFF; border-color: var(--g-ink); }
.g-chip.on span, .tab.on span { color: #D9D6CF; }
.g-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font: 500 13px/1 var(--g-sans); color: var(--g-text2); background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--g-line); }
a.g-tag { min-height: 44px; }
.g-tag-holo { color: var(--g-ink); background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-holo) border-box; border: 1.5px solid transparent; box-shadow: none; }
.flashes { margin-top: 14px; display: grid; gap: 8px; }
.flash { background: #FFFFFF; border: 0; box-shadow: var(--g-shadow), inset 0 0 0 1px var(--g-line); color: var(--g-ink); border-radius: 16px; font-weight: 500; padding: 14px 18px; }
.flash-warn { box-shadow: inset 0 0 0 1.5px var(--g-warn); }
.fld span { font: 500 13px/1.3 var(--g-sans); color: var(--g-text2); letter-spacing: 0; text-transform: none; }
.fld input, .fld textarea, .fld select, .review-author, .review-box textarea, .cancel-form textarea, .g-qty input, .g-slot-qty input {
  box-sizing: border-box; width: 100%; min-height: 54px; padding: 0 18px; border-radius: 14px;
  border: 1px solid rgba(20,21,25,.18); background: #FFFFFF; color: var(--g-ink); font: 400 16px/1.3 var(--g-sans); outline: none;
}
.fld textarea, .review-box textarea, .cancel-form textarea { padding: 14px 18px; min-height: 96px; }
.fld input::placeholder, .fld textarea::placeholder, textarea::placeholder, input::placeholder { color: #6F6B64; }
.fld input:focus, .fld textarea:focus, .fld select:focus, .review-author:focus, .review-box textarea:focus, .cancel-form textarea:focus { border-color: var(--g-ink); box-shadow: 0 0 0 3px rgba(20,21,25,.08); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { color: var(--g-text2); font-weight: 500; }
.empty { color: var(--g-mut); }
.price { font-weight: 600; white-space: nowrap; }
.price-lg { font: 600 52px/1 var(--g-sans); letter-spacing: -.035em; color: var(--g-ink); }
.price-old { color: var(--g-mut); font-size: 17px; }
.stars-static span { color: rgba(20,21,25,.2); } .stars-static span.on { color: #B8860B; }
.stars-input label { color: rgba(20,21,25,.2); }
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { color: #B8860B; }

/* ------------------------------------------------ знак и слово-логотип */
.g-logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--g-ink); flex: none; }
.g-word { font: 700 19px/1 var(--g-sans); letter-spacing: .24em; white-space: nowrap; }
.g-mark {
  position: relative; display: block; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 2px 8px rgba(20,21,25,.14);
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 0 1px, rgba(255,255,255,0) 1px 2.8px),
    linear-gradient(120deg, hsl(350,90%,76%) 0%, hsl(45,95%,72%) 20%, hsl(140,75%,70%) 40%, hsl(200,95%,74%) 60%, hsl(275,85%,78%) 80%, hsl(350,90%,76%) 100%), #C9CDD3;
  background-size: 100% 100%, 300% 300%, 100% 100%; animation: gShimmer 7s ease-in-out infinite alternate;
}
.g-mark::after { content: 'G'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 15px/1 var(--g-sans); color: #FFFFFF; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
@keyframes gShimmer { from { background-position: center, 0% 40%, center; } to { background-position: center, 100% 60%, center; } }

/* ------------------------------------------------ шапка */
.ld-head { position: sticky; top: 0; z-index: 50; background: rgba(243, 241, 236, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.ld-head.is-scrolled { border-bottom-color: var(--g-line); }
.g-head-row { display: flex; align-items: center; gap: 28px; height: 88px; }
.g-nav { display: flex; gap: 26px; margin: 0 auto; }
.g-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--g-sans); color: var(--g-ink); padding: 0 2px; position: relative; white-space: nowrap; }
.g-nav a:hover { color: var(--g-mut); }
.g-nav a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--g-holo); }
.g-head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.g-search { position: relative; width: 240px; }
.g-search > svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--g-mut); pointer-events: none; }
.g-search input { box-sizing: border-box; width: 100%; height: 46px; border-radius: 999px; border: 1px solid var(--g-line2); background: rgba(255,255,255,.55); padding: 0 16px 0 44px; font: 400 15px/1 var(--g-sans); color: var(--g-ink); outline: none; }
.g-search input:focus { border-color: var(--g-ink); background: #FFFFFF; }
.g-search input::placeholder { color: #6F6B64; }
.g-search-btn { display: none; width: 46px; padding: 0; }
.g-search-btn svg, .g-burger summary svg { width: 20px; height: 20px; }
.g-cart svg { width: 20px; height: 20px; }
.g-cart .cart-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--g-holo); color: var(--g-ink); font: 700 13px/1 var(--g-sans); }
.g-burger { display: none; position: relative; }
.g-burger summary { list-style: none; width: 46px; padding: 0; }
.g-burger summary::-webkit-details-marker { display: none; }
.g-burger-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(360px, calc(100vw - 32px)); background: #FFFFFF; border-radius: 24px; box-shadow: 0 30px 80px rgba(60,50,35,.22), inset 0 0 0 1px var(--g-line); padding: 12px; display: grid; gap: 8px; }
.g-burger-panel nav { display: grid; gap: 2px; }
.g-burger-panel nav a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; }
.g-burger-panel nav a:hover { background: var(--g-bg); }
.g-burger-panel nav b { font: 600 16px/1.2 var(--g-sans); }
.g-burger-panel nav span { font-size: 13px; color: var(--g-mut); }
.g-burger-links { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--g-line); padding: 10px 4px 4px; }
.g-burger-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--g-line2); font-size: 14px; font-weight: 500; }

/* живые подсказки под поиском */
.ld-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 380px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 30px 80px rgba(60,50,35,.22), inset 0 0 0 1px var(--g-line); overflow: hidden; }
.g-search .ld-suggest { left: auto; right: 0; width: 420px; }
.ld-suggest a { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; color: var(--g-ink); font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--g-line); }
.ld-suggest a span { display: grid; gap: 2px; line-height: 1.3; }
.ld-suggest a small { color: var(--g-mut); font-weight: 400; }
.ld-suggest a b { font-weight: 600; white-space: nowrap; }
.ld-suggest a:hover, .ld-suggest a.is-active { background: var(--g-bg); }
.ld-suggest .ld-suggest-all { display: block; text-align: center; font-weight: 600; border-bottom: 0; }
.g-sg-card { position: relative; width: 74px; height: 47px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; font: 700 13px/1 var(--g-sans); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.g-sg-card svg { position: absolute; left: 6px; top: 6px; width: 13px; height: 13px; }
.g-sg-card i { position: absolute; left: 6px; top: 6px; font: 700 8px/1 var(--g-sans); font-style: normal; }

/* ================================================= ГОЛОГРАФИЧЕСКАЯ КАРТА
   Размеры в em: 1em = 10px → карта 320×202. В плитке размер задаёт контейнер. */
.gc { --ang: 112deg; --bx: 50%; --by: 50%; --gx: 46%; --gy: 30%; --fo: .75; --sh: 0; --mf: .3; --hue: 210;
  position: relative; width: 32em; height: 20.2em; font-size: 10px; transform-style: preserve-3d; color: #16171B; text-align: left; }
.gc-edge { position: absolute; inset: 0; border-radius: 1.5em; }
.gc .e1 { transform: translateZ(-.22em); } .gc .e2 { transform: translateZ(-.08em); } .gc .e3 { transform: translateZ(.07em); }
.gc-face { position: absolute; inset: 0; border-radius: 1.5em; overflow: hidden; transform: translateZ(.2em); isolation: isolate; }
.gc-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1.5px 0 rgba(255,255,255,.6); pointer-events: none; }
.gc-base, .gc-guil, .gc-foil, .gc-band, .gc-glit, .gc-glare, .gc-spec, .gc-shade { position: absolute; inset: 0; }
.gc-foil {
  background-image:
    repeating-linear-gradient(var(--ang), hsl(2,100%,73%) 0%, hsl(53,100%,69%) 2.6%, hsl(93,100%,69%) 5.2%, hsl(176,100%,76%) 7.8%, hsl(228,100%,74%) 10.4%, hsl(283,100%,73%) 13%, hsl(2,100%,73%) 15.6%),
    linear-gradient(calc(var(--ang) + 70deg), hsl(330,90%,76%) 0%, hsl(45,95%,72%) 25%, hsl(150,80%,72%) 50%, hsl(205,95%,75%) 75%, hsl(285,80%,77%) 100%);
  background-size: 240% 240%, 220% 220%; background-position: var(--bx) var(--by), var(--by) var(--bx); background-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(calc(var(--ang) - 90deg), rgba(0,0,0,var(--mf)) 0%, #000 42%, #000 58%, rgba(0,0,0,var(--mf)) 100%);
  mask-image: linear-gradient(calc(var(--ang) - 90deg), rgba(0,0,0,var(--mf)) 0%, #000 42%, #000 58%, rgba(0,0,0,var(--mf)) 100%);
  -webkit-mask-size: 280% 280%; mask-size: 280% 280%; -webkit-mask-position: var(--gx) var(--gy); mask-position: var(--gx) var(--gy);
}
.gc-band {
  background-image: repeating-linear-gradient(var(--ang), hsl(0,100%,70%) 0%, hsl(45,100%,64%) 1.6%, hsl(95,100%,62%) 3.2%, hsl(175,100%,64%) 4.8%, hsl(220,100%,70%) 6.4%, hsl(285,100%,70%) 8%, hsl(360,100%,70%) 9.6%);
  background-size: 200% 200%; background-position: var(--bx) var(--by);
  -webkit-mask-image: linear-gradient(calc(var(--ang) - 90deg), transparent 34%, rgba(0,0,0,.85) 45%, #000 50%, rgba(0,0,0,.85) 55%, transparent 66%);
  mask-image: linear-gradient(calc(var(--ang) - 90deg), transparent 34%, rgba(0,0,0,.85) 45%, #000 50%, rgba(0,0,0,.85) 55%, transparent 66%);
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%; -webkit-mask-position: var(--gx) var(--gy); mask-position: var(--gx) var(--gy);
}
.gc-emb { position: absolute; right: -3.8em; top: -2.6em; width: 23.6em; height: 23.6em; color: #FFFFFF; mix-blend-mode: overlay; opacity: .45; }
.gc-emb svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.gc-emb span { display: grid; place-items: center; width: 100%; height: 100%; font: 800 11em/1 var(--g-sans); letter-spacing: -.06em; }
.gc-glit { background-image: radial-gradient(circle, rgba(255,255,255,.95) 0 .6px, transparent 1.1px), radial-gradient(circle, rgba(255,255,255,.8) 0 .5px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.9) 0 .7px, transparent 1.2px);
  background-size: 13px 11px, 17px 19px, 23px 29px; background-position: 0 3px, 5px 0, 11px 7px; mix-blend-mode: overlay; opacity: calc(var(--fo) * .55);
  -webkit-mask-image: radial-gradient(70% 90% at var(--gx) var(--gy), #000 0%, rgba(0,0,0,.15) 70%); mask-image: radial-gradient(70% 90% at var(--gx) var(--gy), #000 0%, rgba(0,0,0,.15) 70%); }
.gc-ct { position: absolute; inset: 0; padding: 1.8em 2em 1.6em; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; z-index: 1; }
.gc-top { display: flex; align-items: center; gap: .9em; min-width: 0; }
.gc-logo { width: 2.4em; height: 2.4em; flex-shrink: 0; display: block; fill: currentColor; }
.gc-mono { display: grid; place-items: center; border-radius: .55em; box-shadow: inset 0 0 0 .12em currentColor; font: 700 .95em/1 var(--g-sans); letter-spacing: -.02em; }
.gc-brand { font: 600 1.4em/1.1 var(--g-sans); letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gc-seal { position: relative; margin-left: auto; width: 3.8em; height: 2.8em; border-radius: .6em; overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 1.5px rgba(0,0,0,.18);
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 1px, rgba(255,255,255,0) 1px 2.6px), linear-gradient(var(--ang), hsl(350,90%,74%) 0%, hsl(45,95%,70%) 22%, hsl(140,80%,68%) 44%, hsl(200,95%,72%) 66%, hsl(275,85%,76%) 88%, hsl(350,90%,74%) 100%), #C9CDD3;
  background-size: 100% 100%, 300% 300%, 100% 100%; background-position: center, var(--bx) var(--by), center; }
.gc-seal::after { content: 'G'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.4em/1 var(--g-sans); color: rgba(255,255,255,.9); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.gc-mid { display: grid; gap: .3em; }
.gc-den { font: 700 5.4em/1 var(--g-sans); letter-spacing: -.035em; white-space: nowrap; }
.gc-den.md { font-size: 4.4em; letter-spacing: -.03em; }
.gc-den.sm { font-size: 3.5em; letter-spacing: -.02em; }
.gc-den.xs { font-size: 2.5em; letter-spacing: -.015em; white-space: normal; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-unit, .gc-extra { font: 600 1em/1.2 var(--g-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.gc-bot { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.gc-chip { font: 600 1em/1 var(--g-mono); letter-spacing: .08em; padding: .6em .9em .5em; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.gc-micro { font: 500 .8em/1 var(--g-mono); letter-spacing: .14em; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-spec { background: linear-gradient(calc(var(--ang) - 30deg), rgba(255,255,255,0) 43%, rgba(255,255,255,.75) 49.5%, rgba(255,255,255,0) 56%); background-size: 300% 300%; background-position: var(--bx) var(--by); mix-blend-mode: soft-light; }
.gc-glare { background: radial-gradient(farthest-corner circle at var(--gx) var(--gy), rgba(255,255,255,.8) 0%, rgba(255,255,255,.25) 24%, rgba(0,0,0,.2) 80%); mix-blend-mode: soft-light; }
.gc-shade { background: rgba(20,18,14,var(--sh)); mix-blend-mode: multiply; }

/* фольга: серебро */
.v-silver { --mf: .38; }
.v-silver .e1, .v-holo .e1 { background: #6F757E; } .v-silver .e2, .v-holo .e2 { background: #959BA4; } .v-silver .e3, .v-holo .e3 { background: #BDC2C8; }
.v-silver .gc-base { background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.04) 1px 2px, transparent 2px 3px), linear-gradient(118deg, #A9AFB8 0%, #ECEEF1 22%, #8D949E 46%, #DDE0E5 68%, #9AA1AA 100%); }
.v-silver .gc-guil, .v-holo .gc-guil { background: repeating-radial-gradient(circle at 112% 128%, transparent 0 .6em, rgba(20,21,25,.07) .6em .67em), repeating-radial-gradient(circle at -14% -30%, transparent 0 .6em, rgba(255,255,255,.22) .6em .67em); }
.v-silver .gc-foil { mix-blend-mode: hard-light; opacity: calc(var(--fo) * .7); }
.v-silver .gc-band { mix-blend-mode: hard-light; opacity: calc(var(--fo) * .75); }
/* полная голограмма */
.v-holo { --mf: .7; }
.v-holo .gc-base { background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.04) 1px 2px, transparent 2px 3px), linear-gradient(118deg, #B4BAC2 0%, #F1F3F5 22%, #959CA6 46%, #E6E9ED 68%, #A2A9B2 100%); }
.v-holo .gc-foil { mix-blend-mode: hard-light; opacity: calc(var(--fo) * .95); }
.v-holo .gc-band { mix-blend-mode: hard-light; opacity: calc(var(--fo) * .9); }
/* графит */
.v-graphite { --mf: .04; color: #F2F1EC; }
.v-graphite .e1 { background: #050506; } .v-graphite .e2 { background: #17181B; } .v-graphite .e3 { background: #2C2E33; }
.v-graphite .gc-base { background: radial-gradient(130% 150% at 0% 0%, #3A3D45 0%, #1C1D22 45%, #0D0E11 100%); }
.v-graphite .gc-guil { background: repeating-radial-gradient(circle at 112% 128%, transparent 0 .6em, rgba(255,255,255,.05) .6em .67em), repeating-radial-gradient(circle at -14% -30%, transparent 0 .6em, rgba(255,255,255,.035) .6em .67em); }
.v-graphite .gc-foil { mix-blend-mode: screen; opacity: calc(var(--fo) * .3); filter: saturate(1.05) brightness(.9); }
.v-graphite .gc-band { mix-blend-mode: color-dodge; opacity: calc(var(--fo) * .56); filter: brightness(.8) saturate(1.1); }
.v-graphite .gc-emb { opacity: .16; mix-blend-mode: screen; }
.v-graphite .gc-den { text-shadow: 0 1px 0 rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.14); }
/* жемчуг */
.v-pearl { --mf: .1; }
.v-pearl .e1 { background: #C6C0B5; } .v-pearl .e2 { background: #D8D3CA; } .v-pearl .e3 { background: #EAE6DF; }
.v-pearl .gc-base { background: linear-gradient(125deg, #FFFFFF 0%, #F4F2EE 40%, #E9E5DE 72%, #FAF9F6 100%); }
.v-pearl .gc-guil { background: repeating-radial-gradient(circle at 112% 128%, transparent 0 .6em, rgba(20,21,25,.045) .6em .67em), repeating-radial-gradient(circle at -14% -30%, transparent 0 .6em, rgba(20,21,25,.03) .6em .67em); }
.v-pearl .gc-foil { mix-blend-mode: multiply; filter: saturate(.7) brightness(1.1); opacity: calc(var(--fo) * .36); }
.v-pearl .gc-band { mix-blend-mode: multiply; opacity: calc(var(--fo) * .42); filter: saturate(.8) brightness(1.06); }
.v-pearl .gc-emb { color: #8C877E; mix-blend-mode: multiply; opacity: .2; }
.v-silver .gc-den, .v-pearl .gc-den, .v-holo .gc-den, .v-aurora .gc-den, .v-gold .gc-den { text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.16); }
/* подписка: «аврора» — пастель с оттенком сервиса */
.v-aurora { --mf: .45; }
.v-aurora .e1 { background: #8E8AA0; } .v-aurora .e2 { background: #B3AFC4; } .v-aurora .e3 { background: #D6D3E2; }
.v-aurora .gc-base { background: radial-gradient(90% 120% at 100% 0%, hsl(var(--hue) 70% 82% / .9), transparent 60%), radial-gradient(80% 110% at 0% 100%, hsl(calc(var(--hue) + 140) 65% 84% / .8), transparent 60%), linear-gradient(120deg, #F6F5FA 0%, #E9E7F1 45%, #F7F6FB 100%); }
.v-aurora .gc-guil { background: repeating-linear-gradient(135deg, transparent 0 .9em, rgba(20,21,25,.05) .9em .97em), repeating-radial-gradient(circle at 50% 120%, transparent 0 .7em, rgba(255,255,255,.35) .7em .77em); }
.v-aurora .gc-foil { mix-blend-mode: soft-light; opacity: calc(var(--fo) * .9); }
.v-aurora .gc-band { mix-blend-mode: overlay; opacity: calc(var(--fo) * .6); }
.v-aurora .gc-emb { color: #6E6880; mix-blend-mode: multiply; opacity: .16; }
/* игровая валюта: тёплое голографическое золото */
.v-gold { --mf: .3; color: #1E160A; }
.v-gold .e1 { background: #7A5A22; } .v-gold .e2 { background: #A27D3B; } .v-gold .e3 { background: #CDAA62; }
.v-gold .gc-base { background: radial-gradient(70% 90% at 92% 8%, hsl(var(--hue) 75% 70% / .55), transparent 62%), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.035) 1px 2px, transparent 2px 3px), linear-gradient(118deg, #C9A86A 0%, #F4E4BD 22%, #BC9757 46%, #EFDDAE 68%, #C6A262 100%); }
.v-gold .gc-guil { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 .5em, rgba(80,52,10,.08) .5em .56em); }
.v-gold .gc-foil { mix-blend-mode: soft-light; opacity: calc(var(--fo) * .85); }
.v-gold .gc-band { mix-blend-mode: overlay; opacity: calc(var(--fo) * .7); }
.v-gold .gc-emb { color: #5A3E0E; mix-blend-mode: multiply; opacity: .14; }
.v-gold .gc-chip { border-color: rgba(30,22,10,.7); }

/* формы карт по виду товара */
.k-wallet .gc-face, .k-wallet .gc-edge {    /* пополнение — ваучер с отрывным корешком */
  -webkit-mask: radial-gradient(circle at 74% 0, transparent 1em, #000 1.05em) top / 100% 51% no-repeat, radial-gradient(circle at 74% 100%, transparent 1em, #000 1.05em) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 74% 0, transparent 1em, #000 1.05em) top / 100% 51% no-repeat, radial-gradient(circle at 74% 100%, transparent 1em, #000 1.05em) bottom / 100% 51% no-repeat; }
.gc-perf { position: absolute; top: 1.3em; bottom: 1.3em; left: 74%; border-left: .16em dashed rgba(20,21,25,.32); z-index: 2; }
.v-graphite .gc-perf { border-left-color: rgba(255,255,255,.34); }
.gc-perf span { position: absolute; left: 50%; top: 50%; width: 15em; text-align: center; transform: translate(calc(-50% + 4.1em), -50%) rotate(-90deg); font: 600 .78em/1 var(--g-mono); letter-spacing: .18em; white-space: nowrap; opacity: .75; }
.k-wallet .gc-ct { right: 26%; padding-right: 1.4em; }
.k-wallet .gc-seal { display: none; }
.k-wallet .gc-emb { right: -1em; opacity: .3; }
.k-sub .gc-face, .k-sub .gc-edge {            /* подписка — пропуск с прорезью под шнурок */
  -webkit-mask: radial-gradient(1.1em 1.1em at 88.5% 2.6em, transparent 98%, #000 100%); mask: radial-gradient(1.1em 1.1em at 88.5% 2.6em, transparent 98%, #000 100%); }
.gc-hole { position: absolute; left: calc(88.5% - 1.55em); top: calc(2.6em - 1.55em); width: 3.1em; height: 3.1em; border-radius: 50%; box-shadow: inset 0 0 0 .22em rgba(255,255,255,.75), 0 0 0 .1em rgba(20,21,25,.1); z-index: 2; }
.k-sub .gc-top { padding-right: 3.6em; }
.k-currency .gc-face, .k-currency .gc-edge {  /* игровая валюта — жетон со скошенными углами */
  border-radius: .5em; clip-path: polygon(2em 0, calc(100% - 2em) 0, 100% 2em, 100% calc(100% - 2em), calc(100% - 2em) 100%, 2em 100%, 0 calc(100% - 2em), 0 2em); }
.k-currency .gc-face::after { border-radius: .5em; box-shadow: inset 0 0 0 .5em rgba(255,255,255,.18), inset 0 0 0 .6em rgba(80,52,10,.12); }
.k-currency .gc-emb { right: -2em; top: -1.6em; width: 21em; height: 21em; }

/* плитка-миниатюра: размер карты задаёт ширина контейнера */
.g-tile-card, .g-slot-gc, .g-oitem-card, .g-orow-card, .g-env-c, .g-note-card, .g-404-card { container-type: inline-size; display: block; }
.g-tile-card .gc, .g-slot-gc .gc, .g-oitem-card .gc, .g-orow-card .gc, .g-env-c .gc, .g-404-card .gc { font-size: 3.125cqi; }

@media (prefers-reduced-motion: reduce) {
  .g-mark, .g-strip, .g-ring { animation: none !important; }
  .g-btn, .g-tab, .g-lot, .g-tile-card .gc { transition: none !important; }
}

/* ================================================= ГЛАВНАЯ */
.g-hero { position: relative; padding-top: 30px; text-align: center; --k: 1; --lw: 217px; }
@media (max-width: 1320px) { .g-hero { --k: .92; } }
@media (max-width: 1100px) { .g-hero { --k: .8; } }
@media (max-width: 899px) { .g-hero { --k: .6; --lw: 205px; } .g-lots .g-lot-1, .g-lots .g-lot-5 { display: none; } }
@media (max-width: 520px) { .g-hero { --k: .49; } }
.g-hero-bg { position: absolute; left: 0; right: 0; top: -88px; height: 1240px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 48% 29% at 50% 40%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 72%), linear-gradient(180deg, #F7F6F2 0%, #F3F1EC 37%, #EEEBE5 50%, #E8E4DC 60%, #E4E0D7 72%, #E7E3DC 82%, #F3F1EC 100%); }
.g-hero-head { position: relative; z-index: 2; padding: 0 16px; }
.g-hero .g-h1 { margin: 22px auto 0; max-width: 1200px; }
.g-stage { position: relative; height: calc(560px * var(--k, 1)); margin-top: 0; overflow: hidden; }
.g-stage-in { position: absolute; left: 50%; top: 0; width: 1440px; height: 560px; transform: translateX(-50%) scale(var(--k)); transform-origin: 50% 0; perspective: 1600px; perspective-origin: 50% 12%; }
.g-pivot { position: absolute; left: 720px; top: 170px; width: 0; height: 0; transform-style: preserve-3d; }
.g-fan { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.g-hc { position: absolute; left: 0; top: 0; font-size: 10.6px; margin: -10.1em 0 0 -16em; }
.g-rc .gc-edge, .g-rc .gc-glit, .g-rc .gc-spec, .g-rc .gc-seal { display: none; }
.g-refl { position: absolute; inset: 0; opacity: .55; filter: blur(1.2px); perspective: 1600px; perspective-origin: 50% 12%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0px, transparent 432px, #000 446px, rgba(0,0,0,.6) 500px, transparent 556px);
  mask-image: linear-gradient(180deg, transparent 0px, transparent 432px, #000 446px, rgba(0,0,0,.6) 500px, transparent 556px); }
.g-refl .gc-face::before { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(0deg, rgba(231,227,219,0) 0%, rgba(231,227,219,.7) 34%, #E7E3DB 62%); }
.g-floor { position: absolute; left: -800px; top: -450px; width: 1600px; height: 900px; transform: translateY(280px) rotateX(90deg); transform-style: preserve-3d; }
.g-floor-glow { position: absolute; left: 230px; top: 250px; width: 1140px; height: 420px; background: radial-gradient(closest-side, rgba(70,58,40,.09), rgba(70,58,40,0)); }
.g-floor-sh { position: absolute; left: 630px; top: 310px; width: 340px; height: 280px; background: radial-gradient(closest-side, rgba(52,43,30,.3) 0%, rgba(52,43,30,.13) 50%, rgba(52,43,30,0) 100%); }
.g-caus-wrap { position: absolute; inset: 0; }
.g-caus { position: absolute; border-radius: 50%; background: linear-gradient(90deg, rgba(255,110,110,0) 0%, rgba(255,128,104,.75) 13%, rgba(255,206,92,.75) 29%, rgba(150,224,120,.7) 46%, rgba(96,200,250,.7) 63%, rgba(150,130,255,.7) 80%, rgba(240,120,220,0) 100%); filter: blur(7px); opacity: .4; }
/* статичная раскладка веера до запуска скрипта (и без него) */
.g-fan > .gc:nth-child(1) { transform: translate3d(-434.5px, 68.8px, -48px) rotateZ(-18deg); }
.g-fan > .gc:nth-child(2) { transform: translate3d(-220px, 17.3px, -24px) rotateZ(-9deg); }
.g-fan > .gc:nth-child(3) { transform: translate3d(0, 0, 0); }
.g-fan > .gc:nth-child(4) { transform: translate3d(220px, 17.3px, 24px) rotateZ(9deg); }
.g-fan > .gc:nth-child(5) { transform: translate3d(434.5px, 68.8px, 48px) rotateZ(18deg); }
.g-fan[data-fan] { transform: rotateX(7deg); }
.g-lots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 0; margin-top: calc(-52px * var(--k, 1)); }
.g-lot { display: block; width: calc(var(--lw, 217px) * var(--k, 1)); min-height: 64px; box-sizing: border-box; padding: 10px 8px; text-align: center; border-radius: 14px; transition: background .25s; }
.g-lot:hover { background: rgba(255,255,255,.55); color: var(--g-ink); }
.g-lot-cap { display: block; font: 500 10px/1.2 var(--g-mono); letter-spacing: .08em; color: var(--g-mut); text-transform: uppercase; white-space: nowrap; }
.g-lot-sum { display: block; margin-top: 9px; font: 600 17px/1 var(--g-sans); color: var(--g-ink); white-space: nowrap; }
.g-hero-cta { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 26px; padding: 0 16px; }
.g-hero-cta p { margin: 0; width: 470px; font-size: 16px; line-height: 1.55; color: var(--g-mut); text-align: right; }
.g-hero-btns { display: flex; gap: 12px; }
.g-hero-btns svg { flex: none; }

/* конструктор */
.g-build { margin-top: 110px; }
.g-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.g-sec-head p { margin: 0 0 6px; width: 440px; font-size: 16px; line-height: 1.55; color: var(--g-mut); }
.g-build > .g-step-lbl { margin-top: 44px; }
.g-tabs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.g-tab { box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 999px; font: 500 15px/1 var(--g-sans); cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; transition: background .2s, color .2s;
  background: rgba(255,255,255,.5); color: var(--g-text2); box-shadow: inset 0 0 0 1px rgba(20,21,25,.1); }
.g-tab svg { width: 20px; height: 20px; display: block; flex-shrink: 0; fill: currentColor; }
.g-tab-mono { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px currentColor; font: 700 9px/1 var(--g-sans); }
.g-tab:hover { background: #FFFFFF; color: var(--g-ink); }
.g-tab.on { color: #FFFFFF; background: linear-gradient(#141519, #141519) padding-box, var(--g-holo) border-box; box-shadow: none; }
.g-build-grid { margin-top: 28px; display: flex; gap: 48px; align-items: stretch; }
.g-pv { position: relative; width: 700px; flex-shrink: 0; aspect-ratio: 700 / 676; border-radius: 32px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(ellipse 60% 50% at 50% 42%, #FBFAF8 0%, rgba(251,250,248,0) 75%), linear-gradient(180deg, #EFECE6 0%, #E9E5DE 62%, #E1DDD4 100%); box-shadow: inset 0 0 0 1px rgba(20,21,25,.06); }
.g-pv-stage { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 30%; }
.g-pv-sh { position: absolute; left: 21.4%; top: 76.9%; width: 57.1%; height: 9.5%; background: radial-gradient(closest-side, rgba(52,43,30,.34), rgba(52,43,30,.12) 55%, rgba(52,43,30,0) 100%); }
.g-pv-card { position: absolute; left: 15.7%; top: 23.7%; width: 68.6%; transform-style: preserve-3d; }
.g-pv-card .gc { font-size: 2.143cqi; transform: rotateX(8deg) rotateY(-10deg); }
.g-pv-cap { position: absolute; left: 32px; right: 32px; bottom: 26px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 500 11px/1.4 var(--g-mono); letter-spacing: .1em; color: var(--g-mut); text-transform: uppercase; }
.g-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-pick .g-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.g-pick .g-chip { min-height: 46px; padding: 0 20px; }
.g-pick-regions + .g-step-lbl { margin-top: 30px; }
.g-noms { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.g-nom { box-sizing: border-box; min-height: 76px; padding: 12px 16px; border-radius: 16px; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 8px; transition: background .2s, border-color .2s;
  background: rgba(255,255,255,.55); color: var(--g-ink); border: 1px solid rgba(20,21,25,.12); font-family: var(--g-sans); }
.g-nom:hover { background: #FFFFFF; border-color: rgba(20,21,25,.35); }
.g-nom.on { background: var(--g-ink); color: #FFFFFF; border-color: var(--g-ink); }
.g-nl { display: block; font: 600 21px/1 var(--g-sans); letter-spacing: -.01em; white-space: nowrap; }
.g-np { display: block; font: 500 13px/1.2 var(--g-sans); color: var(--g-mut); }
.g-nom.on .g-np { color: #D9D6CF; }
.g-pick-gap { flex: 1; min-height: 24px; }
.g-sum { position: relative; border-radius: 24px; background: #FFFFFF; padding: 26px 26px 22px; box-shadow: var(--g-shadow); }
.g-sum-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.g-sum-line { font-size: 14px; line-height: 1.3; color: var(--g-mut); text-align: right; }
.g-sum-price { margin-top: 12px; font: 600 52px/1 var(--g-sans); letter-spacing: -.035em; }
.g-sum-form { margin-top: 18px; display: grid; gap: 10px; }
.g-sum-form .g-ink { min-height: 58px; font-size: 17px; }
.g-sum-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--g-mut); }
.g-sum-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.g-sum.is-flash { animation: gPulse .6s ease; }
@keyframes gPulse { 0% { box-shadow: var(--g-shadow), 0 0 0 0 rgba(140,200,245,.6); } 100% { box-shadow: var(--g-shadow), 0 0 0 18px rgba(140,200,245,0); } }

/* полки разделов */
.g-shelf { margin-top: 120px; }
.g-shelf-head { display: flex; align-items: flex-end; gap: 32px; justify-content: space-between; }
.g-shelf-head p { margin: 0 0 4px; max-width: 520px; color: var(--g-mut); font-size: 16px; line-height: 1.55; }
.g-shelf-head .g-btn { flex: none; }
.g-shelf-row { margin-top: 30px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }

/* как получить код */
.g-how { margin-top: 120px; }
.g-steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(20,21,25,.14); }
.g-stepc { padding: 34px 40px 8px 0; }
.g-stepc + .g-stepc { padding-left: 40px; border-left: 1px solid rgba(20,21,25,.14); }
.g-stepc-top { display: flex; align-items: flex-start; justify-content: space-between; color: var(--g-ink); }
.g-stepc-no { font: 300 96px/.8 var(--g-sans); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.2px var(--g-ink); }
.g-stepc h3 { margin: 34px 0 0; font: 600 26px/1.15 var(--g-sans); letter-spacing: -.02em; }
.g-stepc p { margin: 12px 0 0; max-width: 330px; font-size: 16px; line-height: 1.55; color: var(--g-mut); }
.g-note { margin-top: 56px; display: flex; align-items: center; gap: 56px; border-radius: 32px; padding: 40px 48px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(20,21,25,.04), 0 24px 60px rgba(60,50,35,.08); }
.g-note-card { position: relative; width: 320px; flex-shrink: 0; perspective: 900px; padding-bottom: 26px; }
.g-note-card .gc { font-size: 3.125cqi; transform: rotateX(8deg) rotateY(-12deg); --ang: 96deg; --bx: 34%; --by: 40%; --gx: 30%; --gy: 22%; --fo: .85; }
.g-ring { position: absolute; left: 1.25cqi; top: 47.2cqi; width: calc(18.7cqi + var(--chars, 6) * 2.33cqi); height: 14.4cqi; border-radius: 999px; box-sizing: border-box; border: 2px solid transparent; background: linear-gradient(100deg, hsl(350,90%,66%), hsl(45,95%,58%), hsl(140,75%,50%), hsl(200,95%,60%), hsl(275,85%,68%)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gRing 2.6s ease-in-out infinite; }
@keyframes gRing { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.06); opacity: .6; } }
.g-note-cap { position: absolute; left: 18px; bottom: 0; font: 500 11px/1 var(--g-mono); letter-spacing: .12em; color: var(--g-mut); white-space: nowrap; text-transform: uppercase; }
.g-note-big { margin: 16px 0 0; max-width: 760px; font: 600 30px/1.22 var(--g-sans); letter-spacing: -.025em; }
.g-note-small { margin: 16px 0 0; max-width: 700px; font-size: 16px; line-height: 1.55; color: var(--g-mut); }

/* ================================================= ПЛИТКИ КАТАЛОГА */
.grid.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 40px 24px; margin-top: 30px; }
.g-tile { display: flex; flex-direction: column; min-width: 0; }
.g-tile-link { display: flex; flex-direction: column; gap: 0; color: var(--g-ink); }
.g-tile-card { position: relative; perspective: 900px; border-radius: 1.5em; }
.g-tile-card .gc { width: 100%; height: auto; aspect-ratio: 32 / 20.2; transition: transform .35s cubic-bezier(.2,.7,.2,1); box-shadow: 0 1.4em 2.6em -1em rgba(52,43,30,.28); border-radius: 1.5em; }
.g-tile-card .gc.k-currency { border-radius: .6em; box-shadow: none; filter: drop-shadow(0 1.1em 1.4em rgba(52,43,30,.22)); }
.g-tile-card .gc.k-wallet { box-shadow: none; filter: drop-shadow(0 1.1em 1.4em rgba(52,43,30,.22)); }
.g-tile-link:hover .gc { transform: translateY(-4px) rotateX(4deg); }
.g-tile-name { margin-top: 16px; font: 500 15px/1.35 var(--g-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-tile-link:hover .g-tile-name { text-decoration: underline; text-underline-offset: 3px; }
.g-tile-sub { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--g-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-tile-buy { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.g-tile-price { font: 600 19px/1 var(--g-sans); letter-spacing: -.01em; white-space: nowrap; }
.g-tile-price s { font-size: 13px; font-weight: 400; color: var(--g-mut); margin-left: 4px; }
.g-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--g-line2); background: rgba(255,255,255,.6); color: var(--g-ink); font: 500 14px/1 var(--g-sans); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.g-add svg { width: 16px; height: 16px; }
.g-add:hover { background: var(--g-ink); color: #FFFFFF; border-color: var(--g-ink); }
.g-add.is-done { background: var(--g-ink); color: #FFFFFF; border-color: var(--g-ink); }
.ld-more-wrap { display: flex; justify-content: center; margin: 40px 0 10px; }
.ld-more-wrap .btn { min-width: 280px; background: transparent; color: var(--g-ink); border: 1px solid var(--g-line2); }
.ld-more-wrap .btn:hover { border-color: var(--g-ink); }

/* ================================================= РАЗДЕЛ, ПОИСК */
.g-pagehead { position: relative; padding: 30px 0 6px; }
.g-pagehead.has-fan { min-height: 300px; }
.g-pagehead > :not(.g-phfan) { position: relative; z-index: 1; }
.g-phfan { position: absolute; right: 10px; top: 46px; width: 470px; height: 260px; perspective: 1100px; pointer-events: none; }
.g-phf { position: absolute; width: 280px; container-type: inline-size; }
.g-phf .gc { width: 100%; height: auto; aspect-ratio: 32 / 20.2; font-size: 3.125cqi; border-radius: 1.5em; box-shadow: 0 24px 40px -18px rgba(52,43,30,.4); }
.g-phf .gc.k-currency, .g-phf .gc.k-wallet { box-shadow: none; filter: drop-shadow(0 16px 18px rgba(52,43,30,.25)); }
.g-phf-1 { left: 0; top: 70px; transform: rotateY(18deg) rotateZ(-10deg); }
.g-phf-2 { left: 170px; top: 92px; transform: rotateY(-14deg) rotateZ(8deg); }
.g-phf-3 { left: 84px; top: 0; transform: rotateX(10deg) rotateZ(-2deg); }
.g-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--g-mut); margin-bottom: 18px; }
.g-crumbs a { color: var(--g-mut); display: inline-flex; align-items: center; min-height: 44px; }
.g-crumbs a:hover { color: var(--g-ink); }
.g-crumbs span:last-child { color: var(--g-text2); }
/* лоток «Ещё N» привязан к ряду, а не к кнопке: кнопка бывает у правого края, и лоток уезжал за экран
   (на «Игровой валюте» 17 из 37 игр было не видно и не нажать, 04.10.2026) */
.g-brandbar { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; align-items: flex-start; }
.g-more-brands { position: static; }
.g-more-brands summary { list-style: none; }
.g-more-brands summary::-webkit-details-marker { display: none; }
.g-more-brands[open] summary { background: var(--g-ink); color: #FFFFFF; border-color: var(--g-ink); }
.g-more-brands-list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; width: auto; max-height: 360px; overflow: auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 30px 70px rgba(60,50,35,.2), inset 0 0 0 1px var(--g-line); }
.g-tools { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 28px; padding-top: 22px; border-top: 1px solid var(--g-line); }
.g-sort { display: flex; flex-wrap: wrap; gap: 8px; }
.g-pricepick { flex: 0 1 560px; padding: 0; margin: 0; background: none; border: 0; }
.g-pricepick .pricepick-input { flex: none; max-width: none; }
.g-pricepick-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.g-pricepick-label { font-size: 14px; font-weight: 500; color: var(--g-text2); }
.pricepick-input { position: relative; display: inline-flex; align-items: center; }
.pricepick-input input { box-sizing: border-box; width: 170px; height: 44px; border-radius: 999px; border: 1px solid rgba(20,21,25,.18); background: #FFFFFF; color: var(--g-ink); padding: 0 34px 0 18px; font: 500 15px var(--g-sans); outline: none; }
.pricepick-input input:focus { border-color: var(--g-ink); }
.pricepick-cur { position: absolute; right: 14px; color: var(--g-mut); font-weight: 500; }
.pricepick-range { width: 100%; margin: 14px 0 0; accent-color: var(--g-ink); display: block; }
.pricepick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-price { min-height: 44px; padding: 0 14px; font-size: 13px; }
.pick-title.g-picktitle { font: 600 26px/1.15 var(--g-sans); letter-spacing: -.02em; margin: 36px 0 0; color: var(--g-ink); }
.pick-title span { color: var(--g-mut); font: 400 15px var(--g-sans); letter-spacing: 0; }
.g-bigsearch { position: relative; display: flex; align-items: center; gap: 10px; max-width: 720px; height: 64px; margin-top: 22px; padding: 0 8px 0 22px; border-radius: 999px; background: #FFFFFF; box-shadow: var(--g-shadow), inset 0 0 0 1px var(--g-line); }
.g-bigsearch > svg { width: 22px; height: 22px; color: var(--g-mut); flex: none; }
.g-bigsearch input { flex: 1; min-width: 0; align-self: stretch; min-height: 44px; border: 0; background: transparent; font: 400 17px var(--g-sans); color: var(--g-ink); outline: none; }
.g-empty { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 70px 16px; }
.g-empty b { font: 600 24px/1.2 var(--g-sans); letter-spacing: -.02em; }
.g-empty p { max-width: 520px; color: var(--g-mut); margin: 0; }
.g-empty-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.g-othercats { margin-top: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.g-othercat { display: grid; gap: 6px; padding: 22px 24px; border-radius: 22px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--g-line); transition: background .2s, box-shadow .2s; }
.g-othercat b { font: 600 19px/1.15 var(--g-sans); letter-spacing: -.01em; }
.g-othercat span { font-size: 14px; color: var(--g-mut); }
.g-othercat:hover { background: #FFFFFF; box-shadow: var(--g-shadow); }

/* ================================================= ТОВАР */
.g-crumbs-pdp { margin-top: 26px; }
.g-pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.g-pdp-stage { position: sticky; top: 104px; }
.g-pdp-studio { position: relative; aspect-ratio: 700 / 560; border-radius: 32px; overflow: hidden; container-type: inline-size; perspective: 1400px; perspective-origin: 50% 30%;
  background: radial-gradient(ellipse 60% 50% at 50% 42%, #FBFAF8 0%, rgba(251,250,248,0) 75%), linear-gradient(180deg, #EFECE6 0%, #E9E5DE 62%, #E1DDD4 100%); box-shadow: inset 0 0 0 1px rgba(20,21,25,.06); }
.g-pdp-sh { position: absolute; left: 20%; top: 79%; width: 60%; height: 11%; background: radial-gradient(closest-side, rgba(52,43,30,.34), rgba(52,43,30,.12) 55%, rgba(52,43,30,0) 100%); }
.g-pdp-card { position: absolute; left: 14%; top: 18%; width: 72%; transform-style: preserve-3d; }
.g-pdp-card .gc { font-size: 2.25cqi; transform: rotateX(8deg) rotateY(-12deg); }
.g-pdp-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 0 8px; font: 500 11px/1.4 var(--g-mono); letter-spacing: .1em; color: var(--g-mut); }
.g-pdp-info { padding-top: 8px; display: grid; gap: 22px; }
.g-pdp-title { font-size: clamp(34px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.04em; margin-top: -8px; overflow-wrap: anywhere; }
.g-pdp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.g-pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.g-pdp-price-note { font-size: 14px; color: var(--g-mut); }
.g-region-note { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-holo) border-box; border: 1.5px solid transparent; }
.g-region-note p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--g-text2); }
.g-region-note b { color: var(--g-ink); font-weight: 600; }
.g-region-dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--g-holo); box-shadow: 0 0 0 4px rgba(140,200,245,.18); }
.g-pdp-buy { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; align-items: end; }
.g-qty { display: grid; gap: 6px; font-size: 13px; color: var(--g-text2); font-weight: 500; }
.g-qty input { width: 86px; min-height: 52px; text-align: center; padding: 0 8px; border-radius: 999px; }
.g-pdp-buy .g-btn { min-height: 52px; }
.g-out { padding: 16px 18px; border-radius: 16px; background: #FFFFFF; color: var(--g-text2); box-shadow: inset 0 0 0 1px var(--g-line); }
.g-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--g-line); }
.g-facts div { padding: 14px 0; border-bottom: 1px solid var(--g-line); }
.g-facts div:nth-child(odd) { padding-right: 16px; }
.g-facts div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--g-line); }
.g-facts dt { font: 500 11px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g-mut); }
.g-facts dd { margin: 8px 0 0; font-size: 15px; font-weight: 500; }
.g-pdp-desc h2 { font: 600 20px/1.2 var(--g-sans); letter-spacing: -.01em; }
.g-pdp-desc p { margin: 10px 0 0; color: var(--g-text2); line-height: 1.6; white-space: pre-line; }
.g-pdp-ask { padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--g-line); }
.g-pdp-more { margin-top: 90px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; }
.g-timeline { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: t; }
.g-timeline li { counter-increment: t; display: grid; gap: 8px; align-content: start; padding-top: 34px; border-top: 1px solid rgba(20,21,25,.14); position: relative; }
.g-timeline li::before { content: counter(t, decimal-leading-zero); position: absolute; top: 12px; left: 0; font: 500 11px/1 var(--g-mono); letter-spacing: .16em; color: var(--g-mut); }
.g-timeline b { font: 600 18px/1.2 var(--g-sans); }
.g-timeline span { font-size: 14px; line-height: 1.55; color: var(--g-mut); }
.g-review { padding: 14px 0; border-top: 1px solid var(--g-line); display: grid; gap: 4px; }
.g-review p { margin: 4px 0 0; color: var(--g-text2); }
#reviews .mut { margin-top: 16px; }
.g-related { margin-top: 90px; }
.g-related .g-shelf-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ================================================= КОРЗИНА — «кошелёк с картами» */
.g-wallet-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; margin-top: 30px; }
.g-wallet { position: relative; padding: 18px; border-radius: 36px; background: linear-gradient(180deg, #E9E5DE, #E2DDD3); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(20,21,25,.06); display: grid; gap: 14px; }
.g-wallet::before { content: ''; position: absolute; inset: 8px; border-radius: 30px; border: 1.5px dashed rgba(20,21,25,.14); pointer-events: none; }
.g-slot { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 16px 26px 16px 16px; border-radius: 26px; background: rgba(255,255,255,.66); box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(60,50,35,.08); }
.g-slot-card { position: relative; display: block; height: 150px; overflow: hidden; border-radius: 18px; }
.g-slot-gc { position: absolute; left: 14px; right: 14px; top: 10px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.g-slot-gc .gc { width: 100%; height: auto; aspect-ratio: 32 / 20.2; }
.g-slot-card:hover .g-slot-gc { transform: translateY(-6px); }
.g-slot-pocket { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, rgba(236,232,224,.94), rgba(225,220,210,.99)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,21,25,.06), 0 -6px 14px rgba(60,50,35,.1); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.g-slot-pocket::after { content: ''; position: absolute; left: 14px; right: 14px; top: 10px; border-top: 1.5px dashed rgba(20,21,25,.16); }
.g-slot-info { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.g-slot-reg { min-height: 28px; font-size: 12.5px; }
.g-slot-time { font-size: 13px; color: var(--g-text2); }
.g-slot-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.g-slot-title { font: 600 17px/1.3 var(--g-sans); letter-spacing: -.01em; }
.g-slot-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-slot-sub, .g-slot-unit { font-size: 13.5px; color: var(--g-mut); }
.g-slot-qty { display: flex; align-items: center; gap: 8px; }
.g-slot-qty input { width: 76px; min-height: 44px; text-align: center; padding: 0 6px; border-radius: 999px; }
.g-slot-sum { font: 600 24px/1 var(--g-sans); letter-spacing: -.02em; white-space: nowrap; min-width: 110px; text-align: right; align-self: center; }
.g-rm { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--g-mut); font: 500 13.5px var(--g-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.g-rm:hover { color: var(--g-red); }
.g-wallet-total { position: sticky; top: 104px; display: grid; gap: 12px; padding: 28px; border-radius: 28px; background: #FFFFFF; box-shadow: var(--g-shadow); }
.g-total-sum { font: 600 52px/1 var(--g-sans); letter-spacing: -.035em; margin-top: 4px; }
.g-total-meta { color: var(--g-mut); font-size: 14px; margin-bottom: 6px; }
.g-wallet-ghost { position: relative; width: 240px; height: 150px; border-radius: 28px; background: linear-gradient(180deg, #E9E5DE, #E2DDD3); box-shadow: inset 0 0 0 1px rgba(20,21,25,.06); margin-bottom: 10px; }
.g-wallet-ghost::before { content: ''; position: absolute; inset: 7px; border-radius: 22px; border: 1.5px dashed rgba(20,21,25,.16); }
.g-wallet-ghost-pocket { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; border-radius: 0 0 28px 28px; background: rgba(255,255,255,.55); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95); }

/* ================================================= ОФОРМЛЕНИЕ — «конверт» */
.g-env { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 30px; }
.g-env-side { position: sticky; top: 104px; display: grid; gap: 16px; padding: 26px; border-radius: 28px; background: #FFFFFF; box-shadow: var(--g-shadow); }
.g-envelope { position: relative; height: 230px; margin: 8px 6px 6px; }
.g-env-back { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; border-radius: 16px; background: linear-gradient(180deg, #E4DFD6, #D9D3C8); }
.g-env-back::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 100px; background: linear-gradient(180deg, #D3CCBF, #DCD6CB); clip-path: polygon(0 0, 100% 0, 50% 95%); border-radius: 16px 16px 0 0; }
.g-env-cards { position: absolute; left: 0; right: 0; bottom: 70px; height: 150px; }
.g-env-c { position: absolute; left: 50%; bottom: 0; width: 66%; transform-origin: 50% 100%; }
.g-env-c .gc { width: 100%; height: auto; aspect-ratio: 32 / 20.2; box-shadow: 0 10px 20px rgba(52,43,30,.18); border-radius: 1.5em; }
.g-env-c1 { transform: translateX(-50%) rotate(-7deg) translateX(-14%); }
.g-env-c2 { transform: translateX(-50%) rotate(6deg) translateX(14%); }
.g-env-c3 { transform: translateX(-50%) translateY(-6%); }
.g-env-front { position: absolute; left: 0; right: 0; bottom: 0; height: 122px; border-radius: 16px; background: linear-gradient(180deg, #F1EEE8 0%, #E8E3DA 100%); clip-path: polygon(0 26%, 50% 62%, 100% 26%, 100% 100%, 0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.g-env-front::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%); }
.g-env-front span { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 500 10.5px/1 var(--g-mono); letter-spacing: .16em; color: var(--g-mut); text-transform: uppercase; }
.g-env-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-env-list li { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; }
.g-env-list li span { color: var(--g-text2); }
.g-env-list li small { display: block; margin-top: 2px; font-size: 12px; color: var(--g-mut); }
.g-env-list li b { font-weight: 600; white-space: nowrap; }
.g-env-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px dashed var(--g-line2); }
.g-env-total span { font-size: 14px; color: var(--g-mut); }
.g-env-total b { font: 600 34px/1 var(--g-sans); letter-spacing: -.03em; }
.g-env-edit { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.g-env-main { display: grid; gap: 18px; padding: 32px; border-radius: 28px; background: #FFFFFF; box-shadow: var(--g-shadow); }
.g-env-email { margin: 0; font-size: 18px; line-height: 1.45; }
.g-fld { margin: 0; }
.g-terms { display: grid; gap: 8px; padding: 18px 20px; border-radius: 18px; background: var(--g-bg); font-size: 14px; line-height: 1.55; color: var(--g-text2); }
.g-terms p { margin: 0; }
.g-terms b { color: var(--g-ink); font-weight: 600; }
.g-terms a, .fld-consent a { color: var(--g-ink); text-decoration: underline; text-underline-offset: 2px; }
.fld-consent { display: block; font-size: 14px; line-height: 1.55; color: var(--g-text2); cursor: pointer; }
.fld-consent input { float: left; width: 22px; height: 22px; margin: 1px 12px 0 0; accent-color: var(--g-ink); }
.fld-consent span { display: block; overflow: hidden; }
.g-env-submit { min-height: 60px; font-size: 17px; }
.g-env-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: n; }
.g-env-next li { position: relative; padding-left: 34px; font-size: 14px; color: var(--g-mut); counter-increment: n; line-height: 1.5; }
.g-env-next li::before { content: counter(n); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--g-line2); font: 600 11px/22px var(--g-mono); text-align: center; color: var(--g-ink); }
.g-env-pay { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ================================================= ЗАКАЗ — «конверт отправлен» */
.g-order-tl { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 12px; }
.g-order-tl li { width: 200px; display: grid; gap: 8px; padding-top: 12px; border-top: 3px solid rgba(20,21,25,.14); font-size: 13.5px; color: var(--g-mut); }
.g-order-tl li b { font: 500 11px/1 var(--g-mono); letter-spacing: .16em; }
.g-order-tl li.now { border-image: var(--g-holo) 1; color: var(--g-ink); }
.g-order-tl li.done { border-color: var(--g-ink); color: var(--g-ink); }
.order-wrap.g-receipt { max-width: none; margin: 30px 0 0; display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 32px; align-items: start; }
.g-receipt-side { position: relative; display: grid; gap: 0; padding: 26px; border-radius: 28px; background: #FFFFFF; box-shadow: var(--g-shadow); }
.g-receipt-side::before { content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 6px; border-radius: 0 0 6px 6px; background: var(--g-holo); }
.g-receipt-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; }
.order-product.g-oitem { background: transparent; border: 0; border-top: 1px solid var(--g-line); border-radius: 0; padding: 14px 0; margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.g-oitem-card .gc { width: 100%; height: auto; aspect-ratio: 32 / 20.2; box-shadow: 0 8px 16px rgba(52,43,30,.16); border-radius: 1.5em; }
.g-oitem .pcard-title { font: 600 15px/1.35 var(--g-sans); }
.g-oitem .fine { margin-top: 4px; }
.g-oitem .price { font: 600 16px/1 var(--g-sans); }
.order-bill { display: grid; place-items: center; width: 112px; height: 70px; border-radius: 14px; background: var(--g-bg); color: var(--g-mut); }
.order-bill svg { width: 30px; height: 30px; }
.g-receipt-side .order-total { background: transparent; border: 0; border-top: 1px dashed var(--g-line2); border-radius: 0; padding: 14px 0 0; margin: 0; display: flex; justify-content: space-between; align-items: baseline; }
.g-receipt-side .order-total b { font: 600 30px/1 var(--g-sans); letter-spacing: -.03em; }
.g-receipt-meta { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--g-line); display: grid; gap: 8px; }
.g-receipt-meta div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.g-receipt-meta dt { color: var(--g-mut); }
.g-receipt-meta dd { margin: 0; color: var(--g-ink); overflow-wrap: anywhere; }
.claim-card { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--g-bg); border: 0; }
.g-receipt-main { display: grid; gap: 14px; padding: 30px; border-radius: 28px; background: #FFFFFF; box-shadow: var(--g-shadow); }
.g-receipt-main .pay, .g-receipt-main .wait, .g-receipt-main .pay-none, .g-receipt-main .review-box { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.status { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font: 500 11px/1 var(--g-mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--g-line2); background: transparent; color: var(--g-ink); white-space: nowrap; }
.status-new { color: var(--g-warn); border-color: rgba(138,83,0,.35); background: rgba(230,180,55,.1); }
.status-reported, .status-paid { color: #1F4FA8; border-color: rgba(31,79,168,.3); background: rgba(63,120,220,.07); }
.status-done { color: var(--g-ok); border-color: rgba(28,110,69,.35); background: rgba(35,170,100,.08); }
.status-cancelled { color: var(--g-mut); }
.pay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: start; }
.qr-box { background: #FFFFFF; border-radius: 18px; padding: 10px; box-shadow: inset 0 0 0 1px rgba(20,21,25,.12); }
.steps > li::before { background: var(--g-ink); color: #FFFFFF; border: 0; font: 600 13px/1 var(--g-mono); }
.amount { font: 600 32px/1 var(--g-sans); letter-spacing: -.03em; }
.pay-none { display: grid; gap: 12px; text-align: left; }
.pay-none h2 { font: 600 26px/1.15 var(--g-sans); letter-spacing: -.02em; margin: 0; }
.pay-none p { margin: 0; color: var(--g-text2); line-height: 1.55; }
.g-pay-wait { display: flex; gap: 6px; }
.g-pay-wait span { width: 10px; height: 10px; border-radius: 50%; background: var(--g-holo); animation: gDot 1.2s ease-in-out infinite; }
.g-pay-wait span:nth-child(2) { animation-delay: .15s; } .g-pay-wait span:nth-child(3) { animation-delay: .3s; }
@keyframes gDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.g-pay-contacts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wait { text-align: left; display: grid; gap: 10px; }
.wait h2, .review-box h2 { font: 600 26px/1.15 var(--g-sans); letter-spacing: -.02em; margin: 0; }
.pulse { border-color: var(--g-ink); border-top-color: transparent; }
.bigmark { background: var(--g-ink); color: #FFFFFF; display: grid; place-items: center; }
.bigmark svg { width: 60%; height: 60%; }
.delivery-letter { background: var(--g-bg); border: 0; border-radius: 18px; }
.dl-body { background: #FFFFFF; border: 1px solid var(--g-line); color: var(--g-ink); border-radius: 12px; }
.dl-ico { display: grid; place-items: center; }
.dl-ico svg { width: 22px; height: 22px; }
.review-box { border-top: 1px solid var(--g-line) !important; padding-top: 20px !important; }
.review-box form { justify-items: start; }
.cancel-box { margin-top: 6px; }
.cancel-box summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; }
.cancel-box summary::-webkit-details-marker { display: none; }
.cancel-form { display: grid; gap: 10px; max-width: 520px; }

/* ================================================= КАБИНЕТ, ВХОД, ДОКУМЕНТЫ */
.g-cab { margin: 30px 0 20px; }
.g-cab-head { align-items: flex-end; margin-bottom: 26px; }
.g-cab-head h1 { margin-top: 12px; font: 600 clamp(36px, 4.6vw, 60px)/1 var(--g-sans); letter-spacing: -.04em; }
.g-cab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.cab-stat { display: grid; gap: 6px; padding: 22px; border-radius: 22px; background: #FFFFFF; box-shadow: var(--g-shadow); border: 0; }
.cab-stat b { font: 600 30px/1 var(--g-sans); letter-spacing: -.02em; }
.cab-stat-label { font: 500 11px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g-mut); }
.cab-stat-main { background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-holo) border-box; border: 1.5px solid transparent; }
.g-cab-h2 { margin: 34px 0 16px; }
.g-otable { gap: 10px; }
.tbl-row { background: #FFFFFF; border: 0; border-radius: 20px; box-shadow: 0 1px 0 rgba(20,21,25,.04), 0 8px 20px rgba(60,50,35,.06); }
a.tbl-row:hover { box-shadow: var(--g-shadow); }
.g-orow { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 12px 18px 12px 12px; color: var(--g-ink); }
.g-orow-card .gc { width: 100%; height: auto; aspect-ratio: 32 / 20.2; border-radius: 1.5em; }
.g-orow .tbl-main b { font-weight: 600; }
.g-more-n { color: var(--g-mut); font-weight: 400; }
.g-orow .price { font-size: 17px; }
.tbl-bill { display: grid; place-items: center; width: 104px; height: 66px; border-radius: 12px; background: var(--g-bg); color: var(--g-mut); }
.tbl-bill svg { width: 26px; height: 26px; }

.auth-wrap.g-auth { max-width: 1100px; margin: 40px auto 20px; display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; align-items: center; }
.g-auth-aside { position: relative; display: grid; gap: 26px; justify-items: center; }
.g-auth-fan { position: relative; width: 100%; max-width: 480px; aspect-ratio: 480 / 330; container-type: inline-size; }
.g-af { position: absolute !important; left: 50%; top: 50%; font-size: 1.9cqi !important; margin: -10.1em 0 0 -16em; box-shadow: 0 2em 3em -1.4em rgba(52,43,30,.35); border-radius: 1.5em; }
.g-af1 { transform: translate(-30%, 6%) rotate(-12deg); }
.g-af2 { transform: translate(30%, 6%) rotate(11deg); }
.g-af3 { transform: translate(0, -10%) rotate(-1deg); }
.g-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-auth-points li { position: relative; padding-left: 26px; color: var(--g-text2); }
.g-auth-points li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--g-holo); }
.g-auth-main h1 { margin: 12px 0 0; font: 600 clamp(38px, 4.6vw, 60px)/1 var(--g-sans); letter-spacing: -.04em; }
.g-auth-lead { margin: 14px 0 0; color: var(--g-mut); line-height: 1.55; }
.buy-card.g-form { margin-top: 22px; display: grid; gap: 14px; padding: 28px; border-radius: 28px; background: #FFFFFF; border: 0; box-shadow: var(--g-shadow); max-width: none; }
.g-form-alt { margin: 0; font-size: 15px; }
.g-form-alt a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.buy-card { background: #FFFFFF; border: 0; border-radius: 24px; box-shadow: var(--g-shadow); }

.g-doc, .legal-wrap.g-doc, .faq-wrap.g-doc, .contacts-wrap.g-doc { max-width: 900px; margin: 40px auto 20px; }
.g-doc h1 { margin: 14px 0 0; font: 600 clamp(38px, 4.6vw, 60px)/1 var(--g-sans); letter-spacing: -.04em; }
.g-doc .g-doc-lead, .g-doc > p.mut { margin: 16px 0 26px; color: var(--g-mut); font-size: 17px; line-height: 1.55; }
.legal-wrap.g-doc h2 { margin: 34px 0 12px; font: 600 22px/1.2 var(--g-sans); letter-spacing: -.015em; color: var(--g-ink); }
.legal-wrap.g-doc p, .legal-wrap.g-doc li { color: var(--g-text2); line-height: 1.7; font-size: 16px; }
.legal-wrap.g-doc a { text-decoration: underline; text-underline-offset: 3px; }
.legal-wrap .pay-logos-row { margin: 20px 0 6px; }
.faq-wrap.g-doc details { background: #FFFFFF; border: 0; border-radius: 20px; box-shadow: 0 1px 0 rgba(20,21,25,.04), 0 8px 20px rgba(60,50,35,.05); margin-top: 10px; padding: 0 24px; }
.faq-wrap.g-doc summary { padding: 20px 36px 20px 0; font: 600 18px/1.35 var(--g-sans); letter-spacing: -.01em; min-height: 44px; }
.faq-wrap.g-doc summary::after { content: ''; top: 50%; right: 4px; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--g-ink), var(--g-ink)) center / 14px 2px no-repeat, linear-gradient(var(--g-ink), var(--g-ink)) center / 2px 14px no-repeat; }
.faq-wrap.g-doc details[open] summary::after { content: ''; background: linear-gradient(var(--g-ink), var(--g-ink)) center / 14px 2px no-repeat; }
.faq-wrap.g-doc details p { color: var(--g-text2); line-height: 1.65; padding-bottom: 22px; }
.faq-wrap.g-doc details a { text-decoration: underline; text-underline-offset: 3px; }
.g-doc-cta { margin-top: 30px; }
.contact-grid { gap: 16px; }
.ccard { background: #FFFFFF; border: 0; border-radius: 24px; box-shadow: var(--g-shadow); padding: 26px; }
.ccard h2 { font: 600 20px/1.2 var(--g-sans); letter-spacing: -.01em; }
.req-label { font: 500 11px/1 var(--g-mono); letter-spacing: .14em; color: var(--g-mut); }
.req-value { font-size: 16px; }
.contact-big { color: var(--g-ink); font: 600 26px/1.1 var(--g-sans); }
.seller-landing { max-width: 720px; margin: 40px auto; }
.seller-landing h1 { font: 600 clamp(32px, 4vw, 48px)/1.05 var(--g-sans); letter-spacing: -.03em; }

.g-404 { display: grid; justify-items: center; text-align: center; padding: 50px 16px 10px; }
.g-404-card { width: min(420px, 86vw); perspective: 1200px; margin-bottom: 30px; }
.g-404-card .gc { width: 100%; height: auto; aspect-ratio: 32 / 20.2; transform: rotateX(10deg) rotateY(-14deg); box-shadow: 0 30px 60px -20px rgba(52,43,30,.35); border-radius: 1.5em; }
.g-404 p { color: var(--g-mut); max-width: 460px; }

/* ================================================= ПОДВАЛ: голографическая защитная лента */
.ld-foot { margin-top: 110px; background: transparent; border: 0; padding: 0 0 40px; color: var(--g-mut); }
.g-strip { position: relative; height: 64px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(20,21,25,.08);
  background: linear-gradient(100deg, hsl(350,85%,80%) 0%, hsl(40,95%,76%) 12%, hsl(95,70%,76%) 24%, hsl(180,75%,78%) 36%, hsl(225,90%,82%) 48%, hsl(290,70%,82%) 60%, hsl(350,85%,80%) 72%, hsl(40,95%,76%) 84%, hsl(95,70%,76%) 100%);
  background-size: 200% 100%; animation: gStrip 14s linear infinite; }
@keyframes gStrip { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
.g-strip-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, rgba(255,255,255,0) 1px 4px); mix-blend-mode: overlay; }
.g-strip-text { position: absolute; left: 0; top: 25px; white-space: nowrap; font: 500 11px/1 var(--g-mono); letter-spacing: .3em; color: rgba(20,21,25,.6); }
.g-strip-text span { display: inline-block; animation: gTicker 60s linear infinite; }
@keyframes gTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.g-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding: 44px 0 30px; border-bottom: 1px solid var(--g-line); }
.g-foot-grid:has(> :nth-child(4)) { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.g-foot-brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.g-foot-brand p { margin: 0; max-width: 420px; font-size: 14.5px; line-height: 1.6; }
.g-foot-contacts { display: grid; gap: 6px; font-size: 14.5px; color: var(--g-text2); }
.g-foot-contacts a { color: var(--g-ink); font-weight: 500; }
.g-foot-col { display: grid; gap: 0; align-content: start; }
.g-foot-head { font: 500 11px/1 var(--g-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g-mut); margin-bottom: 10px; }
.g-foot-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--g-ink); font-size: 14.5px; }
.g-foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-foot-bottom { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 28px; padding-top: 22px; font-size: 13px; color: var(--g-mut); line-height: 1.5; }
.g-foot-bottom span:last-child { text-align: right; }
.paylogos { display: inline-flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.paylogo { display: inline-flex; }
.paylogo svg { width: 48px; height: 30px; display: block; border-radius: 7px; box-shadow: 0 0 0 1px rgba(20,21,25,.1), 0 2px 6px rgba(60,50,35,.06); }

/* тост «в корзине» */
.g-toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--g-ink); color: #FFFFFF; box-shadow: 0 20px 50px rgba(20,21,25,.3); font-size: 15px; }
.g-toast a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--g-holo); color: var(--g-ink); font-weight: 600; white-space: nowrap; }
.g-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================= АДАПТИВ */
@media (max-width: 1360px) {
  .g-search { width: 200px; }
  .g-nav { gap: 20px; }
  .g-build-grid { gap: 36px; }
  .g-pv { width: 54%; }
}
@media (max-width: 1240px) {
  .wrap { padding: 0 40px; }
  .g-search { display: none; }
  .g-search-btn { display: inline-flex; }
  .g-shelf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-related .g-shelf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-shelf-row > :nth-child(n+7) { display: none; }
  .g-foot-grid, .g-foot-grid:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; }
  .g-wallet-wrap { grid-template-columns: 1fr; }
  .g-wallet-total { position: static; }
  .g-slot { grid-template-columns: 220px minmax(0, 1fr) auto; }
}
@media (max-width: 1080px) {
  .g-phfan { display: none; }
  .g-pagehead.has-fan { min-height: 0; }
  .g-nav { display: none; }
  .g-burger { display: block; }
  .g-head-row { justify-content: space-between; }
  .g-h1 { font-size: 64px; }
  .g-sec-head, .g-shelf-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .g-sec-head p, .g-shelf-head p { width: auto; }
  .g-build-grid { flex-direction: column; }
  .g-pv { width: 100%; max-width: 700px; align-self: center; }
  .g-pdp { grid-template-columns: 1fr; gap: 30px; }
  .g-pdp-stage { position: static; max-width: 700px; width: 100%; justify-self: center; }
  .g-pdp-more { grid-template-columns: 1fr; gap: 40px; }
  .g-env, .order-wrap.g-receipt { grid-template-columns: 1fr; }
  .g-env-side { position: static; }
  .auth-wrap.g-auth { grid-template-columns: 1fr; max-width: 560px; gap: 10px; }
  .g-auth-aside { display: none; }
  .g-note { flex-direction: column; align-items: flex-start; gap: 30px; }
  .g-hero-cta { flex-direction: column; gap: 18px; }
  .g-hero-cta p { text-align: center; width: auto; max-width: 520px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .g-head-row { height: 68px; gap: 10px; }
  .g-word { font-size: 16px; letter-spacing: .2em; }
  .g-mark { width: 26px; height: 26px; }
  .g-hide-s { display: none; }
  .g-cart { padding: 0 14px; }
  .g-cart-lbl { display: none; }
  .ld-suggest, .g-search .ld-suggest { min-width: 0; width: auto; left: 0; right: 0; }
  .g-hero { padding-top: 18px; }
  .g-h1 { font-size: 40px; line-height: 1.02; letter-spacing: -.04em; }
  .g-eyebrow { font-size: 10.5px; letter-spacing: .16em; }
  .g-stage { margin-top: 6px; }
  .g-lots { flex-wrap: wrap; gap: 0; }
  .g-lot { width: 33.3%; padding: 8px 2px; min-height: 56px; }
  .g-lot-cap { font-size: 8.5px; white-space: normal; }
  .g-lot-sum { font-size: 14px; margin-top: 6px; white-space: normal; }   /* «1 000 ₽ — 1 075 ₽» на телефоне 360 px переносится у тире, а не режется краем экрана */
  .g-hero-btns { flex-direction: column; width: 100%; max-width: 360px; }
  .g-hero-btns .g-btn { width: 100%; }
  .g-build { margin-top: 70px; }
  .g-h2 { font-size: 38px; }
  .g-tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .g-tabs::-webkit-scrollbar { display: none; }
  .g-tab { min-height: 48px; padding: 0 14px; }
  .g-pv { border-radius: 24px; }
  .g-pv-cap { left: 16px; right: 16px; bottom: 14px; font-size: 9px; }
  .g-pv-cap span:last-child { display: none; }
  .g-noms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-nl { font-size: 19px; }
  .g-sum { padding: 20px 18px 16px; }
  .g-sum-price { font-size: 42px; }
  .g-sum-top { flex-direction: column; gap: 6px; align-items: flex-start; }
  .g-sum-line { text-align: left; }
  .g-shelf, .g-how { margin-top: 80px; }
  .g-shelf-row, .g-related .g-shelf-row { display: flex; overflow-x: auto; gap: 16px; margin-left: -16px; margin-right: -16px; padding: 4px 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .g-shelf-row::-webkit-scrollbar { display: none; }
  .g-shelf-row > .g-tile { flex: 0 0 72%; scroll-snap-align: start; }
  .g-shelf-row > :nth-child(n+7) { display: flex; }
  .g-steps { grid-template-columns: 1fr; }
  .g-stepc, .g-stepc + .g-stepc { padding: 26px 0 18px; border-left: 0; border-bottom: 1px solid rgba(20,21,25,.14); }
  .g-stepc-no { font-size: 64px; }
  .g-stepc-top svg { width: 52px; height: 52px; }
  .g-stepc h3 { margin-top: 18px; font-size: 22px; }
  .g-note { padding: 26px 20px; border-radius: 26px; }
  .g-note-card { width: 100%; max-width: 300px; }
  .g-note-big { font-size: 22px; }
  .grid.g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  .g-tile-name { font-size: 14px; margin-top: 12px; }
  .g-tile-sub { font-size: 12px; }
  .g-tile-buy { flex-direction: column; align-items: stretch; gap: 8px; }
  .g-tile-buy form { display: flex; }
  .g-add { flex: 1; justify-content: center; }
  .g-tile-price { font-size: 17px; }
  .g-tools { flex-direction: column; }
  .g-sort { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .g-brandbar { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .g-more-brands-list { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
  .g-pricepick { flex-basis: auto; width: 100%; }
  .pricepick-input input { width: 158px; padding: 0 30px 0 14px; }
  .g-bigsearch { height: 56px; padding-left: 16px; }
  .g-bigsearch .g-btn { padding: 0 14px; }
  .g-pdp-buy { grid-template-columns: 1fr 1fr; }
  .g-qty { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
  .g-facts { grid-template-columns: 1fr; }
  .g-facts div:nth-child(even) { padding-left: 0; border-left: 0; }
  .g-timeline { grid-template-columns: 1fr; }
  .price-lg { font-size: 42px; }
  .g-pdp-cap span:last-child { display: none; }
  .g-wallet { padding: 10px; border-radius: 28px; }
  .g-wallet::before { inset: 5px; border-radius: 24px; }
  .g-slot { grid-template-columns: 1fr auto; gap: 12px; padding: 12px 14px; border-radius: 22px; }
  .g-slot-card { grid-column: 1 / -1; height: 140px; }
  .g-slot-gc { left: 50%; right: auto; top: 6px; width: 220px; transform: translateX(-50%); }
  .g-slot-pocket { height: 38px; }
  .g-slot-card:hover .g-slot-gc { transform: translateX(-50%) translateY(-6px); }
  .g-slot-info { grid-column: 1; }
  .g-slot-sum { grid-column: 2; min-width: 0; align-self: start; font-size: 20px; padding-top: 2px; }
  .g-total-sum { font-size: 42px; }
  .g-env-side, .g-env-main, .g-receipt-side, .g-receipt-main { padding: 20px; border-radius: 24px; }
  .g-envelope { height: 200px; }
  .g-order-tl li { width: auto; flex: 1; }
  .order-product.g-oitem { grid-template-columns: 84px minmax(0, 1fr); }
  .order-product.g-oitem .price { grid-column: 2; }
  .order-bill { width: 84px; height: 54px; }
  .pay { grid-template-columns: 1fr; justify-items: center; }
  .pay-steps { width: 100%; }
  .g-orow { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .g-orow .status { grid-column: 2; justify-self: start; }
  .g-orow .price { grid-column: 2; }
  .tbl-bill { width: 84px; height: 54px; }
  .g-cab-stats { grid-template-columns: 1fr; }
  .g-cab-head { flex-direction: column; align-items: flex-start; }
  .fld-row { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .g-foot-grid, .g-foot-grid:has(> :nth-child(4)) { grid-template-columns: 1fr; gap: 26px; padding-top: 34px; }
  .g-foot-bottom { grid-template-columns: 1fr; }
  .g-foot-bottom span:last-child { text-align: left; }
  .ld-foot { margin-top: 80px; }
  .g-othercats { margin-top: 56px; }
  .g-toast { bottom: 14px; padding-left: 16px; font-size: 14px; }
}
@media (max-width: 380px) {
  .g-word { font-size: 14px; letter-spacing: .16em; }
  .g-h1 { font-size: 34px; }
}