/* ========================================================================== КНОПКИ В КАРТОЧКЕ ТОВАРА: одна бордовая «В корзину» и счётчик «− 1 +» Что изменилось против site.css. Кнопок было две: зелёная клала товар в корзину, бордовая с зёрнами вела на страницу товара. Вторая убрана из разметки (product-card.php) — она дублировала фото и название карточки, которые ведут туда же. Оставшаяся кнопка забрала себе бордовый цвет ушедшей, а после добавления товара на её месте встаёт счётчик Frame 665. Цвет. Бордовых в проекте два: #8b2628 (им залита была .pact-view, site.css:3424, и им же залит бордовый круг «убрать из корзины» в макете — img/cart/btn-remove-red.svg) и #892429 из брендбука (docs/BRAND-RULES.md, Pantone 202C). Разница 2/2/1 из 255 — глазом не видна. Берём #8b2628: так кнопка совпадает и с макетом всплывашки, и с тем бордовым, который заказчик показал пальцем на живом сайте. Форма и размер кнопки не тронуты: клякса режется маской img/action-shape.svg (site.css:3417), 53 × 52 · --cp. Размеры счётчика — из макета, единица --qp: это --cp карточки (site.css:3231), поднятая до тап-цели на узких карточках. Числа Figma поэтому пишутся как есть: коробка 84 × 51, контур выступает на 4 с каждой стороны (в файле stepper-outline.svg рукотворная линия и правда шире коробки), ряд «− число +» с промежутком 12, число 18/1.6. Пересчитывать под кнопку не понадобилось: 51 против 52 у кнопки — один пиксель макета, .pbuy выравнивает содержимое по центру (site.css:3395), строка от этого не дёргается. По ширине счётчик тоже влезает: прежние две кнопки занимали 53 + 8 + 53 = 114 · --cp, теперь самое широкое состояние — 84 + 4 выступа = 88 · --cp, то есть цене слева места стало больше, а не меньше. Файл подключается из header.php после catalog.css и ДО mobile/*.css — мобильный слой по-прежнему перебивает всё при равной специфичности. ========================================================================== */ /* ---- кнопка корзины: бордовая ------------------------------------------ Перебиваем site.css:3423 .pact-cart{background:var(--green-brand)} — там вес (0,1,0), здесь (0,3,0). */ .pcard .pacts .pact-cart{background:#8b2628} /* Наведение меняет цвета местами — так это и было задумано у пары кнопок в макете, только теперь местами меняется одна. Перебиваем site.css:3426 .pact-cart:hover{background:#8b2628} — там (0,2,0), здесь (0,4,0). Медиазапрос повторён дословно: на тапе наведение залипает. */ @media (hover:hover){ .pcard .pacts .pact-cart:hover{background:var(--green-brand)} } /* ---- переключение «кнопка ⇄ счётчик» ------------------------------------ Состояние держит класс is-in-cart на самой кнопке — его ставят три разных места, и все три уже работают: PHP при отрисовке (sc2026_basket_offers), site-hf.js после удачного добавления, packs.js снимает при смене фасовки. Поэтому подмена целиком на CSS, скрипту счётчика остаётся только число. display:none, а не visibility: спрятанная кнопка не должна занимать место — счётчик встаёт ровно на её место в строке .pbuy. Вес (0,4,0) против site.css:3417 .pact{display:grid} (0,1,0). */ .pcard .pacts .pact-cart.is-in-cart{display:none} .pcard .pacts .pqty{display:none} .pcard .pacts .pact-cart.is-in-cart ~ .pqty{display:flex} /* Особый случай: у предложения в корзине НЕСКОЛЬКО строк — покупатель взял один и тот же вес с разным помолом. Счётчик карточки правит строку по её номеру, а у добавленной прямо здесь номера нет: без него «−» снимает все строки предложения и кладёт одну заново (cart-popover.js, relay), то есть молча стирает соседнюю. Обещать такое нельзя — счётчик убираем, на его месте остаётся кнопка «В корзине», ссылка на корзину: там обе строки видны и правятся по отдельности. Класс no-qty ставит pack-choice.js в тот миг, когда покупатель меняет помол у товара, уже лежащего в корзине (там же почему он липкий). display:grid — собственное значение .pact (site.css, правило .pact), возвращаем кнопку ровно в её обычный вид. */ .pcard .pacts .pact-cart.is-in-cart.no-qty{display:grid} .pcard .pacts .pact-cart.is-in-cart.no-qty ~ .pqty{display:none} /* ---- сам счётчик, Frame 665 --------------------------------------------- Внутри счётчика своя единица --qp. По умолчанию это --cp карточки, то есть числа макета пишутся как есть. Отдельная переменная нужна, чтобы на узких карточках поднять счётчик до тап-цели ОДНОЙ строкой ниже: иначе пришлось бы править по очереди коробку, знаки, промежуток и кегль — и они разъехались бы между собой. padding-top 2 при выравнивании по центру опускает ряд на 1 — ровно тот сдвиг вниз, что стоит в макете (ряд знаков не по центру коробки). */ .pcard .pacts .pqty{ --qp:var(--cp); position:relative;flex:none;box-sizing:border-box; width:calc(84 * var(--qp));height:calc(51 * var(--qp)); padding-top:calc(2 * var(--qp)); align-items:center;justify-content:center; gap:calc(12 * var(--qp))} /* Контур — картинка из макета, а не border-radius (BRAND-RULES §3.1, §3.2). Коробка под картинку расширена на 4 с каждой стороны — в макете контур рисуется именно так, потому что линия выходит за габарит счётчика, и контур занимает все 92 · --qp. ПОЧЕМУ border-image, а не фон 100% 100%. Файл stepper-outline.svg — 83,53 × 51 с обводкой 2. Растянутый фоном на 92 × 51, он растягивается вместе с обводкой: по горизонтали в 1,10 раза, по вертикали нет. Боковые участки дуг выходили на десятую толще верхней и нижней линий — ровно та «растянутая подложка», от которой проект ушёл (§3.2: контур управляющего элемента одной толщины по всему кругу). В Figma узел растянут так же, но там обводка при растяжении не толстеет, а в SVG-фоне толстеет. border-image режет файл на три куска: края по 23 единицы (дуги целиком — верхняя линия начинается с 22,13, нижняя кончается на 61,39, то есть 83,53 − 22,14), и середину, где только две прямые. Края рисуются в ширину 23 · --qp при высоте 51 · --qp — ровно в своём масштабе, без искажения; тянется только середина, а горизонтальную линию растяжение вдоль неё не утолщает. Линия везде 2 · --qp. Тот же приём, что у полей сайта (site.css, «РАМКА ПОЛЯ — ОДНОЙ КАРТИНКОЙ»): край и середина — из одного файла, поэтому шва на стыке нет по построению. Дуги при этом не растянуты на 10 % вширь, как в макете, — разница около 2 · --qp на всю дугу, глазом не видна; толщина линии важнее. Клики сквозь картинку проходят. */ .pcard .pacts .pqty::before{ content:"";position:absolute;z-index:0;pointer-events:none; left:calc(-4 * var(--qp));right:calc(-4 * var(--qp));top:0;bottom:0; box-sizing:border-box; border-style:solid;border-color:transparent; border-width:0 calc(23 * var(--qp)); border-image-source:url(img/cart/stepper-outline.svg); border-image-slice:0 23 fill; border-image-width:0 calc(23 * var(--qp)); border-image-repeat:stretch; border-image-outset:0} /* ---- «−» и «+» ----------------------------------------------------------- Сама кнопка ровно по знаку из макета, а тап-цель растянута псевдоэлементом: в 84 · --qp двух целей по 44 px не выкроить — расстояние между центрами знаков 42,24 · --qp, и цели по 44 налезли бы друг на друга, отбирая нажатия у соседа. Берём 41,76 · --qp в ширину (между целями остаётся зазор 0,48) и всю высоту счётчика: на телефоне при одной колонке --qp ≈ 1, то есть ≈ 42 × 50 px. */ .pcard .pacts .pqty-btn{ position:relative;z-index:1;flex:none; display:grid;place-items:center; width:calc(11.76 * var(--qp));height:100%; margin:0;padding:0;border:0;background:none;color:inherit; -webkit-appearance:none;appearance:none;cursor:pointer} /* Вверх цель уходит ещё на 2 · --qp — на тот самый padding-top коробки, которым ряд опущен на 1. Иначе цель была бы 49 · --qp, а не вся высота счётчика, и расчёт «44 px на узкой карточке» не сошёлся бы. */ .pcard .pacts .pqty-btn::after{ content:"";position:absolute;top:calc(-2 * var(--qp));bottom:0; left:calc(-15 * var(--qp));right:calc(-15 * var(--qp))} .pcard .pacts .pqty-btn img{ display:block;width:calc(11.76 * var(--qp));height:auto;max-width:none} /* Фокус с клавиатуры — свечение по силуэту знака «−»/«+» (правило «без обводки», BRAND-RULES §3.2). Раньше обводилась тап-цель ::after — это и был прямоугольник внутри счётчика. Прозрачная тап-цель не светится, drop-shadow берёт только нарисованное. */ .pcard .pacts .pqty-btn:focus-visible{ outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* Число. Gotham Pro Medium — это вес 500 (site-hf.css:6). Ширину не задаём: в макете «1» занимает 6,48, и это просто естественная ширина знака — стоит поставить свою, и ряд «− 1 +» разъедется с макетом. tabular-nums просит у шрифта моноширинные цифры, чтобы при 1 → 2 знаки не подпрыгивали; нет такого набора в Gotham Pro — правило молча ничего не делает, ряд остаётся выровненным по центру. */ .pcard .pacts .pqty-num{ position:relative;z-index:1;flex:none; text-align:center; font-family:var(--font-ui);font-weight:500; font-size:calc(18 * var(--qp));line-height:1.6;color:#000; font-variant-numeric:tabular-nums; -webkit-user-select:none;user-select:none} /* Пока запрос в пути, счётчик притухает и не принимает нажатия — иначе двойное «+» ушло бы двумя запросами и разошлось с корзиной. */ .pcard .pacts .pqty.is-busy{opacity:.55;pointer-events:none} /* ---- узкие карточки: не мельче тап-цели --------------------------------- Диапазоны — телефон и планшет, дословно из общих правил слоя. Соседняя кнопка так же поднята до 44 px (mobile/products.css:348), но там это max() по ширине и высоте, а у счётчика подтягивать надо всё сразу — поэтому поднимаем саму единицу. 44 / 51 = 0,863: при такой единице высота счётчика ровно 44 px, ширина 72,5 px, пропорции макета целы. Где карточка крупнее (телефон в одну колонку, --cp ≈ 0,98), max() ничего не меняет. Ниже 44 счётчик уходит в альбомной раскладке: там карточка 255 и --cp ≈ 0,785 (см. расчёт в mobile/landscape.css), высота была бы 40 px. По ширине тап-цели знаков остаются 41,76 · --qp ≈ 36–41 px: 84 · --qp на два раздельных прямоугольника по 44 px не делятся, а раздвинуть коробку — значит уйти от макета. Высота у обоих 44 px. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ .pcard .pacts .pqty{--qp:max(0.863px, var(--cp))} } @media (min-width:768px) and (max-width:1023px) and (min-height:521px){ .pcard .pacts .pqty{--qp:max(0.863px, var(--cp))} } /* ========================================================================== КНОПКА ФАСОВКИ: форма контурной кнопки по эталону набора Заказчик: «эта кнопка кривая, в моём проекте есть нормальная». Кривизна была настоящая и складывалась из двух ошибок. 1. Колпачок. img/cap-line-green-*.svg получен из ЗАЛИВНОГО колпачка: взят контур залитой фигуры и обведён линией 2 при рамке картинки 0 0 22,506 40. Обводка рисуется по середине пути, то есть половина её лежит ЗА рамкой — и край картинки её срезает. Итог: концы дуги сверху и снизу выходят вдвое тоньше линий в середине, а самая широкая точка дуги (x ≈ 21,5 + 1 обводки = 22,5) стёсана в плоскость. В наборе тот же колпачок нарисован иначе (kit-12 и kit-18, они же «белая с зелёной обводкой»): путь УТОПЛЕН на 1 — ровно половину обводки, — поэтому линия целиком помещается в рамку. Тем же приёмом в проекте сделаны боковины полей и крупных контурных кнопок (cap-lgreen, cap-fat-green: рамка расширена на половину обводки, site.css:4103 и далее) — это и есть «нормальная» кнопка проекта. Новые файлы: img/cap-out-green-*.svg — путь из kit-18, открытый (без левой вертикали, её в эталоне закрывает белый прямоугольник), без заливки: по справочнику у контурной кнопки «вместо заливки две линии 2px сверху и снизу». 2. Длина линий. Они шли от конца одной дуги до конца другой: calc(100% − 34,42·--cp) и ПО ЦЕНТРУ. Но концы дуг стоят несимметрично — сверху 18,41 слева и 16,01 справа, снизу наоборот. По центру линия получает по 17,21 с каждой стороны, то есть верхняя вылезает за дугу на 1,2 слева и не достаёт 1,2 справа, нижняя — зеркально. Эти четыре огреха по углам и читаются как «кривая». С колпачком из набора считать нечего: у него дуга ПРОДОЛЖЕНА прямыми участками до внутреннего края, поэтому линия идёт просто от края до края — calc(100% − 2·--cap), и обе стороны равны. Толщина линии = обводке колпачка. В файле это 2 при ширине 22,506, поэтому считаем от --cap, а не от --cp: мобильный слой пересобирает кнопку от --pw-h и задаёт --cap сам (mobile/products.css:318), и от --cap числа сойдутся на любом экране. Вес. mobile/products.css:319 держит `.pcard .pw button:not(.on)` (0,3,1) и грузится ПОЗЖЕ нас — при равном весе он бы победил и вернул старую длину линий (100% − 34,42), а с колпачком из набора она вылезает за дугу на 5,3 с каждой стороны. Поэтому берём на класс больше — (0,4,1). Его правило после этого ничего не делает; геометрию оно считало от той же --pw-h, так что размеры кнопки на телефоне и в альбоме не меняются. ========================================================================== */ .pcard .pw button:not(.on):not(.is-out){ background-image:url(img/cap-out-green-l.svg),url(img/cap-out-green-r.svg), linear-gradient(var(--green-brand),var(--green-brand)), linear-gradient(var(--green-brand),var(--green-brand)); background-position:left center,right center,center top,center bottom; background-size:auto 100%,auto 100%, calc(100% - 2 * var(--cap)) calc(var(--cap) * 0.08886), calc(100% - 2 * var(--cap)) calc(var(--cap) * 0.08886)} /* ---- фасовки нет в наличии ---------------------------------------------- Кадр 52:3062 (docs/FIGMA-PAGES.md, «Пустая корзина»): недоступная фасовка — та же контурная кнопка, но обводка И ПОДПИСЬ серые #C3C3C3, никакого значка сверху. До того как кадр нашёлся, здесь стояла догадка из справочника — подпись в 60 % чёрного (#666) плюс красный крестик в углу. Кадр её отменил: подпись теперь того же #C3C3C3, что и контур, крестик убран совсем (заказчик: «убери»). Серый берём цветом текста, а не opacity: полупрозрачной стала бы и рамка тоже, а она у нас рисуется отдельными картинками и градиентами и уже нарисована ровно этим серым (img/cap-out-grey-*.svg, stroke #C3C3C3) — новых файлов боковин не понадобилось. #C3C3C3 на белом даёт контраст 1,76 — ниже нормы 4,5, и это осознанно: WCAG 1.4.3 не предъявляет требований к неактивным органам управления, а смысл «фасовки нет» несёт не цвет, а скрытая подпись .pw-out-note ниже и title кнопки. Читаемым серый делать нельзя — тогда выключенная фасовка перестанет отличаться от доступной. Вес тот же (0,4,1) и по той же причине, что выше. */ .pcard .pw button.is-out:not(.on){ position:relative;color:#c3c3c3;cursor:default; background-image:url(img/cap-out-grey-l.svg),url(img/cap-out-grey-r.svg), linear-gradient(#c3c3c3,#c3c3c3),linear-gradient(#c3c3c3,#c3c3c3); background-position:left center,right center,center top,center bottom; background-size:auto 100%,auto 100%, calc(100% - 2 * var(--cap)) calc(var(--cap) * 0.08886), calc(100% - 2 * var(--cap)) calc(var(--cap) * 0.08886)} /* Красного крестика в углу кнопки здесь БОЛЬШЕ НЕТ и не должно появиться. Он был заглушкой на время, пока кадр не нашёлся: рисовался `.pcard .pw button.is-out::before` кляксой img/cart/btn-remove-red.svg от всплывашки корзины. В кадре 52:3062 недоступная фасовка просто серая, поэтому правило удалено целиком, а не спрятано — прятать нечего. Файл btn-remove-red.svg остаётся: он по-прежнему нужен всплывашке. position:relative у .is-out выше оставлен намеренно, хотя крестика уже нет: скрытая подпись .pw-out-note ниже позиционирована абсолютно, и без опоры на самой кнопке она привязалась бы к карточке (site.css:3237). Видно её всё равно не было бы — но пусть живёт там, где написана. */ /* Слова «нет в наличии» — только для программы чтения с экрана. Раз крестика больше нет, серый цвет остался единственным зрительным признаком, а он вслух не читается: эта подпись — теперь единственное, из чего незрячий покупатель узнаёт, что фасовки нет (плюс title на кнопке). Удалять её нельзя. */ .pcard .pw .pw-out-note{position:absolute;width:1px;height:1px;padding:0; margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ========================================================================== ВТОРАЯ КРУГЛАЯ КНОПКА: «В ИЗБРАННОЕ» Место, форма и размер — прежней .pact-view: та же клякса 53 × 52 · --cp маской img/action-shape.svg (site.css:3417), тот же промежуток 8. Ушла только её работа (переход на страницу товара), пришла новая. Цвета. У пары в макете один кружок зелёный, второй бордовый. Бордовый уже занят корзиной — заказчик принял её такой на живом сайте, — значит избранное берёт зелёный. Наведение меняет цвета местами, как и у корзины. «Уже в избранном» — та же смена заливки на бордовую, значок остаётся: по общему правилу зелёное ↔ бордовое. Значок — «избранное» из строки значков набора (img/ico-fav.svg, 21 × 20), перекрашенный в белый под заливку: img/ico-fav-white.svg. Ширина считается от высоты по пропорции файла 21:20 (× 1,05): в обоих файлах стоит preserveAspectRatio="none", любая другая ширина растянет рисованное сердце. ========================================================================== */ .pcard .pacts .pact-fav{ margin:0;padding:0;border:0; -webkit-appearance:none;appearance:none;cursor:pointer; background:var(--green-brand); /* Высота значка. Почему именно 32 — в блоке «РАЗМЕР ЗНАЧКА» ниже. */ --fav-ico:calc(32 * var(--cp))} .pcard .pacts .pact-fav img{ width:calc(var(--fav-ico) * 1.05);height:var(--fav-ico)} /* ---- РАЗМЕР ЗНАЧКА: 32 · --cp вместо прежних 24 ------------------------- Заказчик про эту кнопку: «вот этот глаз… его сказал надо убрать». Глаза тут нет: в кружке стоит рисованное сердце из набора — ровно то же, что в шапке у пункта «Избранное», — а внутри сердца фирменный завиток. Убирать нечего, надо было сделать сердце сердцем. Что именно съедало читаемость (замерено по файлу img/kit/ico-fav.svg, рамка 21 × 20): 1. Значок был мелким относительно кружка. Кнопка — 53 × 52 · --cp (site.css:3417), значок — 24 · --cp в высоту, то есть 46 % кнопки. На обычной карточке десктопа (--cp ≈ 0,96) это белое пятно 24 × 23 px посреди заливки 51 × 50 px. Круглое пятно в середине круглой кнопки — это концентрические круги, и глаз честно читает их как зрачок в радужке. Сердце тут просто не успевает заявить о себе. 2. Завиток занимает 76 % рамки значка (15,95 × 15,21 при рамке 21 × 20), то есть спорит не с краем кружка, а с самим контуром сердца: белые витки идут шириной 2,1–3,5 единицы, канавки между ними — 1,2–1,9. При высоте 24 · --cp единица равна 1,2 px, значит канавки выходят 1,4–2,3 px и наполовину заливаются сглаживанием — витки слипаются в сплошное пятно. 3. Выемка между верхними долями сердца — главная примета силуэта — в рисунке всего 1,5 единицы глубиной (доли стоят на 0,0 и 0,17, низ выемки на 1,57), то есть 7,5 % высоты. При 24 · --cp это 1,8 px: верх пятна округляется, и от сердца остаётся овал. Берём 32 · --cp — 61,5 % высоты кнопки. Канавки становятся 1,9–3,0 px и дочищаются до заливки, выемка — 2,4 px, а доли и нижний уголок выходят к краю кружка: белая фигура перестаёт быть круглым ядром в центре круга, и «зрачок в радужке» больше не складывается. Почему не больше. На 70 % (36,4 · --cp) сердце подходит к краю кляксы вплотную и на узкой карточке начинает об неё резаться — клякса не круг, справа и снизу её контур входит внутрь. Плюс рядом стоит сумка корзины (24 · --cp, site.css:3418), и пара кнопок разъезжается по весу: на 61,5 % они ещё выглядят парой, на 70 % — уже нет. ЧЕСТНАЯ ОГОВОРКА: «мелко» — не единственная причина, и одна эта правка жалобу может не снять. Тот же файл в ШАПКЕ нарисован МЕЛЬЧЕ, чем был в карточке, и сердцем читается: header-icons.css:122 задаёт --hd-ico-h:calc(20 * var(--d)), а --d = clamp(.68px, min(.063vw,.11vh), 1.19px) (site.css:3789) — на окне 1440 это 18,1 px против 23 px у прежнего значка в карточке (24 · --cp при --cp ≈ 0,96). Значит различает их не размер, а окружение: в шапке зелёный рисунок стоит на белом поле, в карточке — белое пятно посреди заливки того же семейства цветов, что и канавки внутри завитка. Увеличение до 61,5 % растит и завиток (он занимает 76 % рамки значка: 15,95 × 15,21 при рамке 21 × 20), поэтому композиция «светлое ядро в цветном круге» никуда не девается — «зрачок в радужке» может остаться. Что делать, если останется, решает заказчик, и выбор ему надо показать СРАЗУ вместе с картинкой «было/стало», а не после второго круга правок: а) упрощённый значок от дизайнера под ~30 px — меньше витков, чётче доли (у иконки для 20 px другая проработка, чем у той же иконки для 60 px); б) инверсия, как в шапке: белая клякса с зелёным сердцем — именно в таком виде рисунок читается на 18 px. Сами ни контур не перерисовываем, ни цвета местами не меняем: правило заказчика — любой элемент берём из макета, а инверсия вдобавок ломает пару «зелёная + бордовая» из кадра. Это его решение, не наше. В шапке и в нижней панели трогать файл не надо: там он зелёным по белому высотой 18–22 px (header-icons.css:122 — 20 · --d; mobile/nav.css:107 — 22 px), вокруг него белое поле, а не заливка того же цвета, что канавки, и рядом подпись «Избранное». */ /* Узкие карточки: где у КНОПКИ есть пол, там он нужен и значку. mobile/products.css:348 поднимает саму кнопку до тап-цели — max(44px, 53 · --cp) / max(44px, 52 · --cp), — а значок оставался на чистом --cp и получал меньшую долю кнопки, чем 61,5 %. Ступенька та же: 27 px — это 61,5 % от 44 px. Сколько это даёт на самом деле — честно: мало и только на самых узких портретах. Кнопка ступает на 44 px при --cp < 0,846 (по высоте), значок при --cp < 0,844 — пороги сходятся, но выше 320 px --cp уже крупный: 320 px → --cp = (320 − 54,4)/325 = 0,817 → 32 · --cp = 26,1, пол поднимает до 27, выигрыш 0,9 px; 360 px → --cp = 0,940 → 30,1; 375 px → 0,987 → 31,6 — пол молчит. То есть срабатывает он примерно до 344 px ширины окна. Про альбомную раскладку. Раньше здесь стояло, что значок падает до 19,8 × 18,9 при --cp ≈ 0,785 (карточка 255) — ЭТО НЕВЕРНО, число списано с устаревшего комментария mobile/products.css:344, считавшего альбом под ТРИ колонки. Колонок там давно две: mobile/landscape.css:225 и :236 ставят repeat(2,…) правилами с `body` (вес (0,1,1) и (0,3,2) — тяжелее products.css), а сам файл считает ячейку 386,8–442 px (landscape.css:200–203), то есть --cp = 1,19–1,36, кнопка ≈63 px и значок 38–43 px. Пол до альбома не достаёт вовсе. Если в products.css:348 поменяется floor 44px — поменять и здесь. Диапазон повторён дословно из общих правил слоя. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ .pcard .pacts .pact-fav{--fav-ico:max(27px, calc(32 * var(--cp)))} } /* ПЛАНШЕТА (768–1023 при высоте от 521) здесь НЕТ и быть не должно. Пол 27 px имеет смысл только рядом с полом КНОПКИ, а кнопочный max(44px,…) лежит в ТЕЛЕФОННОМ медиазапросе (mobile/products.css:348) и до планшета не достаёт. Значит на планшете 27 px — уже не 61,5 % кнопки, а тем больше, чем кнопка мельче: • браузер без container queries (iOS < 16, Firefox < 110): запасного --cp для планшета никто не объявляет — оба запасных заперты в телефонных медиазапросах (mobile/products.css:145, mobile/landscape.css:265), — поэтому работает site.css:3231 .pcard{--cp:var(--u)}, а --u на 768 упирается в нижнюю границу 0,70px (site.css:56). Кнопка 37,1 × 36,4 px, и 27 px — это 74 %; • список каталога: его шаблон живёт на сервере (в репозитории его нет, см. mobile/products.css:7), колонок там может быть три — ячейка ≈238 px, --cp ≈ 0,73, кнопка ≈38 px, те же ~71 %. А выше ~68 % рамка значка перестаёт помещаться в кляксу img/action-shape.svg, и её режет маска (site.css:3417). Проверено точка-в-контуре по 244 точкам рамки: при 61,5 % наружу не выходит ни одна, при 68 % — 2, при 70 % — 6, при 74 % — 28, и выходит правый верхний угол, где как раз стоит доля сердца. Итого пол на планшете либо не делает ничего (сетка .pgrid там две колонки, site.css:518, ячейка на 768 ≈347 px и --cp ≈ 1,07), либо режет рисунок. Поэтому держимся доли: 32 · --cp = 61,5 % кнопки на любой планшетной ширине. Понадобится пол и здесь — сначала поднимите САМУ КНОПКУ, продублировав max(44px,…) из products.css:348 в планшетный диапазон, и только после этого возвращайте 27 px. */ /* ---- два состояния и наведение ------------------------------------------ Значок в обоих состояниях один и тот же белый: заливка меняется зелёная ↔ бордовая, а белое по обеим читается одинаково (контраст белого к #00723B — 6,05, к #8b2628 — 8,73; второе число уже посчитано в блоке про плашки ниже). Поэтому размер выше подобран один на оба состояния и на наведение заодно. */ .pcard .pacts .pact-fav.is-fav{background:#8b2628} /* Медиазапрос повторён дословно из соседнего блока: на тапе наведение залипает, и кнопка осталась бы перекрашенной после нажатия. */ @media (hover:hover){ .pcard .pacts .pact-fav:hover{background:#8b2628} .pcard .pacts .pact-fav.is-fav:hover{background:var(--green-brand)} } /* Фокус. Обычную обводку браузера здесь не видно: кнопку режет маска кляксы, и всё за её контуром пропадает — вместе с outline и свечением drop-shadow. Белое кольцо тенью внутри (стояло здесь до 16.09.2026) шло по прямоугольнику коробки и читалось его обрезками. Теперь отклик — тон заливки, общим правилом .pcard .pacts .pact:focus-visible в site.css (рядом с .pact-cart): правило «без обводки», BRAND-RULES §3.2. */ /* Пока запрос в пути — как у счётчика рядом. */ .pcard .pacts .pact-fav.is-busy{opacity:.55;pointer-events:none} /* ========================================================================== ПЛАШКИ-ТЕГИ НА КАРТОЧКЕ: подпись чёрная — РАСХОЖДЕНИЕ С КАДРОМ НАРОЧНО Здесь НЕТ правила. Этот блок стоит для того, чтобы правила не появилось. В кадре 52:3062 подпись на оранжевой «ХИТ» (#F47920) и голубой «РЕДКИЙ ЛОТ» (#00A8BC) белая. У нас чёрная (site.css, .t-hit / .t-rare). Это не недосмотр: белым по этим фонам контраст 2,76 и 2,87 при норме WCAG AA 4,5 — подпись не читается. Чёрным получается 7,60 и 7,33. Вопрос «буква кадра или читаемость» задан заказчику, ответ — читаемость (сентябрь 2026). Записано в docs/DESIGN-SYSTEM-FIGMA.md, раздел «Расхождения с кадром — сознательные». Поэтому site.css отсюда НЕ перебиваем: код уже правильный, перебивать нечего. Если следующий разработчик сверится с кадром и «починит» цвет обратно на белый — он сломает читаемость; сначала пусть прочитает раздел в docs и переспросит заказчика. Остальные плашки проверены заодно и проходят норму, трогать их не надо: жёлтая #FDB913 с чёрной подписью — 12,13, бордовая «НОВИНКА» #8B2628 с белой — 8,73, зелёная «КОФЕ НЕДЕЛИ» #00723B с белой — 6,05. У жёлтой цвет подписи совпадает с кадром. ========================================================================== */ /* ========================================================================== ПЛАШКИ НА КАРТОЧКЕ — МЕНЬШЕ: рост 30 вместо 40, кегль 13 вместо 17 Заказчик 16.09.2026: плашки над фото слишком крупные. На 1440 плашка была 38,6 px ростом с подписью 16,4 px — крупнее кнопок фасовки и шкал, а столбик из двух-трёх плашек (до 124 единиц) закрывал левый верхний угол снимка. Уменьшаем всё сразу в одной доле 0,75: рост 40 → 30, подпись 17 → 13 (13 / 30 = 0,433 против прежних 17 / 40 = 0,425 — буквы в плашке сидят так же), промежуток между плашками 6 → 4, вынос за угол карточки −11 / −13 → −8 / −10. Цвета и форму не трогаем: заливка и скосы — из site.css (.t-milk, .t-hit, …), колпачок считается от --tag-h (--cap = 0,56265 · --tag-h, site.css, правило .ptag), поэтому скос уменьшается вместе с плашкой и не разъезжается с заливкой. Сколько выходит (--cp = доля ячейки): 1440 — рост 28,9, подпись 12,5, «С МОЛОКОМ» 118 px вместо 154; столбик из трёх плашек 3 · 30 + 2 · 4 = 98 единиц против 132. Нижние пороги 23 px и 10 px — для узких ячеек (уже 250 px: каталог при окне примерно до 1160, на 768 и 1024 ячейка 222–224, --cp ≈ 0,69): без них подпись упала бы до 9 px. Порог роста взят из той же доли: 10 / 0,433 = 23. На 375 (--cp ≈ 0,99) пороги молчат: 29,6 и 12,8. Только в карточке (.pcard): тот же класс .ptag стоит на странице товара (.pdp-badges), её плашки этой просьбой не задеты. Вес (0,2,0) против (0,1,0) у .ptag и равный у .pcard .ptags в site.css — файл подключается позже site.css, выигрывает порядок. Телефон набок: mobile/landscape.css задаёт плашке свои 34 px и 15 px правилами с body (вес выше этих). Уменьшение в той же доле для него стоит в mobile/products.css: тот подключается после landscape.css и перебивает его равным весом. */ .pcard .ptags{top:calc(-8 * var(--cp));left:calc(-10 * var(--cp)); gap:calc(4 * var(--cp))} .pcard .ptag{--tag-h:max(23px, calc(30 * var(--cp))); font-size:max(10px, calc(13 * var(--cp)))} /* ТРИ ПЛАШКИ И БОЛЬШЕ — две в верхнем ряду, остальные под ними. Столбик из трёх уходит вниз на 3 плашки, и третья ложится на левый верхний угол пачки. Замер 16.09.2026 по непрозрачным точкам снимка («С молоком», «Редкий лот», «Кофе недели»): столбиком третья закрывала пачку на 1403 из 2403 px² на 768 и на 1931 из 3719 на 1440, то есть больше половины себя, на любой ширине. Порядок чтения сохраняем: первые две по разметке — в верхнем ряду, третья — под первой. Тогда она стоит там, где раньше стояла вторая, и закрывает 718 px² на 768, 676 на 1440, 463 на 320 и 140 на телефоне набок. Ширина верхнего ряда проверена на самых длинных парах: «Нет в наличии» + «С молоком» — 203 px из 222 на 768, 215 из 266 на 320, 228 из 335 набок; за карточку ряд не выходит. Две плашки остаются столбиком, как в макете. Вторая при этом касается края пачки: 556 из 3388 px² на 1440, 610 из 2189 на 768 — столько же, сколько теперь третья. В ряд их не ставим: это вид, который заказчик уже видел, а просьба была только сделать плашки меньше. Без :has (старые браузеры) остаётся столбик. Промежуток — тот же gap из правила выше, он действует и между рядами, и между колонками. */ .pcard .ptags:has(> .ptag:nth-child(3)){display:grid; grid-template-columns:repeat(2, max-content);justify-items:start} /* Плашки «ЧЁРНЫЙ» больше нет (заказчик 16.09.2026) — вместе с разметкой удалено и правило `.pcard .ptag.t-black`, которое возвращало ей скосы на главной. Если плашка когда-нибудь вернётся, помните: home.css держит неограниченный `.t-black` с градиентом для слайдов баннера, и он перебивает плашку порядком подключения. */ /* ========================================================================== ПОМОЛ В КАРТОЧКЕ: поле в ряду фасовок — [200 г] [1 кг] [не молоть ▾] Заказчик 15.09.2026: «вывести помол в карточку как нибудь аккуратно»; 16.09.2026: «сделай просто помол и поставь рядом с кг». Разметка — product-card.php (.pgrind внутри .pw), выбранное доставляет до кнопки корзины pack-choice.js. ПОЧЕМУ В РЯД. Пока поле стояло своей строкой под кнопками («Помол» слева, поле справа), строка прибавляла карточке 10 + 34 = 44 единицы. В ряду поле занимает место рядом с «1 кг», и карточка становится ниже ровно на эту строку. Замер 16.09.2026, было → стало: каталог 1440 627 → 585, 1366 598 → 559, 1280 571 → 534; главная 1440 633 → 591, 1024 959 → 895, 768 701 → 654. Подписи «Помол» глазу больше нет — она осталась именем поля для программы чтения экрана (скрыта ниже тем же приёмом, что .pw-out-note). СКОЛЬКО МЕСТА. Карточка внутри — 285 единиц. «200 г» — 93,1, «1 кг» — 74,9, два промежутка по 8: на поле остаётся 101. Из них 24 — поля внутри поля (8 слева, 16 справа под галочку), на текст — 77. Кегль поля 13 единиц: при нём в 77 входит текст до 5,92 em, а самое длинное слово справочника после сокращения — «аэропресс», 5,51 em (71,6 единицы, запас 5,4). «капельная кофеварка» и «френч-пресс» в поле подписаны короче — «капельная» и «френч» (sc2026_grind_short, product-card.php); значение, которое уходит в корзину, прежнее. Кегль мельче, чем у кнопок фасовки (17): это уточнение к фасовке, а не второй такой же выбор. Крупнее 13 не берём — при 14 уже «не молоть» (5,25 em = 73,5) подходит к краю вплотную, а «аэропресс» не входит. Справа 16, а не 17: единица, отданная тексту, — это запас «аэропресса» на пороге переноса (ниже). Текст кончается в 2 единицах от галочки (она занимает 5–14 от правого края) — касается её только самое длинное слово. КОГДА НЕ ВХОДИТ. Узкая ячейка — меньше 275 px. В списке каталога это всё, что уже окна 1280. Замер карточки 16.09 и 18.09.2026 (окно 800 в высоту): 768 — 222, 900 — 266, 992 — 216, 1024 — 224, 1100 — 238, 1200 — 259, 1280 — 276, 1366 — 295, 1440 — 301 (при высоте 1000 — 310), дальше не растёт. Главная шире: 1440 — 313, 1024 и 768 — 475 и 347. ПОЧЕМУ 275. Ровно на этой ширине 13 · --cp = 11 px. Шире — кегль и место растут вместе, и запас «аэропресса» не меньше 5,4 единицы (замер по ширине текста: 4,5 px на пороге, 4,6 на 1280, 4,9 на 1366, 5,2 на 1440). Уже — кегль упирается в 11 px и дальше не мельчает, а место сжимается, и запас тает: при прежнем пороге 268 на окне 1245 он был 1,7 px. Это слишком тонко: Windows и Safari рисуют шрифт иначе, чем Chrome на Mac, и выбранное «аэропресс» могло стать «аэропре…». ЧТО ИЗ ЭТОГО ВЫШЛО и как исправлено 18.09.2026 — в разделе «УЗКАЯ ЯЧЕЙКА» ниже по файлу: в каталоге до окна 1280 карточка всегда уже 275, и поле там уходило под кнопки — Герман увидел ровно это. Теперь в этом диапазоне ряд собран ростом 34 · --cp вместо 40: колпачки кнопок рисуются от высоты, и ряд, став ниже, отдаёт полю те самые недостающие 13,5 · --cp. Числа и запасы — там же. Сокращать подписи дальше по-прежнему не стали: у «эспрессо» и «аэропресса» коротких форм нет, а многоточие вместо выбранного помола хуже лишней строки. Телефон — mobile/products.css; правила узкой ячейки здесь заперты в десктопный диапазон, чтобы не спорить с телефонным слоем. НИЖНИЙ ПОРОГ КЕГЛЯ 11 px (как у приписки «за 200 г», taste-pack.css) в ряду — рабочий: до окна 1280 поле стоит в ряду именно с ним, и под него посчитан запас в разделе «УЗКАЯ ЯЧЕЙКА». Три фасовки и больше (сейчас таких кофе нет) в ряд с полем не входят ни при какой ширине — такой карточке поле уходит вниз всегда. ФОРМА — та же, что у контурной кнопки фасовки выше по файлу (.pcard .pw button:not(.on)), и того же роста 40 единиц: в одном ряду обязаны совпадать высота, толщина линии и силуэт (BRAND-RULES §3.2). Колпачки cap-out-green из набора, середина calc(100% − 2 · --cap), линия --cap · 0,08886 (0,05 высоты). Всё внутри поля — поля, галочка — считается от --gh, поэтому поле своей строкой (рост 34) и на телефоне (рост 40–54 px) остаётся пропорциональным. Галочка стоит внутри правого колпачка: 9 единиц шириной, в 5 от края. Дуга колпачка на высоте галочки — в 20,8 единицы от его левого края, правый угол галочки — в 17,5: линию она не задевает. Слева текст начинается в 8 единицах: дуга левого колпачка на высоте строчных букв не заходит дальше 4,7. ========================================================================== */ /* Ряд с полем переносится и выравнивает элементы по середине. :has — чтобы ряд фасовок у сиропов и посыпок (там поля нет) остался прежним. Вес (0,3,0): перебивает row-gap:14px из mobile/products.css, см. там. Промежуток между строками — те же 8, что между кнопками. */ .pcard .pw:has(> .pgrind){flex-wrap:wrap;align-items:center; row-gap:calc(8 * var(--cp))} /* Ширина поля в ряду — не больше тех же 101 единицы, что остаются ему у товара с двумя фасовками. Иначе у товара с одной «200 г» поле растягивалось на 176 px до края карточки и читалось полем анкеты, а не переключателем рядом с весом; к тому же у соседей по ряду поля были бы разной длины. Своей строкой (ниже) предел снимается. */ .pcard .pgrind{flex:1 1 0;min-width:0;max-width:calc(101 * var(--cp)); display:flex;margin:0;cursor:pointer} .pcard .pgrind-cap{position:absolute;width:1px;height:1px;padding:0; margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pcard .pgrind select{--gh:calc(40 * var(--cp));--cap:calc(var(--gh) * 0.56265); /* Поля внутри поля и галочка — долями от его роста. Долями, а не числами в теле правила, потому что узкая карточка (раздел «УЗКАЯ ЯЧЕЙКА» ниже) подбирает их заново, чтобы выгадать место под слово: переписывать там padding и все пять слоёв фона ради двух чисел значило бы держать геометрию поля в двух местах и однажды её рассинхронизировать. --gpl — поле слева, --gpr — справа (под галочкой), --gcx — отступ галочки от правого края, --gcw и --gch — её ширина и высота. */ --gpl:0.2;--gpr:0.4;--gcx:0.125;--gcw:0.225;--gch:0.143; flex:1 1 auto;width:100%;min-width:0;height:var(--gh);margin:0; padding:0 calc(var(--gh) * var(--gpr)) 0 calc(var(--gh) * var(--gpl)); -webkit-appearance:none;appearance:none;border:0;border-radius:0;box-shadow:none; cursor:pointer;font-family:var(--font);font-weight:500; font-size:max(11px, calc(13 * var(--cp))); line-height:normal;color:var(--green-brand); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; background-color:transparent;background-repeat:no-repeat; background-image:url(img/cap-out-green-l.svg),url(img/cap-out-green-r.svg), linear-gradient(var(--green-brand),var(--green-brand)), linear-gradient(var(--green-brand),var(--green-brand)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.4l4.8 4.9 4.8-4.9' fill='none' stroke='%2322612B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position:left center,right center,center top,center bottom, right calc(var(--gh) * var(--gcx)) center; background-size:auto 100%,auto 100%, calc(100% - 2 * var(--cap)) calc(var(--cap) * 0.08886), calc(100% - 2 * var(--cap)) calc(var(--cap) * 0.08886), calc(var(--gh) * var(--gcw)) calc(var(--gh) * var(--gch))} /* Фокус — свечение по силуэту фигуры, прямоугольной обводки нет (Герман 16.09.2026: «появляется обводка» — Chrome даёт списку :focus-visible и по щелчку мышью, и зелёный прямоугольник вставал вокруг скошенного поля). drop-shadow повторяет нарисованный фоном контур, фон у поля прозрачный. Правило «без обводки», BRAND-RULES §3.2. */ .pcard .pgrind select:focus{outline:none} .pcard .pgrind select:focus-visible{outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* Три фасовки: кнопки занимают всю строку, поле — под ними. */ .pcard .pw:has(> button + button + button) > .pgrind{flex-basis:100%;max-width:none} /* УЗКАЯ ЯЧЕЙКА (меньше 275 px) — ряд остаётся рядом, но ниже. Герман 18.09.2026: «не молоть перенести рядом с граммажом» — на его экране поле стояло отдельной строкой под кнопками веса. Так и было: в СПИСКЕ КАТАЛОГА порог 275 берётся только с окна 1280, а всё, что уже, — 1024, 1100, 1200 — получало помол второй строкой. Замер 18.09.2026 (окно × высота → ширина карточки): 992×800 — 216, 1024×800 — 224, 1100×800 — 238, 1200×800 — 259, 1280×800 — 276, 1366×800 — 295, 1440×800 — 301, 1440×1000 — 310. От высоты окна ширина карточки тоже зависит: страница меряется в --u, а он взят как min(0,0576vw, 0,1005vh) (site.css). Карточки главной и подборок шире (310–313) — там помол стоял в ряду и раньше. ПОЧЕМУ РЯД НЕ ВЛЕЗАЛ. Всё в карточке считается от --cp и сжимается вместе с ней — кроме кегля поля: он упирается в нижний порог 11 px и дальше не мельчает. Чем уже карточка, тем большую её долю занимает слово в поле. При кнопках ростом 40 на поле оставалось 101 · --cp, из них 24 — собственные поля, на текст 77 · --cp: на 276 это 65,4 px при нужных 60,6 («аэропресс», 11 px) — запас 4,6, а на 224 уже 53 против 60,6, то есть не влезает. ЧТО СДЕЛАНО. В этом диапазоне ряд собран ростом 34 · --cp вместо 40 — ровно тем, каким поле стояло здесь своей строкой. Колпачки кнопки рисуются от её высоты (background-size:auto 100%), поэтому ниже кнопка — уже её скошенные концы: --cap падает с 22,506 до 19,13 · --cp, и каждая кнопка отдаёт ряду 6,75 · --cp. Две кнопки отдают 13,5, ещё 2 даёт промежуток (7 вместо 8, ниже), и полю достаётся 116,5 · --cp вместо 101. Собственные поля поля тоже ужаты (0,51 · --gh вместо 0,6), и на текст остаётся 99,2 · --cp: на 216 (самая узкая карточка каталога, окно 992) это 65,7 px при нужных 60,6 — запас 5,1; на 224 — 68 (7,4); на 259 — 79 (18). Рост у кнопок и у поля один — ряд ровный (BRAND-RULES §3.2), и высота его та же, что была у прежней второй строки, поэтому карточка не выросла. Условие — всё, что НЕ телефонный слой: десктоп от 1024 и планшет 768–1023 выше 520 px (дословно дополнение к условию mobile/*.css). Иначе эти правила с их весом (до (0,5,3)) перебили бы телефонные. Кегль поля здесь не задаём вовсе: основное правило выше даёт max(11px, 13 · --cp) — те самые 11, под которые посчитан запас. */ @media (min-width:1024px), (min-width:768px) and (min-height:521px){ @container (max-width:274.98px){ /* Вес (0,2,1) против (0,1,1) у .pw button в site.css — перебиваем и рост, и --cap; всё остальное (линии, колпачки, галочка) считается от --cap и пересчитывается само. */ .pcard .pw button{height:calc(34 * var(--cp));--cap:calc(19.13 * var(--cp))} /* Промежуток между кнопками и полем — 7 вместо 8: два промежутка отдают ряду ещё 2 · --cp (на 992 это 1,4 px запаса под слово). Разница в одну единицу глазом не отличима, а ряд от неё не перестаёт быть рядом. (0,3,0) = основное правило выше, это ниже. */ .pcard .pw:has(> .pgrind){column-gap:calc(7 * var(--cp))} /* Поля внутри поля — теснее, галочка ближе к краю: отсюда ещё 3,2 · --cp под слово (0,6 · --gh было, 0,51 стало). Зазоры при этом остаются: слева дуга колпачка на высоте строчных букв не заходит дальше 0,12 · --gh, текст начинается с 0,15; справа галочка занимает от 0,11 до 0,32 от края, текст кончается на 0,36. */ .pcard .pgrind select{--gh:calc(34 * var(--cp)); --gpl:0.15;--gpr:0.36;--gcx:0.11;--gcw:0.21;--gch:0.1335} /* Предел ширины поля — тот же остаток ряда, что и посчитан выше. Он держит поле у товара с ОДНОЙ фасовкой: без предела оно тянулось бы до края карточки и читалось полем анкеты, а у соседей по ряду поля были бы разной длины. */ .pcard .pgrind{max-width:calc(116 * var(--cp))} } /* СОВСЕМ УЗКАЯ ЯЧЕЙКА (меньше 215 px) — помол своей строкой, как было. 215 — ширина, на которой кончается запас: под текст остаётся 99,2 · --cp, при --cp = 215/325 это 65,6 px, а «аэропресс» кеглем 11 занимает 60,6 — то есть те же 5 px запаса, под которые считан прежний порог 275 (чуть больше нельзя: Windows и Safari рисуют шрифт шире, чем Chrome на Mac, и выбранное превратилось бы в «аэропре…»). Уже этого — поле целиком уходит под кнопки, и тогда кегль ему можно вернуть к 12 px: соседей по строке нет и места под текст с запасом. В списке каталога такой ширины не бывает: самая узкая карточка — 216 на окне 992×800 (замер 18.09.2026: 900 — 266, 992 — 216, 1024 — 224; ниже 992 колонок становится меньше и карточка снова шире). Правило остаётся на чужие сетки, на низкие окна (--u считается и от высоты) и на будущее. Строку заводим не только самой карточке с двумя фасовками, но и всем карточкам её СПИСКА — у любого общего родителя ячеек (.pgrid, .row), а в слайдерах — у .swiper-wrapper. Иначе в одном ряду сетки у карточки с одной фасовкой кнопки стояли бы на строку ниже соседей (.pw прижат к низу карточки, site.css). */ @container (max-width:214.98px){ .pcard .pgrind{max-width:none} .pcard .pgrind select{font-size:max(12px, calc(13 * var(--cp)))} .pcard .pw:has(> button + button) > .pgrind, *: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%} } } /* ---- распроданный товар: поле на месте, но гашёное ---------------------- ЗАЧЕМ ОНО ВООБЩЕ ОСТАЁТСЯ. На узкой карточке и на телефоне поле стоит своей строкой, а .pw — на margin-top:auto (site.css, правило .pw): всё, что ниже кнопок фасовки, поднимает их вверх. Убери поле у одной карточки ряда — её фасовки уедут вниз на высоту строки относительно соседей, хотя высота самих карточек в ряду одинаковая. Поэтому у распроданного кофе поле печатается тоже, только выбирать в нём нечего: select disabled (product-card.php). Вид — как у гашёной кнопки фасовки .pw button.is-out выше: серые колпачки cap-out-grey, серые линии и такая же серая галочка. Размеры, положения и отступы достаются от основного правила. */ .pcard .pgrind.is-out{cursor:default} .pcard .pgrind.is-out select{ color:#c3c3c3;cursor:default;opacity:1;-webkit-text-fill-color:#c3c3c3; background-image:url(img/cap-out-grey-l.svg),url(img/cap-out-grey-r.svg), linear-gradient(#c3c3c3,#c3c3c3),linear-gradient(#c3c3c3,#c3c3c3), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.4l4.8 4.9 4.8-4.9' fill='none' stroke='%23c3c3c3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}