/* Эскиз магазина по письму генерального директора от 12.10.2026.
   Правило эскиза: одна страница это один экран. На широком экране ничего не прокручивается, баннеров нет,
   в шапке каждой страницы стоят телефон и кнопка «ЗАКАЗАТЬ КРАБА С ДОСТАВКОЙ».
   Шрифт и цвета из брендбука: Roboto, красный логотипа и его графит. */

@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(/local/templates/crab/fonts/roboto-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(/local/templates/crab/fonts/roboto-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2212; }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url(/local/templates/crab/fonts/roboto-cyrillic-500.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url(/local/templates/crab/fonts/roboto-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2212; }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(/local/templates/crab/fonts/roboto-cyrillic-700.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(/local/templates/crab/fonts/roboto-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2212; }

:root {
  --ink: #231f20;        /* графит логотипа */
  --red: #ed1c24;        /* красный логотипа */
  --red-dark: #c4141b;
  --ice: #f2f5f7;        /* подложка под фото и справку */
  --steel: #66727b;      /* второстепенный текст */
  --line: #dfe5e9;
  --paper: #fff;         /* фон страницы */
  --card: #fff;          /* карточки, строка покупки, списки */
  --field: #fff;         /* поля формы */
  --solid: #231f20;      /* плотная заливка: сообщение, выбранный вариант, кнопка под курсором */
  --on-solid: #fff;      /* текст на ней */
  --pad: clamp(16px, 2.4vw, 36px);
  --font: "Roboto", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100vh; font: 400 15px/1.4 var(--font); color: var(--ink); background: var(--paper);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Шапка: одна строка на каждой странице ----------
   Слева логотип и разделы, посередине кнопка заказа, справа город и телефон. Боковые части равной ширины, поэтому
   кнопка стоит ровно по центру экрана. Так попросил директор 13.10.2026, он же попросил логотип крупнее:
   логотип вырос за счёт полей шапки, её высота осталась прежней. */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 2vw, 32px); min-height: 76px; padding: 6px var(--pad); border-bottom: 1px solid var(--line); }
.top__side { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); min-width: 0; }
.top__side--right { justify-content: flex-end; }
.top__logo { flex: none; position: relative; display: block; text-decoration: none; }
.top__logo img { display: block; width: auto; height: 64px; }
/* Подпись «Интернет-магазин»: логотип у компании один на все сайты, а это именно магазин. Стоит под словами логотипа,
   в свободном месте справа от знака, и не занимает в шапке ни ширины, ни высоты. Числа подобраны под высоту логотипа. */
.top__kind { position: absolute; left: 73px; top: 45px; font-weight: 500; font-size: 12.5px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.top__nav { display: flex; gap: clamp(12px, 1.6vw, 26px); }
.top__nav a { padding: 6px 0; font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.top__nav a:hover { color: var(--red); }
.top__nav a[aria-current] { border-bottom-color: var(--red); }
.top__city, .top__phone { display: grid; gap: 1px; font-size: 12px; line-height: 1.25; color: var(--steel); }
.top__city select { border: 0; padding: 0; background: none; font-weight: 500; font-size: 16px; color: var(--ink); cursor: pointer; }
.top__phone a { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.top__phone a:hover { color: var(--red); }

/* Главная кнопка сайта. Она одна такая: красная и прописными, как её назвал заказчик. */
.order-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 6px;
  background: var(--red); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.order-btn:hover { background: var(--red-dark); }
.order-btn[aria-current] { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--red); }
.order-btn__count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #fff; color: var(--red); font-size: 13px; letter-spacing: 0; }
.order-btn--wide { width: 100%; font-size: 15px; letter-spacing: .02em; }

.stage { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding: 6px var(--pad); border-top: 1px solid var(--line); font-size: 12px; color: var(--steel); }
.bottom > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom__links { display: flex; gap: 18px; white-space: nowrap; }
.bottom a:hover { color: var(--ink); }
/* Переключатель вариантов оформления. Нужен, пока директор выбирает вариант. */
.bottom__looks { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.bottom__looks span { margin-right: 4px; }
.bottom__looks a { padding: 3px 9px; border-radius: 11px; text-decoration: none; }
.bottom__looks a:hover { background: var(--ice); }
.bottom__looks a[aria-current] { background: var(--solid); color: var(--on-solid); }

/* ---------- Главная: весь ассортимент сразу под шапкой ---------- */
.shelf { grid-row: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; min-height: 0; padding: 12px var(--pad); }
.item { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.item--out { opacity: .55; }
.item__photo { flex: 1 1 0; min-height: 64px; padding: 0; border: 0; border-radius: 8px; background: var(--ice); overflow: hidden; }
/* Фото упаковок сняты на белом: умножение сливает белый фон с подложкой, рамки вокруг фото не видно. */
.item__photo img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.item__title { font-size: 15px; line-height: 1.2; font-weight: 700; }
.item__title button { padding: 0; border: 0; background: none; font-weight: inherit; text-align: left; }
.item__title button:hover { color: var(--red); }
/* Цена за килограмм выбранной навески, справа от неё вид краба. */
.item__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item__kg { font-size: 19px; line-height: 1.1; font-weight: 700; white-space: nowrap; }

/* Выбор в карточке: навеска на месте веса в строке покупки и вид краба рядом с ценой за килограмм.
   Список из одного пункта выключен и выглядит обычной подписью. */
.pick { flex: none; height: 26px; padding: 0 22px 0 9px; border: 0; border-radius: 13px; appearance: none;
  background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23231f20' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  font-weight: 500; color: var(--ink); cursor: pointer; }
.pick:hover { background-color: var(--line); }
.pick:disabled { padding: 0 2px; background: none; opacity: 1; cursor: default; }
/* Переключатель вида уступает место цене за килограмм: в тесной карточке длинное название вида обрежется многоточием. */
.pick--kind { flex: 0 1 auto; min-width: 0; height: 22px; font-size: 13px; text-overflow: ellipsis; }
.pick--kind:disabled { padding: 0; font-weight: 400; color: var(--steel); }

/* Строка покупки одна на карточку: навеска, цена, плюс. Нажатие в любом месте строки, кроме списка, кладёт выбранную
   навеску в корзину. Если она уже в корзине, перед плюсом стоят минус и число штук: минус убирает одну. */
.pack { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 38px; padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.pack:hover { border-color: var(--red); }
.pack[aria-busy="true"] { opacity: .6; pointer-events: none; }
.pack__price { font-weight: 700; text-align: right; white-space: nowrap; line-height: 1.15; }
.pack__ctl { display: flex; align-items: center; gap: 2px; }
.pack__plus, .pack__less { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 13px; font-weight: 700; font-size: 18px; line-height: 1; }
.pack__plus { background: var(--red); color: #fff; }
.pack__plus:hover { background: var(--red-dark); }
.pack__less { background: var(--ice); color: var(--ink); }
.pack__less:hover { background: var(--solid); color: var(--on-solid); }
.pack__in { min-width: 18px; font-weight: 700; font-size: 14px; text-align: center; }
.pack--none { grid-template-columns: auto minmax(0, 1fr); padding-left: 10px; color: var(--steel); background: var(--ice); border-color: transparent; cursor: default; }
.pack--none:hover { border-color: transparent; }
.pack--none .pack__price { font-weight: 400; font-size: 12px; }

/* Подробности о продукте открываются поверх страницы, без перехода. */
.sheet { width: min(560px, calc(100vw - 32px)); padding: 28px; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); }
.sheet::backdrop { background: rgba(35, 31, 32, .5); }
.sheet h2 { margin-bottom: 12px; padding-right: 36px; font-size: 22px; line-height: 1.2; }
.sheet__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 18px; background: var(--ice); font-size: 22px; line-height: 1; }
.sheet__text p + p { margin-top: 8px; }
.sheet__facts { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sheet__facts dt { font-size: 12px; color: var(--steel); }

/* ---------- Заказ: корзина, оформление и справка рядом ---------- */
.desk { grid-row: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .9fr); gap: 14px; min-height: 0; padding: 14px var(--pad); }
.pane { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; overflow-y: auto; }
.pane--wide { grid-column: span 2; }
.pane--side { background: var(--ice); border-color: transparent; }
.pane h1 { font-size: 20px; line-height: 1.2; }
.pane h2 { font-size: 15px; line-height: 1.2; }
.pane--side h2:not(:first-child) { margin-top: 6px; }
.note { color: var(--steel); }
.link { align-self: flex-start; padding: 0; border: 0; background: none; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--red); }
.lines { display: grid; gap: 10px; }
.lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.lines li > :last-child { grid-column: -2 / -1; font-weight: 500; white-space: nowrap; text-align: right; }
.lines__total { padding-top: 10px; border-top: 1px solid var(--line); font-size: 18px; }
.lines__total > * { font-weight: 700 !important; }
/* Корзина на странице заказа: у каждой строки справа крестик, он убирает товар целиком. Суммы стоят столбиком перед ним. */
.lines--edit li { grid-template-columns: minmax(0, 1fr) auto auto 28px; }
.lines--edit li > .lines__sum { grid-column: 3; font-weight: 500; white-space: nowrap; text-align: right; }
.lines--edit li > .lines__remove { grid-column: 4; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: var(--ice); color: var(--ink); font-weight: 400; font-size: 20px; line-height: 1; text-align: center; }
.lines--edit li > .lines__remove:hover { background: var(--solid); color: var(--on-solid); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; }
.qty button { width: 28px; height: 28px; border: 0; background: none; font-size: 16px; }
.qty button:hover { color: var(--red); }
.qty output { min-width: 22px; text-align: center; font-weight: 500; }
.steps { display: grid; gap: 8px; padding-left: 1.3em; list-style: decimal; }
.steps--tight { gap: 5px; font-size: 14px; }
/* «Оплатить» на странице «Заказ принят»: кнопка и строка о том, что неоплаченный заказ отменится через час */
.pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.pay small { opacity: .75; }
.pane--side p { font-size: 14px; }

.form { display: grid; gap: 10px; }
.form[inert] { opacity: .45; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form label { display: grid; gap: 3px; font-size: 12px; color: var(--steel); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .track input {
  width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); font-size: 15px; color: var(--ink); }
.form input:focus, .form select:focus, .track input:focus { outline: none; border-color: var(--ink); }
.form [aria-invalid="true"] { border-color: var(--red) !important; }
.form small, .form__error { font-size: 12px; color: var(--red-dark); }
.form__suggest { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: 59px; z-index: 5; max-height: 220px; overflow-y: auto; border: 1px solid var(--ink); border-radius: 6px; background: var(--card); }
.suggest li { padding: 7px 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--ice); }
.form__trap { position: absolute !important; left: -999rem; }
.form .form__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.form__consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red); }
.track { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.track__result { font-weight: 500; font-size: 14px; }

/* ---------- О нас: одна фраза и четыре темы с картинками ---------- */
.about { grid-row: 1 / -1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; min-height: 0; padding: 18px var(--pad) 14px; }
.about h1 { max-width: 1040px; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; }
/* Три общих ряда на все четыре колонки: фото, заголовок, текст. Так фото одной высоты, а заголовки на одной линии. */
.about__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px 16px; min-height: 0; }
.about__block { display: grid; grid-row: span 3; grid-template-rows: subgrid; min-height: 0; }
.about__block img { display: block; width: 100%; height: 100%; min-height: 90px; object-fit: cover; border-radius: 10px; }
.about__block h2 { font-size: 18px; line-height: 1.2; }
.about__block h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 8px; background: var(--red); }
.about__block p { font-size: 14px; line-height: 1.45; }
.about__proof { padding: 12px 16px; border-radius: 10px; background: var(--ice); font-weight: 500; }

/* ---------- Рецепты и советы: список слева, текст справа ---------- */
.reader { grid-row: 1 / -1; display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; min-height: 0; padding: 14px var(--pad); }
.reader__list { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.reader__list button { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); text-align: left; }
.reader__list button:hover { border-color: var(--ink); }
.reader__list button[aria-current] { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.reader__kind { font-size: 12px; color: var(--steel); }
.reader__name { font-weight: 700; line-height: 1.2; }
.reader__pages { min-height: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.reader__page { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); height: 100%; min-height: 0; }
.reader__page:not(:has(.reader__photo)) { grid-template-columns: minmax(0, 1fr); }
.reader__photo { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.reader__text { display: grid; align-content: start; gap: 10px; min-height: 0; padding: 22px 26px; overflow-y: auto; max-width: 760px; }
.reader__text h1 { font-size: 24px; line-height: 1.2; }
.reader__text h2 { margin-top: 6px; font-size: 16px; }
.reader__lead { font-size: 16px; }
.reader__meta { font-size: 13px; color: var(--steel); }
.reader__text ul { list-style: disc; padding-left: 1.2em; }
.reader__text ol { list-style: decimal; padding-left: 1.3em; }
.reader__text li + li { margin-top: 4px; }

/* Ширина по тексту, по центру экрана. Через left и right, а не left: 50%: иначе на телефоне сообщение сжимается до половины экрана. */
.toast { position: fixed; left: 16px; right: 16px; bottom: 52px; z-index: 30; width: fit-content; max-width: calc(100vw - 32px); margin-inline: auto; padding: 12px 20px; border-radius: 8px; background: var(--solid); color: var(--on-solid); font-weight: 500; }
.toast--error { background: var(--red-dark); color: #fff; }


/* ==========================================================================================================
   Варианты оформления для директора: Графит, Фарфор, Море. Вариант включается классом у body (?look=…).
   Раскладка, размеры и состав страниц у всех одни. Вариант меняет цвета поверхностей, форму карточек и строки
   покупки и то, как подано фото. Шрифт, логотип и красный цвет кнопки заказа остаются по брендбуку.

   Фото товара в вариантах: если для варианта есть своя картинка (/images/concept/<вариант>/…), она закрывает
   верх карточки целиком (.item__photo--art). Пока её нет, стоит прежнее фото упаковки на подложке варианта.
   ========================================================================================================== */
.item__photo--art img { object-fit: cover; mix-blend-mode: normal; }

/* ---------- Графит: тёмный. Цвет логотипа стал фоном, товар стоит в луче света ---------- */
body.look-graphite {
  color-scheme: dark;
  --paper: #141112; --card: #1d191a; --field: #252021;
  --ink: #f4f1ec; --steel: #a69f9b; --line: #383231; --ice: #2a2526;
  --solid: #f4f1ec; --on-solid: #141112;
}
.look-graphite .item { border-color: transparent; border-radius: 16px; background: var(--card); }
/* Упаковка снята на белом. Подложка светлая в середине и уходит в цвет карточки к краям: белое поле фото
   умножается на неё и пропадает, а упаковка остаётся в светлом пятне. */
.look-graphite .item__photo { border-radius: 12px; background: radial-gradient(ellipse 78% 82% at 50% 50%, #f7f5f2 0 54%, #c9c3bf 72%, #55504e 90%, #1d191a 100%); }
.look-graphite .item__photo--art { background: #0d0b0c; }
.look-graphite .item__title { font-weight: 500; }
.look-graphite .item__kg { font-weight: 500; }
.look-graphite .pack { border-radius: 20px; padding-inline: 5px; background: transparent; }
.look-graphite .pack--none { background: var(--ice); }
.look-graphite .pick { background-color: #2f292a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f4f1ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.look-graphite .pick:hover { background-color: #3a3334; }
.look-graphite .pick:disabled { background: none; }
.look-graphite .pack__less { background: #332d2e; }
.look-graphite .top__city select option { color: #f4f1ec; background: #1d191a; }
.look-graphite .sheet::backdrop { background: rgba(0, 0, 0, .68); }
.look-graphite .form small, .look-graphite .form__error { color: #ff7b80; }

/* ---------- Фарфор: светлый. Много воздуха, без рамок, красным остаются только логотип и кнопка заказа ---------- */
body.look-porcelain {
  --paper: #f1f3f4; --card: #fff; --field: #fff;
  --ice: #eef0f2; --line: #e2e5e8; --steel: #76808a;
}
.look-porcelain .top { background: #fff; border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }
.look-porcelain .top__nav a[aria-current] { border-bottom-color: var(--ink); }
.look-porcelain .item { border-color: transparent; border-radius: 18px; background: var(--card); box-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 14px 30px -18px rgba(20, 30, 40, .22); }
/* Подложка фото чуть темнее карточки: у снимков упаковок фон не чисто белый, и на белом был бы виден его край. */
.look-porcelain .item__photo { border-radius: 12px; background: #f6f7f8; }
.look-porcelain .item__title { font-weight: 500; }
.look-porcelain .item__kg { font-weight: 400; letter-spacing: -.01em; }
.look-porcelain .pack { border-color: transparent; border-radius: 20px; padding-inline: 5px; background: var(--ice); }
.look-porcelain .pack:hover { border-color: var(--ink); }
.look-porcelain .pick { background-color: #fff; }
.look-porcelain .pick:hover { background-color: #fff; box-shadow: 0 0 0 1px var(--ink); }
.look-porcelain .pick:disabled { background: none; box-shadow: none; }
.look-porcelain .pack__plus { background: var(--ink); }
.look-porcelain .pack__plus:hover { background: #000; }
.look-porcelain .pack__less { background: #fff; }
.look-porcelain .pane { border-color: transparent; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 14px 30px -18px rgba(20, 30, 40, .22); }
.look-porcelain .pane--side { background: transparent; box-shadow: none; }
.look-porcelain .bottom { border-top-color: transparent; }

/* ---------- Море: глубокая вода. Карточки как матовое стекло, товар в холодном свете ---------- */
body.look-sea {
  color-scheme: dark;
  --paper: #051a23; --card: rgba(255, 255, 255, .07); --field: rgba(255, 255, 255, .08);
  --ink: #eef6f8; --steel: #9db7c1; --line: rgba(255, 255, 255, .16); --ice: rgba(255, 255, 255, .1);
  --solid: #eef6f8; --on-solid: #051a23;
  /* Толща воды: свет идёт сверху слева и гаснет к низу. Без фотографии. */
  background:
    radial-gradient(ellipse 70% 55% at 18% -8%, rgba(46, 150, 170, .42), transparent 62%),
    radial-gradient(ellipse 60% 50% at 92% 4%, rgba(20, 96, 128, .34), transparent 60%),
    linear-gradient(180deg, #0a3140 0%, #06222d 46%, #03141b 100%) fixed;
}
.look-sea .top { border-bottom-color: var(--line); }
.look-sea .item { border-color: rgba(255, 255, 255, .13); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045)); }
.look-sea .item__photo { border-radius: 12px; background: radial-gradient(ellipse 78% 82% at 50% 50%, #f6fafb 0 54%, #b7ced5 72%, #3b6272 90%, #12333f 100%); }
.look-sea .item__photo--art { background: #031219; }
.look-sea .item__title { font-weight: 500; }
.look-sea .item__kg { font-weight: 500; }
.look-sea .pack { border-color: rgba(255, 255, 255, .2); border-radius: 20px; padding-inline: 5px; background: rgba(3, 20, 27, .35); }
.look-sea .pack--none { background: rgba(255, 255, 255, .06); }
.look-sea .pick { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f4f1ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.look-sea .pick:hover { background-color: rgba(255, 255, 255, .22); }
.look-sea .pick:disabled { background: none; }
.look-sea .pack__less { background: rgba(255, 255, 255, .14); }
.look-sea .top__city select option { color: #eef6f8; background: #0a2a36; }
.look-sea .sheet { background: #0c2c38; }
.look-sea .sheet::backdrop { background: rgba(0, 10, 14, .7); }
.look-sea .suggest { background: #0c2c38; }
.look-sea .form small, .look-sea .form__error { color: #ff8a8e; }
.look-sea .toast--error { background: var(--red-dark); }

/* ---------- Широкий экран: страница занимает ровно один экран и не прокручивается ---------- */
@media (min-width: 1100px) and (min-height: 620px) {
  body { height: 100vh; overflow: hidden; }
}
/* Самый узкий из широких экранов: шапка в одну строку помещается, только если сжать промежутки. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .top, .top__side { gap: 14px; }
  .top__nav { gap: 14px; }
  .order-btn { padding: 0 14px; }
}
/* Уже 1200 px боковые части шапки равной ширины не помещаются: кнопка встаёт по центру места между ними. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .top > .order-btn { justify-self: center; }
}
@media (min-width: 1100px) {
  .bottom { flex-wrap: nowrap; }
}
/* Невысокий экран ноутбука: всё чуть плотнее, чтобы два ряда прайса поместились. */
@media (min-width: 1100px) and (max-height: 800px) {
  .top { min-height: 64px; }
  .top__logo img { height: 52px; }
  .top__kind { left: 59px; top: 36px; font-size: 10px; letter-spacing: .14em; }
  .shelf { gap: 8px; padding-block: 8px; }
  .item { gap: 5px; padding: 9px; }
  .item__title { font-size: 14px; }
  .item__kg { font-size: 16px; }
  .pack { min-height: 31px; font-size: 14px; }
  .pick { height: 22px; padding-left: 8px; }
  .pick--kind { height: 20px; font-size: 12px; }
  .pack__plus, .pack__less { width: 22px; height: 22px; font-size: 15px; }
  .pack__in { min-width: 16px; font-size: 13px; }
  .about__block p { font-size: 13px; line-height: 1.35; }
}
/* Карточка уже 200 px: в одну строку должны поместиться навеска, цена, минус, число и плюс, а рядом с ценой за килограмм
   переключатель вида. Стоит после правил невысокого экрана, чтобы на маленьком ноутбуке побеждали эти числа. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .top__logo img { height: 48px; }
  .top__kind { left: 55px; top: 34px; font-size: 9.5px; letter-spacing: .11em; }
  .item__kg { font-size: 14px; }
  .pack { gap: 4px; padding: 3px 4px; font-size: 13px; }
  .pick { padding: 0 17px 0 7px; background-position: right 6px center; }
  .pick--kind { font-size: 12px; }
  .pack__plus, .pack__less { width: 20px; height: 20px; font-size: 14px; }
  .pack__in { min-width: 12px; font-size: 12px; }
  .pack--none { padding-left: 8px; }
}

/* ---------- Узкий экран и телефон: один экран невозможен, страница прокручивается, кнопка заказа всегда на виду ---------- */
@media (max-width: 1099px) {
  /* Части шапки растворяются: логотип, город, телефон, кнопка и разделы снова идут одной лентой с переносом. */
  .top { display: flex; flex-wrap: wrap; }
  .top__side { display: contents; }
  .top__nav { order: 5; width: 100%; margin: 0; }
  .top__city { margin-left: auto; }
  .top > .order-btn { order: 4; }
  .bottom__looks { flex-wrap: wrap; white-space: normal; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-rows: auto; }
  .item__photo { flex: none; height: 150px; }
  .desk, .about__grid, .reader { grid-template-columns: minmax(0, 1fr); }
  .pane--wide { grid-column: auto; }
  .pane { overflow: visible; }
  .about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .about__block { grid-row: auto; grid-template-rows: auto auto auto; }
  .about__block img { height: auto; aspect-ratio: 4 / 3; }
  .reader__page { grid-template-columns: minmax(0, 1fr); height: auto; }
  .reader__photo { height: auto; aspect-ratio: 16 / 9; }
  .reader__list { flex-direction: row; overflow-x: auto; }
  .reader__list button { flex: 0 0 200px; }
}
@media (max-width: 699px) {
  body { padding-bottom: 76px; }
  .top__phone span, .top__city span { display: none; }
  .top__logo img { height: 46px; }
  .top__kind { left: 52px; top: 31px; font-size: 11px; letter-spacing: .06em; }
  .top > .order-btn { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; min-height: 52px; box-shadow: 0 6px 20px rgba(35, 31, 32, .25); }
  /* Телефон: прайс в один столбец, фото слева, название, цена и фасовки справа. Так фасовки не сжимаются. */
  .shelf { grid-template-columns: minmax(0, 1fr); }
  .item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; align-content: start; }
  .item__photo { grid-row: 1 / span 3; height: 92px; }
  /* В строке покупки на телефоне тесно, когда навеска уже в корзине: навеска, цена, минус, число, плюс. */
  .pack { gap: 5px; padding: 3px 5px; }
  .pick { padding: 0 19px 0 8px; background-position: right 7px center; }
  .form__row, .about__grid, .track { grid-template-columns: minmax(0, 1fr); }
  .toast { bottom: 84px; }
}
/* Телефон уже 375 px: строка покупки ещё плотнее, фото остаётся того же размера. */
@media (max-width: 374px) {
  .item { gap: 6px 8px; }
  .pick { padding: 0 17px 0 6px; background-position: right 5px center; }
  .pack__plus, .pack__less { width: 24px; height: 24px; }
  .pack__in { min-width: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .order-btn, .pack, .top__nav a, .link { transition: background-color .2s, border-color .2s, color .2s; }
}

/* Portrait adaptation fills tall cards; the horizontal layout keeps the original. */
body .about .about__block img.about__ship { object-fit: cover; object-position: center; }
@media (max-width: 1099px) {
  body .about .about__block img.about__ship { aspect-ratio: 7 / 8; }
  body.look-expedition .about .about__block img.about__ship { aspect-ratio: 3 / 2; }
}

/* ---------- Документы магазина: список слева, текст справа, текст прокручивается внутри страницы ---------- */
.legal-doc { grid-row: 1 / -1; display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 14px; min-height: 0; padding: 14px var(--pad); }
.legal-doc__list { display: flex; flex-direction: column; gap: 6px; }
.legal-doc__list a { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-weight: 500; line-height: 1.25; text-decoration: none; }
.legal-doc__list a:hover { border-color: var(--ink); }
.legal-doc__list a[aria-current] { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.legal-doc__page { min-height: 0; overflow-y: auto; padding: 22px 28px 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.legal-doc__page h1 { margin-bottom: 14px; font-size: 26px; line-height: 1.15; }
.legal-doc__text { max-width: 760px; font-size: 15px; line-height: 1.6; }
.legal-doc__text > * + * { margin-top: .8em; }
.legal-doc__text h2 { margin-top: 1.4em; font-size: 17px; line-height: 1.3; }
.legal-doc__text ul { list-style: disc; padding-left: 1.2em; }
.legal-doc__text .seller { list-style: none; padding-left: 0; }
.legal-doc__text a { text-decoration: underline; text-underline-offset: 3px; }
/* Пометка «Проект документа» остаётся видимой, пока текст не утвердил юрист. */
.legal-doc__text .legal__draft { padding: 10px 14px; border-radius: 8px; background: var(--ice); font-weight: 500; }
@media (max-width: 1099px) {
  .legal-doc { grid-template-columns: minmax(0, 1fr); }
  .legal-doc__list { flex-direction: row; overflow-x: auto; }
  .legal-doc__list a { flex: 0 0 auto; max-width: 260px; }
  .legal-doc__page { overflow: visible; padding: 18px; }
}

/* ---------- Корзина на странице заказа ----------
   Строка товара: фото, название с видом и навеской, справа «убрать»; во второй строке счётчик и сумма.
   Счётчик постоянного размера, цифры одной ширины: при смене количества ничего не сдвигается. */
.pane--cart { gap: 14px; }
.cart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cart-head__count { color: var(--steel); font-size: 13px; white-space: nowrap; }
.cart { display: grid; align-content: start; min-height: 0; overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }
.cart__line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "photo info remove" "photo ctl sum"; align-items: center; gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart__line:first-child { padding-top: 4px; }
.cart__line[aria-busy="true"] { opacity: .6; pointer-events: none; }
.cart__photo { grid-area: photo; align-self: start; width: 52px; height: 52px; }
/* Миниатюра товара: кадр из плитки изображений оформления, как в карточке прайса. Где плитки нет, фото товара. */
.thumb { position: relative; display: block; flex: none; overflow: hidden; border-radius: 50%; background: var(--ice); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-studio] .thumb { background: var(--atlas) var(--art-x) var(--art-y) / 500% 200% no-repeat, var(--ice); }
[data-studio] .thumb img { display: none; }
.cart__info { grid-area: info; display: grid; gap: 3px; min-width: 0; }
.cart__title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.cart__meta { color: var(--steel); font-size: 12px; line-height: 1.35; }
.cart__remove { grid-area: remove; justify-self: end; align-self: start; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--steel); font-size: 20px; line-height: 1; }
.cart__remove:hover { background: var(--ice); color: var(--red); }
.cart__sum { grid-area: sum; justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepper { grid-area: ctl; justify-self: start; display: flex; align-items: stretch; width: 108px; height: 32px; border-radius: 6px; overflow: hidden; background: var(--solid); color: var(--on-solid); }
.stepper button { flex: 0 0 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; font-size: 17px; line-height: 1; }
.stepper button:hover { background: rgba(255, 255, 255, .15); }
.stepper button:focus-visible { outline: 2px solid var(--on-solid); outline-offset: -4px; }
.stepper output { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; border-inline: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stepper output::after { content: '\00a0шт.'; font-weight: 400; opacity: .8; }
.totals { display: grid; gap: 8px; margin: 0; }
.totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.totals dt { color: var(--steel); font-size: 14px; }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals > .totals__free { flex-direction: column; align-items: stretch; gap: 7px; padding: 10px 12px; border-radius: 6px; background: var(--ice); }
.totals__free dt { color: var(--ink); font-size: 13px; }
.totals__free dt span { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals__bar { height: 4px; border-radius: 2px; overflow: hidden; background: rgba(0, 0, 0, .08); }
.totals__bar span { display: block; height: 100%; border-radius: inherit; background: var(--solid); transition: width .3s ease; }
.totals > .totals__sum { padding-top: 10px; border-top: 1px solid var(--line); }
.totals__sum dt { color: var(--ink); font-size: 16px; font-weight: 600; }
.totals__sum dd { font-size: 20px; font-weight: 700; }

/* ---------- Список корзины у кнопки заказа ----------
   Открывается наведением на кнопку и на 3 секунды после «В корзину». Мостик сверху держит список открытым,
   пока курсор идёт от кнопки к нему. На телефоне кнопка прибита к низу экрана, списка там нет. */
.top { position: relative; }
.minicart { position: absolute; z-index: 30; top: calc(100% - 4px); left: 50%; width: 360px; max-width: calc(100vw - 32px); padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(15, 30, 40, .35); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .2s; }
.minicart::before { content: ''; position: absolute; left: 0; right: 0; top: -32px; height: 32px; }
.order-btn:hover + .minicart, .order-btn:focus-visible + .minicart, .minicart:hover, .minicart:focus-within, .minicart--open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.minicart.minicart--closed { opacity: 0 !important; visibility: hidden !important; }
.minicart__list { display: grid; gap: 10px; max-height: 280px; overflow-y: auto; }
.minicart__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.minicart__photo { width: 40px; height: 40px; }
.minicart__info { display: grid; min-width: 0; font-size: 13px; line-height: 1.3; }
.minicart__info b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.minicart__info span { color: var(--steel); font-variant-numeric: tabular-nums; }
.minicart__sum { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.minicart__more { color: var(--steel); font-size: 12px; }
.minicart__free { margin-top: 12px; padding: 8px 10px; border-radius: 6px; background: var(--ice); font-size: 12px; }
.minicart__total { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.minicart__total b { font-size: 18px; font-variant-numeric: tabular-nums; }
.page-order .minicart { display: none; }
@media (max-width: 699px), (hover: none) { .minicart { display: none; } }

/* ---------- Вторая картинка товара: плавно сменяет первую при наведении ---------- */
.item__photo { position: relative; }
.item__photo > img[data-photo], .item__photo > .art-crop { transition: opacity .35s ease; }
.item__photo-alt { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
@media (hover: hover) {
  .item__photo:hover > .item__photo-alt, .item__photo:focus-visible > .item__photo-alt { opacity: 1; }
  .item__photo:has(> .item__photo-alt):hover > img[data-photo], .item__photo:has(> .item__photo-alt):hover > .art-crop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .minicart, .totals__bar span, .item__photo-alt, .item__photo > img[data-photo], .item__photo > .art-crop { transition: none; }
}

/* Одна открытая Москва: вместо выбора города просто его название (ActiveCities, решение 23.10.2026). */
.top__city-name { font-weight: 500; font-size: 16px; color: var(--ink); }
.form__note { margin: 0; color: var(--steel); font-size: 13px; }

/* ---------- Заказ: корзина и оформление одной страницей, итог справа (решение 23.10.2026, образец winestyle.ru) ----------
   Широкий экран: страница в один экран, левая колонка прокручивается внутри, итог с кнопкой стоит на месте.
   Телефон: одна колонка, внизу всегда видны сумма и кнопка оформления. */
.buy { grid-row: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 372px); gap: 16px; width: min(1280px, 100%); min-height: 0; margin-inline: auto; padding: 14px var(--pad); }
.buy__main { display: grid; align-content: start; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.buy__side { display: grid; align-content: start; gap: 14px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.buy__card, .summary { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.buy__card h1, .buy__card h2, .summary h2 { font-size: 20px; line-height: 1.2; }
.buy__card .cart { overflow: visible; }
.buy__card .cart__line:last-child { border-bottom: 0; padding-bottom: 0; }
.buy__empty { display: grid; gap: 10px; }
.checkout { display: grid; gap: 14px; }
.buy__info { display: grid; gap: 8px; padding: 18px 20px; border-radius: 10px; background: var(--ice); font-size: 14px; }
.buy__info h2 { font-size: 15px; line-height: 1.2; }
.buy__info h2:not(:first-child) { margin-top: 8px; }
.summary .order-btn:disabled, .order-bar .order-btn:disabled { opacity: .65; cursor: progress; }

/* Плашки выбора дня и времени: нажатие выбирает, выбранная залита. Радиокнопка под плашкой остаётся для клавиатуры. */
.chips { min-width: 0; margin: 0; padding: 0; border: 0; }
.chips legend { margin-bottom: 6px; padding: 0; font-size: 12px; color: var(--steel); }
.chips__list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: grid; place-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); font-size: 14px; line-height: 1.15; white-space: nowrap; transition: border-color .15s, background-color .15s, color .15s; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { border-color: var(--solid); background: var(--solid); color: var(--on-solid); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.chips[aria-invalid="true"] .chip span { border-color: var(--red); }
/* День: день недели, крупное число, месяц. Отрывной листок календаря, а не строка в списке. */
.chip--day span { gap: 3px; width: 74px; padding: 7px 4px 8px; }
.chip--day small { color: var(--steel); font-size: 12px; line-height: 1.1; }
.chip--day b { font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.chip--day input:checked + span small { color: inherit; opacity: .8; }
.field-error { font-size: 12px; color: var(--red-dark); }
.field-error:empty { display: none; }

.form__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form .form__check span { display: grid; gap: 2px; }
.form .form__check small { color: var(--steel); font-size: 12px; }
.summary .form__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.35; color: var(--steel); cursor: pointer; }
.summary .form__consent a { color: var(--ink); }

/* Строка корзины уходит плавно: высота схлопывается, соседние строки подъезжают. */
.cart__line--gone { opacity: 0; transform: translateX(12px); }
@media (prefers-reduced-motion: no-preference) {
  .cart__line { transition: opacity .2s ease, transform .2s ease; }
}

.order-bar { display: none; }

/* Согласие на cookie: тонкая полоса внизу экрана, исчезает после «Понятно». */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 12px 20px; width: fit-content; max-width: 760px; margin-inline: auto; padding: 12px 14px 12px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: 0 18px 40px -20px rgba(15, 30, 40, .45); font-size: 13px; line-height: 1.4; }
.cookie a { text-decoration: underline; text-underline-offset: 2px; }
.cookie__ok { flex: none; min-height: 38px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--solid); color: var(--on-solid); font-weight: 500; }
.cookie__ok:hover { opacity: .9; }

@media (min-width: 1100px) {
  .buy__side { position: sticky; top: 14px; align-self: start; max-height: calc(100vh - 28px); }
}
@media (max-width: 1099px) {
  .buy { grid-template-columns: minmax(0, 1fr); padding-bottom: 96px; }
  .buy__main, .buy__side { overflow: visible; }
  /* Кнопка заказа в шапке ведёт на эту же страницу: её место внизу занимает полоса с суммой. */
  .page-order .top > .order-btn { display: none; }
  .order-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px max(12px, var(--pad)) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); box-shadow: 0 -10px 30px -22px rgba(15, 30, 40, .45); }
  .order-bar > span { display: grid; line-height: 1.15; }
  .order-bar small { color: var(--steel); font-size: 12px; }
  .order-bar b { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .order-bar .order-btn { min-height: 48px; padding: 0 20px; }
  .page-order .cookie { bottom: 84px; }
  .page-order .toast { bottom: 84px; }
}
@media (max-width: 699px) {
  body.page-order { padding-bottom: 0; }
  .buy { padding-inline: 12px; gap: 12px; }
  .buy__card, .summary, .buy__info { padding: 16px 14px; }
  .form__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Дни листаются вбок одной лентой: семь листков не помещаются в ширину телефона. */
  .chips--days .chips__list { flex-wrap: nowrap; overflow-x: auto; margin-inline: -14px; padding: 2px 14px 4px; scrollbar-width: none; scroll-padding-inline: 14px; scroll-snap-type: x proximity; }
  .chips--days .chips__list::-webkit-scrollbar { display: none; }
  .chips--days .chip { flex: none; scroll-snap-align: start; }
  .chip { flex: 1 1 auto; }
  .chip span { padding-inline: 10px; }
  .cookie { left: 12px; right: 12px; bottom: 76px; gap: 12px; padding: 10px 10px 10px 14px; font-size: 12px; }
  .cookie__ok { min-height: 36px; padding: 0 14px; }
}

/* ---------- Проверка на телефоне 23.10.2026 (замечания 5–27) ---------- */
/* «Подробнее»: сведения, общие для видов краба, идут следом за описанием выбранного вида одним списком. */
.sheet__facts:not(:has(div)) { display: none; }
.sheet__facts--common { margin-top: 10px; padding-top: 0; border-top: 0; }
.sheet:not(:has(.sheet__kind:not([hidden]) .sheet__facts div)) .sheet__facts--common { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Своего фото у вида нет: подпись, какой краб на снимке. */
.photo-note { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: 30px; background: rgba(255, 255, 255, .92); color: #18283a; font-size: 12px; line-height: 1.3; pointer-events: none; }
.top__phone-city { display: none; }
/* Страница «не найдено». */
.missing { grid-row: 1 / -1; display: grid; align-content: center; justify-items: start; gap: 16px; width: min(640px, 100%); margin-inline: auto; padding: 48px var(--pad); }
.missing h1 { font-size: 32px; line-height: 1.1; }
.missing p { color: var(--steel); }
/* Полоса оформления на телефоне уходит, когда на экране уже итог со своей кнопкой (замечание 12). */
@media (prefers-reduced-motion: no-preference) { .order-bar { transition: transform .2s ease, visibility .2s; } }
.order-bar--away { transform: translateY(110%); visibility: hidden; }
@media (max-width: 699px) {
  /* Шапка в две строки: логотип и телефон с подписью города, под ними разделы (замечание 25). */
  div.top__city { display: none; }
  .top__phone { margin-left: auto; text-align: right; }
  .top__phone a { display: inline-block; padding: 4px 0; }
  .top__phone-city { display: block; font-size: 12px; color: var(--steel); }
  /* Зоны нажатия не меньше 44 px (замечание 24). */
  .top__nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .bottom a { display: inline-block; padding: 10px 0; }
  /* Поля ввода 16 px: меньше этого iPhone увеличивает страницу при нажатии на поле. */
  .form input[type="text"], .form input[type="tel"], .form input[type="email"], .track input, .cookbook__search input { font-size: 16px; }
  .bottom { font-size: 12px; }
}

/* ---------- Независимый аудит 23.10.2026: доступность с клавиатуры ---------- */
/* Галочки «Не звонить» и согласия: общее правило полей формы убирает обводку при фокусе, у галочки без рамки
   фокус становился невидим (FQ-03, WCAG 2.4.7). */
.form input[type="checkbox"]:focus-visible, .summary .form__consent input:focus-visible, .cookie__ok:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

/* ---------- Помощь с покупкой (сравнение с сервисами доставки 23.10.2026) ---------- */
/* Строка условий доставки над каталогом и ссылка «Как выбрать краба». */
.delivery-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--steel); }
/* Среднее начертание: жирный шрифт на главной больше нигде не нужен, лишний файл задерживал отрисовку. */
.delivery-line b { color: var(--ink); font-weight: 500; }
.delivery-line .link, .premium-heading__help { font-size: 13px; color: var(--ink); }
/* «· Условия доставки» переносится целиком: точка не остаётся висеть в конце строки на телефоне. */
.delivery-line .nowrap { white-space: nowrap; }
/* Карточка, к которой привела ссылка рецепта или подсказки, подсвечена. */
.item:target { box-shadow: 0 0 0 2px var(--solid); scroll-margin-top: 16px; }
/* Подсказка о сменившейся фасовке. */
.pack-note { margin: 0; font-size: 12px; line-height: 1.35; color: var(--ink); }

/* Окно товара: фото, вид и фасовка кнопками, цена упаковки и покупка, затем описание. */
/* Сетка только у открытого окна: иначе правило перекрывает скрытие закрытого окна браузером. */
.sheet--product[open] { display: grid; gap: 14px; align-content: start; max-height: calc(100dvh - 32px); overflow-y: auto; }
.sheet--product h2 { margin-bottom: 4px; }
.sheet__head { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; }
.sheet__photo { position: relative; display: block; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--ice); }
.sheet__photo .art-crop { display: block; width: 100%; height: 100%; background-image: var(--atlas); background-size: 500% 200%; background-position: var(--art-x) var(--art-y); background-repeat: no-repeat; }
.sheet__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sheet__photo-note { margin: 2px 0 0; color: var(--steel); font-size: 12px; line-height: 1.35; }
.sheet__kind-name { margin: 0; color: var(--steel); font-size: 14px; }
.sheet__choice { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet__choice button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); font-size: 14px; }
.sheet__choice button[aria-pressed="true"] { border-color: var(--solid); background: var(--solid); color: var(--on-solid); }
.sheet__choice button:disabled { opacity: .45; cursor: not-allowed; }
.sheet__choice button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sheet__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sheet__price b { font-size: 24px; font-variant-numeric: tabular-nums; }
.sheet__price span { color: var(--steel); font-size: 13px; }
.sheet .sheet__buy { display: flex; justify-content: flex-start; padding: 0; border: 0; background: none; }
.sheet .sheet__buy .pack__ctl { width: 100%; max-width: 280px; height: 44px; }
.sheet__more summary { cursor: pointer; padding: 8px 0; font-weight: 500; }
.sheet__more summary::first-letter { text-transform: uppercase; }
.sheet__note { margin: 0; color: var(--steel); font-size: 13px; }
.sheet__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* «Как выбрать краба»: части краба одним списком, каждая ведёт к своей карточке. */
.guide { display: grid; gap: 4px; margin: 4px 0 12px; }
.guide__item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.guide__item:hover, .guide__item:focus-visible { background: var(--ice); }
.guide__item span { font-size: 14px; line-height: 1.4; }
.guide__item small { color: var(--steel); font-size: 12px; }

/* Оформление: детали адреса по нажатию. */
.address-more { justify-self: start; font-size: 14px; }
.address-extra { display: grid; gap: 10px; }
.address-extra[hidden] { display: none; }

/* Кнопка заказа: сумма корзины видна только на телефоне, где кнопка закреплена внизу. */
.order-btn__summary { display: none; }
@media (max-width: 699px) {
  .top > .order-btn { flex-wrap: wrap; row-gap: 2px; padding-block: 6px; }
  .top > .order-btn .order-btn__summary:not([hidden]) { display: block; flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .92; }
  body:not(.page-order) { padding-bottom: 88px; }
  .sheet__head { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .sheet__photo { width: 88px; height: 88px; }
  .sheet--product { padding: 22px 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet__choice button { transition: background-color .15s, border-color .15s, color .15s; }
}
/* Окно товара всегда в одну колонку: правила строки покупки карточек («Панорама» ставит ей вторую колонку) сюда не
   переносятся, а форма с кнопкой «Закрыть» не занимает строку. */
.sheet--product[open] { grid-template-columns: minmax(0, 1fr); }
.sheet--product > form[method="dialog"] { display: contents; }
dialog.sheet--product .pack.sheet__buy { grid-column: 1 / -1; }

/* ---------- Заглушки вместо фото товаров (28.10.2026) ---------- */
/* Своих фото у магазина пока нет: рамка товара в карточке, окне товара и корзине показывает приглушённый знак
   компании (SiteMode::showsProductPhotos, класс photos-off у страницы). Плитка картинок оформления не грузится. */
.photos-off .art-crop, .photos-off .thumb {
  background: url('/images/placeholder-crab.svg') center / 44% no-repeat, var(--ice) !important;
}
.photos-off .thumb img, .photos-off .photo-note, .photos-off .sheet__photo-note { display: none; }