/* Arbitrage Hack — витрина. Магазинная полка под светом ламп: ценники, коробки, чек. */
:root {
  --ground: #f2f4f5;      /* белый торгового зала */
  --panel: #e6e9eb;       /* перфопанель */
  --hole: #c4cacf;
  --steel: #c6ccd1;       /* ценникодержатель */
  --steel-hi: #e7eaec;
  --steel-lo: #959da4;
  --ink: #000;
  --ink-2: #33393e;
  --ink-3: #575f66;
  --yellow: #ffdd2d;      /* ценник */
  --red: #d81b13;         /* акция */
  --red-2: #b8150e;
  --blue: #0866ff;        /* отдел Facebook */
  --blue-2: #0553d6;
  --paper: #fff;
  --src: var(--ink);
  --cond: 'Fira Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --text: 'Golos Text', system-ui, sans-serif;
  --mono: 'Fira Mono', ui-monospace, monospace;
  --wrap: min(1200px, calc(100% - 32px));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --col: calc((100% - 84px) / 4); /* одна колонка сетки 4×, промежуток 28px */
  --r1: 2px; --r2: 4px; --r3: 6px;
}
body[data-src="fb"] { --src: var(--blue); }
body[data-src="google"] { --src: var(--red); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; scrollbar-color: var(--steel-lo) var(--ground); }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; background: var(--ground); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--red); }
::selection { background: var(--yellow); color: var(--ink); }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--cond); text-wrap: balance; letter-spacing: -.01em; }
p, li, dd { text-wrap: pretty; }
.lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
main { flex: 1; }
html.lb-lock { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Источник: блоки другого отдела не показываем */
body[data-src="fb"] [data-only="google"], body[data-src="google"] [data-only="fb"] { display: none !important; }
html.js body:not([data-src]) .tailored { display: none; }
body:not([data-src]) .nav-links { display: none; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: var(--r2); border: 0; font: 700 16px/1 var(--text); text-decoration: none; cursor: pointer; transition: background-color .18s, color .18s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn-promo { background: var(--red); color: #fff; }
.btn-promo:hover { background: var(--red-2); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #262a2d; }
.btn-line { box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-line-light { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; background: transparent; }
.btn-line-light:hover { background: #fff; color: var(--red); }

/* Вывеска магазина */
.fascia { position: sticky; top: 0; z-index: 50; transition: transform .3s var(--ease); display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 max(16px, calc((100% - 1200px) / 2)); background: #fff; box-shadow: 0 1px 0 var(--steel), 0 6px 18px -14px rgba(20, 30, 40, .4); }
.sign { display: flex; flex: none; align-items: center; gap: 10px; text-decoration: none; }
.sign img { height: 34px; width: auto; }
.sign span { font: 800 23px/1 var(--cond); letter-spacing: -.01em; white-space: nowrap; }
.aisles { display: flex; gap: 4px; padding: 4px; border-radius: var(--r3); background: var(--ground); box-shadow: inset 0 0 0 1px var(--steel); }
.aisles button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r2); background: transparent; font: 600 15px/1 var(--text); color: var(--ink-3); cursor: pointer; transition: background-color .18s, color .18s; }
.aisles button img { width: 20px; height: 16px; object-fit: contain; }
.aisles button:hover { color: var(--ink); }
.aisles button[aria-checked="true"] { background: var(--yellow); color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--ink); }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); text-decoration: underline; }
.nav-cta { margin-left: auto; min-height: 42px; padding: 0 18px; font-size: 15px; }
body[data-src] .nav-cta { margin-left: 0; }

/* Витрина */
.shop { width: var(--wrap); margin: 0 auto; padding: 36px 0 28px; }
.shop-head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 16px 48px; margin-bottom: 26px; }
.shop h1 { font-weight: 900; font-size: clamp(52px, 8.4vw, 96px); line-height: .9; letter-spacing: -.02em; }
.shop .lead { padding-bottom: 8px; }
.peg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r3) var(--r3) 0 0; background-color: var(--panel); background-image: radial-gradient(circle, var(--hole) 0 3px, transparent 3.6px); background-size: 34px 34px; background-position: 17px 17px; box-shadow: inset 0 0 0 1px #d9dde0, 0 10px 14px -10px rgba(20, 30, 40, .45); }
.pack { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); }
.box, .gift-box { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; margin: 54px clamp(18px, 3.4vw, 44px) 0; background: var(--paper); border-radius: 6px 6px 3px 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 26px 36px -26px rgba(20, 30, 40, .55); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
/* язычок с евро-прорезью и крючок перфопанели */
.box::before, .gift-box::before { content: ''; position: absolute; left: 50%; top: -30px; width: 92px; height: 34px; margin-left: -46px; border-radius: 6px 6px 0 0; background: var(--paper) radial-gradient(ellipse 22px 6px at 50% 15px, var(--panel) 0 98%, transparent 100%); box-shadow: 0 -1px 0 rgba(0, 0, 0, .04); }
.box::after, .gift-box::after { content: ''; position: absolute; left: 50%; top: -44px; width: 6px; height: 34px; margin-left: -3px; border-radius: 3px; background: var(--steel-lo); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .18); }
.pack:hover .box, .pack:focus-visible .box { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 36px 44px -28px rgba(20, 30, 40, .6); }
.pack:focus-visible { outline: none; }
.pack:focus-visible .box { outline: 3px solid var(--ink); outline-offset: 4px; }
.box-brand { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 6px 6px 0 0; color: #fff; font-weight: 600; font-size: 15px; }
.pack-fb .box-brand { background: var(--blue); }
.pack-google .box-brand { background: var(--red); }
.box-brand img { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #fff; object-fit: contain; }
.box-window { position: relative; display: block; min-width: 0; margin: 18px 24px 0; overflow: hidden; border-radius: var(--r3); box-shadow: 0 0 0 1px #cfd5da, 0 0 0 5px var(--paper), 0 0 0 6px #e1e5e8; }
/* окно 3:2 распоркой, картинка абсолютом: в Safari aspect-ratio в flex-колонке врёт, а 1536 px картинки раздувают коробку */
.box-window::before { content: ''; display: block; padding-top: 66.6667%; }
.box-window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pack-go { margin: auto 0 0; padding: 14px 20px; border-top: 1px dashed #c9cfd4; font-weight: 700; font-size: 15.5px; }
.box-window + .pack-go { margin-top: 18px; }
.pack-fb .pack-go { color: var(--blue-2); }
.pack-google .pack-go { color: var(--red); }
.pack:hover .pack-go { text-decoration: underline; }

/* Ценникодержатель и ценник */
.edge { margin-top: 30px; padding: 9px clamp(18px, 3.4vw, 44px) 12px; background: var(--steel); box-shadow: inset 0 1px 0 var(--steel-hi), inset 0 -2px 0 var(--steel-lo); }
.tag { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name price' 'foot price' 'code code'; align-items: end; gap: 0 12px; max-width: 300px; padding: 10px 14px 8px; background: var(--yellow); border-radius: var(--r1); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.tag-name { grid-area: name; align-self: start; font: 800 21px/1.05 var(--cond); }
.tag-foot { grid-area: foot; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.tag-price { grid-area: price; display: flex; align-items: flex-end; gap: 6px; }
.tag-price b { font: 900 clamp(64px, 7.2vw, 96px)/.78 var(--cond); letter-spacing: -.03em; }
.tag-price span { font: 700 17px/1 var(--cond); padding-bottom: 2px; }
.tag-code { grid-area: code; width: 96px; height: 14px; margin-top: 8px; }
.both { margin-top: 22px; font-size: 15px; color: var(--ink-3); }

/* Вывеска отдела */
.aisle-sign { width: var(--wrap); margin: 0 auto; padding-top: clamp(24px, 3vw, 40px); }
.aisle-sign::before { content: ''; display: block; height: 8px; border-radius: var(--r1); background: var(--steel); box-shadow: inset 0 1px 0 var(--steel-hi), inset 0 -2px 0 var(--steel-lo); }
.plaque { position: relative; display: inline-flex; align-items: center; gap: clamp(16px, 2.6vw, 28px); margin: 40px 0 0; padding: clamp(16px, 2vw, 22px) clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px); background: var(--src); color: #fff; border-radius: var(--r3); box-shadow: 0 24px 30px -24px rgba(20, 30, 40, .6); }
.plaque::before, .plaque::after { content: ''; position: absolute; top: -40px; width: 3px; height: 40px; background: var(--steel-lo); }
.plaque::before { left: 56px; }
.plaque::after { right: 56px; }
.plaque img { width: clamp(56px, 7vw, 84px); height: clamp(56px, 7vw, 84px); padding: clamp(10px, 1.3vw, 15px); border-radius: 50%; background: #fff; object-fit: contain; flex: none; }
.plaque b { font: 900 clamp(46px, 8vw, 96px)/.86 var(--cond); letter-spacing: -.02em; }

/* Касса: чек со стенда */
.till { width: var(--wrap); margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0; display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 40px clamp(32px, 6vw, 88px); align-items: start; }
.till-copy { position: sticky; top: 104px; }
.till h2 { font-weight: 800; font-size: clamp(38px, 5vw, 64px); line-height: .95; margin-bottom: 16px; }
.till-note { margin-top: 18px; font-size: 15.5px; color: var(--ink-3); max-width: 52ch; }
.receipt { display: grid; justify-items: center; }
.printer { width: 100%; height: 30px; border-radius: 10px 10px 4px 4px; background: #2a2f33; display: grid; align-items: end; padding: 0 12px 7px; box-shadow: 0 12px 18px -14px rgba(0, 0, 0, .6); position: relative; z-index: 1; }
.printer span { height: 4px; border-radius: 2px; background: #0b0d0e; }
.feed { width: calc(100% - 32px); overflow: hidden; margin-top: -6px; padding-bottom: 26px; }
.paper { position: relative; padding: 30px 24px 34px; background: var(--paper); color: #141414; font: 400 15px/1.55 var(--mono); box-shadow: 0 18px 26px -20px rgba(20, 30, 40, .5);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x; }
.r-head { text-align: center; font-weight: 700; font-size: 16px; line-height: 1.4; }
.r-meta { text-align: center; margin-top: 8px; padding-bottom: 14px; border-bottom: 1px dashed #141414; color: #333; font-size: 14px; }
.r-lines { padding: 12px 0; }
.r-lines div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.r-lines dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-total { padding: 14px 0 12px; border-top: 3px double #141414; border-bottom: 1px dashed #141414; }
.r-total span { display: block; font-weight: 700; font-size: 16px; }
.r-total b { display: block; text-align: right; font: 700 clamp(30px, 3.6vw, 40px)/1.1 var(--mono); letter-spacing: -.03em; white-space: nowrap; }
.r-after { padding-bottom: 14px; border-bottom: 1px dashed #141414; }
.r-after dd { font-weight: 700; font-size: 18px; }
.r-code { display: block; height: 46px; width: 78%; margin: 22px auto 0; }
.receipt figcaption { display: flex; align-items: center; gap: 14px; width: calc(100% - 32px); margin-top: 4px; font-size: 14.5px; color: var(--ink-3); }
.zoom.shot-thumb { width: 132px; flex: none; padding: 4px; background: #fff; border-radius: var(--r1); box-shadow: 0 0 0 1px var(--steel); }
/* печать: бумага выходит из щели построчно */
html.js .receipt .paper { transform: translateY(-101%); }
html.js .receipt.printed .paper { transform: none; transition: transform 2.4s steps(24, end); }

/* Ценники «было → стало» */
.markdown { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); }
.markdown h2 { font-weight: 800; font-size: clamp(34px, 4.4vw, 56px); line-height: .98; margin-bottom: 24px; }
.tags-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; background: var(--steel); border-radius: var(--r1); box-shadow: inset 0 1px 0 var(--steel-hi), inset 0 -2px 0 var(--steel-lo), 0 12px 16px -12px rgba(20, 30, 40, .45); }
.mtag { display: grid; align-content: start; gap: 12px; padding: 16px 16px 18px; background: var(--yellow); border-radius: var(--r1); }
.mtag s, .mtag p { text-wrap: balance; }
.mtag s { font: 600 18px/1.3 var(--cond); color: var(--ink-2); text-decoration-thickness: 2px; text-decoration-color: var(--red); }
.mtag p { font: 800 21px/1.3 var(--cond); }

/* Подарок: умный автозалив */
.gift { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 560px); gap: 40px clamp(32px, 6vw, 88px); align-items: center; }
.gift h2 { font-weight: 900; font-size: clamp(46px, 6.4vw, 84px); line-height: .9; letter-spacing: -.02em; }
.gift-sub { margin: 12px 0 18px; font: 800 clamp(24px, 2.6vw, 32px)/1.05 var(--cond); color: var(--red); }
.gift-math { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 14px; margin: 28px 0 30px; }
.gift-math span { display: grid; justify-items: center; font-size: 14px; color: var(--ink-3); }
.gift-math b { font: 900 clamp(64px, 7vw, 92px)/.84 var(--cond); letter-spacing: -.03em; color: var(--ink); }
.gift-math i { font: 800 clamp(40px, 4.4vw, 56px)/1.25 var(--cond); font-style: normal; color: var(--steel-lo); }
.gift-math .sum b { color: var(--blue); }
.gift-math .sum { color: var(--blue-2); font-weight: 600; }
/* стойка: та же перфопанель и рейка, что на витрине */
.gift-shelf { display: flex; flex-direction: column; border-radius: var(--r3) var(--r3) 0 0; background-color: var(--panel); background-image: radial-gradient(circle, var(--hole) 0 3px, transparent 3.6px); background-size: 34px 34px; background-position: 17px 17px; box-shadow: inset 0 0 0 1px #d9dde0, 0 10px 14px -10px rgba(20, 30, 40, .45); }
.gift-box { display: flex; flex-direction: column; margin: 54px clamp(18px, 3vw, 36px) 0; padding-bottom: 22px; background: var(--paper); border-radius: 6px 6px 3px 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 26px 36px -26px rgba(20, 30, 40, .55); }
.gift-box .box-brand { background: var(--blue); }
.gift-box .box-window { display: block; margin: 18px 22px 0; }
.ribbon { position: absolute; top: -7px; right: -7px; width: 128px; height: 128px; overflow: hidden; pointer-events: none; }
.ribbon::before, .ribbon::after { content: ''; position: absolute; z-index: -1; border: 4px solid var(--red-2); border-top-color: transparent; border-right-color: transparent; }
.ribbon::before { top: 0; left: 26px; }
.ribbon::after { bottom: 26px; right: 0; }
.ribbon span { position: absolute; top: 30px; right: -38px; width: 180px; padding: 9px 0 8px; transform: rotate(45deg); background: var(--red); color: #fff; text-align: center; font: 800 17px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45); }
.gift .tag { max-width: 340px; }
.gift-how { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 28px; align-items: start; padding-top: 12px; }
.gift-screen { padding: 8px; background: var(--paper); border-radius: var(--r2); box-shadow: 0 0 0 1px var(--steel), 0 24px 34px -28px rgba(20, 30, 40, .55); }
.gift-screen figcaption { padding: 10px 6px 2px; font-size: 14.5px; color: var(--ink-3); }
.gift-list { counter-reset: g; border-top: 2px solid var(--ink); }
.gift-list li { counter-increment: g; display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; padding: 11px 0; border-bottom: 1px solid var(--steel); }
.gift-list li::before { content: counter(g); grid-row: span 2; font: 900 26px/1 var(--cond); color: var(--blue); }
.gift-list b { font: 700 19px/1.15 var(--cond); }
.gift-list span { font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.addon-list b a { text-decoration: none; }
.addon-list b a:hover { text-decoration: underline; }
.promo-gift { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 26px; }
.promo-gift span { padding: 8px 12px; background: var(--yellow); color: var(--ink); border-radius: var(--r1); font: 600 18px/1.2 var(--cond); }
.promo-gift b { font-weight: 800; }

/* В комплекте: уникализатор */
.kit { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 88px); align-items: center; }
.kit-visual { position: relative; padding: 8px; background: var(--paper); border-radius: var(--r3); box-shadow: 0 0 0 1px var(--steel), 0 26px 36px -26px rgba(20, 30, 40, .55); }
.kit-visual img { width: 100%; border-radius: var(--r2); }
.kit-stamp { position: absolute; bottom: -26px; left: -22px; display: grid; place-content: center; justify-items: center; width: 116px; height: 116px; border-radius: 50%; background: var(--yellow); color: var(--ink); transform: rotate(-10deg); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .5); }
.kit-stamp small { font: 700 15px/1 var(--cond); }
.kit-stamp b { font: 900 25px/1 var(--cond); letter-spacing: -.01em; }
.kit h2 { font-weight: 900; font-size: clamp(40px, 5vw, 68px); line-height: .92; letter-spacing: -.02em; }
.kit-sub { margin: 10px 0 16px; font: 800 clamp(22px, 2.3vw, 28px)/1.05 var(--cond); color: var(--blue-2); }
.kit-points { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 24px; }
.kit-points li { display: grid; align-content: start; gap: 2px; padding: 12px 0 14px; border-top: 2px solid var(--ink); }
.kit-points b { font: 700 19px/1.15 var(--cond); }
.kit-points span { font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.kit-shot { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 14.5px; color: var(--ink-3); }

/* Состав набора */
.bundle { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 28px clamp(32px, 6vw, 88px); align-items: stretch; }
.back-label { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 36px); background: var(--paper); border-radius: var(--r2); box-shadow: inset 0 0 0 2px var(--ink); }
.back-label h2 { font-weight: 900; font-size: clamp(34px, 4vw, 52px); line-height: .95; margin-bottom: 18px; }
.ingredients { font-size: 17px; line-height: 1.65; max-width: 62ch; }
.label-facts { align-self: stretch; margin: auto 0 26px; padding-top: 22px; }
.label-facts div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ink); font-size: 15.5px; }
.label-facts div:last-child { border-bottom: 1px solid var(--ink); }
.label-facts dt { font-weight: 700; }
.addons { display: flex; flex-direction: column; }
.addons h3 { font-weight: 800; font-size: 30px; line-height: 1; margin: 0 0 16px; }
.addon-list { flex: 1; display: grid; gap: 8px; }
.addon-list li { position: relative; display: grid; gap: 4px; padding: 14px 18px; background: var(--paper); border-radius: var(--r2); box-shadow: 0 0 0 1px var(--steel); }
.addon-list b { font: 800 21px/1.1 var(--cond); }
.addon-list li:has(em) b { padding-right: 120px; }
.addon-list span { font-size: 15px; color: var(--ink-3); }
.addon-list em { position: absolute; top: 14px; right: 14px; padding: 2px 8px; font: 800 15px/1.2 var(--cond); font-style: normal; color: var(--red); box-shadow: inset 0 0 0 2px var(--red); border-radius: var(--r2); transform: rotate(-4deg); white-space: nowrap; }

/* Экраны */
.product { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); }
.section-head { margin-bottom: 24px; }
.section-head h2, .faq h2, .demo-side h2 { font-weight: 800; font-size: clamp(34px, 4.4vw, 56px); line-height: .98; margin-bottom: 16px; }
.explorer { display: grid; grid-template-columns: var(--col) 1fr; gap: 28px; align-items: start; }
.ex-list { display: grid; border-top: 1px solid var(--ink); }
.ex-stage { position: sticky; top: 88px; }
.ex-item { display: grid; gap: 2px; padding: 9px 14px; text-align: left; border: 0; border-bottom: 1px solid var(--steel); background: transparent; cursor: pointer; transition: background-color .15s; }
.ex-item b { font: 700 19px/1.15 var(--cond); }
.ex-item small { font-size: 13.5px; color: var(--ink-3); }
.ex-item:hover { background: var(--panel); }
.ex-item[aria-selected="true"] { background: var(--yellow); }
.ex-item[aria-selected="true"] small { color: var(--ink-2); }
.ex-item[aria-selected="true"] b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 8px 0 0; vertical-align: .18em; background: var(--ink); }
.ex-view { padding: 8px; background: var(--paper); border-radius: var(--r2); box-shadow: 0 0 0 1px var(--steel), 0 24px 34px -28px rgba(20, 30, 40, .55); }
.ex-view.in > * { animation: swap .35s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }
.ex-caption { margin-top: 18px; max-width: 70ch; }
.ex-caption h3 { font-weight: 800; font-size: 28px; line-height: 1; margin-bottom: 8px; }
.ex-caption p { font-size: 16.5px; color: var(--ink-2); }
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom img { width: 100%; border-radius: 2px; }
.phone-wrap { display: grid; place-items: center; padding: 28px 12px; background: var(--panel); border-radius: 2px; }

/* Telegram-бот: макет телефона */
.phone { width: min(340px, 100%); border-radius: 44px; padding: 12px; background: #050506; position: relative; box-shadow: 0 0 0 2px #2a2a31, 0 0 0 6px #111114, 0 30px 60px -24px rgba(0, 0, 0, .6); }
.island { width: 96px; height: 28px; border-radius: 20px; background: #000; margin: 4px auto 0; position: relative; z-index: 2; }
.tg-head { display: flex; align-items: center; gap: 10px; padding: 46px 14px 12px; margin-top: -32px; background: #1c2733; border-radius: 34px 34px 0 0; }
.tg-head b { display: block; font-size: 15px; color: #fff; }
.tg-head small { color: #8aa0b4; font-size: 12px; }
.ava { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.ava img { width: 24px; height: 24px; object-fit: contain; }
.tg-body { display: grid; gap: 10px; padding: 14px 10px 22px; height: 600px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; align-content: start; background: #0f1821; border-radius: 0 0 34px 34px; }
.tg-body::-webkit-scrollbar { display: none; }
.tg-body:focus-visible { outline-offset: -3px; }
.msg-wrap { display: grid; gap: 4px; animation: msg .5s var(--ease) backwards; animation-delay: calc(var(--i) * 420ms + 150ms); }
.msg { background: #182533; color: #e8eef4; border-radius: 14px 14px 14px 4px; padding: 9px 11px 6px; font-size: 13px; line-height: 1.42; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg b { font-weight: 600; color: #fff; }
.msg i { color: #c5d2de; }
.msg code, .msg pre { font: 400 11.5px/1.45 var(--mono); }
.msg code { color: #8cc8ff; }
.msg pre { margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: #0f1821; color: #e8eef4; white-space: pre; overflow: hidden; }
.msg time { display: block; text-align: right; font-size: 11px; color: #8197a9; margin-top: 2px; }
.kb { display: grid; gap: 4px; }
.kb div { display: flex; gap: 4px; }
.kb span { flex: 1 1 0; min-width: 0; display: grid; place-items: center; text-align: center; padding: 7px 6px; line-height: 1.25; border-radius: 8px; background: #22344a; color: #fff; font-weight: 500; font-size: 12.5px; }
@keyframes msg { from { opacity: 0; transform: translateY(8px); } }

/* Ролик */
.demo { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: var(--col) 1fr; gap: 28px; align-items: center; }
.phone-video { position: relative; }
.phone-video video { width: 100%; aspect-ratio: 9 / 16; border: 6px solid #111; border-radius: 26px; background: #000; object-fit: cover; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7); }
.play { position: absolute; inset: auto 0 14% 0; margin: 0 auto; width: 76px; height: 76px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--yellow); cursor: pointer; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .7); transition: transform .2s var(--ease); }
.play:hover { transform: scale(1.06); }
.play svg { width: 32px; height: 32px; margin-left: 4px; fill: var(--ink); }
.play[hidden] { display: none; }
.demo-side p { max-width: 46ch; color: var(--ink-2); margin-bottom: 22px; }

/* Способ применения */
.start { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 40px; }
.steps li { padding-top: 14px; border-top: 2px solid var(--ink); }
.step-n { display: block; font: 900 clamp(64px, 6.4vw, 88px)/.85 var(--cond); color: var(--src); margin-bottom: 14px; }
.steps h3 { font-weight: 800; font-size: 24px; line-height: 1.05; margin-bottom: 6px; }
.steps p { font-size: 15.5px; color: var(--ink-2); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.plan { display: grid; align-content: start; padding: clamp(22px, 3vw, 32px); border-radius: var(--r2); background: var(--yellow); }
.plan + .plan { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.plan h3 { font-weight: 900; font-size: clamp(40px, 4.6vw, 60px); line-height: .9; }
.plan-sub { margin: 8px 0 18px; font-weight: 600; font-size: 17px; }
.plan ul { display: grid; gap: 8px; margin-bottom: 26px; font-size: 16px; }
.plan li { position: relative; padding-left: 18px; }
.plan li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--ink); }
.plan .btn { justify-self: start; }

/* Вопросы */
.faq { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: var(--col) 1fr; gap: 24px 28px; align-items: start; }
.faq h2 { margin: 0; position: sticky; top: 104px; }
.faq details { border-top: 1px solid var(--ink); }
.faq details:last-child { border-bottom: 1px solid var(--ink); }
.faq summary { position: relative; padding: 18px 44px 18px 0; list-style: none; cursor: pointer; font: 700 22px/1.3 var(--cond); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: var(--ink); transition: transform .25s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { padding: 0 44px 20px 0; color: var(--ink-2); max-width: 68ch; }

/* Финал: промо-ценник */
.final { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); }
.promo { display: grid; grid-template-columns: auto 1fr; gap: 24px clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 56px); background: var(--red); color: #fff; border-radius: var(--r2); }
.promo-price { display: flex; align-items: flex-end; gap: 10px; color: var(--yellow); }
.promo-price b { font: 900 clamp(120px, 16vw, 190px)/.76 var(--cond); letter-spacing: -.04em; }
.promo-price span { font: 800 clamp(26px, 2.8vw, 36px)/.95 var(--cond); padding-bottom: 6px; }
.promo h2 { font-weight: 900; font-size: clamp(34px, 4.4vw, 56px); line-height: .95; margin-bottom: 12px; }
.promo-body > p { font-size: 18px; max-width: 46ch; margin-bottom: 26px; }
.promo-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.promo :focus-visible { outline-color: var(--yellow); }
.swap { margin-top: 22px; font-size: 16px; color: var(--ink-2); }
.swap button { padding: 10px 4px; margin: -10px -4px; border: 0; background: none; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Подвал */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 22px max(16px, calc((100% - 1200px) / 2)); border-top: 1px solid var(--steel); background: #fff; font-size: 14.5px; color: var(--ink-3); }
.foot img { height: 26px; width: auto; }
.foot a { margin-left: auto; padding: 11px 0; color: var(--ink); }

/* Просмотр скриншота крупно */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 76px 24px 24px; background: rgba(16, 19, 22, .92); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: calc(100vh - 100px); width: auto; max-width: 100%; border-radius: 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.lb-close { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.lb-close svg { width: 22px; height: 22px; }

/* Невысокие экраны ноутбуков: полка с ценниками целиком в первом экране */
@media (min-width: 721px) and (max-height: 880px) {
  .shop { padding-top: 24px; }
  .shop-head { margin-bottom: 18px; }
  .shop h1 { font-size: clamp(52px, min(8.4vw, 11vh), 96px); }
  .pack { --box-w: max(300px, min(100% - 2 * clamp(18px, 3.4vw, 44px), (100vh - 540px) * 1.5 + 48px)); }
  .box { width: var(--box-w); margin: 46px auto 0; }
  .edge { margin-top: 16px; padding-inline: calc((100% - var(--box-w)) / 2); }
  .shop-head { margin-bottom: 14px; }
  .tag-foot { display: none; }
  .gift .tag-foot { display: block; }
  .gift .edge { margin-top: 30px; padding-inline: clamp(18px, 3vw, 36px); }
}

/* Планшет */
@media (max-width: 1240px) {
  .nav-links a[href="#video"] { display: none; }
}
@media (max-width: 1080px) {
  .nav-links { display: none !important; }
  body[data-src] .nav-cta { margin-left: auto; }
}
@media (max-width: 1100px) {
  .tags-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .aisles button { height: 44px; }
  .shop-head { grid-template-columns: 1fr; }
  .till, .bundle, .gift, .gift-how, .kit { grid-template-columns: minmax(0, 1fr); }
  .kit-visual { width: min(620px, 100%); }
  .gift-shelf { width: min(560px, 100%); }
  .till-copy { position: static; padding-top: 0; }
  .receipt { justify-self: center; width: min(440px, 100%); }
  .addons { padding-top: 0; }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .ex-stage { position: static; }
  .ex-list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-top: 0; gap: 6px; margin-inline: -16px; padding: 3px 16px 6px; scroll-padding-inline: 16px; scrollbar-width: thin; }
  .ex-item { border: 0; border-radius: var(--r2); box-shadow: inset 0 0 0 1px var(--steel); }
  .ex-list .ex-item:focus-visible { outline-offset: -3px; }
  .demo { grid-template-columns: 1fr 1fr; }
  .demo .phone-video { width: min(280px, 100%); }
  .steps { grid-template-columns: 1fr 1fr; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq h2 { position: static; }
}

/* Телефон */
@media (max-width: 720px) {
  html { scroll-padding-top: 142px; }
  .fascia.is-compact { transform: translateY(-60px); }
  .sign { padding-block: 8px; margin-block: -8px; }
  body { font-size: 16px; }
  .fascia { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; gap: 8px 10px; }
  .sign img { height: 28px; }
  .sign span { font-size: 18px; }
  .nav-cta, body[data-src] .nav-cta { display: inline-flex; margin-left: auto; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .aisles { order: 3; flex: 1 0 100%; margin: 0; padding: 3px; }
  .aisles button { flex: 1; justify-content: center; height: 44px; font-size: 15px; }
  .shop { padding: 26px 0 20px; }
  .shop-head { margin-bottom: 20px; gap: 10px; }
  .shop .lead { font-size: 16px; }
  .box { margin: 46px 8px 0; }
  .box::before { width: 64px; margin-left: -32px; top: -24px; height: 28px; background: var(--paper) radial-gradient(ellipse 16px 5px at 50% 12px, var(--panel) 0 98%, transparent 100%); }
  .box::after { top: -36px; height: 28px; }
  .box-brand { padding: 9px 10px; font-size: 13px; gap: 7px; }
  .box-brand img { width: 28px; height: 28px; padding: 5px; }
  .box-window { margin: 12px 12px 0; border-radius: 6px; box-shadow: 0 0 0 1px #cfd5da, 0 0 0 3px var(--paper), 0 0 0 4px #e1e5e8; }
  .pack-go, .box-window + .pack-go { margin-top: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.25; }
  .edge { margin-top: 20px; padding: 7px 8px 9px; }
  .tag { grid-template-columns: 1fr; grid-template-areas: 'name' 'price' 'code'; gap: 6px; padding: 8px 10px 8px; }
  .tag-foot { display: none; }
  .tag-name { font-size: 16px; }
  .tag-price b { font-size: 56px; }
  .tag-price span { font-size: 14px; }
  .tag-code { width: 72px; height: 11px; margin-top: 2px; }
  .both { font-size: 14px; }
  .plaque { margin-top: 32px; }
  .plaque::before, .plaque::after { top: -32px; height: 32px; }
  .plaque::before { left: 36px; }
  .plaque::after { right: 36px; }
  .till { gap: 32px; }
  .paper { padding: 24px 18px 28px; font-size: 14px; }
  .receipt figcaption { font-size: 13.5px; }
  .tags-row { grid-template-columns: 1fr; padding: 10px; gap: 8px; }
  .gift { gap: 32px; }
  .gift-math { gap: 2px 10px; margin: 22px 0 24px; }
  .gift-math b { font-size: 60px; }
  .gift-math i { font-size: 38px; }
  .gift-box { margin: 46px 8px 0; padding-bottom: 12px; }
  .gift-box .box-window { margin: 12px 12px 0; }
  .ribbon { width: 104px; height: 104px; }
  .ribbon span { top: 24px; right: -40px; width: 160px; font-size: 14px; padding: 7px 0 6px; }
  .gift .edge { padding: 7px 8px 9px; }
  .gift .tag { grid-template-columns: 1fr auto; grid-template-areas: 'name price' 'foot price' 'code code'; gap: 0 10px; }
  .gift .tag-foot { display: block; }
  .gift .tag-name { font-size: 19px; }
  .gift .btn { width: 100%; }
  .promo-gift span { font-size: 16px; }
  .kit-stamp { bottom: -36px; left: auto; right: -6px; width: 84px; height: 84px; }
  .kit-stamp small { font-size: 11.5px; }
  .kit-stamp b { font-size: 18px; }
  .kit-points { grid-template-columns: 1fr; }
  .label-facts div { grid-template-columns: 1fr; gap: 2px; }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo .phone-video { width: min(280px, 100%); justify-self: start; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .step-n { font-size: 56px; margin-bottom: 8px; }
  .plans { grid-template-columns: 1fr; gap: 20px; }
  .promo { grid-template-columns: 1fr; }
  .promo-price b { font-size: 128px; }
  .promo .btn { width: 100%; }
  .faq summary { font-size: 20px; }
  .foot a { margin-left: 0; }
  .lightbox { padding: 72px 12px 12px; }
}
@media (max-width: 720px) and (max-height: 760px) {
  .shop { padding-top: 16px; }
  .shop-head { margin-bottom: 14px; }
  .box { margin-top: 40px; }
}
/* Телефон: на полке только выбранный в шапке отдел, коробка во всю ширину */
@media (max-width: 720px) {
  body[data-src] .peg { grid-template-columns: minmax(0, 1fr); }
  body[data-src="fb"] .pack-google, body[data-src="google"] .pack-fb { display: none; }
  body[data-src] .pack .box { margin-inline: 14px; }
  body[data-src] .pack .box-brand { padding: 12px 14px; font-size: 16px; gap: 10px; }
  body[data-src] .pack .box-brand img { width: 34px; height: 34px; padding: 6px; }
  body[data-src] .pack .box-window { margin: 14px 14px 0; }
  body[data-src] .pack-go, body[data-src] .box-window + .pack-go { padding: 12px 14px; font-size: 15px; }
  body[data-src] .pack .edge { padding: 8px 14px 10px; }
  body[data-src] .pack .tag { grid-template-columns: 1fr auto; grid-template-areas: 'name price' 'foot price' 'code code'; gap: 0 10px; max-width: none; }
  body[data-src] .pack .tag-foot { display: block; }
}
@media (max-width: 380px) {
  .sign span { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  html.js .receipt .paper { transform: none; }
}