/* Склад «Ани» — стили витрины (вынесено из index.html, #19) */
:root{
  --ink:#0F2E4C; --ink-2:#36506B; --muted:#5E738A; --blue:#2E75B6; --blue-d:#1F5E98;
  --tissue:#F4F7FA; --mist:#DCE7F2; --paper:#FFFFFF; --leaf:#17794A; --marker:#FFE14A; --line:#C9D7E5;
  --danger:#B3261E;
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --text:"Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{margin:0; font-family:var(--text); color:var(--ink); background:var(--tissue); font-size:16px; line-height:1.5;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
button,input,textarea,select{font:inherit; color:inherit}
a{color:var(--blue-d)}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:40; background:rgba(244,247,250,.97); backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent; transition:border-color .2s}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:41;
  background:rgba(244,247,250,.97); backdrop-filter:blur(10px)}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; gap:24px; height:72px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.logo b{font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.02em}
.logo span{font-size:13px; color:var(--muted); line-height:1.2; max-width:130px}
.nav{display:flex; gap:22px; margin-left:auto}
.nav a{color:var(--ink-2); text-decoration:none; font-weight:500}
.nav a:hover{color:var(--blue-d)}
@media (max-width:1100px){ .nav a[data-price]{display:none} }
.phone{font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap}
.cart-btn{position:relative; display:flex; align-items:center; gap:10px; border:0; background:var(--ink); color:#fff;
  padding:10px 16px 10px 14px; border-radius:999px; cursor:pointer; font-weight:600}
.cart-btn svg{width:20px; height:20px}
.cart-btn .count{min-width:22px; height:22px; border-radius:11px; background:var(--marker); color:var(--ink); font-size:13px;
  display:grid; place-items:center; padding:0 6px; font-weight:700}
.cart-btn.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.callbtn,.menubtn{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; cursor:pointer; flex:none}
.callbtn{background:var(--blue); color:#fff; text-decoration:none}
.menubtn{background:var(--paper); color:var(--ink); border:0; box-shadow:inset 0 0 0 1px var(--line)}
.callbtn svg,.menubtn svg{width:22px; height:22px}
.mmenu{position:absolute; top:calc(72px + env(safe-area-inset-top,0px)); left:16px; right:16px; background:var(--paper); border-radius:var(--r-md); box-shadow:0 24px 44px -24px rgba(15,46,76,.55); padding:8px; z-index:50; flex-direction:column}
.mmenu:not([hidden]){display:flex}
.mmenu a{padding:14px 16px; text-decoration:none; color:var(--ink); border-radius:10px; font-weight:500}
.mmenu a:hover{background:var(--tissue)}

/* ---------- hero: рулон разматывает лист ---------- */
.hero{position:relative; padding:34px 0 58px; overflow:hidden}
.hero .depth{position:absolute; inset:0; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(40px); opacity:.75}
.blob.a{width:520px; height:520px; left:-120px; top:-160px; background:#E4EEF8}
.blob.b{width:420px; height:420px; right:-80px; top:60px; background:#E9F2FB}
.blob.c{width:300px; height:300px; left:45%; bottom:-180px; background:#FFF4B8; opacity:.5}
.stage{position:relative; min-height:clamp(440px, 58vh, 560px); display:flex}
.sheet{position:relative; flex:1; margin-right:64px; display:flex; background:var(--paper); border-radius:6px 18px 18px 6px;
  box-shadow:0 1px 0 rgba(15,46,76,.06), 0 18px 40px -22px rgba(15,46,76,.35);
  clip-path:inset(0 100% 0 0); will-change:clip-path;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(15,46,76,.055) 1.1px, transparent 1.6px),
    repeating-linear-gradient(90deg, transparent 0 279px, rgba(15,46,76,.0) 279px 280px);
  background-size:14px 14px, auto}
.perf{position:absolute; top:0; bottom:0; width:0; border-left:2px dashed rgba(46,117,182,.22)}
.sheet-in{position:relative; flex:1; min-width:0; padding:clamp(28px,5vw,58px); display:flex; flex-direction:column; justify-content:center; max-width:820px}
@media (min-width:721px) and (max-height:860px){
  .hero h1{font-size:clamp(30px, 3.7vw, 50px); margin-bottom:16px}
  .sheet-in{padding-top:36px; padding-bottom:36px}
  .kicker{margin-bottom:12px}
  .stamp{margin-top:16px}
}
.kicker{color:var(--muted); font-weight:500; margin:0 0 18px}
.hero h1{font-family:var(--display); font-weight:700; font-size:clamp(30px, 4.6vw, 60px); line-height:1.02; letter-spacing:-.035em; margin:0 0 22px; color:var(--ink)}
.hero h1 .w{display:inline-block; opacity:0; transform:translateY(10px) scale(1.04); filter:blur(5px);
  text-shadow:0 1px 0 #fff, 0 -1px 0 rgba(15,46,76,.18);
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.9,.25,1.15), filter .5s ease}
.hero h1 .w.on{opacity:1; transform:none; filter:none}
.lead{font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); max-width:560px; margin:0 0 28px; opacity:0; transition:opacity .6s ease .1s}
.ctas{display:flex; flex-wrap:wrap; gap:12px; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease}
.revealed .lead,.revealed .ctas,.revealed .stamp{opacity:1; transform:none}
.btn{border:0; border-radius:999px; padding:14px 22px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-size:16px}
.btn.primary{background:var(--blue); color:#fff}
.btn.primary:hover{background:var(--blue-d)}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--ink-2)}
.stamp{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:20px 0 2px; opacity:0; transition:opacity .6s ease .25s}
.mark{background:linear-gradient(transparent 12%, var(--marker) 12% 88%, transparent 88%); padding:2px 8px; font-weight:600;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; border-radius:3px}
.stamp small{color:var(--muted)}
/* рулон: вертикальный цилиндр */
.roll{position:absolute; top:-14px; bottom:-14px; width:132px; left:0; transform:translateX(-66px); will-change:transform; z-index:3}
.roll .body{position:absolute; inset:14px 0; border-radius:10px/14px;
  background:
   linear-gradient(90deg, rgba(15,46,76,.28), rgba(15,46,76,.05) 22%, rgba(255,255,255,.95) 45%, rgba(255,255,255,.4) 62%, rgba(15,46,76,.22) 92%, rgba(15,46,76,.34)),
   repeating-linear-gradient(90deg, #fff 0 9px, #F2F6FA 9px 10px);
  background-color:#fff; box-shadow:-18px 0 26px -16px rgba(15,46,76,.45), 0 22px 30px -18px rgba(15,46,76,.45)}
.roll .emboss{position:absolute; inset:14px 6px; border-radius:8px; background-image:radial-gradient(circle, rgba(15,46,76,.10) 1.2px, transparent 1.8px);
  background-size:12px 12px; mix-blend-mode:multiply; opacity:.9}
.roll .cap{position:absolute; left:0; right:0; top:0; height:28px; border-radius:50%; background:radial-gradient(ellipse at 50% 50%, #0F2E4C 0 13%, #C2D3E4 14% 24%, #fff 25% 100%);
  box-shadow:inset 0 0 0 1px rgba(15,46,76,.15)}
.roll .rings{position:absolute; left:0; right:0; top:0; height:28px; border-radius:50%;
  background:repeating-radial-gradient(ellipse at 50% 50%, transparent 0 7px, rgba(15,46,76,.10) 7px 8px); mask:radial-gradient(ellipse, transparent 24%, #000 25%)}
.roll .base{position:absolute; left:0; right:0; bottom:0; height:28px; border-radius:50%; background:#E6EEF6; box-shadow:0 8px 18px -8px rgba(15,46,76,.5); z-index:-1}
@media (max-width:720px){
  .stage{min-height:0}
  .sheet{margin-right:30px}
  .roll{width:84px}
  .stamp{margin:16px 0 4px}
  .sheet-in{justify-content:flex-start; padding-top:34px}
}

/* ---------- уровни цены: отрывные купоны ---------- */
.section{padding:56px 0}
.h2{font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,36px); letter-spacing:-.02em; line-height:1.1; margin:0 0 12px}
.sub{color:var(--muted); margin:0 0 28px; max-width:640px}
.coupons{display:grid; grid-template-columns:repeat(3,1fr); background:var(--paper); border-radius:var(--r-lg); position:relative;
  box-shadow:0 18px 40px -30px rgba(15,46,76,.5)}
.coupon{padding:28px 28px 26px; position:relative}
.coupon + .coupon{border-left:2px dashed var(--line)}
.coupon + .coupon::before,.coupon + .coupon::after{content:""; position:absolute; left:-12px; width:22px; height:22px; border-radius:50%; background:var(--tissue)}
.coupon + .coupon::before{top:-11px} .coupon + .coupon::after{bottom:-11px}
.coupon.cur{background:linear-gradient(#FFFBE3,#FFFBE3)}
.coupon:first-child.cur{border-radius:var(--r-lg) 0 0 var(--r-lg)} .coupon:last-child.cur{border-radius:0 var(--r-lg) var(--r-lg) 0}
.coupon{transition:background .35s}
.coupon .lvl{font-size:14px; color:var(--muted); font-weight:500}
.coupon h3{font-family:var(--display); font-weight:600; font-size:22px; margin:6px 0 8px; letter-spacing:-.01em}
.coupon p{margin:0 0 4px; color:var(--ink-2)}
.coupon .ex{margin-top:16px; font-size:15px; color:var(--muted)}
.coupon .ex b{display:block; font-family:var(--display); font-size:26px; color:var(--ink); font-weight:600; letter-spacing:-.02em}
@media (max-width:820px){.coupons{grid-template-columns:1fr} .coupon + .coupon{border-left:0; border-top:2px dashed var(--line)}
  .coupon + .coupon::before{top:-12px; left:-11px} .coupon + .coupon::after{top:-12px; bottom:auto; left:auto; right:-11px}}

/* ---------- каталог ---------- */
.bar{position:sticky; top:72px; z-index:20; background:var(--tissue); padding:14px 0 14px; margin-bottom:10px}
.bar .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.seg{display:flex; background:var(--paper); border-radius:999px; padding:4px; box-shadow:inset 0 0 0 1px var(--line); overflow-x:auto; max-width:100%}
.seg button{border:0; background:transparent; padding:9px 15px; border-radius:999px; cursor:pointer; font-weight:500; white-space:nowrap; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink); color:#fff}
.toggle{display:flex; align-items:center; gap:10px; background:var(--paper); border-radius:999px; padding:6px 14px 6px 6px; box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; user-select:none}
.toggle input{appearance:none; width:42px; height:24px; border-radius:12px; background:#C8D4E0; position:relative; margin:0; cursor:pointer; transition:background .2s}
.toggle input::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.toggle input:checked{background:var(--leaf)} .toggle input:checked::after{transform:translateX(18px)}
.search{flex:1; min-width:200px; border:0; background:var(--paper); border-radius:999px; padding:11px 18px; box-shadow:inset 0 0 0 1px var(--line)}
.brands{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.brands button{border:0; background:transparent; box-shadow:inset 0 0 0 1px var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; font-size:14px; color:var(--ink-2)}
.brands button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink); color:var(--ink); font-weight:600}
.found{color:var(--muted); font-size:14px; margin:4px 0 16px}
@media (max-width:720px){
  .bar{position:static; padding-top:4px}
  .brands{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
  .brands button{flex:none}
  .grid{gap:16px}
}
/* фото последнего поступления на листе */
.goods{position:absolute; right:5%; top:50%; width:min(34%, 400px); aspect-ratio:1; transform:translateY(-50%); pointer-events:none}
.goods .g{position:absolute; width:58%; aspect-ratio:1; border-radius:20px; background:var(--tint); display:grid; place-items:center;
  opacity:0; transform:translateY(24px) scale(.9) rotate(var(--rot)); transition:opacity .5s ease, transform .9s cubic-bezier(.2,.9,.25,1.2);
  box-shadow:0 24px 40px -26px rgba(15,46,76,.5)}
.goods .g img{width:80%; height:80%; object-fit:contain; mix-blend-mode:multiply}
.goods .g.on{opacity:1; transform:translate(var(--px,0), var(--py,0)) rotate(var(--rot))}
.goods .g:nth-child(1){left:0; top:4%; --rot:-6deg; z-index:2}
.goods .g:nth-child(2){right:0; top:0; width:50%; --rot:5deg; z-index:1}
.goods .g:nth-child(3){left:24%; bottom:0; width:54%; --rot:2deg; z-index:3}
.goods .cap{position:absolute; left:0; right:0; bottom:-34px; text-align:center; font-size:14px; color:var(--muted); opacity:0; transition:opacity .5s ease .4s}
.revealed .goods .cap{opacity:1}
@media (min-width:1021px){ .sheet-in{max-width:60%} .stamp{max-width:58%} }
@media (max-width:1020px){ .goods{display:none} }

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:22px}
.item{background:var(--paper); border-radius:var(--r-lg); display:flex; flex-direction:column; position:relative;
  box-shadow:0 1px 0 rgba(15,46,76,.05); transition:box-shadow .25s}
.item:hover{box-shadow:0 22px 40px -28px rgba(15,46,76,.55)}
.item.out{opacity:1}
.shot{position:relative; margin:10px 10px 0; border-radius:16px; aspect-ratio:5/4; display:grid; place-items:center; overflow:hidden; cursor:zoom-in; border:0; padding:0; background:var(--tint,#EEF2F6)}
.shot img{width:80%; height:80%; margin-top:6%; object-fit:contain; filter:drop-shadow(0 16px 14px rgba(15,46,76,.16)) drop-shadow(0 3px 3px rgba(15,46,76,.10)); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.item:hover .shot img{transform:translateY(-4px) scale(1.035)}
.shot .floor{position:absolute; left:24%; right:24%; bottom:7%; height:14px; border-radius:50%; background:rgba(15,46,76,.13); filter:blur(6px)}
.badges{position:absolute; left:12px; top:12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.badge{font-size:13px; font-weight:600; padding:4px 10px; border-radius:999px; background:#fff; color:var(--ink)}
.badge.in{color:#fff; background:var(--leaf)}
.badge.out{background:rgba(255,255,255,.85); color:var(--muted)}
.badge.new{background:var(--marker)}
/* товар «под заказ»: спокойный янтарный, а не серый «недоступно» */
.badge.soon{background:#FFF1D6; color:#7A4A00; box-shadow:inset 0 0 0 1px #F2D29B}
.leadnote{font-size:13px; line-height:1.4; color:#7A4A00; background:#FFF8EA; border-radius:var(--r-sm); padding:8px 10px; margin:2px 0 10px}
.leadtag{font-size:13px; color:#7A4A00; margin-top:2px}
.leadbox{font-size:14px; line-height:1.45; color:#5C3A00; background:#FFF4DE; border-radius:var(--r-md); padding:10px 14px; margin-bottom:12px}
.moreord{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:20px; padding:18px 22px; border-radius:var(--r-lg); background:#FFF4DE; box-shadow:inset 0 0 0 1px #F2D29B}
.moreord div{display:flex; flex-direction:column; gap:2px} .moreord b{font-size:17px} .moreord span{color:#6B4A12; font-size:15px}
.moreord .btn{background:#fff}
.leadtag .clk,.leadbox .clk{width:14px; height:14px; vertical-align:-2px; margin-right:5px; flex:none}
.perfline{height:0; border-top:2px dashed var(--mist); margin:14px 18px 0; position:relative}
.info{padding:12px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
.info h3{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.01em; line-height:1.2; margin:0}
.info h3 button{all:unset; cursor:pointer}
.info h3 button:hover{color:var(--blue-d)}
.info .meta{font-size:14px; color:var(--muted); margin:-4px 0 0}
.tiers{position:relative; display:grid; gap:2px; margin-top:2px}
.tiers .hl{position:absolute; left:-8px; right:-8px; height:30px; border-radius:8px; background:var(--marker); z-index:0;
  transition:transform .45s cubic-bezier(.3,1.35,.45,1), opacity .2s; opacity:0}
.tier{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:baseline; height:30px; padding:0 2px; font-size:14px; color:var(--ink-2)}
.tier b{font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-.01em}
.tier.active{color:var(--ink)}
.pack{font-size:13px; color:var(--muted)}
.buy{display:flex; gap:8px; align-items:center; margin-top:auto; flex-wrap:wrap}
.step{display:flex; align-items:center; background:var(--tissue); border-radius:999px; box-shadow:inset 0 0 0 1px var(--line)}
.step button{border:0; background:transparent; width:38px; height:40px; cursor:pointer; font-size:20px; color:var(--ink); border-radius:999px}
.step input{width:64px; border:0; background:transparent; text-align:center; font-weight:600; -moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none}
.quick{display:flex; gap:6px}
.quick button{border:0; background:transparent; box-shadow:inset 0 0 0 1px var(--line); border-radius:999px; padding:8px 11px; font-size:13px; cursor:pointer; color:var(--ink-2); white-space:nowrap}
.quick button:hover{box-shadow:inset 0 0 0 1px var(--ink-2); color:var(--ink)}
.add{flex:1; border:0; background:var(--ink); color:#fff; border-radius:999px; height:42px; font-weight:600; cursor:pointer; min-width:120px}
.add:hover{background:#163e66}
.linesum{font-size:14px; color:var(--ink-2)}
.linesum b{color:var(--ink)}
.empty{background:var(--paper); border-radius:var(--r-lg); padding:40px; text-align:center}
.empty p{color:var(--muted)}

/* ---------- модальное окно товара ---------- */
dialog{border:0; padding:0; border-radius:var(--r-lg); max-width:880px; width:calc(100% - 32px); color:var(--ink); box-shadow:0 40px 80px -30px rgba(15,46,76,.6)}
dialog::backdrop{background:rgba(15,46,76,.45); backdrop-filter:blur(3px)}
.dlg{display:grid; grid-template-columns:1fr 1fr}
.dlg .shot{margin:14px; aspect-ratio:1; cursor:default}
.dlg .body{padding:28px 28px 28px 10px; display:flex; flex-direction:column; gap:12px}
.dlg h3{font-family:var(--display); font-size:24px; margin:0; letter-spacing:-.02em; line-height:1.15}
.dlg table{border-collapse:collapse; width:100%; font-size:15px}
.dlg td,.dlg th{padding:8px 4px; text-align:left; border-bottom:1px solid var(--mist)}
.dlg th{font-weight:500; color:var(--muted)}
.dlg td.r,.dlg th.r{text-align:right}
.close{position:absolute; right:12px; top:12px; width:40px; height:40px; border-radius:50%; border:0; background:#fff; cursor:pointer; font-size:22px; box-shadow:0 2px 10px rgba(15,46,76,.15); z-index:2}
@media (max-width:720px){.dlg{grid-template-columns:1fr} .dlg .body{padding:0 20px 24px}}

/* ---------- корзина ---------- */
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--paper); z-index:60; transform:translateX(105%);
  transition:transform .45s cubic-bezier(.2,.85,.2,1); display:flex; flex-direction:column; box-shadow:-30px 0 60px -30px rgba(15,46,76,.5);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer:not(.open){visibility:hidden; transition:transform .45s cubic-bezier(.2,.85,.2,1), visibility 0s .45s}
.drawer.open{transform:none}
.scrim{position:fixed; inset:0; background:rgba(15,46,76,.35); z-index:55; opacity:0; pointer-events:none; transition:opacity .3s}
.scrim.open{opacity:1; pointer-events:auto}
.drawer header{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--mist)}
.drawer header h2{font-family:var(--display); font-size:22px; margin:0; font-weight:600}
.drawer .x{border:0; background:var(--tissue); width:40px; height:40px; border-radius:50%; font-size:22px; cursor:pointer}
.lines{flex:1; overflow:auto; padding:8px 22px}
.cl{display:grid; grid-template-columns:64px 1fr; gap:12px; padding:14px 0; border-bottom:1px dashed var(--mist)}
.cl .th{width:64px; height:64px; border-radius:12px; background:var(--tint,#EEF2F6); display:grid; place-items:center}
.cl .th img{width:88%; height:88%; object-fit:contain}
.cl h4{margin:0; font-size:15px; font-weight:600; line-height:1.25}
.cl .t{font-size:13px; color:var(--muted)}
.cl .r{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap}
.cl .qty{display:flex; flex-direction:column; gap:4px}
.cl .ql{font-size:12px; color:var(--muted); font-weight:500}
.cl .step button{width:44px; height:44px; font-size:22px}
.cl .step button:hover{background:var(--mist)}
.cl .step input{width:58px}
.cl .hint{font-size:13px; margin-top:6px}
.cl .del{border:0; background:none; color:var(--danger); cursor:pointer; font-size:14px; text-decoration:underline; padding:8px 0; margin-top:4px}
.total{padding:16px 22px; border-top:1px solid var(--mist); background:var(--tissue); max-height:62vh; overflow:auto}
.lines{min-height:120px}
.total .sum{display:flex; justify-content:space-between; align-items:baseline}
.total .sum b{font-family:var(--display); font-size:26px; letter-spacing:-.02em}
.total .save{font-size:14px; color:var(--leaf); margin-top:2px}
.form{display:grid; gap:10px; margin-top:14px}
.form input:not([type=radio]):not([type=checkbox]),.form textarea{width:100%; border:0; border-radius:12px; padding:12px 14px; background:#fff; box-shadow:inset 0 0 0 1px var(--line)}
.form textarea{min-height:64px; resize:vertical}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.form .fld{display:grid; gap:5px}
.form label,.form .lbl{font-size:13px; color:var(--ink-2); font-weight:500}
.form .req{color:var(--danger)}
.form .opt{color:var(--muted); font-weight:400}
.form input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)}
.form .btns{display:flex; gap:10px; flex-wrap:wrap}
.form .btns{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
.form .btns .btn{justify-content:center; text-align:center; padding-left:12px; padding-right:12px; line-height:1.25}
.form .btns .wa-alt{background:#fff; color:#0F6A38; box-shadow:inset 0 0 0 2px #9ED1B4}
.form .btns .wa-alt:hover{background:#EEF8F2}
.form .btns .or{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin:0}
.form .btns .or::before,.form .btns .or::after{content:""; flex:1; border-top:1px solid var(--line)}
.pay input[type=radio]{width:18px; height:18px; margin:0; flex:none; accent-color:var(--blue)}
.form .btns .btn{flex:1; justify-content:center}
.wa{background:#157F43; color:#fff}
.note{font-size:13px; color:var(--muted)}
.err{color:var(--danger); font-size:14px}
.done{padding:30px 22px; text-align:center}
.done .dlrow{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.done h3{font-family:var(--display); font-size:24px; margin:0 0 10px}

.fab{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:45; display:none}
/* кнопка «Наверх»: появляется после прокрутки, кольцо показывает, сколько страницы пройдено */
.totop{position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:48; width:52px; height:52px; border:0; border-radius:50%;
  background:rgba(255,255,255,.96); color:var(--ink); cursor:pointer; display:grid; place-items:center; padding:0;
  box-shadow:0 12px 28px -12px rgba(15,46,76,.55), 0 0 0 1px rgba(15,46,76,.06);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s, background .2s, color .2s}
.totop.show{opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s, background .2s, color .2s}
.totop:hover{background:var(--ink); color:#fff}
.totop:hover .ar{transform:translateY(-2px)}
.totop:active{transform:scale(.94)}
.totop .ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.totop .ring circle{fill:none; stroke-width:2.5}
.totop .tr{stroke:var(--mist)}
.totop .pr{stroke:var(--blue); stroke-linecap:round; stroke-dasharray:138.2; stroke-dashoffset:138.2; transition:stroke-dashoffset .12s linear}
.totop:hover .tr{stroke:rgba(255,255,255,.18)}
.totop:hover .pr{stroke:var(--marker)}
.totop .ar{width:22px; height:22px; position:relative; transition:transform .2s}
@media (prefers-reduced-motion:reduce){ .totop,.totop.show,.totop .ar,.totop .pr{transition:none} }
/* нижнее меню на телефоне */
.tabbar,.bsheet,.bscrim{display:none}
@media (max-width:860px){
  /* «островок» в духе One UI / Galaxy Store */
  .tabbar{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:50;
    width:calc(100% - 24px); max-width:520px; transform:translateX(-50%); padding:6px; border-radius:28px;
    background:rgba(255,255,255,.84); backdrop-filter:saturate(1.6) blur(16px); -webkit-backdrop-filter:saturate(1.6) blur(16px);
    border:1px solid rgba(201,215,229,.7); box-shadow:0 18px 40px -18px rgba(15,46,76,.55), 0 2px 6px rgba(15,46,76,.08);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s}
  .tb-off .tabbar{transform:translate(-50%, calc(100% + 28px)); opacity:0; pointer-events:none}
  .tabbar a,.tabbar button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:54px; border:0; background:none; padding:0;
    color:var(--ink-2); text-decoration:none; font:500 11.5px/1.1 var(--text); cursor:pointer; border-radius:22px; -webkit-tap-highlight-color:transparent; transition:color .2s}
  .tabbar svg{width:22px; height:22px; position:relative; transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .tabbar .ic{position:relative; display:inline-flex; align-items:center; justify-content:center; width:52px; height:30px}
  .tabbar .ic::before{content:""; position:absolute; inset:0; border-radius:999px; background:var(--mist); opacity:0; transform:scaleX(.45); transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s}
  .tabbar [aria-current="true"]{color:var(--blue-d); font-weight:700}
  .tabbar [aria-current="true"] .ic::before{opacity:1; transform:none}
  .tabbar [aria-current="true"] svg{stroke-width:2.3}
  .tabbar a:active svg,.tabbar button:active svg{transform:scale(.88)}
  /* прайс — фирменный акцент, чтобы был на виду */
  .tabbar #priceTab .ic::after{content:""; position:absolute; top:1px; right:11px; width:8px; height:8px; border-radius:50%; background:var(--marker); box-shadow:0 0 0 2px #fff}
  .tabbar #priceTab .ic::before{background:#FFF3B0}
  .tabbar #priceTab[aria-current="true"]{color:var(--ink)}
  .tabbar .tb-count{position:absolute; top:-5px; right:4px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--marker); color:var(--ink);
    font-size:11.5px; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px #fff; z-index:1}
  .tabbar .tb-count[hidden]{display:none}
  .tabbar #cartTab.bump .ic{animation:bump .5s}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .fab{display:none!important}
  .totop{right:16px; bottom:calc(92px + env(safe-area-inset-bottom,0px)); width:46px; height:46px; transition:bottom .35s cubic-bezier(.2,.8,.2,1), opacity .3s, transform .35s, visibility 0s}
  .tb-off .totop{bottom:calc(20px + env(safe-area-inset-bottom,0px))}

  /* нижние листы: «Прайс» и «Ещё» */
  .bscrim{display:block; position:fixed; inset:0; z-index:58; background:rgba(15,46,76,.38); opacity:0; pointer-events:none; transition:opacity .3s}
  .bscrim.open{opacity:1; pointer-events:auto}
  .bsheet{display:flex; flex-direction:column; position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); z-index:59; max-width:560px; margin:0 auto;
    max-height:calc(100dvh - 72px); background:var(--tissue); border-radius:28px; box-shadow:0 30px 60px -20px rgba(15,46,76,.6);
    transform:translateY(calc(100% + 24px)); visibility:hidden; transition:transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s .38s}
  .bsheet.open{transform:none; visibility:visible; transition:transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s}
  .bsheet.drag{transition:none}
  .bsheet .grab{flex:none; padding:10px 0 4px; display:grid; place-items:center; touch-action:none; cursor:grab}
  .bsheet .grab::before{content:""; width:38px; height:5px; border-radius:3px; background:var(--line)}
  .bsheet .bs-in{overflow:auto; overscroll-behavior:contain; padding:4px 16px 18px}
  .bsheet h3{font:700 22px/1.2 var(--display); color:var(--ink); margin:6px 6px 2px}
  .bsheet .sub{color:var(--muted); font-size:14px; margin:0 6px 14px}
  .bsheet .grp{background:var(--paper); border-radius:20px; padding:4px; margin-bottom:12px}
  .bsheet .gl{font-size:13px; font-weight:600; color:var(--muted); margin:14px 10px 6px}
  .bsheet .it{display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:8px 12px; border:0; background:none; border-radius:16px;
    color:var(--ink); text-decoration:none; font:500 16px/1.25 var(--text); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent}
  .bsheet .it + .it{box-shadow:0 -1px 0 var(--tissue)}
  .bsheet .it:active{background:var(--tissue)}
  .bsheet .it small{display:block; color:var(--muted); font-size:13px; font-weight:400; margin-top:2px}
  .bsheet .it .go{margin-left:auto; color:var(--line); width:18px; height:18px; flex:none}
  .bsheet .bi{flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff}
  .bsheet .bi svg{width:20px; height:20px}
  .bi.b{background:var(--blue)} .bi.g{background:var(--leaf)} .bi.y{background:var(--marker); color:var(--ink)} .bi.i{background:var(--ink)} .bi.m{background:var(--mist); color:var(--blue-d)}
  .bsheet .hero-dl{display:flex; align-items:center; gap:14px; padding:18px; border-radius:22px; background:var(--ink); color:#fff; text-decoration:none; margin-bottom:10px;
    box-shadow:0 14px 28px -16px rgba(15,46,76,.8)}
  .bsheet .hero-dl:active{transform:scale(.98)}
  .bsheet .hero-dl .bi{width:48px; height:48px; border-radius:14px; background:var(--marker); color:var(--ink)}
  .bsheet .hero-dl b{display:block; font:700 18px/1.2 var(--display)}
  .bsheet .hero-dl small{display:block; color:rgba(255,255,255,.72); font-size:13px; margin-top:4px}
  .bsheet .duo{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
  .bsheet .duo .it{flex-direction:column; align-items:flex-start; gap:10px; background:var(--paper); border-radius:20px; padding:14px; min-height:0; box-shadow:none}
  .bsheet .foot{color:var(--muted); font-size:13px; line-height:1.5; margin:4px 10px 0}
  .bsheet .foot a{color:var(--muted)}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){ .tabbar,.bsheet,.bsheet.open,.bscrim,.totop{transition:none} .tb-off .tabbar{transform:translateX(-50%); opacity:1; pointer-events:auto} .tb-off .totop{bottom:calc(92px + env(safe-area-inset-bottom,0px))} }
@media (max-width:860px){ .nav{display:none} .top .phone{display:none} .top .cart-btn{display:none} .callbtn{display:inline-flex; margin-left:auto} .menubtn,.mmenu{display:none!important} }

/* ---------- подвал ---------- */
footer{background:var(--ink); color:#D5E2EF; margin-top:40px; padding:44px 0 calc(44px + env(safe-area-inset-bottom,0px))}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px}
footer h4{font-family:var(--display); color:#fff; font-weight:600; margin:0 0 10px}
footer a{color:#fff}
footer p{margin:0 0 8px}
@media (max-width:720px){footer .cols{grid-template-columns:1fr}}

.flyer{position:fixed; z-index:80; pointer-events:none; width:70px; height:70px; border-radius:16px; background:var(--tint,#EEF2F6); display:grid; place-items:center; box-shadow:0 10px 30px rgba(15,46,76,.3)}
.flyer img{width:88%; height:88%; object-fit:contain}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,30px); opacity:0; background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; z-index:90; transition:.3s; font-weight:500}
.toast.show{opacity:1; transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important; animation-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ===== 3D-рулон ===== */
.roll{perspective:900px; perspective-origin:50% -30%; filter:none}
.roll .cyl{position:absolute; left:50%; top:14px; bottom:14px; width:0; transform-style:preserve-3d; will-change:transform}
.roll .fc{position:absolute; top:0; height:100%; backface-visibility:hidden;
  background:linear-gradient(rgba(15,46,76,var(--d,.1)), rgba(15,46,76,var(--d,.1))), radial-gradient(circle, rgba(15,46,76,.11) 1.1px, transparent 1.7px) 0 0/11px 11px, #fff}
.roll .cap{position:absolute; border-radius:50%; background:repeating-radial-gradient(circle, #fff 0 5px, #E3EBF3 5px 6px); box-shadow:inset 0 0 0 1px rgba(15,46,76,.12)}
.roll .cap::after{content:""; position:absolute; inset:36%; border-radius:50%; background:radial-gradient(circle, #0F2E4C 0 55%, #9FB6CC 56% 100%)}
.roll .floor-sh{position:absolute; left:-30%; right:-30%; bottom:-4px; height:26px; border-radius:50%; background:radial-gradient(closest-side, rgba(15,46,76,.32), transparent); filter:blur(5px)}
.roll .bot{position:absolute; left:50%; bottom:14px; height:var(--bh,14px); transform:translate(-50%, 50%); border-radius:50%;
  background:linear-gradient(90deg, #AFC2D5 0%, #DCE6F0 18%, #FFFFFF 46%, #E9EFF6 72%, #B7C8DA 100%);
  box-shadow:inset 0 -4px 5px -1px rgba(15,46,76,.34), 0 1.5px 0 rgba(15,46,76,.16), 0 10px 16px -6px rgba(15,46,76,.42)}
.stage{transform-style:preserve-3d; perspective:1800px}

/* ===== 3D-карусель поступлений ===== */
.ringw{position:absolute; right:3%; top:50%; width:min(38%, 440px); height:340px; transform:translateY(-54%); perspective:1100px; cursor:grab; touch-action:pan-y; opacity:0; transition:opacity .8s ease}
.ringw.on{opacity:1}
.ringw:active{cursor:grabbing}
.ring{position:absolute; inset:0; transform-style:preserve-3d}
.ri{position:absolute; left:50%; top:46%; width:164px; height:188px; margin:-94px 0 0 -82px; border-radius:20px; background:var(--tint);
  display:grid; place-items:center; box-shadow:0 26px 40px -28px rgba(15,46,76,.55); border:0; padding:0; cursor:pointer}
.ri img{width:86%; height:76%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 10px 10px rgba(15,46,76,.18))}
.ri span{position:absolute; left:10px; right:10px; bottom:8px; font-size:12px; font-weight:600; color:var(--ink); text-align:center; line-height:1.2}
.ringcap{position:absolute; left:0; right:0; bottom:-6px; text-align:center; font-size:14px; color:var(--muted)}
.ringcap b{color:var(--ink)}
@media (max-width:1020px){ .ringw{display:none} }

/* ===== бегущая строка брендов ===== */
.marquee{overflow:hidden; padding:18px 0 6px; mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee .track{display:flex; gap:44px; width:max-content; animation:mq 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .bi{display:flex; align-items:center; gap:14px; font-family:var(--display); font-weight:600; font-size:22px; color:var(--ink-2); white-space:nowrap; letter-spacing:-.01em}
.marquee .bi img{height:46px; width:auto; object-fit:contain}
.marquee .bi.logo{font-size:0; gap:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== калькулятор паллет (3D) ===== */
.calc{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:0; background:var(--paper); border-radius:var(--r-lg); margin-top:26px; overflow:hidden; box-shadow:0 18px 40px -30px rgba(15,46,76,.5)}
.calc .ctl{min-width:0; padding:28px; display:flex; flex-direction:column; gap:16px; border-right:2px dashed var(--mist)}
.calc h3{font-family:var(--display); font-weight:600; font-size:22px; margin:0}
.pick{position:relative}
.pick .pbtn{width:100%; display:flex; align-items:center; gap:12px; border:0; background:var(--tissue); border-radius:14px; padding:10px 14px 10px 10px;
  box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; text-align:left; transition:box-shadow .15s}
.pick .pbtn:hover{box-shadow:inset 0 0 0 2px var(--blue)}
.pick .pbtn[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--blue); background:var(--paper)}
.pick .ph,.pickpop .ph{width:46px; height:46px; flex:none; border-radius:10px; background:#fff center/contain no-repeat; box-shadow:inset 0 0 0 1px var(--mist)}
.pick .tx,.pickpop .tx{min-width:0; flex:1; display:flex; flex-direction:column; line-height:1.3}
.pick .tx b,.pickpop .tx b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pick .tx small,.pickpop .tx small{color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pick .chev{width:20px; height:20px; flex:none; color:var(--ink-2); transition:transform .2s}
.pick .pbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.pick .st{font-size:12px; font-weight:600; border-radius:999px; padding:3px 9px; white-space:nowrap; flex:none}
.pick .st.in{background:var(--leaf); color:#fff}
.pick .st.out{color:var(--muted); box-shadow:inset 0 0 0 1px var(--line)}
.pickpop{position:fixed; z-index:60; background:var(--paper); border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(15,46,76,.45), 0 0 0 1px var(--line); overflow:hidden; display:flex; flex-direction:column; max-height:min(440px, 70vh); font-family:var(--text); color:var(--ink)}
.pickpop[hidden]{display:none}
.pickpop .psearch{margin:10px; border:0; border-radius:999px; padding:10px 16px; background:var(--tissue); box-shadow:inset 0 0 0 1px var(--line)}
.pickpop .plist{overflow:auto; padding:0 6px 8px; overscroll-behavior:contain}
.pickpop .pcat{position:sticky; top:0; z-index:1; background:var(--paper); padding:10px 10px 6px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.pickpop .opt{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; cursor:pointer}
.pickpop .opt .ph{width:38px; height:38px}
.pickpop .opt .pr{margin-left:auto; text-align:right; flex:none; line-height:1.25}
.pickpop .opt .pr b{display:block; font-weight:600; font-size:14px}
.pickpop .opt .pr small{font-size:12px; color:var(--muted)}
.pickpop .opt.act{background:var(--mist)}
.pickpop .opt[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--blue); background:var(--tissue)}
.pickpop .opt[aria-selected="true"].act{background:var(--mist)}
.pickpop .opt .dot{display:inline-block; vertical-align:middle; width:8px; height:8px; border-radius:50%; flex:none; background:var(--line)}
.pickpop .opt .dot.in{background:var(--leaf)}
.pickpop .phead{display:none}
.pickscrim{display:none}
.pickpop .none{padding:18px; color:var(--muted); text-align:center}
@media (max-width:600px){
  .pickpop{left:0!important; right:0; width:auto!important; bottom:0!important; top:auto!important; border-radius:20px 20px 0 0; max-height:78vh; padding-bottom:env(safe-area-inset-bottom,0px)}
  .pick .pbtn .st{display:none}
  .pickpop .phead{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 0 18px; font-size:17px}
  .pickpop .px{width:36px; height:36px; border:0; border-radius:50%; background:var(--tissue); font-size:22px; line-height:1; cursor:pointer}
  .pickscrim:not([hidden]){display:block; position:fixed; inset:0; z-index:59; background:rgba(15,46,76,.45)}
}
.calc select{width:100%; min-width:0; border:0; border-radius:12px; padding:12px 14px; background:var(--tissue); box-shadow:inset 0 0 0 1px var(--line); font-weight:500}
.calc .rng{display:flex; align-items:center; gap:14px}
.calc input[type=range]{flex:1; accent-color:var(--blue); height:28px}
.calc .packs{width:110px; border:0; border-radius:12px; padding:10px 12px; background:var(--tissue); box-shadow:inset 0 0 0 1px var(--line); font-weight:600; text-align:right}
.calc .ticks{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-top:-8px}
.calc .res{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.calc .clines{border-top:2px dashed var(--mist); padding-top:14px}
.calc .clh{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.calc .clh b{font-weight:600}
.calc .clh span{color:var(--muted); font-size:14px}
.calc #cList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.calc .cli{display:flex; align-items:center; gap:4px; border-radius:14px; background:var(--tissue); box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .15s, background .15s}
.calc .cli.on{background:#EEF5FC; box-shadow:inset 0 0 0 2px var(--blue)}
.calc .cli .ed{flex:1; min-width:0; display:flex; align-items:center; gap:10px; border:0; background:none; padding:8px 4px 8px 8px; text-align:left; cursor:pointer; border-radius:14px}
.calc .cli .ph{width:38px; height:38px; flex:none; border-radius:9px; background:#fff center/contain no-repeat; box-shadow:inset 0 0 0 1px var(--mist)}
.calc .cli .tx{min-width:0; flex:1; display:flex; flex-direction:column; line-height:1.3}
.calc .cli .tx b{font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.calc .cli .tx small{color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.calc .cli .sm{font-weight:600; white-space:nowrap; font-size:15px}
.calc .cli .rm{width:36px; height:36px; flex:none; border:0; background:none; border-radius:50%; font-size:20px; color:var(--muted); cursor:pointer; margin-right:4px}
.calc .cli .rm:hover{background:#fff; color:var(--danger)}
.calc .cmore{align-self:flex-start}
@media (max-width:600px){ .calc .cli .tx b{white-space:normal; font-size:14px} .calc .cli .sm{font-size:14px} .calc .cli .ed{gap:8px} }
.calc .ctotal{display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--ink); color:#fff; border-radius:14px; padding:14px 16px}
.calc .ctotal small{display:block; color:var(--mist); font-size:13px}
.calc .ctotal b{font-family:var(--display); font-size:22px; white-space:nowrap}
.calc .res div{background:var(--tissue); border-radius:14px; padding:14px}
.calc .res small{display:block; color:var(--muted); font-size:13px}
.calc .res b{font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.02em}
.calc .tierline{font-weight:600}
.calc .chint{margin:-4px 0 0; min-height:1.4em; font-size:14px; color:var(--danger)}
.calc .packs.fixed{box-shadow:inset 0 0 0 2px var(--danger)}
.calc .tierline .mark{transition:background .3s}
.scene{position:relative; min-height:380px; perspective:1300px; perspective-origin:50% 0%; background:linear-gradient(#F8FAFC, #EEF3F8); overflow:hidden}
.floor{position:absolute; left:50%; top:56%; width:360px; height:240px; margin:-120px 0 0 -180px; transform-style:preserve-3d; transform:rotateX(58deg) rotateZ(-38deg)}
.floor::before{content:""; position:absolute; inset:-40px; border-radius:24px; background:repeating-linear-gradient(90deg, rgba(15,46,76,.06) 0 1px, transparent 1px 60px), repeating-linear-gradient(0deg, rgba(15,46,76,.06) 0 1px, transparent 1px 60px), #E4ECF4}
.pal{position:absolute; width:104px; height:104px; transform-style:preserve-3d}
.pal.drop{animation:drop .75s cubic-bezier(.25,1.6,.45,1) both}
@keyframes drop{0%{transform:translateZ(300px)} 100%{transform:translateZ(0)}}
.bx{position:absolute; transform-style:preserve-3d}
.bx i{position:absolute; display:block}
.bx .t{left:0; top:0; width:100%; height:100%}
.wood i{background:repeating-linear-gradient(90deg, #C79A62 0 18px, #A87C47 18px 22px)}
.wood .t{background:repeating-linear-gradient(0deg, #D6AA72 0 20px, #B38552 20px 26px)}
.film i{background:linear-gradient(135deg, rgba(255,255,255,.42), rgba(220,231,242,.28)), var(--ph, none) center/84% auto no-repeat, var(--tint, #EEF3F8)}
.film .t{background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(226,235,244,.8)), var(--tint, #EEF3F8)}
.film i.s2{filter:brightness(.88)}
.yard{position:absolute; left:0; top:0; transform-style:preserve-3d; transform-origin:0 0; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.yard .pal{transition:left .45s cubic-bezier(.2,.8,.2,1), top .45s cubic-bezier(.2,.8,.2,1)}
.pk i{background:linear-gradient(135deg, rgba(255,255,255,.35), rgba(220,231,242,.2)), var(--ph, none) center/cover no-repeat, var(--tint, #EEF3F8); box-shadow:inset 0 0 0 1px rgba(15,46,76,.14)}
.pk .t{background:linear-gradient(135deg, #fff, #E6EDF5); box-shadow:inset 0 0 0 1px rgba(15,46,76,.14)}
.pk i.s2{filter:brightness(.86)}
.slegend{position:absolute; left:14px; top:14px; right:14px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none; z-index:2}
.slegend span{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.92); border-radius:999px; padding:4px 12px 4px 4px; font-size:13px; color:var(--ink-2); box-shadow:0 4px 12px -8px rgba(15,46,76,.5); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slegend span.on{color:var(--ink); font-weight:600; box-shadow:0 0 0 2px var(--blue), 0 4px 12px -8px rgba(15,46,76,.5)}
.slegend i{width:22px; height:22px; flex:none; border-radius:50%; background:#fff center/contain no-repeat; box-shadow:inset 0 0 0 1px var(--mist)}
.more{position:absolute; right:18px; bottom:14px; font-weight:600; background:#fff; border-radius:999px; padding:6px 12px; box-shadow:0 6px 16px -8px rgba(15,46,76,.4)}
.emptyscene{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:15px; text-align:center; padding:20px}
@media (max-width:860px){ .calc{grid-template-columns:minmax(0,1fr)} .calc .ctl{padding:20px} .calc .res b{font-size:20px} .calc .packs{width:92px} .calc .ctl{border-right:0; border-bottom:2px dashed var(--mist)} .scene{min-height:320px} .floor{transform:rotateX(58deg) rotateZ(-38deg) scale(.82)} }
@media (max-width:860px){ .scene{display:flex; flex-direction:column; min-height:0} .slegend{position:static; order:-1; flex-direction:row; flex-wrap:wrap; padding:14px 14px 0} .slegend span{font-size:12.5px} .floor{position:relative; left:auto; top:auto; margin:96px 0 40px calc(50% - 180px); flex:none} .more{bottom:10px} }

/* ===== подсветка и наклон карточек ===== */
.item{transform-style:preserve-3d; transition:box-shadow .25s, transform .35s cubic-bezier(.2,.8,.2,1)}
.item::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(46,117,182,.10), transparent 60%)}
.item:hover::after{opacity:1}

/* ===== вид «прайс-лист» ===== */
.viewbar{display:flex; gap:10px; align-items:center; margin:6px 0 14px; flex-wrap:wrap}
.viewbar .found{margin:0; flex:1}
.vseg{display:flex; background:var(--paper); border-radius:999px; padding:4px; box-shadow:inset 0 0 0 1px var(--line)}
.vseg button{border:0; background:none; padding:8px 14px; border-radius:999px; cursor:pointer; font-weight:500; color:var(--ink-2)}
.vseg button[aria-pressed="true"]{background:var(--ink); color:#fff}
.dls{display:inline-flex; gap:8px; flex-wrap:wrap}
.dl.alt{background:var(--paper); box-shadow:inset 0 0 0 2px var(--line)}
.dl svg{width:18px; height:18px; flex:none}
.fprice a{font-weight:600}
@media (max-width:520px){ .dls{width:100%} .dls .dl{flex:1 1 auto; justify-content:center} }
.dl{border:0; background:var(--marker); color:var(--ink); border-radius:999px; padding:10px 16px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; gap:8px; align-items:center}
.ptable{background:var(--paper); border-radius:var(--r-lg); overflow:auto}
.ptable table{border-collapse:collapse; width:100%; min-width:860px}
.ptable th{position:sticky; top:0; background:var(--paper); text-align:left; font-weight:500; color:var(--muted); font-size:13px; padding:14px 12px; border-bottom:2px dashed var(--mist)}
.ptable td:nth-child(2){white-space:nowrap}
.ptable .scrollhint{display:none}
.ptable td:first-child,.ptable th:first-child{position:sticky; left:0; background:var(--paper); z-index:1}
@media (max-width:720px){ .ptable .scrollhint{display:block; padding:10px 12px 0; color:var(--muted); font-size:13px; font-weight:500} }
.ptable td{padding:10px 12px; border-bottom:1px solid var(--mist); vertical-align:middle}
.ptable td.n{text-align:right; font-family:var(--display); font-weight:600; font-size:15px; white-space:nowrap}
.ptable tr.cur td.n.on{background:linear-gradient(transparent 18%, var(--marker) 18% 82%, transparent 82%)}
.ptable .pi{display:flex; gap:12px; align-items:center}
.ptable .pi .th{width:52px; height:52px; border-radius:12px; background:var(--tint); display:grid; place-items:center; flex:none}
.ptable .pi .th img{width:90%; height:90%; object-fit:contain}
.ptable .pi b{display:block; font-weight:600}
.ptable .pi small{color:var(--muted)}
.ptable .dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--leaf); margin-right:6px}
.ptable .dot.o{background:#B9C6D3}
.ptable .step button{width:32px; height:34px} .ptable .step input{width:58px}
.pay{display:flex; gap:8px}
.pay label{flex:1; display:flex; gap:10px; align-items:center; background:#fff; border-radius:12px; padding:12px 14px; box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; font-size:15px; transition:box-shadow .15s, background .15s}
.pay label:hover{box-shadow:inset 0 0 0 1px var(--blue)}
.pay label:has(input:checked){background:#EEF5FC; box-shadow:inset 0 0 0 2px var(--blue); font-weight:600}
.pay label:has(input:focus-visible){outline:3px solid var(--blue); outline-offset:2px}
.pay input{accent-color:var(--blue)}
@media (prefers-reduced-motion: reduce){ .marquee .track{animation:none} }
/* недавно смотрели, «с этим покупают», отзывы, повтор заказа (#6 #7 #10) */
.minis{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); gap:12px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x mandatory}
.mini{scroll-snap-align:start; background:var(--paper); border:0; border-radius:var(--r-md); padding:10px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px; box-shadow:0 1px 0 rgba(15,46,76,.05); min-width:0}
.mini:hover{box-shadow:inset 0 0 0 2px var(--line)}
.mini .ph{display:block; width:100%; aspect-ratio:1; border-radius:var(--r-sm); background:var(--tissue) center/contain no-repeat}
.mini b{font-size:13px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mini span{font-size:14px; font-weight:600}
.mini small{font-size:12px; color:var(--muted)}
#recent{padding:8px 0 40px} #recent .h2{font-size:clamp(20px,2.4vw,26px)}
.dlg > *{min-width:0} .dlg .rel{margin-top:6px; min-width:0} .dlg .rel h4{margin:0 0 8px; font-size:15px}
.dlg .rel .minis{grid-auto-columns:minmax(120px,1fr)}
.reviews{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.review{background:var(--paper); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:10px; margin:0}
.review img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-md)}
.review .st{color:#C98A00; letter-spacing:2px} .review blockquote{margin:0; white-space:pre-line}
.review figcaption{font-size:14px; color:var(--muted)} .review figcaption b{color:var(--ink)}
.again{background:var(--tissue); border-radius:var(--r-md); padding:14px 16px; margin:16px 0 0; text-align:left}
.again p{margin:0 0 10px} .again .btn{padding:10px 16px; font-size:15px}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.cshare{background:none; border:0; color:var(--blue-d); font-weight:600; cursor:pointer; padding:8px 0; text-decoration:underline; text-underline-offset:3px; align-self:center}
.fuzzy{background:#FFF8D6; border-radius:var(--r-sm); padding:8px 12px; font-size:14px; margin:0 0 12px}