/* Montserrat — как в прайсе; файлы лежат локально, чтобы не зависеть от Google Fonts */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(montserrat-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:italic;font-weight:400 600;font-display:swap;
  src:url(montserrat-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;font-style:italic;font-weight:400 600;font-display:swap;
  src:url(montserrat-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:italic;font-weight:400 600;font-display:swap;
  src:url(montserrat-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme: light;
  --bg:#FFF7EA; --card:#FFFEFA; --cream:#FEF1E0;
  --ink:#1C3A30; --text:#33443C; --muted:#7D8A82; --line:#F1E5D2;
  --brand:#0E804D; --red:#D9403A; --red-soft:#FBE3DF; --blue:#1DA0D6; --orange:#F08A2A;
  --radius:18px; --shadow:0 1px 2px rgba(60,40,10,.04), 0 6px 18px rgba(60,40,10,.06);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
.t-green {--tile:#E3F2E8; --accent:#0E8C56; --rule:#A9CDB9;}
.t-red   {--tile:#FAE3DE; --accent:#E1372F; --rule:#E8AFA9;}
.t-blue  {--tile:#E1F3FA; --accent:#1DA0D6; --rule:#A8D6E8;}
.t-orange{--tile:#FCEDD8; --accent:#EE8423; --rule:#EFC79C;}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text);
  font:500 14px/1.4 Montserrat, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  padding-bottom:calc(96px + var(--safe-b)); overflow-x:hidden;}
body.lock{overflow:hidden;}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0;}
input{font:inherit; color:inherit;}
.wrap{max-width:980px; margin:0 auto; padding:0 16px;}

/* ---------- шапка ---------- */
.top{position:relative; overflow:hidden; padding:18px 0 14px;}
.top::before,.top::after{content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0;}
.top::before{width:240px; height:240px; right:-80px; top:-90px; background:#FCDCCB; opacity:.55;}
.top::after{width:120px; height:120px; right:70px; top:20px; background:#FBE7D3; opacity:.8;}
.top .wrap{position:relative; z-index:1;}
.brand{display:flex; align-items:center; gap:12px;}
.logo{width:46px; height:46px; border-radius:14px; background:#fff; padding:4px; object-fit:contain;
  box-shadow:var(--shadow); flex-shrink:0;}
.brand-name{font-size:12px; font-weight:800; color:var(--brand); letter-spacing:.6px; text-transform:uppercase;}
.brand-sub{font-size:11px; color:var(--muted); margin-top:2px;}
.hero-title{margin:16px 0 2px; font-size:25px; line-height:1.12; font-weight:800; color:var(--ink);
  text-transform:uppercase; letter-spacing:.2px;}
.hero-title i{font-style:normal; position:relative;}
.hero-title i::after{content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--red); top:-3px; left:50%; transform:translateX(-50%);}
.hero-sub{font-size:13px; color:var(--blue); font-weight:600;}
.city-chip{margin-top:12px; display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  background:var(--card); border-radius:999px; box-shadow:var(--shadow); font-size:12.5px; font-weight:700; color:var(--ink);}
.city-chip .pin{width:8px; height:8px; border-radius:50%; background:var(--red);}
.city-chip .chev{color:var(--muted); font-weight:600;}

/* ---------- категории ---------- */
.chips{position:sticky; top:0; z-index:20; background:rgba(255,247,234,.92);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid rgba(241,229,210,.8);}
.chips .wrap{position:relative; display:flex; gap:8px; overflow-x:auto; padding-top:10px; padding-bottom:10px; scrollbar-width:none;}
.chips .wrap::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0; display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  background:var(--card); font-size:12px; font-weight:700; color:var(--ink); border:1px solid var(--line); white-space:nowrap;}
.chip .dot{width:7px; height:7px; border-radius:50%; background:var(--accent);}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

/* ---------- секции и карточки ---------- */
section.cat{scroll-margin-top:62px; padding-top:22px;}
.cat-head{display:flex; align-items:center; gap:8px; margin:0 2px 12px;}
.cat-head .dot{width:9px; height:9px; border-radius:50%; background:var(--accent);}
.cat-head h2{margin:0; font-size:12.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--accent);}
.cat-head .count{margin-left:auto; font-size:11px; color:var(--muted); font-weight:600;}

.grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
@media (min-width:720px){ .grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;} }

.card{position:relative; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:10px; display:flex; flex-direction:column; min-width:0;}
.card::before{content:""; position:absolute; left:18px; right:18px; top:0; height:3px; border-radius:0 0 3px 3px; background:var(--rule);}

.tile{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:5/4; display:block; width:100%;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.6) 0 20%, transparent 21%),
    radial-gradient(circle at 10% 95%, rgba(255,255,255,.45) 0 24%, transparent 25%),
    var(--tile);}
/* Фото с прозрачным фоном лежат поверх плашки отдельным слоем — цвет товара не меняется,
   оттенок только у фона. Лёгкая тень отделяет товар от плашки. */
.tile img{position:absolute; inset:7%; width:86%; height:86%; object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(40,30,10,.12));}
/* запасной вариант, если для товара нет вырезанного фото: JPG на белой подложке, без перекраски */
.tile img[src$=".jpg"]{background:#fff; border-radius:10px; filter:none;}
.badge{position:absolute; left:8px; bottom:8px; display:flex; align-items:center; gap:5px; max-width:calc(100% - 16px);
  background:rgba(255,255,255,.94); border-radius:999px; padding:4px 8px; font-size:9.5px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.badge .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0;}

.c-body{padding:10px 2px 0; display:flex; flex-direction:column; flex:1; min-width:0;}
.c-name{font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.25; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-align:left;}
.c-pack{font-size:11px; color:var(--muted); margin-top:4px;}
.pricebox{position:relative; margin-top:auto; background:var(--cream); border-radius:10px; padding:7px 10px 7px 13px;}
/* Цена и кнопка прижаты к низу карточки, а их высота одинаковая у всех товаров
   (ценник — всегда на две строки, под кнопкой — всегда строка подсказки),
   поэтому кнопки «В корзину» в одном ряду стоят ровно на одной высоте. */
.c-buy{margin-top:auto; padding-top:10px;}
.c-buy .pricebox{margin-top:0; min-height:60px; display:flex; flex-direction:column; justify-content:center;}
.c-buy .hint{height:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px;}
.pricebox::before{content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:3px; background:var(--red);}
.price{font-size:17px; font-weight:800; color:var(--red); line-height:1.25;}
.price small{font-size:12px; font-weight:700; white-space:nowrap;}
.per100{font-size:12px; font-weight:700; color:var(--blue); margin-top:2px;}
.c-ctl{margin-top:8px;}

/* ---------- кнопки и счётчик ---------- */
.add{width:100%; height:38px; border-radius:12px; background:var(--ink); color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:transform .1s;}
.add:active{transform:scale(.97);}
.add .plus{font-size:18px; line-height:1; font-weight:600;}
.stepper{height:38px; border-radius:12px; background:#fff; border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between; overflow:hidden;}
.stepper button{width:38px; height:100%; font-size:20px; font-weight:600; color:var(--ink); flex-shrink:0;}
.stepper button:active{background:var(--cream);}
.stepper .val{flex:1; display:flex; align-items:baseline; justify-content:center; gap:3px; min-width:0;}
.stepper input{width:100%; max-width:46px; border:0; outline:0; background:transparent; text-align:right;
  font-weight:800; font-size:14px; color:var(--ink); padding:0;}
.stepper .u{font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap;}
.hint{margin-top:4px; font-size:11px; font-style:italic; font-weight:500; color:var(--muted); text-align:right; line-height:1.3;}

/* ---------- главная карточка «Форель непотрошёная» ---------- */
.hero{grid-column:1 / -1; padding:16px;}
.hero-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.label{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--accent);}
.label .dot{width:8px; height:8px; border-radius:50%; background:var(--accent);}
.pill-main{background:var(--red-soft); color:var(--red); font-size:10px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; padding:6px 11px; border-radius:999px; white-space:nowrap;}
.hero h3{margin:10px 0 4px; font-size:21px; line-height:1.2; font-weight:800; color:var(--ink);}
.hero .lead{font-size:12px; color:var(--muted);}
.hero .lead b{color:var(--brand);}
.hero-body{display:grid; gap:12px; margin-top:12px;}
@media (min-width:720px){ .hero-body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start;} }
.hero .tile{aspect-ratio:16/10;}
.sizes{display:grid; gap:8px;}
.size-row{background:var(--cream); border-radius:14px; padding:11px 12px;}
.size-row.featured{background:linear-gradient(135deg,#E2483F,#C8352F); color:#fff;}
.sr-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.sr-size{font-size:16px; font-weight:800; color:var(--ink);}
.sr-price{font-size:21px; font-weight:800; color:var(--red); white-space:nowrap;}
.sr-price small{font-size:13px; font-weight:700;}
.featured .sr-size,.featured .sr-price{color:#fff;}
.sr-note{font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; margin-top:2px; color:var(--muted);}
.featured .sr-note{color:rgba(255,255,255,.85);}
.featured .sr-note.warn{color:#fff; text-decoration:underline; text-underline-offset:3px;}
.tiers{display:flex; gap:6px; margin-top:8px;}
.tier{flex:1; text-align:center; border-radius:9px; padding:4px 2px; border:1px solid transparent;}
.tier span{display:block; font-size:10.5px; font-weight:700; color:var(--muted);}
.tier b{font-size:14.5px; font-weight:800; color:var(--red);}
.tier.on{background:#fff; border-color:rgba(217,64,58,.35);}
.sr-foot{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:10px;}
.sr-nudge{font-size:11px; font-weight:700; color:var(--brand); padding-top:10px; line-height:1.3;}
.sr-ctl{width:150px; flex-shrink:0;}
.featured .add{background:#fff; color:var(--red);}
.featured .stepper{border-color:#fff; background:rgba(255,255,255,.14);}
.featured .stepper button,.featured .stepper input{color:#fff;}
.featured .stepper .u{color:rgba(255,255,255,.85);}
.featured .stepper button:active{background:rgba(255,255,255,.18);}
.featured .hint{color:rgba(255,255,255,.92);}
.featured .sr-nudge{color:#fff;}

/* ---------- нижняя панель ---------- */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 16px calc(10px + var(--safe-b));
  background:linear-gradient(to top, var(--bg) 70%, rgba(255,247,234,0));}
.bar-inner{max-width:948px; margin:0 auto; display:flex; align-items:center; gap:12px;
  background:var(--ink); color:#fff; border-radius:18px; padding:10px 10px 10px 16px; box-shadow:0 10px 30px rgba(28,58,48,.28);}
.bar-info{flex:1; min-width:0;}
.bar-info .k{font-size:11px; opacity:.75; font-weight:600;}
.bar-info .v{font-size:19px; font-weight:800; white-space:nowrap;}
.bar-btn{background:var(--red); color:#fff; font-weight:800; font-size:14px; padding:12px 18px; border-radius:13px; white-space:nowrap;}
.bar-btn:disabled{opacity:.6;}

/* ---------- корзина ---------- */
.screen{position:fixed; inset:0; z-index:30; background:var(--bg); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(110px + var(--safe-b));}
.screen-head{position:sticky; top:0; z-index:2; background:rgba(255,247,234,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.screen-head .wrap{display:flex; align-items:center; gap:10px; padding-top:12px; padding-bottom:12px;}
.back{width:38px; height:38px; border-radius:12px; background:var(--card); box-shadow:var(--shadow); font-size:18px; font-weight:700; color:var(--ink);}
.screen-head h2{margin:0; font-size:18px; font-weight:800; color:var(--ink);}
.panel{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-top:12px;}
.panel h3{margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--brand);}
.cl{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.cl:last-child{border-bottom:0;}
.cl .tile{width:64px; height:64px; aspect-ratio:auto; flex-shrink:0; border-radius:12px;}
.cl-main{flex:1; min-width:0;}
.cl-name{font-size:13px; font-weight:700; color:var(--ink); line-height:1.25;}
.cl-meta{font-size:11px; color:var(--muted); margin-top:2px;}
.cl-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;}
.cl-row .stepper{width:132px; height:34px;}
.cl-row .stepper button{width:34px;}
.cl-sum{font-size:15.5px; font-weight:800; color:var(--ink); white-space:nowrap;}
.cl .hint{text-align:left;}
.totals{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.totals .k{font-weight:700; color:var(--ink);}
.totals .v{font-size:24px; font-weight:800; color:var(--red);}
.note{font-size:11.5px; font-style:italic; color:var(--muted); margin-top:6px;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px;}
.inp{width:100%; height:46px; border-radius:12px; border:1.5px solid var(--line); background:#fff; padding:0 14px;
  font-size:15px; font-weight:600; outline:0; transition:border-color .15s;}
.inp:focus{border-color:var(--brand);}
.inp.err{border-color:var(--red);}
.phone{display:flex; gap:8px;}
.phone .pre{height:46px; padding:0 12px; display:flex; align-items:center; border-radius:12px; background:var(--cream); font-weight:800; color:var(--ink);}
.pick{display:flex; align-items:center; justify-content:space-between; text-align:left;}
.pick .ph{color:var(--muted); font-weight:500;}
.ferr{font-size:11.5px; color:var(--red); font-weight:600; margin-top:4px;}
.empty{text-align:center; padding:40px 16px; color:var(--muted);}
.empty b{display:block; font-size:16px; color:var(--ink); margin-bottom:6px;}
.link-btn{margin-top:14px; display:inline-block; padding:11px 18px; border-radius:12px; background:var(--ink); color:#fff; font-weight:700;}

.done{text-align:center; padding:48px 8px 20px;}
.done .ok{width:72px; height:72px; border-radius:50%; margin:0 auto 16px; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:34px; box-shadow:0 10px 26px rgba(14,128,77,.3);}
.done h2{margin:0 0 6px; font-size:22px; font-weight:800; color:var(--ink);}
.done p{margin:0 auto; max-width:320px; color:var(--muted);}

/* ---------- «Возможно, вам понравится» — горизонтальная лента в корзине ---------- */
.upsell{margin-top:18px;}
.up-head{display:flex; align-items:center; gap:10px; margin:0 2px 10px;}
.up-head h3{margin:0; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--brand);}
.up-head .sub{font-size:11px; color:var(--muted); font-weight:600; margin-left:auto; white-space:nowrap;}
.up-nav{display:none; gap:6px;}
.up-nav button{width:30px; height:30px; border-radius:50%; background:var(--card); box-shadow:var(--shadow); font-size:15px; font-weight:700; color:var(--ink);}
@media (hover:hover) and (pointer:fine){ .up-nav{display:flex;} }
.up-row{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 16px;
  margin:0 -16px; padding:2px 16px 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
.up-row::-webkit-scrollbar{display:none;}
.up-card{flex:0 0 148px; scroll-snap-align:start; background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  padding:8px; display:flex; flex-direction:column; min-width:0;}
.up-tile{display:block; width:100%;}
.up-card .tile{aspect-ratio:1/1; border-radius:12px;}
.up-name{font-size:12px; font-weight:700; color:var(--ink); line-height:1.25; margin-top:8px; min-height:30px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.up-price{font-size:15px; font-weight:800; color:var(--red); margin:4px 0 8px; white-space:nowrap;}
.up-price small{font-size:11.5px; font-weight:700;}
.up-ctl{margin-top:auto;}
.up-ctl .hint{display:none;}
.up-card .add{height:34px; font-size:12.5px; border-radius:11px;}
.up-card .stepper{height:34px; border-radius:11px;}
.up-card .stepper button{width:32px;}

/* ---------- шторки (товар, город) ---------- */
.sheet-wrap{position:fixed; inset:0; z-index:50; background:rgba(28,58,48,.45); display:flex; align-items:flex-end; justify-content:center;
  animation:fade .18s ease;}
.sheet{width:100%; max-width:560px; max-height:92vh; overflow-y:auto; background:var(--card); border-radius:24px 24px 0 0;
  padding:10px 16px calc(18px + var(--safe-b)); animation:up .22s cubic-bezier(.2,.8,.2,1);}
.grab{width:40px; height:4px; border-radius:4px; background:#E5D9C6; margin:0 auto 10px;}
.sheet .tile{aspect-ratio:4/3;}
.x{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92);
  font-size:16px; font-weight:700; color:var(--ink); box-shadow:var(--shadow);}
.sh-body{padding:14px 2px 0;}
.sh-body h3{margin:6px 0 6px; font-size:19px; font-weight:800; color:var(--ink); line-height:1.25;}
.sh-desc{font-size:13px; color:var(--text);}
.sh-pack{font-size:12px; color:var(--muted); margin-top:6px;}
.sh-buy{display:flex; align-items:flex-start; gap:12px; margin-top:14px;}
.sh-buy .pricebox{margin-top:0; flex:1;}
.sh-buy .ctl{width:160px; flex-shrink:0;}
.city-list{display:grid; gap:6px; margin-top:6px;}
.city-opt{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:13px 14px;
  border-radius:12px; background:#fff; border:1.5px solid var(--line); font-weight:700; color:var(--ink);}
.city-opt.on{border-color:var(--brand); background:#EEF7F1;}
.city-opt .r{width:18px; height:18px; border-radius:50%; border:2px solid var(--line);}
.city-opt.on .r{border:5px solid var(--brand);}

footer{margin-top:30px; padding:18px 0 10px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted);}
footer h4{margin:0 0 6px; font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--brand);}
footer p{margin:2px 0;}
footer a{color:var(--ink); font-weight:700; text-decoration:none;}

.toast{position:fixed; left:50%; top:14px; transform:translate(-50%,-20px); z-index:60; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:all .25s; max-width:90vw;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.toast.bad{background:var(--red);}

.skeleton{height:220px; border-radius:var(--radius); background:linear-gradient(90deg,#FBEFDD,#FFF8EE,#FBEFDD); background-size:200% 100%; animation:sh 1.2s infinite;}
@keyframes sh{to{background-position:-200% 0;}}
@keyframes up{from{transform:translateY(40px); opacity:.4;} to{transform:none; opacity:1;}}
@keyframes fade{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} html{scroll-behavior:auto;} }

/* ---------- компьютер и планшет: карточки шире — цены крупнее ---------- */
@media (min-width:720px){
  .pricebox{padding:9px 12px 9px 15px;}
  .c-buy .pricebox{min-height:72px;}
  .price{font-size:21px;}
  .price small{font-size:14px;}
  .per100{font-size:14px;}
  .sr-price{font-size:25px;}
  .sr-price small{font-size:15px;}
  .tier span{font-size:11.5px;}
  .tier b{font-size:17px;}
  .up-price{font-size:17px;}
  .up-price small{font-size:13px;}
  .cl-sum{font-size:17px;}
  .totals .v{font-size:28px;}
  .bar-info .v{font-size:21px;}
  .c-name{font-size:15px;}
  .c-pack{font-size:12.5px;}
}

/* ---------- промокод ---------- */
.promo-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.panel .promo-head h3{margin:0;}
.promo-ico{width:24px; height:24px; border-radius:7px; background:var(--red-soft); color:var(--red);
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;}
.promo-form{display:flex; gap:8px;}
.promo-form .inp{flex:1; min-width:0; text-transform:uppercase; letter-spacing:.5px;}
.promo-form .inp::placeholder{text-transform:none; letter-spacing:0; font-weight:500;}
.promo-btn{flex-shrink:0; height:46px; padding:0 16px; border-radius:12px; background:var(--ink); color:#fff; font-weight:700; font-size:13.5px;}
.promo-btn:disabled{opacity:.55;}
.promo-ok{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px;
  border-radius:12px; background:#EEF7F1; border:1.5px dashed var(--brand);}
.promo-chip{font-weight:800; color:var(--brand); font-size:13.5px;}
.promo-del{font-size:12px; font-weight:700; color:var(--muted); text-decoration:underline; text-underline-offset:3px; flex-shrink:0;}
.totals.sub{margin-top:8px;}
.totals.sub .k,.totals.sub .v{font-size:13.5px; font-weight:700; color:var(--brand);}

/* ---------- комментарий к заказу ---------- */
.inp.area{height:auto; min-height:78px; padding:11px 14px; resize:vertical; line-height:1.4; font-weight:500; font-size:14px; font-family:inherit;}
.field label .opt{font-weight:500; opacity:.8;}
.counter{font-size:10.5px; color:var(--muted); text-align:right; margin-top:3px;}