/* ========================================================================== Serikov Coffee 2026 — КОРЗИНА на телефоне Разметку /public/basket/index.php не трогаем: на десктопе позиция — это строка таблицы из пяти колонок (отметка, фото, название, цена, счётчик), и на 375px она сплющивается в кашу. Здесь та же разметка переставляется гридом в карточку: ┌────────┬──────────────────────┬───┐ │ фото │ название │ ☑ │ ← отметка в правом углу │ 72×72 │ плашки свойств │ │ │ ├──────────────────────┴───┤ │ │ цена, под ней «за 1 шт» │ ├────────┴──────────────────────────┤ │ [− 1 +] шт удалить │ └───────────────────────────────────┘ Ничего не прячем и порядок в DOM не меняем — только раскладку. Единицы. На 375px --u и --d упираются в свой минимум (0,70 и 0,68px), поэтому все размеры из site.css вроде calc(16 * var(--u)) дают 11px и мельче. В этом файле размеры пишем явными пикселями — так требует мобильный слой sc2026. Кнопки, поля и счётчик рисуются фирменной формой со скосом (BRAND-RULES §3.1): у кнопок это картинки-боковины в background, у полей и счётчика — border-image. И там, и там геометрия считается от --btn-h, поэтому высоту меняем через эту переменную, а не через height, — иначе скос разъедется относительно рамки. ========================================================================== */ /* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок. Условие дословно то же, что в остальных файлах mobile/. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ /* ---------- поле страницы и коробки ---------- Ширину строки задаёт .container темы (40 * --d ≈ 27px по краям), .mac на этой странице обнулён правилом .container > .sc2026-page .mac. Внутри коробки оставляем 12px по бокам: карточке товара нужна каждая точка ширины под название в две строки. */ .sc-cart .page-head{padding:10px 0 14px} /* Одна колонка. Правило @media(min-width:1000px) в site.css раскладывает сводку сбоку и формально попадает в наш второй диапазон (1000–1023px при высоте до 520) — перебиваем, чтобы такой экран не получил десктопную раскладку в 500px шириной. */ .sc-cart .cart-grid{grid-template-columns:1fr;gap:12px;padding-bottom:20px} .sc-cart .cart-box{padding:14px 12px;border-radius:18px} /* ---------- шапка списка ---------- «1 товар в корзине» — заголовок, «Выбрать все» и «Удалить выбранные» — действия строкой ниже. Разрешаем перенос: при длинном числе товаров («12 товаров в корзине») две подписи по 13px в 320px не помещаются. */ .sc-cart .cart-count{font-size:15px;line-height:1.3} .sc-cart .cart-tools{flex-wrap:wrap;gap:0 14px; margin-top:2px;padding-bottom:4px} /* Подпись у галочки: базовые 14 * --u дают 9,8px — нечитаемо. */ .sc-cart .cart-check{font-size:14px;gap:10px} /* Действия мельче заголовка, но тап-цель у обоих полные 44px. */ .sc-cart .cart-tools .cart-check{font-size:13px;min-height:44px} .sc-cart .cart-drop{display:inline-flex;align-items:center; font-size:13px;min-height:44px;padding:0 2px} /* Кнопка: фокус с клавиатуры — свечение по буквам, без прямоугольной обводки (правило «без обводки», BRAND-RULES §3.2). */ .sc-cart .cart-drop:focus-visible{outline:none; filter:drop-shadow(0 0 3px var(--green-brand))} /* Сама галочка. В site.css её размер и «птичка» посчитаны в --u (22 * --u = 15px), поэтому пересчитываем и коробку, и галочку — иначе птичка вылезет за рамку. */ .sc-cart .cart-check input{width:22px;height:22px;border-radius:6px} .sc-cart .cart-check input:checked::after{ left:7px;top:3px;width:6px;height:11px;border-width:0 2.4px 2.4px 0} /* ---------- позиция как карточка ---------- */ .sc-cart .ci{ grid-template-columns:72px 1fr auto; grid-template-areas: "ph body pick" "ph price price" "qty qty qty"; gap:8px 10px; align-items:start; padding:14px 0} .sc-cart .ci .ph{grid-area:ph;align-self:start; width:72px;height:72px;padding:6px;border-radius:14px} /* min-width:0 обязателен: без него длинное слово в названии распирает колонку 1fr, и страница уезжает вбок. */ .sc-cart .ci-body{grid-area:body;min-width:0} /* Название — максимум две строки. Обрезаем многоточием, полное имя остаётся ссылкой на карточку товара. */ .sc-cart .ci h2{font-size:15px;line-height:1.28; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;overflow-wrap:anywhere} /* Контур фокуса уводим ВНУТРЬ бокса: overflow:hidden, без которого не работает -webkit-line-clamp выше, срезает наружную рамку у ссылки внутри h2 (index.php:157), и при названии в две строки её не видно совсем. Своего фокуса у этих ссылок нет: site.css:1926-1927 задаёт .ci h2 a только цвет и :hover. Фото — та же ссылка (index.php:153), у неё уже есть border-radius:14px, контур ляжет по прямоугольнику. */ .sc-cart .ci h2 a:focus-visible, .sc-cart .ci .ph:focus-visible{outline:2px solid var(--green-brand); outline-offset:-2px} .sc-cart .ci .opts{gap:6px;margin-top:8px} .sc-cart .ci .opt{font-size:12px;line-height:1.2;padding:4px 9px; max-width:100%;overflow-wrap:anywhere} /* Цена уходит из правой колонки под свойства и выравнивается по левому краю текста: на телефоне колонки нет, и прижатая вправо цена читалась как чужая — она налезала на счётчик. */ .sc-cart .ci-price{grid-area:price;align-items:flex-start; text-align:left;gap:2px} .sc-cart .ci-price b{font-size:17px;line-height:1.2} .sc-cart .ci-price span{font-size:12px;line-height:1.3;white-space:normal} /* «цена за 1 шт — …» повторяет сумму, когда фасовка одна. Атрибут data-one ставит mobile/basket.js по текущему количеству. */ .sc-cart .ci[data-one] .ci-price span{display:none} /* Отметка выбора — в правый верхний угол карточки. Тап-цель 44×44: сама галочка 22px, остальное добирается padding'ом, а отрицательные margin'ы утапливают эту рамку в поля коробки, чтобы она не отъедала ширину у названия. */ .sc-cart .ci-pick{grid-area:pick;align-self:start; align-items:flex-start;justify-content:flex-end;gap:0; width:44px;height:44px;padding:6px 8px 0 0;margin:-8px -10px 0 0} /* ---------- нижняя строка: счётчик и «удалить» ---------- */ /* Перенос разрешён на случай самых узких экранов (320px): если «удалить» не влезает, оно уходит на свою строку, а не сжимает счётчик. */ .sc-cart .ci-qty{grid-area:qty;flex-direction:row;align-items:center; flex-wrap:wrap;gap:8px;margin-top:2px} /* Счётчик — 40px в высоту; от --btn-h считается и ширина боковин фирменной рамки, поэтому меняем именно её. flex:none — рамка рисуется картинкой и от сжатия скос поехал бы. */ .sc-cart .qty{--btn-h:40px;height:40px;flex:none} .sc-cart .qty button{width:40px;min-width:40px;height:40px;font-size:20px} /* Фокус с клавиатуры — свечение по знаку, без прямоугольной обводки внутри фирменной рамки счётчика (правило «без обводки», §3.2). */ .sc-cart .qty button:focus-visible{outline:none; filter:drop-shadow(0 0 3px var(--green-brand))} .sc-cart .qty span{min-width:26px;font-size:15px} .sc-cart .qty-unit{font-size:12px} /* «удалить» — текстовая ссылка у правого края. margin-left:auto отделяет её от группы счётчика, 44px — тап-цель. Цвет темнее исходного #9a9a95: на телефоне подпись 13px с таким контрастом не читается. */ .sc-cart .ci .del{margin-left:auto;display:inline-flex;align-items:center; min-height:44px;padding:0 2px;font-size:13px;color:#6e6e68; text-decoration:underline;text-underline-offset:2px} /* «удалить» — кнопка: фокус с клавиатуры свечением по буквам, без прямоугольной обводки (правило «без обводки», §3.2). */ .sc-cart .ci .del:focus-visible{outline:none; filter:drop-shadow(0 0 3px var(--green-brand))} /* ---------- сводка ---------- Липкость снимаем: на телефоне сводка идёт последней в потоке, липнуть ей не к чему, а top в 96 * --u прыгал под шапкой при прокрутке. */ .sc-cart .total{position:static;padding:16px 14px;border-radius:18px} .sc-cart .cart-company{min-height:48px;padding:12px 14px; border-radius:14px;margin-bottom:16px} /* ---------- промокод ---------- Поле ровно 16px: при меньшем кегле iOS зумит страницу на фокусе и потом не возвращает масштаб. Высота 48px — тап-цель и место под скос. Поле и кнопка открываются галочкой «Есть промокод» (21.09.2026). Подпись держим вровень с «Я юридическое лицо» выше: обе строки одного кегля и одной галочкой, её размер задан выше вместе с галочками корзины. */ .sc-cart .promo-check + .promo-row{margin-top:10px} .sc-cart .promo-row{gap:10px} .sc-cart .promo-row input{--btn-h:48px;font-size:16px} .sc-cart .promo-apply{--btn-h:48px;width:100%;font-size:15px} .sc-cart .promo-msg{margin-top:8px;font-size:13px;line-height:1.35} /* Принятый промокод: код, скидка и «убрать» в одну строку с переносом. */ .sc-cart .promo-on{display:flex;flex-wrap:wrap;align-items:center; gap:4px 10px;font-size:14px} .sc-cart .promo-off{display:inline-flex;align-items:center; min-height:44px;padding:0 2px;font-size:13px} /* ---------- итог ---------- */ .sc-cart .tl-sum{margin-top:16px;flex-wrap:nowrap} .sc-cart .tl-sum span{font-size:15px} .sc-cart .tl-sum b{font-size:22px;white-space:nowrap} /* Отдельной строки «Товары:» над итогом больше нет (21.09.2026): сумма до скидки стоит зачёркнутой рядом с итогом, как во всплывашке «товар в корзине». Сторож для атрибута hidden остаётся — им прячется сама зачёркнутая цена, когда корзина не подешевела, а авторское правило сильнее браузерного [hidden]{display:none}. */ .sc-cart .tl-sum[hidden], .sc-cart .tl-was[hidden]{display:none} /* Старая цена мельче итога: два числа в одной строке не должны спорить. */ .sc-cart .tl-was{font-size:15px} .sc-cart .tl-price{gap:2px 10px} /* Строка скидки: плашки нет, есть подпись и зелёная сумма. */ .sc-cart .tl-cut{gap:10px;margin-bottom:10px} .sc-cart .tl-cut span{font-size:13px} .sc-cart .tl-cut b{font-size:16px} .sc-cart .tl-cut-note{margin-bottom:10px;font-size:13px} /* Кнопка на всю ширину. Высота задаётся через --btn-h: от неё считается ширина боковин со скосом (--cap), поэтому height здесь не годится. */ .sc-cart .cart-go{--btn-h:52px;margin-top:16px;font-size:16px} .sc-cart .total .note{margin-top:12px;font-size:12px} /* ---------- пустая корзина ---------- Разметка страницы: заголовок «Корзина» сверху (.page-head), текст и кнопка в .cart-empty. Растягиваем колонку, чтобы кнопка была во всю ширину, а не по длине подписи. */ .sc-cart .cart-empty{align-items:stretch;gap:14px;padding:12px 0 24px} .sc-cart .cart-empty p{font-size:15px;line-height:1.45} .sc-cart .cart-empty .pbtn{--btn-h:52px;width:100%;font-size:16px} /* Пустая корзина штатного компонента sale.basket.basket (empty.php). На /basket/ она не выводится — страница собирает список сама, — но шаблон живой, и если компонент когда-нибудь встанет на страницу, пусть выглядит так же: по центру, с читаемым кеглем. Картинка там с пустым src и на телефоне показывалась бы значком «битое изображение». */ .bx-sbb-empty-cart-container{padding:24px 0 32px;text-align:center} .bx-sbb-empty-cart-image img[src=""]{display:none} .bx-sbb-empty-cart-text{font-family:var(--font);font-weight:900; font-size:18px;line-height:1.25;color:var(--ink)} .bx-sbb-empty-cart-desc{margin-top:10px;font-size:14px;line-height:1.45; color:var(--ink-soft)} }