/* 01 · Гастроном — белые ценники на светлом прилавке, графы, штамп и весы. */

:root {
  --bg: #ECEEEA;        /* прилавок */
  --paper: #FFFFFF;     /* ценник */
  --ink: #1E2226;       /* чернила */
  --mute: #5B646A;      /* подписи граф */
  --rule: #C7CFD3;      /* линии граф */
  --violet: #7C2028;    /* штамп «Мантыново» — бордовый из логотипа (имя переменной историческое) */
  --red: #C4301F;       /* «Уценено», ошибки */
  --accent: var(--violet);
  --sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sign: "Sofia Sans Extra Condensed", "Golos Text", "Arial Narrow", sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-h: 60px;
  --ease: cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
  --ph: 4 / 5;  /* форма фото товара везде (каталог, товар): одежда — чуть вытянутая, еда — квадрат (ниже) */
}
html[data-shop="clothes"] { --accent: #4B1B8F; }   /* фиолетовый из логотипа */
/* «Мантыново»: тёплый прилавок и шапка цвета круга логотипа — логотип сливается с шапкой, без «наклейки» */
html[data-shop="food"] { --bg: #EDE7DB; --rule: #D7CFC1; --cream: #F3EFE3; --ph: 1 / 1; }
html[data-shop="food"] .sign { background: var(--cream); }
/* строка разделов на телефоне — того же крема, что шапка: одним блоком, линия только снизу */
html[data-shop="food"] .cats { background: var(--cream); }
html[data-shop="food"] .cats::after { background: linear-gradient(to right, rgb(243 239 227 / 0), var(--cream) 55%); }
@media (max-width: 1023.98px) { html[data-shop="food"] .sign { box-shadow: none; } }
/* нижняя плашка корзины и панель с кнопкой — тоже крем, в пару к верху */
html[data-shop="food"] .bar, html[data-shop="food"] .act { background: var(--cream); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;   /* слово длиннее строки переносится, а не вылезает за край блока */
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* заголовок экрана получает фокус при переходе (для программы чтения с экрана) — рамка ему не нужна */
h1[tabindex="-1"]:focus { outline: none; }
/* элемент в фокусе не прячется под нижней плашкой (корзина, «В корзину», «Оформить заказ») */
@media (max-width: 1023px) { html { scroll-padding-bottom: calc(var(--bar-h) + var(--safe-b) + 32px); } }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; }

/* моноширинные подписи — всегда заглавными; знак ₽ и суммы внутри них — Golos */
.mono, .g-l {
  font: 400 13px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute);
  font-variant-ligatures: none;
}
.mono { line-height: 18px; }
.m { font-family: var(--sans); font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1264px; margin: 0 auto; padding: 0 16px; }

/* ---------- вывеска ---------- */
.sign { background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.sign-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 12px; min-height: 124px; padding-top: 16px; padding-bottom: 14px; }
.logo {
  justify-self: start; display: inline-block; max-width: 100%; padding-bottom: 5px; border-bottom: 1px solid var(--ink);
  font: 800 40px/.9 var(--sign); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  overflow-wrap: anywhere;
}
/* 320–339 px: «МаркетплейсамНет» в 40 px чуть шире экрана (на 404 и в заготовке шапки) — мельче; ниже, чтобы длинные названия остались мельче */
@media (max-width: 339px) { .logo { font-size: 34px; } }
/* длинное название (его меняют в админ-панели) — мельче и с переносом, а не за край экрана */
.logo--l { font-size: 32px; }
.logo--xl { font-size: 26px; line-height: 1; }
/* в каталоге название магазина — заголовок страницы */
.sign-h { justify-self: start; min-width: 0; max-width: 100%; margin: 0; font: inherit; }
html[data-shop="food"] .logo--clothes, html[data-shop="clothes"] .logo--food { display: none; }
/* МаркетплейсамНет: знак «Х» слева от названия; на телефоне буквы подгоняются по ширине экрана */
.logo--x { display: inline-flex; align-items: center; gap: .3em; }
.logo-x { flex: none; width: 1.15em; height: 1.15em; margin-top: -.1em; }
@media (max-width: 1023.98px) { .logo.logo--x:not(.logo--s) { font-size: clamp(22px, 7.4vw, 40px); } }
.logo--s.logo--x .logo-x { width: 1em; height: 1em; }
/* круглый логотип «Мантыново» вместо надписи */
.logo--mark { padding: 0; border: 0; line-height: 0; font-size: 0; }
.logo--mark img { display: block; width: 92px; height: 92px; }
.logo--mark.logo--s img { width: 52px; height: 52px; }
.sign-lines { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.sign-lines span { white-space: nowrap; }
.sign-zones { margin-top: 4px; font-size: 15px; line-height: 20px; max-width: 32em; text-wrap: balance; }
/* телефон: «Мои заказы» — отдельной строкой под адресами доставки (рядом с названием не помещается) */
.sign-act { display: contents; }
.sign-act .call { grid-column: 2; grid-row: 1; }
.call {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 2px; text-decoration: none;
}
.call-n { display: none; font: 500 15px/20px var(--sans); font-variant-numeric: tabular-nums; }
.mine-l { grid-column: 1 / -1; grid-row: 3; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 -10px; font: 500 15px/20px var(--sans); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sign-night { margin-top: 4px; font: 500 15px/20px var(--sans); color: var(--accent); max-width: 32em; }
/* телефон: над каталогом есть полоска «Ваш заказ № …» (она ведёт туда же) — ссылку «Мои заказы» в шапке не дублируем,
   первая карточка видна целиком */
@media (max-width: 1023px) { body:has(#notices .mine) .sign .mine-l { display: none; } }

/* над каталогом: «приём остановлен» и «Ваш заказ № … — ждёт подтверждения» */
.notices { display: grid; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.notices:empty { display: none; }
.closed { display: grid; gap: 10px; justify-items: start; padding: 14px 16px 16px; background: var(--paper); box-shadow: inset 0 3px 0 var(--red), 0 1px 0 var(--rule); }
.closed p { font-size: 16px; line-height: 22px; }
.closed .btn { min-width: 0; max-width: 100%; white-space: normal; text-align: center; }
.mine {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 10px 8px 16px;
  background: var(--paper); box-shadow: inset 3px 0 0 var(--accent), 0 1px 0 var(--rule); text-decoration: none; font: 500 16px/21px var(--sans);
}
/* заказ отменили — полоска до конца выбранного времени доставки */
.mine--off { box-shadow: inset 3px 0 0 var(--red), 0 1px 0 var(--rule); }
/* Android: «Приложение для Android» над каталогом; «×» прячет полоску на этом устройстве */
.app-l { display: flex; align-items: stretch; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.app-l > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 4px 8px 10px; text-decoration: none; }
.app-l img { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px var(--rule); }
.app-l a > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.app-l b { font: 600 16px/21px var(--sans); }
.app-l a > span > span { font-size: 14px; line-height: 18px; color: var(--mute); }
.app-x { flex: none; width: 48px; display: grid; place-items: center; border: 0; background: none; color: var(--mute); cursor: pointer; }
.closed-l { margin-top: 10px; font-size: 15px; line-height: 20px; color: var(--red); }
.closed-l a { color: inherit; }
/* ссылка на товар, которого больше нет */
.gone-l { padding: 12px 16px; background: var(--paper); box-shadow: inset 3px 0 0 var(--mute), 0 1px 0 var(--rule); font: 500 16px/21px var(--sans); }
/* каталог грузится дольше 7 секунд */
.slow-l { margin-top: 16px; font: 500 16px/22px var(--sans); }
.slow-l a { white-space: nowrap; }
.slow-l + .sk-list, .wrap:has(> .slow-l) + .sk-list { padding-top: 24px; }

/* ---------- загрузка ---------- */
.sk-list { display: grid; gap: 12px; padding-top: 72px; }
.tag--sk { height: 184px; }
.tag--sk .tag-ph { background: var(--bg); }
.tag--sk .tag-body { display: grid; align-content: end; gap: 10px; }
.tag--sk i { display: block; height: 20px; border-top: 1px solid var(--rule); }
/* «мигает» только экран первой загрузки (не строка шапки ночью, когда в ней одно слово) */
.tag--sk, .sign-load { animation: breathe 1.4s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: 1; } to { opacity: .45; } }

/* ---------- отделы ---------- */
.cat-layout { position: relative; }
.cats {
  position: sticky; top: 0; z-index: 20; margin: 0 -16px; height: 48px;
  background: var(--paper); box-shadow: 0 1px 0 var(--rule);
}
.cats-h { display: none; }
.cats-in { display: flex; height: 48px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 2px; }
.cats-in::-webkit-scrollbar { display: none; }
/* справа есть ещё категории — затухание и «›»: строку можно листать вбок */
.cats::after {
  content: "›"; position: absolute; top: 0; right: 0; bottom: 1px; width: 48px; padding-right: 10px;
  display: flex; align-items: center; justify-content: flex-end; pointer-events: none;
  background: linear-gradient(to right, rgb(255 255 255 / 0), var(--paper) 55%);
  font: 400 26px/1 var(--sans); color: var(--mute); opacity: 0; transition: opacity .15s;
}
.cats.has-more::after { opacity: 1; }
.cat {
  position: relative; flex: none; display: flex; align-items: center; height: 48px; padding: 0 14px;
  font: 500 15px/20px var(--sans); color: var(--mute); white-space: nowrap;
}
.cat[aria-current="true"] { color: var(--ink); }
.cat[aria-current="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--ink); }

.dept { scroll-margin-top: 48px; }
.dept-h { padding: 32px 0 12px; }
/* телефон: первый отдел ближе к шапке — первая карточка видна целиком и под полоской «Ваш заказ …» */
@media (max-width: 1023px) { .dept:first-child .dept-h { padding-top: 20px; } }
.dept-h h2 { margin-top: 4px; font: 700 24px/28px var(--sans); letter-spacing: -.005em; }
.dept-h p { margin-top: 3px; font-size: 15px; line-height: 20px; color: var(--mute); }
.shelf { display: grid; gap: 12px; }

/* ---------- ценник ---------- */
.tag {
  position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr);
  grid-template-areas: "ph body" "buy buy"; column-gap: 12px;
  padding: 12px; background: var(--paper); box-shadow: 0 1px 0 var(--rule);
}
.tag-ph { grid-area: ph; position: relative; display: block; aspect-ratio: var(--ph); overflow: hidden; background: var(--bg); }
.tag-ph img, .gal-i img, .line-ph img, .about-ph img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid var(--rule); outline-offset: -1px; filter: contrast(1.03) saturate(1.05); }
.tag[data-state="out"] .tag-ph img { filter: grayscale(.6) contrast(1.03); opacity: .7; }
.tag-body { grid-area: body; position: relative; display: flex; flex-direction: column; min-width: 0; }
.has-stamp .tag-body { padding-top: 30px; }
.tag-body > .stamp { position: absolute; top: -4px; right: -4px; }
.tag-t { font: 500 17px/22px var(--sans); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tag-t a { text-decoration: none; }
.tag-t a::after { content: ""; position: absolute; inset: 0; z-index: 0; }  /* тап по названию и фото ведёт в товар */
.tag-s { margin-top: 3px; font-size: 15px; line-height: 20px; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* «Вес» и «В наличии» — рядом («Вес» при нехватке места — в две строки, по словам); если и так не помещаются
   («12 шт., 800 г» и «9999 упаковок»), вторая графа уходит строкой ниже на всю ширину, а не рвёт слова по буквам */
.tag-g { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; column-gap: 14px; }
.tag-g .g { flex: 1 1 0; min-width: auto; }
.tag-g .g + .g { flex: 0 1 auto; }
.tag-g .g--wide { flex-basis: 100%; }
/* 320 px: «Вес» и «В наличии» всегда друг под другом */
@media (max-width: 359px) { .tag-g .g { flex-basis: 100%; } }
.tag-buy {
  grid-area: buy; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.tag-ph, .tag-body .stamp { z-index: 1; }
.tag-body .stamp { pointer-events: none; }

/* графа */
.g { min-width: 0; padding-top: 5px; border-top: 1px solid var(--rule); }
.g-l { display: block; }
.g-v { display: block; margin-top: 2px; font: 500 15px/20px var(--sans); font-variant-numeric: tabular-nums; }
.g.is-low .g-v { color: var(--accent); }
.g.is-out .g-v { color: var(--mute); }
.sizes-line { display: flex; flex-wrap: wrap; gap: 0 6px; }
.sizes-line del { color: var(--mute); text-decoration-thickness: 1px; }
.sizes-line .last { font-style: normal; color: var(--red); }

/* цена */
.price { font: 700 24px/26px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.price--cut { display: grid; justify-items: start; }
.old { position: relative; font: 400 16px/20px var(--sans); color: var(--mute); text-decoration: none; letter-spacing: 0; }
.old::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 1.5px; margin-top: -1px; background: var(--red); transform: rotate(-8deg); }

/* ---------- кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 112px; min-height: 44px; padding: 0 16px; border-radius: 2px;
  background: var(--ink); color: #fff; font: 600 15px/20px var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .12s;
}
.btn:active { background: #000; }
.btn--main { width: 100%; min-height: 52px; font-size: 16px; }
.btn--line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line:active { background: var(--bg); }
.btn[aria-disabled="true"], .btn:disabled { background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1.5px var(--rule); cursor: not-allowed; }
.btn .ic { margin-right: -4px; }
.soon {
  display: inline-flex; align-items: center; justify-content: center; min-width: 112px; height: 44px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 2px; color: var(--mute); font: 500 15px/20px var(--sans); white-space: nowrap;
}
.buy { flex: none; display: flex; }
.buy > * { animation: swap .12s linear; }
@keyframes swap { from { opacity: 0; } to { opacity: 1; } }

/* счётчик «− N +»: три ячейки в чернильной рамке, как графы бланка */
.qty {
  display: inline-grid; grid-template-columns: 44px minmax(44px, auto) 44px; height: 44px;
  background: var(--paper); border-radius: 2px; outline: 1.5px solid var(--ink); outline-offset: -1.5px;
}
.qty button { display: grid; place-items: center; width: 44px; height: 100%; color: var(--ink); }
.qty button:active { background: var(--bg); }
.qty button[aria-disabled="true"] { color: var(--rule); cursor: not-allowed; }
.qty output { display: grid; place-items: center; min-width: 44px; padding: 0 8px; border-inline: 1px solid var(--rule); font: 700 18px/1 var(--sans); font-variant-numeric: tabular-nums; }
.qty--big { height: 48px; }
.qty--sm { grid-template-columns: 36px minmax(36px, auto) 36px; height: 36px; }
.qty--sm button { width: 36px; }
.qty--sm output { min-width: 36px; font-size: 16px; }
.sq { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 2px; color: var(--ink); }
.sq--frame { box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper); }
.sq[disabled] { color: var(--rule); cursor: default; }

/* ---------- штамп ---------- */
.stamp {
  position: relative; display: inline-block; padding: 4px 8px 3px; border: 1.5px solid currentColor; border-radius: 1px;
  background: var(--paper); color: var(--accent); white-space: nowrap;
  font: 400 13px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; font-variant-ligatures: none;
}
.stamp::before { content: ""; position: absolute; inset: 1.5px; border: .75px solid currentColor; pointer-events: none; }
.stamp--mute { color: var(--mute); }
.stamp--red { color: var(--red); }
.stamp--s { padding: 2px 6px 1px; }

/* ---------- снято с продажи ---------- */
.gone { margin-top: 32px; }
.gone summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 12px 0 16px;
  background: var(--paper); box-shadow: 0 1px 0 var(--rule); cursor: pointer; list-style: none; color: var(--ink);
}
.gone summary::-webkit-details-marker { display: none; }
.gone summary .mono { color: var(--ink); }
.gone summary .ic { transition: transform .2s var(--ease); }
.gone[open] summary .ic { transform: rotate(180deg); }
.gone-list { display: grid; gap: 8px; padding-top: 8px; }
.mini {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 72px;
  padding: 12px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); overflow: hidden;
}
.mini img { width: 48px; height: 48px; object-fit: cover; filter: grayscale(1); opacity: .8; outline: 1px solid var(--rule); outline-offset: -1px; }
.mini-t { font: 500 15px/20px var(--sans); color: var(--mute); }
.mini .stamp { position: absolute; top: 8px; right: 8px; }
.mini-x { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mini-x line { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- о магазине ---------- */
.about { margin-top: 32px; padding: 16px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); display: grid; gap: 14px; }
.about-ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); }
.about-t { font-size: 16px; line-height: 24px; }
.about-g { display: grid; gap: 10px; }
.about-g a { text-decoration: none; }
.about .g-v { font-weight: 400; }
.legal { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 20px; color: var(--mute); }
.legal a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
mark.todo { background: none; color: var(--red); border-bottom: 1px dashed currentColor; }
.muted { color: var(--mute); }
.is-low { color: var(--accent); }
.link { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/20px var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- нижняя плашка корзины ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding-right: var(--scroll-lock-gap, 0px); }
.bar {
  display: flex; align-items: center; gap: 12px; height: calc(var(--bar-h) + var(--safe-b)); padding: 0 16px var(--safe-b);
  background: var(--paper); box-shadow: 0 -1px 0 var(--ink); text-decoration: none;
}
.bar--empty { height: calc(52px + var(--safe-b)); }
.bar-t { flex: 1; min-width: 0; display: grid; }
.bar-t b { font: 600 16px/20px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-t .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar--empty .mono { letter-spacing: .03em; }
.bar .btn { min-width: 0; padding: 0 14px; }
.bar-btn .ic { display: none; margin: 0; }
/* корзина на телефоне: итог и «Оформить заказ» закреплены внизу */
.go { display: flex; align-items: center; gap: 12px; padding: 8px 16px calc(8px + var(--safe-b)); background: var(--paper); box-shadow: 0 -1px 0 var(--ink); }
.go-t { display: grid; flex: none; }
.go-t b { font: 700 20px/24px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.go .btn { flex: 1; width: auto; min-width: 0; min-height: 48px; }
.pad-go { height: calc(64px + var(--safe-b) + 8px); }
/* не набран минимум — вместо итога «До минимального заказа ещё 90 ₽» */
.go-min { flex: 1; min-width: 0; font: 500 15px/19px var(--sans); }
.go-min b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* узкий экран: на кнопке всегда слово «Корзина», место освобождаем, убрав мини-шкалу; до 390 px —
   иначе «12 позиций · 21 890 ₽» и «Бесплатная доставка» обрезаются многоточием (на 390 шкала ещё помещается) */
@media (max-width: 399.98px) { .bar { gap: 10px; } }
@media (max-width: 389.98px) { .bar .scale { display: none; } }
@media (max-width: 379px) { .bar--empty .mono { letter-spacing: 0; } }
.scale { flex: none; width: 72px; height: 16px; color: var(--ink); overflow: visible; }
.scale .ptr { transition: transform .3s var(--ease); }
.pad-dock { height: calc(var(--bar-h) + var(--safe-b) + 16px); }

/* ленточка-сообщение над нижней панелью */
.note {
  position: absolute; left: 0; right: 0; bottom: 100%; margin: 0; padding: 10px 16px; background: var(--paper);
  box-shadow: 0 -1px 0 var(--accent); color: var(--accent);
  font: 500 15px/20px var(--sans);
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.note.is-on { opacity: 1; transform: none; }
.note.is-on a, .note.is-on button { pointer-events: auto; color: inherit; white-space: nowrap; text-underline-offset: 2px; }
/* «Вернуть» после «×» в корзине: зона нажатия выше самой строки */
.note-undo { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 6px; font: 600 15px/20px var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* «Сначала выберите размер» — строка над неактивной «В корзину»; касание кнопки её подсвечивает */
.need-l { flex: 0 0 100%; margin-bottom: 8px; font: 500 15px/20px var(--sans); color: var(--ink); }
/* «почему кнопка серая»: строку с причиной коротко подсвечиваем */
:root { --why: rgb(91 63 166 / .14); }
html[data-shop="clothes"] { --why: rgb(196 48 31 / .12); }
.is-why { animation: why 1.8s var(--ease); }
@keyframes why { 0%, 55% { background-color: var(--why); box-shadow: 0 0 0 6px var(--why); } 100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; } }

/* ---------- товар ---------- */
.topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 4px 0; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 8px; font: 500 16px/20px var(--sans); text-decoration: none; }
.to-cart { display: inline-flex; align-items: center; min-height: 44px; padding-left: 8px; font: 500 15px/20px var(--sans); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.to-cart b { font-weight: 600; }
.logo--s { font-size: 24px; padding-bottom: 3px; text-align: right; }
.topline .back { flex: none; white-space: nowrap; }
.topline .brand-s { min-width: 0; }
.pv { padding-bottom: 24px; }
.pv-screen .gal { margin: 0 -16px; }
/* на планшете и в узком окне фото не выше 60% экрана — название и цена остаются видны */
.pv-screen .gal-i { max-height: 60vh; }
.gal { position: relative; }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; background: var(--paper); }
.gal-track::-webkit-scrollbar { display: none; }
.gal-i { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: var(--ph); overflow: hidden; cursor: zoom-in; background: var(--bg); }
.gal-foot { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px 12px 4px 16px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.gal-n { flex: 1; }
.gal-foot .sq { width: 44px; }

.big { position: relative; margin-top: 12px; padding: 4px 16px 16px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.big > .stamp { position: absolute; top: 12px; right: 12px; z-index: 1; }
.big .g { padding-top: 7px; margin-top: 10px; }
.big .g--first { border-top: 0; margin-top: 0; padding-top: 12px; }
.big.has-stamp .g--first .g-l { margin-right: 150px; }
.big-t { font: 600 26px/31px var(--sans); letter-spacing: -.01em; margin-top: 4px; }
.big-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min-content, 1.2fr); column-gap: 16px; }  /* цена — всегда целиком */
.big-price { font: 700 32px/34px var(--sans); font-variant-numeric: tabular-nums; margin-top: 4px; white-space: nowrap; letter-spacing: -.01em; }
.big-price.price--cut { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.big-price .old { font-size: 18px; }
.big .g-v.is-low { color: var(--accent); }

.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.size {
  position: relative; display: grid; align-content: center; justify-items: center; min-width: 64px; height: 56px; padding: 0 8px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 2px;
}
.size b { font: 600 15px/18px var(--sans); white-space: nowrap; }
.size span { font: 400 13px/16px var(--sans); color: var(--mute); white-space: nowrap; }
.size[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.size[aria-checked="true"] span { color: #fff; }
.size:disabled { cursor: not-allowed; }
.size:disabled b, .size:disabled span { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.size:not(:disabled):not([aria-checked="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

.desc { margin-top: 20px; font-size: 16px; line-height: 24px; max-width: 38em; }
.facts { margin-top: 20px; padding: 0 16px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.fact { padding: 12px 0 13px; border-top: 1px solid var(--rule); }
.fact:first-child { border-top: 0; }
.fact p { margin-top: 3px; font-size: 16px; line-height: 23px; }
.facts-h { display: block; margin-top: 28px; }

.act {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 8px 16px calc(8px + var(--safe-b)); background: var(--paper); box-shadow: 0 -1px 0 var(--ink);
}
.act-row { display: flex; flex-wrap: wrap; gap: 0 8px; }
/* «В корзине · 5 460 ₽» на узком экране — в две строки: рядом со счётчиком в одну не помещается */
.act .btn--main { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; white-space: normal; line-height: 18px; text-align: center; }
.act .soon { flex: 1; height: 48px; }
.act-gone { flex: 1; display: grid; gap: 8px; }
.pad-act { height: calc(64px + var(--safe-b) + 24px); }
.pv-screen:has(.need-l) .pad-act { height: calc(92px + var(--safe-b) + 24px); }

/* шторка размеров */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgb(30 34 38 / .4); opacity: 0; transition: opacity .2s; }
.scrim.is-on { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 90vh; overflow: auto; overscroll-behavior: contain;
  padding: 8px 16px calc(16px + var(--safe-b)); background: var(--paper); box-shadow: 0 -1.5px 0 var(--ink);
  transform: translateY(100%); transition: transform .2s var(--ease);
}
.sheet.is-on { transform: none; }
.sheet-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 8px; }
.sheet-h h2 { font: 600 19px/24px var(--sans); margin-top: 2px; }
.sheet-h .sq { margin: -6px -10px 0 0; }
.sheet .price { margin-top: 10px; }
.sheet-sizes { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--rule); }
.sheet-act { position: relative; margin-top: 16px; display: grid; gap: 4px; }
/* в шторке сообщение — строкой над кнопкой, в потоке: поверх плиток размеров оно их закрывало */
.sheet-act .note { position: static; display: none; padding: 0 0 8px; box-shadow: none; transform: none; }
.sheet-act .note.is-on { display: block; }
.sheet-more { display: flex; align-items: center; justify-content: center; min-height: 44px; font: 500 15px/20px var(--sans); color: var(--ink); }

/* ---------- страницы: корзина, оформление, «принят» ---------- */
.page { padding-bottom: 40px; }
.ph { padding: 8px 0 16px; }
.ph h1 { margin-top: 2px; font: 700 26px/30px var(--sans); letter-spacing: -.01em; }
.blank { position: relative; padding: 14px 16px 16px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.blank + .blank { margin-top: 12px; }
/* заголовки блоков оформления («Куда», «Когда»…) — обычным шрифтом, крупно и тёмным */
.blank-h { display: block; float: left; width: 100%; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); font: 600 17px/22px var(--sans); color: var(--ink); }
.blank-h + * { clear: left; }

.changed { margin-bottom: 12px; }
.changed ul { margin-top: 12px; }
.changed li { padding: 7px 0 8px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 21px; }
.changed li:first-child { border-top: 0; padding-top: 0; }
.changed .link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 600; }

.lines { background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.line {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "ph main sum" "ph ctl ctl";
  column-gap: 12px; padding: 12px 12px 12px; border-top: 1px solid var(--rule);
}
.line:first-child { border-top: 0; }
.line-ph { grid-area: ph; width: 56px; height: 56px; overflow: hidden; background: var(--bg); }
.line-main { grid-area: main; min-width: 0; }
.line-t { display: block; font: 500 16px/21px var(--sans); text-decoration: none; }
.line-v { display: block; font-size: 15px; line-height: 20px; color: var(--mute); }
.line-x { display: block; margin-top: 2px; }
.line-sum { grid-area: sum; font: 700 17px/21px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.line-ctl { grid-area: ctl; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.line-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 15px; line-height: 20px; color: var(--accent); }
.line-del { margin-left: auto; }
/* у вещи в одном экземпляре счётчика нет — «×» поднимаем, чтобы не оставлять пустую строку */
.line-ctl:has(> .line-del:only-child) { margin-top: -10px; }

.till { margin-top: 12px; }
.dial-box { position: relative; width: 240px; max-width: 100%; }
.dial { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
/* подписи весов не мельче 13 px на экране: у весов шириной 240 px — 13, у узких (200 px, боковая корзина) — 16 */
.dial text { font-family: var(--mono); fill: var(--mute); font-size: 13px; letter-spacing: .02em; }
.dial .needle { transition: transform .4s var(--ease); transform-origin: 120px 124px; }
.dial-free { position: absolute; top: 81%; right: 0; }
.dial-words { margin-top: 10px; font: 500 16px/22px var(--sans); }
/* плоская шкала весов — только на телефоне (уже 600 px или боком), вместо циферблата; высота ~60 px с подписями */
.gauge { display: none; position: relative; width: 100%; padding-top: 9px; color: var(--ink); }
.gauge-scale { display: block; width: 100%; height: 13px; overflow: visible; }
.gauge-ptr { position: absolute; top: 0; width: 11px; margin-left: -5.5px; transition: left .4s var(--ease); }
.gauge-ptr svg { display: block; }
.gauge-ls { display: grid; margin-top: 5px; font: 400 13px/16px var(--mono); letter-spacing: .02em; color: var(--mute); font-variant-ligatures: none; }
.gauge-ls > * { grid-area: 1 / 1; justify-self: start; white-space: nowrap; }
.gauge-ls i { display: block; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
/* подпись минимума — под своей отметкой: у левого края начинается от неё, в правой половине кончается на ней,
   но не налезает на «0» и на правую подпись */
.gauge-min { width: 4.8em; text-align: center; margin-left: clamp(calc(1ch + 10px), calc(var(--x) - var(--a, 2.4em)), calc(100% - var(--fw) - 10px - 4.8em)); }
.gauge-min--l { --a: 0px; text-align: left; }
.gauge-min--r { --a: 4.8em; text-align: right; }
.gauge-ls > .gauge-max, .gauge-ls > .stamp { justify-self: end; text-align: right; }
/* штамп — своей высоты (не растягивается на две строки подписей) и с запасом снизу: высота шкалы не прыгает,
   когда набрали на бесплатную доставку */
.gauge-ls > .stamp { align-self: start; }
.gauge-ls:has(> .stamp) { min-height: 32px; }
/* телефон: узкий экран или повёрнутый боком (низкий) */
@media (max-width: 599px), (max-width: 1023px) and (max-height: 520px) {
  .dial-box { display: none; }
  .gauge { display: block; }
  .till .dial-words { margin-top: 12px; }
}
.bill { margin-top: 14px; display: grid; gap: 6px; }
.bill div { display: flex; align-items: baseline; gap: 8px; }
.bill dt { font: 400 13px/18px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.bill i { flex: 1; min-width: 12px; height: 3px; align-self: baseline;
  background-image: radial-gradient(circle, var(--mute) .7px, transparent 1px); background-size: 5px 3px; background-repeat: repeat-x; }
.bill dd { font: 600 16px/20px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill .total { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--rule); }
.bill .total dt { color: var(--ink); }
.bill .total dd { font-size: 20px; line-height: 24px; font-weight: 700; }
.till .btn--main { margin-top: 16px; }

.empty { display: grid; gap: 10px; justify-items: start; padding-top: 20px; }
.empty h2 { margin-top: 6px; font: 700 24px/28px var(--sans); }
.empty p { max-width: 30em; }
.empty .btn { margin-top: 8px; }

/* оформление */
.co { display: grid; }
.fld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.lbl { font: 500 15px/20px var(--sans); }
.lbl i { font-style: normal; color: var(--mute); font-weight: 400; }
.inp {
  width: 100%; height: 52px; padding: 0 14px; border: 1.5px solid var(--mute); border-radius: 2px; background: var(--paper);
  font: 400 17px/22px var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none;
}
textarea.inp { height: auto; min-height: 96px; padding: 13px 14px; resize: vertical; }
textarea.inp--addr { display: block; min-height: 52px; padding: 13.5px 14px; resize: none; overflow: hidden; }
.inp[aria-invalid="true"] { border-color: var(--red); }
/* фокус — чёткая рамка 2 px, как у кнопок; поверх красной рамки ошибки */
.inp:focus, .inp[aria-invalid="true"]:focus { outline: 2px solid var(--ink); outline-offset: -2px; border-color: var(--ink); box-shadow: none; }
.inp::placeholder { color: #8A9399; }
.grid4-h { margin-top: 16px; }
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.stack { display: grid; gap: 16px; }
.err { font-size: 15px; line-height: 20px; color: var(--red); }
.sum .err { margin-top: 12px; }
.err:empty { display: none; }

.addr-box { position: relative; }
.addr-box[data-state="loading"] .inp { padding-right: 52px; }
.dots { position: absolute; right: 14px; top: 50%; margin-top: -9px; display: none; gap: 3px; font: 400 18px/18px var(--mono); color: var(--mute); }
.dots i { font-style: normal; animation: blink 1s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
.addr-box[data-state="loading"] .dots { display: flex; }
.sugg { margin-top: -1px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.sugg li + li { border-top: 1px solid var(--rule); }
.sugg button { display: block; width: 100%; min-height: 48px; padding: 13px 14px; text-align: left; font: 400 16px/22px var(--sans); overflow-wrap: anywhere; }
.sugg b { font-weight: 600; }
.sugg [aria-selected="true"], .sugg button:hover { background: var(--bg); }
.sugg-empty { padding: 12px 14px; font-size: 15px; line-height: 21px; color: var(--mute); }
.zone { display: grid; gap: 6px; justify-items: start; }
.zone:empty { display: none; }
.zone p { font-size: 15px; line-height: 21px; }
.zone .stamp { white-space: normal; }
/* «В Нахабино пока не доставляем» — фраза, а не пометка: обычным шрифтом 15 px, в той же двойной красной рамке */
.zone .stamp--red { padding: 6px 10px 5px; font: 500 15px/20px var(--sans); letter-spacing: 0; text-transform: none; }
.zone .muted { color: var(--mute); }

.days { display: grid; grid-template-columns: auto auto auto; gap: 8px; }
.day {
  display: grid; align-content: center; gap: 2px; min-height: 60px; padding: 8px 8px 7px; text-align: left;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 2px;
}
.day b { font: 600 15px/19px var(--sans); white-space: nowrap; }
.day .mono { line-height: 16px; white-space: nowrap; letter-spacing: .03em; }
.nw { white-space: nowrap; }
.brand-s { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.day[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.day[aria-checked="true"] .mono { color: #fff; }
.day:disabled { cursor: not-allowed; background: var(--bg); box-shadow: none; }
.day:disabled b { color: var(--mute); }
.ivals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ival {
  display: grid; align-content: center; justify-items: start; gap: 1px; min-height: 48px; padding: 6px 12px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 2px;
  font: 500 16px/20px var(--sans); font-variant-numeric: tabular-nums;
}
.ival[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.ival:disabled { cursor: not-allowed; color: var(--mute); }
.ival:disabled span:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }

.day:not(:disabled):not([aria-checked="true"]):hover, .ival:not(:disabled):not([aria-checked="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--ink); }


.pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pay-o {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; text-align: left;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 2px; font: 500 16px/20px var(--sans);
}
/* круглый переключатель: выбрать можно только один способ */
.pay-o .dot { position: relative; width: 22px; height: 22px; flex: none; border: 1.5px solid var(--ink); border-radius: 50%; }
.pay-o[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pay-o[aria-checked="true"] .dot::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--ink); }
.hint { margin-top: 10px; font-size: 15px; line-height: 21px; color: var(--mute); }

.sum-lines { display: grid; gap: 6px; margin-bottom: 12px; }
.sum-lines li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 20px; }
.sum-lines span:first-child { min-width: 0; }
.sum-lines .q { color: var(--mute); white-space: nowrap; }
.sum-lines i { flex: 1; min-width: 12px; height: 3px; background-image: radial-gradient(circle, var(--rule) .8px, transparent 1px); background-size: 5px 3px; background-repeat: repeat-x; }
.sum-lines b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sum-when { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.sum-when .g-v { font-weight: 400; }
.reasons { margin-top: 12px; display: grid; gap: 4px; font-size: 15px; line-height: 20px; color: var(--red); }
/* «проверьте адрес» внутри строки причины — ссылка к полю адреса, зона нажатия выше строки */
.link-in { display: inline; padding: 12px 0; margin: -12px 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.reasons:empty { display: none; }
/* вернулись через 10+ минут и корзина изменилась — строка у самой кнопки (сообщение вверху можно не увидеть) */
.changed-l { margin-top: 12px; padding: 8px 0 8px 12px; box-shadow: inset 3px 0 0 var(--accent); font: 500 15px/21px var(--sans); }
/* поле упёрлось в предел длины */
.hint.max-l { margin-top: 0; color: var(--accent); }
.hint.max-l[hidden] { display: none; }
.sum .btn--main { margin-top: 16px; }
.wait { margin-top: 8px; font: 500 15px/20px var(--sans); }
.wait:empty { display: none; }
.pd { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--mute); }
.pd a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* галочка согласия над «Оформить заказ»; не отметили — спокойная строка сразу под ней (не красная) */
.cns-f { margin-top: 14px; }
.cns { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font: 400 16px/22px var(--sans); cursor: pointer; }
.cns input {
  flex: none; display: grid; place-content: center; width: 24px; height: 24px; margin: -1px 0 0;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 3px; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cns input::before { content: ""; width: 12px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); opacity: 0; }
.cns input:checked { background: var(--ink); }
.cns input:checked::before { opacity: 1; }
.cns input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cns input[aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--why); }
.cns a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cns-err { margin: 0 0 6px 36px; padding: 6px 0 6px 12px; box-shadow: inset 3px 0 0 var(--accent); font: 500 16px/22px var(--sans); }
.cns-err:empty { display: none; }
.cns-err a { color: inherit; white-space: nowrap; }
.cns-f .pd { margin: 0 0 0 36px; }
.err a, .reasons a, .receipt a, .my-sub a { color: inherit; white-space: nowrap; }
/* «Заполнили по прошлому заказу · Очистить» */
.filled { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; padding-top: 8px; padding-bottom: 8px; font-size: 15px; line-height: 21px; box-shadow: inset 3px 0 0 var(--accent), 0 1px 0 var(--rule); }
.filled .link { font-weight: 600; }
/* поле-ловушка для роботов: людям не видно и не попадает под Tab */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.btn[aria-busy="true"] { background: var(--ink); color: #fff; box-shadow: none; cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #fff; transform-origin: 0 50%; animation: fill .9s linear forwards; opacity: .45; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* «заказ принят» */
.receipt-wrap { padding-top: 0; }
.receipt { position: relative; padding: 16px 16px 20px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.receipt-top { min-height: 112px; padding-right: 118px; }
.done-h { padding-top: 6px; font: 700 26px/31px var(--sans); letter-spacing: -.01em; color: var(--ink); }
.empty-h { margin-top: 6px; font: 700 24px/28px var(--sans); }
.receipt-lead { margin-top: 10px; font: 500 17px/23px var(--sans); }
.accepted { position: absolute; top: 6px; right: 4px; width: 116px; height: 116px; color: var(--accent); transform: rotate(-6deg); animation: press .2s ease-out both; }
@keyframes press { from { opacity: 0; transform: rotate(-6deg) scale(1.08); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.accepted text { fill: currentColor; }
.accepted .ring { font-family: var(--mono); font-size: 12.5px; }
.accepted .word { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .03em; }
.accepted .small { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.receipt .g { margin-top: 12px; padding-top: 7px; }
/* длинная ссылка или слово без пробелов (точка на карте в комментарии) переносится, а не раздвигает страницу */
.receipt .g-v { font-weight: 400; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.receipt .g-v + .g-v { margin-top: 2px; }
.receipt .muted { color: var(--mute); }
.receipt .sum-lines { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.receipt .bill { margin-top: 10px; }
.done-act { margin-top: 16px; display: grid; gap: 4px; }
.done-mine { justify-content: flex-start; }

/* «Мои заказы» */
.call-shop { margin-bottom: 4px; }
.my-note { margin-top: 8px; font-size: 15px; line-height: 20px; color: var(--red); }
.my-note:empty { display: none; }
.my-list { display: grid; gap: 12px; margin-top: 12px; }
.my-list .blank + .blank { margin-top: 0; }
.my { display: grid; gap: 6px; justify-items: start; }
.my-h { font: 500 15px/20px var(--sans); }
.my-h .muted { font-weight: 400; }
/* статус — главное в карточке: крупно и тёмным, цвет — только у метки */
.my-st { display: flex; align-items: center; gap: 8px; margin: 2px 0; font: 600 17px/22px var(--sans); color: var(--ink); }
.my-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--accent); }
.my[data-status="confirmed"] .my-dot { background: var(--ink); }
.my[data-status="delivered"] .my-dot { background: var(--mute); }
.my[data-status="cancelled"] .my-dot { background: var(--red); }
.my-sub, .my-lines { font-size: 15px; line-height: 21px; }
.my-when { font: 500 16px/22px var(--sans); }
.my-when.is-past { font-weight: 400; }
.my-lines { color: var(--mute); }
.my-lines b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.stamp--ink { color: var(--ink); }
.my[data-status="cancelled"], .my[data-status="delivered"] { background: #F7F8F6; }

/* политика обработки персональных данных */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 760px; font-size: 16px; line-height: 24px; }
.doc h2 { margin-bottom: 4px; font: 600 18px/24px var(--sans); }
.doc p + p { margin-top: 6px; }
.doc ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.doc a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc h3 { margin: 14px 0 4px; font: 600 16px/22px var(--sans); }
.doc h2 + .doc-sub h3 { margin-top: 4px; }
/* страница «Приложение для Android» */
.app-page ol { display: grid; gap: 8px; padding-left: 22px; list-style: decimal; }
.app-page .app-get { max-width: 420px; }
/* узкое окно: текст — под кодом, а не сбоку за краем */
.app-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.app-qr p { flex: 1 1 200px; }
.app-qr img { flex: none; width: 148px; height: 148px; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--rule); }
.about .g-a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc ul + p, .doc p + ul { margin-top: 6px; }
.doc .doc-back { margin-top: 4px; }

/* сообщения об ошибке загрузки */
.fail { margin-top: 24px; max-width: 560px; }
.fail a { white-space: nowrap; }
.fail-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 16px; }
.sign--fail .sign-in { min-height: 0; }
.fail h1 { margin-top: 14px; font: 700 24px/28px var(--sans); }
.fail p { margin-top: 8px; }


/* ---------- просмотр фото (общий модуль) ---------- */
.zv { --zv-bg: #1E2226; --zv-fg: #FFFFFF; --zv-accent: #FFFFFF; --zv-radius: 0; --zv-font: 400 15px/1.3 "IBM Plex Mono", ui-monospace, monospace; }
.zv-btn { background: #1E2226; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.zv-btn:hover { box-shadow: inset 0 0 0 1px #fff; }
.zv-title { font: 500 15px/20px var(--sans); }
.zv-count { letter-spacing: .06em; font-variant-ligatures: none; }
.zv-cap { font: 400 14px/20px var(--sans); color: rgb(255 255 255 / .8); text-align: left; background: rgb(30 34 38 / .82); }
.zv--zoomed .zv-cap { opacity: 0; }

/* ---------- боковая панель товара (десктоп) ---------- */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: 560px; max-width: 100%;
  display: flex; flex-direction: column; background: var(--bg); box-shadow: -1px 0 0 var(--ink);
  transform: translateX(100%); transition: transform .22s var(--ease);
}
.panel.is-on { transform: none; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 12px 0 20px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); flex: none; }
.panel-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0 20px; }
.panel .gal { margin: 0 -20px; }
/* на низком экране ноутбука фото не выше 56% высоты — цена не уходит под закреплённую кнопку */
.panel .gal-i { max-height: 56vh; }
.panel .act { position: sticky; margin: 0 -20px; }

/* ---------- десктоп: боковая этикетка корзины ---------- */
.side { display: none; }

@media (min-width: 390px) {
  .tag { grid-template-columns: 144px minmax(0, 1fr); }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .shelf { grid-template-columns: 1fr 1fr; }
  .gone-list { grid-template-columns: 1fr 1fr; }
  .page, .pv-screen { max-width: 720px; }
  .about { grid-template-columns: 240px 1fr; align-items: start; }
}

@media (max-width: 1023px) {
  .sign--page { display: none; }
  .till .btn--main { display: none; }
  /* карточка: вся верхняя часть (фото, название, описание, цена) ведёт в товар, кроме кнопок покупки */
  .tag-body { position: static; }
  .tag-body > .stamp { top: 8px; right: 8px; }
  .tag-buy { pointer-events: none; }
  .tag-buy .buy { pointer-events: auto; }
}

@media (min-width: 1024px) {
  .wrap { padding: 0 32px; }
  .sign-in { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 112px; padding-top: 22px; padding-bottom: 22px; }
  .logo { font-size: 48px; padding-bottom: 6px; }
  .logo--mark { padding: 0; font-size: 0; }
  .logo--mark img { width: 128px; height: 128px; }
  .logo--mark.logo--s img { width: 56px; height: 56px; }
  .logo--l { font-size: 38px; }
  .logo--xl { font-size: 30px; }
  .sign-lines { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  /* длинное название магазина (до 60 знаков) переносится, а не наезжает на «Доставка без предоплаты…» */
  .sign-h, .sign-in > .logo { max-width: 420px; }
  .sign-zones { margin-left: auto; max-width: 42em; }
  .sign-act { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 8px; }
  .sign-act .call { grid-column: auto; grid-row: auto; }
  .mine-l { margin: 0; padding: 0 8px; min-height: 44px; }
  .call { padding: 0 14px 0 12px; }
  .sign-night { margin-left: auto; }
  .notices { padding-top: 20px; padding-bottom: 0; }
  .go, .pad-go { display: none !important; }
  .call-n { display: inline; }

  .cat-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) 320px; gap: 28px; align-items: start; padding-top: 28px; padding-bottom: 64px; }
  .cats { top: 16px; margin: 0; height: auto; background: none; box-shadow: none; }
  .cats-h { display: block; padding: 0 0 10px 15px; }
  .cats-in { display: grid; height: auto; overflow: visible; padding: 0; border-left: 1px solid var(--rule); }
  .cat { height: auto; min-height: 40px; padding: 9px 12px 9px 15px; font-size: 16px; line-height: 22px; white-space: normal; text-align: left; }
  .cat:hover { color: var(--ink); }
  .cat[aria-current="true"]::after { left: -1px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .dept { scroll-margin-top: 16px; }
  .dept:first-child .dept-h { padding-top: 0; }
  .dept-h { padding-top: 40px; }
  .dept-h h2 { font-size: 30px; line-height: 34px; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

  .shelf > li { display: flex; }
  .tag { flex: 1; display: flex; flex-direction: column; }
  .tag-body { flex: 1; }
  .tag-ph { margin-bottom: 12px; }
  .tag-body { min-height: 150px; }
  .has-stamp .tag-body { padding-top: 32px; }
  .tag-body > .stamp { top: 0; right: 0; }
  .tag-buy { flex-direction: column; align-items: stretch; gap: 10px; }
  .tag-buy .buy > * { width: 100%; }
  .qty { grid-template-columns: 44px minmax(44px, 1fr) 44px; }

  .gone-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  /* фото до 260 px, текст не уже 200 px: в узкой колонке (1024 px, рядом корзина) «район м. Спартак» рвался по буквам */
  .about { grid-template-columns: minmax(150px, 260px) minmax(200px, 1fr); align-items: start; column-gap: 20px; }
  .about > .mono { grid-column: 1 / -1; }
  .about-ph { grid-row: span 2; }

  .bar, .pad-dock { display: none !important; }
  .dock { left: auto; right: max(32px, calc((100vw - 1200px) / 2)); bottom: 24px; width: 320px; }
  .dock .note { box-shadow: inset 0 0 0 1.5px var(--accent); padding: 12px 16px; }

  .side { display: block; position: sticky; top: 16px; }
  .side-in { position: relative; display: flex; flex-direction: column; max-height: calc(100vh - 32px); background: var(--paper); box-shadow: 0 1px 0 var(--rule), 0 -3px 0 var(--ink); }
  .side-h { padding: 16px 16px 12px; border-bottom: 1px solid var(--rule); }
  .side-h h2 { margin-top: 2px; font: 700 22px/26px var(--sans); }
  .side-lines { flex: 0 1 auto; overflow: auto; overscroll-behavior: contain; padding: 0 16px; }
  .side-line { padding: 10px 0; border-top: 1px solid var(--rule); }
  .side-line:first-child { border-top: 0; }
  .side-line-t { font: 500 15px/20px var(--sans); }
  .side-line-t span { color: var(--mute); font-weight: 400; }
  .side-line-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
  .side-line-r b { font: 700 16px/20px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .side-foot { padding: 14px 16px 16px; border-top: 1px solid var(--rule); flex: none; }
  .side-foot .dial-box { width: 200px; }
  .side-foot .dial text, .side-empty .dial text { font-size: 16px; }
  .side-foot .dial-words { font-size: 15px; line-height: 21px; }
  .side-foot .btn--main { margin-top: 14px; }
  .side-empty { padding: 4px 16px 16px; }
  .side-empty .dial-box { width: 200px; margin-top: 8px; }
  .side-empty h3 { margin-top: 10px; font: 700 20px/24px var(--sans); }
  .side-empty p { margin-top: 4px; font-size: 15px; line-height: 21px; color: var(--mute); }
  .side-foot .link { display: inline-flex; min-height: 40px; align-items: center; margin-top: 4px; font-size: 15px; }

  /* панель товара */
  .panel .topline { display: none; }
  .panel .act { padding-bottom: 12px; }
  .panel .pad-act { display: none; }
  .panel .pv { padding-bottom: 20px; }
  .big-t { font-size: 30px; line-height: 36px; }
  .big-price { font-size: 36px; line-height: 38px; }

  /* страницы */
  .page { padding-top: 12px; padding-bottom: 72px; }
  .ph h1 { font-size: 32px; line-height: 36px; }
  .cart-grid, .co { grid-template-columns: minmax(0, 720px) 360px; justify-content: space-between; gap: 0 32px; align-items: start; }
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cart-grid { display: grid; }
  .till { margin-top: 0; position: sticky; top: 16px; }
  .co > .blank { grid-column: 1; margin-top: 0; }
  .co > .blank + .blank { margin-top: 12px; }
  .co > .sum.blank { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 16px; margin-top: 0; }
  .receipt-wrap { max-width: 720px; }
  .receipt { padding: 24px 28px 28px; }
  .receipt-top { padding-right: 180px; min-height: 150px; }
  .done-h { font-size: 32px; line-height: 38px; }
  .accepted { top: 14px; right: 20px; width: 140px; height: 140px; }
  .done-act { grid-template-columns: 280px auto; align-items: center; justify-content: start; gap: 16px; }
  .topline .brand-s { display: none; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .cat-layout { grid-template-columns: 180px minmax(0, 1fr) 300px; gap: 20px; }
}

@media (hover: hover) {
  .btn:not([aria-disabled="true"]):not(:disabled):hover { background: #000; }
  /* та же сила правила, что у .btn выше — иначе под мышью чёрный фон и тёмный текст сливаются */
  .btn--line:not([aria-disabled="true"]):not(:disabled):hover { background: var(--bg); }
  .qty button:not([aria-disabled="true"]):hover { background: var(--bg); }
  .tag-t a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .back:hover span, .to-cart:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .sq:not([disabled]):hover { background: var(--bg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* узкие телефоны (360 px): дни и оплата не должны тесниться */
@media (max-width: 379px) {
  .sign-lines .mono { letter-spacing: .03em; }
  .day { padding-inline: 7px; }
  .day b { font-size: 14px; }
  .pay { grid-template-columns: 1fr; }
}
/* 320–359 px: длинное название (16 букв в «МаркетплейсамНет») на внутренних экранах рядом с «← Все вещи» — мельче, чтобы не переносилось */
@media (max-width: 359px) { .logo--s { font-size: 21px; } }