/* ==========================================================================
   Линия 3 — тема «Вывеска». Один файл стилей на всю линию.
   Из настроек магазина приходят две переменные (инлайном в header.tpl):
     --brand-accent  фирменный цвет
     --brand-ground  базовый фон
   Всё остальное выводится ниже. Единственный цвет вне пары — --color-danger.
   Сетка 1440: поля 64, контент 1312. Радиус 0, теней нет.
   ========================================================================== */

:root {
  --brand-accent: #E2B007;
  --brand-ground: #F7F4EE;

  --bg: var(--brand-ground);
  --a: var(--brand-accent);
  /* Тёмная часть — в oklab: подмешивание чёрного в oklch не переносит тон фона,
     и вся тёмная половина выходила нейтрально-серой на тёплом. Доля фона 14 %. */
  --ink: color-mix(in oklab, var(--bg) 14%, black);
  --mute: color-mix(in oklab, var(--ink) 58%, var(--bg));
  --line: color-mix(in oklab, var(--ink) 14%, var(--bg));
  --card: color-mix(in oklab, var(--bg) 94%, var(--ink));
  --a-ink: color-mix(in oklch, var(--a) 20%, black);
  --ok: color-mix(in oklch, var(--ink) 48%, var(--a));
  --sel: color-mix(in oklab, var(--a) 12%, var(--bg));   /* фон выбранного варианта */
  --a-hover: color-mix(in oklch, var(--a) 92%, black);
  --a-text: color-mix(in oklch, var(--a) 45%, var(--ink));   /* акцент для текста при наведении: читается на фоне */
  --ink-hover: color-mix(in oklch, var(--ink) 85%, var(--bg));
  --color-danger: #A03C28;
  --photo: #ffffff;

  --font-display: "Piazzolla", Georgia, "Times New Roman", serif;
  --font-body: "Commissioner", Arial, Helvetica, sans-serif;

  --gutter: 64px;
  --container: 1312px;
  --rail: 320px;
  --filters: 260px;
  --buy: 400px;
  --tap: 44px;
}
.theme-dark {
  --ink: color-mix(in oklab, var(--bg) 6%, white);
  --a-ink: color-mix(in oklch, var(--a) 20%, black);
}
@supports not (color: color-mix(in oklch, #000 50%, #fff)) {
  :root { --ink: #080808; --mute: #605F5D; --line: #D0CEC9; --card: #E6E3DE; --sel: #F5ECD9; --a-ink: #2E2500; --ok: #8A6D0A; --a-hover: #CFA406; --ink-hover: #3A3630; --a-text: #6E5606; }
}
@media (max-width: 1279px) { :root { --gutter: 40px; --filters: 220px; --rail: 260px; } }
@media (max-width: 1023px) { :root { --gutter: 32px; } }
@media (max-width: 767px)  { :root { --gutter: 16px; } }

/* ---------- база ----------
   Сбросы элементов обёрнуты в :where(.line3): специфичность (0,0,1), чтобы любой класс
   компонента (.l3-btn, .l3-tile--cta:hover) их перебивал. Раньше `.line3 button` (0,1,1)
   гасил фон и отступы кнопок, а `.line3 a:hover` красил текст акцентной плитки в акцент. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.line3 { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
:where(.line3) h1, :where(.line3) h2, :where(.line3) h3, :where(.line3) h4 { margin: 0; font-weight: 400; }
:where(.line3) h1, :where(.line3) h2 { font-family: var(--font-display); letter-spacing: -0.015em; }
:where(.line3) h1 { font-size: 44px; line-height: 1.05; text-wrap: pretty; }
:where(.line3) h2 { font-size: 34px; line-height: 1.1; }
:where(.line3) h3 { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.3; }
:where(.line3) p { margin: 0; }
:where(.line3) ul, :where(.line3) ol { margin: 0; padding: 0; list-style: none; }
:where(.line3) a { color: inherit; text-decoration: none; transition: color .15s; }
@media (hover: hover) { :where(.line3) a:hover { color: var(--a-text); } }
:where(.line3) img { max-width: 100%; height: auto; }
:where(.line3) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:where(.line3) input, :where(.line3) select, :where(.line3) textarea { font: inherit; color: inherit; }
:where(.line3) table { border-collapse: collapse; width: 100%; }
:where(.line3) :focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.line3 .num, .line3 td, .line3 .price { font-variant-numeric: tabular-nums; }
.line3 .hidden, .line3 [hidden] { display: none !important; }
.line3 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.line3 .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 200; }
.line3 .skip:focus { left: 16px; top: 16px; }

.l3-wrap { max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.l3-kick { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.l3-mute { color: var(--mute); }
.l3-ok { color: var(--ok); }
.l3-ul { border-bottom: 1px solid var(--ink); }
.l3-ul:hover { color: var(--a-text); border-color: var(--a-text); }
.l3-ul-soft { border-bottom: 1px solid var(--line); }

/* секции */
.l3-sec { margin-top: 72px; }
.l3-sec--rule { padding-top: 32px; border-top: 1px solid var(--ink); }
.l3-sec--two { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 48px; align-items: start; }
.l3-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.l3-sec-h h2 small { font-family: var(--font-body); font-size: 16px; color: var(--mute); margin-left: 10px; letter-spacing: 0; }
.l3-sec-h > a { white-space: nowrap; }
@media (max-width: 767px) { .l3-sec-h { flex-wrap: wrap; gap: 10px 24px; } .l3-sec-h h2 small { display: block; margin: 6px 0 0; font-size: 14px; } }
.l3-lead { font-size: 17px; line-height: 1.5; color: var(--mute); }
.l3-prose { font-size: 15px; line-height: 1.55; color: var(--mute); max-width: 960px; }
.l3-prose p { margin: 0 0 14px; }
.l3-prose h2 { font-size: 28px; color: var(--ink); margin: 24px 0 10px; }
.l3-prose h3, .l3-prose h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 16px 0 6px; }
.l3-prose ul { list-style: disc; padding-left: 20px; margin: 0 0 14px; }
.l3-prose ol { list-style: decimal; padding-left: 20px; margin: 0 0 14px; }
.l3-prose li { margin: 0 0 6px; }
.l3-prose a { color: var(--ink); border-bottom: 1px solid var(--line); }
.l3-prose table { margin: 0 0 14px; }
.l3-prose td, .l3-prose th { padding: 8px 12px 8px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.l3-prose img { display: block; margin: 0 0 14px; }
.l3-prose--cols { columns: 2; column-gap: 40px; }
.l3-prose--cols p, .l3-prose--cols h3 { break-inside: avoid; }
@media (max-width: 1023px) { .l3-prose--cols { columns: 1; } .l3-sec--two { grid-template-columns: minmax(0, 1fr); gap: 20px; } .l3-sec { margin-top: 56px; } }

/* кнопки */
.l3-btn { display: inline-grid; place-items: center; height: var(--tap); padding: 0 20px; font-weight: 600; font-size: 14px; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.l3-btn--primary { background: var(--a); color: var(--a-ink); height: 52px; padding: 0 28px; font-size: 17px; }
.l3-btn--primary:hover { background: var(--a-hover); color: var(--a-ink); }
.l3-btn--ink { background: var(--ink); color: var(--bg); }
.l3-btn--ink:hover { background: var(--ink-hover); color: var(--bg); }
.l3-btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.l3-btn--outline:hover { color: var(--a-text); box-shadow: inset 0 0 0 1.5px var(--a); }
.l3-btn--outline[disabled], .l3-btn--outline.is-muted { color: var(--mute); box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; }
.l3-btn--sm { height: 40px; padding: 0 16px; }
.l3-btn--md { height: 48px; padding: 0 24px; font-size: 16px; }
.l3-btn[disabled] { opacity: .5; cursor: default; }

/* поля */
.l3-field { display: grid; gap: 6px; font-size: 14px; }
.l3-field > span:first-child { color: var(--mute); }
.l3-input { height: var(--tap); border: 1px solid var(--line); background: transparent; padding: 0 12px; font-size: 15px; color: var(--ink); width: 100%; border-radius: 0; -webkit-appearance: none; }
.l3-input:focus { border: 1.5px solid var(--ink); outline: 0; }
textarea.l3-input { height: auto; min-height: 110px; padding: 12px; resize: vertical; }
select.l3-input { -webkit-appearance: menulist; appearance: auto; }
.l3-field.is-error > span:first-child, .l3-field.is-error .l3-hint { color: var(--color-danger); }
.l3-field.is-error .l3-input { border: 1.5px solid var(--color-danger); }
.l3-hint { font-size: 13px; color: var(--mute); }
.l3-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.l3-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.l3-check .box { width: 16px; height: 16px; border: 1px solid var(--ink); flex: none; background: transparent; }
.l3-check input:checked + .box { background: var(--ink); }
.l3-check input:focus-visible + .box { outline: 2px solid var(--a); outline-offset: 2px; }
.l3-check input:disabled ~ * { color: var(--mute); }

/* чипы и статусы */
.l3-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--ink); font-size: 13px; line-height: 1.2; }
.l3-chip.is-pinned { background: var(--ink); color: var(--bg); }
.l3-chip.is-link { border-color: var(--line); }
.l3-chip .x { color: var(--mute); }
.l3-chip:hover .x { color: var(--a-text); }
.l3-status-ok { color: var(--ok); }
.l3-status-order { color: var(--mute); }

/* сообщения */
.l3-notice { padding: 14px 16px; border: 1px solid var(--ink); font-size: 15px; margin: 0 0 20px; }
.l3-notice.is-error { border: 1.5px solid var(--color-danger); color: var(--color-danger); }
.l3-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 12px 18px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 300; max-width: calc(100% - 32px); }
.l3-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* пагинация */
.l3-pagination { display: flex; gap: 4px; align-items: center; color: var(--mute); font-size: 15px; flex-wrap: wrap; }
.l3-pagination a, .l3-pagination span, .l3-pagination b { min-width: 36px; height: 36px; display: grid; place-items: center; font-weight: 400; }
.l3-pagination b, .l3-pagination .is-current, .l3-pagination li.active span { background: var(--ink); color: var(--bg); }
.l3-pagination ul { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.l3-pagination li { display: block; }
.l3-pagination .next, .l3-pagination .prev { padding: 0 12px; color: var(--ink); }
.l3-pagination .dots { padding: 0 6px; }

/* аккордеон вопросов */
.l3-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.l3-faq > ul { min-width: 0; }
.l3-faq li { border-top: 1px solid var(--line); }
.l3-faq .q { display: flex; justify-content: space-between; gap: 16px; font-weight: 600; width: 100%; text-align: left; cursor: pointer; padding: 16px 0; min-height: 44px; }
.l3-faq .q .pm { color: var(--mute); flex: none; }
.l3-faq .a { margin: -8px 0 16px; color: var(--mute); max-width: 76ch; display: none; }
.l3-faq li.open .a { display: block; }
.l3-faq li.open .q .pm::before { content: "—"; }
.l3-faq li:not(.open) .q .pm::before { content: "+"; }
.l3-faq .a p { margin: 0 0 8px; }
@media (max-width: 767px) { .l3-faq { grid-template-columns: 1fr; } }

/* реквизиты (о компании) */
.l3-req { font-size: 15px; max-width: 760px; }
.l3-req tr { border-bottom: 1px solid var(--line); }
.l3-req th { width: 240px; text-align: left; font-weight: 400; color: var(--mute); padding: 12px 12px 12px 0; vertical-align: top; }
.l3-req td { padding: 12px 0; }

/* таблицы */
.l3-table { font-size: 15px; }
.l3-table thead th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); text-align: left; font-weight: 400; padding: 0 12px 10px; border-bottom: 1px solid var(--ink); }
.l3-table thead th:first-child { padding-left: 0; }
.l3-table thead th:last-child { padding-right: 0; }
.l3-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.l3-table td:first-child { padding-left: 0; }
.l3-table td:last-child { padding-right: 0; }
.l3-table .r { text-align: right; white-space: nowrap; }
.l3-table .l3-status-ok, .l3-table .l3-status-order { white-space: nowrap; }
.l3-table .b { font-weight: 600; }
.l3-table--nowrap td { white-space: nowrap; }
.l3-table--nowrap td:first-child { white-space: normal; min-width: 160px; }
.l3-table tr.is-current td { font-weight: 600; }
.l3-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.l3-specs { font-size: 15px; max-width: 760px; }
.l3-specs td { padding: 11px 24px 11px 0; border-top: 1px solid var(--line); vertical-align: top; }
.l3-specs td:first-child { color: var(--mute); width: 300px; }
.l3-specs tr:last-child td { border-bottom: 1px solid var(--line); }
@media (max-width: 767px) { .l3-specs td:first-child { width: 45%; } .l3-specs { width: 100%; table-layout: fixed; } .l3-specs td { overflow-wrap: anywhere; } }

/* факты числами */
.l3-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 24px; border-top: 1px solid var(--ink); }
.l3-fact b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; }
.l3-fact span { display: block; font-size: 14px; color: var(--mute); margin-top: 6px; }
@media (max-width: 1023px) { .l3-facts { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 767px) { .l3-facts { grid-template-columns: 1fr 1fr; gap: 20px 16px; } .l3-fact b { font-size: 34px; } }

/* ---------- шапка ---------- */
.l3-hdr { padding-top: 18px; }
.l3-hdr--home { padding-top: 26px; text-align: center; }
.l3-hdr-top { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--mute); }
.l3-hdr-top .cart { color: var(--ink); font-weight: 600; }
.l3-hdr-top .links { display: flex; gap: 18px; }
/* Полоса главной берёт разметку значков целиком, поэтому гасим у неё
   выравнивание вправо: здесь блок и так стоит в своём краю. */
.l3-hdr-top .l3-hdr-links { justify-content: flex-end; gap: 18px; font-size: inherit; }
.l3-hdr-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.l3-sign { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; line-height: 1; }
.l3-sign img { display: block; height: 34px; width: auto; max-width: 260px; object-fit: contain; }
.l3-hdr--home .l3-sign--big { font-size: 56px; margin-top: 10px; }
.l3-hdr--home .l3-sign--big img { height: 56px; max-width: 380px; }
.l3-hdr--home .l3-kick--big { margin-top: 8px; font-size: 13px; }
/* Компактная строка главной — только для узких экранов: до 767 шапка главной занимала
   222-262 px против 125 у остальных страниц (служебная полоса + крупная вывеска + подпись).
   Разметка одна, переключение здесь. */
.l3-hdr-row--sm { display: none; }
.l3-hdr-links { display: flex; justify-content: flex-end; gap: 24px; font-size: 14px; color: var(--mute); }
.l3-hdr-links .cart { color: var(--ink); font-weight: 600; }
.l3-hdr-links button { color: inherit; }
.l3-hdr-links a:hover, .l3-hdr-links button:hover { color: var(--a-text); }
/* С 481 в строке стоят подписи: значки и счётчики спрятаны, разметка одна и та же. */
/* Значок перед надписью: до 1023 надпись прячется и остаётся один значок,
   на десктопе стоят оба (замечание заказчика 27.09.2026). Число в углу
   (`.ct`) на десктопе по-прежнему не нужно — его говорит сама надпись
   («Корзина: 2»). */
.l3-hdr-links .ico { position: relative; display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.l3-hdr-links .ico .ic { display: block; }
.l3-hdr-links .ico .ic svg { display: block; width: 18px; height: 18px; }
.l3-hdr-links .ico .ct { display: none; }
.l3-hdr-links .ico--search .ic--close { display: none; }
.l3-hdr.is-searching .l3-hdr-links .ico--search .ic--search { display: none; }
.l3-hdr.is-searching .l3-hdr-links .ico--search .ic--close { display: block; }
.l3-hdr-links .ico .ic svg { display: block; }
.l3-nav { display: flex; justify-content: center; align-items: center; gap: 32px; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-size: 15px; flex-wrap: wrap; position: relative; }
.l3-hdr--home .l3-nav { margin-top: 24px; padding: 15px 0; }
.l3-nav .sep { color: var(--line); }
.l3-nav a.svc { color: var(--mute); }
.l3-nav a.svc:hover { color: var(--a-text); }
.l3-nav a.is-active { font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); padding-bottom: 13px; margin-bottom: -15px; }
.l3-nav .more { position: relative; }
/* Стрелка не должна переноситься на вторую строку: на узком экране кнопка
   оказывается в прокручиваемой полосе, где места по ширине сколько угодно. */
.l3-nav .more > button { color: inherit; white-space: nowrap; }
.l3-nav .more-list { display: none; position: absolute; left: 0; top: 100%; margin-top: 15px; background: var(--bg); border: 1px solid var(--ink); min-width: 240px; padding: 8px 0; z-index: 50; text-align: left; }
.l3-nav .more.open .more-list { display: block; }
.l3-nav .more-list a { display: flex; justify-content: space-between; gap: 16px; padding: 8px 16px; }
.l3-nav .more-list a span { color: var(--mute); }
.l3-search { display: none; margin-top: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
.l3-search.open, .l3-search--static { display: block; }
.l3-search form { display: flex; gap: 12px; align-items: center; }
.l3-search input { flex: 1; min-width: 0; height: 52px; border: 1.5px solid var(--ink); background: transparent; padding: 0 16px; font-size: 18px; }
.l3-search input:focus { outline: 0; }
.l3-search button { height: 52px; padding: 0 24px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 16px; }
.l3-hdr--checkout .l3-hdr-links { align-items: baseline; }
.l3-hdr--checkout .l3-rule { margin-top: 18px; border-top: 1px solid var(--ink); }
@media (max-width: 1023px) {
  .l3-hdr-row { grid-template-columns: auto 1fr; }
  /* Главная до 1023: служебная полоса, крупная вывеска и подпись под ней не выводятся —
     вместо них та же строка «вывеска + значки», что на внутренних страницах. */
  .l3-hdr--home { padding-top: 0; text-align: left; }
  .l3-hdr--home .l3-hdr-top, .l3-hdr--home .l3-sign--big, .l3-hdr--home .l3-kick--big { display: none; }
  .l3-hdr--home .l3-hdr-row--sm { display: grid; }
  .l3-hdr--home .l3-nav { margin-top: 0; }
  .l3-hdr--home .l3-nav a.svc[data-l3-search-toggle] { display: none; }
  .l3-hdr--home.is-searching .l3-nav { display: none; }
  .l3-hdr-row .l3-kick { display: none; }
  .l3-hdr-row .l3-sign { justify-self: start; }
  .l3-nav { justify-content: flex-start; gap: 24px; }
  /* Полоса разделов здесь переносится, и разделитель «|» повисает в конце строки —
     служебные ссылки и так отделены переносом. */
  .l3-nav .sep { display: none; }
}
@media (max-width: 767px) {
  .l3-hdr-top { font-size: 13px; }
  .l3-sign { font-size: 26px; }
  .l3-sign img { height: 26px; }
  .l3-hdr-links { gap: 14px; font-size: 13px; } .l3-hdr-links a, .l3-hdr-links button { display: inline-block; padding: 12px 0; line-height: 20px; white-space: nowrap; }
  /* Строка не переносится: если не хватает ширины, ужимается вывеска, а не подписи. */
  .l3-hdr-row .l3-sign { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .l3-hdr-row .l3-sign img { max-width: 100%; }
  .l3-hdr-links .lbl { display: none; }
  .l3-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 20px; padding: 12px 0; scrollbar-width: none; justify-content: flex-start; }
  .l3-nav::-webkit-scrollbar { display: none; }
  /* Полоса прокручивается, а полосы прокрутки нет: без подсказки правый край выглядит
     обрезанным. Растушёвываем последние 24 px — видно, что дальше есть ещё. */
  .l3-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .l3-nav a { white-space: nowrap; }
  .l3-nav a.is-active { padding-bottom: 11px; margin-bottom: -13px; }
  .l3-search input { height: 48px; font-size: 16px; }
  .l3-search button { height: 48px; padding: 0 16px; }
}
/* До 480 подписи «Сравнение · N» и «Корзина · N · сумма» уступают место трём значкам
   40×40 (блок 132 px — на 320 не переполняется). Сумма из шапки уходит совсем: она
   есть в корзине и в липкой панели покупки. Подпись остаётся в разметке для
   озвучивания — только уводится с экрана. */
@media (max-width: 480px) {
  .l3-hdr-links { gap: 6px; }
  .l3-hdr-links .ico { flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; color: var(--ink); }
  .l3-hdr-links .ico .ic { display: block; }
  .l3-hdr-links .ico .ic--close { display: none; }
  .l3-hdr-links .ico .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .l3-hdr-links .ico .ct { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; font-weight: 600; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
  .l3-hdr-links .ico .ct[hidden] { display: none; }
  .l3-hdr-links .ct--ink { background: var(--ink); color: var(--bg); }
  .l3-hdr-links .ct--a { background: var(--a); color: var(--a-ink); }
  /* Пустое сравнение значком не показываем вовсе; пустая корзина — значок без счётчика. */
  .l3-hdr-links .ico--cmp.is-empty { display: none; }
  /* Открытый поиск подменяет строку значков: крестик и корзина, поле — сразу под ними. */
  .l3-hdr.is-searching .l3-hdr-links .ico--cmp { display: none; }
  .l3-hdr.is-searching .l3-hdr-links .ico--search .ic--search { display: none; }
  .l3-hdr.is-searching .l3-hdr-links .ico--search .ic--close { display: block; }
  .l3-hdr:not(.l3-hdr--home).is-searching .l3-nav { display: none; }
  .l3-search { padding: 12px 0 16px; }
  .l3-search form { gap: 8px; }
  .l3-search input { height: 44px; padding: 0 12px; font-size: 16px; }
  .l3-search--menu { display: block; }
  .l3-search--menu form { display: flex; }
  .l3-search button { height: 44px; padding: 0 16px; font-size: 15px; }
}

/* подсказки в поисковой строке (спека §5, артборды 1e и 7b)
   Панель стоит в потоке под полем и во всю его ширину вместе с кнопкой «Найти»:
   не поверх страницы, без тени — список раздвигает содержимое, а не накрывает его.
   С 1024 две колонки: модели и строка «Все результаты» слева, разделы и чипы
   справа; до 1023 колонка одна (вторая отняла бы у моделей 320 px из 704). */
.l3-sg { margin-top: 12px; border: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-content: start; }
.l3-sg[hidden] { display: none; }
/* Ждём ответ — прежние подсказки остаются на месте приглушёнными; спиннера нет. */
.l3-sg.is-wait { opacity: .55; }
.l3-sg.is-single { grid-template-columns: minmax(0, 1fr); }
.l3-sg-main { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; }
.l3-sg-side { grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--line); min-width: 0; }
.l3-sg-all { grid-column: 1; grid-row: 2; align-self: start; }
.l3-sg.is-single .l3-sg-side { display: none; }
.l3-sg-main:empty, .l3-sg-side:empty, .l3-sg-all:empty { display: none; }
.l3-sg-h { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding: 14px 20px 10px; }
.l3-sg-h--sep { border-top: 1px solid var(--line); }
/* строка модели: 68 px с фото 48 (до 1023 — 60 px с фото 44) */
.l3-sg-m { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 68px; padding: 10px 20px; border-top: 1px solid var(--line); color: inherit; }
.l3-sg-m .ph { display: block; width: 48px; height: 48px; background: var(--photo); border: 1px solid var(--line); overflow: hidden; }
.l3-sg-m .ph img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.l3-sg-m .ph--none { background: repeating-linear-gradient(135deg, var(--card) 0 8px, var(--line) 8px 9px); }
.l3-sg-m .tx { display: block; min-width: 0; }
/* Название — одна строка с многоточием: подсказка сканируется, а не читается. */
.l3-sg-m .nm { display: block; font-size: 16px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l3-sg-m .nm b { font-weight: 600; }
.l3-sg-m .sub { display: block; font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l3-sg-m .pr { display: block; font-weight: 600; font-size: 16px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* строка раздела: 44 px, счётчик моделей справа */
.l3-sg-s { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 11px 20px; border-top: 1px solid var(--line); font-size: 15px; color: inherit; }
.l3-sg-s span { color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.l3-sg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 16px; }
.l3-sg-chips a { min-height: 36px; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line); font-size: 13px; color: inherit; }
/* из подсказок всегда есть выход на страницу поиска */
.l3-sg-all a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 14px 20px; border-top: 1px solid var(--ink); font-weight: 600; font-size: 15px; line-height: 1; color: inherit; }
.l3-sg-all a span { color: var(--mute); font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; }
/* совпадений нет — панель не пустая */
.l3-sg-none { padding: 14px 20px; }
.l3-sg-none b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.l3-sg-none .hint { display: block; margin-top: 4px; font-size: 14px; color: var(--mute); }
.l3-sg-none .hint a { color: var(--ink); border-bottom: 1px solid var(--ink); }
.l3-sg-none .tel { display: block; min-height: 40px; margin-top: 10px; padding: 10px 0; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); }
/* наведение и клавиатурный выбор подсвечивают строку фоном --card */
.l3-sg .is-on { background: var(--card); }
@media (hover: hover) { .l3-sg-m:hover, .l3-sg-s:hover, .l3-sg-all a:hover, .l3-sg-chips a:hover, .l3-sg-none .tel:hover { background: var(--card); color: inherit; } }
@media (max-width: 1023px) {
  .l3-sg { margin-top: 10px; display: block; }
  .l3-sg-side { border-left: 0; }
  .l3-sg-side > .l3-sg-h:first-child { border-top: 1px solid var(--ink); }
  .l3-sg-h { padding: 12px 14px 8px; }
  .l3-sg-m { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; min-height: 60px; padding: 8px 14px; }
  .l3-sg-m .ph { width: 44px; height: 44px; }
  .l3-sg-m .nm { font-size: 15px; }
  .l3-sg-m .sub { font-size: 12px; }
  .l3-sg-m .pr { font-size: 15px; }
  .l3-sg-s { padding: 12px 14px; }
  .l3-sg-all a { padding: 13px 14px; }
  .l3-sg-chips { padding: 0 14px 14px; }
  .l3-sg-none { padding: 14px; }
  /* В одной колонке чипы показываются только у пустого поля: в выдаче их место
     занимают разделы и строка «Все результаты». */
  .l3-sg:not(.is-empty) .l3-sg-h--chips, .l3-sg:not(.is-empty) .l3-sg-chips { display: none; }
}

/* ---------- шторка разделов (до 1023) ----------
   Меню в пакете дизайнера не описано («шапка = навигация по разделам»), но лента прокруткой
   держит от силы девять разделов, а по линии их до 29. Устроена как шторка фильтров — та же
   механика (.open, translateX, маска, body.l3-noscroll) и та же типографика, только выезжает
   справа, от кнопки. Города у линии 3 нет, строки выбора города здесь тоже нет. */
.l3-menu, .l3-menu-mask { display: none; }
/* Селектор в два класса: базовое правило значков (.l3-hdr-links .ico) иначе перебивает. */
.l3-hdr-links .ico--menu { display: none; }
@media (max-width: 1023px) {
  .l3-hdr-links .ico--menu { display: inline-grid; }
  .l3-menu { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0;
    width: min(360px, 90vw); background: var(--bg); border-left: 1px solid var(--ink);
    overflow-y: auto; overscroll-behavior: contain; z-index: 120;
    transform: translateX(100%); transition: transform .2s; }
  .l3-menu.open { transform: none; }
  .l3-menu-mask.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 110; }
  .l3-menu-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); }
  .l3-menu-top .l3-search { flex: 1; min-width: 0; margin: 0; }
  .l3-menu-top .close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); }
  .l3-menu-list { display: flex; flex-direction: column; padding: 0 20px; }
  .l3-menu-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .l3-menu-list a span { color: var(--mute); font-size: 13px; }
  .l3-menu-list a.is-active { font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); padding-left: 12px; margin-left: -12px; }
  .l3-menu-list a:last-child { border-bottom: 0; }
  .l3-menu-group { padding: 20px 20px 0; }
  .l3-menu-group .l3-kick { display: block; margin-bottom: 4px; }
  .l3-menu-list--sub { padding: 0; }
  .l3-menu-list--sub a { min-height: 44px; font-size: 15px; color: var(--mute); }
  .l3-menu-list--sub a:hover { color: var(--a-text); }
  .l3-menu-contacts { display: flex; flex-direction: column; padding-bottom: 24px; }
  .l3-menu-contacts a { padding: 10px 0; font-size: 16px; }
}

/* крошки */
.l3-bc { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; font-size: 13px; color: var(--mute); }
.l3-bc span[aria-current] { color: var(--ink); }

/* заголовок страницы */
.l3-h1 { padding-top: 20px; display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: end; }
.l3-h1 .l3-lead { font-size: 15px; }
.l3-h1--one { grid-template-columns: 1fr; }
.l3-h1--half { grid-template-columns: 1fr 1fr; }
.l3-h1-line { padding-top: 20px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.l3-h1-line .cnt { font-size: 16px; color: var(--mute); }
.l3-h1 h1 .cnt, .l3-h1-line h1 .cnt { font-family: inherit; color: inherit; }
@media (max-width: 1023px) { .l3-h1, .l3-h1--half { grid-template-columns: 1fr; gap: 16px; } .line3 h1 { font-size: 36px; } }
@media (max-width: 767px) { .line3 h1 { font-size: 30px; } .line3 h2 { font-size: 26px; } }

/* ---------- подвал ---------- */
.l3-ftr { margin-top: 72px; padding: 28px 0 40px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--mute); display: grid; gap: 14px; }
.l3-ftr-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; }
.l3-ftr-row .contacts { color: var(--ink); }
.l3-ftr-row .contacts a:hover { color: var(--a-text); }
.l3-ftr-links { display: flex; flex-wrap: wrap; gap: 18px; }
.l3-ftr--short { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; }
.l3-ftr .backtop { color: var(--mute); }
@media (max-width: 767px) {
  .l3-ftr { margin-top: 56px; } .l3-ftr-row { flex-direction: column; }
  .l3-ftr-links { gap: 2px 18px; } .l3-ftr-links a, .l3-ftr-row .contacts a { display: inline-block; padding: 10px 0; }
  .l3-toc { gap: 0 18px; } .l3-toc a { display: inline-block; padding: 10px 0; }
}

/* ---------- карточка товара в списке ---------- */
/* Плитка (артборды 1b · 390, 1f · 768, 7d · 1440). Порядок сверху вниз: кадр фото → название →
   артикул → характеристики → распорка → цена → наличие → кнопка (и «Сравнить» с 768).
   Столбцы: 4 без фильтров (поиск, «все модели», избранное, скидки), 3 при фильтрах слева и в
   полосах is-3, 3 на 768–1023, 2 на 360–767, 1 ниже 360 — минимальная ширина столбца 150 px. */
/* Разделители волосяные и без двойных рамок, но не заливкой контейнера: при неполном
   последнем ряде пустые ячейки грида показывали фон --line серыми прямоугольниками (до трёх
   при четырёх столбцах). Рамку несёт сама плитка — пустых ячеек не существует. */
.l3-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--bg); border: 1px solid var(--line); border-right-width: 0; border-bottom-width: 0; }
.l3-list.is-3, .l3-cat:not(.l3-cat--full) .l3-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l3-list.no-top { border-top: 0; }
.l3-card { background: var(--bg); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* кадр — квадрат с волосяной рамкой и position: relative под плашку */
.l3-card .photo { position: relative; aspect-ratio: 1; background: var(--photo); border: 1px solid var(--line); display: block; overflow: hidden; }
.l3-card .photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.l3-card .photo.is-empty { background: repeating-linear-gradient(135deg, var(--card) 0 8px, var(--line) 8px 9px); }
/* плашка: правый нижний угол кадра, вплотную к рамке; не больше одной на карточку */
.l3-card .badge { position: absolute; right: 0; bottom: 0; padding: 5px 7px; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.l3-card .badge--hit { background: var(--a); color: var(--a-ink); }
.l3-card .badge--new { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.l3-card .badge--left { background: var(--bg); color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }
.l3-card .top { min-width: 0; }
.l3-card .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 18px; line-height: 1.25; }
/* Хвост прячем многоточием: составной код в узком столбце (176 пикселей в 154)
   торчал за карточку — laufen-shop.ru, cerstore.ru на 390 (обход 27.09.2026). */
.l3-card .sku { display: block; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.l3-card .specs { font-size: 13px; color: var(--mute); margin-top: 5px; }
/* низ прижат к нижнему краю: кнопки ряда стоят на одной линии независимо от длины названий */
.l3-card .foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
/* цена не переносится (tabular-nums, nowrap); старая цена — отдельный элемент строки и на
   узкой плитке падает под неё, а не выталкивает число за край */
.l3-card .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; white-space: nowrap; font-size: 21px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.l3-card .price s { color: var(--mute); font-weight: 400; font-size: 14px; }
.l3-card .stock { font-size: 13px; margin-top: 3px; }
/* метка кнопки выровнена влево — на телефоне кнопка во всю ширину плитки */
.l3-card .buy { flex: none; white-space: nowrap; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; font-size: 14px; font-weight: 600; }
.l3-card .buy--ink { background: var(--ink); color: var(--bg); }
.l3-card .buy--ink:hover { background: var(--ink-hover); color: var(--bg); }
.l3-card .buy--outline { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.l3-card .buy--outline:hover { color: var(--a-text); box-shadow: inset 0 0 0 1.5px var(--a); }
.l3-card .act { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.l3-card .buy { margin-right: auto; }
.l3-card .cmp { flex: none; font-size: 13px; color: var(--mute); border-bottom: 1px solid var(--line); line-height: 1.3; }
.l3-card .cmp:hover { color: var(--a-text); border-color: var(--a-text); }
@media (max-width: 1023px) {
  .l3-list, .l3-list.is-3, .l3-cat:not(.l3-cat--full) .l3-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l3-card { padding: 14px; gap: 10px; }
  .l3-card .foot { gap: 10px; }
  .l3-card .nm { font-size: 16px; }
}
@media (max-width: 767px) {
  .l3-list, .l3-list.is-3, .l3-cat:not(.l3-cat--full) .l3-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l3-card { padding: 12px; }
  .l3-card .nm { font-size: 15px; }
  .l3-card .price { font-size: 20px; }
  /* «Сравнить» в плитке не помещается — остаётся на странице товара. Селектор длиннее двух
     классов намеренно: в секции «категория» ниже по файлу .l3-card .cmp получает display
     и поля цели нажатия, и короткий селектор оттуда перебил бы это правило. */
  .l3-card .foot .cmp { display: none; }
  .l3-card .buy { flex: 1 1 auto; }
}
@media (max-width: 359px) {
  /* минимальная ширина столбца 150 px: ниже 360 два столбца рвут название по слогам */
  .l3-list, .l3-list.is-3, .l3-cat:not(.l3-cat--full) .l3-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- главная ---------- */
.l3-home-h1 { padding-top: 48px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; }
.l3-home-h1 h1 { font-size: 52px; }
.l3-home-h1 h1 .cnt { display: block; font-size: 0.62em; color: var(--mute); margin-top: 10px; }
.l3-home-h1 .l3-lead { font-size: 18px; line-height: 1.45; max-width: 520px; justify-self: end; }
.l3-tiles { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 16px; margin-top: 32px; }
.l3-tile { position: relative; background: var(--photo); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; color: var(--ink); }
.l3-tile:hover { color: var(--ink); }
.l3-tile:hover .cap b { color: var(--a-text); }
.l3-tile--big { grid-row: 1 / 3; }
.l3-tile img { width: 230px; height: 230px; object-fit: contain; mix-blend-mode: multiply; transform: translateY(-16px); }
/* Без наклона: в макете дизайнера в этой плитке лежал мультитул, плоская
   вещь, и поворот смотрелся; на унитазе и катушке он читается как перекос
   (решение заказчика 22.09.2026). */
.l3-tile--big img { width: 440px; height: 440px; transform: translateY(-30px); }
.l3-tile.is-empty { background: var(--card); }
.l3-tile .cap { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.l3-tile .cap b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; transition: color .15s; }
.l3-tile--big .cap { left: 24px; right: 24px; bottom: 22px; }
.l3-tile--big .cap b { font-size: 36px; }
.l3-tile .cap span { font-size: 14px; color: var(--mute); white-space: nowrap; }
.l3-tile .cap em { font-style: normal; }
@media (max-width: 359px) { .l3-tile--big .cap em.w { display: none; } }
.l3-tile--big .cap span { font-size: 16px; }
/* Текст сверху, а не снизу: на первом экране плитка обрезается низом окна, и
   при нижней подписи в кадре остаётся пустой цветной прямоугольник — его
   принимают за неподгрузившуюся картинку (замечание заказчика 22.09.2026). */
.l3-tile--cta { background: var(--a); color: var(--a-ink); border-color: var(--a); display: flex; flex-direction: column; align-items: flex-start; padding: 20px; overflow: hidden; }
.l3-tile--cta:hover { background: var(--a-hover); color: var(--a-ink); }
.l3-tile--cta b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
/* Только прямой потомок: число в заголовке тоже <span>, и общее правило
   делало его мельче остального текста (22.09.2026). */
.l3-tile--cta > span { font-size: 14px; margin-top: 6px; }
.l3-tile--cta b .n { font: inherit; color: inherit; }
.l3-tile--cta-wide { grid-column: 2 / 4; }
/* Наполнение плитки: разделы строками и полоса кадров внизу. Полоса рисуется
   только там, где плитка высокая (одна ячейка сетки), — в растянутых вариантах
   (2×2, wide) список и так занимает ширину. */
.l3-cta-list { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; width: 100%; max-width: 320px; font-size: 14px; }
.l3-cta-list i, .l3-cta-list a { display: flex; justify-content: space-between; gap: 12px; font-style: normal; padding-bottom: 5px; border-bottom: 1px solid color-mix(in oklab, currentColor 22%, transparent); }
.l3-cta-list i b, .l3-cta-list a b { font-weight: 600; }
.l3-cta-list a { color: inherit; }
/* Плитка сама залита акцентом, поэтому подсветка наведения — не цветом (он
   совпал бы с фоном), а подчёркиванием. */
.l3-cta-list a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Полоса кадров украшает низ плитки и лежит поверх неё — нажатия она пропускает
   сквозь себя, иначе перехватывает нижнюю строку списка. */
/* В потоке, а не абсолютом: абсолют позволял списку сесть поверх ленты, когда
   заголовок уходил в две строки (снимок заказчика 27.09.2026, 1253 px). */
.l3-cta-strip { margin-top: auto; padding-top: 12px; width: 100%; display: flex; gap: 7px; pointer-events: none; }
.l3-cta-strip u { flex: 1; max-width: 76px; aspect-ratio: 1; border-radius: 3px; background: #fff center / 72% no-repeat; }
/* Длинный список разделов в шапке — в две колонки, иначе он уезжает за экран. */
.l3-nav .more-list--2 { columns: 2; column-gap: 0; min-width: 440px; }
.l3-nav .more-list--2 a { break-inside: avoid; }
/* До 1023 плитки идут рядами по 200 пикселей — ленте там места нет вовсе.
   Она украшение, список с разделами — смысл, поэтому уступает лента. */
@media (max-width: 1023px) { .l3-cta-strip { display: none; } }
/* Логотип марки без цвета: акцент у сайта общий, от линии, и цветная плитка
   ни к чему не привязана (решение заказчика 22.09.2026). Тёмная плашка держит
   тот же вес в сетке, цвет остаётся точкой — на числе. */
/* Графит, а не почти чёрный: чистый чёрный в сетке светлых карточек читается
   как дыра. Тот же замес, что у --ink, но светлее. */
.l3-tile--cta-dark { background: color-mix(in oklab, var(--bg) 22%, black); border-color: color-mix(in oklab, var(--bg) 22%, black); color: var(--bg); }
.l3-tile--cta-dark:hover { background: color-mix(in oklab, var(--bg) 28%, black); color: var(--bg); }
.l3-tile--cta-dark > span { color: color-mix(in oklab, var(--bg) 62%, var(--ink)); }
.l3-tile--cta-dark b .n { color: var(--a); }
.l3-tile--cta-2x2 { grid-column: 2 / 4; grid-row: 2 / 3; }
.l3-tile--wide { grid-column: 2 / 4; }
.l3-tiles:has(.l3-tile--cta-2x2):not(:has(.l3-tile--wide)) .l3-tile--cta-2x2 { grid-row: 1 / 3; }
/* Заголовок в одну строку: в узкой плитке 26 пикселей уходят в две, и
   содержимому не хватает высоты — 88 пикселей в полосе до 1279 (ряд там ниже
   на 60) и 5 на 1280, где плитка всего 280 шириной. */
@media (max-width: 1365px) { .l3-tile--cta b { font-size: 20px; } }
@media (max-width: 1279px) {
  .l3-tiles { grid-template-rows: 240px 240px; }
  .l3-cta-strip u { max-width: 56px; }
  .l3-tile--big img { width: 360px; height: 360px; }
  .l3-tile img { width: 180px; height: 180px; transform: translateY(-18px); }
  .l3-tile .cap { background: linear-gradient(to top, var(--photo) 70%, transparent); padding-top: 10px; left: 0; right: 0; bottom: 0; padding-left: 20px; padding-right: 20px; padding-bottom: 16px; }
  .l3-tile.is-empty .cap, .l3-tile--cta .cap { background: none; }
}
@media (max-width: 1099px) {
  /* Плитка здесь всего 228 пикселей шириной: заголовок и при 20 уходит в две
     строки, содержимому не хватало 20 пикселей. Ужимаем ленту и просветы. */
  .l3-cta-strip u { max-width: 44px; }
  .l3-cta-strip { padding-top: 8px; }
  .l3-cta-list { gap: 3px; margin-top: 10px; }
}
@media (max-width: 1023px) {
  .l3-home-h1 { grid-template-columns: 1fr; gap: 16px; padding-top: 32px; }
  .l3-home-h1 h1 { font-size: 40px; }
  .l3-home-h1 .l3-lead { justify-self: start; font-size: 16px; }
  .l3-tiles { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 200px; }
  .l3-tile--big { grid-row: auto; grid-column: 1 / 3; height: 300px; }
  .l3-tile img { width: 136px; height: 136px; transform: translateY(-16px); }
  .l3-tile--big img { width: 196px; height: 196px; transform: translateY(-22px); }
  .l3-tile .cap { background: linear-gradient(to top, var(--photo) 70%, transparent); padding-top: 10px; left: 0; right: 0; bottom: 0; padding-left: 20px; padding-right: 20px; padding-bottom: 16px; }
  .l3-tile.is-empty .cap, .l3-tile--cta .cap { background: none; }
  .l3-tile--cta-wide, .l3-tile--cta-2x2, .l3-tile--wide { grid-column: auto; grid-row: auto; }
  .l3-tiles:has(.l3-tile--cta-2x2):not(:has(.l3-tile--wide)) .l3-tile--cta-2x2 { grid-row: auto; }
}
@media (max-width: 767px) {
  .l3-home-h1 h1 { font-size: 32px; }
  .l3-tiles { grid-template-columns: 1fr; grid-auto-rows: 180px; gap: 12px; }
  .l3-tile--big { grid-column: auto; height: 240px; }
  .l3-tile--cta-wide, .l3-tile--cta-2x2, .l3-tile--wide { grid-column: auto; }
  .l3-tile img { width: 120px; height: 120px; transform: translateY(-14px); }
  .l3-tile--big img { width: 168px; height: 168px; transform: translateY(-20px); }
  .l3-tile--big .cap b { font-size: 26px; }
}

/* ---------- категория ---------- */
.l3-cat { padding-top: 32px; display: grid; grid-template-columns: var(--filters) minmax(0, 1fr); gap: 48px; align-items: start; }
.l3-cat--full { grid-template-columns: 1fr; }
.l3-filters { display: grid; gap: 26px; font-size: 14px; }
.l3-filters-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.l3-filters-head b { font-size: 15px; }
.l3-filters-head a { font-size: 13px; color: var(--mute); }
.l3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.l3-fg { display: grid; gap: 8px; }
.l3-fg .ft { text-align: left; }
.l3-fg .opt { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); }
.l3-fg .opt.shaded { color: var(--mute); cursor: default; }
.l3-fg .opt .box { width: 16px; height: 16px; border: 1px solid var(--ink); flex: none; }
.l3-fg .opt.shaded .box { border-color: var(--line); }
.l3-fg .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.l3-fg .opt input:checked ~ .box { background: var(--ink); }
.l3-fg .opt input:focus-visible ~ .box { outline: 2px solid var(--a); outline-offset: 2px; }
.l3-fg .opt .name { flex: 1; }
.l3-fg .opt .count { margin-left: auto; color: var(--mute); }
.l3-fg .opt.noshow { display: none; }
.l3-fg.expanded .opt.noshow { display: flex; }
.l3-fg .showall { font-size: 13px; color: var(--mute); text-align: left; }
.l3-fg .showall:hover { color: var(--a-text); }
.l3-filters .apply { height: 44px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: 15px; display: grid; place-items: center; }
.l3-filters .apply:hover { color: var(--a-text); box-shadow: inset 0 0 0 1.5px var(--a); }
.l3-filt-btn { display: none; }
.l3-sort { display: flex; align-items: baseline; gap: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 14px; flex-wrap: wrap; }
.l3-sort .lbl { color: var(--mute); }
.l3-sort a { color: var(--mute); }
.l3-sort a.is-active { color: var(--ink); font-weight: 600; }
.l3-sort .found { margin-left: auto; color: var(--mute); }
.l3-pager { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; font-size: 15px; gap: 16px; flex-wrap: wrap; }
.l3-cat-empty { padding-top: 40px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.l3-cat-empty h2 { font-size: 30px; }
/* Фильтры не дали моделей (§11, артборд 1g): выход всегда с числом. Линию сверху
   не рисуем — её уже даёт панель сортировки, под ней идут чипы и сразу рамка. */
.l3-cat-empty--filters { padding-top: 20px; border-top: 0; align-items: start; }
.l3-empty-filters { border: 1px solid var(--ink); padding: 16px; }
.l3-empty-filters > b { display: block; font: 400 22px/1.15 var(--font-display); }
.l3-empty-filters > p { margin: 8px 0 0; font-size: 14px; color: var(--mute); }
.l3-empty-drop { margin-top: 14px; }
.l3-empty-drop a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.3; color: var(--ink); }
.l3-empty-drop li:last-child a { border-bottom: 1px solid var(--line); }
.l3-empty-drop a span { flex: none; font-size: 13px; color: var(--mute); white-space: nowrap; }
.l3-empty-drop a:hover { color: var(--a-text); }
.l3-btn.l3-empty-reset { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: auto; min-height: 44px; margin-top: 14px; padding: 10px 16px; font-size: 15px; white-space: normal; text-align: left; }
.l3-links-list { font-size: 16px; }
.l3-links-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.l3-links-list li:first-child { border-top-color: var(--ink); }
.l3-links-list li:last-child { border-bottom: 1px solid var(--line); }
.l3-links-list li span { color: var(--mute); }
.l3-links-list--lg { font-size: 18px; }
.l3-links-list--lg li { padding: 16px 0; }
.l3-filter-mask { display: none; }
@media (max-width: 1023px) {
  .l3-cat { grid-template-columns: 1fr; gap: 24px; }
  .l3-filt-btn { display: inline-grid; }
  .l3-filters { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 90vw); background: var(--bg); padding: 20px; overflow-y: auto; z-index: 120; transform: translateX(-100%); transition: transform .2s; }
  .l3-filters.open { transform: none; }
  .l3-filters .apply { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 0; background: var(--bg); box-shadow: 0 -16px 16px -6px var(--bg); }
  .l3-filters-head b { visibility: hidden; }
  .l3-chips-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 12px; }
  .l3-chips-top:empty { display: none; }
  .l3-filter-mask.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 110; }
  .l3-filters .drawer-head { display: flex; justify-content: space-between; align-items: center; }
  .l3-cat-empty:not(.l3-cat-empty--filters) { grid-template-columns: 1fr; gap: 24px; }
  .l3-cat-empty--filters { gap: 32px; }
  body.l3-noscroll { overflow: hidden; }
}
@media (min-width: 1024px) { .l3-filters .drawer-head, .l3-chips-top { display: none; } }
@media (max-width: 1023px) {
  .l3-nav a, .l3-nav .more > button { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
  .l3-bc a, .l3-sort a, .l3-fg .showall, .l3-card .cmp, .l3-cmp th .rm, .l3-ul { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
  /* Поля нажатия достались только ссылкам крошек, а разделитель и текущая страница остались
     без них: в flex-строке коробки разной высоты растягиваются, и «Главная» встаёт ниже
     соседей. Выравниваем высоту, а не подпираем align-items — иначе поле нажатия съедет. */
  .l3-bc span { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
  .l3-card .cmp { padding: 12px 0 10px; margin-top: 2px; line-height: 20px; }
  .l3-card .act { gap: 0; }
  .l3-fg .opt { min-height: 40px; }
  .l3-chip { min-height: 36px; padding: 6px 12px; }
  .l3-chip .x { padding: 0 4px; font-size: 16px; }
}
@media (max-width: 767px) { .l3-sort { gap: 14px; } .l3-sort .found { width: 100%; margin-left: 0; } .l3-pager { flex-direction: column; align-items: flex-start; } }
/* 390: рамка с условиями во всю ширину, список разделов не выводим — на телефоне
   выход из пустой выдачи один, и он в рамке (артборд 1g). */
@media (max-width: 767px) { .l3-cat-empty--filters { grid-template-columns: 1fr; gap: 24px; } .l3-cat-empty--filters .l3-links-list { display: none; } }

/* ---------- карточка товара ---------- */
.l3-pdp-head { padding-top: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.l3-pdp-meta { display: flex; gap: 18px; margin-top: 12px; font-size: 14px; color: var(--mute); flex-wrap: wrap; }
.l3-pdp-meta a { color: var(--ink); border-bottom: 1px solid var(--line); }
.l3-pdp-meta button { color: var(--ink); border-bottom: 1px solid var(--line); }
.l3-pdp-meta button:hover, .l3-pdp-meta a:hover { color: var(--a-text); border-color: var(--a-text); }
/* Паспортная строка (§6, артборд 2d). Число столбцов приходит из шаблона: 3–5 значений —
   ряд на столько же ячеек, 6 — два ряда по три, 7 и больше — четыре ячейки и «Ещё N →».
   Сирот в ряду не остаётся: последняя ячейка добирает ряд через --sp2 (390) и --sp3 (768). */
.l3-passport { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 262px)); margin-top: 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.l3-passport > * { padding: 16px 20px; border-right: 1px solid var(--line); }
.l3-passport > :first-child { padding-left: 0; }
.l3-passport > :last-child { border-right: 0; padding-right: 0; }
/* Без `white-space: nowrap`: длинное значение («Нержавеющая сталь» — 274 пикселя
   в ячейке 261) вылезало за колонку и наезжало на соседнюю. Короткие числа и так
   остаются в строку, переносить там нечего (замечание заказчика 27.09.2026). */
.l3-passport b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; overflow-wrap: anywhere; }
.l3-passport span { display: block; font-size: 13px; color: var(--mute); margin-top: 4px; }
.l3-passport .more { display: grid; align-content: center; }
.l3-passport .more span { display: inline; justify-self: start; margin-top: 0; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); }
.l3-passport .more:hover span { color: var(--a-text); border-color: var(--a-text); }
@media (min-width: 1024px) {
  .l3-passport.n3 > :nth-child(3n+1), .l3-passport.n4 > :nth-child(4n+1), .l3-passport.n5 > :nth-child(5n+1) { padding-left: 0; }
  .l3-passport.n3 > :nth-child(3n), .l3-passport.n4 > :nth-child(4n), .l3-passport.n5 > :nth-child(5n) { border-right: 0; padding-right: 0; }
  /* шесть значений — два ряда по три, между рядами волосяная линия */
  .l3-passport.n3 > :nth-child(n+4) { border-top: 1px solid var(--line); }
}
/* Паспортная строка и пара «галерея + покупка» в одном потоке: до 767 строка уходит под
   блок покупки (order), с 768 остаётся над галереей. */
.l3-pdp-flow { display: flex; flex-direction: column; }
.l3-pdp { padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) var(--buy); gap: 48px; align-items: start; }
.l3-gallery .main { height: 520px; background: var(--photo); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.l3-gallery .main img { max-width: 480px; max-height: 480px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.l3-gallery .main.is-empty { background: repeating-linear-gradient(135deg, var(--card) 0 8px, var(--line) 8px 9px); }
.l3-gallery .thumbs { display: grid; grid-template-columns: repeat(auto-fill, 96px); gap: 10px; margin-top: 10px; }
.l3-gallery .thumbs button { height: 96px; background: var(--photo); border: 1px solid var(--line); overflow: hidden; }
.l3-gallery .thumbs button.is-active { border: 1.5px solid var(--ink); }
.l3-gallery .thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.l3-buy { display: grid; gap: 18px; padding: 24px; border: 1px solid var(--ink); }
.l3-buy .price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.l3-buy .price { font-family: var(--font-display); font-size: 40px; line-height: 1; }
.l3-buy .price s { font-family: var(--font-body); font-size: 16px; color: var(--mute); margin-left: 8px; }
.l3-buy .price-note { font-size: 13px; color: var(--mute); }
.l3-buy .stock { display: grid; gap: 6px; font-size: 15px; }
.l3-buy .stock b { font-weight: 600; }
.l3-buy .stock span { color: var(--mute); }
.l3-buy .qty-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.l3-qty { display: inline-flex; border: 1px solid var(--ink); height: 52px; }
.l3-qty button { width: 44px; font-size: 18px; color: var(--ink); }
.l3-qty input { width: 52px; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; font-size: 16px; -moz-appearance: textfield; }
.l3-qty input::-webkit-outer-spin-button, .l3-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.l3-qty--sm { height: 40px; }
.l3-qty--sm button { width: 40px; }
.l3-qty--sm input { width: 44px; font-size: 15px; }
.l3-buy .ask { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mute); flex-wrap: wrap; }
.l3-buy .ask a, .l3-buy .ask button { border-bottom: 1px solid var(--line); color: var(--ink); }
.l3-buy .ask a:hover, .l3-buy .ask button:hover { color: var(--a-text); border-color: var(--a-text); }
.l3-buy .terms { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; }
.l3-buy .terms b { display: block; font-weight: 600; }
.l3-buy .terms span { color: var(--mute); }
.l3-buy .options { display: grid; gap: 12px; }
.l3-buy select.l3-input { -webkit-appearance: menulist; appearance: auto; }
.l3-buy .price--ask { font-size: 30px; }
/* Товар без остатка: действие есть всегда. «Сообщить о поступлении» раскрывает поле почты
   на месте кнопки — раскрытие на флажке, без JS. */
.l3-notify { display: grid; gap: 10px; }
.l3-notify-t, .l3-desc-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.l3-notify-btn { width: 100%; }
.l3-notify-form { display: none; }
.l3-notify-t:checked ~ .l3-notify-btn { display: none; }
.l3-notify-t:checked ~ .l3-notify-form { display: grid; gap: 10px; }
.l3-notify-t:focus-visible ~ .l3-notify-btn, .l3-desc-t:focus-visible ~ .l3-desc-btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.l3-buy-similar { justify-self: start; font-size: 14px; }
.l3-buy .terms .t-pay { display: none; }
.l3-desc-btn, .l3-desc-btn .off { display: none; }
.l3-pdp-jump { display: none; }
.l3-neigh thead th.cur { color: var(--ink); }
.l3-reviews { display: grid; gap: 0; }
.l3-review { padding: 20px 0; border-top: 1px solid var(--line); }
.l3-review .head { display: flex; gap: 14px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.l3-review .head b { font-size: 15px; }
.l3-review .head .date { color: var(--mute); }
.l3-review .head .rate { margin-left: auto; font-weight: 600; }
.l3-review p { margin-top: 10px; font-size: 15px; line-height: 1.55; max-width: 760px; }
.l3-rating { margin-top: 18px; font-family: var(--font-display); font-size: 56px; line-height: 1; }
.l3-cond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; font-size: 14px; line-height: 1.5; }
.l3-cond h3 { font-size: 16px; margin-bottom: 8px; }
.l3-cond p { color: var(--mute); }
.l3-seo-line { padding-top: 56px; display: grid; grid-template-columns: var(--rail) 1fr; gap: 48px; }
.l3-seo-line p { font-size: 14px; line-height: 1.6; color: var(--mute); max-width: 900px; }
.l3-sticky-buy { display: none; }
@media (max-width: 1279px) { .l3-passport b { font-size: 26px; } .l3-gallery .main { height: 440px; } .l3-gallery .main img { max-width: 400px; max-height: 400px; } }
@media (max-width: 1023px) {
  .l3-pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .l3-passport { border-bottom: 0; }
  .l3-passport > * { border-bottom: 1px solid var(--line); }
  .l3-cond { grid-template-columns: 1fr; gap: 20px; }
  .l3-seo-line { grid-template-columns: 1fr; gap: 12px; }
  .l3-gallery .main { height: 380px; }
  .l3-gallery .main img { max-width: 340px; max-height: 340px; }
  /* Счётчик и «В корзину» в блоке покупки — 48 (Геометрия, «Высоты»). */
  .l3-buy .l3-qty { height: 48px; }
  .l3-buy .l3-qty button { width: 40px; }
  .l3-buy .l3-qty input { width: 44px; }
  .l3-buy .l3-btn--primary { height: 48px; padding: 0 20px; font-size: 17px; }
  /* Описание свёрнуто до трёх строк, раскрытие — на флажке (JS не нужен). */
  .l3-desc .l3-prose { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .l3-desc-t:checked ~ .l3-prose { display: block; overflow: visible; }
  .l3-desc-btn { display: inline-block; justify-self: start; margin-top: 10px; padding: 10px 0; font-weight: 600; font-size: 14px; line-height: 1; color: var(--ink); border-bottom: 1px solid var(--ink); cursor: pointer; }
  .l3-desc-t:checked ~ .l3-desc-btn .on { display: none; }
  .l3-desc-t:checked ~ .l3-desc-btn .off { display: inline; }
  /* Липкая панель покупки — на всех ширинах до 1023, не только до 767. */
  .l3-sticky-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--ink); padding: 10px var(--gutter); gap: 12px; align-items: center; justify-content: space-between; z-index: 100; transition: transform .16s ease-out; }
  .l3-sticky-buy .price { font-family: var(--font-display); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
  .l3-sticky-buy .stock { font-size: 12px; margin-top: 3px; }
  .l3-sticky-buy .l3-btn { height: 44px; padding: 0 18px; font-size: 15px; }
  .l3-sticky-buy.is-off { transform: translateY(110%); }
  body.has-sticky { padding-bottom: 76px; }
}
/* 768–1023 (артборд 2c): галерея minmax(0,1fr) и блок покупки 320 рядом, паспортная строка
   над галереей тремя ячейками в ряд, во врезке — самовывоз и оплата при получении. */
@media (min-width: 768px) and (max-width: 1023px) {
  .l3-pdp { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding-top: 24px; }
  .l3-passport { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
  .l3-passport > * { padding: 14px 16px; }
  .l3-passport > :nth-child(3n+1) { padding-left: 0; }
  .l3-passport > :nth-child(3n) { border-right: 0; padding-right: 0; }
  .l3-passport > :last-child { grid-column: span var(--sp3, 1); border-right: 0; padding-right: 0; }
  .l3-pdp-meta a, .l3-pdp-meta button { display: inline-block; padding: 10px 0; }
  .l3-gallery .thumbs { grid-template-columns: repeat(auto-fill, 80px); gap: 10px; }
  .l3-gallery .thumbs button { height: 80px; }
  .l3-buy { padding: 20px; gap: 16px; }
  .l3-buy .price { font-size: 36px; }
  .l3-buy .price--ask { font-size: 28px; }
  .l3-buy .terms { gap: 10px; padding-top: 14px; }
  .l3-buy .terms .t-pay { display: block; }
  .l3-buy .terms .t-delivery, .l3-buy .terms .t-warranty { display: none; }
}
@media (max-width: 767px) {
  .l3-pdp-head { padding-top: 14px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .l3-pdp-meta { gap: 14px; margin-top: 10px; }
  /* На 390 в мете только артикул и рейтинг (артборд 2a): «Добавить к сравнению» появляется
     с 768 — иначе строка вырастает вдвое ради цели нажатия и уводит покупку вниз. */
  .l3-pdp-meta button { display: none; }
  /* Порядок 390: крошки → H1 → мета → галерея → покупка → паспортная строка. */
  .l3-pdp-flow .l3-pdp { order: 1; }
  .l3-pdp-flow .l3-passport { order: 2; margin-top: 20px; }
  .l3-passport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l3-passport > * { padding: 12px; }
  .l3-passport > :nth-child(2n+1) { padding-left: 0; }
  .l3-passport > :nth-child(2n) { border-right: 0; padding-right: 0; }
  .l3-passport > :last-child { grid-column: span var(--sp2, 1); border-right: 0; padding-right: 0; }
  .l3-passport b { font-size: 22px; }
  .l3-gallery .main { height: 300px; border-color: var(--ink); }
  .l3-gallery .main img { max-width: 260px; max-height: 260px; }
  .l3-gallery .thumbs { grid-template-columns: repeat(auto-fill, 64px); gap: 8px; margin-top: 8px; }
  .l3-gallery .thumbs button { height: 64px; }
  .l3-buy { padding: 16px; gap: 16px; }
  .l3-buy .price { font-size: 32px; }
  .l3-buy .price--ask { font-size: 26px; }
  .l3-buy .terms { display: none; }
  .l3-pdp { padding-top: 16px; gap: 20px; }
  /* Перечень остальных блоков ссылками (артборд 2a) — сами блоки остаются ниже. */
  .l3-pdp-jump { display: grid; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
  .l3-pdp-jump a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .l3-pdp-jump a span { color: var(--mute); }
}

/* ---------- корзина ----------
   Позиция — не строка таблицы, а грид: до 767 блок (фото 80 слева, название с артикулом и
   наличием, ниже счётчик и сумма справа), с 768 пять колонок (фото 96, описание, счётчик 140,
   сумма 120, «Убрать» 90). Таблицей это не делается: <table> держит минимальную ширину по
   содержимому и в узкой колонке уезжает вправо, под блок итогов.
   Цена за штуку в корзине не выводится вовсе — она есть на странице товара, на экране одно
   число вместо трёх. */
.l3-cart { padding-top: 28px; display: grid; gap: 28px; align-items: start; }
.l3-cart-items { border-top: 1px solid var(--ink); }
.l3-cart-row { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.l3-cart-row .img { grid-row: 1 / 3; width: 80px; height: 80px; background: var(--photo); border: 1px solid var(--line); overflow: hidden; }
.l3-cart-row .img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.l3-cart-row .name { grid-column: 2 / 4; min-width: 0; padding-right: 64px; }
.l3-cart-row .name a, .l3-cart-row .name b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 16px; line-height: 1.3; }
.l3-cart-row .meta { font-size: 13px; color: var(--mute); margin-top: 3px; }
.l3-cart-row .stock { font-size: 13px; margin-top: 3px; }
.l3-cart-row .qty { grid-column: 2; }
.l3-cart-row .total { grid-column: 3; align-self: center; text-align: right; font-weight: 600; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* «Убрать» — текстовая ссылка 13 px в правом верхнем углу строки; поле нажатия 44 набирается
   вертикальными полями, как у прочих текстовых ссылок темы. */
.l3-cart-row .rm { position: absolute; top: 2px; right: 0; }
.l3-cart-row .rm button { display: inline-block; padding: 13px 0; font-size: 13px; line-height: 1.4; color: var(--mute); border-bottom: 1px solid var(--line); }
.l3-cart-row .rm button:hover { color: var(--a-text); border-color: var(--a-text); }
.l3-cart-extra { font-size: 14px; }
.l3-cart-coupon { display: grid; gap: 10px; align-content: start; }
.l3-cart-coupon b { font-weight: 600; }
.l3-cart-coupon .applied { margin: 0; }
.l3-cart-coupon .row { display: flex; gap: 8px; }
.l3-cart-coupon .row .l3-input { flex: 1; min-width: 0; }
.l3-totals { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--ink); font-size: 15px; }
.l3-totals .row { display: flex; justify-content: space-between; gap: 12px; color: var(--mute); }
/* Скидка — один способ: строка «Промокод СЕНТЯБРЬ / −4 115 руб.» цветом --ink и под ней
   пояснение 13 px «в том числе скидка…» со ссылкой «снять». Скидка сидит в цене позиции
   (врезка L3THEME в system/library/cart.php), поэтому пояснение обязательно: иначе строка
   читается как второе вычитание. Крестика 7×16 у промокода больше нет. */
.l3-totals .row.is-cut { color: var(--ink); }
.l3-totals .row.is-note { margin-top: -6px; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: 13px; }
.l3-totals .row.is-note .drop { color: var(--mute); font-size: 13px; line-height: 1.4; border-bottom: 1px solid var(--line); }
.l3-totals .row.is-note .drop:hover { color: var(--a-text); border-color: var(--a-text); }
.l3-co #total_coupon { font-size: 13px; margin-top: -6px; }
.l3-totals .sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--ink); padding-top: 14px; }
.l3-totals .sum b { font-weight: 600; font-size: 17px; }
.l3-totals .sum .big { font-family: var(--font-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
/* кнопка 52 на акценте, метка слева — как кнопка подтверждения в оформлении */
.l3-totals .l3-btn { width: 100%; justify-items: start; padding: 0 20px; }
.l3-totals .note { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.5; }
.l3-cart-more { font-size: 15px; }
/* пустая корзина: заголовок, факт про склад, акцентная кнопка 52; плитки ниже — те же, что в каталоге */
.l3-cart-empty { padding-top: 20px; display: grid; gap: 14px; justify-items: start; }
.l3-cart-empty .fact { margin: 0; font-size: 15px; color: var(--mute); max-width: 52ch; }
.l3-cart-empty .l3-btn { justify-items: start; padding: 0 20px; }
/* 360 и уже: фото 72, сумма уходит под счётчик и прижата вправо — в одной строке со счётчиком
   она на 320 не помещается и уезжает за экран. */
@media (max-width: 400px) {
  .l3-cart-row { grid-template-columns: 72px minmax(0, 1fr); gap: 6px 10px; }
  .l3-cart-row .img { width: 72px; height: 72px; }
  .l3-cart-row .name { grid-column: 2; padding-right: 56px; }
  .l3-cart-row .total { grid-column: 2; justify-self: end; align-self: auto; }
}
@media (max-width: 767px) {
  .l3-cart-empty .l3-btn { width: 100%; }
}
@media (max-width: 1023px) {
  /* палец: «снять» набирает 44 полями */
  .l3-totals .row.is-note .drop { display: inline-block; padding: 12px 0; }
}
/* 768–1023: пять колонок в строке; итоги переходят в правую половину рядом с промокодом,
   но ещё не в липкую колонку. */
@media (min-width: 768px) {
  .l3-cart { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .l3-cart-items, .l3-cart-more { grid-column: 1 / -1; }
  .l3-cart-row { grid-template-columns: 96px minmax(0, 1fr) 140px 120px 90px; gap: 16px; align-items: center; }
  .l3-cart-row .img { grid-row: auto; width: 96px; height: 96px; }
  .l3-cart-row .name { grid-column: auto; padding-right: 0; }
  .l3-cart-row .name a, .l3-cart-row .name b { font-size: 17px; }
  .l3-cart-row .qty { grid-column: auto; }
  .l3-cart-row .total { grid-column: auto; }
  .l3-cart-row .rm { position: static; justify-self: end; }
  .l3-cart-row .rm button { padding: 10px 0; }
  .l3-totals { grid-column: 2; padding: 20px; }
  .l3-totals .sum .big { font-size: 32px; }
}
@media (min-width: 1024px) {
  /* колонка описания не уже 200 px — колонки сжимаются, а не наезжают */
  .l3-cart-row { grid-template-columns: 96px minmax(200px, 1fr) 140px 120px 90px; }
  .l3-cart-empty { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 32px; }
  .l3-cart-empty .l3-btn { grid-column: 1 / -1; }
}
/* Липкая колонка итогов включается с 1280, а не с 1024, и это не забытая правка. Строка с
   колонкой описания в 200 px не сжимается ниже 710 px (96+200+140+120+90 и четыре зазора по 16).
   На 1024–1279 полоса страницы 944 px (1024 − два поля по 40), и рядом с блоком итогов в 400 px
   строке остаётся 496 — таблица уходила под итоги, и «Убрать» была физически ненажимаемой.
   Поэтому на 1024–1279 держим раскладку 768: позиции во всю ширину, итоги в правой половине.
   С 1280 полоса 1152 (1280 − два поля по 64): 1152 − 400 − 40 = 712 ≥ 710, наезда нет. */
@media (min-width: 1280px) {
  .l3-cart { grid-template-columns: minmax(0, 1fr) var(--buy); gap: 28px 40px; }
  .l3-cart-items, .l3-cart-extra, .l3-cart-more { grid-column: 1; }
  .l3-totals { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 24px; padding: 24px; }
}

/* ---------- оформление (Simple) ---------- */
.l3-co { padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; }
.l3-co-left { display: grid; gap: 40px; }
.l3-co .simplecheckout-block { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 32px; padding-top: 20px; border-top: 1px solid var(--ink); }
.l3-co .simplecheckout-block[data-hide="true"] { display: none; }
.l3-co .checkout-heading { font-family: var(--font-display); font-size: 26px; line-height: 1.1; counter-increment: step; }
.l3-co .checkout-heading::before { content: counter(step); display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.l3-co .checkout-heading .checkout-heading-button { display: block; font-family: var(--font-body); font-size: 14px; margin-top: 10px; }
.l3-co .checkout-heading .checkout-heading-button a { border-bottom: 1px solid var(--line); }
/* Счётчик шагов живёт на .l3-co, а не на левой колонке: до 1023 «Ваш заказ» становится пятым
   шагом и его номер должен продолжать нумерацию левой колонки, а не начинать свою. */
.l3-co { counter-reset: step; }
.l3-co .simplecheckout-block-content { min-width: 0; }
/* Simple вставляет между заголовком и полями свои подписи (напр. «Город доставки: …»).
   В двухколоночной сетке блока они занимали вторую колонку, а поля уезжали в первую — узкую,
   под заголовок. Всё, что не заголовок, держим во второй колонке. */
.l3-co .simplecheckout-block > *:not(.checkout-heading) { grid-column: 2; }
/* Подпись «Город доставки: …» дословно повторяет поле «Город» прямо под ней (у линии 2 поле
   было нередактируемым, у нас оно обычное). С экрана убираем, для читалок оставляем. */
.l3-co .l3-checkout-city-hint { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.l3-co .simplecheckout-block:not(:has(.checkout-heading)) { grid-template-columns: 220px minmax(0, 1fr); }
.l3-co .simplecheckout-block:not(:has(.checkout-heading)) .simplecheckout-block-content { grid-column: 2; }
.l3-co fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.l3-co .form-horizontal > .form-group, .l3-co #simplecheckout_customer .simplecheckout-block-content > fieldset { display: grid; }
.l3-co #simplecheckout_customer fieldset.form-horizontal { grid-template-columns: 1fr 1fr; gap: 16px; }
/* Сетку задавали фигурному набору полей, а сам fieldset гридом не был — правило висело мёртвым. */
.l3-co #simplecheckout_shipping_address .simplecheckout-block-content > fieldset { display: grid; }
.l3-co #simplecheckout_shipping_address fieldset.form-horizontal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
/* Улица длиннее индекса и города — ей вся ширина; иначе адрес не помещается и обрезается. */
.l3-co #simplecheckout_shipping_address .row-shipping_address_address_1,
.l3-co #simplecheckout_shipping_address .row-shipping_address_comment { grid-column: 1 / -1; }
/* Плагин подсказок вешает в поле «Адрес» чип с названием города: он съедает ширину и режет
   набранный адрес. Город и так назван строкой выше и полем «Город». */
.l3-co .suggestions-constraints { display: none !important; }
.l3-co .suggestions-input { padding-left: 12px !important; }
/* Крестик «очистить» от плагина подсказок — 42 px сплошного серого; приглушаем. */
.l3-co .suggestions-addon[data-addon-type="clear"] { opacity: .35; transform: scale(.62); transition: opacity .15s; }
.l3-co .suggestions-addon[data-addon-type="clear"]:hover { opacity: .7; }
.l3-co .form-group { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.l3-co .form-group.hidden { display: none; }
.l3-co .control-label { color: var(--mute); font-weight: 400; padding: 0; text-align: left; }
.l3-co .control-label.hidden { display: block !important; position: static; width: auto; height: auto; clip: auto; }
.l3-co .col-sm-12, .l3-co .col-sm-8, .l3-co .col-sm-4 { width: auto; padding: 0; float: none; }
.l3-co .form-control { height: var(--tap); border: 1px solid var(--line); background: transparent; padding: 0 12px; font-size: 15px; color: var(--ink); width: 100%; border-radius: 0; box-shadow: none; }
.l3-co .form-control:focus { border: 1.5px solid var(--ink); outline: 0; box-shadow: none; }
.l3-co textarea.form-control { height: auto; min-height: 88px; padding: 12px; }
.l3-co select.form-control { -webkit-appearance: menulist; appearance: auto; }
.l3-co .form-group.has-error .form-control { border: 1.5px solid var(--color-danger); }
.l3-co .form-group.has-error .control-label { color: var(--color-danger); }
.l3-co .simplecheckout-error-text { font-size: 13px; color: var(--color-danger); }
.l3-co .simplecheckout-rule-group { display: grid; gap: 4px; }
.l3-co .simplecheckout-warning-text, .l3-co .alert { padding: 14px 16px; border: 1.5px solid var(--color-danger); color: var(--color-danger); font-size: 14px; margin: 0 0 12px; }
.l3-co .alert-success { border-color: var(--ok); color: var(--ok); }
.l3-co .radio { margin: 0; }
/* Вариант способа (3a): радио 18, название и подпись в середине, цена справа. Третья колонка
   заводится только под цену — без неё её зазор оставлял 12 px пустоты справа у оплаты. */
.l3-co .radio label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--ink); border-top: 0; cursor: pointer; font-weight: 400; }
.l3-co .radio label:has(.quote-cost) { grid-template-columns: 18px minmax(0, 1fr) auto; }
.l3-co .radio:first-of-type label, .l3-co .form-group > .col-sm-12 > .radio:first-child label { border-top: 1px solid var(--ink); }
/* Выбранный способ подсвечиваем золотом, а не --card: тот выводится через оклч-подмешивание
   чёрного, теряет тон и на тёплом фоне читается серо-сиреневым. */
.l3-co .radio label:has(input:checked) { background: var(--sel); }
.l3-co .radio input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ink); margin: 0; flex: none; }
.l3-co .radio input[type="radio"]:checked { border: 5px solid var(--ink); }
.l3-co .quote-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.l3-co .quote-text { color: var(--mute); font-size: 14px; }
/* Название способа приходит от модуля одной строкой HTML: «жирная» часть — название, «мелкая» —
   срок и оговорки. Разводим их по строкам, чтобы вышло название + подпись 14 --mute (3a). */
.l3-co .quote-title .fat-text { display: block; font-weight: 600; }
.l3-co .quote-title .small { display: block; font-weight: 400; font-size: 14px; color: var(--mute); }
.l3-co .quote-title .small.del { text-decoration: none; }
.l3-co .quote-cost { font-weight: 600; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.l3-co .l3-method-body { display: grid; gap: 2px; min-width: 0; }
/* Способ без точек в городе: строка гаснет, пояснение — под ней (правило «неполные данные»). */
.l3-co .radio.is-off label { color: var(--mute); cursor: default; }
.l3-co .radio.is-off label:has(input:checked) { background: none; }
.l3-co .form-description, .l3-co .simplecheckout-methods-description { font-size: 14px; color: var(--mute); padding: 10px 0; }
.l3-co .radio + fieldset { padding: 12px 18px; border: 1px solid var(--ink); border-top: 0; }
.l3-co .radio + fieldset:not(:has(.form-group:not(.hidden))) { display: none; }
.l3-co .simplecheckout-proceed-payment { display: none; }
.l3-co .simplecheckout-cart-total { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mute); }
/* Скидка — один способ, тот же, что в корзине: строка цветом --ink, под ней пояснение 13 px и
   текстовая ссылка «снять». Правило .l3-co #total_coupon из блока корзины (13 px, отрицательный
   отступ) относится к пояснению, поэтому саму строку перебиваем селектором с тем же id. */
.l3-co #total_coupon.is-cut { font-size: 14px; margin-top: 0; color: var(--ink); }
.l3-co .simplecheckout-cart-total.is-note { justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: 13px; margin-top: -4px; }
.l3-co .simplecheckout-cart-total.is-note .drop { color: var(--mute); font-size: 13px; line-height: 1.4; border-bottom: 1px solid var(--line); }
.l3-co .simplecheckout-cart-total.is-note .drop:hover { color: var(--a-text); border-color: var(--a-text); }
.l3-co .simplecheckout-cart-total-remove { display: none; }
.l3-co #total_total, .l3-co .simplecheckout-cart-total.is-total { border-top: 1px solid var(--ink); padding-top: 16px; margin-top: 8px; color: var(--ink); align-items: baseline; }
.l3-co #total_total .simplecheckout-cart-total-name { font-weight: 600; font-size: 17px; }
.l3-co #total_total .simplecheckout-cart-total-value { font-family: var(--font-display); font-size: 36px; line-height: 1; }
.l3-co-right { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--ink); font-size: 15px; }
.l3-co-right h2 { font-size: 26px; }
.l3-co-right .simplecheckout-block { display: block; padding: 0; border: 0; }
.l3-co-items { display: grid; gap: 12px; font-size: 14px; }
.l3-co-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.l3-co-item .img { width: 48px; height: 48px; background: var(--photo); border: 1px solid var(--line); overflow: hidden; }
.l3-co-item .img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.l3-co-item .nm { font-weight: 600; }
/* «1 шт. × 19 900» одной строкой: счётчика и «Удалить» в «Вашем заказе» нет (3a), количество
   меняют в корзине — шагом раньше. Висячих «·» не остаётся, потому что склеивать нечего. */
.l3-co-item > div { min-width: 0; }
.l3-co-item .nm { display: block; }
.l3-co-item .meta { color: var(--mute); }
.l3-co-item .total { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.l3-co-item .product-warning { display: block; font-size: 13px; }
/* Сертификат снимается ссылкой — у него своей страницы «назад» нет, в отличие от товара. */
.l3-co-item .rm { display: inline-block; padding: 6px 0; color: var(--mute); font-size: 12px; border-bottom: 1px solid var(--line); }
.l3-co-coupon { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; }
.l3-co-coupon .row { display: flex; gap: 8px; }
.l3-co-coupon .row .form-control { flex: 1; }
.l3-co-coupon .row a { height: var(--tap); padding: 0 16px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; }
.l3-co-totals { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.l3-co .simplecheckout-button-block { display: grid; gap: 14px; }
/* Кнопку подтверждения рисуем мы (3b). Модуль оплаты подставляет свою то в #simplecheckout_payment_form,
   то прямо в #buttons — от этого при каждом пересчёте прыгали и кнопка, и итоги. Настоящую кнопку
   прячем и пересылаем ей нажатие, а на экране всегда один и тот же прямоугольник 52 px с меткой слева.
   Прячем только при живом скрипте (.has-l3-cta): без него остаются правила-запаски ниже. */
.l3-co .simplecheckout-button-center { display: grid; gap: 12px; }
.l3-co #agreement_checkbox { order: 1; }
.l3-co .l3-cta { order: 2; }
.l3-co .l3-cta-note { order: 3; }
.l3-co .l3-cta { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; height: 52px; padding: 0 20px; background: var(--a); color: var(--a-ink); font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1; text-align: left; border: 0; border-radius: 0; cursor: pointer; }
.l3-co .l3-cta:hover { background: var(--a-hover); color: var(--a-ink); }
/* 2 — недоступно: обводка --line и текст --mute. Полупрозрачный акцент не используем: на тёмном
   бренде он превращался в грязное пятно. */
.l3-co .l3-cta.is-off, .l3-co .l3-cta.is-off:hover { background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; }
/* 3 — пересчёт: тот же прямоугольник, .55 и кольцо 14; размер не меняется, нажатие заблокировано. */
.l3-co .l3-cta.is-busy, .l3-co .l3-cta.is-busy:hover { opacity: .55; cursor: default; pointer-events: none; }
.l3-co .l3-cta .ring { width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .l3-co .l3-cta .ring { animation: l3-cta-spin .8s linear infinite; } }
@keyframes l3-cta-spin { to { transform: rotate(360deg); } }
/* 4 — переход к оплате: метка слева, стрелка у правого края, под кнопкой сумма и «СБП и карты». */
.l3-co .l3-cta.is-pay { justify-content: space-between; }
.l3-co .l3-cta .arrow { font-size: 20px; line-height: 1; }
.l3-co .l3-cta-note { font-size: 13px; color: var(--mute); line-height: 1.5; }
.l3-co .l3-cta-note:empty { display: none; }
.l3-co.has-l3-cta #simplecheckout_button_confirm,
.l3-co.has-l3-cta #simplecheckout_payment_form .btn,
.l3-co.has-l3-cta #simplecheckout_payment_form input[type="button"],
.l3-co.has-l3-cta #simplecheckout_payment_form input[type="submit"],
.l3-co.has-l3-cta #buttons .btn,
.l3-co.has-l3-cta #buttons input[type="button"],
.l3-co.has-l3-cta #buttons input[type="submit"],
.l3-co.has-l3-cta #button-confirm { display: none !important; }
.l3-co #simplecheckout_button_confirm { display: grid; place-items: center; height: 52px; background: var(--a); color: var(--a-ink); font-size: 17px; font-weight: 600; cursor: pointer; }
.l3-co #simplecheckout_button_confirm:hover { background: var(--a-hover); color: var(--a-ink); }
.l3-co #simplecheckout_button_confirm[disabled] { opacity: .5; pointer-events: none; }
.l3-co .simplecheckout-button-left, .l3-co #simplecheckout_button_next, .l3-co #simplecheckout_button_prev, .l3-co #simplecheckout_step_menu { display: none; }
/* #buttons — блок (правило по id перебивает grid у .simplecheckout-button-block), поэтому зазор
   до мелкого текста задаём отступом, а не gap. */
.l3-co .politic { font-size: 13px; color: var(--mute); line-height: 1.5; margin-top: 14px; }
.l3-co #agreement_checkbox .checkbox label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--mute); line-height: 1.5; font-weight: 400; cursor: pointer; }
.l3-co #agreement_checkbox input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.l3-co #agreement_checkbox a { color: var(--ink); border-bottom: 1px solid var(--line); }
.l3-co .simplecheckout-proceed-payment { font-size: 14px; color: var(--mute); }
.l3-co .simplecheckout-proceed-payment:empty { display: none; }
.l3-co #simplecheckout_payment_form:empty { display: none; }
.l3-co .simplecheckout-cart-total.hidden, .l3-co .l3-hidden-state { display: none; }
/* ---- пункты выдачи (3c, 7c) --------------------------------------------------------------
   Встроенной карты 320 px под способом больше нет: 648 точек пальцем не выбираются. До 1023 —
   кнопка и экран на всю высоту, с 1024 список 320 и карта 400 рядом в потоке. Разметку строит
   line3.js, здесь только вид. Описание модуля (.count-pvz / .pickup-pvz) остаётся в DOM: из него
   берутся число точек и адрес выбранного пункта, но на экране его заменяет наш блок. */
.l3-co .form-description:has(.pickup-pvz) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.l3-pvz { margin-top: 14px; }
.l3-pvz:empty { display: none; }
/* Блок выбора встаёт между строками способов — следующей строке возвращаем верхнюю рамку и
   отступ, иначе она висит без границы. Пустой блок строки не разрывает. */
.l3-co .l3-pvz:not(:empty) + .radio { margin-top: 14px; }
.l3-co .l3-pvz:not(:empty) + .radio label { border-top: 1px solid var(--ink); }
.l3-pvz-sum { border: 1px solid var(--ink); padding: 14px; display: grid; gap: 12px; }
.l3-pvz-sum .hd { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.l3-pvz-sum .hd b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.l3-pvz-sum .hd .cnt { font-size: 13px; color: var(--mute); white-space: nowrap; }
.l3-pvz-sum .hint { font-size: 13px; color: var(--mute); line-height: 1.5; }
.l3-pvz-open { height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: flex-start; box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1; text-align: left; }
.l3-pvz-open:hover { color: var(--a-text); }
.l3-pvz-none { font-size: 14px; color: var(--mute); line-height: 1.5; }
/* Список точек — общий вид для потока и для экрана на всю высоту. */
.l3-pvz-list { display: grid; }
.l3-pvz-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.l3-pvz-row:has(input:checked) { background: var(--sel); }
.l3-pvz-row input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border-radius: 50%; border: 1px solid var(--ink); flex: none; }
.l3-pvz-row input[type="radio"]:checked { border: 5px solid var(--ink); }
.l3-pvz-row .ad { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.l3-pvz-row .about { display: block; font-size: 14px; color: var(--mute); margin-top: 2px; }
.l3-pvz-row .term { display: block; font-size: 14px; margin-top: 4px; }
.l3-pvz-row .about:empty, .l3-pvz-row .term:empty { display: none; }
.l3-pvz-empty { padding: 14px 16px; font-size: 14px; color: var(--mute); }
.l3-pvz-search { width: 100%; height: 44px; border: 1.5px solid var(--ink); background: transparent; padding: 0 12px; font-size: 16px; color: var(--ink); border-radius: 0; }
.l3-pvz-count { font-size: 13px; color: var(--mute); }
/* Экран на всю высоту (до 1023). Прокрутка страницы под ним заблокирована. */
body.l3-pvz-lock { overflow: hidden; }
.l3-sheet { position: fixed; inset: 0; z-index: 260; background: var(--bg); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.l3-sheet[hidden] { display: none; }
.l3-sheet-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ink); }
.l3-sheet-hd b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1; }
.l3-sheet-hd .x { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); margin-right: -8px; }
.l3-sheet-tools { padding: 14px 16px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.l3-sheet-tabs { display: flex; gap: 0; }
.l3-sheet-tabs button { flex: 1; height: 40px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; font-size: 14px; line-height: 1; }
.l3-sheet-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.l3-sheet-body { overflow: auto; -webkit-overflow-scrolling: touch; position: relative; }
.l3-sheet-foot { padding: 14px 16px; border-top: 1px solid var(--ink); }
.l3-sheet-pick { width: 100%; height: 52px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-start; background: var(--a); color: var(--a-ink); font-weight: 600; font-size: 17px; line-height: 1; text-align: left; }
.l3-sheet-pick:hover { background: var(--a-hover); color: var(--a-ink); }
.l3-sheet-pick[disabled] { background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; }
/* Режим «На карте»: карта на всю площадь тела, выбранная точка карточкой над нижним краем. */
.l3-sheet.is-map .l3-sheet-body { overflow: hidden; }
.l3-sheet.is-map .l3-sheet-foot { display: none; }
.l3-sheet-map { width: 100%; height: 100%; }
.l3-sheet-card { position: absolute; left: 16px; right: 16px; bottom: 16px; background: var(--bg); border: 1px solid var(--ink); padding: 14px; }
.l3-sheet-card[hidden] { display: none; }
.l3-sheet-card b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.l3-sheet-card .about { display: block; font-size: 14px; color: var(--mute); margin-top: 2px; }
.l3-sheet-card .about:empty { display: none; }
.l3-sheet-card button { width: 100%; height: 44px; margin-top: 12px; padding: 0 16px; display: flex; align-items: center; justify-content: flex-start; background: var(--a); color: var(--a-ink); font-weight: 600; font-size: 15px; line-height: 1; text-align: left; }
/* До 1024 карта в поток не встраивается никогда. */
.l3-pvz-flow { display: none; }
@media (min-width: 1024px) {
  /* 7c: список 320 и карта 400 рядом внутри блока доставки, модального экрана нет. */
  .l3-pvz-flow { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
  /* Карта не загрузилась — остаётся список во всю ширину блока: выбор пункта от карты не зависит. */
  .l3-pvz-flow.no-map { grid-template-columns: minmax(0, 1fr); }
  .l3-pvz-flow.no-map .l3-pvz-map { display: none; }
  .l3-pvz-panel { border: 1px solid var(--ink); }
  .l3-pvz-panel .top { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
  .l3-pvz-panel .l3-pvz-search { height: 40px; border: 1px solid var(--line); font-size: 15px; }
  .l3-pvz-list { max-height: 348px; overflow: auto; }
  .l3-pvz-row { padding: 12px; gap: 10px; }
  .l3-pvz-row .about, .l3-pvz-row .term { font-size: 13px; }
  .l3-pvz-row:last-child { border-bottom: 0; }
  .l3-pvz-map { height: 400px; border: 1px solid var(--line); }
  /* С мышью карта в потоке, экрана на всю высоту нет: кнопка «Выбрать пункт выдачи» не нужна,
     а строка «Выбрано: …» уходит под список (7c). */
  .l3-pvz { display: grid; }
  .l3-pvz-flow { order: 1; }
  .l3-pvz-sum { order: 2; border: 0; padding: 0; margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .l3-pvz-sum .hd { display: block; }
  .l3-pvz-sum .hd b { font-weight: 400; font-size: 14px; color: var(--mute); }
  .l3-pvz-sum .hd .cnt { display: none; }
  .l3-pvz-sum .hint, .l3-pvz-open { display: none; }
  .l3-sheet { display: none !important; }
}
.l3-co #simplecheckout_login .modal, .l3-co .simplecheckout-login-box { border: 1px solid var(--ink); padding: 20px; margin-bottom: 20px; }
.l3-co .simplecheckout-three-column, .l3-co .simplecheckout-left-column, .l3-co .simplecheckout-right-column { display: contents; }
.l3-co-empty { padding-top: 20px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .l3-co { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .l3-co .simplecheckout-block { grid-template-columns: 1fr; gap: 14px; }
  .l3-co .simplecheckout-block > *:not(.checkout-heading) { grid-column: 1; }
}
/* Кнопка подтверждения заказа. Simple прячет свою ссылку и после каждого пересчёта подставляет
   кнопку модуля оплаты — то внутри #simplecheckout_payment_form, то прямо в #buttons. Красим по
   самой кнопке, а не по предку: иначе после первого же выбора она становится системной 150×24. */
.l3-co #simplecheckout_payment_form .buttons, .l3-co #buttons { display: block; }
.l3-co #simplecheckout_payment_form .btn,
.l3-co #simplecheckout_payment_form input[type="button"],
.l3-co #simplecheckout_payment_form input[type="submit"],
.l3-co #button-confirm,
.l3-co #buttons .btn,
.l3-co #buttons input[type="button"],
.l3-co #buttons input[type="submit"],
.l3-co input#button-confirm.btn { display: block; width: 100%; height: 52px; background: var(--a); color: var(--a-ink); font-size: 17px; font-weight: 600; border: 0; border-radius: 0; cursor: pointer; margin-top: 14px; }
.l3-co #simplecheckout_payment_form .btn:hover, .l3-co #button-confirm:hover, .l3-co #buttons .btn:hover { background: var(--a-hover); color: var(--a-ink); }
.l3-co #simplecheckout_payment_form .pull-right, .l3-co #buttons .pull-right { float: none; }
/* спиннер Simple — 404 на catalog/view/image/loading.gif, свой */
.l3-co .simplecheckout-loading, .line3 .simplecheckout-loading { background: none !important; }
/* модалка пунктов выдачи: высота тела, подложка снаружи диалога */
.line3 .modal .modal-dialog { position: relative; z-index: 1; }
.line3 .modal .modal-body { min-height: 60vh; }
.line3 .modal .modal-backdrop { display: none; }
.line3 .modal .fa-spinner { display: none; }
@media (max-width: 1023px) {
  .l3-co { grid-template-columns: 1fr; gap: 28px; }
  .l3-co .simplecheckout-block { grid-template-columns: 1fr; gap: 16px; }
  .l3-co .simplecheckout-block > *:not(.checkout-heading) { grid-column: 1; }
  .l3-co .simplecheckout-block:not(:has(.checkout-heading)) { grid-template-columns: 1fr; }
  .l3-co .simplecheckout-block:not(:has(.checkout-heading)) .simplecheckout-block-content { grid-column: 1; }
  /* Один столбец: «Ваш заказ» — пятый шаг, а не боковая колонка. Рамка коробки уходит, остаётся
     верхняя линия шага и надзаголовок с номером, продолжающий нумерацию левой колонки (3a). */
  .l3-co-right { order: 2; padding: 20px 0 0; border: 0; border-top: 1px solid var(--ink); gap: 14px; }
  .l3-co-right h2 { font-size: 22px; line-height: 1.1; counter-increment: step; }
  .l3-co-right h2::before { content: counter(step); display: block; font-family: var(--font-body); font-size: 12px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
  .l3-co .checkout-heading { font-size: 22px; }
  /* Палец: «снять» и прочие текстовые ссылки итогов набирают 40 вертикальными полями. */
  .l3-co .simplecheckout-cart-total.is-note .drop { display: inline-block; padding: 12px 0; }
}
@media (max-width: 767px) {
  .l3-co #simplecheckout_customer fieldset.form-horizontal, .l3-co #simplecheckout_shipping_address fieldset.form-horizontal { grid-template-columns: 1fr; }
  .l3-co #total_total .simplecheckout-cart-total-value { font-size: 30px; }
}
/* модальные окна Simple (пункты выдачи) — Bootstrap JS без Bootstrap CSS */
.line3 .modal { display: none; position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.45); overflow: auto; }
.line3 .modal.in { display: block; }
.line3 .modal-dialog { max-width: 960px; margin: 40px auto; background: var(--bg); border: 1px solid var(--ink); }
.line3 .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.line3 .modal-header .close { order: 2; font-size: 24px; color: var(--mute); }
.line3 .modal-title { font-family: var(--font-display); font-size: 24px; }
.line3 .modal-body { padding: 20px; }
.line3 .modal-footer { padding: 16px 20px; border-top: 1px solid var(--line); }
.line3 .modal-backdrop { position: fixed; inset: 0; background: #000; opacity: .3; z-index: 240; }
.line3 .modal-open { overflow: hidden; }
/* «спасибо за заказ» */
.l3-success { padding-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.l3-success .num { font-family: var(--font-display); font-size: 56px; line-height: 1; }
@media (max-width: 1023px) { .l3-success { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- служебные страницы ---------- */
.l3-info { padding-top: 20px; display: grid; grid-template-columns: var(--filters) minmax(0, 1fr); gap: 48px; align-items: start; }
.l3-info-nav { display: grid; font-size: 15px; padding-top: 12px; }
.l3-info-nav .l3-kick { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.l3-info-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
.l3-info-nav a.is-active { font-weight: 600; }
.l3-info-nav .help { margin-top: 28px; font-size: 14px; color: var(--mute); line-height: 1.6; }
.l3-info-nav .help a { color: var(--ink); font-weight: 600; }
.l3-info-body { max-width: 820px; }
.l3-info-body .l3-lead { margin-top: 16px; }
.l3-info-body .l3-table { margin-top: 32px; }
.l3-info-body .l3-prose { margin-top: 40px; }
.l3-info-body .l3-prose h2 { font-size: 24px; }
/* Текст служебной страницы: одна колонка до 1023, две с 1024 (l3-prose--cols). Заголовок и
   пункт списка через колонку не разрывать — иначе номер остаётся внизу, а текст уезжает вправо. */
.l3-info-body .l3-prose--cols h2, .l3-info-body .l3-prose--cols li { break-inside: avoid; }
/* И не отрывать заголовок от своего абзаца: колонка рвалась ровно между ними, и
   «Отслеживание» оставалось внизу левой колонки, а текст уезжал наверх правой
   (замер 24.09.2026). */
.l3-prose--cols h2, .l3-prose--cols h3 { break-after: avoid; -webkit-column-break-after: avoid; page-break-after: avoid; }
/* Телефон внизу служебной страницы: с 1024 он в боковой колонке, до 1023 её нет. */
.l3-info-call { display: none; }
/* Способы доставки: с 768 три колонки с правым выравниванием цены, до 767 — строки.
   .sub — обёртка «срок + мера»: на широком экране display: contents отдаёт её содержимое
   сетке строки (срок в свою колонку, мера пояснением под названием), на узком она сама
   становится одной строкой пояснения под названием и ценой. */
.l3-mways { margin-top: 32px; font-size: 15px; }
.l3-mways .hd, .l3-mways .row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 130px; column-gap: 12px; }
.l3-mways .hd { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.l3-mways .hd span:last-child { text-align: right; }
.l3-mways .row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.l3-mways .sub { display: contents; }
.l3-mways .nm { grid-area: 1 / 1; font-weight: 600; }
.l3-mways .term { grid-area: 1 / 2; }
.l3-mways .price { grid-area: 1 / 3; text-align: right; white-space: nowrap; font-weight: 600; }
.l3-mways .note { grid-area: 2 / 1; margin-top: 2px; font-size: 14px; color: var(--mute); }
.l3-toc { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--mute); margin-top: 24px; }
.l3-toc a { border-bottom: 1px solid var(--line); }
.l3-doc { margin-top: 32px; font-size: 15px; line-height: 1.6; color: var(--mute); }
.l3-doc .inf-title { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin: 32px 0 12px; display: flex; gap: 12px; align-items: baseline; }
.l3-doc .inf-title .numlist { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; color: var(--mute); }
.l3-doc p { margin: 0 0 10px; }
.l3-doc .nump { color: var(--ink); margin-right: 6px; }
.l3-doc ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; }
.l3-doc dl dd { margin: 0 0 6px; }
.l3-doc .spanb { color: var(--ink); font-weight: 600; }
.l3-doc .spanc { color: var(--mute); margin-right: 6px; }
.l3-doc a { color: var(--ink); border-bottom: 1px solid var(--line); }
/* Оферта и политика: нумерованный пункт висячим отступом 20 — номер слева от текста. */
.l3-doc p:has(.nump) { padding-left: 20px; text-indent: -20px; }
.l3-contacts { padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.l3-ways { font-size: 16px; line-height: 1.5; }
.l3-ways > div { padding: 20px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.l3-ways > div:first-child { border-top-color: var(--ink); }
.l3-ways > div:last-child { border-bottom: 1px solid var(--line); }
.l3-ways .lbl { color: var(--mute); }
.l3-ways .big { font-family: var(--font-display); font-size: 30px; line-height: 1; white-space: nowrap; }
/* Почта: тем же шрифтом, что телефон, но с переносом по любому знаку — иначе на 360 адрес уезжает за край. */
.l3-ways .mail { font-family: var(--font-display); font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.l3-contacts:not(:has(.l3-map)) { grid-template-columns: minmax(0, 760px); }
@media (max-width: 1279px) { .l3-ways > div { grid-template-columns: 150px 1fr; gap: 16px; } }
.l3-ways .sub { color: var(--mute); font-size: 14px; margin-top: 6px; }
.l3-ways .msgs { display: flex; gap: 18px; flex-wrap: wrap; }
.l3-ways .msgs a { border-bottom: 1px solid var(--ink); }
.l3-map { height: 420px; border: 1px solid var(--line); overflow: hidden; }
.l3-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.l3-map--sm { height: 260px; }
.l3-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 14px; max-width: 760px; }
.l3-form .full { grid-column: 1 / 3; }
.l3-form .foot { grid-column: 1 / 3; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.l3-form .foot .l3-hint { line-height: 1.5; }
.l3-form .foot .l3-hint a { color: var(--ink); border-bottom: 1px solid var(--line); }
/* Отправленная форма: на её месте сообщение с телефоном, поля не остаются заполненными. */
.l3-form-done { font-size: 16px; line-height: 1.5; color: var(--ok); }
.l3-form-done b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.1; }
.l3-form-done p { margin-top: 10px; color: var(--mute); }
.l3-form-done a { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) { .l3-sec--two > .l3-form-done { grid-column: 2; } }
.l3-docs { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.l3-docs .scan { border: 1px solid var(--line); background: var(--photo); padding: 12px; }
.l3-docs .scan img { display: block; width: 100%; }
.l3-list-rows { font-size: 15px; }
.l3-list-rows li { padding: 14px 0; border-top: 1px solid var(--line); }
.l3-list-rows li:last-child { border-bottom: 1px solid var(--line); }
.l3-list-rows b { display: block; font-weight: 600; }
.l3-list-rows span { display: block; color: var(--mute); font-size: 14px; margin-top: 3px; }
.l3-shop { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.l3-shop:not(:has(.l3-map)) { grid-template-columns: minmax(0, 1fr); }
.l3-shop ul { display: grid; gap: 14px; font-size: 15px; line-height: 1.5; }
.l3-steps { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 24px; border-top: 1px solid var(--ink); margin-top: 40px; }
.l3-step { padding: 0 24px; border-left: 1px solid var(--line); }
.l3-step:first-child { padding-left: 0; border-left: 0; }
.l3-step:last-child { padding-right: 0; }
.l3-step h3 { margin-top: 8px; }
.l3-step p { font-size: 14px; color: var(--mute); line-height: 1.5; margin-top: 6px; }
.l3-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; font-size: 14px; line-height: 1.5; }
.l3-cards3 h3 { font-size: 16px; margin-bottom: 8px; }
.l3-cards3 p { color: var(--mute); }
.l3-cards3 ul { list-style: disc; padding-left: 18px; color: var(--mute); }
.l3-cards3 ul li { margin: 0 0 4px; }
@media (max-width: 1023px) { .l3-cards3 { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 767px) { .l3-cards3 { grid-template-columns: 1fr; gap: 20px; } .l3-req th { width: 40%; } }
.l3-pay-note { padding: 14px 16px; border: 1px solid var(--line); font-size: 14px; color: var(--mute); max-width: 760px; }
.l3-calc { display: grid; gap: 12px; max-width: 760px; }
.l3-calc .row { display: flex; gap: 8px; }
.l3-calc .row .l3-input { flex: 1; }
.l3-calc .calc-result { font-size: 14px; color: var(--mute); }
.l3-calc .calc-result table { margin-top: 8px; }
.l3-calc .calc-result td { padding: 8px 12px 8px 0; border-top: 1px solid var(--line); }
.l3-calc .calc-result th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); text-align: left; font-weight: 400; padding: 0 12px 8px 0; border-bottom: 1px solid var(--ink); }
.l3-calc .calc-result table { width: 100%; border-collapse: collapse; }
/* Карта сайта: три колонки — «Каталог», «Покупателю», «Магазин». Колонки «Города» нет. */
.l3-sitemap { padding-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; font-size: 15px; line-height: 1.6; }
.l3-sitemap h2 { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 10px; }
.l3-sitemap ul { display: grid; gap: 4px; }
.l3-sitemap ul ul { padding-left: 16px; font-size: 14px; color: var(--mute); gap: 2px; }
.l3-sitemap li > a.top { font-weight: 600; }
.l3-sitemap li > span { color: var(--mute); }
/* Больше 12 разделов — «Каталог» идёт двумя столбцами внутри своей ширины: число колонок страницы не растёт. */
.l3-sitemap ul.two { display: block; columns: 2; column-gap: 24px; }
.l3-sitemap ul.two li { break-inside: avoid; margin-bottom: 4px; }
.l3-sitemap .all { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.l3-sitemap .all a { border-bottom: 1px solid var(--line); }
.l3-404 { padding: 40px 0 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.l3-404 .code { font-family: var(--font-display); font-size: 120px; line-height: 0.9; letter-spacing: -0.03em; }
.l3-404 h1 { font-size: 40px; margin-top: 24px; }
.l3-404 .l3-lead { margin-top: 16px; max-width: 520px; }
.l3-404 form { margin-top: 24px; display: flex; gap: 12px; max-width: 520px; }
.l3-404 form input { flex: 1; height: 52px; border: 1.5px solid var(--ink); background: transparent; padding: 0 16px; font-size: 16px; }
.l3-404 form button { height: 52px; padding: 0 24px; background: var(--a); color: var(--a-ink); font-weight: 600; font-size: 16px; }
.l3-search-h { padding-top: 20px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.l3-search-h .chips { display: flex; gap: 8px; font-size: 13px; margin-left: auto; flex-wrap: wrap; }
.l3-search-empty { padding-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.l3-search-empty h1, .l3-search-h h1 { overflow-wrap: anywhere; }
.l3-search-empty .l3-lead { margin-top: 16px; }
.l3-search-empty .phone { margin-top: 16px; font-size: 15px; color: var(--mute); }
.l3-search-empty .phone a { color: var(--ink); font-weight: 600; }
/* ---------- сравнение ----------
   Таблица остаётся таблицей и в строки не раскладывается; вместо этого видно, что она
   листается. Три подсказки сразу: колонка признаков закреплена слева, правый край
   растушёван на 28 px (тем же приёмом, что лента разделов в шапке), под таблицей —
   счётчик с полосками по числу моделей. С 768 три колонки помещаются целиком, и все
   три подсказки выключаются; при одной-двух моделях (.l3-cmp--few) их тоже нет —
   колонки расходятся по 1fr, последняя из них слот «+ добавить». */
.l3-compare-h { padding-top: 20px; display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.l3-compare-h .tools { display: flex; gap: 18px; font-size: 14px; margin-left: auto; align-items: center; }
.l3-compare-h .tools a { color: var(--mute); border-bottom: 1px solid var(--line); }
.l3-compare-h .tools .hid { font-size: 13px; color: var(--mute); margin-left: -8px; }
.l3-cmp { font-size: 15px; margin-top: 28px; }
@media (min-width: 768px) { .l3-cmp { table-layout: fixed; width: 100%; } }
@media (max-width: 1023px) {
  .l3-cmp th .rm { display: inline-block; padding: 8px 0; }
  .l3-check { min-height: 44px; }
  .l3-pagination a, .l3-pagination span, .l3-pagination b { min-width: 44px; height: 44px; }
  .l3-buy .ask a, .l3-buy .ask button { display: inline-block; padding: 8px 0; }
}
.l3-cmp th { text-align: left; vertical-align: top; padding: 0 24px 20px 0; border-bottom: 1px solid var(--ink); font-weight: 400; }
.l3-cmp th.lbl { width: 260px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); vertical-align: bottom; }
.l3-cmp th .img { width: 140px; height: 140px; background: var(--photo); border: 1px solid var(--line); overflow: hidden; }
.l3-cmp th .img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.l3-cmp th .nm { display: block; font-weight: 600; font-size: 18px; margin-top: 12px; }
.l3-cmp th .sku { font-size: 13px; color: var(--mute); }
.l3-cmp th .rm { font-size: 13px; color: var(--mute); border-bottom: 1px solid var(--line); }
.l3-cmp th .add { display: grid; place-items: center; width: 140px; height: 140px; border: 1px dashed var(--ink); font-size: 14px; font-weight: 600; text-align: center; line-height: 1.3; }
.l3-cmp td { padding: 14px 24px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.l3-cmp td.lbl { color: var(--mute); }
.l3-cmp td.diff { font-weight: 600; }
.l3-cmp td.is-empty { color: var(--mute); }
.l3-cmp td.price { font-weight: 600; font-size: 20px; }
.l3-cmp tr.same.only-diff { display: none; }
.l3-cmp tr.actions td { border-bottom: 0; padding-top: 20px; }
/* 768–1023: три колонки должны помещаться целиком, поэтому колонка признаков ужимается
   с 260 до 150, а фото — со 140 до 100. Правило стоит после базовых: у них та же
   специфичность, и медиазапрос выше по файлу базу не перебил бы. */
@media (min-width: 768px) and (max-width: 1023px) {
  .l3-cmp th.lbl, .l3-cmp td.lbl { width: 150px; }
  .l3-cmp th .img, .l3-cmp th .add { width: 100%; max-width: 100px; height: 100px; }
}
/* Перечень на 14–21 пункт в таблице разворачивать нечем: строка вырастает в десять раз
   и ритм ломается. В таблице остаётся кнопка со счётчиками, пункты — в отдельном листе. */
.l3-cmp .listcell { padding-top: 10px; padding-bottom: 10px; }
.l3-cmp-listbtn { color: var(--ink); border-bottom: 1px solid var(--ink); font-weight: 600; font-size: 14px; line-height: 1; padding: 10px 0; }
.l3-cmp-listbtn:hover { color: var(--a-text); border-bottom-color: var(--a); }
.l3-cmp-hint { display: flex; align-items: center; gap: 10px; padding: 12px 0 4px; font-size: 13px; color: var(--mute); }
.l3-cmp-hint .bars { display: flex; gap: 4px; align-items: center; flex: none; }
.l3-cmp-hint .bars i { width: 18px; height: 2px; background: var(--line); }
.l3-cmp-hint .bars i.is-on { background: var(--ink); }
@media (min-width: 768px) { .l3-cmp-hint { display: none; } }
.l3-cmp-sheet[hidden] { display: none; }
.l3-cmp-sheet { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; }
.l3-cmp-sheet .mask { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.l3-cmp-sheet .box { position: relative; display: flex; flex-direction: column; width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 64px); background: var(--bg); border: 1px solid var(--ink); }
.l3-cmp-sheet .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--ink); flex: none; }
.l3-cmp-sheet .head b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.l3-cmp-sheet .x { width: 40px; height: 40px; margin-right: -10px; display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--mute); }
.l3-cmp-sheet .x:hover { color: var(--ink); }
.l3-cmp-sheet .cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 24px; padding: 20px; overflow: auto; }
.l3-cmp-sheet .col .nm { font-weight: 600; font-size: 15px; line-height: 1.25; }
.l3-cmp-sheet .col .cnt { font-size: 12px; color: var(--mute); margin-top: 2px; }
.l3-cmp-sheet .col ol { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; line-height: 1.45; }
.l3-cmp-sheet .col li { padding: 7px 0; border-top: 1px solid var(--line); }
body.l3-cmp-lock { overflow: hidden; }
@media (max-width: 1023px) {
  .l3-cmp-sheet .box { width: 100vw; height: 100%; max-height: none; border: 0; }
  .l3-cmp-sheet .cols { grid-auto-columns: minmax(min(62vw, 240px), 1fr); padding: 16px; }
}
@media (max-width: 767px) {
  /* Колонка признаков закреплена, правый край растушёван — обе подсказки нужны только
     там, где три колонки по 150 не помещаются. При одной-двух моделях таблица влезает
     целиком, закрепления и растушёвки нет (класс .l3-cmp-scroll не выводится). */
  .l3-cmp-scroll { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
                   mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  /* Долистали до конца — растушёвывать нечего, иначе последняя колонка выцветает без причины. */
  .l3-cmp-scroll.is-end { -webkit-mask-image: none; mask-image: none; }
  /* На телефоне строка с чекбоксом занимает всю ширину: «скрыто N» уходит вправо,
     иначе она жмётся к «Очистить» и читается как часть ссылки. */
  .l3-compare-h .tools { width: 100%; margin-left: 0; }
  .l3-compare-h .tools .hid { margin-left: auto; }
  .l3-cmp { font-size: 14px; margin-top: 20px; }
  .l3-cmp th, .l3-cmp td { padding-right: 10px; }
  .l3-cmp th.lbl, .l3-cmp td.lbl { width: 116px; min-width: 116px; }
  .l3-cmp-scroll .l3-cmp th.lbl, .l3-cmp-scroll .l3-cmp td.lbl { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: 1px 0 0 var(--line); }
  /* Кнопка перечня одна на всю строку: если её не закрепить, при прокрутке вправо
     строка «Инструменты» выглядит пустой. 126 = 116 колонки признаков + отступ. */
  .l3-cmp-scroll .listcell .l3-cmp-listbtn { position: sticky; left: 126px; }
  /* Сброс :where(.line3) table задаёт width: 100%, а при width: auto таблица садится на
     ширину содержимого (у нас вышло 120 вместо 150). Нужны ровно 150: фиксированная
     раскладка плюс max-content — сумма заданных ширин колонок. */
  .l3-cmp:not(.l3-cmp--few) { table-layout: fixed; width: -webkit-max-content; width: max-content; }
  .l3-cmp:not(.l3-cmp--few) th:not(.lbl) { width: 150px; }
  .l3-cmp:not(.l3-cmp--few) .addcol { display: none; }
  /* Две модели плюс слот «+ добавить» — это три колонки по 81 на 390. Кнопка с
     white-space: nowrap туда не влезает и наезжает на соседнюю: разрешаем перенос. */
  .l3-cmp--few { table-layout: fixed; width: 100%; }
  .l3-cmp--few tr.actions .l3-btn { width: 100%; height: auto; min-height: var(--tap); padding: 8px 6px; font-size: 13px; line-height: 1.15; white-space: normal; }
  /* Перенос по буквам нужен значениям (артикулы, коды), но не названиям признаков:
     иначе «Инструментов» разрывается посреди слова. */
  .l3-cmp td:not(.lbl) { overflow-wrap: anywhere; }
  .l3-cmp th { padding-bottom: 14px; }
  /* У одной-двух моделей колонка уже 100 px, и фото постоянной высоты вытянулось бы
     в прямоугольник: держим квадрат по ширине колонки. */
  .l3-cmp th .img { width: 100%; max-width: 100px; height: auto; aspect-ratio: 1; }
  .l3-cmp th .add { width: 100%; max-width: 100px; height: 100px; }
  .l3-cmp th .nm { font-size: 15px; margin-top: 8px; line-height: 1.25; }
  .l3-cmp th .sku { font-size: 12px; }
  .l3-cmp td { padding-top: 12px; padding-bottom: 12px; }
  .l3-cmp td.price { font-size: 18px; }
}
.l3-account { padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.l3-panel { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--ink); }
.l3-panel h1, .l3-panel h2 { font-size: 26px; }
@media (max-width: 1023px) {
  .l3-info { grid-template-columns: 1fr; gap: 24px; }
  .l3-info-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 0; }
  .l3-info-nav .l3-kick, .l3-info-nav .help { display: none; }
  .l3-info-nav a { padding: 11px 12px; border: 1px solid var(--line); line-height: 20px; }
  .l3-info-nav a.is-active { border-color: var(--ink); }
  .l3-info-call { display: block; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
  .l3-info-call a { color: var(--ink); font-weight: 600; white-space: nowrap; }
  .l3-contacts, .l3-shop, .l3-search-empty, .l3-404, .l3-account { grid-template-columns: 1fr; gap: 28px; }
  .l3-map { height: 320px; }
  .l3-steps { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .l3-step:nth-child(3) { padding-left: 0; border-left: 0; }
  .l3-cards3 { grid-template-columns: 1fr; gap: 20px; }
  /* 768 — две колонки; заголовки колонок остаются, «Каталог» в один столбец. */
  .l3-sitemap { grid-template-columns: 1fr 1fr; gap: 32px; }
  .l3-sitemap ul.two { columns: 1; }
  .l3-sitemap li > a { display: inline-block; padding: 10px 0; }
  .l3-docs { grid-template-columns: 1fr; }
  .l3-docs .scan { max-width: 280px; }
  .l3-404 .code { font-size: 96px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .l3-info-nav a { padding: 11px 14px; } }
@media (max-width: 767px) {
  /* Способ связи складывается: метка 13 сверху, значение под ней. */
  .l3-ways > div { grid-template-columns: 1fr; gap: 6px; }
  .l3-ways .lbl { font-size: 13px; }
  .l3-table .r { white-space: normal; } .l3-table td { padding: 12px 8px; } .l3-table td:first-child { padding-left: 0; } .l3-table td:last-child { padding-right: 0; }
  .l3-ways .big { font-size: 26px; }
  .l3-map { height: 260px; }
  /* Способы доставки строками: название и цена в линию, срок и мера пояснением под ними. */
  .l3-mways .hd { display: none; }
  .l3-mways .row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; padding: 14px 0; }
  .l3-mways .hd + .row { border-top: 1px solid var(--ink); }
  .l3-mways .nm { flex: 1 1 auto; min-width: 0; }
  .l3-mways .price { margin-left: auto; }
  .l3-mways .sub { display: block; flex: 0 0 100%; font-size: 14px; color: var(--mute); }
  .l3-mways .note { margin-top: 0; font-size: inherit; }
  .l3-mways .row.has-term .note::before { content: "·"; margin: 0 6px 0 4px; }
  .l3-form { grid-template-columns: 1fr; }
  .l3-form .full, .l3-form .foot { grid-column: auto; }
  .l3-steps { grid-template-columns: 1fr; }
  .l3-step { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 16px; }
  .l3-step:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
  .l3-sitemap { grid-template-columns: 1fr; }
  .l3-404 .code { font-size: 72px; }
  .l3-404 h1 { font-size: 30px; }
  .l3-404 form { flex-direction: column; }
  .l3-404 form input { flex: none; width: 100%; }
}

/* печать */
@media print { .l3-nav, .l3-search, .l3-hdr-links, .l3-sticky-buy, .l3-filters, .l3-toast { display: none !important; } }

/* телефон: шрифт полей ≥ 16px, иначе iOS приближает страницу при фокусе */
@media (max-width: 767px) {
  .line3 .l3-input, .line3 .l3-co .form-control, .line3 .l3-404 form input, .line3 .l3-search-bar input, .line3 .l3-calc .l3-input, .line3 .l3-qty input { font-size: 16px; }
}
/* Граница «палец или мышь» в теме была проведена дважды: часть правил до 767, часть до 1023.
   768 — это iPad в книжной ориентации, там тоже палец: цели нажатия падали до 17–22 px, а поля
   оставались 15 px и iOS зумил страницу при фокусе. Сводим всё к 1023. */
@media (max-width: 1023px) {
  .l3-hdr-links a, .l3-hdr-links button { display: inline-block; padding: 13px 0; line-height: 20px; }
  .l3-ftr-links a, .l3-ftr-row .contacts a, .l3-toc a { display: inline-block; padding: 12px 0; }
  .line3 .l3-input, .line3 .l3-co .form-control, .line3 .l3-404 form input, .line3 .l3-search-bar input,
  .line3 .l3-calc .l3-input, .line3 .l3-qty input, .line3 .l3-co-item .qty input,
  .line3 .l3-co-items input[type="text"] { font-size: 16px; }
}


/* ---- Отзывы на карточке товара. Пакет дизайнера «Варианты блока отзывов», 27.09.2026.
   Скругления 0, теней нет; линии: 1px var(--ink) — начало раздела, 1px var(--line) — между
   карточками. Размеры и отступы из пакета, поэтому местами заданы числом, а не токеном. */
.l3-rv { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.l3-rv-sum { position: sticky; top: 24px; }
.l3-rv-sum h2 { font-family: 'Piazzolla', Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.l3-rv-avg { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.l3-rv-avg .num { font-family: 'Piazzolla', Georgia, serif; font-size: 56px; line-height: 1; }
.l3-rv-avg .l3-rv-stars { font-size: 20px; }
.l3-rv-avg .cnt { font-size: 14px; flex: 1 1 100%; }
.l3-rv-stars { letter-spacing: 2px; white-space: nowrap; }
/* `--a-ground` шапка задаёт только там, где чистый акцент на фоне карточки
   не различим (золотые сайты: 1,83 при норме 3). Иначе звёзды цвета марки. */
.l3-rv-stars .on { color: var(--a-ground, var(--a)); }
.l3-rv-stars .off { color: var(--line); }
.l3-rv-dist { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.l3-rv-dist .row { width: 100%; display: grid; grid-template-columns: 32px 1fr 24px; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--mute); font: 400 13px 'Commissioner', system-ui, sans-serif; text-align: left; cursor: pointer; }
.l3-rv-dist .row:hover:not([disabled]) { background: var(--card); }
.l3-rv-dist .row[disabled] { cursor: default; opacity: .55; }
.l3-rv-dist .row.is-on { background: var(--card); color: var(--ink); font-weight: 600; }
.l3-rv-dist .bar { height: 6px; background: var(--line); display: block; }
.l3-rv-dist .bar > span { display: block; height: 6px; background: var(--ink); }
.l3-rv-dist .n { text-align: right; }
.l3-rv-hint { margin: 10px 0 0; font-size: 12px; color: var(--mute); }

.l3-rv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; }
.l3-rv-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.l3-rv-sort button { height: 36px; padding: 0 12px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: transparent; color: var(--mute); font: 400 14px 'Commissioner', system-ui, sans-serif; cursor: pointer; }
.l3-rv-sort button.is-on { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
/* Нативный select нужен только до 767 — там он во всю ширину и шрифтом 16, иначе iOS зумит. */
.l3-rv-sel { display: none; }
.l3-rv-chip { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--ink); color: var(--bg); font: 600 14px 'Commissioner', system-ui, sans-serif; border: 0; cursor: pointer; margin-left: auto; }
.l3-rv-chip[hidden] { display: none; }

/* min-height у списка — чтобы пагинация не прыгала при смене страницы (пакет). */
.l3-rv-list { display: grid; margin: 0; padding: 0; list-style: none; min-height: 600px; align-content: start; }
.l3-rv-item { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.l3-rv-item .ava { width: 48px; height: 48px; background: var(--card); display: grid; place-items: center; font-family: 'Piazzolla', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1; }
.l3-rv-item .head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.l3-rv-item .head b { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.l3-rv-item .head .date { font-size: 14px; color: var(--mute); }
.l3-rv-item .head .l3-rv-stars { font-size: 16px; margin-left: auto; }
.l3-rv-item .text { margin: 8px 0 0; font-size: 15px; line-height: 1.55; max-width: 760px; text-wrap: pretty; }
.l3-rv-item .text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.l3-rv-more { margin-top: 6px; border: 0; background: transparent; padding: 0; font: 400 14px 'Commissioner', system-ui, sans-serif; color: var(--ink); border-bottom: 1px solid var(--line); cursor: pointer; }
.l3-rv-more.is-open { color: var(--mute); }

.l3-rv-none { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.l3-rv-none p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mute); }

.l3-rv-pag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.l3-rv-pag .nums { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Стрелки рисует JS как <button>, номера сервер — как <a>: размер задаём всем,
   иначе кнопка выходит 15×23 и выглядит пустым квадратиком (канарейка 27.09.2026).
   Цель нажатия 44 требует сам пакет. */
.l3-rv-pag .nums a, .l3-rv-pag .nums b, .l3-rv-pag .nums button, .l3-rv-pag .nums span.dots { min-width: 44px; height: 44px; display: grid; place-items: center; font-size: 15px; font-weight: 400; color: var(--ink); border: 0; background: transparent; font-family: inherit; cursor: pointer; padding: 0; }
.l3-rv-pag .nums a:hover { background: var(--card); }
/* Активный номер страницы — тёмная плашка. Но `b` есть и внутри «Страница N из M»,
   и без уточнения подпись красилась тем же чёрным во всю ширину. */
.l3-rv-pag .nums > b { background: var(--ink); color: var(--bg); font-weight: 600; }
.l3-rv-pag .step b { background: transparent; color: var(--ink); }
.l3-rv-pag .nums span.dots { min-width: 24px; color: var(--mute); }
.l3-rv-pag .arr { box-shadow: inset 0 0 0 1px var(--line); }
.l3-rv-pag .arr.next { box-shadow: inset 0 0 0 1.5px var(--ink); }
.l3-rv-pag .arr.is-off { opacity: .35; pointer-events: none; }
.l3-rv-pag .of { margin-left: auto; font-size: 13px; }
.l3-rv-pag--one .nums { display: none; }
.l3-rv-pag--one .of { margin-left: 0; }
/* До 767 при числе страниц больше пяти пагинация превращается в «Страница N из M». */
.l3-rv-pag .step { display: none; text-align: center; }
.l3-rv-pag .step b { font-family: 'Piazzolla', Georgia, serif; font-weight: 400; font-size: 18px; display: block; }
.l3-rv-pag .step span { font-size: 13px; color: var(--mute); }

@media (max-width: 1023px) {
  .l3-rv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-top: 20px; }
  .l3-rv-sum { position: static; }
  .l3-rv-sum h2 { font-size: 30px; }
  .l3-rv-avg .num { font-size: 48px; }
  .l3-rv-avg .l3-rv-stars { font-size: 19px; }
  .l3-rv-dist .row { height: 40px; grid-template-columns: 30px 1fr 24px; }
  /* Сводка занимает обе колонки: слева заголовок и средняя, справа распределение. */
  .l3-rv-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; grid-column: 1 / -1; }
  /* Распределение занимает правую колонку целиком, подсказка встаёт ПОД ним:
     в одной ячейке они накладывались друг на друга (канарейка 27.09.2026). */
  .l3-rv-sum h2 { grid-column: 1; grid-row: 1; }
  .l3-rv-sum .l3-rv-avg { grid-column: 1; grid-row: 2; align-self: start; }
  .l3-rv-sum .l3-rv-dist { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .l3-rv-sum .l3-rv-hint { grid-column: 2; grid-row: 3; margin-top: 8px; }
  .l3-rv-body { grid-column: 1 / -1; }
  .l3-rv-item { grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; }
  .l3-rv-item .ava { width: 44px; height: 44px; font-size: 20px; }
  .l3-rv-item .head .l3-rv-stars { font-size: 15px; letter-spacing: 1.5px; }
  .l3-rv-item .head .date { flex: 1 1 100%; order: 3; }
  .l3-rv-item .head .l3-rv-stars { order: 2; }
  .l3-rv-list { min-height: 0; }
  .l3-rv-sort button { height: 40px; }
  .l3-rv-pag .nums a, .l3-rv-pag .nums b, .l3-rv-pag .nums button { min-width: 40px; height: 40px; }
}

@media (max-width: 767px) {
  .l3-rv { grid-template-columns: 1fr; gap: 0; }
  .l3-rv-sum { grid-template-columns: 1fr; gap: 0; }
  .l3-rv-sum h2 { font-size: 26px; }
  .l3-rv-sum .l3-rv-dist, .l3-rv-sum .l3-rv-hint { grid-column: 1; grid-row: auto; }
  .l3-rv-sum .l3-rv-dist { margin-top: 10px; }
  .l3-rv-avg .num { font-size: 40px; }
  .l3-rv-avg .l3-rv-stars { font-size: 18px; }
  .l3-rv-bar { margin-top: 20px; }
  .l3-rv-sort { display: none; }
  .l3-rv-sel { display: block; flex: 1 1 auto; min-width: 0; position: relative; }
  .l3-rv-sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 40px; padding: 0 32px 0 12px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: transparent; color: var(--ink); font: 400 16px 'Commissioner', system-ui, sans-serif; border-radius: 0; }
  .l3-rv-sel::after { content: '▼'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--mute); pointer-events: none; }
  .l3-rv-item .text { max-width: none; }
  /* Шагами: стрелки и «Страница N из M» лежат ВНУТРИ .nums, поэтому сеткой становится
     сам .nums. Прятать его нельзя — кнопки получатся 0×0 и нажать их будет нечем. */
  .l3-rv-pag.is-step .nums { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; width: 100%; }
  .l3-rv-pag.is-step .step { display: block; text-align: center; }
  .l3-rv-pag.is-step .of { display: none; }
  .l3-rv-pag.is-step .arr { min-width: 44px; height: 44px; box-shadow: inset 0 0 0 1.5px var(--ink); }
}