/* ========================================================================== МОБИЛЬНАЯ ВЕРСИЯ — карточки товара В ОДНУ КОЛОНКУ ВО ВСЮ ШИРИНУ (≤767px) Где применяется: «Хиты обжарки» на главной (.pgrid), список раздела каталога, поиск и «похожие» — везде, где шаблон catalog.item/sc2026.card печатает ячейки .pgrid-cell подряд. Контейнер списка каталога лежит на сервере (шаблон sc.catalog.section в репозитории отсутствует), поэтому сетку задаём не по имени класса, а по факту: «элемент, у которого две ячейки .pgrid-cell стоят рядом». Одиночная ячейка (бутстраповская колонка-обёртка) под это правило не попадает и остаётся как была. ПОЧЕМУ ФАЙЛ СТАЛ ВТРОЕ КОРОЧЕ. До этого карточки шли в две колонки, карточка была 154 px, а её «пиксель» --cp = 154/325 ≈ 0,47 — все размеры из макета выходили вдвое мельче нормы (название 10 px, цена 11 px). Поэтому почти всё внутри карточки было переписано явными пикселями: фото 128 px, кегли 13–15, шкалы столбиком, кнопка «В корзину» во всю ширину второй строкой. Теперь колонка одна, и карточка занимает всю ширину страницы: на 375 px это 375 − 2 · 27,2 = 320,6 px, то есть --cp = 320,6/325 = 0,9865 — практически 1 : 1 с макетом (на десктопе карточка 274 px и --cp ≈ 0,84, то есть на телефоне она даже КРУПНЕЕ десктопной). Значит все прежние «сжимающие» правила проигрывают тому, что и так написано в site.css, и их место — в удалённых строках, а не в новом слое поверх. Оставлено ровно то, чего в site.css быть не может: пальцевые тап-цели, снятие залипающего :hover, нижний порог кегля для узких телефонов и шапка секции «Хиты обжарки» (к карточкам отношения не имеет). ГДЕ ОДНА КОЛОНКА КОНЧАЕТСЯ. Полная ширина хороша, пока карточка около 321 px. С 620 px карточка переваливает за 565 (--cp 1,74), к 767 — за 712 (--cp 2,19), вдвое крупнее десктопа. Поэтому 620–767 в портрете возвращены к двум колонкам — ровно к тому, что там держал site.css:518. Телефон набок (высота ≤520) в это исключение не попадает: там своё слово говорит mobile/landscape.css. ЧТО ОБЕЩАНО СОСЕДУ. mobile/landscape.css:335 меняет высоту кнопки фасовки одной переменной --pw-h — она объявлена здесь, в блоке кнопок фасовок, и от неё же считаются колпачок и линии контура. Убирать её нельзя, не поправив landscape.css. Обратное направление — правила, которые альбому вредны (оборот CVA в потоке), — заперто в отдельном @media с min-height:521px внутри этого файла. С 17.09.2026 В ПОРТРЕТЕ ЭТИ ЧИСЛА НЕ ДЕЙСТВУЮТ: заказчик попросил карточку короче, без шкал и оценки CVA, с помолом в ряду фасовок, и размеры внутри карточки заданы пикселями по макету 52:4469 — раздел «КОМПАКТНАЯ КАРТОЧКА» в конце файла. Расчёт ниже остаётся справкой о том, что даёт --cp набок и там, где компактные правила не заданы. Что получалось на 375 px (--cp = 0,9865, поля карточки 20 · --cp ≈ 20): карточка 320,6 · рабочая ширина внутри 281,2 фото 285 × 258 · --cp = 281 × 255 название 21 · --cp ≈ 20,7 описание 14 · --cp ≈ 13,8 шкала 17 · --cp ≈ 16,8 цена 24 · --cp ≈ 23,7 кнопка фасовки 40 · --cp ≈ 39,5 круглые кнопки 53 × 52 · --cp ≈ 52 × 51 Живой контур рисует wavy.js (.pcard: mode fill, radius 36, stroke 4) по ResizeObserver — под новую ширину перерисуется сам. Режима clip у карточки нет, значит содержимое он не обрезает в принципе. Размах гуляния — min(w,h) · 0,018 · 0,35, при ширине 320 это ≈ 2 px внутрь от линии, которая сама отступает на stroke/2 = 2 px: внутренняя кромка не заходит глубже 4 px от края карточки при полях 20 px. Углы: радиус 36 при ширине 320 срезает вдвое слабее, чем при 154, — на горизонтали левого поля (20 px от края) дуга стоит всего в 5 px от верха, а текст начинается в 20. Поэтому собственные поля карточке больше не нужны, работает site.css. Специфичность: файл грузится последним из mobile/*.css (glob по алфавиту), но в site.css почти все правила карточки без медиазапросов, поэтому селекторы повторены один в один или усилены на один класс (.pcard …). !important нет. Соседний слой: mobile/landscape.css (телефон набок) грузится РАНЬШЕ этого файла (l < p) и перебивает его правила селекторами с `body`. Он ставит три колонки, своё фото и шкалы в строку. Всё, что здесь удалено, он и так перебивал — поэтому удаление его не ломает; а то, что здесь осталось, написано так, чтобы его `body`-правила по-прежнему выигрывали. ========================================================================== */ /* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок (ширина до планшетной, высота меньше 520px — у планшета в альбоме высота 768 и больше, он сюда не попадает). Условие одно и то же во всех файлах mobile/ и в их скриптах — менять только всё сразу. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ /* ---- сетка: одна колонка ------------------------------------------- */ /* Главная. Колонки задавать ПРИХОДИТСЯ: site.css:518 держит две колонки в диапазоне 620–1039 px, и без этого правила одна колонка не дожила бы до 620. Ниже (см. «широкий портрет») две колонки на 620–767 возвращаются обратно — там одна карточка была бы вдвое крупнее макета. Промежуток 16 px вместо 20 из site.css:516. */ .pgrid{grid-template-columns:minmax(0,1fr);gap:16px} /* Остальные списки (каталог, поиск, «похожие»). Берём контейнер, в котором две ячейки стоят соседями: обёртка вокруг одной карточки под это не подходит и не пострадает. Отрицательные поля бутстраповского .row заодно гасим — иначе сетка станет на 24 px шире колонки и даст горизонтальную прокрутку. */ main.page-wrapper *:has(> .pgrid-cell + .pgrid-cell){ display:grid;grid-template-columns:minmax(0,1fr);gap:16px} main.page-wrapper .row:has(> .pgrid-cell + .pgrid-cell){ margin-left:0;margin-right:0} /* И собственные поля ячейки. В разделах каталога .pgrid-cell — это колонка темы, и она несёт бутстраповский жёлоб (padding: 0 calc(var(--bs-gutter-x) * .5), то есть по 12 px с каждой стороны). Из-за него карточка была уже колонки, а --cp считается от ширины ЯЧЕЙКИ, а не карточки: внутренности рисовались бы под 12 px шире, чем есть места. Промежуток между карточками целиком даёт gap. */ main.page-wrapper *:has(> .pgrid-cell + .pgrid-cell) > .pgrid-cell{ padding-left:0;padding-right:0; /* И ширину. Контейнер каталога — бутстраповский .row с классами row-cols-1 / row-cols-sm-2 / row-cols-md-3: они ставят ячейке width:33.333% (или 50%). В портрете работал row-cols-1 (100%) и беды не было, а на телефоне набок включался row-cols-md-3, и в дорожке шириной 387px карточка сжималась до 129px. В сетке ширину задаёт дорожка, поэтому ячейке она не нужна. */ width:auto;max-width:none} /* Всё, что лежит в том же контейнере помимо карточек (кнопка «показать ещё», служебные узлы компонента), занимает строку целиком. Проверено: при ОДНОЙ колонке правило действительно ничего не даёт (1 / -1 и есть единственная дорожка). Но оно живое в альбомной половине этого же медиазапроса: mobile/landscape.css ставит три колонки и в комментарии прямо ссылается на это правило — без него «показать ещё» встала бы в треть строки, оставив дыру. Поэтому оставлено, но переехало сюда с новым объяснением. */ main.page-wrapper *:has(> .pgrid-cell + .pgrid-cell) > :not(.pgrid-cell){ grid-column:1 / -1} /* Запасное значение --cp для браузеров без container queries (iOS < 16): там работает site.css:3231 .pcard{--cp:var(--u)} ≈ 0,70 px, и фото 285 · --cp ≈ 199 px было бы вдвое мельче места. При одной колонке ширина карточки = ширина страницы, делить на колонки и вычитать промежутки не нужно: 100vw минус поля страницы. Поле даёт .container темы — 40 · --d с каждой стороны (site.css:3797 на главной, catalog.css:9 на остальных страницах); --d в телефонном диапазоне всегда упирается в нижнюю границу 0,68 px, то есть 27,2 px, но пишем формулой, чтобы правило не разъехалось с site.css. Взят самый УЗКИЙ известный случай — главная (54,4 px полей). Если на какой-то странице к .container добавится ещё и .mac (16 px), карточка окажется уже, а --cp — крупнее места: подстрахованы max-width у фото ниже, остальное внутри карточки таких запасов не требует (см. расчёт в отчёте). Обратная ошибка хуже: занизив --cp, мы уронили бы описание и старую цену ниже 13 px. Правило заперто в @supports not, чтобы не спорить с site.css:3234 .pgrid-cell > .pcard{--cp:100cqw/325} (0,2,0): там, где container queries есть, всё считается само от ширины ячейки, и это единственно верный источник. mobile/landscape.css перебивает эту ветку своим `body .pcard` (0,1,1) — вес оставлен прежним (0,1,0). */ @supports not (container-type:inline-size){ .pcard{--cp:calc((100vw - 80 * var(--d)) / 325)} /* Единственное место, где промах запасного --cp виден сразу: фото задано шириной 285 · --cp и при завышенной единице вылезло бы за карточку. Вес (0,2,0) равен site.css, файл ниже. */ .pcard .pimg{max-width:100%} } /* ---- широкий портрет: 620–767 px — обратно две колонки --------------- Одна колонка хороша ровно там, где карточка получается около 321 px и --cp ≈ 1 (телефон 320–430). Дальше она не «крупная», а гигантская: карточка = ширина окна − 2 · 40 · --d, а --d в этом диапазоне уже упёрт в нижнюю границу 0,68 px, то есть поля постоянные 27,2 px. 767 px → карточка 712,6 → --cp = 2,19 (фото 625 × 566, название 46 px, цена 52,6, плашка «ХИТ» 88, кнопка фасовки 88); 700 px → карточка 645,6 → --cp = 1,99; 620 px → карточка 565,6 → --cp = 1,74. Это вдвое крупнее десктопа (--cp ≈ 0,84). Прокрутки нет — внутри всё считается долями карточки, — но вид сломан. Сюда попадают раскладной телефон в портрете и десктопный браузер, суженный до 700 px. Возвращаем то, что здесь и было до перехода на одну колонку: site.css:518 держал две колонки от 620 px. Границу берём ту же (620), чтобы ниже 620 поведение осталось ровно прежним, а не сдвинулось. Две колонки: (767 − 54,4 − 16) / 2 = 348,3 → --cp = 1,07; на 620 — 274,8 → --cp = 0,85, ровно десктопный масштаб. Нижняя граница высоты 521 px обязательна: телефон набок (≤520) — вотчина mobile/landscape.css, он ставит свои две колонки правилами с `body`, и мы в его половину медиазапроса не лезем. Специфичность: селекторы дословно повторяют написанные выше — .pgrid (0,1,0) и main.page-wrapper *:has(…) (0,3,1); равный вес, побеждает порядок строк. Правила landscape.css с `body` (0,1,1) и (0,3,2) по-прежнему тяжелее, но их диапазон с нашим не пересекается. */ @media (min-width:620px) and (min-height:521px){ .pgrid, main.page-wrapper *:has(> .pgrid-cell + .pgrid-cell){ grid-template-columns:repeat(2,minmax(0,1fr))} /* Запасной --cp для браузеров без container queries: он выше посчитан под карточку во всю ширину, здесь карточка вдвое уже. Формула та же, минус промежуток 16 px и делится на две колонки. Вес (0,1,0) равен правилу выше, файл читается сверху вниз — выигрывает это. */ @supports not (container-type:inline-size){ .pcard{--cp:calc((100vw - 80 * var(--d) - 16px) / 2 / 325)} } } /* ---- сама карточка ------------------------------------------------- */ /* Наведение на тапе залипает: палец «наводится» и карточка остаётся в hover до следующего касания. Ни одно из трёх правил в site.css не обёрнуто в @media(hover:hover), поэтому гасим все три: подъём (site.css:3241), тень (site.css:2004 — она рисует прежний прямоугольный силуэт вокруг живого контура, ровно поэтому .pcard и убрали из общего списка теней, см. комментарий site.css:1994) и увеличение фото на 6 % (site.css:3283) — раздутое фото подпирает края карточки. Селекторы повторены один в один: специфичность равная, файл грузится после site.css (header.php:220 → :235), !important не нужен. */ .pcard:hover{transform:none;box-shadow:none} .pcard:hover .pimg img{transform:none} /* ---- нижний порог кегля -------------------------------------------- Всё внутри карточки считается от --cp, а он падает вместе с шириной экрана. Мелкий текст (14 из макета) опускается ниже 13 px, когда карточка уже 302 px, то есть на экранах уже 356 px — это живые 320-е и часть 360-х. Ставим порог там, где он нужен, а не режем пропорцию целиком: на 375 px max() возвращает те же 13,8 px, что и site.css, и вид не меняется. Вес (0,2,0) равен site.css (.pcard .pdesc, .pcard .price-old, .pcard .pbouquet), файл грузится позже. */ .pcard .pdesc, .pcard .price-old, .pcard .pbouquet{font-size:max(13px, calc(14 * var(--cp)))} /* ---- шкал вкуса и оценки CVA на телефоне НЕТ ------------------------ Герман 17.09.2026: «убери все шкалы… и CVA тоже убери; карточки большие получились, точнее длинные». Коробка .pflip (product-card.php) — единственное место карточки, где печатаются шкалы «Кислотность / Горечь / Сладость», оборот с «Оценкой CVA» и букет. На десктопе оборот встаёт на место шкал при наведении, а на телефоне до этой правки стоял в потоке под ними (было правило .pflip-back{position:static}) — отсюда и длина: шкалы 3 строки плюс клякса оценки плюс букет в две строки, около 190 px из 688. Убираем коробку целиком, а не по частям: без шкал оборот с оценкой и букетом в наложении всплывал бы по касанию (packs.js ставит .is-flipped по pointerover, а он приходит и от пальца). Разметку не трогаем — на десктопе и на планшете всё на месте; вкус и оценка остаются на странице товара. Действует во всём телефонном слое, и в портрете, и набок: заказ был про телефон, а набок это тот же телефон. Правила про шкалы и оценку в mobile/landscape.css (.sc, .pcva) после этого ничего не рисуют. Вес (0,2,0) против (0,2,0)/(0,3,0) у .pflip в site.css — display там нигде не задан, спорить не с чем. В портрете с 17.09.2026 коробка возвращается ради букета (без шкал и оценки) — раздел «букет: вернулся» в конце файла. */ .pcard .pflip{display:none} /* ---- кнопки фасовки ------------------------------------------------- Здесь высота 40 · --cp и кегль 17 · --cp (как на десктопе); в портрете с 17.09.2026 их перебивает «КОМПАКТНАЯ КАРТОЧКА» в конце файла — 36 px и 15 px. Нужны три вещи. */ /* 1. Перенос. Две фасовки («250 г» и «1 кг») занимают ≈204 px из 281 рабочих, три — ≈294 и в строку не встают. У site.css:.pw переноса нет (flex по умолчанию nowrap), и третья кнопка вылезала бы за карточку. row-gap 14 px выбран под тап-области ниже: они выходят за кнопку на (44 − --pw-h) / 2, в портрете это 2,25 px с каждой стороны, в альбоме ноль — области соседних строк не наложатся. Здесь же живёт --pw-h, высота кнопки одним числом. Переменная нужна не нам: mobile/landscape.css:335 ставит `body .pcard .pw{--pw-h:44px}` и в комментарии ссылается на то, что вся геометрия кнопки считается от неё. Он грузится раньше нас и перебить нас уже не сможет (его вес (0,2,1) против нашего (0,2,0) — он и так выигрывает), а без объявления переменной его строка просто ничего не делала: site.css:3370 считает высоту от --cp напрямую. Возвращаем посредника — контракт снова рабочий, и в альбоме кнопка 44 px, как там и задумано, вместо 40 · 1,19 = 47,6. Вес (0,2,0) против (0,1,0) у site.css. */ .pcard .pw{flex-wrap:wrap;row-gap:14px;--pw-h:calc(40 * var(--cp))} /* 2. Геометрия кнопки от --pw-h. Числа site.css:3370–3386 привязаны к высоте 40 · --cp: колпачок 22,506 · --cp (это 0,56265 высоты) и толщина линии 2 · --cp (0,05 высоты). Если высоту задать переменной, а их оставить на --cp, в альбоме линии считались бы под кнопку 47,6, а колпачки нарисовались бы под 44 — контур разорвало бы. Поэтому пересчитываем их от --pw-h: в портрете --pw-h = 40 · --cp и числа выходят те же до знака, вид не меняется (BRAND-RULES §3.1 — форма со скосом остаётся пропорциональной). Заливку выбранной кнопки не трогаем: .pw button.on (0,2,1) считает фон от --cap, а --cap мы задаём. Наш background-size заперт в :not(.on) намеренно — вес (0,3,1) без него равнялся бы .on, и сплошная зелёная кнопка получила бы контурный набор из четырёх слоёв. Вес height/--cap: (0,2,1) против (0,1,1) у site.css. ДЛИНА ЛИНИЙ — от края до края выреза, calc(100% - 2 * --cap). Здесь стоял прежний вычет 0,8605 высоты: он считался под колпачок cap-line-green, у которого дуга не доходила до внутреннего края. С колпачком из набора (cap-out-green, card-actions.css) линия с этим вычетом вылезала бы за концы дуг заусенцами. Правило сейчас ничего не решает — card-actions.css держит те же слои весом (0,4,1) и побеждает, — но число правим, чтобы оно не вернуло старую кривизну, если веса когда-нибудь сойдутся. */ .pcard .pw button{height:var(--pw-h);--cap:calc(var(--pw-h) * 0.56265)} .pcard .pw button:not(.on){background-size:auto 100%,auto 100%, calc(100% - 2 * var(--cap)) calc(var(--pw-h) * 0.05), calc(100% - 2 * var(--cap)) calc(var(--pw-h) * 0.05)} /* 3. Тап-цель. В портрете кнопка ростом 39,5 px — для пальца мало. Растить её до 44 не станем: это макетная пропорция карточки, и на 375 px три фасовки такой высоты уже не встают в строку без переноса. Вместо этого прозрачная область нажатия ровно 44 px — или по кнопке, если она выше (в альбоме --pw-h = 44 и области совпадают). По горизонтали не расширяем: между кнопками 8 · --cp ≈ 8 px, области соседей наложились бы. */ .pcard .pw button{position:relative} .pcard .pw button::after{content:"";position:absolute;left:0;right:0; top:50%;height:max(44px, 100%);transform:translateY(-50%)} /* ---- цена и круглые кнопки ------------------------------------------ Раскладка десктопная и остаётся: цена слева, две кляксы справа. Проверено на 375 px — рабочая ширина 281,2; кнопки 2 × 52,3 плюс промежуток 7,9 = 112,5; на цену остаётся 158,8 px. Цена «4 300 ₸» кеглем 24 · --cp ≈ 23,7 занимает ≈91 px, строка скидки «4 300 ₸ −20%» кеглем 13,8 — ≈99 px. Обе в свою дорожку помещаются, значит ни сетки в две строки, ни переноса «−20%», ни широкой кнопки «В корзину» под ценой больше не нужно. */ /* Тап-цель круглых кнопок. На 375 px они и так 52 × 51 px, но на 320 px это 43,3 px, а в альбомной раскладке (карточка 255) — 41,6. max() поднимает до 44 только там, где не хватает, и не мешает карточке быть крупнее. Клякса рисуется маской по размеру кнопки, поэтому форма остаётся собой. Вес (0,3,0) против (0,1,0). */ .pcard .pacts .pact{width:max(44px, calc(53 * var(--cp))); height:max(44px, calc(52 * var(--cp)))} /* «Нет в наличии» читается плашкой в левом верхнем углу карточки (product-card.php:410, .ptag.t-out — серая, кеглем 17 · --cp ≈ 16,8, то есть крупнее прежних 13 px), и вдобавок site.css:2877 обесцвечивает фото. Поэтому подпись внутри самой кнопки, которая была нужна на узкой карточке, снята вместе с широкой кнопкой: круглая клякса остаётся такой же немой и приглушённой, как на десктопе. */ /* ---- шапка секции «Хиты обжарки» ----------------------------------- К карточкам отношения не имеет, размеры подобраны заново под телефон. */ /* 70 px сверху на телефоне — пустой экран между лентой и товарами. */ .hits{padding-top:28px;padding-bottom:8px} /* Фоновые перья нарисованы под холст 1440 и вынесены за правый край секции на 70 и 240 · --d. Прокрутки они больше не дают — mobile/ base.css ставит html,body{overflow-x:clip}, — но при карточках во всю ширину от пера остаётся вертикальный обрезок шириной 68 px у правого края экрана, и виден он только в 16-пиксельных щелях между карточками, мигая полосками. Прячем. */ .hits .bg-orn-2, .hits .bg-orn-3{display:none} /* Заголовок и кнопка в строку не помещаются: заголовок сам по себе занимает ≈234 px из 320,6. Ставим столбиком, кнопку — во всю ширину (форма у неё своя, фирменная, её не трогаем). Заголовок не переопределяем: site.css:3837 даёт 40 · --d = 27,2 px — это ровно то, что нужно на телефоне рядом с названиями карточек в 20,7 px, и «ХИТЫ ОБЖАРКИ» (≈234 px) встают в строку даже на 320. */ .hits-head{flex-direction:column;align-items:stretch;gap:12px; margin-bottom:20px} /* Подпись под заголовком: site.css:3839 даёт 14 · --d ≈ 9,5 px — не читается; max-width 420 · --d ≈ 286 px обрубал бы строку раньше края страницы. Вес (0,1,1) равен site.css, файл ниже. */ .hits-ttl p{font-size:14px;line-height:1.35;max-width:none} /* Кнопка «Весь каталог»: site.css:3840 даёт рост 54 · --d ≈ 36,7 px (мало для пальца) и кегль 20 · --d ≈ 13,6 px. --btn-h — та самая переменная, от которой .pbtn-green (site.css:2398) считает и min-height, и ширину колпачков, так что фирменная форма остаётся пропорциональной. */ .hits-all{--btn-h:44px;width:100%;font-size:15px;gap:8px} .btn-arr{width:18px;height:18px} } /* ---- помол в карточке (разметка product-card.php, вид card-actions.css) -- На десктопе поле стоит в ряду фасовок справа от «1 кг». На телефоне: КЕГЛЬ не меньше 16 px — мельче iOS при нажатии увеличивает страницу (так же сделано у поля помола на странице товара, mobile/product-page.css). РОСТ — как у кнопок фасовки, --pw-h (40 · --cp: 39,5 px на 375, 32,7 на 320, 47–54 набок): в одном ряду высота обязана совпадать (BRAND-RULES §3.2). Под палец нужно 44 px. Кнопкам фасовки их даёт прозрачная область ::after (выше в этом файле), а у списка псевдоэлементов нет — поэтому сама коробка поля ростом не меньше 44 px (--tap), а контур рисуется фоном по середине коробки ровно ростом кнопки (--gh): колпачки — высотой --gh, линии — на (--tap − --gh) / 2 от верха и низа. Отрицательное поле того же размера возвращает ряду высоту кнопок: глазу поле того же роста, что кнопки, а нажатие ловится на все 44 px — как у кнопок. Прозрачной рамкой вместо фона не вышло: браузер округляет толщину рамки до целых пикселей (замер на 375: 2,27 → 2), контур становился на 0,5–1,3 px выше кнопок, а колпачки расходились с линиями. Поля внутри поля и галочка считаются от --gh (card-actions.css). В РЯД ИЛИ СВОЕЙ СТРОКОЙ. У товара с одной фасовкой поле в ряд входит на любом телефоне. У товара с двумя фасовками набок — с ячейки 386 px (кнопки там кеглем 15 px на --cp). В портрете до 17.09.2026 кнопки были 40 · --cp с кеглем 17 · --cp, и поле у двух фасовок всегда уходило под них своей строкой. Заказчик 17.09.2026: «помол перенеси туда, где граммаж». Недостающее место дали кнопки фасовки — они стали 36 px с кеглем 15 (раздел «КОМПАКТНАЯ КАРТОЧКА» в конце файла), кегль поля остался 16 px ради iOS. Порог в портрете — ячейка 304 px. В одну колонку (портрет до 620 px) решает сама карточка: соседей по ряду нет, и карточке с одной фасовкой незачем тянуть лишнюю строку. В две колонки (портрет 620–767 и набок) — весь список, как на десктопе (card-actions.css): иначе в одном ряду кнопки фасовки стояли бы на разной высоте. ПРОМЕЖУТОК между кнопками и полем своей строкой — 8 px, но не меньше 44 − --pw-h: столько вместе занимают выступы областей нажатия кнопки (вниз) и поля (вверх), по (44 − --pw-h) / 2 каждый. На 375 это 8 (выступы 2,3 + 2,3), на 320 — 11,3. Эта же величина разводит две строки кнопок, если фасовок станет три. Предел ширины поля в ряду (card-actions.css, 101 · --cp) здесь снят: он посчитан под кнопки кеглем 17 · --cp, а при кегле поля 16 px ему нужно больше. Высота строки кнопок на 375: одна фасовка — 55 px вместо прежних 105 (кнопки + строка помола), две — 103. Вес: (0,3,0) и (0,2,1) равны card-actions.css, этот файл грузится позже. Условие телефона — дословно как у всего слоя. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ .pcard .pw:has(> .pgrind){row-gap:max(8px, calc(44px - var(--pw-h)))} .pcard .pgrind{max-width:none} .pcard .pgrind select{--gh:var(--pw-h);--tap:max(44px, var(--gh)); --line:calc(var(--cap) * 0.08886); font-size:max(16px, calc(13 * var(--cp))); height:var(--tap); margin-block:calc((var(--tap) - var(--gh)) / -2); background-position:left center,right center, center calc(50% - (var(--gh) - var(--line)) / 2), center calc(50% + (var(--gh) - var(--line)) / 2), right calc(var(--gh) * 0.125) center; background-size:auto var(--gh),auto var(--gh), calc(100% - 2 * var(--cap)) var(--line), calc(100% - 2 * var(--cap)) var(--line), calc(var(--gh) * 0.225) calc(var(--gh) * 0.143)} /* ПОРТРЕТ (с 17.09.2026). Кнопки фасовки здесь ниже и мельче — 36 px, кегль 15 (раздел «КОМПАКТНАЯ КАРТОЧКА» в конце файла), и две фасовки с полем в ряд входят уже с ячейки 304 px, а не 386, — то есть на телефонах от 360 px. Расчёт там же. Ниже 304 (экран 320) поле уходит под кнопки своей строкой. Одна колонка (до 620 px) — решает сама карточка; две колонки (620–767) — весь список, чтобы кнопки в ряду стояли на одной высоте. */ @media (min-height:521px){ @container (max-width:303.98px){ .pcard .pw:has(> button + button) > .pgrind{flex-basis:100%} } @media (min-width:620px){ @container (max-width:303.98px){ *:has(> .pgrid-cell .pw > button + button) > .pgrid-cell .pgrind, .swiper-wrapper:has(> .swiper-slide > .pgrid-cell .pw > button + button) > .swiper-slide > .pgrid-cell .pgrind{ flex-basis:100%} } } } /* ТЕЛЕФОН НАБОК — две колонки, кнопки прежние (--cp, кегль 15 из landscape.css), порог прежний 386. Общий родитель ячеек — любой (.pgrid, .row), в слайдерах — .swiper-wrapper поверх .swiper-slide (см. card-actions.css, «КОГДА НЕ ВХОДИТ»). */ @media (max-height:520px){ @container (max-width:385.98px){ *:has(> .pgrid-cell .pw > button + button) > .pgrid-cell .pgrind, .swiper-wrapper:has(> .swiper-slide > .pgrid-cell .pw > button + button) > .swiper-slide > .pgrid-cell .pgrind{ flex-basis:100%} } } } /* ---- плашки на телефоне набок — меньше, как на десктопе ----------------- Заказчик 16.09.2026: плашки над фото слишком крупные. На десктопе они уменьшены в доле 0,75 (card-actions.css, «ПЛАШКИ НА КАРТОЧКЕ — МЕНЬШЕ»), но набок это не доходило: mobile/landscape.css:354 и :361 держат плашке свои 34 px / 15 px и вынос −10 / −8 с промежутком 6 правилами с body (вес (0,2,1)), а они сильнее десктопных (0,2,0). Здесь та же доля от тех чисел: рост 34 → 26, кегль 15 → 11, вынос −10 / −8 → −8 / −6, промежуток 6 → 4 (как на десктопе). Скос считается от --tag-h (site.css), поэтому уменьшается вместе с плашкой. Вес тот же (0,2,1), а файл подключается после landscape.css (header.php берёт файлы папки mobile по алфавиту) — выигрывает порядок, чужой файл не трогаем. Условие — дословно как у landscape.css. */ @media (max-width:1023px) and (max-height:520px){ body .pcard .ptag{--tag-h:26px;font-size:11px} body .pcard .ptags{top:-8px;left:-6px;gap:4px} } /* Без container queries (iOS 15): порог 304 px по ячейке пересчитан в ширину экрана. Одна колонка: ячейка = экран − 54,4 (поля страницы 40 · --d с двух сторон), 304 + 54,4 = 358,4 — переносим уже 358. Две колонки: ячейка = (экран − 54,4 − 16) / 2, порог 678,4. */ @supports not (container-type:inline-size){ @media (max-width:358px) and (min-height:521px){ .pcard .pw:has(> button + button) > .pgrind{flex-basis:100%} } @media (min-width:620px) and (max-width:678px) and (min-height:521px){ *:has(> .pgrid-cell .pw > button + button) > .pgrid-cell .pgrind{flex-basis:100%} } } /* ========================================================================== КОМПАКТНАЯ КАРТОЧКА НА ТЕЛЕФОНЕ В ПОРТРЕТЕ (17.09.2026) Герман 17.09.2026, макет Figma 52:4469 («iPhone 17 - 3», блок «Хиты обжарки»): «в карточке товара оставь одну в ряд, убери все шкалы, помол перенеси туда, где граммаж, и CVA тоже убери; карточки большие получились, точнее длинные». Что было: карточка во всю ширину рисовалась десктопными долями (--cp ≈ 1 на 375) — фото 281 × 255, название 21, цена 24, кнопки фасовки 40, клякса 52, плюс шкалы и оценка. Высота на 375: 688–738 px. Что в карточке теперь, сверху вниз: плашки, фото, название, строка «обработка ▸ описание», ряд [200 г] [1 кг] [помол ▾], цена со скидкой, корзина и избранное. Шкал и оценки нет (раздел выше, .pflip). Пропорции из макета. Карточка «Хиты обжарки» в 52:4469 — 174 × 255 при двух колонках: фото 134 × 130 (половина высоты карточки), поля 10,5 сверху и слева и 13,5 снизу, цена 18 Black, текст 12, кнопка 40 с кеглем 15, плашка 22 с кеглем 12. Колонка у нас одна (так просил заказчик), поэтому доли переносим так: фото — 200 px в высоту, по-прежнему около половины карточки; поля — 12 сверху, 14 по бокам, 16 снизу. Бока и низ на 2–3 px больше макетных, потому что живой контур wavy.js (радиус 36, линия 4) у нижнего левого угла подходит к строке старой цены: при полях 12 точка (12; 15,5) от угла лежит в 31,6 px от центра скругления, а внутренний край линии — в 32. При 14 и 16 — 28,7, запас 3 px; название 16, цена 20 (в макете 18 при карточке вдвое уже), мелкий текст 13 (в макете 12, ниже 13 на телефоне не опускаем — нижний порог кегля в начале файла); кнопки фасовки и поле помола — 36: так нарисованы чипы веса и поле помола в Frame 467 (35,5), и только при этой высоте ряд из трёх входит в строку (расчёт ниже); плашки 24 с кеглем 12, круглые кнопки 45 × 44 (меньше 44 палец не любит), счётчик «− 1 +» той же высоты. Замер 17.09.2026 на 375 (каталог «Кофе», главная, тест): карточка 360 px (название в строку), 382 (в две строки или с обработкой), 401 (и то и другое) — было 688–738. РЯД [200 г] [1 кг] [помол]. Ширины по шрифту страницы (замер measureText, Gotham Pro Medium): «200 г» при 15 px — 42,5, «1 кг» — 26,4; самое длинное слово поля «аэропресс» при 16 px — 88,1. Колпачки кнопки — по 0,56265 высоты, при 36 это 20,3 с каждой стороны; поля внутри поля — 0,2 + 0,4 высоты = 21,6. 83,0 + 66,9 + 2 · 6 + 88,1 + 21,6 = 271,6 px Рабочая ширина карточки = ячейка − 28. Ячейка 360-го экрана — 305,6, рабочая 277,6: входит с запасом 6. Порог ставим 304 (271,6 + 28 и 4 px на разницу отрисовки шрифта в Safari) — правило выше, в разделе помола. На 320 ячейка 265,6 — поле уходит своей строкой. Кегль поля 16 px — меньше нельзя: iOS увеличит страницу при нажатии. Кнопки 15, а не 16: при 16 ряд на 360 уже не входит. Условие: телефон в портрете. Набок (высота до 520) — своя раскладка в mobile/landscape.css, её не трогаем. Планшет 768+ и десктоп сюда не попадают. Две колонки 620–767 — тоже здесь: ячейка там 275–348 px, то есть та же ширина, что у телефона. Вес. Селекторы повторяют site.css и card-actions.css один в один или на класс тяжелее; файл подключается после них (header.php, glob mobile/*.css в конце head), равный вес выигрывает порядком. ========================================================================== */ @media (max-width:767px) and (min-height:521px){ /* Карточка: поля вместо 20 · --cp. (0,1,0) = site.css. */ .pcard{padding:12px 14px 16px} /* Плашки: 24 / 12 вместо 30 · --cp / 13 · --cp (card-actions.css, (0,2,0)). Скос считается от --tag-h — уменьшается вместе с плашкой. Вынос за угол прежний по смыслу: −8 вверх, −10 влево. */ .pcard .ptag{--tag-h:24px;font-size:12px} .pcard .ptags{top:-8px;left:-10px;gap:4px} /* Фото: 200 px в высоту на всю рабочую ширину. Снимок стоит с object-fit:contain (site.css) — не режется, просто мельче. Высота постоянная: у соседей по ряду (620–767) фото на одной линии. (0,2,0) = site.css; запасное max-width выше этим тоже покрыто. */ .pcard .pimg{width:100%;height:200px;margin:0 auto 10px} /* Название и строка под ним. Коробки постоянной высоты (70 и 18,5 · --cp) нужны были, чтобы шкалы у соседей стояли на одной линии; шкал нет, а ряд фасовок и так прижат к низу (.pw margin-top:auto в site.css). */ .pcard .ptext{min-height:0;gap:4px} .pcard .ptbody{min-height:0} .pcard h3{font-size:16px;line-height:1.15} /* «обработка ▸ описание» — одной строкой с многоточием, как «Маре Блю ▸ Бурбон…» в макете. Было до двух строк. Обработка (.psub) остаётся крупнее и жирнее — 1,2 кегля строки (site.css). Вес (0,2,0), файл ниже правила о нижнем пороге кегля — оно даёт тот же 13 px. */ .pcard .pdesc{-webkit-line-clamp:1;font-size:13px} /* Ряд фасовок. Высота кнопки одним числом --pw-h: от неё уже считаются колпачки, линии контура, тап-область 44 px и рост поля помола (разделы выше). Промежуток 6 вместо 8 · --cp — расчёт ряда в шапке раздела. Вес (0,2,0) = правило выше в этом файле, это ниже. */ .pcard .pw{--pw-h:36px;gap:6px;padding-top:12px} /* Кегль кнопки. (0,2,1) против (0,1,1) у site.css. */ .pcard .pw button{font-size:15px} /* Стыки контура — без щелей. При высоте 36 колпачок выходит 20,26 px, линия — 1,8 px, и браузер округляет до пикселей экрана колпачок и линию по-разному: на снимке 390 × 3 на стыке верхней линии с правым колпачком и нижней с левым видна щель в пиксель (у «1 кг» и у поля помола). Линии заводим на 1 px под каждый колпачок: у колпачка (cap-out-green) от внутреннего края идёт прямой участок той же толщины длиной не меньше 3,7 px, поэтому нахлёст ложится линия на линию и глазом не виден. Так же, +2px, уже сделана заливка у выбранной кнопки (site.css, .pw button.on). Вес (0,4,1) = card-actions.css (контурная и гашёная кнопки), файл ниже; у поля (0,2,1) = правило выше в этом файле, это ниже — положения слоёв остаются оттуда. */ .pcard .pw button:not(.on):not(.is-out), .pcard .pw button.is-out:not(.on){ background-size:auto 100%,auto 100%, calc(100% - 2 * var(--cap) + 2px) calc(var(--cap) * 0.08886), calc(100% - 2 * var(--cap) + 2px) calc(var(--cap) * 0.08886)} /* ОСТАЁТСЯ (не лечится этим файлом): контур собран из четырёх слоёв — два колпачка-картинки и две линии, — и Chrome округляет их до пикселей экрана порознь. На некоторых дробных положениях карточки на странице (замер: 414 × 3, поле на y = 1691,45) нижняя линия ложится на 1–2 точки экрана ниже колпачка; сдвиг страницы на 0,3 px убирает ступеньку. Это свойство общей сборки, так же и на десктопе. Надёжно — контур одной картинкой через border-image, как у счётчика «− 1 +» (card-actions.css); это отдельная задача, здесь не делаем. */ .pcard .pgrind select{ background-size:auto var(--gh),auto var(--gh), calc(100% - 2 * var(--cap) + 2px) var(--line), calc(100% - 2 * var(--cap) + 2px) var(--line), calc(var(--gh) * 0.225) calc(var(--gh) * 0.143)} /* Цена и кнопки. */ .pcard .pbuy{margin-top:12px;gap:10px} .pcard .pprice{font-size:20px} .pcard .price-old{font-size:13px} /* Косая черта старой цены. Раньше её длину приходилось считать от кегля (63 / 14 = 4,5 em), потому что в site.css ширина была числом из макета. С 18.09.2026 линия там меряется самой зачёркнутой ценой (width:calc(100% + 4 · --cp)) и телефонного кегля не касается — остаётся перевести в em только вынос за края, чтобы он не зависел от --cp. (0,3,0) = site.css. */ .pcard .price-old .pcross{left:-0.15em;width:calc(100% + 0.3em)} .pcard .pacts{gap:8px} /* Клякса 45 × 44 (пропорция 53 : 52), значок сумки 22 × 20 (26 : 24 от 53). Правило тап-цели выше даёт max(44px, …) — здесь то же число явно. (0,3,0) = правило выше, это ниже. */ .pcard .pacts .pact{width:45px;height:44px} /* Только у корзины: у сердца свой размер ниже, а .pact-fav img в card-actions.css того же веса (0,3,1) — общий .pact img его бы перебил. */ .pcard .pacts .pact-cart img{width:22px;height:20px} /* Сердце избранного — 32 из 52 высоты кнопки (card-actions.css, «РАЗМЕР ЗНАЧКА»), при 44 это 27. (0,3,0) = card-actions.css. */ .pcard .pacts .pact-fav{--fav-ico:27px} /* Галочка «уже в корзине» — 18 × 9 и линия 3 из 52 (site.css), при 44 это 15 × 7,6 и 2,5. (0,3,0) против (0,2,0). */ .pcard .pacts .pact-cart.is-in-cart::after{width:15px;height:7.6px; border-left-width:2.5px;border-bottom-width:2.5px} /* Счётчик «− 1 +»: его единица --qp при 0,863 даёт ровно 44 px высоты (card-actions.css, «узкие карточки») — ряд с избранным одной высоты. (0,3,0) = card-actions.css, файл ниже. */ .pcard .pacts .pqty{--qp:0.863px} /* ---- букет: вернулся (17.09.2026) ------------------------------------ Герман 17.09.2026: «нету букета». В макете 52:4469 под ценой стоит строка «Маре Блю ▸ Бурбон…» — вкус одной строкой с многоточием. Букет (свойство BOUQUET_COFFEE,

в product-card.php) лежит в той же коробке .pflip, что шкалы и оценка CVA, а коробку целиком прячет правило выше («шкал вкуса и оценки CVA на телефоне НЕТ»). Возвращаем коробку только там, где есть букет, а шкалы и оценку внутри неё оставляем скрытыми — их Герман снял. Оборот стоит в потоке, под названием и строкой «обработка ▸ описание»: наведения на телефоне нет, а без шкал накладывать его не на что. .is-flipped (packs.js ставит его по касанию) меняет у оборота только прозрачность и сдвиг — здесь они и так «открытые». Две строки с многоточием (-webkit-line-clamp в site.css), кегль 13 — нижний порог мелкого текста в начале файла. Высота коробки — по содержимому: min-height 88 · --cp держал место под шкалы. Веса: (0,3,0) против .pcard .pflip{display:none} (0,2,0) и .pcard .pflip.has-flip (0,3,0) в site.css — файл ниже. */ .pcard .pflip:has(.pbouquet){display:block;min-height:0;margin-top:4px} .pcard .pflip .scales4, .pcard .pflip .pcva{display:none} .pcard .pflip.has-flip .pflip-back{position:static;opacity:1; transform:none;pointer-events:auto} /* Цвет — бордовый #8b2628, как ноты «Бурбон…» в строке макета (узел 52:5371, токен «бордо-второстепенный»; у нас то же число в --cart). Кегль 13, а не макетные 12 — нижний порог мелкого текста. Две строки вместо одной оставлены по задаче: одной строкой ноты большинства кофе обрезаются на втором слове. */ .pcard .pflip .pbouquet{font-size:13px;line-height:1.3;color:#8b2628} /* ---- помол своей ширины (17.09.2026) --------------------------------- Герман 17.09.2026: «"не молоть" не растягивай до конца карточки». У товара с одной фасовкой поле забирало всю строку после «200 г» (card-actions.css: flex 1 1 0, предел ширины снят выше ради кегля 16). Теперь поле всегда своей ширины — по самому длинному короткому названию помола в списке, одинаковой у всех карточек, с одной фасовкой и с двумя. Своей строкой (экран 320, три фасовки) коробка поля растягивается на строку правилом с flex-basis:100%, а сам список остаётся той же ширины у левого края. Справа внутри поля — 0,55 высоты вместо 0,4: галочка занимает 0,125–0,35 высоты от правого края, и при ширине «по тексту» самое длинное слово («не молоть») вставало в 2 px от неё; так зазор 7 px. (0,2,0) и (0,2,1) = card-actions.css, файл ниже. */ .pcard .pgrind{flex:0 0 auto} .pcard .pgrind select{width:auto;padding-right:calc(var(--gh) * 0.55)} } /* ========================================================================== «ХИТЫ» НА ГЛАВНОЙ И КНОПКА «ВЕСЬ КАТАЛОГ» — ПО МАКЕТУ 52:4469 (телефон в портрете, 17.09.2026) Узлы 52:5360 (заголовок и подпись) и 52:5463 (кнопка). Герман 17.09.2026: «кнопку "Весь каталог" перенеси под карточки». заголовок Gotham Pro Black 26 / 1,25 («Хиты» чёрным, второе слово зелёным; слово «продаж» вместо макетного «обжарки» — правка заказчика от 10.09.2026, см. index.sc2026.php); подпись Regular 12 / 1,4, под заголовком через 12; от подписи до карточек 49 (y 1371 → 1420; у нас 48, см. ниже); карточки через 12 (1675 → 1687; в макете 2 × 2, у нас по одной в ряд — решение Германа, раздел «КОМПАКТНАЯ КАРТОЧКА» выше); кнопка 224 × 54 по центру, через 20 под последней карточкой (1942 → 1962), текст Medium 20 / 1,1, стрелка 22 через 10. Порядок меняем стилем, а не разметкой: на компьютере кнопка стоит в шапке секции справа от заголовка, и разметку ради телефона не трогаем. Шапка секции .hits-head становится display:contents — заголовок и кнопка превращаются в прямые элементы колонки .hits, и order ставит кнопку после сетки .pgrid. Табуляция идёт по разметке (кнопка раньше карточек) — на телефоне это не заметно, а на компьютере порядок прежний. Все селекторы — через id секции #hits: классы .hits-ttl и .hits-all берут и другие страницы (404, пустая корзина — page-404.css, page-empty-cart.css), их этот раздел не касается. Вес id перекрывает и site.css (.hits.mac .hits-ttl h2 — (0,3,1)), и общие правила списков. Набок — своя раскладка в mobile/landscape.css (кнопка в строку с заголовком), её не трогаем. ========================================================================== */ @media (max-width:767px) and (min-height:521px){ /* От ленты до заголовка 42 (в макете — от видимой кромки): 10 внутреннего отступа ленты (mobile/home.css) и 31 здесь. Было 29 — замер по снимку 390: от нижней кромки ленты до верха заглавных «ХИТЫ» выходило 45 против 48 в макете (кромка у нас на 2 ниже, буквы на 1 выше), теперь 47–48. Снизу секции пусто — отступ до теста даёт сама секция теста. */ #hits{display:flex;flex-direction:column;padding-top:31px;padding-bottom:0} #hits .hits-head{display:contents} #hits .hits-ttl h2{margin:0;font-size:26px;line-height:1.25} /* Ширина подписи 325, как текстовый блок макета: строка переносится на «в Караганде» там же, где в макете. */ #hits .hits-ttl p{margin:12px 0 0;max-width:325px;font-size:12px;line-height:1.4} /* Промежуток между карточками задаёт ещё и общее правило списков выше (main.page-wrapper *:has(> .pgrid-cell + .pgrid-cell), вес (0,3,1)): сетка «Хитов» под него тоже подходит — id его перекрывает. */ /* 48, а не макетные 49: подпись у нас на 1 ниже (кегль 12 при межстрочном 1,4 браузер кладёт на 16,8, Figma — на 17), карточки встают на y 1420, как в макете. */ #hits .pgrid{order:1;margin-top:48px;gap:12px} #hits .hits-all{ order:2; align-self:center; --btn-h:54px; width:224px; min-height:54px; margin-top:20px; padding:0; gap:10px; font-size:20px; line-height:1.1} #hits .hits-all .btn-arr{width:22px;height:22px} }