/* Kodomat: сайт в виде торгового автомата у кафельной стены */
:root{
  --tile:#E9EEEA;         /* кафель */
  --grout:#D3DBD5;        /* швы */
  --ink:#1B1F24;
  --ink-2:#4E5862;
  --cherry:#C8102E;       /* корпус автомата */
  --cherry-hi:#E9475E;
  --cherry-lo:#86091F;
  --chrome-1:#F7F9FB;
  --chrome-2:#AEB7C2;
  --chrome-3:#6F7985;
  --cave:#18242C;         /* глубина витрины */
  --lcd:#0E1A12;
  --amber:#FFB02E;
  --amber-dim:#7A5414;
  --paper:#FFFDF6;        /* наклейки и ценники */
  --display:"Tektur","Golos Text",system-ui,sans-serif;
  --text:"Golos Text",system-ui,sans-serif;
  --pix:"Tektur",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;color:var(--ink);font:400 16px/1.55 var(--text);
  background-color:var(--tile);
  background-image:
    linear-gradient(var(--grout) 2px,transparent 2px),
    linear-gradient(90deg,var(--grout) 2px,transparent 2px);
  background-size:64px 32px;background-position:-1px -1px;
  overflow-x:clip}
a{color:inherit}
svg{display:block}
button{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

/* ---------- стена: шапка ---------- */
.wall-top{max-width:1240px;margin:0 auto;padding:18px 20px 6px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sign{display:inline-block;text-decoration:none;background:var(--cherry);color:#fff;border-radius:10px;padding:8px 14px 7px;
  box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 5px var(--cherry),0 3px 0 var(--cherry-lo)}
.sign span{font:900 22px/1 var(--display);letter-spacing:.12em}
.nav{display:flex;align-items:center;gap:18px;font-weight:600}
.nav a{text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--cherry)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600;box-shadow:0 3px 0 var(--ink)}
.pill svg{width:18px;height:18px}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pill-cart span{background:var(--cherry);color:#fff;border-radius:999px;min-width:22px;padding:1px 6px;text-align:center;font:700 13px/18px var(--display)}

.wall-line{max-width:1240px;margin:8px auto 18px;padding:0 20px;font-size:17px;color:var(--ink-2)}
.wall-line b{color:var(--ink);font-weight:600}

/* ---------- автомат ---------- */
.machine{max-width:1240px;margin:0 auto;padding:0 20px;position:relative}
.marquee{position:relative;background:linear-gradient(180deg,var(--cherry-hi),var(--cherry) 30%,var(--cherry-lo));
  border-radius:34px 34px 0 0;padding:16px 28px 14px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.marquee-text{font:900 clamp(30px,5vw,58px)/1 var(--display);letter-spacing:.14em;color:#FFF6E6;
  text-shadow:0 0 18px rgba(255,214,140,.65),0 2px 0 var(--cherry-lo)}
.marquee-sub{font:700 14px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:#FFD9DF}

.body{display:grid;grid-template-columns:1fr 300px;gap:18px;background:var(--cherry);padding:16px 18px 18px;
  box-shadow:inset 6px 0 0 var(--cherry-hi),inset -6px 0 0 var(--cherry-lo)}

/* витрина */
.window{display:flex;flex-direction:column;gap:10px;min-width:0}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:0;cursor:pointer;background:var(--cherry-lo);color:#FFD9DF;font:700 14px/1 var(--display);letter-spacing:.06em;padding:9px 14px;border-radius:8px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.tab.on{background:var(--paper);color:var(--cherry);box-shadow:0 0 14px rgba(255,214,140,.55)}
.glass{position:relative;border-radius:16px;padding:10px;
  background:linear-gradient(180deg,#22323C,var(--cave) 60%);
  box-shadow:inset 0 0 0 4px var(--chrome-2),inset 0 0 0 6px var(--chrome-3),inset 0 0 40px rgba(0,0,0,.5)}
.glare{pointer-events:none;position:absolute;inset:6px;border-radius:12px;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0 9%,transparent 9% 22%,rgba(255,255,255,.07) 22% 26%,transparent 26%)}
.shelves{display:flex;flex-direction:column;gap:6px}
.shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px 10px 0;position:relative;
  background:radial-gradient(120% 70% at 50% 0,rgba(255,214,140,.10),transparent 70%)}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:6px;border-radius:3px;
  background:linear-gradient(180deg,var(--chrome-1),var(--chrome-3));box-shadow:0 3px 6px rgba(0,0,0,.4)}

.slot{position:relative;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:left;
  transition:opacity .25s ease, filter .25s ease}
.slot.dim{opacity:.22;filter:grayscale(.8)}
.pack{width:100%;aspect-ratio:1/1.12;border-radius:10px 10px 6px 6px;position:relative;overflow:hidden;padding:12px 11px 10px;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c) 45%,color-mix(in srgb,var(--c) 70%,#000));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 8px 14px rgba(0,0,0,.45);
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pack.tilting{transition:transform .08s linear,box-shadow .3s}
.pack::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.2) 42%,transparent 54%)}
.pack::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:4;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 10px)}
.p-art{position:absolute;inset:-6px;z-index:0;background:center top/calc(100% - 0px) auto no-repeat;
  transform:translate(var(--ax,0),var(--ay,0)) scale(1.03);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,filter .3s}
.pack.tilting .p-art{transition:transform .08s linear}
.p-art::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c) 55%,#000) 78%)}
.p-logo{position:absolute;z-index:1;left:50%;top:38%;width:58%;height:40%;object-fit:contain;pointer-events:none;
  transform:translate(calc(-50% + var(--ax,0px) * -1.4),calc(-50% + var(--ay,0px) * -1.4)) translateZ(30px);
  filter:brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,.45));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pack.has-logo .p-art{opacity:.38;filter:saturate(1.2) blur(.5px)}
.p-holo{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;transition:opacity .3s;
  background:radial-gradient(circle at var(--hx,50%) var(--hy,50%),rgba(255,255,255,.55),transparent 42%),
    linear-gradient(115deg,transparent 25%,rgba(255,80,200,.28) 40%,rgba(80,220,255,.3) 50%,rgba(255,230,90,.28) 60%,transparent 75%);
  background-size:100% 100%,240% 240%;background-position:0 0,var(--hx,50%) var(--hy,50%)}
.pack.tilting .p-holo{opacity:.85}
.p-txt{position:relative;z-index:5;transform:translateZ(20px)}
.pack .p-name{font:900 clamp(14px,1.45vw,19px)/1.05 var(--display);letter-spacing:.01em;text-wrap:balance;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.pack .p-sub{font:500 12px/1.25 var(--text);opacity:.88;margin-top:5px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.pack .p-auto{position:absolute;z-index:5;right:8px;top:14px;font:700 10px/1 var(--display);letter-spacing:.08em;background:var(--amber);color:#3A2600;padding:4px 6px;border-radius:5px;box-shadow:0 0 12px rgba(255,176,46,.7)}
.slot:hover .pack,.slot:focus-visible .pack{box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 16px 26px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--a) 45%,transparent)}
/* сервисы: мягкий пакетик с зубчатым краем сверху */
.pack.pouch{clip-path:polygon(0 6px,4% 0,8% 6px,12% 0,16% 6px,20% 0,24% 6px,28% 0,32% 6px,36% 0,40% 6px,44% 0,48% 6px,52% 0,56% 6px,60% 0,64% 6px,68% 0,72% 6px,76% 0,80% 6px,84% 0,88% 6px,92% 0,96% 6px,100% 0,100% 100%,0 100%);
  border-radius:0 0 12px 12px;padding-top:16px}
.pack.pouch::after{top:12px;height:3px;background:rgba(255,255,255,.3)}
/* карты: блистер с отверстием для подвеса */
.pack.card{border-radius:8px;padding-top:24px}
.pack.card::after{left:50%;width:30px;margin-left:-15px;top:7px;height:9px;border-radius:5px;background:var(--cave);box-shadow:inset 0 1px 2px #000}
.coil{width:100%;height:20px;margin-top:-4px;position:relative;z-index:1;overflow:hidden}
.coil svg{width:120%;height:100%}
.slot.vending .coil svg{animation:coil .3s linear 2}
@keyframes coil{to{transform:translateX(-16.66%)}}
.slot.vending .pack{animation:wobble .6s ease-in-out}
@keyframes wobble{0%,100%{translate:0 0}25%{translate:0 3px}50%{translate:2px 6px}75%{translate:-2px 8px}}
.tag{position:relative;z-index:2;margin-top:2px;display:flex;align-items:center;gap:6px;background:var(--paper);color:var(--ink);border-radius:4px;padding:3px 7px;
  font:700 12px/1.2 var(--display);box-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.slot:hover .tag{transform:translateY(-2px) rotate(-2deg)}
.tag i{font-style:normal;background:var(--ink);color:var(--amber);border-radius:3px;padding:1px 5px;font:700 12px/1.2 var(--display);letter-spacing:.04em}
.slot.sel .pack{outline:3px solid var(--amber);outline-offset:3px;animation:selp 1s ease-in-out infinite}
@keyframes selp{50%{outline-color:#fff;box-shadow:0 0 30px var(--amber)}}
.slot.hit .tag{background:var(--amber)}

/* панель */
.panel{background:linear-gradient(180deg,#D7DCE2,#A9B2BD);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;
  box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 var(--chrome-3)}
.lcd{background:var(--lcd);border-radius:10px;padding:12px 14px;box-shadow:inset 0 0 0 3px #2C3A31,inset 0 6px 18px rgba(0,0,0,.6);min-height:92px}
.lcd-line{font:500 15px/1.3 var(--pix);color:var(--amber);text-shadow:0 0 8px rgba(255,176,46,.55);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-big{font:700 28px/1.15 var(--display);letter-spacing:.06em;margin-top:6px}
.search input{width:100%;font:500 15px/1.2 var(--text);padding:11px 12px;border-radius:10px;border:2px solid var(--chrome-3);background:#F5F7F9;color:var(--ink)}
.search input:focus{outline:none;border-color:var(--ink)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keypad button{cursor:pointer;border:0;border-radius:10px;padding:12px 0;font:900 18px/1 var(--display);color:var(--ink);
  background:linear-gradient(180deg,#FDFEFF,#C9D0D8);box-shadow:0 4px 0 var(--chrome-3),inset 0 1px 0 #fff}
.keypad button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--chrome-3)}
.keypad .k-clr{font-size:12px;letter-spacing:.06em;color:var(--cherry)}
.slot-sbp{display:flex;align-items:center;gap:10px;font:700 12px/1.2 var(--display);letter-spacing:.04em;color:var(--ink-2)}
.slot-sbp i{width:54px;height:10px;border-radius:5px;background:#111;box-shadow:inset 0 2px 3px #000,0 1px 0 #fff}
.go-cart{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:0;border-radius:12px;padding:14px;
  background:var(--cherry);color:#fff;font:700 16px/1 var(--display);box-shadow:0 4px 0 var(--cherry-lo)}
.go-cart svg{width:20px;height:20px}
.go-cart b{background:rgba(0,0,0,.25);border-radius:6px;padding:4px 7px}
.go-cart:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cherry-lo)}

/* лоток и ножки */
.tray{background:var(--cherry);padding:0 18px 22px;border-radius:0 0 26px 26px;box-shadow:inset 6px 0 0 var(--cherry-hi),inset -6px 0 0 var(--cherry-lo),inset 0 -6px 0 var(--cherry-lo)}
.tray-mouth{height:70px;border-radius:12px;background:linear-gradient(180deg,#0B1114,#24323A);box-shadow:inset 0 10px 18px #000,0 0 0 4px var(--chrome-2);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;position:relative;overflow:hidden}
.tray-mouth span{font:700 12px/1 var(--display);letter-spacing:.3em;color:#5A6B75}
.feet{display:flex;justify-content:space-between;padding:0 70px}
.feet i{width:70px;height:16px;background:linear-gradient(180deg,#3A3F45,#16191C);border-radius:0 0 8px 8px}

/* одноразовая «загрузка» автомата: неон мигает, полки загораются, товары выезжают */
@media (prefers-reduced-motion:no-preference){
  .marquee-text{animation:flick 1.4s .2s steps(1) both,neon 4s 1.8s ease-in-out infinite}
  @keyframes flick{0%{opacity:.25}12%{opacity:1}18%{opacity:.35}26%{opacity:1}34%{opacity:.6}40%,100%{opacity:1}}
  @keyframes neon{50%{text-shadow:0 0 28px rgba(255,214,140,.95),0 0 60px rgba(255,140,120,.45),0 2px 0 var(--cherry-lo)}}
  .shelf{animation:lit .5s ease-out both}
  .shelf:nth-child(1){animation-delay:.55s}.shelf:nth-child(2){animation-delay:.75s}.shelf:nth-child(3){animation-delay:.95s}
  @keyframes lit{from{filter:brightness(.35)}to{filter:none}}
  .slot{animation:slotin .6s calc(.5s + var(--i,0) * 45ms) cubic-bezier(.2,1.3,.4,1) both}
  @keyframes slotin{from{opacity:0;transform:translateY(-26px) scale(.92)}}
  .tray-mouth.flash::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 100%,rgba(255,176,46,.55),transparent 70%);animation:fl .7s ease-out forwards}
  @keyframes fl{from{opacity:1}to{opacity:0}}
}

/* ---------- секции на стене: всё как детали автомата ---------- */
section.how,section.facts,section.faq{max-width:1240px;margin:0 auto;padding:80px 20px 0}
h2{font:900 clamp(28px,4vw,44px)/1.05 var(--display);letter-spacing:-.01em;margin:0 0 26px}
/* заголовок: красная выпуклая лента этикет-принтера */
h2.tape{display:inline-block;margin:0 0 28px;padding:10px 22px 12px;background:var(--cherry);color:#fff;border-radius:4px;transform:rotate(-1.2deg);
  font:900 clamp(24px,3.4vw,38px)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 -1px 0 rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.25),0 6px 14px rgba(134,9,31,.3);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px)}
h2.tape span{display:inline-block}
h2.tape::before,h2.tape::after{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.25);vertical-align:middle;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
h2.tape::before{margin-right:16px}h2.tape::after{margin-left:16px}

/* инструкция: металлическая табличка на заклёпках */
.plate{position:relative;border-radius:18px;padding:22px 26px 30px;
  background:linear-gradient(180deg,#F1F4F7,#C9D0D8 60%,#B3BCC6);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),linear-gradient(180deg,#F1F4F7,#C9D0D8 60%,#B3BCC6);
  box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 var(--chrome-3),0 16px 30px rgba(27,31,36,.16)}
.rivet{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#AEB7C2 45%,#5E6772);box-shadow:0 1px 1px rgba(0,0,0,.35)}
.rivet::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:rgba(0,0,0,.35);transform:rotate(-30deg)}
.plate-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 18px 20px;padding-bottom:12px;border-bottom:2px dashed rgba(27,31,36,.25);
  font:700 13px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s;position:relative;z-index:1}
.steps li{counter-increment:s;position:relative;background:#FBFCFD;border-radius:14px;padding:18px 16px 18px;box-shadow:inset 0 0 0 2px #D5DBE2,0 3px 0 #AEB7C2;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.steps li:hover{transform:translateY(-4px)}
.steps li::before{content:counter(s);position:absolute;top:-16px;right:14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font:900 19px/1 var(--display);color:#fff;background:radial-gradient(circle at 35% 30%,#FF6B7F,var(--cherry) 55%,var(--cherry-lo));
  box-shadow:0 4px 0 #5C0614,0 0 0 4px #E3E7EC,0 0 0 6px #AEB7C2;transition:box-shadow .3s,filter .3s}
.steps li.on::before{box-shadow:0 4px 0 #5C0614,0 0 0 4px #E3E7EC,0 0 0 6px #AEB7C2,0 0 26px 6px rgba(255,80,100,.65);filter:brightness(1.15)}
.st-ico{display:grid;place-items:center;width:58px;height:58px;border-radius:12px;background:var(--lcd);color:var(--amber);margin-bottom:12px;box-shadow:inset 0 0 0 2px #2C3A31}
.st-ico svg{width:34px;height:34px;filter:drop-shadow(0 0 6px rgba(255,176,46,.6))}
.steps li:not(.on) .st-ico{color:var(--amber-dim)}
.steps li:not(.on) .st-ico svg{filter:none}
.steps h3{font:900 18px/1.2 var(--display);margin:0 0 6px}
.steps p{margin:0;color:var(--ink-2);font-size:15px}
.belt{position:absolute;left:44px;right:44px;bottom:12px;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,#3A3F45 0 10px,#5A6068 10px 20px);box-shadow:inset 0 1px 2px #000}
.belt-coin{position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-15px;border-radius:50%;display:grid;place-items:center;font:900 12px/1 Arial,sans-serif;font-style:normal;color:#7A4A00;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,#FFD03A 50%,#E09A00);box-shadow:0 0 0 2px #C47D00,0 3px 6px rgba(0,0,0,.35);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .belt{animation:beltmove 1s linear infinite}
  @keyframes beltmove{to{background-position:20px 0}}
  .plate.in .belt-coin{animation:roll 6s 1s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes roll{0%{left:0;opacity:0;transform:rotate(0)}6%{opacity:1}90%{opacity:1}100%{left:calc(100% - 22px);opacity:0;transform:rotate(1080deg)}}
}

/* преимущества: чеки из щели принтера */
.facts{padding-top:70px !important}
.printer{position:relative;height:46px;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,#3A3F45,#1E2226);display:flex;align-items:center;gap:12px;padding:0 18px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.2)}
.pr-led{width:10px;height:10px;border-radius:50%;background:#3DDC84;box-shadow:0 0 10px #3DDC84}
.pr-name{font:700 12px/1 var(--display);letter-spacing:.2em;color:#8E99A3}
.pr-slot{position:absolute;left:14px;right:14px;bottom:-5px;height:10px;border-radius:5px;background:#05080A;box-shadow:inset 0 2px 3px #000}
.receipts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:0 30px;position:relative;z-index:0}
.receipt{position:relative;background:#FFFEF8;padding:16px 16px 26px;font:500 14px/1.45 var(--text);color:var(--ink-2);
  box-shadow:0 10px 18px rgba(27,31,36,.12);transform-origin:top center;
  -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}
.receipt:nth-child(odd){transform:rotate(-1.2deg)}.receipt:nth-child(even){transform:rotate(1deg)}
.rc-h{font:500 11px/1.2 var(--pix);letter-spacing:.08em;color:#8A9096;text-align:center;padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed #C9CDD2}
.receipt b{display:block;font:900 19px/1.15 var(--display);color:var(--ink);margin-bottom:6px}
.receipt:first-child b{color:var(--cherry)}
.rc-sum{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px dashed #C9CDD2;font:700 13px/1 var(--pix);color:var(--ink)}
.rc-sum i{font-style:normal}
.barcode{height:26px;margin-top:12px;background:repeating-linear-gradient(90deg,#1B1F24 0 2px,transparent 2px 4px,#1B1F24 4px 5px,transparent 5px 8px,#1B1F24 8px 11px,transparent 11px 12px);opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .receipt.rv{opacity:1;clip-path:inset(0 0 100% 0);transform:translateY(-30px)}
  .receipt.rv.in{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--d,0ms) steps(14),transform 1.1s var(--d,0ms) steps(14)}
  .receipt.rv.in:nth-child(odd){transform:rotate(-1.2deg)}.receipt.rv.in:nth-child(even){transform:rotate(1deg)}
  .receipt{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .receipt:hover{transform:rotate(0) translateY(6px) !important}
}

/* вопросы: чёрные выпуклые этикетки, ответ печатается на LCD */
.faq{max-width:980px !important}
details{margin:0 0 12px;background:none;border:0;padding:0}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:0;position:relative}
summary::-webkit-details-marker{display:none}
summary::before{content:"?";flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font:900 20px/1 var(--display);color:var(--ink);
  background:linear-gradient(180deg,#FDFEFF,#C9D0D8);box-shadow:0 4px 0 var(--chrome-3),inset 0 1px 0 #fff;transition:transform .12s,box-shadow .12s,background .2s,color .2s}
details[open] summary::before{content:"!";background:linear-gradient(180deg,#FFE7B0,#FFB02E);color:#3A2600;transform:translateY(3px);box-shadow:0 1px 0 var(--chrome-3),0 0 18px rgba(255,176,46,.7)}
summary .dymo,summary{font:700 16px/1.3 var(--text)}
.dymo{flex:1;display:block;padding:12px 18px;border-radius:5px;background:#17191C;color:#F4F4F4;letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.25),0 -1px 0 #000;box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.18);
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);transition:transform .2s}
summary:hover .dymo{transform:translateX(4px) rotate(-.4deg)}
summary::after{display:none}
details .ans{margin:10px 0 6px 60px;background:var(--lcd);border-radius:10px;padding:14px 16px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 3px #2C3A31,inset 0 6px 18px rgba(0,0,0,.6)}
details .ans::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
details .ans p{margin:0;color:var(--amber);font:500 15px/1.6 var(--text);text-shadow:0 0 6px rgba(255,176,46,.35);max-width:none}
details .ans p a{color:#FFD27A}
details .ans .cur{display:inline-block;width:.55em;height:1.05em;background:var(--amber);vertical-align:-2px;margin-left:2px;animation:curb .8s steps(1) infinite}
@keyframes curb{50%{opacity:0}}

/* подвал: заводская табличка */
.foot{max-width:1240px;margin:80px auto 0;padding:0 20px 40px;font-size:13px;color:var(--ink-2)}
.serial{position:relative;border-radius:14px;padding:22px 30px 20px;background:linear-gradient(180deg,#E3E7EC,#BCC4CD);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px),linear-gradient(180deg,#E3E7EC,#BCC4CD);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 var(--chrome-3)}
.serial-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid rgba(27,31,36,.15)}
.serial-h b{font:900 22px/1 var(--display);letter-spacing:.14em;color:var(--cherry)}
.serial-h span{font:700 11px/1.3 var(--display);letter-spacing:.16em;color:var(--ink-2)}
.foot .legal{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:600;color:var(--ink);font-size:14px;margin:0 0 12px}
.foot p{margin:0 0 6px;max-width:100ch}
.serial-k{display:inline-block;min-width:118px;font:700 10px/1 var(--display);letter-spacing:.14em;color:var(--ink);margin-right:8px}

/* этикетка товара на странице товара */
.label-card{position:relative;background:#FFFEF8;border-radius:6px;padding:20px 26px 22px;box-shadow:0 14px 28px rgba(27,31,36,.12);transform:rotate(-.5deg);border-left:10px solid var(--c)}
.lc-h{display:flex;justify-content:space-between;font:500 11px/1 var(--pix);letter-spacing:.1em;color:#8A9096;padding-bottom:10px;margin-bottom:14px;border-bottom:1px dashed #C9CDD2}
.label-card h2{margin:0 0 10px;font-size:clamp(24px,3vw,34px)}
.label-card p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2)}
.label-card .barcode{width:160px}

/* ---------- выезжающая панель ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(15,20,24,.45);z-index:40}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:41;background:linear-gradient(180deg,#E3E7EC,#C9D0D8);
  box-shadow:-10px 0 40px rgba(0,0,0,.3);overflow-y:auto;padding:22px 22px 30px;border-left:6px solid var(--cherry)}
.sheet[hidden],.sheet-bg[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.sheet{animation:slide .28s cubic-bezier(.2,.8,.2,1)}@keyframes slide{from{transform:translateX(40px);opacity:0}}}
.sheet-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;border:0;cursor:pointer;background:#fff;font-size:16px;box-shadow:0 3px 0 var(--chrome-3)}
.sh-head{display:flex;gap:14px;align-items:center;margin:4px 46px 16px 0}
.sh-head .pack{width:84px;flex:none;aspect-ratio:1/1.12;padding:8px}
.sh-head .pack .p-name{font-size:13px}
.sh-head .pack .p-sub,.sh-head .pack .p-auto{display:none}
.sh-title{font:900 24px/1.1 var(--display);margin:0}
.sh-slot{font:700 13px/1 var(--display);letter-spacing:.05em;background:var(--ink);color:var(--amber);border-radius:4px;padding:3px 7px;display:inline-block;margin-bottom:6px}
.sh-sub{color:var(--ink-2);font-size:14px;margin:4px 0 0}
.lab{display:block;font:700 13px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{cursor:pointer;border:0;border-radius:10px;padding:10px 12px;background:linear-gradient(180deg,#FDFEFF,#D5DBE2);box-shadow:0 3px 0 var(--chrome-3);
  font:700 14px/1.15 var(--display);text-align:left}
.chip small{display:block;font:600 13px/1.2 var(--text);color:var(--cherry);margin-top:3px}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 3px 0 #000}
.chip[aria-pressed="true"] small{color:var(--amber)}
.inp{width:100%;font:500 16px/1.2 var(--text);padding:13px 14px;border-radius:10px;border:2px solid var(--chrome-3);background:#fff;color:var(--ink)}
.inp:focus{outline:none;border-color:var(--ink)}
.inp.bad{border-color:var(--cherry)}
.hint{font-size:13px;color:var(--ink-2);margin:6px 0 0}
.err{font-size:13px;color:var(--cherry);font-weight:600;margin:6px 0 0}
.note{background:var(--paper);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--ink-2);margin:16px 0 0;border-left:4px solid var(--amber)}
.total{display:flex;justify-content:space-between;align-items:center;background:var(--lcd);border-radius:12px;padding:14px 16px;margin:20px 0 14px}
.total span{font:500 14px/1.2 var(--pix);color:var(--amber-dim)}
.total b{font:700 26px/1 var(--display);color:var(--amber);text-shadow:0 0 8px rgba(255,176,46,.5)}
.total em{display:block;font:500 13px/1.3 var(--pix);color:var(--amber);font-style:normal;margin-top:4px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;cursor:pointer;border:0;border-radius:12px;padding:16px;font:700 17px/1 var(--display);text-decoration:none}
.btn svg{width:20px;height:20px}
.btn-red{background:var(--cherry);color:#fff;box-shadow:0 4px 0 var(--cherry-lo)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--chrome-3);margin-top:10px}
.btn-tg{background:#2AABEE;color:#fff;box-shadow:0 4px 0 #1A7FB3}
.btn:active{transform:translateY(3px)}
.btn[disabled]{opacity:.55;cursor:wait}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:13px;margin:16px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--chrome-3)}
.code-inp{letter-spacing:.5em;text-align:center;font:700 26px/1 var(--pix)}
.cart-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:10px;margin:0 0 10px}
.cart-row .pack{width:52px;aspect-ratio:1/1.12;padding:5px}
.cart-row .pack .p-name{font-size:9px}
.cart-row .pack .p-txt,.cart-row .pack .p-auto{display:none}
.cart-row b{display:block;font:700 15px/1.2 var(--display)}
.cart-row span{display:block;font-size:13px;color:var(--ink-2)}
.cart-row .rm{border:0;background:none;cursor:pointer;color:var(--cherry);font-weight:700;font-size:13px;padding:6px}
.cart-row .pr{font:700 15px/1 var(--display);text-align:right}
.empty{background:var(--paper);border-radius:12px;padding:22px;text-align:center;color:var(--ink-2)}
.order{background:#fff;border-radius:12px;padding:14px;margin:0 0 12px}
.order-h{display:flex;justify-content:space-between;gap:10px;font:700 15px/1.2 var(--display);margin-bottom:6px}
.st{font:700 12px/1 var(--display);padding:5px 8px;border-radius:6px;background:#E8ECEF;white-space:nowrap}
.st-done{background:#DDF5E4;color:#106B32}.st-paid{background:#FFF1D6;color:#8A5400}.st-pending{background:#E8ECEF}.st-bad{background:#FFE1E5;color:var(--cherry)}
.order ul{margin:6px 0 0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.codes{margin-top:10px;background:var(--lcd);color:var(--amber);border-radius:8px;padding:10px 12px;font:500 14px/1.45 var(--pix);white-space:pre-wrap;word-break:break-all}

.toast{position:fixed;left:50%;bottom:24px;visibility:hidden;opacity:0;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;z-index:60;transition:transform .25s ease,opacity .25s ease,visibility .25s;max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0);visibility:visible;opacity:1}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .body{grid-template-columns:1fr 250px}
  .pack .p-sub{display:none}
}
@media (max-width:860px){
  .body{grid-template-columns:1fr;padding:12px}
  .panel{order:-1;display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px}
  .lcd{min-height:0;padding:10px 12px}
  .lcd-big{font-size:22px}
  .search{grid-column:1/-1}
  .keypad,.slot-sbp{display:none}
  .go-cart{margin:0;align-self:stretch;padding:10px 14px}
  .shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:14px 10px 4px;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .shelf .slot{flex:0 0 40%;scroll-snap-align:start}
  .shelf::after{position:sticky;display:none}
  .shelves{gap:2px}
  .shelf{border-bottom:6px solid #C3CBD4;box-shadow:0 3px 6px rgba(0,0,0,.4)}
  .steps,.receipts{grid-template-columns:1fr 1fr}
  .steps{row-gap:30px}
  .nav a{display:none}
}
@media (max-width:520px){
  .wall-top{padding:12px 14px 4px}
  .sign span{font-size:18px}
  .pill{padding:7px 10px}
  .pill #accLabel{display:none}
  .wall-line{padding:0 14px;font-size:15px}
  .machine{padding:0 8px}
  .marquee{padding:12px 16px;border-radius:24px 24px 0 0}
  .marquee-sub{display:none}
  .glass{padding:6px}
  .shelf{gap:8px;padding:10px 4px 0}
  .pack{padding:9px 8px 8px}
  .pack .p-name{font-size:13px}
  .tag{font-size:11px;padding:2px 5px}
  .feet{padding:0 40px}
  .steps,.receipts{grid-template-columns:1fr}
  .plate{padding:18px 14px 30px}
  .receipts{padding:0 14px}
  details .ans{margin-left:0}
  .serial{padding:20px 18px}
  .serial-k{display:block;margin-bottom:4px}
  section.how,section.facts,section.faq{padding-top:50px;padding-left:14px;padding-right:14px}
  .sheet{padding:18px 16px 26px;border-left:0;border-top:6px solid var(--cherry);top:auto;max-height:92vh;border-radius:18px 18px 0 0;width:100%}
}

/* ======================= эффекты ======================= */
/* тёплое пятно света на кафеле за курсором */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(520px circle at var(--cx,50%) var(--cy,30%),rgba(255,214,140,.22),transparent 60%)}
  main,header,footer{position:relative;z-index:1}
}
/* блик на стекле витрины тоже идёт за курсором */
.glass::before,.case::before{content:"";position:absolute;inset:6px;border-radius:12px;pointer-events:none;z-index:3;
  background:radial-gradient(380px circle at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.12),transparent 55%)}
/* огоньки вывески бегут по кругу */
.bulbs{position:absolute;left:22px;right:22px;top:6px;display:flex;justify-content:space-between;pointer-events:none}
.bulbs i{width:7px;height:7px;border-radius:50%;background:#FFE7B0;box-shadow:0 0 8px 2px rgba(255,214,140,.8)}
@media (prefers-reduced-motion:no-preference){
  .bulbs i{animation:bulb 1.2s steps(1) infinite}
  .bulbs i:nth-child(3n+2){animation-delay:.4s}.bulbs i:nth-child(3n){animation-delay:.8s}
  @keyframes bulb{0%{opacity:1}33%,100%{opacity:.22;box-shadow:none}}
}
.marquee{padding-top:22px}
/* LCD: мигание при новом значении, свечение, сканлайны */
.lcd{position:relative;overflow:hidden}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.lcd-big.blink{animation:lcdb .4s steps(2) 2}
@keyframes lcdb{50%{opacity:.25}}
/* клавиши подсвечиваются */
.keypad button{position:relative;overflow:hidden;transition:background .2s}
.keypad button.lit{animation:keylit .5s ease-out}
@keyframes keylit{0%{background:linear-gradient(180deg,#FFE7B0,#FFB02E);box-shadow:0 1px 0 var(--chrome-3),0 0 18px rgba(255,176,46,.9)}}
/* волна от нажатия */
.btn,.chip,.pill,.tab,.go-cart{position:relative;overflow:hidden}
.sheet-x{overflow:hidden;z-index:2}
.rip{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* красная кнопка: пробегает блик */
.btn-shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
@media (prefers-reduced-motion:no-preference){.btn-shine::after{animation:shine 3.2s 1s ease-in-out infinite}}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.btn,.chip,.pill,.go-cart,.keypad button{transition:transform .12s,box-shadow .12s,filter .2s}
.btn:hover,.go-cart:hover,.pill:hover{filter:brightness(1.07)}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{animation:chipon .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes chipon{0%{transform:scale(.92)}100%{transform:scale(1)}}
.chips.pop .chip{animation:chipin .35s var(--d,0ms) cubic-bezier(.2,1.3,.4,1) both}
@keyframes chipin{from{opacity:0;transform:translateY(8px) scale(.9)}}
/* появление при прокрутке */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s var(--d,0ms) ease,transform .7s var(--d,0ms) cubic-bezier(.2,.9,.3,1.2)}
.rv.in{opacity:1;transform:none}
@keyframes dopen{from{opacity:0;transform:translateY(-6px)}}
/* панель: содержимое въезжает по очереди */
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:slide .45s cubic-bezier(.2,1.2,.3,1)}
  @keyframes slide{from{transform:translateX(70px);opacity:0}}
  .sheet-bg{animation:fade .3s ease}
  @keyframes fade{from{opacity:0}}
  #sheetBody.stg > *{animation:stg .45s calc(var(--d,0ms) + 80ms) cubic-bezier(.2,1,.3,1) both}
  @keyframes stg{from{opacity:0;transform:translateY(14px)}}
  .sh-head .pack{animation:headpk .7s .1s cubic-bezier(.2,1.4,.4,1) both}
  @keyframes headpk{from{transform:perspective(600px) rotateY(-70deg) scale(.7);opacity:0}}
  .order{animation:stg .4s var(--d,0ms) ease both}
}
.sheet-bg{backdrop-filter:blur(3px)}
.more-link{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;margin-top:18px;padding:12px 14px 12px 12px;border-radius:16px;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,color-mix(in srgb,var(--c) 75%,#0E1A12),#0E1A12 70%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--a) 55%,transparent),0 5px 0 #05090B,0 10px 24px rgba(0,0,0,.25);
  transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.more-link::after{content:"";position:absolute;top:0;bottom:0;width:35%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);pointer-events:none}
.more-link:hover{transform:translateY(-3px)}
.more-link:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--a) 55%,transparent),0 2px 0 #05090B}
.ml-art{flex:none;width:58px;height:64px;border-radius:10px;background:center top/cover no-repeat,var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 4px 10px rgba(0,0,0,.4);transform:rotate(-6deg);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.more-link:hover .ml-art{transform:rotate(4deg) scale(1.08)}
.ml-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ml-txt small{font:500 11px/1 var(--pix);letter-spacing:.12em;color:var(--amber);text-shadow:0 0 8px rgba(255,176,46,.6)}
.ml-txt b{font:900 17px/1.15 var(--display)}
.ml-txt em{font:500 13px/1.3 var(--text);font-style:normal;opacity:.75}
.ml-go{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:#3A2600;box-shadow:0 0 18px rgba(255,176,46,.55)}
.ml-go svg{width:22px;height:22px}
@media (prefers-reduced-motion:no-preference){
  .ml-go svg{animation:nudge 1.4s ease-in-out infinite}
  @keyframes nudge{50%{transform:translateX(4px)}}
  .more-link::after{animation:shine 3.6s 1.4s ease-in-out infinite}
  .ml-go{animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,176,46,.18),0 0 26px rgba(255,176,46,.8)}}
}
.sh-page{display:inline-block;margin:3px 0 6px 8px;font:700 12px/1 var(--display);letter-spacing:.03em;color:var(--cherry);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;vertical-align:top}
.sh-page:hover{color:var(--ink)}
/* монетки из лотка */
.coin-fx{position:fixed;z-index:70;pointer-events:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:900 14px/1 Arial,sans-serif;color:#7A4A00;background:radial-gradient(circle at 35% 30%,#FFF1A8,#FFD03A 50%,#E09A00);box-shadow:0 0 0 2px #C47D00,0 4px 8px rgba(0,0,0,.3)}
/* тост с полоской статуса */
.toast{display:flex;align-items:center;gap:10px}
.toast::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.toast.ok::before{background:#3DDC84;box-shadow:0 0 10px #3DDC84}
.toast.bad::before{background:#FF5A6A;box-shadow:0 0 10px #FF5A6A}
.toast.on{animation:tst .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes tst{from{transform:translateX(-50%) translateY(30px) scale(.9)}}
/* звук */
.pill-snd{padding:8px 10px}
.pill-snd svg{width:18px;height:18px}
.pill-snd[aria-pressed="false"] .snd-on,.pill-snd[aria-pressed="true"] .snd-off{display:none}
/* ячейки кода */
.code-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:-58px;pointer-events:none;position:relative;z-index:1}
.code-cells i{height:58px;border-radius:10px;background:#fff;border:2px solid var(--chrome-3);display:grid;place-items:center;font:700 26px/1 var(--pix);font-style:normal;transition:border-color .2s,transform .2s}
.code-cells i.full{border-color:var(--ink);transform:translateY(-2px)}
.code-cells i.on{border-color:var(--cherry);box-shadow:0 0 0 3px rgba(200,16,46,.2)}
.code-inp{opacity:0;height:58px}
.amt-wrap{position:relative}
.amt-wrap span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:700 18px/1 var(--display);color:var(--ink-2)}
.empty-ic{width:54px;height:54px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 3px 0 var(--chrome-3)}
.empty-ic svg{width:26px;height:26px}
@media (prefers-reduced-motion:no-preference){.empty-ic{animation:bob 2.4s ease-in-out infinite}}
@keyframes bob{50%{transform:translateY(-6px)}}
.loader{display:inline-block;width:14px;height:14px;border:3px solid var(--chrome-2);border-top-color:var(--cherry);border-radius:50%;margin-right:8px;vertical-align:-2px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.codes{position:relative;padding-top:34px !important}
.copy{position:absolute;top:6px;right:6px;border:0;border-radius:6px;padding:5px 8px;background:#22362A;color:var(--amber);font:700 11px/1 var(--display);cursor:pointer}
.load-err{color:#fff;padding:20px}
.sign{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.sign:hover{transform:rotate(-3deg) scale(1.04)}

/* переходы между страницами: пачка перелетает на страницу товара */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
::view-transition-group(hero){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.9,.3,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ======================= страница товара ======================= */
.pp-main{max-width:1240px;margin:0 auto;padding:0 20px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:600 14px/1.3 var(--text);color:var(--ink-2);margin:6px 0 16px}
.crumbs a{text-decoration:none;border-bottom:2px solid transparent}.crumbs a:hover{border-color:var(--cherry);color:var(--ink)}
.crumbs b{color:var(--ink)}
.pp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:start}
.case{position:relative;border-radius:30px;overflow:hidden;min-height:560px;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 50% 30%,color-mix(in srgb,var(--c) 70%,#22323C),var(--cave) 75%);
  box-shadow:inset 0 0 0 6px var(--cherry),inset 0 0 0 10px var(--chrome-2),inset 0 0 0 12px var(--chrome-3),inset 0 0 80px rgba(0,0,0,.6),0 20px 40px rgba(0,0,0,.2)}
.case-rays{position:absolute;inset:-40%;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 50%,color-mix(in srgb,var(--a) 30%,transparent) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 55%);mask:radial-gradient(circle,#000 10%,transparent 55%)}
.case-light{position:absolute;left:50%;top:-10%;width:70%;height:90%;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 160deg at 50% 0,transparent,rgba(255,240,200,.18) 20deg,transparent 40deg);filter:blur(6px)}
.case-dust i{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;background:var(--a);box-shadow:0 0 10px var(--a);opacity:0}
.case-stage{position:relative;width:min(330px,70%);z-index:2}
.case-stage .pack.hero{border-radius:16px;padding:22px 20px 20px;view-transition-name:hero}
.pack.hero .p-name{font-size:clamp(26px,3vw,36px)}
.pack.hero .p-sub{font-size:15px;display:block !important}
.pack.hero .p-auto{font-size:12px;top:22px;right:16px;padding:6px 9px}
.case-floor{position:absolute;left:8%;right:8%;bottom:-36px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.case-slot{position:absolute;top:26px;left:26px;z-index:3;font:900 18px/1 var(--display);letter-spacing:.06em;background:var(--ink);color:var(--amber);border-radius:6px;padding:7px 10px;box-shadow:0 0 18px rgba(255,176,46,.35)}
.case .glare{z-index:3}
@media (prefers-reduced-motion:no-preference){
  .case-rays{animation:rays 40s linear infinite}
  @keyframes rays{to{transform:rotate(360deg)}}
  .case-stage{animation:float 5s ease-in-out infinite}
  @keyframes float{50%{transform:translateY(-12px)}}
  .case-floor{animation:floor 5s ease-in-out infinite}
  @keyframes floor{50%{transform:scale(.86);opacity:.7}}
  .case-dust i{animation:dust var(--t,7s) var(--dl,0s) linear infinite}
  @keyframes dust{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-600px) translateX(var(--dx,20px)) scale(1);opacity:0}}
  .pp-buy{animation:stg .6s .15s cubic-bezier(.2,1,.3,1) both}
}
.pp-buy{background:linear-gradient(180deg,#E3E7EC,#C3CBD4);border-radius:26px;padding:20px 22px 24px;box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 var(--chrome-3),0 20px 40px rgba(0,0,0,.14);position:relative}
.pp-buy .lcd{min-height:0;margin-bottom:16px}
.pp-title{font:900 clamp(30px,4vw,46px)/1 var(--display);margin:0 0 8px;letter-spacing:-.01em}
.pp-lead{margin:0;color:var(--ink-2);font-size:16px}
.perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0}
.perks li{font:700 13px/1 var(--display);background:var(--paper);border-radius:999px;padding:8px 12px;box-shadow:0 2px 0 var(--chrome-3);display:flex;align-items:center;gap:6px}
.perks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--a)}
.pp-about{padding-top:70px}
.pp-main section.how,.pp-main section.faq{padding-left:0;padding-right:0}
.pp-main .faq{margin:0}
.more{padding-top:70px}
.more-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#22323C,var(--cave));box-shadow:inset 0 0 0 4px var(--chrome-2),inset 0 0 0 6px var(--chrome-3)}
.more-row a{display:flex;flex-direction:column;align-items:center;text-decoration:none}
.more-row a:hover .pack{box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 16px 26px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--a) 45%,transparent)}
.more-row .tag{margin-top:10px}
@media (max-width:980px){
  .pp-hero{grid-template-columns:1fr}
  .case{min-height:420px}
  .more-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .more-row a{flex:0 0 42%;scroll-snap-align:start}
}
@media (max-width:520px){
  .pp-main{padding:0 14px}
  .case{min-height:360px;border-radius:22px}
  .case-stage{width:62%}
  .pp-buy{padding:16px 16px 20px;border-radius:20px}
  .label-card p{font-size:16px}
}

@media (min-width:981px){.case{position:sticky;top:18px}}
.slot:active .pack,.more-row a:active .pack{scale:.96;transition:scale .1s}
.buybar{position:fixed;left:12px;right:12px;bottom:12px;z-index:35;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:16px;
  background:var(--lcd);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 2px #2C3A31;transform:translateY(140%);transition:transform .4s cubic-bezier(.2,1.2,.3,1)}
.buybar.on{transform:none}
.buybar b{flex:1;font:700 22px/1 var(--display);color:var(--amber);text-shadow:0 0 8px rgba(255,176,46,.5)}
.buybar small{display:block;font:500 11px/1.2 var(--pix);color:var(--amber-dim);margin-bottom:3px}
.buybar .btn{width:auto;padding:13px 18px;font-size:15px}
@media (min-width:981px){.buybar{display:none}}

/* ======================= телефон и Telegram: сетка вместо полок ======================= */
.cartbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:36;display:none;align-items:center;gap:12px;padding:10px 10px 10px 14px;border:0;border-radius:16px;cursor:pointer;text-align:left;
  background:var(--cherry);color:#fff;box-shadow:0 4px 0 var(--cherry-lo),0 12px 30px rgba(0,0,0,.3);transform:translateY(160%);transition:transform .4s cubic-bezier(.2,1.2,.3,1)}
.cartbar.on{transform:none}
.cartbar svg{width:22px;height:22px;flex:none}
.cartbar span{flex:1;font:700 15px/1.2 var(--display)}
.cartbar span small{display:block;font:500 12px/1.2 var(--text);opacity:.85}
.cartbar b{background:rgba(0,0,0,.25);border-radius:10px;padding:9px 12px;font:700 15px/1 var(--display)}
@media (max-width:860px){
  .cartbar{display:flex}
  .panel .go-cart{display:none}
  .panel{position:sticky;top:0;z-index:20;grid-template-columns:1fr;gap:8px;border-radius:0 0 16px 16px;margin:-12px -12px 0;padding:10px 12px 10px;box-shadow:inset 0 -3px 0 var(--chrome-3),0 8px 18px rgba(0,0,0,.25)}
  .lcd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:8px}
  .lcd-line{font-size:13px}
  .lcd-big{font-size:17px;margin:0;flex:none}
  .panel .tabs{margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .panel .tabs::-webkit-scrollbar{display:none}
  .panel .tab{flex:none;padding:8px 13px;background:#7A0A1C}
  .panel .tab.on{background:var(--cherry);color:#fff;box-shadow:0 0 12px rgba(200,16,46,.5)}
  .shelves{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px;padding:12px 6px 6px}
  .shelf{display:contents}
  .shelf .slot{flex:none}
  .slot .coil{margin-top:-3px}
  .slot.dim{display:none}
  .glass{min-height:200px}
  .pp-main{padding-bottom:84px}
  body:not(.pp) main{padding-bottom:78px}
}
@media (max-width:620px){ .shelves{grid-template-columns:repeat(2,1fr)} .pack .p-name{font-size:16px} }
@media (max-width:520px){ .panel{margin:-6px -6px 0} }
/* внутри Telegram экономим место: без подписи под шапкой, компактная вывеска */
body.tg .wall-line{display:none}
body.tg .marquee{padding:16px 16px 10px}
body.tg .marquee-text{font-size:26px}
body.tg .wall-top{padding-top:8px}
body.tg .case{min-height:300px}
.empty-grid{grid-column:1/-1;color:#fff;text-align:center;padding:30px 10px;font-weight:600}
@media (max-width:860px){ .toast{bottom:90px} }

/* искры от нажатия */
.spark-fx{position:fixed;z-index:80;width:6px;height:6px;border-radius:50%;pointer-events:none;background:#FFD27A;box-shadow:0 0 8px 2px rgba(255,176,46,.9)}
/* волна света по буквам вывески */
.marquee-text span{display:inline-block;transition:color .2s,text-shadow .2s,transform .2s}
.marquee-text span:hover{color:#fff;transform:translateY(-3px);text-shadow:0 0 22px #FFE7B0,0 0 50px rgba(255,180,120,.8)}
@media (prefers-reduced-motion:no-preference){
  .marquee-text span{animation:lw 6s calc(2s + var(--k) * 90ms) ease-in-out infinite}
  @keyframes lw{0%,8%,100%{transform:none}4%{transform:translateY(-4px);color:#fff;text-shadow:0 0 22px #FFE7B0,0 0 46px rgba(255,180,120,.8)}}
}
/* кафель с лёгким параллаксом */
body{background-position:-1px calc(-1px + var(--sy,0px))}
/* лоток: при наведении заслонка приоткрывается */
.tray-mouth::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,#34424B,#1E282E);border-bottom:2px solid #6F7985;transform-origin:top;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.machine:hover .tray-mouth::before{transform:rotateX(55deg)}
.btn-red,.go-cart,.ml-go{transition:translate .15s ease-out,transform .12s,box-shadow .12s,filter .2s}
.rc-link{color:var(--cherry);font-weight:700;text-decoration:none;border-bottom:2px dotted currentColor}
.rc-link:hover{border-bottom-style:solid}
.rc-btn{display:block;margin-top:12px;padding:9px 10px;border:2px dashed var(--ink);border-radius:6px;text-align:center;text-decoration:none;color:var(--ink);font:700 13px/1 var(--pix);letter-spacing:.06em;transition:background .2s,color .2s}
.rc-btn:hover{background:var(--ink);color:var(--amber);border-style:solid}

/* коды в кабинете: талончики */
.tickets{margin-top:12px;background:var(--lcd);border-radius:12px;padding:12px;box-shadow:inset 0 0 0 2px #2C3A31}
.tk-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:8px;color:var(--amber);font:600 13px/1.3 var(--text)}
.tk-h b{font:700 14px/1.2 var(--display);color:#FFE7B0}
.tk-asm{font:500 12px/1.2 var(--pix);color:var(--amber-dim);background:#1A2A1F;padding:3px 6px;border-radius:4px}
.tk-how{margin-left:auto;color:var(--amber);font-weight:700;text-decoration:none;font-size:12px}
.ticket{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:#FFFEF8;border-radius:8px;padding:9px 10px;margin-top:6px;position:relative}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--lcd)}
.ticket::before{left:-6px}.ticket::after{right:-6px}
.tk-l{font:700 11px/1 var(--display);letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;padding-left:4px}
.tk-c{font:700 15px/1.3 ui-monospace,Menlo,Consolas,monospace;color:var(--ink);word-break:break-all;user-select:all}
.tk-b,.tk-all{border:0;cursor:pointer;border-radius:7px;padding:8px 10px;background:var(--ink);color:var(--amber);font:700 12px/1 var(--display);white-space:nowrap}
.tk-b.ok,.tk-all.ok{background:#1E7A45;color:#fff}
.tk-all{display:block;width:100%;margin-top:8px;padding:10px;background:var(--amber);color:#3A2600}
@media (max-width:520px){.ticket{grid-template-columns:1fr auto}.tk-l{grid-column:1/-1;padding:0}}