/* ==========================================================================
   Serikov Coffee 2026 — ПЛАНШЕТ В ПОРТРЕТЕ (768–1023px)

   Телефонный слой (остальные файлы mobile/) сюда не достаёт, поэтому здесь
   работает десктопная вёрстка — её и правим. Файл подключается вместе со
   всеми mobile/*.css из header.php (glob по алфавиту): «tablet» идёт после
   «quiz», значит при равной специфичности выигрывает он. Специально на это
   не опираемся — везде, где перебиваем чужое правило, вес указан
   в комментарии.

   ПОЧЕМУ В МЕДИАЗАПРОСЕ ЕСТЬ ВЫСОТА.
   Условие телефонного слоя — (max-width:767px), (max-width:1023px) and
   (max-height:520px). Вторая половина ловит телефон, повёрнутый набок:
   844×390 попадает и в неё, и в диапазон 768–1023. Файл грузится последним,
   и без ограничения по высоте его правила перебили бы аккуратно собранный
   телефонный слой в альбоме. Поэтому (min-height:521px) — ровно на единицу
   выше телефонного порога: планшет в портрете (1024, 1180, 1366) проходит,
   телефон набок — нет.

   РАЗМЕРЫ ПИШЕМ В ПИКСЕЛЯХ. Масштабные единицы в этом диапазоне стоят на
   своём минимуме: --u = 0,70px (min(.0576vw, .1005vh) при ширине ≤1023
   всегда меньше .70), --d = 0,68px. Значит calc(14 * var(--u)) — это 9,8px,
   а не «четырнадцать»: всё, что считано на --u/--d, выходит нечитаемо
   мелким и мельче тап-цели. Поэтому числа здесь явные.

   ВЫСОТЫ ШАПКИ (на них завязана липкость и все sticky-отступы ниже):
     ряд 1 (логотип + значки)   64px   — уезжает при прокрутке
     ряд 2 (каталог + поиск)    48px + 8px поля снизу = 56px — остаётся
     ─────────────────────────────────────────────────────
     шапка целиком             120px, прилипшая часть 56px
   Меняете высоту ряда 1 — меняйте top у #site-header; меняете прилипшую
   часть — меняйте 68px у .pdp-buy и .sc-cart .total.
   ========================================================================== */

@media (min-width:768px) and (max-width:1023px) and (min-height:521px){

/* ==========================================================================
   1. ВЕРХНЯЯ ПОЛОСА (только на главной)
   ========================================================================== */

/* site.css при ≤900 прячет левую половину и уводит кегль в 14*--u ≈ 9,8px.
   На планшете обе половины помещаются: «Бесплатная доставка…» ≈ 250px и
   «Караганда · Алматы · Астана | телефон» ≈ 290px против 682px полосы при
   768. Поля даёт .tb-in (40*--d ≈ 27px) — свои 16px у .topbar снимаем,
   иначе текст начинается в 43px от края, а логотип под ним в 27px. */
.topbar{height:32px;font-size:13px;padding:0}
/* вес (0,2,0) против .topbar .tb-l{display:none} в site.css — тот же,
   выигрывает порядок файлов */
.topbar .tb-l{display:block}
.topbar .tb-r i{margin:0 8px}

/* ==========================================================================
   2. ШАПКА — два ряда

   Было: всё в одну строку 63px. Логотип 92×52, кнопка «Каталог» 113×37,
   значки по 53×37 — и поиск, единственный сжимаемый элемент, доживал до
   193px. Тап-целей 44px не было ни у чего.

   Стало: ряд 1 — логотип слева, город/кабинет/избранное/корзина справа
   с подписями; ряд 2 — «Каталог» и поиск во всю оставшуюся ширину
   (≈518px при 768). Нижней панели навигации на планшете нет, все входы
   остаются в шапке.
   ========================================================================== */

/* Липкость: отрицательный top равен высоте ряда 1 — шапка едет со
   страницей, пока логотип со значками не уйдёт за верх, дальше ряд
   «Каталог + поиск» стоит на месте. site.css: #site-header{top:0} —
   селектор тот же (1,0,0), выигрывает порядок файлов. */
#site-header{top:-64px}
/* site-hf.js при прокрутке вниз вешает .is-hidden и увозит шапку
   transform'ом. На планшете поиск должен оставаться на экране. */
.site-head.is-hidden{transform:none}
/* site.css: .site-head{padding:calc(2.5 * var(--d)) 0 0} — 1,7px сверху
   при заданных высотах рядов только сбивают счёт. */
.site-head{padding:0}

/* Сетка шапки. Столбец 1 — auto: его ширину задаёт кнопка «Каталог»
   (152px), логотип встаёт в него же слева. Столбец 2 — всё остальное.
   site.css: .head-inner{height:calc(90 * var(--d));gap:0} (0,1,0) и
   .head-inner{height:auto;padding:10px 14px;flex-wrap:wrap} при ≤1100
   (0,1,0) — вес тот же, выигрывает порядок файлов. */
.head-inner{display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:64px 48px;
  column-gap:12px;row-gap:0;
  height:auto;padding:0 0 8px;align-items:center}

/* ---- ряд 1: логотип ----
   site.css: .hd-logo img{width:calc(144 * var(--d));height:calc(77 * var(--d))}
   (0,1,1) — при --d=0,68 это 98×52, а из-за object-fit:contain логотип
   рисовался 92×52. Файл 2482×1398 (≈1,775:1), поэтому задаём высоту, а
   ширину считает пропорция: 99×56 — как на десктопе (124×70), только
   пропорционально ряду. */
.hd-logo{grid-area:1/1/2/2;justify-self:start;margin:0}
.hd-logo img{width:auto;height:56px;max-height:56px}

/* ---- ряд 1: город, кабинет, избранное, корзина ----
   site.css: .hd-tools{margin-left:auto;padding-left:calc(40 * var(--d));
   gap:calc(12 * var(--d))} (0,1,0) и .hd-tools{align-items:flex-end}
   (0,1,0). В сетке за прижим вправо отвечает justify-self. */
.hd-tools{grid-area:1/2/2/3;justify-self:end;align-self:center;
  margin:0;padding:0;gap:8px;align-items:center;min-width:0}
.hd-city,
.hd-right,
.hd-right .bx-basket,
.hd-right-in{align-items:center}
/* margin-left:auto у .hd-right в группе шириной по содержимому лишний:
   свободного места между значками нет, а промежуток должен быть ровным. */
.hd-right{margin-left:0;gap:8px}
.hd-right-in{gap:8px}

/* Одна коробка на все четыре значка: 48×52 — тап-цель по обеим осям
   выше 44. site.css: .hd-ico,.hd-city-btn{min-width:calc(78 * var(--d));
   min-height:calc(54 * var(--d));gap:calc(3 * var(--d))} (0,1,0) и
   ниже .hd-ico,.hd-city-btn{justify-content:flex-end;gap:calc(8 * var(--d))}
   (0,1,0) — вес тот же, выигрывает порядок файлов. */
.hd-ico,
.hd-city-btn{min-width:48px;min-height:52px;padding:2px 6px;
  justify-content:center;gap:4px;border-radius:12px}
.hd-ico > img,
.hd-ico > svg,
.hd-city-btn > .hd-ico-img{height:24px;width:auto}

/* Подписи. site.css прячет их при ≤1100: .hd-ico span:not(.cnt)
   {display:none} — вес (0,2,1), поэтому берём (0,3,1). В два ряда место
   есть, а значок без подписи на планшете читается хуже: «Избранное» и
   «Кабинет» одной сумкой и сердцем не различить. 13px — выше порога 12. */
.head-inner .hd-ico span:not(.cnt){display:block;font-size:13px;line-height:1.15}
/* Название города — тем же кеглем. Длинное («г. Усть-Каменогорск») режем
   многоточием, иначе оно раздвигает ряд. site.css: .hd-city-wrap b
   {font-size:calc(17 * var(--d))} и {line-height:1} — оба (0,1,1). */
.hd-city-wrap b{font-size:13px;line-height:1.15;max-width:132px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Цифра у корзины считается от середины столбца: столбец 48px, значок
   24px, значит правый край значка — в 12px от середины. site.css:
   .hd-ico .cnt{top:calc(-10 * var(--d));right:calc(50% - 21.5 * var(--d));
   font-size:calc(17 * var(--d))} — вес (0,2,0), тот же. */
.hd-ico .cnt{top:0;left:auto;right:calc(50% - 16px);
  font-size:12px;font-weight:700}

/* ---- ряд 2: кнопка «Каталог» ----
   Фигура — одна картинка hd-shape-btn.svg, растянутая на кнопку
   (152×48 против исходных 178×54 — пропорция почти та же, скос не врёт).
   site.css: .hd-cat{width:132px;height:46px;font-size:16px} при ≤1100 и
   .hd-cat{height:calc(54 * var(--d));min-width:calc(167 * var(--d));
   margin-left:calc(40 * var(--d));font-size:calc(20 * var(--d))} — оба
   (0,1,0). */
.hd-menu{grid-area:2/1/3/2;margin:0}
.hd-cat{--btn-h:48px;width:152px;min-width:152px;height:48px;
  margin:0;padding:0;gap:10px;font-size:17px;font-weight:500}
.hd-cat-ico{width:20px;height:14px;margin:0}

/* ---- ряд 2: поиск ----
   Форму поля рисует border-image из field-frame-green.svg, боковины
   считаются от --btn-h (--frame-cap = --btn-h * 0.4947 ≈ 23,8px), а
   padding там прибит !important и уходит в отрицательный, то есть в ноль.
   Значит единственное, чем управляем, — высота. site.css: .hd-search
   {--btn-h:calc(50 * var(--u))} (0,1,0), .hd-search{height:calc(54*var(--d));
   flex:1 1 calc(580 * var(--d));max-width:calc(580 * var(--d))} (0,1,0) и
   .hd-search{order:3;flex-basis:100%} при ≤1100 — берём (0,2,0).
   В сетке flex-свойства не работают, но обнуляем их явно, чтобы правила
   не оставались «висеть». */
.head-inner .hd-search{--btn-h:48px;
  grid-area:2/2/3/3;flex:none;width:auto;max-width:none;min-width:0;
  height:48px;margin:0;gap:10px}
.hd-search-ico{width:20px;height:20px}
/* 16px — порог, ниже которого iOS приближает страницу при фокусе.
   site.css: .hd-search input{font-size:calc(20 * var(--d))} (0,1,1). */
.head-inner .hd-search input{font-size:16px;font-weight:500}

/* ---- панель каталога ----
   С 17.09.2026 это выпадающие списки в узкой панели под кнопкой
   «Каталог». Её место, ширина, предел высоты с прокруткой и строки 44px
   под палец (@media pointer:coarse) заданы в site-hf.css (раздел «Меню
   „Каталог“») одним правилом для десктопа и планшета. Прежние правила
   колонок (.hd-cat-col, .hd-drop-side) отсюда убраны: таких классов в
   разметке больше нет, а .hd-drop{max-height…} там перебит весом (0,2,0). */

/* ---- всплывашка «Ваш город — …?» ----
   Кнопка города теперь у правого края шапки, поэтому окошко прижимаем
   к её правому краю: от left:0 оно уходило бы за кромку экрана.
   site.css: .hd-city-confirm{width:calc(268 * var(--u))} ≈ 188px и кегли
   на --u — 9–10px. */
.hd-city-confirm{left:auto;right:0;top:calc(100% + 8px);width:280px;padding:16px}
.hd-city-confirm p{margin:0 0 12px;font-size:14px;line-height:1.35}
.hd-city-confirm-btns{gap:8px}
.hd-city-confirm-btns .pbtn,
.hd-city-confirm-btns .pbtn-line{--btn-h:44px;min-height:44px;
  flex:1 1 auto;padding:0 14px;font-size:13px}

/* ---- модалка выбора города ----
   Кегли на --u давали 9–11px, кнопки списка — ниже 30px. */
.sc-city-box{width:min(620px,100%);padding:24px}
.sc-city-box h2{font-size:22px;margin:0 0 6px}
.sc-city-note{margin:0 0 16px;font-size:14px}
.sc-city-modal input[type=search]{margin-bottom:16px}
.sc-city-major{gap:8px;margin-bottom:18px;padding-bottom:16px}
.sc-city-major button{min-height:44px;padding:0 18px;font-size:14px}
.sc-city-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px}
.sc-city-list button{min-height:44px;padding:0 10px;font-size:15px;border-radius:10px}
.sc-city-x{width:40px;height:40px;top:14px;right:14px}

/* ==========================================================================
   3. БАННЕР

   Что вылезало: .hero-track при ≤900 получает aspect-ratio:2/1 (site.css),
   и на 820px коробка выходила 766×383. Баннеры бренда — 1900×814, то есть
   2,334:1; object-fit:cover вписывает их по высоте и срезает по 64px с
   каждого бока — ровно там, где на втором баннере нарисован заголовок
   «ПРИГОТОВЬ ИДЕАЛЬНЫЙ РАФ». Ничего не «вылезало» за коробку: обрезалась
   сама картинка.

   Лечим тем же приёмом, что уже принят на телефоне (mobile/hero.css:81-134),
   а не занижением коробки: заказчик просил баннеры «более квадратные», и
   пропорция 1900/814 делала их наоборот ниже прежнего. Коробку оставляем
   высокой, кадр кладём целиком, а поля сверху и снизу закрываем той же
   картинкой, увеличенной и размытой. Пропорция 2:1 одна на весь диапазон:
   при ≤900 она такая и была (менять нечего), при 901–1023 вместо полосы
   4,25:1 баннер становится выше — как и просили.
   Вес (0,2,0) против .hero-track (0,1,0) в обоих местах site.css. */
.hero-b .hero-track{aspect-ratio:2 / 1}

/* Слайд — коробка для кадра: кадр центрируем по вертикали, свободные поля
   уходят под заливку. site.css: .hero-slide{display:block} (0,1,0),
   у .hero-slide.on display не задан — хватает (0,2,0). */
.hero-b .hero-slide{display:flex;align-items:center}

/* Заливка полей: та же картинка, растянутая на весь слайд и размытая —
   края кадра уходят в свой же фон, а не в плоскую зелёную плашку (у
   hero-1 фон градиентный, стык виден сразу). Адрес приходит из разметки —
   style="--hero-fill:url(…)" у слайда (sc_hero.php): баннеры заводят в
   админке, их число и порядок меняются, по номеру слайда адрес больше
   не вписать. Это та же копия, что уже скачал <picture>. */
.hero-b .hero-slide::before{content:'';position:absolute;inset:-10%;z-index:0;
  background:var(--green-brand) center/cover no-repeat;
  background-image:var(--hero-fill, none);
  filter:blur(16px) brightness(.85)}


/* Кадр — поверх заливки. Высоту считает пропорция самой картинки
   (width=1900 height=814 стоят в разметке), поэтому оставшийся из site.css
   object-fit:cover ничего не режет: коробка совпала с собственной
   пропорцией картинки. site.css: .hero-slide img (0,1,1) — берём (0,2,1). */
.hero-b .hero-slide picture{position:relative;z-index:1;flex:0 0 auto;
  display:block;width:100%}
.hero-b .hero-slide img{width:100%;height:auto}

/* Стрелки при ≤900 спрятаны совсем, при 901–1023 они 9,8×11px — мимо
   пальца. Возвращаем и растим коробку до 44px, а рисунок оставляем
   прежнего размера: background-size задаём явно, иначе картинка
   растянется на все 44px и уголок станет лопатой.
   Веса: .hero-b .hero-nav (0,2,0) против .hero-nav (0,1,0);
   .hero-b .hero-nav button (0,2,1) против .hero-nav button (0,1,1). */
.hero-b .hero-nav{display:flex;padding:0 10px}
.hero-b .hero-nav button{width:44px;height:44px;
  background-size:14px 16px;background-position:center}

/* Точки убраны — ровно как на телефоне (mobile/hero.css:170, правка
   заказчика). Планшет — такое же тач-устройство, и отдельного решения по
   нему нет, поэтому идём за уже принятым. Развести точки под палец здесь
   всё равно не выходит: шаг между ними 25px, а прозрачные тап-цели 44px
   наезжали бы друг на друга — палец по правой половине первой точки
   переключал бы второй слайд. Листается баннер пальцем и стрелками выше.
   display:none заодно убирает точки из порядка табуляции и из дерева
   доступности (в разметке у них tabindex="0"), так что невидимой тап-цели
   и невидимого фокуса не остаётся.
   site.css: .hero-dots (0,1,0) — хватает (0,2,0). */
.hero-b .hero-dots{display:none}

/* ==========================================================================
   3а. ПЛИТКИ-ВХОДЫ

   Две колонки .entries держатся только до 999px: site.css:379 с 1000px
   ставит четыре плитки в ряд, а починка узкого экрана (site.css:437)
   до 1000 не достаёт. В зазоре 1000–1023 плитка выходит ≈218px шириной,
   и на неё действуют базовые правила: min-height:300px ломает пропорцию
   325/388, заголовок считан на --u (24*--u ≈ 16,8px) и заперт в max-width
   103px, пункты списка — 14*--u ≈ 9,8px, ниже порога 12px.

   Держим две колонки на всём диапазоне и повторяем габариты из site.css:437
   — так плитка на 1023 выглядит ровно как на 999.
   Веса: .entries (0,1,0), .entry (0,1,0), .entry h3 / .entry li (0,1,1) —
   те же, что у перебиваемых правил, выигрывает порядок файлов.
   display:grid нужен отдельно: при ≥1000 и hover:hover site.css:443
   разворачивает .entries во flex-аккордеон, который пальцем не
   управляется, а на планшете hover:hover иногда всё-таки объявляется. */
.entries{display:grid;grid-template-columns:1fr 1fr}
.entry{aspect-ratio:auto;height:400px;padding:26px 22px 0}
.entry h3{font-size:26px}
.entry li{font-size:15px}

/* ==========================================================================
   4. «ХИТЫ ОБЖАРКИ»

   Плитки .pgrid здесь идут в две колонки (site.css, 620–1039) — карточка
   считает свои размеры от ширины ячейки (--cp = 100cqw/325), поэтому
   внутри неё всё пропорционально и трогать нечего. Разъезжалась только
   шапка секции: подпись 14*--d ≈ 9,5px и кнопка высотой 54*--d ≈ 37px.
   ========================================================================== */
.hits{padding-top:48px}
.hits-head{gap:20px;margin-bottom:28px}
/* вес (0,3,1) — ровно как у .hits.mac .hits-ttl h2 в site.css */
.hits.mac .hits-ttl h2{font-size:30px}
.hits-ttl{min-width:280px}
.hits-ttl p{font-size:14px;max-width:420px;margin-top:10px}
/* Вес (0,2,0), а не (0,1,0): «Весь каталог» — это .pbtn-green, и общее
   правило кнопок в разделе 9 стоит ниже по файлу. При равном весе оно
   перебило бы кегль обратно на 15px. */
.hits-head .hits-all{--btn-h:48px;min-height:48px;padding:0 22px;font-size:17px}
.btn-arr{width:20px;height:20px}

/* ==========================================================================
   5. ТЕСТ «ПОДБЕРЁМ КОФЕ»

   .quiz-row при ≤1039 уже складывается в одну колонку (site.css), и это
   правильно: левая колонка нарисована под 440 из 1360, при 682–975 она
   ужалась бы до 220–315px вместе с вопросом. Правим только кегли и
   тап-цели.
   ========================================================================== */
.quizsec{padding:48px 0}
/* вес (0,3,0) против .qc .qc-d (0,2,0): 14*--qu ≈ 10,6–11,9px */
.quizsec .qc .qc-d{font-size:13px}
/* стрелка ответа: 42*--u ≈ 29px */
.quizsec .qc .qc-go{width:40px;height:40px}

/* результат теста: переключатель фасовки был 35px высотой */
.qr-w button{min-height:44px;padding:0 18px;font-size:14px}

/* ==========================================================================
   6. КАРТОЧКА ТОВАРА

   При ≤1099 сетка складывается в одну колонку, фото уходит наверх, а
   карточка покупки ограничена 420px — справа от неё оставалось полполосы
   пустоты. На планшете места хватает на два столбца под фотографией:
   слева описание и шкалы, справа покупка. Области раздаём явно —
   у .pdp-grid пять детей (узоры при ≤1099 спрятаны), и на автоматическую
   раскладку полагаться нельзя.
   Веса: .pdp-grid (0,1,0) — как у site.css; .pdp-grid > .pdp-buy (0,2,0) —
   как у правил position:sticky/static и max-width там же.
   ========================================================================== */
.pdp-grid{grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  grid-template-areas:
    "photo photo"
    "info  buy"
    "tabs  tabs"
    "below below";
  gap:24px}
.pdp-grid > .pdp-info{grid-area:info}
.pdp-grid > .pdp-photo{grid-area:photo}
.pdp-grid > .pdp-tabs{grid-area:tabs}
.pdp-grid > .pdp-below{grid-area:below}
/* 68px — прилипшая часть шапки (56) плюс воздух. */
.pdp-grid > .pdp-buy{grid-area:buy;max-width:none;
  position:sticky;top:68px;align-self:start}
.pdp-pack{max-width:min(100%,460px)}
/* Кегль названия не трогаем: шаблон компонента ставит его инлайном
   (font-size:calc(N * var(--mp)), N подобран под колонку 315 единиц
   макета) — инлайн выигрывает у любого css без !important, а места в
   колонке 380–640px ему хватает. */

/* Мелочи, считанные на --u/--mp: 12*--mp ≈ 9,8px у подписей способов
   заваривания, 11px у сносок.
   15.09.2026 заказчик просил «всё сделать крупнее» (таблица для десктопа —
   у .pdp-sub в site.css). Здесь те же места в пикселях, было → стало:
     сноски 12 → 13; описание 15 → 16; подписи шкал 13,3 → 16;
     «Вес пачки», «Помол» 15 → 16; чипы и помол 15 → 16 (ниже, у тап-целей);
     вкладки 11,2 → 15; характеристики 10,5 → 15; текст «Описание» 11,2 → 15.
   Строку обработки под названием и «за 200 г» отдельно не задаём: из
   site.css и taste-pack.css приходят 26,2px и 14px — этого достаточно.
   Подписи способов остаются 12px: плитки здесь 42,6px при зазоре 21, и
   «кофеварка» уже при 12px выходит за плитку в зазор; крупнее — подписи
   соседних плиток сойдутся.
   Второй селектор — под правило верхнего блока в site.css
   (.sc2026-page .pdp-info .pdp-brew span, max(12px, 14 · --mp)): оно
   тяжелее первого, и кегль планшета должен перебивать и его. */
.sc2026-page .pdp-brew span,
.sc2026-page .pdp-info .pdp-brew span{font-size:12px}
/* Вкладка «Способы приготовления»: плитка 42,6px, а подпись при 12px шире
   («аэропресс» 66px, «кофеварка» 69) и выходила за плитку в обе стороны.
   Зазор между плитками 12,6px, и подписи соседей налезали друг на друга
   (−1,3px между «аэропресс» и «кружка»), а первую на 768 срезал край
   страницы на 11,8px — «эропресс». Это было и до 15.09.2026; нашлось при
   проверке кеглей. Ячейка теперь не уже своей подписи (min-content — по
   самому длинному слову, «капельная кофеварка» по-прежнему в две строки)
   и не уже плитки. Замер 16.09.2026: зазор между подписями 12,6px, край не
   режет; на 768–899 и на 1000–1023 все 7 плиток в ряд, на 900 и 940
   (вкладка в половину ширины) — 6 + 1, раньше там было 7 внахлёст.
   Только вкладка: в верхнем блоке свой зазор 21px, там подписи не
   сходятся. */
.sc2026-page .pdp-panel .pdp-brew span{width:min-content;flex:0 0 auto;min-width:calc(52 * var(--mp))}
.buy-save{font-size:12px}
.buy-note li{font-size:13px}
/* Селекторы и вес — те же, что у правил site.css; файл идёт позже. */
.pdp-desc{font-size:16px}
.pdp-scales .nm{font-size:16px}
.buy-cap{font-size:16px}
.pdp-tabs button{font-size:15px}
.pdp-specs dt,
.pdp-specs dd{font-size:15px}
.pdp-fulltext{font-size:15px}
/* Тап-цели в карточке покупки: фасовка 29,5px, «плюс/минус» 18px,
   список помола 29,5px, кнопка «В корзину» 36px.

   Селекторы здесь полные: все конкуренты в site.css записаны как
   .sc2026-page .pdp-buy … и весят (0,3,1), а у счётчика-инпута — (0,4,1).
   С коротким .buy-chips button (0,1,1) не доезжало ничего, кроме
   min-height:44px, — коробка чипа росла с 36 до 44 единиц при кегле
   11,5px, и подложка pdp-chip-off.svg плющилась (§3.1).

   Чип: меняем height, а не min-height, — коробка и её SVG-подложка растут
   вместе. Ширину не задаём: min-width из site.css (89*--mp ≈ 73px)
   позволяет чипам сжаться, если фасовок три, а .buy-chips без переноса —
   иначе строка вылезла бы за карточку.

   Счётчик: в разметке не span, а <input class="quantity-input">
   (template.php:485). Кегль 16px — порог, ниже которого iOS приближает
   страницу при фокусе. Коробку счётчика растим с 41 до 52px, иначе
   кнопки 44px в неё не помещаются. Подложка pdp-field-qty.svg при этом
   растягивается шире нарисованного (124×52 против 84×51,5): в макете
   кружки «−/+» 22px — вдвое меньше пальца, и сохранить одновременно
   пропорцию и тап-цель нельзя. Выбираем тап-цель.

   Помол: одной переменной мало — высота этого поля задана числом
   (site.css:1547 height:calc(36*--mp) ≈ 29,5px), а --btn-h идёт в
   --frame-cap:calc(--btn-h*0.4947) у border-image. Поднимешь только
   переменную — боковины рамки вырастут до 22,8px на коробке 29,5px, и
   скос расплющится по горизонтали (§3.1). Поэтому высота, line-height и
   переменная меняются вместе, доля боковины остаётся расчётной. */
.sc2026-page .pdp-buy .buy-chips button{height:44px;padding:0 20px;font-size:16px}
.sc2026-page .pdp-buy .buy-qty{height:52px;padding:0 4px}
.sc2026-page .pdp-buy .buy-qty button{width:44px;height:44px;font-size:22px}
.sc2026-page .pdp-buy .buy-qty .quantity-input{width:28px;font-size:16px}
.sc2026-page .pdp-buy .buy-select select{--btn-h:46px;height:46px;
  line-height:46px;font-size:16px}
.sc2026-page .pdp-buy .buy-cta,
.pdp-buy .buy-cta{--btn-h:48px;min-height:48px;font-size:16px}

/* ==========================================================================
   7. КОРЗИНА

   Строка товара при ≥800 разложена по пяти столбцам, но ширины считаны
   на --u: фото 59px, цена 105px, счётчик 91px. Счётчик в 91px и держал
   кнопки «−/+» по 18px — тап-цель втрое меньше нормы. Раздаём столбцы
   в пикселях: при 768 остаётся ≈240px под название, при 1023 — ≈500px.
   Вес (0,2,0) — как у site.css при ≥800.
   ========================================================================== */
.sc-cart .cart-grid{gap:24px}
.sc-cart .cart-box{padding:20px 22px}
.sc-cart .cart-count{font-size:15px}
.sc-cart .cart-tools{gap:16px;margin-top:14px;padding-bottom:12px}
.sc-cart .cart-drop{min-height:44px;font-size:14px}
.sc-cart .cart-check{min-height:44px;gap:10px;font-size:14px}
.sc-cart .cart-check input{width:22px;height:22px}

.sc-cart .ci{grid-template-columns:auto 76px minmax(0,1fr) 140px 168px;
  gap:14px;padding:16px 0}
.sc-cart .ci h2{font-size:16px}
.sc-cart .ci .opt{font-size:12px;padding:4px 10px}
.sc-cart .ci-price b{font-size:17px}
/* nowrap в столбце 140px обрезал бы «цена за 1 шт — 4 990 ₸». */
.sc-cart .ci-price span{font-size:12px;white-space:normal}
.sc-cart .ci-qty{gap:8px}
/* Счётчик: боковины рамки считаются от --btn-h (по 0,4947 от высоты),
   поэтому при 44px он занимает 2×21,8 + 44 + 32 + 44 ≈ 164px — влезает
   в столбец 168px. Меняете высоту — пересчитайте столбец.
   Веса: .sc-cart .qty (0,2,0), .sc-cart .qty button/span (0,2,1) — как
   у правил в site.css. */
.sc-cart .qty{--btn-h:44px;height:44px}
.sc-cart .qty button{width:44px;height:44px;font-size:20px}
.sc-cart .qty span{min-width:32px;font-size:15px}
.sc-cart .qty-unit{font-size:12px}
.sc-cart .ci .del{display:inline-flex;align-items:center;
  min-height:44px;padding:0 4px;font-size:12px}

/* Сводка. 68px — прилипшая часть шапки плюс воздух: было 96*--u ≈ 67px,
   и сводка подъезжала под шапку. */
.sc-cart .total{padding:22px;top:68px}
.sc-cart .cart-company{padding:12px 14px;margin-bottom:18px}
.sc-cart .tl-sum span{font-size:17px}
.sc-cart .tl-sum b{font-size:26px}
.sc-cart .cart-go{--btn-h:52px;min-height:52px;font-size:17px}
.sc-cart .total .note{font-size:12px}
.sc-cart .tl-cut span{font-size:14px}
.sc-cart .tl-cut b{font-size:18px}
.sc-cart .tl-cut-note{font-size:13px}
/* Зачёркнутая цена до скидки рядом с итогом: чуть мельче итога, иначе два
   числа в строке спорят. */
.sc-cart .tl-was{font-size:17px}
.sc-cart .promo-row{gap:12px}
/* Кнопку «Применить» растит общее правило кнопок в разделе 9 —
   отдельного здесь нет, чтобы не спорить с ним за одну и ту же высоту. */

/* ==========================================================================
   8. ОФОРМЛЕНИЕ ЗАКАЗА

   Ниже 1000px компонент и так идёт одной колонкой, но при 1000–1023
   включались две: сводка 400*--u = 280px и левая колонка ≈690px. Внутри
   левой колонки способы доставки лежат по два в ряд — карточки выходили
   по 330px, и в них не помещалось название службы с ценой. Держим одну
   колонку на всём диапазоне: так же, как на 820.
   Вес (1,1,0) — как у site.css при ≥1000.
   ========================================================================== */
.sc-checkout #bx-soa-order{grid-template-columns:1fr;gap:20px}
/* Сводка в одной колонке идёт последней — липнуть ей не к чему, а
   top:18*--u ≈ 12,6px загонял бы её под шапку. Вес (1,1,0). */
.sc-checkout #bx-soa-total{position:static}

.sc-checkout .bx-soa-section-title{font-size:18px;gap:10px}
.sc-checkout .bx-soa-section-title .bx-soa-section-title-count{
  width:26px;height:26px;font-size:14px}
.sc-checkout .bx-soa-section-title-container{padding:18px 20px 0}
.sc-checkout .bx-soa-section-content{padding:14px 20px 18px}
.sc-checkout .bx-soa-customer-label,
.sc-checkout label{font-size:13px;margin-bottom:6px}
.sc-checkout .bx-soa-pp-company-smalltitle{font-size:14px}
.sc-checkout .bx-soa-pp-delivery-cost,
.sc-checkout .bx-soa-pp-company .bx-soa-pp-price{font-size:15px}
.sc-checkout .bx-soa-cart-total-line,
.sc-checkout .bx-soa-cart-total-line-total{padding:8px 0}

/* ==========================================================================
   9. ПОЛЯ И КНОПКИ — общий минимум

   Фигуру полей рисует одна картинка border-image, и её боковины считаются
   от --btn-h. Поэтому высоту меняем только через переменную — иначе
   линии перестанут сходиться с боковинами. Список селекторов повторяет
   site.css один в один (те же веса), меняются два свойства: рост до 48px
   (было 52*--u ≈ 36px) и кегль 16px (было 15*--u ≈ 10,5px; 16px ещё и
   отменяет приближение страницы на iOS при фокусе).

   Поля адреса записаны полным селектором. Все .sc-field в проекте лежат
   только внутри модалки адреса (local/include/checkout-address.php:107-131),
   а site.css:2611 задаёт им --btn-h, height и кегль через
   .sc-addr .sc-field input, .sc-addr-modal .sc-field input — вес (0,2,1).
   Короткий .sc-field input (0,1,1) этому правилу проигрывал, и главные
   поля оформления оставались 35px высотой с кеглем 10,5px, хотя соседняя
   textarea в той же модалке кегль уже получала. Одной переменной здесь
   хватает: у конкурента height:var(--btn-h).
   ========================================================================== */
.sc-addr .sc-field input,
.sc-addr-modal .sc-field input,
.auth-f input,
.sc-cart .promo-row input,
.sc-checkout .form-control,
.sc-checkout input[type=text],
.sc-checkout input[type=tel],
.sc-checkout input[type=email],
.sc-checkout select.form-control,
.sc-checkout .bx-soa-section input.form-control,
.sc-checkout .bx-soa-section select.form-control,
.sc-checkout .bx-soa-customer input.form-control,
.b2b-form input:not([type=checkbox]):not([type=radio]),
.b2b-form select,
.sc-city-modal input[type=search]{--btn-h:48px;font-size:16px}

.sc-checkout .bx-soa-section textarea.form-control,
.sc-addr-modal .sc-field textarea,
.b2b-form textarea{font-size:16px;min-height:96px}

/* Кнопки фирменной формы: 52*--u ≈ 36px и кегль 16*--u ≈ 11px.
   Растим коробку — подложка со скосом тянется по высоте сама. */
.pbtn,.pbtn-green,.pbtn-line,.pbtn-white,.pbtn-lwhite{
  --btn-h:48px;min-height:48px;padding:0 26px;font-size:15px}
/* Места, где site.css задаёт кнопке свою высоту частнее (вес 0,2,0) —
   без них правило выше до них не достаёт. */
.pcard .pbtn,
.sc-addr-acts .pbtn,
.sc-added-acts .pbtn{--btn-h:48px}
/* «Отмена» в окне адреса — туда же. В site.css:4852 у неё height:var(--btn-h)
   весом 0,2,0, и правило ниже (0,1,0) с его --btn-h:48px до неё не достаёт:
   коробка оставалась 50*--u ≈ 35px, а min-height растягивал её до 48 — рамка
   считалась от одной высоты, а рисовалась в другой, и контур шёл разной
   толщиной. Вес здесь тоже 0,2,0, выигрываем порядком: tablet.css
   подключается после site.css. */
.sc-addr-acts .sc-addr-cancel{--btn-h:48px;height:48px}
.sc2026-page .btn-primary,
.sc2026-page .btn-dark,
.offcanvas .btn-primary,
.offcanvas .btn-dark,
.sc-checkout .bx-soa-cart-total-button-container .btn,
.about .ab-btn,
.sc2026-page .btn-outline-primary,
.sc2026-page .btn-outline-secondary,
.sc2026-page .btn-outline-dark,
.sc-added-more,
.sc-addr-cancel,
.about .ab-btn-line,
.sc-cart .promo-apply{--btn-h:48px;min-height:48px;font-size:15px}
.sc-checkout .btn-default,
.sc-checkout .btn-primary,
.sc-checkout .btn-lg,
.sc-checkout .bx-soa-editstep{--btn-h:48px;min-height:48px;font-size:15px}

/* ==========================================================================
   10. КАТАЛОГ: фильтр и список

   Разметку фильтра даёт компонент на бутстраповских классах — правим
   только габариты строк, чтобы в них попадал палец. Ширину и структуру
   не трогаем: чекбоксы плавающие (float + отрицательный margin), и
   смена display их разложит.
   ========================================================================== */
main.page-wrapper .accordion-button{min-height:48px;font-size:16px}
main.page-wrapper .form-check{min-height:44px;padding-top:8px;padding-bottom:8px}
main.page-wrapper .form-check-label{font-size:16px;line-height:1.25}
/* catalog.css держит крошки на 15*--u ≈ 10,5px. Вес (0,2,1) — как у
   main.page-wrapper [class*="breadcrumb"] там же. */
main.page-wrapper [class*="breadcrumb"]{font-size:13px}

/* ---------- Ряд сортировки над выдачей ----------
   Здесь ряд выпадал сильнее всего, и причина — рассогласование коробки и
   переменной. Кнопки ряда — это .pbtn-line / .pbtn-green, а правило выше
   в этом файле даёт всему набору min-height:48px. Свою высоту ряд задаёт
   переменной (--btn-h:40 · --u ≈ 28px, catalog-sort.css §1), и на планшете
   коробка становилась 48px, а колпачки и линии по-прежнему считались от
   28: картинка боковины тянется по РЕАЛЬНОЙ высоте вместе с обводкой,
   а линии между ними — по переменной. Итог: концы вдвое толще середины
   и подпись в 10,5px внутри кнопки 48px.

   Поэтому коробка здесь просто следует за переменной. Своего числа роста
   в этом файле нет: ряд обязан быть ровно того роста, что чипсы активного
   фильтра в той же колонке, а чипсы растут до 44px не по ширине, а по
   способу ввода — @media (pointer:coarse) в catalog.css. Тот же блок для
   ряда стоит в catalog-sort.css §1.2. Итог на планшетной ширине: с мышью
   ряд и чипсы по 40 · --u (28px), на сенсорном экране — оба по 44px.
   Вес (0,2,0) против (0,1,0) у набора .pbtn-* выше: перебиваем
   специфичностью, порядок подключения ни при чём. */
.sc-sort .sc-sort-i{min-height:var(--btn-h)}

/* Выбор фасовки на детальной карточке компонента (не наш .pw):
   9*--u сверху и снизу — это 6px, строка выходит 28px.
   !important здесь вынужденный: в catalog.css у этого правила своё
   !important на padding и border, а перебить !important можно только
   !important — специфичность тут не поможет. */
.product-detail-scu-item-text{min-height:44px !important;
  display:inline-flex !important;align-items:center;
  padding:0 22px !important;font-size:15px !important}

/* ==========================================================================
   11. ПОДВАЛ

   Три колонки от правила ≤1200 в site.css — при 682–975px это верно,
   ломать нечего. Мелочи: реквизиты 10px и ссылки строками по 24px.
   ========================================================================== */
.ft-in{gap:24px;padding:52px 28px 0}
.ft-legal{padding:24px 28px 0;font-size:12px;gap:6px 32px}
.ft-tel a{font-size:18px;margin-bottom:16px}
/* Ссылки разделов — под палец. margin обнуляем, высоту даёт padding:
   13px + 13px + строка 17px ≈ 43px. */
.ft-col.c1 a,
.ft-col.c2 a{padding:13px 0;margin-bottom:0}


  /* ---------- «Способ получения»: панель описания ----------
     Та же беда, что на телефоне (см. mobile/checkout.css): под списком
     служб доставки Битрикс печатает панель с пересказом выбранной —
     логотип, абзац «Доставка осуществляется…», «Стоимость», «Срок».
     На планшете список встаёт в два столбца и занимает пол-экрана, а
     панель добавляет к нему ещё столько же. Гасим пересказ, оставляя
     дополнительные услуги доставки: это живые поля, их прятать нельзя.
     Идентификатор в селекторе перебивает site.css:2368 с отступом. */
  .sc-checkout #bx-soa-delivery .bx-soa-pp-desc-container,
  .sc-checkout #bx-soa-pickup .bx-soa-pp-desc-container{
    background:none;padding:0;margin:0;border-radius:0}
  .sc-checkout #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company,
  .sc-checkout #bx-soa-pickup .bx-soa-pp-desc-container .bx-soa-pp-company{
    display:block;background:none;border:0;box-shadow:none;padding:0;margin:0;min-height:0}
  .sc-checkout #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company-subTitle,
  .sc-checkout #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company-logo,
  .sc-checkout #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company-desc,
  .sc-checkout #bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-list,
  .sc-checkout #bx-soa-pickup .bx-soa-pp-desc-container .bx-soa-pp-company-subTitle,
  .sc-checkout #bx-soa-pickup .bx-soa-pp-desc-container .bx-soa-pp-company-logo,
  .sc-checkout #bx-soa-pickup .bx-soa-pp-desc-container .bx-soa-pp-company-desc,
  .sc-checkout #bx-soa-pickup .bx-soa-pp-desc-container .bx-soa-pp-list{display:none}
}


/* ==========================================================================
   УЗКИЙ КРАЙ ДИАПАЗОНА (768–899px)

   Отдельным блоком то, чему не хватает ширины уже к 900: карточки
   результата теста при двух колонках получают по 333px, из которых 118
   занимает снимок — под название с описанием остаётся 197px.
   Условие по высоте — то же, что и выше: телефон набок сюда не должен
   попадать.
   ========================================================================== */
@media (min-width:768px) and (max-width:899px) and (min-height:521px){
  /* вес (0,1,0) — как у .qr-grid при ≥760 в site.css */
  .qr-grid{grid-template-columns:1fr}
}