/* ========================================================================== Serikov Coffee 2026 — ОФОРМЛЕНИЕ ЗАКАЗА на телефоне Разметку не трогаем: страницу рисует sale.order.ajax, он перерисовывает свои секции на каждом шаге, и любая вставка в них не пережила бы. Здесь только раскладка и размеры того, что компонент уже выводит. Что чинится: 1. «Способ получения» занимал два экрана: сверху большая карточка с описанием выбранной службы (логотип, абзац, «Стоимость», «Срок»), под ней — список тех же служб кнопками. На телефоне описание сворачиваем, остаётся список; срок выбранной службы дописывает mobile/checkout.js строкой внутри самой кнопки (.mch-dmeta), цена и так стоит справа. 2. Кнопка службы была разрежена: логотип, под ним цена, под ней название (высота 104 * --u). Собираем её гридом в одну строку 64px: ┌──────┬───────────────────────┬─────────┐ │ лого │ название 14px │ цена │ │40×40 │ срок 12px │ 15px │ └──────┴───────────────────────┴─────────┘ Цена лежит ВНУТРИ контейнера логотипа (так её кладёт order_ajax.js), поэтому контейнеру даём display:contents — его дети становятся ячейками грида самой кнопки, и цену можно поставить в третью колонку. 3. Поля, кнопки и тап-цели доводятся до 44–48px, шрифт полей — 16px: меньше 16px iOS зумит страницу при фокусе. Единицы. На 375px --u и --d упираются в минимум ≈0,70px, поэтому размеры из site.css вроде calc(48 * var(--u)) дают 34px. В этом файле пишем явные пиксели — так требует мобильный слой sc2026. Форма кнопок и полей (BRAND-RULES §3.1) считается от --btn-h: боковины со скосом — картинки в background, их геометрия завязана на высоту. Поэтому высоту меняем через --btn-h, а не через height, иначе скос разъедется относительно середины. ========================================================================== */ /* Строку со сроком доставки дописывает скрипт только на телефоне. Если она осталась в разметке после смены ширины окна — десктоп: спрятать. */ .mch-dmeta{display:none} /* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок. Условие дословно то же, что в остальных файлах mobile/. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ /* ---------- поле страницы, заголовок, коробки шагов ---------- */ /* Поле по краям даёт .mac (16px при ≤1100). Обёртка шагов #bx-soa-order — бутстраповская .row: у неё отрицательные поля колонок, из-за которых карточки вылезали за это поле. Гридом её уже сделал site.css, осталось снять поля. */ .sc-checkout #bx-soa-order{margin:0;gap:14px} .sc-checkout .sec-title{font-size:22px;line-height:1.1;margin-bottom:14px} .sc-checkout .bx-soa{gap:12px} .sc-checkout .bx-soa-section{border-radius:20px} .sc-checkout .bx-soa-section-title-container{padding:14px 14px 0} .sc-checkout .bx-soa-section-title{font-size:17px;line-height:1.15} .sc-checkout .bx-soa-section-content{padding:12px 14px 16px} /* ---------- «Способ получения» и «Способ оплаты»: список ---------- */ /* Обёртка списка и панели описания — тоже .row: на телефоне ставим её колонкой сами, чтобы поля колонок не съедали ширину. Порядок задан в site.css (список первым, описание вторым) и здесь не меняется. */ .sc-checkout .bx-soa-pp.row{display:flex;flex-direction:column;gap:12px;margin:0} .sc-checkout .bx-soa-pp.row > *{width:auto;max-width:none;flex:none;padding:0;margin:0} /* Карточки лежат в одном общем .row внутри контейнера, и site.css делает его блочным — кнопки слипались боками. Раздаём им зазор гридом. */ .sc-checkout .bx-soa-pp-item-container{gap:10px} .sc-checkout .bx-soa-pp-item-container > .row{display:grid;gap:10px;margin:0} /* Телефон набок — это 812px в ширину, то есть шире 700px, и медиазапрос site.css:1797 отдаёт карточке половину строки. Доля там записана как flex и max-width с !important, поэтому в одной колонке грида кнопка обрезалась до половины с пустотой справа. Вес селектора тот же (0,3,0), перебить можно только таким же !important. Ширину задаёт грид выше. */ .sc-checkout .bx-soa-pp-item-container > .row > .bx-soa-pp-company{ max-width:none!important;flex:none!important} /* Сама кнопка способа: три колонки, две строки (вторая — под срок). Селектор с .bx-soa-pp-item-container (три класса) перебивает правила site.css для .sc-checkout .bx-soa-pp-company (два класса) и не задевает такую же карточку внутри панели описания. */ .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company{ display:grid;grid-template-columns:40px minmax(0,1fr) auto; grid-template-rows:auto auto;align-content:center;align-items:center; column-gap:12px;row-gap:2px; min-height:64px;padding:10px 12px;border-radius:16px; /* Рамка у всех 2px: выбранная отличается цветом, а не толщиной — иначе при выборе карточка дёргалась бы на пиксель. */ border:2px solid var(--tile-line)} .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company.bx-selected{ border-color:var(--green-brand);box-shadow:0 0 0 2px rgba(0,114,59,.12)} /* Контейнер логотипа растворяем: его дети (логотип и цена) должны стать ячейками грида кнопки. display у него в site.css:2034 объявлен с !important ради коробочной темы — перебить можно только тем же. */ .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company-graf-container{ display:contents!important;margin:0!important} /* Логотип — квадрат 40×40 слева на обе строки. Размер в site.css:2296 тоже стоит с !important. */ .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company-image{ grid-column:1;grid-row:1 / span 2;align-self:center; width:40px!important;height:40px!important; background-position:center;background-size:contain} /* У части служб логотип приходит картинкой, а не фоном. */ .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company-graf-container img{ grid-column:1;grid-row:1 / span 2;align-self:center; width:40px!important;height:40px!important; max-width:40px!important;max-height:40px!important; object-fit:contain;padding:0!important;border:0!important;background:none!important} .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company-smalltitle{ grid-column:2;grid-row:1;align-self:center; font-size:14px;line-height:1.25;font-weight:700} /* Срок доставки выбранной службы — вписывает mobile/checkout.js. */ .sc-checkout .bx-soa-pp-item-container .mch-dmeta{ display:block;grid-column:2;grid-row:2;align-self:center; font-size:12px;line-height:1.25;color:var(--ink-soft)} /* Цена справа, на обе строки. margin-left:auto в site.css:2040 стоит с !important — заменяем его на нулевой, положение задаёт грид. */ .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-delivery-cost, .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-price{ grid-column:3;grid-row:1 / span 2;align-self:center;justify-self:end; margin:0!important;font-size:15px;line-height:1.2;text-align:right; white-space:nowrap} /* ---------- «Способ получения»: панель описания ---------- */ /* Описание выбранной службы дублирует список: логотип, название, абзац «Доставка осуществляется…», «Стоимость», «Срок доставки». Всё это уже видно в самой кнопке, поэтому на телефоне гасим — кроме дополнительных услуг доставки: это живые поля, их прятать нельзя. Идентификатор в селекторе перебивает и правило 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} /* Панель описания способа ОПЛАТЫ не сворачиваем: там бывает не пересказ кнопки, а условия («вышлем счёт на почту»). Только ужимаем. */ .sc-checkout #bx-soa-paysystem .bx-soa-pp-desc-container{ padding:12px;border-radius:16px;font-size:13px;line-height:1.4} .sc-checkout #bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company{ border:0;background:none;box-shadow:none;padding:0;margin:0;min-height:0;display:block} /* ---------- «Адрес доставки» ---------- */ .sc-checkout .bx-soa .sc-addr{padding:14px;border-radius:20px} .sc-checkout .sc-addr-head{gap:10px} .sc-checkout .sc-addr-head h2{font-size:17px;line-height:1.15} /* Переключатель «Доставка / Самовывоз» — во всю ширину двумя равными половинами. Полукнопка на 375px выходит ≈163px в ширину и 44px в высоту, палец попадает наверняка. */ .sc-checkout .sc-addr .sc-addr-mode, .sc-checkout .sc-addr-modal .sc-addr-mode{display:grid;grid-template-columns:1fr 1fr; gap:8px;width:100%} .sc-checkout .sc-addr .sc-addr-mode button, .sc-checkout .sc-addr-modal .sc-addr-mode button{min-height:44px;padding:0 10px; justify-content:center;gap:8px;font-size:14px} .sc-checkout .sc-addr .sc-addr-mode button .dot, .sc-checkout .sc-addr-modal .sc-addr-mode button .dot{width:16px;height:16px} /* Строка адреса: значок и текст одной строкой, «Изменить» — отдельной, во всю ширину. Кнопка в общей строке ужимала адрес до двух слов, а тап-цель у неё была 33px. */ .sc-checkout .sc-addr-row{display:grid;grid-template-columns:auto minmax(0,1fr); gap:10px 12px;margin-top:12px} .sc-checkout .sc-addr-pin{grid-column:1;grid-row:1;width:38px;height:38px} .sc-checkout .sc-addr-pin svg{width:18px;height:18px} .sc-checkout .sc-addr-text{grid-column:2;grid-row:1} .sc-checkout .sc-addr-text b{font-size:15px;line-height:1.3} .sc-checkout .sc-addr-text span{font-size:12.5px;line-height:1.35;margin-top:3px} .sc-checkout .sc-addr-edit{grid-column:1 / -1;grid-row:2; width:100%;min-height:44px;padding:0 16px;border-radius:14px;font-size:14px} /* Фокус с клавиатуры — свечение по силуэту, без прямоугольной обводки (правило «без обводки», BRAND-RULES §3.2). */ .sc-checkout .sc-addr-edit:focus-visible{outline:none; filter:drop-shadow(0 0 3px var(--green-brand))} /* ---------- Окно выбора адреса на карте ---------- */ /* На телефоне окно во весь экран: карта сверху, форма под ней с прокруткой. В коробочном виде окно считало высоту от --u (≈504px) и обе части оказывались обрезанными. */ .sc-checkout .sc-addr-modal{padding:0;align-items:stretch;justify-content:flex-start} .sc-checkout .sc-addr-box{width:100%;max-width:none;height:100%;max-height:none; border-radius:0;box-shadow:none; grid-template-columns:100%;grid-template-rows:minmax(150px,32vh) minmax(0,1fr)} .sc-checkout .sc-addr-map{grid-row:1;min-height:0} /* Своя минимальная высота карты (320 * --u) не давала строке грида сжаться и выталкивала форму за экран. */ .sc-checkout .sc-addr-map iframe, .sc-checkout .sc-addr-map #scAddrMap{height:100%;min-height:0} .sc-checkout .sc-addr-x{top:10px;right:10px;width:44px;height:44px} /* Легенда зон на телефоне: карта здесь всего треть экрана, поэтому подпись прижата к низу и набрана мельче. Совсем убирать её нельзя — это единственное место, где покупатель видит, докуда мы возим. */ .sc-checkout .sc-addr-zones{left:8px;right:8px;bottom:30px; border-radius:12px;padding:8px 10px} .sc-checkout .sc-addr-zone-row{gap:6px;margin-bottom:3px;font-size:11.5px;line-height:1.3} .sc-checkout .sc-addr-zone-row .dot{width:9px;height:9px;border-radius:3px;margin-top:3px} .sc-checkout .sc-addr-form{grid-row:2;min-height:0;overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px))} .sc-checkout .sc-addr-form h3{font-size:19px;margin:14px 0 10px} .sc-checkout .sc-addr-note{font-size:13px;line-height:1.35;margin-top:12px} .sc-checkout .sc-addr-sub{font-size:15px} /* Поля окна и поля шага «Получатель» рисуются одной фигурой, её высота считается от --btn-h. 16px — порог, ниже которого iOS зумит страницу при фокусе, и обратно она уже не отъезжает. */ .sc-checkout .sc-addr .sc-field input, .sc-checkout .sc-addr-modal .sc-field input, .sc-checkout .bx-soa-section input.form-control, .sc-checkout .bx-soa-section select.form-control{ --btn-h:48px;font-size:16px;padding:0 16px} /* У списка справа нарисована стрелка — оставляем ей место, иначе значение налезает на неё. */ .sc-checkout .bx-soa-section select.form-control{padding-right:38px} .sc-checkout .sc-addr-modal .sc-field textarea, .sc-checkout .bx-soa-section textarea.form-control{ font-size:16px;min-height:88px} /* Подпись поля — тоже