/*
* nl.css — токены и компоненты магазина Никола-Ленивца.
* Слой поверх Bootstrap. app.min.css не трогаем.
* Спека: platform/06-shop-ui/design.md
*/
@font-face {
font-family: 'Pragmatica';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('../fonts/Pragmatica-Book.woff2') format('woff2');
}
@font-face {
font-family: 'Pragmatica';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('../fonts/Pragmatica-Bold.woff2') format('woff2');
}
:root {
/* цвет */
--nl-ink: #000000;
--nl-paper: #ffffff;
--nl-sand: #efece4;
--nl-muted: #767676;
/*
* Цвет перехода — Pantone 286 u из книги стиля (стр. 33, «другие цвета»:
* гамма не ограничена чёрным и песочным, приведены восемь цветов макетов
* самой книги). Из восьми только этот читается переходом, а не
* предупреждением; контраст 7,0:1 на белом и 5,9:1 на песочном.
* Прежние #0000fe и #0000aa в книге отсутствовали и достались от Bootstrap.
*/
--nl-link: #3155a4;
--nl-link-hover: #24407c;
/* типографика */
--nl-h1: 28px;
--nl-h2: 26px;
--nl-h3: 18px;
--nl-body: 16px;
--nl-small: 14px;
--nl-label: 13px;
/* счётчик на плашке корзины (компонент 8): мельче --nl-label — на
двух знаках в углу 44×44 плашки метка 13px не влезает с запасом */
--nl-num: 12px;
--nl-lh-h1: 1.1;
--nl-lh-h2: 1.15;
--nl-lh-h3: 1.2;
--nl-lh-body: 1.45;
--nl-lh-small: 1.4;
--nl-lh-label: 1.3;
--nl-font: 'Pragmatica', Helvetica, Arial, sans-serif;
/*
* Мера — длина строки текста на десктопе, привязанная к мозаике карточек:
* две колонки плюс промежуток. Текст кончается там же, где вторая карточка,
* и меняется вместе с раскладкой, а не сам по себе.
*
* Было `62ch` — моё число, ни к чему не привязанное (владелец 09.09.2026:
* «должен как-то в сетку попасть, сейчас это обрубок без привязки»).
*/
--nl-measure: calc((100% - 2 * var(--nl-s5)) / 3 * 2 + var(--nl-s5));
/* шкала отступов — других значений в этом файле быть не должно */
--nl-s1: 4px;
--nl-s2: 8px;
--nl-s3: 12px;
--nl-s4: 16px;
--nl-s5: 20px;
--nl-s6: 24px;
--nl-s7: 32px;
/* размеры */
--nl-line: 1px;
--nl-line-strong: 2px;
--nl-btn-h: 48px;
--nl-btn-go-h: 56px;
--nl-field-h: 52px;
--nl-tap: 44px;
--nl-thumb: 48px;
/* кегль главной кнопки чекаута: единственное место крупнее --nl-body (16),
решение из design.md — акцент кнопки, отдельного места в шкале нет */
--nl-btn-go-fs: 17px;
/* непрозрачность приглушённого — миниатюра «распродано» и кнопка счётчика
на границе; один множитель на оба случая, чтобы не расходились молча */
--nl-dim: .4;
}
/* витрина */
/* переопределение цвета ссылок Bootstrap только в границах витрины: nl.css
подключается на всех страницах сайта, а очередь 0 не меняет ничего видимого
за пределами /nl-kit. Вынос на весь сайт (все ссылки магазина) — решение
очереди 2, требует осмотра владельцем. */
/* Витрина держит компоненты в честной колонке, а не растягивает на всю ширину экрана.
Очередь 0 делает кирпичи, а не раскладку страниц: в бою карточка живёт в колонке
мобильного экрана либо в одной из трёх колонок десктопа (спека, раздел «Десктоп»),
и ширины 1440px у неё не бывает никогда. Без ограничения десктопные эталоны
показывали бы растянутую мобильную вёрстку — сравнивать с такими нечего.
Саму раскладку страниц ставит очередь 2. */
.nl-kit { font-family: var(--nl-font); color: var(--nl-ink); background: var(--nl-paper);
padding: var(--nl-s4); max-width: 420px;
--bs-link-color: var(--nl-link); --bs-link-hover-color: var(--nl-link-hover); }
.nl-kit__title { font-size: var(--nl-h1); line-height: var(--nl-lh-h1); font-weight: 700; margin: 0 0 var(--nl-s6); }
.nl-kit__h { font-size: var(--nl-label); line-height: var(--nl-lh-label); color: var(--nl-muted);
text-transform: uppercase; letter-spacing: .06em; font-weight: 400;
margin: var(--nl-s7) 0 var(--nl-s3); }
.nl-kit section { margin: 0; }
/* фокус — один язык на все шесть фокусируемых компонентов сразу (ревью ветки:
было продублировано трижды дословно, три компонента остались с браузерным
кольцом — чёрным по чёрному на .nl-btn, скруглённым на двух других).
:focus-visible, не :focus: клик мышью не должен оставлять рамку до потери
фокуса — на чекауте это мозолит глаз. */
.nl-btn:focus-visible,
.nl-fold__head:focus-visible,
.nl-qty__btn:focus-visible,
.nl-field__input:focus-visible,
.nl-agree__box:focus-visible,
.nl-cart:focus-visible {
outline: var(--nl-line-strong) solid var(--nl-ink);
outline-offset: 2px;
}
/* радиус 0 — общее для всех рамочных компонентов (книга стиля: радиус 0 везде) */
.nl-btn,
.nl-field__input {
border-radius: 0;
}
/* 1 · заголовок раздела */
/*
* Линии над заголовком раздела нет (владелец, 08.09.2026). Разметку групп
* несёт чередование фона, и дизайн этого проекта держит правило: либо цвет,
* либо линия, но не оба поверх друг друга.
*/
.nl-head { padding-top: var(--nl-s6); }
/* !important: app.min.css несёт правило ".b-unisender-form__submit-button, .button, h3"
с font-size/line-height на !important — оно бьёт по голому тегу h3 и перебивает
обычную специфичность класса. Файл не трогаем (ограничение), поэтому перебиваем здесь. */
/* Отступ сверху был расстоянием от линии до заголовка; линии нет — и он
превратился бы в пустое место сверх собственного отступа блока. */
.nl-head__title { font-size: var(--nl-h2) !important; line-height: var(--nl-lh-h2) !important;
font-weight: 700; margin: 0; }
.nl-head__note { font-size: var(--nl-small); line-height: var(--nl-lh-small); margin: var(--nl-s2) 0 0; }
/* 2 · строка сущности */
.nl-item { display: grid; grid-template-columns: var(--nl-thumb) 1fr auto;
column-gap: var(--nl-s3); align-items: start; }
/* у грид-элементов min-width по умолчанию auto: длинное неразрывное название
товара распирает среднюю колонку и даёт горизонтальную прокрутку на мобильном.
Колонка средняя всегда второй прямой потомок (миниатюра, затем она, затем
значение) — вне зависимости от того, есть ли ниже body/foot. */
.nl-item > div:nth-child(2) { min-width: 0; }
.nl-item__thumb { width: var(--nl-thumb); height: var(--nl-thumb); display: block; object-fit: cover; }
/* заглушка вместо реальной картинки товара (решение контролёра задачи 3, не из брифа):
рамка — только на пустом блоке, не на базовом классе, чтобы не протечь на будущие .
Bootstrap несёт `a:hover { color: var(--bs-link-hover-color) }` — специфичность 0-1-1,
она бьёт `.nl-btn { color }` = 0-1-0 независимо от порядка подключения. Проверено
05.09.2026: `` при наведении красился в #0000aa — тёмно-синий текст
на чёрной заливке, то есть кнопка становилась нечитаемой. В очереди 2 кнопка
«оформить заказ» будет именно ссылкой, поэтому чиним здесь, а не там.
То же касается `.nl-cart` — плашка корзины тоже ` `; её правило стоит рядом
с её же объявлением ниже. Модификаторы перечислены явно: у них свои цвета текста. */
/* Фон держится наравне с цветом текста, и это не перестраховка.
`app.min.css` темы несёт `.button:hover { background: #fff; color: #000 }`
— вес 0-1-1, ровно как у правила ниже. Цвет текста мы перебивали, а фон
нет, поэтому кнопка «оплатить» при наведении становилась белой целиком:
белые буквы на белом фоне. Замер 10.09.2026 (находка владельца): фон
rgb(0,0,0) → rgb(255,255,255) при неизменном тексте rgb(255,255,255).
Кнопка `place_order` несёт класс `button` от WooCommerce, снять его нельзя
— на него завязаны плагины платёжных систем. */
.nl-btn:hover, .nl-btn:focus, .nl-btn:active {
background: var(--nl-ink); color: var(--nl-paper); }
.nl-btn--wait:hover, .nl-btn--wait:focus,
.nl-btn--off:hover, .nl-btn--off:focus {
background: var(--nl-paper); color: var(--nl-muted); }
.nl-btn--go { min-height: var(--nl-btn-go-h); font-size: var(--nl-btn-go-fs); }
/* индикатор ожидания: полоса вдоль нижней кромки, бегущая слева направо в
бесконечном цикле (книга стиля — «линии и дуги», не спиннеры и не точки).
Причина измеренная: ответ сервера на добавление в корзину — 7,5 секунды,
всё это время кнопка обязана визуально работать, а не просто отличаться
цветом рамки от «нет в наличии». Цвет — currentColor: тот же цвет,
что у текста этой кнопки (--nl-muted). */
.nl-btn--wait { position: relative; overflow: hidden;
background: var(--nl-paper); color: var(--nl-muted);
border-color: var(--nl-ink); cursor: default; }
.nl-btn--wait::after { content: ''; position: absolute; left: -30%; bottom: 0;
width: 30%; height: var(--nl-line-strong);
background: currentColor;
animation: nl-btn-wait-run 1.2s linear infinite; }
@keyframes nl-btn-wait-run {
from { left: -30%; }
to { left: 100%; }
}
/* уважаем настройку ОС: не крутим, оставляем статичную полосу во всю ширину */
@media (prefers-reduced-motion: reduce) {
.nl-btn--wait::after { animation: none; left: 0; width: 100%; }
}
.nl-btn--off { background: var(--nl-paper); color: var(--nl-muted);
border-color: var(--nl-muted); cursor: not-allowed; }
.nl-btn__icon { width: 22px; height: 22px; vertical-align: -4px; margin-right: var(--nl-s2);
fill: currentColor; }
/* 5 · счётчик */
.nl-qty { display: inline-flex; align-items: center;
border: var(--nl-line) solid var(--nl-ink); }
.nl-qty__btn { width: 38px; height: 40px; padding: 0; background: none; border: 0;
cursor: pointer; position: relative; }
.nl-qty__btn[disabled] { cursor: default; opacity: var(--nl-dim); }
/* знаки рисованные: в кастомной Pragmatica минус удлинён и выглядит палкой */
.nl-qty__btn::before, .nl-qty__btn::after { content: ''; position: absolute;
background: var(--nl-ink); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nl-qty__btn::before { width: 12px; height: 2px; }
.nl-qty__btn[data-nl-step="+1"]::after { width: 2px; height: 12px; }
.nl-qty__num { min-width: 34px; text-align: center;
font-family: var(--nl-font); font-size: var(--nl-body); }
/* 6 · поле */
.nl-field { margin-top: var(--nl-s4); }
.nl-field__label { display: block; font-size: var(--nl-label); line-height: var(--nl-lh-label);
color: var(--nl-muted); }
.nl-field__input { display: block; width: 100%; box-sizing: border-box;
height: var(--nl-field-h); padding: 0 var(--nl-s3);
margin-top: var(--nl-s2);
background: var(--nl-paper); color: var(--nl-ink);
border: var(--nl-line) solid var(--nl-ink);
font-family: var(--nl-font); font-size: var(--nl-body); }
.nl-field__input::placeholder { color: var(--nl-muted); }
.nl-field--error .nl-field__input { border-width: var(--nl-line-strong); }
/* красного в палитре нет (книга стиля: чёрный/белый/песочный) — ошибка
отличается весом и толщиной линии, не цветом; вес текста — тот же приём,
что для акцентов в письме */
.nl-field__error { font-size: var(--nl-label); line-height: var(--nl-lh-label);
font-weight: 700; margin-top: var(--nl-s1); }
/* 7 · согласие */
.nl-agree { display: flex; align-items: flex-start; gap: var(--nl-s3);
min-height: var(--nl-tap); padding: var(--nl-s3) 0; cursor: pointer; }
.nl-agree__box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
accent-color: var(--nl-ink); }
.nl-agree__text { font-size: var(--nl-small); line-height: var(--nl-lh-small); }
/* 8 · плашка корзины */
.nl-cart { display: inline-block; position: relative;
width: var(--nl-tap); height: var(--nl-tap);
background: var(--nl-ink); color: var(--nl-paper); }
/* тот же случай, что у .nl-btn (см. комментарий там): .nl-cart — тоже ,
Bootstrap a:hover перебивает её color, а .nl-cart__icon держит fill:
currentColor — без этой строки значок посинел бы при наведении. */
.nl-cart:hover, .nl-cart:focus, .nl-cart:active { color: var(--nl-paper); }
.nl-cart__icon { position: absolute; left: 13px; top: 11px;
width: 18px; height: 22px; fill: currentColor; color: var(--nl-paper); }
/* число в углу, а не внутри значка: внутри линии перечёркивают две цифры пополам */
.nl-cart__num { position: absolute; right: var(--nl-s1); top: var(--nl-s1);
font-family: var(--nl-font); font-size: var(--nl-num); font-weight: 700;
line-height: 1; color: var(--nl-paper); }
/* ЧЕРНОВИК ДЛЯ ОЧЕРЕДИ 2, НЕ ЧАСТЬ ФУНДАМЕНТА.
Раскладку страниц ставит очередь 2; здесь только демонстрация ряда на витрине,
чтобы заранее увидеть, что происходит с карточками разной высоты рядом друг с другом.
Класс принадлежит витрине (`nl-kit__`), а не компоненту — в бою не используется. */
.nl-kit__row-demo { display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--nl-s4); align-items: stretch; }
/* Витрина держит колонку 420px, но ряд по три в неё не влезает — колонки вышли бы
по ~130px, а в бою это ~450px. Поэтому демо-ряд вырывается из колонки витрины
и занимает доступную ширину экрана: только так видно, как карточки встают рядом
по-настоящему. На узком экране ряд схлопывается в одну колонку. */
@media (min-width: 900px) {
.nl-kit__row-demo { width: calc(100vw - 2 * var(--nl-s7)); max-width: 1200px;
margin-left: calc(-1 * var(--nl-s4)); }
}
@media (max-width: 899px) { .nl-kit__row-demo { grid-template-columns: 1fr; } }
/* ── витрина событий (очередь 2) ─────────────────────────────────────────── */
/*
* Карточка товара по артборду `Blocks` (мобильный) и `DeskEvent` (десктоп).
*
* Первая попытка собрала товар как строку `nl-item--row` — это было неверно
* прочитанное задание: строка живёт в заказе, а на витрине события товар
* показывается карточкой в рамке. Разница не косметическая: в карточке
* описание видно сразу двумя строками, и человек сравнивает похожие позиции
* не нажимая ничего.
*
* Тема красит всех потомков обёртки контента правилом `.grid-wrapper *`
* (shortcodes.css, строка 40) — той же специфичности, что наши классы, но
* ниже по каскаду. Поэтому семейство и кегли объявляются !important точечно,
* ровно теми свойствами, которые перебиваются.
*/
/*
* Ритм групп не зависит от цвета (08.09.2026, уточнено 09.09.2026).
*
* Раньше собственный отступ был только у песочной группы, и шаг между
* соседями скакал: после белой 56, после песочной 76 — владелец видел это
* как «сверху много, снизу мало». Свой отступ 20 сверху и снизу дали каждой
* группе, но у групп оставалось ещё внешнее поле 32, и оно всегда падало
* на белое: внутри песочной полосы до первой буквы было 20, а внутри белой —
* 52. Владелец 09.09.2026: «белую сделать так же, как сейчас песочная».
*
* Поэтому внешнего поля у групп нет вовсе. Воздух внутри любой полосы —
* ровно 20 сверху и снизу, шаг между текстом соседних групп 20 + 20 = 40,
* и он по-прежнему не зависит от цвета.
*/
.nl-offers { margin: 0; padding-top: var(--nl-s5); padding-bottom: var(--nl-s5); }
/* Строка FAQ, ведущая на другую страницу: стрелка вместо шеврона. */
/*
* Строка, ведущая на другую страницу, красится цветом перехода: подчёркивание
* владелец 09.09.2026 отверг как вульгарное, а стрелка справа живёт в знаке,
* а не в тексте. Цвет — из книги, состояние покоя, поэтому виден и на телефоне.
*/
.nl-faq__link { color: var(--nl-link) !important; text-decoration: none; }
.nl-faq__link:hover, .nl-faq__link:focus { color: var(--nl-link-hover) !important; }
.nl-faq__link svg { flex: 0 0 auto; }
/*
* Вопрос — ответ на странице события (09.09.2026).
*
* Тот же воздух в полосе, что у групп товаров: 20 сверху и снизу, чтобы
* ритм страницы не сбивался на последнем блоке. Строки — компонент
* раскрытия очереди 0, у него своя линия сверху; последней добавляем
* линию снизу, иначе список кончается открытым краем.
*/
.nl-faq { padding-top: var(--nl-s5); padding-bottom: var(--nl-s5); }
/* Список без заголовка (условия покупки под шапкой) начинается сразу
строками: пустого места на месте заголовка быть не должно. */
.nl-faq > .nl-faq__list:first-child { margin-top: 0; }
.nl-faq .nl-head { padding-top: 0; }
.nl-faq .nl-head__title { font-family: var(--nl-font) !important;
font-size: 24px !important; line-height: 1.1 !important; }
.nl-faq__list { margin-top: var(--nl-s4); }
/* Пояснение к группе товаров: кегль меты, ширина по колонке текста. */
.nl-offers .nl-head__note { font-family: var(--nl-font) !important;
max-width: 46em; margin-top: var(--nl-s2); }
.nl-offers .nl-head__note p { margin: 0 0 var(--nl-s2); }
.nl-offers .nl-head__note p:last-child { margin-bottom: 0; }
.nl-faq .nl-fold:last-child { border-bottom: var(--nl-line) solid var(--nl-ink); }
/*
* Ответ внутри FAQ и текст группы — основной кегль 16, а не 14.
*
* Компонент раскрытия набирает тело мелким: в витрине компонентов там
* одна пояснительная строка. Здесь же лежат правила, льготы и условия —
* связный текст, который читают целиком, и на телефоне 14 читается мелким
* (владелец, 09.09.2026). Интерлиньяж 1,4: строка короткая, 1,45 разрежает.
*/
.nl-faq .nl-fold__head,
.nl-faq .nl-fold__body { font-family: var(--nl-font) !important; }
.nl-faq .nl-fold__body,
.nl-faq .nl-fold__body p,
.nl-faq .nl-fold__body li,
.nl-offers .nl-head__note,
.nl-offers .nl-head__note p { font-size: var(--nl-small) !important; line-height: 1.4 !important; }
/*
* Кегль задаётся абзацу, а не контейнеру.
*
* Тема правит голый `p` своими медиазапросами: 09.09.2026 контейнер честно
* нёс 16, а текст внутри шёл 10 — владелец увидел, что «ничего не поменялось».
* Та же ловушка ловилась 08.09 на описании карточки; замер контейнера её
* не показывает, только замер самого текста.
*/
.nl-faq .nl-fold__body p { margin: 0 0 var(--nl-s3); }
.nl-faq .nl-fold__body p:last-child { margin-bottom: 0; }
.nl-faq .nl-fold__body ul,
.nl-faq .nl-fold__body ol { margin: 0 0 var(--nl-s3); padding-left: var(--nl-s5); }
/* Отступ до заголовка несёт сама группа: у `.nl-head` он был бы вторым
поверх первого. В витрине компонентов `.nl-head` живёт сам по себе,
там свой отступ остаётся. */
.nl-offers .nl-head { padding-top: 0; }
.nl-offers .nl-head__title,
.nl-offers .nl-card__name,
.nl-offers .nl-card__desc,
.nl-offers .nl-card__meta,
.nl-offers .nl-card__price,
.nl-offers .nl-btn { font-family: var(--nl-font) !important; }
/* Заголовок группы: линия 2px, название 24, пояснение серым (эскиз Blocks). */
.nl-offers .nl-head__title { font-size: 24px !important; line-height: 1.1 !important; }
/* Мозаика. На мобильном одна колонка, дальше две и три — согласованная
раскладка витрины (решение владельца 06.09.2026, эскиз DeskEvent). */
/*
* `align-items: start` — иначе сетка тянет все карточки ряда по самой высокой,
* и раскрытие описания в одной карточке растит соседние: 08.09.2026 сосед
* вырастал с 259 до 494 пикселей, показывая пустоту. Раскрытие — действие
* над одной карточкой, соседи о нём знать не должны.
*
* Плата: в ряду карточки разной высоты, если названия переносятся по-разному.
* Это известное место (`DESIGN.md`, «известно и не чинилось»), и оно меньшее
* из двух зол.
*/
.nl-offers__body { display: grid; grid-template-columns: 1fr; gap: var(--nl-s3);
margin-top: var(--nl-s4); align-items: start; }
/*
* Название свёрнутой карточки — не больше трёх строк, раскрытой — целиком.
*
* Названия из админки бывают в пять строк («парковка р2 — кемпинг „масленичная
* поляна" и „футбольный лес" / 20–24 августа 2026»), и такая карточка ломает
* ряд. Настоящее решение — правило для администратора (беклог, п. 0);
* обрезка держит вёрстку до него. Ограничение, а не выравнивание: высоту
* соседей она не трогает.
*/
.nl-card__head[aria-expanded="false"] .nl-card__name,
.nl-card__head--тихая .nl-card__name {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; }
.nl-card { border: var(--nl-line) solid var(--nl-ink); background: var(--nl-paper);
display: flex; flex-direction: column; }
/* Шапка карточки — одна большая цель нажатия: картинка, текст, шеврон. */
/*
* Шапка карточки — кнопка раскрытия (08.09.2026), поэтому сбрасываем
* собственный вид кнопки: браузер иначе рисует ей рамку, серый фон
* и системный шрифт. Карточкам без описания достаётся тот же вид,
* но обычным блоком и без указателя-руки.
*/
.nl-card__head { display: flex; align-items: flex-start; gap: var(--nl-s3);
padding: var(--nl-s4); color: var(--nl-ink); text-decoration: none; flex: 1 1 auto;
width: 100%; margin: 0; text-align: left; font: inherit; letter-spacing: inherit;
background: none; border: 0; -webkit-appearance: none; appearance: none; }
button.nl-card__head { cursor: pointer; }
/* Шеврон разворачивается вместе с описанием: направление стрелки — единственный
признак состояния, который виден, когда описание свёрнуто. */
.nl-card__head[aria-expanded="true"] .nl-card__chev { transform: rotate(180deg); }
.nl-card__thumb { width: 56px; height: 56px; flex: 0 0 auto; display: block; object-fit: cover; }
.nl-card__text { display: block; min-width: 0; flex: 1 1 auto; }
/*
* Кегль и интерлиньяж названия — замер дизайн-агента на настоящих товарах
* и настоящим шрифтом, не на моках (08.09.2026).
*
* Под текст в карточке остаётся колонка ≈224 пикселя на мобильном и ≈228
* на десктопе: рост карточки съедает выросшая картинка. При 20 пикселях
* худшие названия давали шесть строк. Отсюда 15 и 16 — сознательное
* отступление вниз от токена `--nl-h3`, обоснованное измеренной шириной.
*
* Интерлиньяж, наоборот, вернулся к пропорции токена: 1,15 подбиралась
* под однострочный заголовок, а настоящие названия идут в три-четыре строки —
* это уже короткий абзац, и там такая посадка слишком плотная.
*
* Кегль лечит следствие. Причина — сами названия: дата и повтор заголовка
* группы в каждом. Правило для админки — `admin-rules.md`, п. 15.
*/
.nl-card__name { display: block; font-size: 15px !important; line-height: 1.2 !important;
font-weight: 700; overflow-wrap: break-word; }
/*
* Описание живёт под шапкой и открывается нажатием (08.09.2026). Обрезка
* двумя строками снята: раскрытие, которое показывает многоточие вместо
* текста, бессмысленно. Пока описание свёрнуто, высоты карточек в мозаике
* ровные сами собой.
*/
/*
* Свёрнутое описание показывает полторы строки (принцип проекта, возвращён
* 08.09.2026): человек видит начало и понимает, ради чего раскрывать.
* Обрыв на половине строки читается как продолжение, ровные две строки
* выглядели бы законченной мыслью.
*
* Высота считается от кегля самого описания: полторы строки при интерлиньяже
* 1,4 — это 2,1 своей высоты. Плюс нижний отступ карточки, потому что тема
* считает размеры вместе с полями.
*/
.nl-card__desc { padding: 0 var(--nl-s4) var(--nl-s4);
/* Описание набрано кеглем меты — «осталось столько-то мест» (владелец,
08.09.2026): в карточке это пояснение, а не второй по важности текст. */
font-size: var(--nl-label) !important; line-height: 1.4 !important;
max-height: calc(2.1em + var(--nl-s4)); overflow: hidden; }
.nl-card__head[aria-expanded="true"] + .nl-card__desc { max-height: none; }
/* Карточка без описания на телефоне не добирает пустоту: колонка одна,
равнять не с кем. Запас появляется только там, где есть соседи по ряду. */
.nl-card__hollow { height: 0; }
/*
* Переход на страницу товара — последняя строка раскрытия.
*
* Пока карточка свёрнута, его нет: главный путь — положить в корзину, а не
* уйти с витрины. Отделён линией сверху, набран кеглем меты и приглушён —
* рядом с акцентной кнопкой «в корзину» он не должен спорить за внимание.
*/
/*
* Подвал карточки: линия, под ней подпись-переход, под ней цена и действие.
*
* Линия теперь принадлежит подвалу целиком, а не строке действия: переход
* садится на неё же, и второй линии в карточке не появляется.
*/
.nl-card__foot { margin-top: auto; border-top: var(--nl-line) solid var(--nl-ink); }
/*
* Переход стоит над ценой внутри той же строки подвала, а не этажом выше.
*
* 09.09.2026 владелец: «увеличилась высота». Отдельной строкой переход
* добавлял карточке 32 пикселя — цена варианта Б, названная дизайн-агентом
* прямо. Левая колонка подвала выше строки не делает: надпись 12 и цена 22
* вместе ниже кнопки 44, по которой высота и считается.
*/
.nl-card__sum { display: flex; flex-direction: column; align-items: flex-start;
gap: var(--nl-s1); min-width: 0; }
.nl-card__more { display: inline-block;
color: var(--nl-ink) !important; text-decoration: underline;
font-size: var(--nl-num) !important; line-height: var(--nl-lh-label) !important; }
.nl-card__more:hover, .nl-card__more:focus { color: var(--nl-ink) !important;
text-decoration: underline; }
/* Абзацы описания: свой шаг по шкале отступов. Тема даёт тегу `p` свои поля
сверху и снизу, отчего первая строка отъезжала от названия, а последняя
упиралась в край карточки. */
/*
* Кегль задаётся абзацу, а не только контейнеру: тема правит голый `p`
* своими медиазапросами, и текст описания шёл 10 пикселями на мобильном
* и 16 на десктопе, хотя контейнер честно нёс 13. Замер контейнера этого
* не показывал — поймано по снимку экрана владельца 08.09.2026.
*/
/* Абзацы идут подряд, без пустой строки между ними: шаг между абзацами
равен шагу строк внутри абзаца (владелец, 08.09.2026). */
.nl-card__desc p { margin: 0;
font-size: var(--nl-label) !important; line-height: 1.4 !important; }
.nl-card__desc strong, .nl-card__desc b { font-weight: 700; }
.nl-card__desc a { color: var(--nl-ink); text-decoration: underline; }
.nl-card__meta { display: block; margin-top: var(--nl-s2);
font-size: var(--nl-label) !important; line-height: var(--nl-lh-label) !important;
color: var(--nl-muted); }
/* 8, а не 6: шкала отступов спеки — 4/8/12/16/20/24/32, и 6 там назван прямо
как значение, которое округляется до 8 (design.md, «Отступы»). */
.nl-card__chev { width: 20px; height: 13px; flex: 0 0 auto; margin-top: var(--nl-s2); }
/* Подвал карточки: цена слева, кнопка справа, отделены линией. */
.nl-card__act { display: flex; align-items: center; justify-content: space-between;
gap: var(--nl-s3); padding: var(--nl-s3) var(--nl-s4); }
/*
* Оптическая поправка цены, а не отступ по шкале.
*
* У Pragmatica буквы сидят в строке высоко: воздуха над ними на 3–5 пикселей
* больше, чем под ними. При `line-height: 1` середина букв цены оказывается
* ниже середины кнопки на 2,5 пикселя — выравнивание по флексу считает ящики,
* а глаз видит буквы.
*
* Поправка вдвое больше видимого сдвига: у элемента, выровненного по центру
* флексом, поле смещает его на половину своей величины — центрируется внешний
* ящик вместе с полем. Замер: `scratchpad/optika2.py`, 08.09.2026.
*/
.nl-card__price { font-size: 22px !important; line-height: 1 !important; font-weight: 700;
white-space: nowrap; }
/*
* Кнопка псевдотовара — переход, а не покупка: значок стрелки вместо корзины
* (стрелка означает уход на другую страницу, корзина — добавление).
*/
.nl-card__go { display: inline-flex; align-items: center; width: auto;
min-height: var(--nl-tap); padding: 0 var(--nl-s4); font-size: 15px !important;
gap: var(--nl-s2); text-decoration: none; }
.nl-card__go svg { flex: 0 0 auto; }
.nl-card__act form { margin: 0; }
/* Кнопка карточки — по содержимому, со значком корзины (эскиз Blocks). */
.nl-card__add { display: inline-flex; width: auto; min-height: var(--nl-tap);
padding: 0 var(--nl-s4); font-size: 15px !important; }
/* Распроданное приглушается целиком: карточка остаётся на месте, чтобы список
не «прыгал», но не тянет на себя внимание. */
.nl-card--out .nl-card__name,
.nl-card--out .nl-card__desc { color: var(--nl-muted); }
.nl-card--out .nl-card__thumb { opacity: var(--nl-dim); }
@media (min-width: 600px) {
.nl-offers__body { grid-template-columns: repeat(2, 1fr); gap: var(--nl-s4); }
/*
* Запас высоты — только там, где карточки стоят рядом.
*
* 09.09.2026 владелец: на телефоне выравнивание излишне, там высота должна
* зависеть от содержимого. Колонка одна — соседей по строке нет, и резерв
* только раздувал карточки с коротким названием.
*
* Это не выравнивание по соседям, а общий потолок: три строки названия
* плюс строка подписи. Настоящее равнение по ряду CSS-сеткой недоступно —
* она либо тянет всех по самому высокому (и раскрытие снова двигает
* соседей), либо не равняет никого.
*/
.nl-card__head[aria-expanded="false"] .nl-card__text,
.nl-card__head--тихая .nl-card__text { min-height: calc(3 * 1.2em + 22px); }
.nl-card__hollow { height: calc(2.1em * 13 / 16 + var(--nl-s4)); }
}
@media (min-width: 992px) {
.nl-offers-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; }
/* Три модуля в ширину — та самая мозаика. Два остаются запасным вариантом
для промежуточных ширин. */
.nl-offers__body { grid-template-columns: repeat(3, 1fr); gap: var(--nl-s5); }
.nl-offers .nl-head__title { font-size: 32px !important; line-height: 1.1 !important; }
.nl-card__head { padding: var(--nl-s5); gap: var(--nl-s4); }
.nl-card__desc { padding: 0 var(--nl-s5) var(--nl-s5); }
.nl-card__thumb { width: 72px; height: 72px; }
.nl-card__name { font-size: 16px !important; }
.nl-card__act { padding: var(--nl-s4) var(--nl-s5); }
.nl-card__price { font-size: 24px !important; }
}
/*
* Чередование групп песочным (спека, «Экраны»). Артборд `Blocks` показывает
* одну группу и потому фона не показывает; порядок групп задаёт страница,
* поэтому раскраска считается в CSS — вставка группы в середину перекрашивает
* всё ниже сама.
*/
.nl-offers-wrap > section:nth-of-type(even) { background: var(--nl-sand);
/*
* Фон «на вылет»: во всю ширину экрана, а модули внутри — той же ширины,
* что и в группе без фона (решение владельца 08.09.2026). Раньше фон лежал
* внутри колонки и добавлял свои боковые отступы, отчего карточки в песочной
* группе выходили уже белых на десять пикселей.
*
* Как это устроено: элемент выходит наружу ровно на столько, на сколько его
* сузила колонка (отрицательное поле), и тем же значением возвращает
* содержимое на место (внутренний отступ). Ширину полосы прокрутки вычитаем
* через `--nl-sb`, который ставит nl.js: `100vw` считает её своей, и без
* поправки страница получала бы горизонтальную прокрутку.
*/
--nl-bleed: calc((100vw - var(--nl-sb, 0px) - 100%) / 2);
margin-left: calc(-1 * var(--nl-bleed));
margin-right: calc(-1 * var(--nl-bleed));
padding-left: var(--nl-bleed); padding-right: var(--nl-bleed); }
/* Приглушённый серый рассчитан на белом (4.54:1) и на песочном не проходит —
* внутри песочной группы берём самый светлый серый, дающий там 4.5:1. */
.nl-offers-wrap > section:nth-of-type(even) .nl-card__meta { color: #6b6b6b; }
/*
* Счётчик в карточке (артборд `States`, состояние 4). Рамка вокруг всей тройки,
* высота как у кнопки — 44: счётчик встаёт на её место и подвал карточки
* не прыгает при переключении.
*/
.nl-card__qty { border: var(--nl-line) solid var(--nl-ink); height: var(--nl-tap); }
.nl-card__qty .nl-qty__btn { width: 40px; height: 42px; }
.nl-card__qty .nl-qty__num { min-width: 34px; font-size: 16px; font-weight: 700; }
/*
* Итог внизу экрана (артборд `Sticky`). Держится на виду после первого
* добавления: на длинной странице события покупатель иначе не знает, набрал ли
* он то, что хотел, и сколько это стоит.
*
* Плашка перекрывает низ страницы, поэтому подвалу нужен запас снизу —
* иначе последняя карточка уезжает под неё.
*/
.nl-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
background: var(--nl-ink); color: var(--nl-paper); font-family: var(--nl-font); }
.nl-bar__inner { display: flex; align-items: center; justify-content: space-between;
gap: var(--nl-s4); max-width: 1200px; margin: 0 auto;
padding: var(--nl-s3) var(--nl-s4); }
.nl-bar__count { font-size: var(--nl-label); line-height: var(--nl-lh-label); opacity: .75; }
.nl-bar__sum { font-size: 20px; line-height: 1.1; font-weight: 700; margin-top: 2px; }
/* Цена внутри суммы приходит разметкой WooCommerce — гасим её собственные
цвета и отступы, оставляя наш выворотный текст. */
.nl-bar__sum .woocommerce-Price-amount,
.nl-bar__sum bdi { color: inherit; font: inherit; }
.nl-bar__go { display: inline-flex; align-items: center; justify-content: center;
min-height: var(--nl-tap); padding: 0 var(--nl-s4); white-space: nowrap;
background: var(--nl-paper); color: var(--nl-ink);
font-size: 15px; font-weight: 700; text-decoration: none; }
.nl-bar__go:hover, .nl-bar__go:focus { color: var(--nl-ink); }
body:has(.nl-bar:not([hidden])) { padding-bottom: 84px; }
/*
* Шапка страницы события (артборд `ScreenB`). Название набирается крупнее
* всего на странице — это единственное место, где кегль выходит за шкалу
* токенов: 32 на мобильном и 56 на десктопе. Отдельных токенов не заводим,
* чтобы шкала не разрослась ради одного экрана.
*/
.nl-event { margin: var(--nl-s6) 0 0; font-family: var(--nl-font); }
.nl-event__label { margin: 0; font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important; color: var(--nl-muted); }
.nl-event__title { margin: var(--nl-s2) 0 0; font-size: 32px !important;
line-height: 1.05 !important; font-weight: 700; }
/*
* Интерлиньяж вводного абзаца — 1,35, а не общий 1,45.
*
* На телефоне в строку влезает 38 знаков вместо 65, на которые общий
* интерлиньяж и рассчитан: у короткой строки глазу не нужно столько воздуха,
* чтобы вернуться к началу следующей, и текст кажется разреженным. Владелец
* читал это как «кегль мелковат» — кегль тут ни при чём, x-height Pragmatica
* 0,508 против 0,52 у Arial (замер дизайн-агента 09.09.2026).
*/
.nl-event__text,
.nl-event__text p { margin-top: 0; font-size: var(--nl-body) !important;
line-height: 1.35 !important; }
.nl-event__text { margin-top: var(--nl-s4); }
.nl-event__text p { margin: 0 0 var(--nl-s3); }
.nl-event__text p:last-child { margin-bottom: 0; }
/* Полноширинная строка со ссылкой: цель нажатия во всю ширину, знак справа. */
.nl-event__more { display: flex; align-items: center; justify-content: space-between;
gap: var(--nl-s3); min-height: 48px; margin-top: var(--nl-s4);
padding: 0 var(--nl-s4) 0 0;
border-top: var(--nl-line) solid var(--nl-ink);
border-bottom: var(--nl-line) solid var(--nl-ink);
color: var(--nl-ink) !important; text-decoration: none;
font-size: 15px; }
.nl-event__more:hover, .nl-event__more:focus { color: var(--nl-ink) !important; }
.nl-event__more svg { flex: 0 0 auto; }
@media (min-width: 992px) {
.nl-event { max-width: 1200px; margin-left: auto; margin-right: auto; }
.nl-event__title { font-size: 56px !important; line-height: 1.02 !important; }
/*
* Вводный абзац — лид 21px, а не основной текст 17.
*
* Мера привязана к двум колонкам мозаики (794px), и при 17px это 81 знак
* в строке — вдвое дальше от нормы, чем прежние произвольные 584. Кегль 21
* даёт на той же мере ~65 знаков: сетка и типографика сходятся без
* подгоночных чисел, и абзац встаёт лидом под заголовком 56, а не вторым
* основным текстом (расчёт дизайн-агента 09.09.2026).
*/
.nl-event__text,
.nl-event__text p { font-size: 18px !important; }
.nl-event__text { max-width: var(--nl-measure); }
}
/* Заголовок записи прячем там, где название события выводит блок шапки:
иначе на странице два заголовка подряд, разных по написанию. */
.nl-has-event-head .entry-title { display: none; }
/*
* Страница события на своём шаблоне «Фестиваль-2027»
* (`template-parts/nl-event-template.php`).
*
* Сетку страницы задаём сами, а не занимаем у Bootstrap: у него свои переломы
* (576/768/992/1200/1400) и свои поля, у нашей мозаики — свои (600/992),
* и на одной странице получались две линейки. Боковое поле — по шкале
* отступов, предел ширины содержимого — 1200 из эскиза десктопа.
*/
/* Ссылки витрины красятся нашим цветом перехода, а не бутстраповским.
Найдено владельцем 10.09.2026 на телефоне: обычные ссылки в ответах
нижнего списка («разрешение», адрес почты, телеграм-бот) шли цветом
`#0d6efd` из `app.min.css` — заметно ярче и холоднее нашего `#3155a4`.
Причина была в области действия: подмена `--bs-link-color` стояла
только на `.nl-kit` — служебной витрине компонентов, — а на боевых
страницах её не было вовсе. Правим не перечислением слотов, а токеном
на корне страницы: тогда любая ссылка, у которой нет своего правила,
берёт наш цвет, а не чужой. */
.nl-page { padding-left: var(--nl-s5); padding-right: var(--nl-s5);
--bs-link-color: var(--nl-link); --bs-link-hover-color: var(--nl-link-hover); }
@media (min-width: 992px) {
.nl-page { padding-left: var(--nl-s7); padding-right: var(--nl-s7); }
}
/* ── чекаут (очередь 3) ──────────────────────────────────────────────────── */
/*
* Блок «ваш заказ» по артборду `Checkout`. Прежний шаблон прятал состав заказа
* (`tbody.d-none`) и показывал только суммы — покупатель на последнем шаге
* не видел, что именно покупает.
*/
.nl-order { font-family: var(--nl-font); margin-top: var(--nl-s5); }
/*
* «ваш заказ» — подпись раздела, а не заголовок (владелец, 09.09.2026:
* «технический текст болдом, и всё не сгруппировано»). Набирается кеглем
* меты и приглушённым серым — как «осталось столько-то» в карточке: это
* пояснение к тому, что ниже, а не второй заголовок страницы.
*/
.nl-order__title { font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important;
font-weight: 400; color: var(--nl-muted); margin: 0 0 var(--nl-s2); }
/*
* Строки заказа разделены линией: без неё товары сливаются в один список,
* и непонятно, где кончается один и начинается другой (владелец, 09.09.2026).
* Линия у каждой строки сверху, поэтому у первой её нет — над ней и так
* линия блока.
*/
.nl-order__row { display: flex; align-items: flex-start; gap: var(--nl-s3);
padding: var(--nl-s3) 0; }
.nl-order__row + .nl-order__row { border-top: var(--nl-line) solid var(--nl-ink); }
.nl-order__thumb { width: 44px; height: 44px; flex: 0 0 auto; display: block; object-fit: cover; }
.nl-order__thumb--placeholder { border: var(--nl-line) solid var(--nl-ink); }
.nl-order__text { flex: 1 1 auto; min-width: 0; }
/*
* Название товара в заказе набирается как в карточке витрины (владелец,
* 09.09.2026): 15 на телефоне, 16 на десктопе, интерлиньяж 1,2. Один товар,
* два экрана — написание должно совпадать, иначе на чекауте он выглядит
* другим товаром.
*/
.nl-order__name { font-size: 15px !important; line-height: 1.2 !important;
font-weight: 700; overflow-wrap: break-word; }
@media (min-width: 992px) {
.nl-order__name { font-size: 16px !important; }
}
.nl-order__qty { margin-top: 3px; font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important; color: var(--nl-muted); }
.nl-order__sum { flex: 0 0 auto; white-space: nowrap; font-size: var(--nl-body) !important;
font-weight: 700; }
/*
* Промежуточные строки — доставка, скидки, налоги.
*
* Своей линии у них нет: 09.09.2026 владелец увидел две полосы подряд
* в двадцати пяти пикселях друг от друга — одну рисовал этот блок, вторую
* итог под ним. Линия осталась одна, у итога.
*/
.nl-order__lines:not(:empty) { margin-top: 0; padding-top: var(--nl-s3); }
.nl-order__line, .nl-order__shipping { display: flex; align-items: baseline;
justify-content: space-between; gap: var(--nl-s3);
font-size: var(--nl-small) !important; line-height: var(--nl-lh-small) !important; }
.nl-order__line + .nl-order__line { margin-top: var(--nl-s2); }
/* Доставку рисует WooCommerce своей таблицей — гасим её вид, оставляя строку. */
.nl-order__shipping table, .nl-order__shipping tbody,
.nl-order__shipping tr, .nl-order__shipping th, .nl-order__shipping td {
display: block; width: 100%; padding: 0; border: 0; background: none;
font: inherit; text-align: left; }
/*
* Воздух вокруг линии итога — такой же, как вокруг линии между товарами
* (владелец, 09.09.2026: «полоска между карточками на одной высоте, полоска
* над итого — на другой»). Было 28 сверху и 12 снизу: сложились нижнее поле
* строки и собственный отступ итога. Своего верхнего поля у итога больше нет,
* расстояние держит нижнее поле последней строки — то же, что и везде.
*/
.nl-order__total { display: flex; align-items: baseline; justify-content: space-between;
gap: var(--nl-s3); border-top: var(--nl-line) solid var(--nl-ink);
margin-top: 0; padding-top: var(--nl-s3); }
.nl-order__total-label { font-size: var(--nl-body) !important; font-weight: 700; }
.nl-order__total-sum { font-size: 22px !important; line-height: 1.1 !important;
font-weight: 700; white-space: nowrap; }
.nl-order__total-sum .woocommerce-Price-amount,
.nl-order__total-sum bdi { font: inherit; color: inherit; }
/* Счётчик и «убрать» в строке заказа (артборд `CheckoutQty`). */
.nl-order__controls { display: flex; align-items: center; gap: var(--nl-s3);
margin-top: var(--nl-s2); }
.nl-order__counter { border: var(--nl-line) solid var(--nl-ink); height: 40px; }
.nl-order__counter .nl-qty__btn { width: 36px; height: 38px; }
.nl-order__counter .nl-qty__num { min-width: 30px; font-size: 15px; font-weight: 700; }
/* Цель нажатия у крестика — 44, сам знак мельче: правило 44×44 из спеки
касается области, а не рисунка. */
.nl-order__remove svg { display: block; }
.nl-order__remove { display: inline-flex; align-items: center; justify-content: center;
width: var(--nl-tap); height: var(--nl-tap); padding: 0;
background: none; border: 0; color: var(--nl-muted); cursor: pointer; }
.nl-order__remove:hover, .nl-order__remove:focus { color: var(--nl-ink); }
/* Строка заказа, ждущая ответа: приглушена и не принимает нажатий — иначе
на медленной сети покупатель успевает нажать «минус» трижды. */
.nl-order__row--ждём { opacity: var(--nl-dim); pointer-events: none; }
/* Экран оформления: одна колонка, блоки разделены линиями раздела. */
.nl-checkout { font-family: var(--nl-font); }
/*
* Боковых полей у чекаута своих нет (09.09.2026).
*
* Были 16 поверх полей контейнера, и поля ввода стояли на 36 против 20
* у карточек витрины — одна страница, два левых края. Замер:
* `scratchpad/setka_checkout.py`.
*/
.nl-checkout__inner { max-width: 640px; margin: 0 auto; padding: var(--nl-s6) 0 var(--nl-s7); }
/*
* Заголовок чекаута набирается как заголовок события (09.09.2026, владелец:
* «дизайн этой шапки сильно отличается от макета фестиваля»). Те же кегли —
* 28 на телефоне, 56 на десктопе, — тот же интерлиньяж и тот же отступ вниз.
* Дыра под ним была 50: заголовок нёс свой отступ, а блок заказа — свой.
*/
.nl-checkout__title { font-size: 28px !important; line-height: 1.1 !important;
font-weight: 700; margin: 0 0 var(--nl-s6); }
@media (min-width: 992px) {
.nl-checkout__title { font-size: 56px !important; line-height: 1.02 !important; }
}
.nl-checkout__title + .nl-checkout__form .nl-checkout__order > .nl-checkout__block:first-child,
.nl-checkout__form > *:first-child .nl-checkout__block:first-child { margin-top: 0; padding-top: 0; }
.nl-checkout__block { border-top: var(--nl-line-strong) solid var(--nl-ink);
margin-top: var(--nl-s7); padding-top: var(--nl-s4); }
.nl-checkout__h { font-size: 18px !important; line-height: 1.2 !important;
font-weight: 700; margin: 0; }
.nl-checkout__note { margin: var(--nl-s2) 0 0; font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important; color: var(--nl-muted); }
/* Поля по токенам: высота 52, рамка 1, метка 13 — вместо серых плашек темы. */
/*
* Шаг между полями — 20 по шкале отступов.
*
* Складывался из трёх слагаемых (поле формы 16 + подпись + свой отступ 4)
* и давал 39 — числа, которого в шкале 4/8/12/16/20/24/32 нет. Теперь
* расстояние задаёт одно свойство, а подпись с полем держатся вместе.
*/
.nl-checkout .form-row { margin: var(--nl-s5) 0 0; padding: 0; }
.nl-checkout .form-row + .form-row { margin-top: var(--nl-s5); }
.nl-checkout label { display: block; margin: 0;
font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important; color: var(--nl-muted); }
.nl-checkout .input-text,
.nl-checkout select {
display: block; width: 100%; box-sizing: border-box;
/* Отступ подписи от поля — 4 по шкале; давал 6, потому что подпись
несла свой нижний зазор от темы. */
height: var(--nl-field-h); margin-top: var(--nl-s1);
padding: 0 var(--nl-s3);
border: var(--nl-line) solid var(--nl-ink) !important; border-radius: 0 !important;
background: var(--nl-paper) !important; color: var(--nl-ink) !important;
font-family: var(--nl-font) !important; font-size: var(--nl-body) !important; }
.nl-checkout .input-text::placeholder { color: var(--nl-muted); }
/* ── Страница корзины ────────────────────────────────────────────────────
Корзина стоит в стороне от быстрого пути: плашка в шапке ведёт сразу
в чекаут. Но по ссылке она доступна, и попавший на неё покупатель не
должен видеть страницу из другого магазина. Поэтому здесь только токены —
шрифт, кегли, кнопка, — а разметка остаётся как есть (решение спеки).
Область ограничена тегом: `section.cart`. По классу тела нельзя — `body_class()`
в `header.php` закомментирован, и классов страницы на теле просто нет
(проверено 07.09.2026: правила с `.woocommerce-cart` не применились вовсе). */
section.cart { font-family: var(--nl-font) !important; color: var(--nl-ink); }
section.cart h1 { font-family: var(--nl-font) !important;
font-size: var(--nl-h1) !important; line-height: var(--nl-lh-h1) !important;
font-weight: 700; color: var(--nl-ink); }
/* Название товара приходило кеглем 10 — это не мелко, это нечитаемо. */
section.cart h2 { font-family: var(--nl-font) !important;
font-size: var(--nl-body) !important; line-height: var(--nl-lh-body) !important;
font-weight: 700; color: var(--nl-ink); }
section.cart p,
section.cart span { font-family: var(--nl-font) !important; }
/* Кнопка «оформить заказ» — главная на странице, а была высотой 30 и кеглем 12. */
section.cart a.button {
display: flex; align-items: center; justify-content: center;
width: 100%; box-sizing: border-box;
min-height: var(--nl-btn-h); margin-top: var(--nl-s4); padding: 0 var(--nl-s4);
background: var(--nl-ink) !important; color: var(--nl-paper) !important;
border: var(--nl-line) solid var(--nl-ink); border-radius: 0 !important;
font-family: var(--nl-font) !important; font-size: var(--nl-body) !important; font-weight: 700;
line-height: var(--nl-lh-body) !important;
text-align: center; text-decoration: none; }
/* Тот же случай, что у `.nl-btn`: кнопка здесь — ссылка, а Bootstrap несёт
`a:hover { color }` со специфичностью выше нашей. */
section.cart a.button:hover,
section.cart a.button:focus { color: var(--nl-paper) !important; }
section.cart .QuantitySelector input {
width: 44px; height: 40px; box-sizing: border-box; padding: 0;
border: var(--nl-line) solid var(--nl-ink); border-radius: 0;
background: var(--nl-paper); text-align: center;
font-family: var(--nl-font); font-size: var(--nl-body); font-weight: 700; }
/* Крестик «убрать». Тема делает ссылку флекс-элементом, а размеры значка
задаёт только атрибутами SVG — флекс их сжимает, и ссылка приходит шириной
ноль (замер 07.09.2026: 0 × 8 px). Нажать на неё нельзя: товар из корзины
не убирается вовсе. Область нажатия задана явно. */
section.cart .del.remove { flex: 0 0 auto; align-items: center; justify-content: center;
width: 32px; height: 32px; margin-left: var(--nl-s3); }
section.cart .del.remove svg { flex: 0 0 auto; width: 14px; height: 14px; }
section.cart .del.remove svg path { fill: var(--nl-muted); }
section.cart .del.remove:hover svg path { fill: var(--nl-ink); }
/*
* Промокод (09.09.2026): подпись, поле, кнопка — сразу, без раскрытия.
*
* По артборду это была строка с шевроном, и под ней пряталось одно поле:
* шаг, который нечем оправдать. Владелец 09.09.2026 попросил проще и с
* кнопкой. Поле занимает остаток строки, кнопка — по своему содержимому,
* обе высотой поля ввода.
*/
.nl-promo__label { display: block; margin: 0;
font-size: var(--nl-label) !important; line-height: var(--nl-lh-label) !important;
color: var(--nl-muted); }
.nl-promo__row { display: flex; gap: var(--nl-s2); margin-top: var(--nl-s1);
align-items: stretch; }
/* `width` вместе с `flex`: без явной ширины поле ввода считает своей шириной
размер по атрибуту `size` и в узкой строке схлопывается до двадцати шести
пикселей, отдавая всё место кнопке (замер 09.09.2026). */
.nl-promo__input { flex: 1 1 auto; width: 100%; min-width: 0; margin: 0 !important; }
.nl-promo__apply { flex: 0 0 auto; width: auto; height: var(--nl-field-h);
padding: 0 var(--nl-s4); font-size: var(--nl-small) !important; }
.nl-promo__answer { margin: var(--nl-s3) 0 0; font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important; }
/* Блок «приедет посылкой» (артборд CheckoutShip).
Адрес и способ доставки стоят отдельным блоком после контактов: контакты
нужны всегда, адрес — только вещам, и смешивать их значит обещать, что
билет привезут. */
.nl-ship__fields { margin-top: var(--nl-s2); }
/* Способы стоят над адресом, поэтому верхний отступ им не нужен —
расстояние до заголовка блока держит сам заголовок. */
.nl-ship__methods { margin-top: 0; }
.nl-ship__list { display: block; }
/*
* Способ доставки набирается как способ оплаты (09.09.2026, владелец:
* «селекторы СДЭК криво-косо»).
*
* Плагин печатает переключатель и подпись отдельными элементами, и в блоке
* они вставали друг под другом: кружок сам по себе посередине, подпись
* строкой ниже. Ставим их в одну строку — отметка колонкой слева, текст
* рядом, — и линий между способами не рисуем: свою линию несёт весь блок.
*/
.nl-ship__method { display: grid;
grid-template-columns: 20px 1fr; align-items: start;
column-gap: var(--nl-s3); row-gap: var(--nl-s2);
padding: var(--nl-s3) 0; }
/*
* Отметка — квадрат, как у способа оплаты и у согласия: круг здесь был бы
* единственной круглой формой на сайте, где радиус ноль везде (книга стиля).
*/
/*
* Отметка способа доставки — тот же квадрат, что у оплаты и у согласия.
* Каждое свойство задано с весом: тема правит поля ввода своими правилами,
* и без этого квадрат приходил без рамки, серой заливкой и шириной сорок.
*/
.nl-ship__radio,
.nl-ship input[type="radio"].nl-ship__radio { flex: 0 0 auto;
width: 20px !important; height: 20px !important; margin: 2px 0 0 !important;
padding: 0 !important;
-webkit-appearance: none !important; appearance: none !important;
border: var(--nl-line) solid var(--nl-ink) !important; border-radius: 0 !important;
background: var(--nl-paper) !important; box-sizing: border-box !important;
cursor: pointer; }
.nl-ship__radio:checked,
.nl-ship input[type="radio"].nl-ship__radio:checked {
background: var(--nl-ink) !important;
box-shadow: inset 0 0 0 var(--nl-s1) var(--nl-paper); }
.nl-ship__radio:focus-visible {
outline: var(--nl-line-strong) solid var(--nl-ink); outline-offset: 2px; }
.nl-ship__method-label,
.nl-ship .nl-ship__method-label { display: block !important; margin: 0 !important;
font-size: var(--nl-body) !important; line-height: var(--nl-lh-small) !important;
color: var(--nl-ink) !important; cursor: pointer; }
/* Пояснения плагина — во вторую колонку, под подписью, без своей плашки. */
.nl-ship__method .wc-edostavka-method-additional-info,
.nl-ship__method .wc-edostavka-method-button { grid-column: 2; }
.nl-ship__method-label .woocommerce-Price-amount,
.nl-ship__method-label bdi { font: inherit; font-weight: 700; color: inherit; }
.nl-ship__empty, .nl-ship__where, .nl-ship__contents {
margin: 0; font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important; color: var(--nl-muted); }
/* Строка «выбрать пункт выдачи на карте». Карту рисует плагин СДЭК — своей
мы не делаем, она тянет 768 КБ; здесь только строка, которая её открывает.
Плагин ставит кнопку одним из двух способов, смотря по своей настройке
`map_button_position`: внутрь способа доставки (`inline-method`, так сейчас)
или отдельным блоком под списком (`under-methods`). Разметка у них разная,
поэтому оформлены оба — иначе переключение настройки молча раздевает кнопку. */
.nl-ship__point,
.nl-ship .wc-edostavka-method-additional-info { margin-top: var(--nl-s3); }
.nl-ship__method .wc-edostavka-method-additional-info { flex-basis: 100%; }
.nl-ship__point p,
.nl-ship .wc-edostavka-method-delivery-time,
.nl-ship .wc-edostavka-method-description,
.nl-ship .wc-edostavka-method-button p {
margin: 0 0 var(--nl-s2); font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important; color: var(--nl-muted); }
.nl-ship__point a, .nl-ship__point button,
.nl-ship .wc-edostavka-method-button a,
.nl-ship .wc-edostavka-method-button button {
display: inline-block; padding: 0; border: 0; background: none;
font-family: var(--nl-font); font-size: var(--nl-body) !important;
line-height: var(--nl-lh-body) !important;
color: var(--nl-link) !important; text-decoration: underline; cursor: pointer; }
.nl-ship__point a:hover, .nl-ship__point button:hover,
.nl-ship .wc-edostavka-method-button a:hover,
.nl-ship .wc-edostavka-method-button button:hover { color: var(--nl-link-hover) !important; }
/* Оплата и кнопка. */
.nl-pay__title { font-size: 18px !important; line-height: 1.2 !important;
font-weight: 700; margin: 0 0 var(--nl-s3); }
.nl-pay__methods { list-style: none; margin: 0; padding: 0;
font-size: var(--nl-body) !important; line-height: var(--nl-lh-body) !important; }
.nl-pay__methods li { list-style: none; }
.nl-pay__place { margin-top: var(--nl-s5); }
.nl-pay__submit { width: 100%; margin-top: var(--nl-s4); }
/*
* Строки под кнопкой набраны плотно (владелец, 09.09.2026: «большой
* интерлиньяж»). Это подписи в одну-две строки, и общий интерлиньяж 1,3,
* рассчитанный на связный текст, разводил их сильнее, чем нужно.
*/
.nl-pay__note { margin: var(--nl-s2) 0 0; text-align: center;
font-size: var(--nl-label) !important; line-height: 1.15 !important;
color: var(--nl-muted); }
/*
* Кнопка недоступна, пока нет согласия (артборд `CheckoutOff`). Раньше кнопка
* была активна, а нажатие давало отказ — покупатель искал причину сам.
* Состояние ставит скрипт; стиль здесь описывает, как оно выглядит.
*/
.nl-pay__submit[disabled] { background: var(--nl-paper); color: var(--nl-muted);
border: var(--nl-line) solid var(--nl-muted); cursor: default; }
/* Класс остался от второй подписи, которой больше нет: одна строка меняет
текст сама (`nl-shop.js`). Правило держится на случай, если разметка
придёт из кэша браузера до обновления скрипта. */
.nl-pay__why { display: none; }
/* Согласие. */
.nl-terms { margin-top: var(--nl-s4); }
.nl-terms .nl-agree { display: flex; align-items: flex-start; gap: var(--nl-s3);
color: var(--nl-ink); font-size: var(--nl-small) !important;
line-height: var(--nl-lh-small) !important; }
.nl-terms .nl-agree__box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
/* Экран «заказ принят» (артборды `Thanks`, `ThanksShip`). */
.nl-thanks { font-family: var(--nl-font); }
.nl-thanks__inner { max-width: 640px; margin: 0 auto; padding: var(--nl-s6) var(--nl-s4) var(--nl-s7); }
.nl-thanks__title { font-size: 30px !important; line-height: 1.08 !important;
font-weight: 700; margin: 0; }
.nl-thanks__lbl { margin: var(--nl-s2) 0 0; font-size: var(--nl-label) !important;
line-height: var(--nl-lh-label) !important; color: var(--nl-muted); }
.nl-thanks__box { border: var(--nl-line) solid var(--nl-ink);
padding: var(--nl-s4); margin-top: var(--nl-s5); }
.nl-thanks__h { font-size: 18px !important; line-height: 1.2 !important;
font-weight: 700; margin: 0; }
.nl-thanks__h--section { margin-top: var(--nl-s7); }
.nl-thanks__text { margin: var(--nl-s2) 0 0; font-size: var(--nl-body) !important;
line-height: var(--nl-lh-body) !important; }
.nl-thanks__note { margin: var(--nl-s3) 0 0; font-size: var(--nl-small) !important;
line-height: var(--nl-lh-small) !important; color: var(--nl-muted); }
.nl-thanks__items { margin-top: var(--nl-s3);
border-top: var(--nl-line) solid var(--nl-ink); }
.nl-thanks__item { display: flex; align-items: baseline; justify-content: space-between;
gap: var(--nl-s3); padding: var(--nl-s3) 0;
border-bottom: var(--nl-line) solid var(--nl-ink); }
.nl-thanks__item-name { font-size: var(--nl-body) !important; line-height: 1.25 !important;
font-weight: 700; }
.nl-thanks__item-qty { display: block; margin-top: var(--nl-s1);
font-size: var(--nl-label) !important; font-weight: 400; color: var(--nl-muted); }
.nl-thanks__item-sum { white-space: nowrap; font-size: var(--nl-body) !important; font-weight: 700; }
.nl-thanks__total { display: flex; align-items: baseline; justify-content: space-between;
gap: var(--nl-s3); margin-top: var(--nl-s4);
font-size: var(--nl-body) !important; font-weight: 700; }
.nl-thanks__total-sum { font-size: 22px !important; line-height: 1.1 !important; white-space: nowrap; }
.nl-thanks__total-sum .woocommerce-Price-amount,
.nl-thanks__total-sum bdi { font: inherit; color: inherit; }
.nl-thanks__go { margin-top: var(--nl-s6); }
/* Текст платёжного шлюза. Печатает его сам шлюз через `woocommerce_thankyou_*`
(у наложенного платежа это «Оплата наличными при доставке заказа.»), и до
10.09.2026 он вываливался голым абзацем мимо сетки — находка владельца.
Ширину и поля задаём здесь: разметку внутри пишет чужой код, править её
нельзя, а вот рамку вокруг — можно. */
.nl-thanks__gateway { margin-top: var(--nl-s4); color: var(--nl-muted); }
.nl-thanks__gateway > :first-child { margin-top: 0; }
.nl-thanks__gateway > :last-child { margin-bottom: 0; }
.nl-thanks__gateway p { font-size: var(--nl-small) !important;
line-height: var(--nl-lh-small) !important; }
/* Строка скидки: минус и сумма — тем же кеглем, что остальные суммы,
но не жирным: это вычет, а не позиция заказа. */
.nl-thanks__item--discount .nl-thanks__item-name,
.nl-thanks__item--discount .nl-thanks__item-sum { font-weight: 400; }
/* ── «такой страницы нет» ────────────────────────────────────────────────── */
/* Раскладка та же, что у «заказ принят»: тот же столбец 640, те же отступы.
Экран решает ту же задачу — сказать, что произошло, и дать один выход. */
.nl-404 { font-family: var(--nl-font); }
.nl-404__inner { max-width: 640px; margin: 0 auto;
padding: var(--nl-s6) var(--nl-s4) var(--nl-s7); }
.nl-404__title { font-size: 30px !important; line-height: 1.08 !important;
font-weight: 700; margin: 0; }
.nl-404__text { margin: var(--nl-s2) 0 0; font-size: var(--nl-body) !important;
line-height: var(--nl-lh-body) !important; }
.nl-404__go { margin-top: var(--nl-s5); }
.nl-404__note { margin: var(--nl-s4) 0 0; font-size: var(--nl-small) !important;
line-height: var(--nl-lh-small) !important; color: var(--nl-muted); }
/* ── ссылка-вложение ─────────────────────────────────────────────────────── */
/* Картинка или PDF, подвешенные на ссылку в тексте; открываются в новом окне.
Решение 16 от 10.09.2026: миниатюр в потоке текста нет. Эскиз —
`design-agent/.../mockups/attachment-link.html`.
Цвет чёрный, а не цвет перехода `--nl-link`. В этой системе синий означает
«уходишь со страницы целиком» (строка со стрелкой в списках). Вложение —
про другое: страница остаётся, файл открывается поверх. Один синий на два
смысла спутал бы их. */
.nl-attach { color: var(--nl-ink); text-decoration: none; cursor: pointer; }
.nl-attach__label { text-decoration: underline; }
/* Тип файла словом, а не значком: пиктограмма в этом проекте заводится
отдельной процедурой и несоразмерна одной ссылке в тексте. Кегль в `em`,
а не токеном: элемент живёт в трёх местах с разным основным кеглем
(14 в ответе и пояснении, 13 в описании товара), и абсолютное значение
пришлось бы держать в трёх экземплярах. Тип входит в цель нажатия —
на телефоне так надёжнее, чем мелкий довесок рядом со ссылкой. */
.nl-attach__tag { margin-left: .3em; font-size: .85em;
color: var(--nl-muted); text-decoration: none; }
.nl-attach:hover .nl-attach__tag,
.nl-attach:focus .nl-attach__tag { color: var(--nl-ink); }
.nl-attach:focus-visible { outline: var(--nl-line-strong) solid var(--nl-ink);
outline-offset: 2px; }
/* Нажатие утолщает подчёркивание тем же токеном, что держит фокус-кольцо
и рамку ошибки поля: не новое свойство системы, а третье применение. */
.nl-attach:active .nl-attach__label {
text-decoration-thickness: var(--nl-line-strong); }
/* ── пустая корзина ──────────────────────────────────────────────────────── */
/* Та же раскладка, что у «такой страницы нет»: три экрана — пустая корзина,
404 и «заказ принят» — решают одну задачу и выглядят одинаково. */
.nl-empty { font-family: var(--nl-font); }
.nl-empty__inner { max-width: 640px; margin: 0 auto;
padding: var(--nl-s6) var(--nl-s4) var(--nl-s7); }
.nl-empty__title { font-size: 30px !important; line-height: 1.08 !important;
font-weight: 700; margin: 0; }
.nl-empty__text { margin: var(--nl-s2) 0 0; font-size: var(--nl-body) !important;
line-height: var(--nl-lh-body) !important; }
.nl-empty__go { margin-top: var(--nl-s5); }
/* ── витрина значков (служебная страница nl-kit) ─────────────────────────── */
.nl-kit__icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--nl-s4); margin: var(--nl-s4) 0 var(--nl-s6); }
.nl-kit__icon { display: flex; flex-direction: column; align-items: center;
justify-content: flex-end; gap: var(--nl-s4); margin: 0;
padding: var(--nl-s5) var(--nl-s3); min-height: 120px;
border: var(--nl-line) solid var(--nl-ink); }
.nl-kit__icon figcaption { font-size: var(--nl-label); line-height: var(--nl-lh-label);
color: var(--nl-muted); text-align: center; }
.nl-kit__demo { display: flex; align-items: center; gap: var(--nl-s2);
font-size: var(--nl-body); margin: var(--nl-s4) 0 var(--nl-s6); }
/*
* Шапка открытого меню (09.09.2026).
*
* Крестик стал кнопкой вместо голого рисунка: цель нажатия 44 против прежних
* 21×22, и его видно клавиатуре. Знак рисуется заливкой `currentColor` —
* метод книги стиля, косой срез штрихом не сделать.
*/
.mobile-menu__act { display: flex; align-items: center; gap: var(--nl-s4); }
.mobile-menu .burger-close { display: inline-flex; align-items: center;
justify-content: center; width: var(--nl-tap); height: var(--nl-tap);
padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
color: var(--nl-ink); -webkit-appearance: none; appearance: none; }
/* Гамбургер шапки — той же величины цель нажатия, что у крестика: было
27×26, меньше минимальных 44 (спека, «Цели нажатия»). */
/*
* Знак справа занимает одну и ту же клетку, каким бы он ни был.
*
* Гамбургер 27 в ширину, крестик 20 — и корзина слева от них вставала
* по-разному: 259 в шапке против 282 в панели (владелец 09.09.2026,
* «корзина начала скакать»). Ширина задана жёстко, а не минимумом:
* минимум позволял знаку раздуть клетку под себя.
*/
.burger { display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; width: var(--nl-tap); height: var(--nl-tap);
color: var(--nl-ink); }
/*
* Своего поля у знака нет: `app.min.css` даёт `.top-line .burger`
* margin-left 23, а крестику — ничего, отчего корзина слева вставала
* по-разному: 235 в шапке против 258 в панели. Селектор повторяет чужой
* по весу и добавляет свой класс, чтобы перебить без `!important`.
* Расстояние между значками задаёт `gap` строки — одно на оба.
*/
.top-line .burger { margin: 0; }
.burger svg { display: block; }
/*
* Зазор между корзиной и знаком задан явно.
*
* Между ними в разметке стоит перенос строки, и во флексе он становится
* отдельным элементом: ширина такого пробела зависит от кегля, а он
* в шапке и в панели разный — отсюда корзина на 259 в одной и на 282
* в другой. `font-size: 0` гасит пробел, `gap` возвращает расстояние
* числом со шкалы отступов.
*/
.top-line .col-6.d-flex { gap: var(--nl-s6); }
/*
* Панель меню повторяет шапку разметкой, а не числами (09.09.2026).
*
* Раньше здесь стояли свои поля, своя ширина логотипа и поправка корзины
* на два пикселя — подгонка двух разных вёрсток. Теперь верхняя строка
* панели и шапка — один файл (`template-parts/site-header-row.php`),
* и правил для неё не нужно вовсе: любое число здесь означало бы,
* что вёрстки снова разошлись.
*/
.burger, .burger:hover, .burger:focus, .burger:active, .burger:visited {
color: var(--nl-ink); background: none; border: 0; padding: 0;
cursor: pointer; -webkit-appearance: none; appearance: none;
text-decoration: none; }
/*
* Тело панели меню — временное расположение (09.09.2026).
*
* Список пунктов лежал под верхней строкой: у панели своей вёрстки больше нет,
* а прежние отступы держались на ней. Ставим ровно то, чего не хватает —
* пункты начинаются под строкой и стоят в тех же полях, что содержимое
* страницы.
*
* Это заплата, а не решение: меню магазина не спроектировано вовсе (беклог
* элемента, «Меню магазина»). Пунктов два, оба ведут мимо магазина, кегль
* взят от темы. Владелец 09.09.2026: пока оставляем как есть.
*/
/*
* Строка внутри панели стоит в потоке, а не прикреплена к экрану.
*
* Клонированная разметка принесла с собой `position: fixed` шапки, и список
* пунктов уехал под неё. Панель сама прикреплена к экрану — второму
* закреплению внутри неё места нет.
*/
.mobile-menu .top-line--в-меню { position: static; }
/*
* Боковые поля несёт содержимое, а не панель: строка внутри неё держит
* контейнер сайта со своими полями, и вторые поля панели сдвигали логотип
* на 40 вместо 20 — то есть возвращали тот самый сдвиг, ради которого
* вёрстку и объединяли.
*/
.mobile-menu { padding-left: 0; padding-right: 0; }
.mobile-menu > nav { margin-top: var(--nl-s6); padding: 0 var(--nl-s5); }
.mobile-menu > nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu > nav li { margin: 0 0 var(--nl-s4); }
.mobile-menu > nav a { font-family: var(--nl-font); font-size: var(--nl-h3) !important;
line-height: var(--nl-lh-h3) !important; color: var(--nl-ink) !important;
text-decoration: none; display: inline-flex; align-items: center;
min-height: var(--nl-tap); }
/* Ссылки на соцсети под списком — тем же кеглем и в тех же полях. */
.mobile-menu .soc-link { display: inline-flex; align-items: center;
min-height: var(--nl-tap); margin: 0 var(--nl-s5);
font-family: var(--nl-font); font-size: var(--nl-body) !important;
color: var(--nl-ink) !important; text-decoration: none; }
/*
* Чекаут: кнопка оплаты и ссылки (09.09.2026).
*
* Кегль кнопки жил чужой типографикой: тема правит `.button` своими
* медиазапросами, и главное действие страницы выходило 23 на десктопе
* и 12 на телефоне — мельче описания в карточке (13). Токен
* `--nl-btn-go-fs` при этом честно хранил 17. Задаём его самой кнопке,
* той же силой, что тема.
*/
/*
* Кнопка оплаты: кегль и высота из токенов, а не из чужой типографики.
*
* Тема правит `.button` медиазапросами: кегль выходил 23 на десктопе
* и 12 на телефоне, высота — 68 против 56. Токены при этом хранили 17 и 56.
*/
.nl-checkout #place_order,
.nl-checkout .nl-btn--go { font-size: var(--nl-btn-go-fs) !important;
line-height: 1.2 !important;
height: var(--nl-btn-go-h); min-height: var(--nl-btn-go-h);
padding-top: 0; padding-bottom: 0; }
/*
* Ссылки чекаута — цветом перехода из книги, без подчёркивания
* (решение 09.09.2026). Юридические тексты приходят от WooCommerce
* и несли бутстраповский #0d6efd с подчёркиванием.
*/
.nl-checkout a { color: var(--nl-link) !important; text-decoration: none; }
.nl-checkout a:hover, .nl-checkout a:focus { color: var(--nl-link-hover) !important; }
/*
* Заголовок «Детали» из WooCommerce (09.09.2026).
*
* Печатается перед блоком дополнительных полей — при пустом блоке остаётся
* висеть одинокое слово, которое ничего не подписывает. Владелец: «странная
* надпись „детали"». Гасим сам заголовок, не трогая поля: если поля появятся,
* их видно и без него — они внутри своего блока с подписями.
*/
.nl-checkout .woocommerce-additional-fields > h3 { display: none; }
/*
* Чужие галочки набираются как наше согласие (09.09.2026, владелец:
* «включить меня в рассылку неправильно свёрстано, правильный образец —
* „я прочитал(а) и…"»).
*
* WooCommerce и плагины печатают галочку строкой ``:
* квадратик внутри текста, кегль от темы — 13 у одной, 10 у другой. Наше
* согласие свёрстано иначе: квадратик отдельной колонкой, текст 14 рядом,
* цель нажатия 44. Приводим к этому образцу все галочки чекаута, кроме
* нашей собственной, у которой он уже есть.
*/
.nl-checkout label.checkbox,
.nl-checkout .woocommerce-form__label-for-checkbox:not(.nl-agree) {
display: flex; align-items: flex-start; gap: var(--nl-s3);
min-height: var(--nl-tap); padding: var(--nl-s3) 0; margin: 0;
cursor: pointer;
font-size: var(--nl-small) !important; line-height: var(--nl-lh-small) !important;
color: var(--nl-ink); }
.nl-checkout label.checkbox input[type="checkbox"],
.nl-checkout .woocommerce-form__label-for-checkbox:not(.nl-agree) input[type="checkbox"] {
flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0;
accent-color: var(--nl-ink); }
/* Обёртка галочки не добавляет своего кегля: у рассылки он приходил 10. */
.nl-checkout .form-row:has(> label.checkbox) { font-size: var(--nl-small) !important; }
/*
* Чекаут: чужие блоки приводятся к своей типографике (09.09.2026).
*
* WooCommerce и плагин СДЭК печатают свои подписи, списки и абзацы со своим
* кеглем и интерлиньяжем от темы: 16/26,4 у контейнеров, 17,6 у абзацев.
* Рядом с нашими 13–16 это читалось как «каша по высотам» (владелец).
* Приводим к общему: пояснения — кеглем меты, интерлиньяж 1,4.
*/
.nl-checkout,
.nl-checkout .form-row,
.nl-checkout__block { line-height: var(--nl-lh-small); }
/* Подпись поля из плагина («Введите название города…») — пояснение, а не текст. */
.nl-checkout .form-row .description,
.nl-checkout .form-row small,
.nl-checkout .woocommerce-input-wrapper + .description {
display: block; margin-top: var(--nl-s1);
font-size: var(--nl-label) !important; line-height: 1.3 !important;
color: var(--nl-muted); }
/*
* Способ оплаты: строка списка, а не заголовок.
*
* WooCommerce печатает переключатель с подписью кеглем темы и разворачивает
* под ней описание тем же кеглем — получались «мелкий текст у кружка» и следом
* «то же самое крупно» (владелец). Подпись набираем основным кеглем, описание —
* кеглем меты и приглушённо, как остальные пояснения страницы.
*/
.nl-pay__methods li { padding: var(--nl-s2) 0; }
.nl-pay__methods label { display: inline-flex; align-items: center;
gap: var(--nl-s3); min-height: var(--nl-tap); margin: 0;
font-size: var(--nl-body) !important; line-height: var(--nl-lh-small) !important;
color: var(--nl-ink); cursor: pointer; }
.nl-pay__methods input[type="radio"] { width: 20px; height: 20px; margin: 0;
accent-color: var(--nl-ink); }
/* Абзац WooCommerce про обработку личных данных — тоже пояснение. */
.nl-pay__place > p,
.nl-checkout .woocommerce-privacy-policy-text p {
margin: 0 0 var(--nl-s3);
font-size: var(--nl-label) !important; line-height: 1.3 !important;
color: var(--nl-muted); }
/* Пустая рамка от `noscript` не должна занимать высоту, когда скрипт работает. */
.nl-pay__place noscript { display: block; }
/*
* Выбор пункта выдачи СДЭК — кнопка нашего вида, а не чужая строка таблицы.
* Плагин печатает её своим шрифтом и ставит по центру колонки.
*/
.nl-ship .wc-edostavka-method-button,
.nl-ship .wc-edostavka-method-button button {
display: block; width: 100%; margin: var(--nl-s3) 0 0;
font-family: var(--nl-font) !important;
font-size: var(--nl-small) !important; line-height: var(--nl-lh-small) !important;
text-align: left; }
/*
* Поле города от плагина СДЭК приводится к виду наших полей (09.09.2026).
*
* Плагин рисует свой select2: серая заливка, своя высота, стрелка справа —
* рядом с нашими рамочными полями он выглядел чужим («высота строки плохая,
* берётся как-то из плагина»).
*/
.nl-checkout .select2-container--default .select2-selection--single,
.nl-checkout .select2-selection--single {
height: var(--nl-field-h) !important; box-sizing: border-box;
padding: 0;
border: var(--nl-line) solid var(--nl-ink) !important; border-radius: 0 !important;
background: var(--nl-paper) !important; }
/* Поля внутри — те же, что у наших полей ввода: текст не должен упираться
в рамку (владелец, 09.09.2026). */
.nl-checkout .select2-container .select2-selection__rendered,
.nl-checkout .select2-selection__rendered {
display: flex !important; align-items: center; height: 100%;
padding-left: var(--nl-s3) !important; padding-right: var(--nl-s6) !important;
font-family: var(--nl-font) !important; font-size: var(--nl-body) !important;
line-height: var(--nl-lh-small) !important; color: var(--nl-ink) !important; }
.nl-checkout .select2-selection__placeholder { color: var(--nl-muted) !important; }
.nl-checkout .select2-selection__arrow { height: var(--nl-field-h) !important;
right: var(--nl-s3) !important; }
/*
* Между кружком способа оплаты и его описанием не должно быть провала:
* WooCommerce разворачивает описание своим блоком с полями от темы.
*/
/*
* Описание способа оплаты не показываем (владелец, 09.09.2026: «зачем две
* строчки, когда может быть одна»).
*
* WooCommerce печатает под названием способа его же описание: «оплата при
* доставке» и следом «оплата наличными при доставке заказа» — одна и та же
* мысль дважды. Название способа само по себе понятно; там, где описание
* действительно нужно, его пишет администратор в настройках способа,
* и тогда его стоит вернуть отдельным решением.
*/
.nl-pay__methods .payment_box { display: none !important; }
.nl-pay__methods li { padding: 0; }
.nl-pay__methods li + li { margin-top: var(--nl-s3); }
.nl-pay__methods label { min-height: 0; padding: 0;
/* Тема даёт метке нижнее поле 30 — именно оно давало провал между
строкой способа и его описанием (замер 09.09.2026). */
margin: 0 !important; }
/* Строка способа — свой блок, а не элемент списка темы. */
.nl-pay__methods .wc-payment-method,
.nl-pay__methods .wc_payment_method { padding: 0; margin: 0; }
/*
* Способ оплаты набирается как согласие «я прочитал(а)» (09.09.2026,
* владелец: «кружок не нравится, и сетка у такого блока — типа как
* „я прочитал(а)"»).
*
* Браузерный кружок переключателя — единственная круглая форма на сайте,
* где радиус ноль везде (книга стиля). Рисуем квадрат теми же средствами,
* что галочка согласия: рамка 20×20, отметка — заливка внутри. Сетка та же:
* отметка отдельной колонкой, текст рядом, цель нажатия 44.
*/
.nl-pay__methods label { display: flex; align-items: flex-start;
gap: var(--nl-s3); min-height: var(--nl-tap); padding: var(--nl-s3) 0;
margin: 0 !important;
font-size: var(--nl-small) !important; line-height: var(--nl-lh-small) !important;
color: var(--nl-ink); cursor: pointer; }
/*
* Отметку рисует тема — свой `svg` со скруглением 8 внутри строки способа,
* а настоящий переключатель спрятан. Круг здесь единственный на сайте,
* где радиус ноль везде (книга стиля), поэтому рисунок гасим и рисуем
* квадрат теми же средствами, что у галочки согласия.
*/
.nl-pay__methods .payment svg { display: none; }
.nl-pay__methods .payment { display: flex; align-items: flex-start;
gap: var(--nl-s3); }
.nl-pay__methods .payment::before {
content: ''; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
border: var(--nl-line) solid var(--nl-ink); background: var(--nl-paper);
box-sizing: border-box; }
/* Выбранный способ: заливка внутри рамки с полем по шкале. */
.nl-pay__methods li.wc_payment_method input[type="radio"]:checked ~ .payment::before,
.nl-pay__methods .wc_payment_method input[type="radio"]:checked ~ .payment::before {
background: var(--nl-ink);
box-shadow: inset 0 0 0 var(--nl-s1) var(--nl-paper); }
/*
* Согласие: подпись и ссылка стоят одной строкой (09.09.2026).
*
* Ссылка вынесена из метки — внутри неё нажатие забирала галочка. Обёртка
* держит их вместе флексом, поэтому строка читается как одно предложение.
*/
/*
* Согласие читается одним предложением: подпись и ссылка переносятся
* по словам, а не блоками (владелец, 09.09.2026: «почему там разрыв?»).
*
* Флекс ставил метку и ссылку соседними ящиками, и на узком экране ссылка
* целиком уезжала на свою строку. Теперь метка — строчный блок, и строка
* переносится по словам, как обычный текст.
*/
.nl-terms { display: block; margin-top: var(--nl-s4); }
/*
* Метка ведёт себя как текст: квадрат — строчный блок в начале строки,
* подпись и ссылка за ним переносятся по словам. `display: flex` разводил
* их по отдельным ящикам, и ссылка целиком уезжала на новую строку.
*/
.nl-terms .nl-agree { display: inline !important; min-height: 0;
padding: 0; margin: 0; }
.nl-terms .nl-agree__box { vertical-align: -4px; margin: 0 var(--nl-s2) 0 0; }
.nl-terms .nl-agree__text { display: inline; }
/*
* Ссылка не разрывается посередине: «пользовательское соглашение» уезжает
* на вторую строку целиком, а не половиной слова (владелец, 09.09.2026).
* На узком экране согласие набирается кеглем меты — тогда фраза встаёт
* в две строки без висячего хвоста.
*/
.nl-terms .nl-agree__link { display: inline-block; margin-left: var(--nl-s1); }
.nl-agree__link { font-size: var(--nl-small) !important;
line-height: var(--nl-lh-small) !important;
color: var(--nl-link) !important; text-decoration: none; }
/*
* Блок оплаты набирается плотнее (владелец, 09.09.2026: «слишком большие
* разрывы по вертикали»). Между заголовком и способом было 94 пикселя:
* складывались поля темы у скрытых блоков. Своих отступов у чужих абзацев
* не оставляем — расстояние держит шкала.
*/
.nl-pay__title { margin: 0 0 var(--nl-s3); }
.nl-pay__methods { margin: 0; }
/*
* Между способом оплаты и текстом о личных данных — один шаг шкалы.
*
* Складывались три поля: своё у блока кнопки, своё у обёртки согласия и
* `.form-row` от темы. Селектор повторяет чужой по весу, иначе тема
* возвращает свои двадцать.
*/
.nl-checkout .form-row.place-order.nl-pay__place { margin-top: var(--nl-s3); }
.nl-pay__place > p:first-of-type { margin-top: 0; }
.nl-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: var(--nl-s3); }
.nl-checkout .woocommerce-privacy-policy-text { margin: 0; }
.nl-checkout .woocommerce-privacy-policy-text p { margin: 0; }
/*
* Серую плашку плагина СДЭК гасим: фон здесь ничего не разделяет — способы
* и так разведены строками, а на белой полосе чекаута он читается как ошибка.
* Селекторы перечислены поимённо: плагин красит несколько вложенных блоков.
*/
.nl-ship .wc-edostavka-method-additional-info,
.nl-ship .wc-edostavka-method-additional-info > *,
.nl-ship .wc-edostavka-method-description,
.nl-ship .wc-edostavka-method-delivery-time,
.nl-ship .wc-edostavka-method-button {
background: none !important; background-color: transparent !important;
padding: 0 !important; margin: 0 !important; border: 0 !important; }
/* Внутри срока доставки жирного нет: плагин выделяет им слова «кол-во дней
доставки», и в строке-пояснении это лишний акцент (владелец, 09.09.2026). */
.nl-ship .wc-edostavka-method-delivery-time strong,
.nl-ship .wc-edostavka-method-additional-info strong { font-weight: 400 !important; }
/*
* Кнопка «выбрать пункт выдачи на карте» — наша кнопка, а не ссылка плагина
* (09.09.2026, владелец: «странная, с зелёным фоном»).
*
* Плагин печатает её со своим скруглением 5, подчёркиванием и высотой 68.
* Приводим к виду кнопки сайта: рамка, радиус ноль, высота цели нажатия.
*/
.nl-ship .wc-edostavka-method-button a,
.nl-ship .wc-edostavka-method-button button,
.nl-ship__point a,
.nl-ship__point button {
display: inline-flex !important; align-items: center; justify-content: center;
width: auto !important; min-height: var(--nl-tap); height: auto !important;
margin: var(--nl-s3) 0 0 !important; padding: 0 var(--nl-s4) !important;
border: var(--nl-line) solid var(--nl-ink) !important; border-radius: 0 !important;
background: var(--nl-paper) !important; color: var(--nl-ink) !important;
font-family: var(--nl-font) !important;
font-size: var(--nl-small) !important; line-height: var(--nl-lh-small) !important;
text-decoration: none !important; cursor: pointer; }
.nl-ship .wc-edostavka-method-button a:hover,
.nl-ship .wc-edostavka-method-button button:hover {
background: var(--nl-ink) !important; color: var(--nl-paper) !important; }
/*
* Срок доставки виден у каждого способа, а не только у выбранного
* (09.09.2026, владелец: «показывать сразу, чтобы не прыгало»).
*
* Плагин прячет пояснение у невыбранных, и высота блока менялась при каждом
* переключении: 118 пикселей на курьере против 174 на пункте выдачи —
* страница дёргалась под пальцем. Показываем всем; кнопку выбора пункта
* плагин по-прежнему печатает только выбранному, и это верно: нажимать
* её у невыбранного способа некуда.
*/
.nl-ship__method .wc-edostavka-method-additional-info { display: block !important; }
.nl-ship__method .wc-edostavka-method-delivery-time { display: block !important; }
/*
* Место под кнопку пункта выдачи держится всегда: она появляется только
* у выбранного способа, и без запаса блок подпрыгивал на её высоту.
*/
.nl-ship__slot:not(:empty) { min-height: 174px; }
@media (max-width: 991px) {
/* На узком экране строки переносятся, и запас нужен больше. */
.nl-ship__slot:not(:empty) { min-height: 210px; }
}
/* Адресные поля идут после способов — отделяем их шагом шкалы. */
.nl-ship__fields { margin-top: var(--nl-s5); }
/*
* Кнопка пункта выдачи стоит на месте поля адреса и той же величины
* (09.09.2026): порядок блока — способ, город, адрес либо пункт. Разной
* высоты у них быть не должно, иначе блок прыгает при переключении.
*/
/*
* Кнопка занимает столько же места, сколько поле адреса на её месте:
* подпись 17 + отступ 4 + поле 52. Иначе блок менял высоту при каждом
* переключении способа (владелец 09.09.2026: «чтобы по высотам всегда
* было одинаково»).
*/
.nl-ship__fields .wc-edostavka-method-button {
display: flex; align-items: flex-end;
min-height: calc(17px + var(--nl-s1) + var(--nl-field-h));
margin-top: var(--nl-s5) !important; }
.nl-ship__fields .wc-edostavka-method-button a,
.nl-ship__fields .wc-edostavka-method-button button {
width: 100% !important; min-height: var(--nl-field-h) !important;
margin: 0 !important; }
/* Пояснения плагина внутри способа больше не нужны — кнопка уехала вниз. */
.nl-ship__method .wc-edostavka-method-button { display: none !important; }
/*
* Метка «(необязательно)» у подписи рассылки убрана (владелец, 09.09.2026):
* WooCommerce ставит её в конец строки, и на узком экране она разрывала
* подпись пополам. Обязательные поля и так помечены звёздочкой.
*/
.nl-checkout .optional { display: none; }
/*
* Блок «приедет посылкой» на телефоне: запас высоты меньше, чем на десктопе.
*
* Общий резерв 210 брался под две строки способа с переносом, но после
* переноса кнопки в поля способы стали короче — под ними оставалась дыра
* (владелец, 09.09.2026: «после пункта выдачи огромный разрыв, на десктопе
* этого не было»). Резерв теперь считается по содержимому, а высоту блока
* держит равенство «адрес или кнопка».
*/
@media (max-width: 991px) {
.nl-ship__slot:not(:empty) { min-height: 0; }
}
/*
* Один кегль на весь блок оплаты (09.09.2026, владелец: «я прочитал одним
* кеглем, ваши личные данные и оплата при доставке — другим, высоты разрывов
* везде разные»).
*
* Пояснения и подписи здесь — один разряд текста, и разряд у него один:
* 14 с интерлиньяжем 1,4. Прежние 11 у согласия были подгонкой под одну
* строку, 13 у личных данных — наследством. Шаг между всеми тремя блоками
* одинаковый.
*/
.nl-pay__methods label,
.nl-pay__place > p,
.nl-checkout .woocommerce-privacy-policy-text p,
.nl-terms,
.nl-terms .nl-agree__text,
.nl-terms .nl-agree__link {
font-size: var(--nl-small) !important; line-height: var(--nl-lh-small) !important; }
.nl-checkout .form-row.place-order.nl-pay__place { margin-top: var(--nl-s3); }
.nl-checkout .woocommerce-privacy-policy-text { margin: 0; }
.nl-checkout .woocommerce-terms-and-conditions-wrapper,
.nl-terms { margin-top: var(--nl-s3); }
.nl-pay__submit { margin-top: var(--nl-s3) !important; }
/*
* Между итогом заказа и промокодом полосы нет (владелец, 09.09.2026):
* итог уже закрыт своей линией сверху, и вторая линия под ним делила
* то, что и так разделено. Расстояние — обычный шаг между блоками.
*/
.nl-checkout__order + .nl-promo,
.nl-promo.nl-checkout__block { border-top: 0; padding-top: 0;
margin-top: var(--nl-s7); }
/*
* Разрыв перед заголовком блока — ровно 32 по шкале (09.09.2026).
*
* Полный замер телефона (`scratchpad/razryvy.py`) показал четыре разрыва
* вне шкалы: 54 под заголовком страницы и по 50 перед каждым заголовком
* блока. Складывались отступ блока 32, отступ заголовка и линия. Теперь
* расстояние держит один отступ блока, а заголовки своих не носят.
*/
.nl-checkout__block > .nl-checkout__h,
.nl-checkout__block > .nl-pay__title,
.nl-checkout__block > .nl-ship__title { margin-top: 0; padding-top: 0; }
.nl-checkout__block { padding-top: var(--nl-s5); }
.nl-checkout__title { margin-bottom: var(--nl-s7); }
/*
* Первый блок под заголовком страницы отбит только полем заголовка —
* 32, столько же, сколько между остальными блоками до их линии.
*/
.nl-checkout__form > *:first-child > .nl-checkout__block:first-child { margin-top: 0; }
.nl-checkout__order .nl-order { margin-top: 0 !important; }
/* Форма чекаута не носит своих полей: тема даёт `.checkout` внутренний
отступ 10, и первый блок отходил от заголовка на 42 вместо 32. */
.nl-checkout .checkout.woocommerce-checkout { padding-top: 0; }
/*
* Разрывы блока оплаты выровнены по чернилам, а не по ящикам
* (09.09.2026, замер `scratchpad/chernila.py`).
*
* Ящик текстовой строки выше самих букв на половину интерлиньяжа сверху
* и снизу, поэтому равные отступы дают разный воздух на глаз: при ровных
* 12 выходило 31 после заголовка, 27 после способа, 2 перед согласием
* и 14 перед кнопкой. Владелец увидел это на своём телефоне.
*
* Целимся в 24 пикселя видимого воздуха между смысловыми строками блока
* и в 12 под кнопкой, а числа отступов подобраны замером — они разные
* именно потому, что у соседей разные кегли и интерлиньяжи.
*/
.nl-pay__title { margin: 0 0 var(--nl-s1); }
.nl-checkout .form-row.place-order.nl-pay__place { margin-top: var(--nl-s2); }
.nl-checkout .woocommerce-terms-and-conditions-wrapper,
.nl-terms { margin-top: var(--nl-s7); }
.nl-pay__submit { margin-top: var(--nl-s5) !important; }
.nl-pay__note { margin-top: var(--nl-s3); }
/*
* Точная развёртка блока оплаты по чернилам (09.09.2026).
*
* Обёртка согласия `.nl-terms` содержит внутри себя абзац о личных данных,
* поэтому её отступ отбивает не галочку, а весь текст: между абзацем
* и галочкой оставалось два пикселя, а перед абзацем — сорок семь.
* Разводим их по отдельности.
*/
.nl-checkout .wc_payment_method { margin-bottom: 0 !important; }
.nl-checkout .woocommerce-privacy-policy-text { margin: 0 0 var(--nl-s5); }
.nl-checkout .woocommerce-terms-and-conditions-wrapper,
.nl-terms { margin-top: var(--nl-s5); }
/*
* Итоговая развёртка блока оплаты по чернилам (09.09.2026).
*
* Замер `chernila.py` после каждой правки: было 26 / 23 / 35 / 26 / 22 / 8,
* стало ровно по 24 между смысловыми строками и 12 под кнопкой. Числа
* отступов разные, потому что у соседей разные кегли: воздух считается
* от букв, а не от ящиков.
*/
.nl-checkout .woocommerce-terms-and-conditions-wrapper,
.nl-terms { margin-top: var(--nl-s2); }
.nl-checkout .nl-pay__note { margin-top: var(--nl-s2) !important;
margin-bottom: 0 !important; }
/*
* Разрывы блока доставки — по чернилам (09.09.2026, замер на десктопе:
* было 23 / 16 / 52 / 10 / 1 / 68 / 3 / 51).
*
* Разнобой давал резерв высоты гнезда: он держал место под кнопку пункта
* выдачи, которая с тех пор уехала в поля. Резерв больше не нужен —
* равенство «адрес или кнопка» держит высоту само.
*/
.nl-ship__slot:not(:empty) { min-height: 0; }
.nl-ship__methods { margin: 0; }
.nl-ship__method { padding: var(--nl-s2) 0; }
.nl-ship__method + .nl-ship__method { margin-top: var(--nl-s2); }
/* Срок доставки стоит вплотную под своей строкой, а не отдельным блоком. */
.nl-ship__method .wc-edostavka-method-additional-info { margin-top: var(--nl-s1) !important; }
.nl-ship__fields { margin-top: var(--nl-s6); }
/*
* Точная развёртка блока доставки (09.09.2026, замер по чернилам).
*
* Оставались три больших провала: 56 между вторым способом и полем города,
* 37 между сроком и полем, 51 перед кнопкой. Их давали собственные поля
* гнезда, полей и кнопки, сложенные друг с другом.
*/
.nl-ship__slot { padding-bottom: 0; }
.nl-ship__fields { margin-top: var(--nl-s5) !important; }
.nl-ship__fields > .form-row:first-child { margin-top: 0 !important; }
.nl-ship__fields .wc-edostavka-method-button { margin-top: var(--nl-s5) !important;
min-height: 0; display: block; }
.nl-ship__fields .wc-edostavka-method-button a,
.nl-ship__fields .wc-edostavka-method-button button { margin: 0 !important; }
/*
* Пустой блок пояснения у невыбранного способа не занимает места.
*
* Плагин печатает `wc-edostavka-method-additional-info` всегда, но срок
* кладёт только выбранному — у соседа оставалась пустая коробка, и между
* способами зияло 56 пикселей вместо 24 (замер по чернилам 09.09.2026).
*/
.nl-ship__method .wc-edostavka-method-additional-info:empty,
.nl-ship__method .wc-edostavka-method-additional-info:not(:has(.wc-edostavka-method-delivery-time)) {
display: none !important; }
/* Кнопка пункта выдачи — на том же шаге, что поля. */
.nl-ship__fields .wc-edostavka-method-button { margin-top: var(--nl-s6) !important; }
/*
* Срок доставки виден у каждого способа, а не только у выбранного.
*
* Плагин печатает его обоим, но невыбранному отдаёт прозрачным: строка
* занимает место и не читается, отчего между способами зиял провал.
* Возвращаем цвет пояснения — тот же, что у остальных подписей страницы.
*/
.nl-ship__method .wc-edostavka-method-delivery-time,
.nl-ship__method .wc-edostavka-method-delivery-time * {
opacity: 1 !important; visibility: visible !important;
color: var(--nl-muted) !important; }
/*
* Способы доставки до выбора города — заглушка (09.09.2026).
*
* Показывают, что вариантов два, но выбрать нельзя: цену и срок СДЭК
* считает от города. Приглушены, переключатель нарисован пустым квадратом
* без обработчика — нажимать нечего.
*/
.nl-ship__method--ждём { color: var(--nl-muted); }
.nl-ship__method--ждём .nl-ship__method-label { color: var(--nl-muted) !important; }
.nl-ship__radio--ждём { display: inline-block; width: 20px; height: 20px;
margin: 2px 0 0; border: var(--nl-line) solid var(--nl-muted);
background: var(--nl-paper); box-sizing: border-box; }
.nl-ship__methods--ждём + .nl-ship__empty { margin-top: var(--nl-s3); }
/*
* Страница корзины (09.09.2026) — те же приёмы, что на чекауте.
*
* Разметка переписана по образцу блока «ваш заказ», поэтому здесь только
* то, что отличает страницу от блока: своя колонка, заголовок и кнопка.
* Прежние правила `section.cart` (шрифт, кегли, кнопка темы) больше не
* нужны — старой разметки нет.
*/
.nl-cart-page { font-family: var(--nl-font); color: var(--nl-ink); }
/* Колонка той же меры, что на чекауте: контейнер темы несёт свои поля,
и колонка вставала на 40 вместо 20 — вдвое дальше от края, чем строки
витрины и чекаута (замер 09.09.2026). */
.nl-cart-page .container { padding-left: 0; padding-right: 0; }
.nl-cart-page__inner { max-width: 640px; margin: 0 auto;
padding: var(--nl-s6) 0 var(--nl-s7); }
.nl-cart-page .nl-order { margin-top: var(--nl-s6); }
.nl-cart-page__go { width: 100%; margin-top: var(--nl-s5); }
/* Свойства варианта печатает WooCommerce своим списком — гасим его вид. */
.nl-cart-page .nl-order__qty p,
.nl-cart-page .nl-order__qty dl,
.nl-cart-page .nl-order__qty dt,
.nl-cart-page .nl-order__qty dd { margin: 0; padding: 0; font: inherit; color: inherit; }
/* Название ведёт на товар, но ссылкой не выглядит: в списке покупок это
строка, а не переход (тот же приём, что в заказе). */
.nl-cart-page .nl-order__name a { color: var(--nl-ink) !important; text-decoration: none; }