/* CottonCode — лендинг-диалог: реплика человека, ответ бренда.

   Главное правило макета: один экран = одна реплика. Блок занимает ровно
   высоту окна минус шапку, а всё внутри набрано модульной шкалой, которая
   растёт и от ширины, и от ВЫСОТЫ окна. На большом мониторе контент
   заполняет экран, на низком ноутбуке ужимается — пустых полей и
   выпадающих хвостов нет ни там, ни там. */

:root{
  /* палитра (переключается в шапке, см. блок палитр внизу) */
  --ink:#14120E;          /* тёплый уголь, не чёрный */
  --surface:#1D1A15;
  --edge:#2E2A22;
  --edge-strong:#5A5344;
  --line:#6E6555;
  --thread:#EFEADF;
  --muted:#AFA797;
  --accent:#CB5F33;       /* терракота, высветлена до контраста 4.65 на фоне */
  --head-bg:#14120EF2;
  --btn-ink:#180B05;

  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --pad:clamp(1.1rem, 4vw, 3.5rem);
  --maxw:1240px;
  --head-h:clamp(52px, 6svh, 64px);

  /* модульная шкала: svh даёт рост от высоты экрана, vw подстраховывает */
  --t-xs:clamp(.7rem, .5rem + .45svh + .12vw, .95rem);
  --t-s: clamp(.8rem, .54rem + .62svh + .16vw, 1.1rem);
  --t-m: clamp(.88rem, .56rem + .82svh + .2vw, 1.3rem);
  --t-l: clamp(1.05rem, .6rem + 1.35svh + .3vw, 1.95rem);
  --t-xl:clamp(1.2rem, .6rem + 2svh + .55vw, 2.6rem);
  --t-hero:clamp(1.5rem, .6rem + 3.2svh + 1vw, 4rem);

  --g-xs:clamp(.3rem, .7svh, .75rem);
  --g-s: clamp(.45rem, 1.2svh, 1.3rem);
  --g-m: clamp(.7rem, 2.2svh, 2.4rem);
  --g-l: clamp(1rem, 3svh, 3rem);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth; scroll-padding-top:var(--head-h);
  scroll-snap-type:y proximity;   /* прилипание работает на корне, не на .page */
}
body{
  margin:0; background:var(--ink); color:var(--thread);
  font-family:var(--mono); font-size:var(--t-m); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent)}
h1,h2,h3{font-weight:500; letter-spacing:-.015em}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── шапка ────────────────────────────────────────── */
.head{
  position:sticky; top:0; z-index:30; height:var(--head-h);
  display:flex; align-items:center; gap:.9rem;
  padding:0 var(--pad); background:var(--head-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge);
}
.logo{font-weight:700; font-size:var(--t-m); text-decoration:none; color:var(--thread); white-space:nowrap}
.logo-sub{font-size:var(--t-xs); color:var(--muted); margin:0; white-space:nowrap}
.head-nav{margin-left:auto; display:flex; gap:clamp(.8rem,1.6vw,1.5rem)}
.head-nav a{
  font-size:var(--t-xs); color:var(--muted); text-decoration:none;
  padding:.15rem 0; border-bottom:1px solid transparent;
}
.head-nav a:hover, .head-nav a:focus-visible{color:var(--thread); border-color:var(--accent)}
.skip{
  background:none; border:1px solid var(--edge-strong); color:var(--muted);
  font-family:var(--mono); font-size:var(--t-xs); padding:.35rem .7rem;
  border-radius:3px; cursor:pointer; white-space:nowrap;
}
.skip:hover{color:var(--thread); border-color:var(--line)}
.skip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.skip[hidden]{display:none}
.head-tg{
  font-size:var(--t-xs); text-decoration:none; white-space:nowrap;
  color:var(--accent); border:1px solid var(--edge-strong); border-radius:999px;
  padding:.4em 1em; margin-left:auto;
}
.head-tg:hover{border-color:var(--accent)}
.head-nav a:hover, .head-nav a:focus-visible{color:var(--accent); border-color:transparent}
@media (max-width:980px){
  .head-nav{display:none}
  .skip{margin-left:auto}
}
@media (max-width:560px){ .logo-sub{display:none} }

/* ── экран-реплика ────────────────────────────────── */
.page{padding:0 var(--pad); overflow-x:clip}
.blk{
  max-width:var(--maxw); margin:0 auto;
  min-height:calc(100svh - var(--head-h));
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--g-m) 0;
  scroll-snap-align:start;
}

/* реплика человека */
.ask{
  margin:0 0 var(--g-m); color:var(--thread);
  font-size:var(--t-l); line-height:1.35; letter-spacing:-.02em;
}
.cmd{color:var(--thread)}
.caret{
  display:inline-block; width:.55em; height:1.05em; margin-left:.1em;
  background:var(--accent); vertical-align:-.16em; opacity:0;
}
.caret.is-on{opacity:1; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.idle{margin-top:var(--g-m); opacity:.6}

/* «печатает…» */
.thinking{display:none; gap:.32rem; margin:0 0 var(--g-m)}
.thinking.is-on{display:flex}
.thinking span{
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:pulse 1.2s ease-in-out infinite;
}
.thinking span:nth-child(2){animation-delay:.18s}
.thinking span:nth-child(3){animation-delay:.36s}
@keyframes pulse{0%,60%,100%{opacity:.25} 30%{opacity:1}}

/* ответ бренда */
.who{
  font-size:var(--t-xs) !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent) !important; margin:0 0 var(--g-s) !important;
}
.who::before{content:"● "; font-size:.8em}
.out{padding:0; min-width:0}
.js .out{opacity:0; transform:translateY(10px)}
.js .out.is-shown{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto; scroll-snap-type:none}
  .caret.is-on, .thinking span{animation:none}
  .js .out{opacity:1; transform:none; transition:none}
}

.out h2{font-size:var(--t-xl); margin:0 0 var(--g-s); color:var(--thread)}
.out h3{font-size:var(--t-m); margin:0 0 .3rem}
.out p{margin:0 0 var(--g-s); max-width:70ch; color:var(--muted); font-size:var(--t-s)}
.out p:last-child{margin-bottom:0}
.status{
  color:var(--thread); font-size:var(--t-s); margin:var(--g-m) 0 0 !important;
  padding-left:1.1rem; position:relative;
}
.status::before{content:"→"; position:absolute; left:0; color:var(--accent)}
.muted{color:var(--muted); font-size:var(--t-s)}

/* чипы фактов вместо приглушённой строки */
.chips{
  display:flex; gap:.5rem; flex-wrap:wrap; list-style:none;
  margin:var(--g-m) 0 0; padding:0;
}
.chips li{
  border:1px solid var(--edge-strong); border-radius:999px;
  padding:.35em .9em; font-size:var(--t-xs); color:var(--thread);
  white-space:nowrap;
}

/* ── экран 1: главный (композиция из канваса) ── */
.hero{
  display:grid; gap:clamp(1.2rem,2.5vw,2.4rem); align-items:center;
  grid-template-columns:minmax(300px,1.05fr) minmax(280px,.95fr);
}
.shout{
  font-size:clamp(2rem, 1rem + 3.4vw, 3.8rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.12; margin:0 0 .45em; color:var(--thread);
  text-wrap:balance;
}
.hero-tag{
  color:var(--muted); font-size:.78rem; letter-spacing:.14em;
  margin:0 0 clamp(1.2rem,3svh,2.4rem);
}
.out .price-big{
  margin:0 0 .35rem !important; font-size:clamp(1.7rem,1rem + 2svh,2.2rem);
  font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--thread) !important;
  font-variant-numeric:tabular-nums;
}
.out .price-note{margin:0 0 clamp(1.2rem,3svh,2.4rem) !important; font-size:.8rem}
.price-note s{color:var(--muted); text-decoration-color:var(--accent); text-decoration-thickness:.08em}
.price-note span{color:var(--thread)}
.btn-hero{padding:.95em 2em}
.hero-shot{margin:0}
.hero-shot img{
  width:calc(100% + 11vw); max-width:none;
  height:min(60svh, 620px); object-fit:cover; object-position:center 45%;
  border-radius:12px; border:1px solid var(--edge);
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:var(--g-s)}
  .hero-shot{order:-1; margin:0 calc(50% - 50vw)}
  .hero-shot img{width:100%; height:clamp(150px,27svh,340px); border-radius:0; border:0}
  .shout{font-size:clamp(1.5rem, 7vw, 2.1rem)}
}

.btn{grid-column:2; justify-self:start; margin-top:.35rem}

/* умеренный вылет вправо: полный bleed уводил надпись на кадре за экран */
.hero-shot{margin:0 max(calc(50% - 50vw), -3.5rem) 0 0}
.hero-shot img{
  width:100%; height:clamp(240px, 52svh, 640px); object-fit:cover;
  object-position:center 45%; border-radius:3px 0 0 3px;
}

.btn{
  display:inline-block; font-family:var(--mono); font-size:var(--t-s);
  letter-spacing:.04em; text-decoration:none;
  background:var(--accent); color:var(--btn-ink); font-weight:700;
  padding:.75em 1.7em; border:0; border-radius:4px; cursor:pointer;
  transition:filter .15s ease, transform .06s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--thread); outline-offset:3px}
.btn-ghost{background:transparent; color:var(--thread); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--thread); filter:none}

/* ── экран 2: витрина ─────────────────────────────── */
.grid{display:grid; gap:clamp(.6rem,1.2vw,1.1rem); grid-template-columns:repeat(4, minmax(0,1fr))}
.card{display:flex; flex-direction:column; gap:9px; min-width:0}
.card.is-sold{opacity:.72}
.card img{
  width:100%; aspect-ratio:1; height:auto; max-height:34svh; object-fit:cover;
  border:1px solid var(--edge); border-radius:12px 12px 12px 3px;
}
.card-line{height:3.2em; margin-top:3px}
.card-phrase{
  font-size:.9rem; font-weight:500; line-height:1.55; margin:0;
  overflow-wrap:anywhere; color:var(--thread);
}
.pmark{color:var(--accent); margin-right:.5em}
.card-phrase s{color:var(--muted); text-decoration-color:var(--accent); text-decoration-thickness:.09em}
.card-phrase .repl{color:var(--accent); white-space:nowrap}
.sizes-row{display:flex; gap:6px; width:100%}
.size{
  flex:1 1 0; min-width:0; font-family:var(--mono); font-size:.78rem;
  padding:.55em 0; text-align:center; background:transparent; color:var(--thread);
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
}
.size:hover{border-color:var(--thread)}
.size:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.size[aria-pressed="true"]{background:var(--thread); color:var(--ink); border-color:var(--thread)}
.size[disabled]{color:#8A8272; border-color:var(--edge); cursor:not-allowed; text-decoration:line-through}
.size-hint{margin:0 !important; font-size:.78rem; color:var(--accent) !important; min-height:0}
.card-cta{width:100%; border-radius:999px; padding:.75em 0; font-size:.8rem; text-align:center}
.fit-line{color:var(--muted); font-size:var(--t-xs); margin:var(--g-m) 0 0 !important}

/* ── экран 3: размеры ─────────────────────────────── */
.table-wrap{
  overflow-x:auto; margin:0 0 var(--g-s); width:100%; min-width:0;
  background:linear-gradient(to left, var(--ink), transparent) right/28px 100% no-repeat;
}
table{border-collapse:collapse; width:100%; min-width:480px; font-variant-numeric:tabular-nums}
th, td{text-align:left; padding:var(--g-s) 1rem; border-bottom:1px solid var(--edge)}
thead th{
  font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
td{font-size:var(--t-m); color:var(--muted)}
tbody th{font-weight:500; color:var(--thread); font-size:var(--t-m)}

/* ── упаковка (из канваса: без подложек) ── */
.pack{
  display:grid; gap:14px; margin:0;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.pack-item{display:flex; flex-direction:column; gap:10px; min-width:0}
.pack-item img{
  width:100%; aspect-ratio:4/3; height:auto; max-height:34svh; object-fit:cover;
  border-radius:12px; border:1px solid var(--edge);
}
.pi-title{font-size:.95rem; font-weight:500; margin:0; color:var(--thread)}
.pi-text{font-size:.8rem; color:var(--muted); margin:0; text-wrap:pretty}

/* ── вопросы: терминальное окно ── */
.term{
  max-width:720px; background:var(--surface); border:1px solid var(--edge);
  border-radius:12px; overflow:hidden;
}
.term-bar{
  display:flex; align-items:center; gap:8px; padding:10px 16px;
  border-bottom:1px solid var(--edge);
}
.term-bar i{width:10px; height:10px; border-radius:50%; background:var(--edge)}
.term-bar i:first-child{background:var(--accent)}
.term-bar i:nth-child(2){background:var(--edge-strong)}
.term-bar span{margin-left:8px; font-size:.72rem; color:var(--muted)}
.term-body{padding:14px 20px 16px}
.qa summary{
  list-style:none; display:flex; gap:10px; align-items:baseline; cursor:pointer;
  padding:8px 0; font-size:.9rem; color:var(--thread);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover, .qa summary:focus-visible{color:var(--accent)}
.qa summary:focus-visible{outline:none}
.dollar{color:var(--accent); flex:0 0 auto}
.qa-a{
  font-size:.85rem; color:var(--muted); margin:0;
  padding:2px 0 12px 22px; max-width:58ch;
}

/* ── финал: слайдер «заказать» ── */
.final-line{
  font-size:clamp(1.7rem, 1rem + 2.6vw, 3.2rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.15; margin:0 0 .5em;
  max-width:22ch; text-wrap:pretty; color:var(--thread);
}
.final-line .caret{width:.5em; height:.85em; vertical-align:-.04em}
.final-price{margin:0 0 clamp(1.4rem,3.4svh,2.2rem); font-size:2rem; font-weight:700; letter-spacing:-.03em}
.final-price span{font-size:.78rem; font-weight:400; letter-spacing:0; white-space:nowrap}
.final-price s{color:var(--muted); text-decoration-color:var(--accent)}
.slide-order{
  position:relative; width:min(440px,100%); height:58px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  cursor:pointer; user-select:none; touch-action:none;
}
.slide-order:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.so-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--muted); letter-spacing:.06em; pointer-events:none;
}
.so-knob{
  position:absolute; left:4px; top:4px; width:50px; height:50px; border-radius:50%;
  background:var(--accent); color:var(--btn-ink); font-weight:700; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; cursor:grab;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.slide-order.is-dragging .so-knob{transition:none; cursor:grabbing}
.slide-order.is-done .so-knob{background:var(--thread)}
@media (prefers-reduced-motion:reduce){.so-knob{transition:none}}

/* ── подвал вне диалога ───────────────────────────── */
.page-foot{
  max-width:var(--maxw); margin:0 auto; padding:var(--g-m) var(--pad);
  border-top:1px solid var(--edge); color:var(--muted); font-size:var(--t-xs);
}
.page-foot p{margin:.22rem 0}
.page-foot a{color:var(--muted)}
.foot-logo{font-weight:700; color:var(--thread) !important; font-size:var(--t-m)}
.cursor{
  display:inline-block; width:.5em; height:.95em; margin-left:.12em;
  background:var(--accent); vertical-align:-.1em;
  animation:blink 1.1s steps(1) infinite;
}
.foot-small{font-size:var(--t-xs); margin-top:var(--g-s) !important}

/* ── модалка ──────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:50; background:#050504CC;
  display:flex; align-items:center; justify-content:center; padding:1rem;
  backdrop-filter:blur(3px);
}
.modal[hidden]{display:none}
.modal-card{
  background:var(--ink); border:1px solid var(--line); border-radius:4px;
  padding:1.4rem; width:min(440px,100%); position:relative;
  max-height:90svh; overflow-y:auto;
}
.modal-cmd{font-size:.78rem; color:var(--muted); margin:0 0 .7rem}
.modal-cmd::before{content:"> "; color:var(--accent)}
.modal-card h3{margin:0 0 .5rem; font-size:1.05rem}
.modal-item{
  font-size:.8rem; color:var(--thread);
  background:var(--surface); border:1px solid var(--edge-strong); border-radius:2px;
  padding:.6rem .7rem; margin:0 0 1rem;
}
.modal-close{
  position:absolute; top:.35rem; right:.5rem; background:none; border:0;
  color:var(--muted); font-size:1.5rem; line-height:1; cursor:pointer; padding:.2rem .4rem;
}
.modal-close:hover{color:var(--thread)}
.modal-close:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
#order-form{display:flex; flex-direction:column; gap:.75rem}
#order-form label{
  display:flex; flex-direction:column; gap:.28rem;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
#order-form input[type="text"], #order-form input[type="email"]{
  font-family:var(--mono); font-size:16px;   /* ниже 16px iOS зумит страницу */
  text-transform:none; letter-spacing:0;
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  color:var(--thread); padding:.55rem .65rem;
}
#order-form input:focus-visible{outline:2px solid var(--accent); outline-offset:0}
.agree{
  flex-direction:row !important; align-items:flex-start; gap:.5rem !important;
  text-transform:none !important; letter-spacing:0 !important; font-size:.78rem !important;
}
.agree input{width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto; margin-top:.15rem}
.modal-note{font-size:.76rem; color:var(--muted); margin:.15rem 0 0}
.modal-done[hidden]{display:none}
.done-title{color:var(--accent); margin:0 0 .45rem; font-size:.88rem}
.done-text{color:var(--muted); font-size:.83rem; margin:0 0 .85rem}
.done-order{
  font-family:var(--mono); font-size:.76rem; line-height:1.6; white-space:pre-wrap;
  background:var(--surface); border:1px solid var(--edge-strong); border-radius:2px;
  padding:.7rem; margin:0 0 .85rem; overflow-x:auto; color:var(--thread);
}
.done-actions{display:flex; gap:.55rem; flex-wrap:wrap}

/* ══ ПЛАНШЕТ И УЗКИЙ НОУТБУК ══════════════════════════
   Четыре карточки в ряд перестают читаться раньше, чем кончается ширина,
   поэтому витрина и упаковка становятся лентой: строка всегда одна. */
@media (max-width:1040px){
  /* футболки: вертикально, две колонки; экран витрины растёт и скроллится вниз */
  .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
  /* упаковка: лента, второстепенный контент */
  .pack{
    grid-auto-flow:column; grid-template-columns:none;
    grid-auto-columns:min(46%, 300px);
    overflow-x:auto; scroll-snap-type:x mandatory;
    width:100%; min-width:0; scrollbar-width:none; padding-bottom:.4rem;
  }
  .pack::-webkit-scrollbar{display:none}
  .pack-item{scroll-snap-align:center}

}

/* ══ ТЕЛЕФОН ══════════════════════════════════════════ */
@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:var(--g-s)}
  .hero-shot{order:-1; margin:0 calc(50% - 50vw)}
  .hero-shot img{height:clamp(150px, 27svh, 340px); border-radius:0}
  .out .lede{max-width:none}
  .shout{font-size:clamp(1.4rem, 7vw, 1.9rem)}
  .ask{font-size:clamp(1rem, 4.6vw, 1.3rem)}
}
@media (max-width:640px){
  .blk{padding:var(--g-s) 0}
  .grid{grid-template-columns:1fr; gap:18px}   /* телефон: одна колонка */
  .pack{grid-auto-columns:84%}
  .card img{max-height:32svh}
  .pack-item img{max-height:24svh}
  .size{min-height:44px; min-width:46px}
  .buy{display:flex; flex-direction:column; align-items:stretch; gap:var(--g-xs)}
  .buy .btn{width:100%; text-align:center; margin-top:var(--g-xs)}
  .btns{width:100%; flex-direction:column}
  .btns .btn{width:100%; text-align:center}
  .done-actions .btn{width:100%; text-align:center}
  table{min-width:420px}
  .pack-gift{padding-left:.8rem}
  .honest{line-height:1.5; padding:.6rem .8rem}

  /* оплата и доставка столбиком не влезают в экран — свайп-панели,
     тем же жестом, что витрина и упаковка */
  .order-grid{
    grid-auto-flow:column; grid-template-columns:none;
    grid-auto-columns:88%;
    overflow-x:auto; scroll-snap-type:x mandatory;
    width:100%; min-width:0; scrollbar-width:none; padding-bottom:.4rem;
  }
  .order-grid::-webkit-scrollbar{display:none}
  .order-grid > div{scroll-snap-align:center}
}

/* browser surfaces: выделение, каретка, полосы прокрутки — тоже наши */
::selection{background:var(--accent); color:var(--btn-ink)}
:root{scrollbar-color:var(--edge-strong) var(--ink); caret-color:var(--accent)}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--edge-strong); border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--line)}

/* ── корзина ──────────────────────────────────────── */
.head-cart{
  margin-left:auto; font-size:var(--t-xs); text-decoration:none;
  color:var(--thread); white-space:nowrap;
}
.head-cart + .skip{margin-left:0}
#cart-count{
  display:inline-block; min-width:1.5em; text-align:center; margin-left:.35em;
  background:var(--accent); color:var(--btn-ink); border-radius:999px;
  font-size:.72em; padding:.1em .3em; font-weight:700; vertical-align:.12em;
}
.head-nav{margin-left:auto}
.head-nav ~ .head-cart{margin-left:0}
.head-back{font-size:var(--t-xs); color:var(--muted); text-decoration:none; margin-left:auto}
.head-back:hover{color:var(--thread)}

.cart-blk{justify-content:flex-start; padding-top:var(--g-l)}
.cart-list{list-style:none; margin:0 0 var(--g-s); padding:0; max-width:640px}
.cart-item{
  display:grid; align-items:center; gap:.3rem .9rem;
  grid-template-columns:1fr auto auto auto auto;
  border-bottom:1px solid var(--edge); padding:var(--g-s) 0;
}
.ci-phrase{font-size:var(--t-s)}
.ci-phrase s{color:var(--muted); text-decoration-color:var(--accent)}
.ci-size{font-size:var(--t-xs); color:var(--muted); white-space:nowrap}
.ci-qty{display:flex; align-items:center; gap:.45rem}
.ci-qty button{
  width:26px; height:26px; background:none; border:1px solid var(--line);
  color:var(--thread); border-radius:50%; cursor:pointer; font-family:var(--mono);
  line-height:1;
}
.ci-qty button[disabled]{opacity:.4; cursor:not-allowed}
.ci-qty b{min-width:1.2em; text-align:center; font-variant-numeric:tabular-nums}
.ci-sum{font-weight:700; font-size:var(--t-s); white-space:nowrap; font-variant-numeric:tabular-nums}
.ci-x{
  background:none; border:0; color:var(--muted); font-size:1.1rem;
  cursor:pointer; padding:.2rem .4rem;
}
.ci-x:hover{color:var(--accent)}
.cart-more{font-size:var(--t-xs); color:var(--muted)}
.cart-more a{margin-right:.7rem; text-decoration:none; border-bottom:1px dashed var(--edge-strong); color:var(--thread)}
.cart-more a:hover{border-color:var(--accent)}
.cart-total{
  display:flex; justify-content:space-between; align-items:baseline; max-width:640px;
  border-top:1px solid var(--edge-strong); padding-top:var(--g-s); margin-top:var(--g-s);
  font-size:var(--t-m);
}
.cart-total b{font-size:var(--t-xl); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.cart-pair-note{font-size:var(--t-xs); color:var(--accent); margin:.3rem 0 0}
#order-form{display:flex; flex-direction:column; gap:.75rem; max-width:440px; margin-top:var(--g-m)}
#order-form label{
  display:flex; flex-direction:column; gap:.28rem;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
#order-form input[type="text"], #order-form input[type="email"]{
  font-family:var(--mono); font-size:16px;   /* ниже 16px iOS зумит страницу */
  text-transform:none; letter-spacing:0;
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  color:var(--thread); padding:.55rem .65rem;
}
#order-form input:focus-visible{outline:2px solid var(--accent); outline-offset:0}
.modal-done{max-width:440px}

/* тост «в корзине» */
.toast{
  position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%, 150%);
  display:flex; align-items:center; gap:1rem; z-index:60;
  background:var(--surface); border:1px solid var(--edge-strong); border-radius:999px;
  padding:.55rem .6rem .55rem 1.2rem; font-size:var(--t-xs); white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.7,.3,1); box-shadow:0 10px 30px #00000055;
}
.toast.is-on{transform:translate(-50%, 0)}
.toast .btn{padding:.55em 1.1em; border-radius:999px}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* строки корзины на телефоне: две строки вместо пяти колонок */
@media (max-width:640px){
  .cart-item{
    grid-template-columns:1fr auto auto;
    grid-template-areas:"phrase phrase x" "size qty sum";
  }
  .ci-phrase{grid-area:phrase}
  .ci-size{grid-area:size; align-self:center}
  .ci-qty{grid-area:qty; justify-self:center}
  .ci-sum{grid-area:sum; justify-self:end}
  .ci-x{grid-area:x; justify-self:end}
}