/* Карточка товара: краска bruleur поверх каркаса krom.
   Раскладку, размеры и порядок блоков задают krom-ui.css и product.css (копии krom); здесь — ТОЛЬКО цвет, обводки, радиусы, тени и шрифт
   по правилам bruleur («белый документ», макет /design/):
   - вместо рамок и линий — заливка --surface-2 (строки таблиц через одну, плашки, счётчик, вкладки телефона);
   - тени — только у всплывающих слоёв (окно, просмотр фото), у карточек и панелей их нет;
   - радиусы — токены 6 / 8 / 12 (--radius-sm / -md / -lg);
   - шрифт Inter везде: моноширинные подписи krom заменены токеном --mono → Inter (krom-bridge.css), а капс с разрядкой — обычным текстом;
   - главная кнопка чёрная; тёмная панель покупки krom — светлая плитка на --surface-2 с чёрной «В корзину».
   Значения переменных krom (--ink, --muted, --chip, --panel, --s*, --r-*, --f-* …) — в krom-bridge.css. */

/* ── Шрифт: Inter, без капса и разрядки ─────────────────────────────────────────────────────────────────── */
.pdp .k-head { font: 600 17px/1.3 var(--font-sans); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.pdp .k-more { font: 500 13.5px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; }
.pdp .k-btn { font: 600 14.5px/1.1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.pdp .k-hint, .pdp .k-table, .pdp-head .ids { font-family: var(--font-sans); }
.pdp-head h1 { font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pdp-head .ids { font-size: 13px; }
.pdp .crumbs { font: 500 12px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; }
.brandmark b { font: 700 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.brandmark-cap { font: 500 12px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; }
.pdp-tabs a { font: 600 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.mbuy-price b { font: 800 25px/1 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mbuy-price s { font: 500 11px/1 var(--font-sans); }
/* Полоса покупки под палец (03.11.2026): цена крупная, старая цена и скидка — красным бейджем на верхней границе полосы,
   кнопка «в корзину» не растягивается на всё свободное место, а стоит справа рядом со счётчиком. */
.mbuy { position: fixed; }
.mbuy-off { position: absolute; left: var(--s4); top: 0; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px; background: var(--brand); color: #fff; font: 700 12px/1 var(--font-sans); white-space: nowrap; pointer-events: none; }
.mbuy-off s { color: #fff; font: 600 12px/1 var(--font-sans); text-decoration-thickness: 1.5px; opacity: .92; }
.mbuy-price { padding-top: 4px; }
.mbuy-qty { margin-left: auto; height: 44px; }
.mbuy-qty button { width: 40px; height: 44px; }
.mbuy-add { flex: none; margin-left: 0; min-height: 44px; padding: 0 22px; }
.mbuy-qty.wide { flex: 1 1 auto; margin-left: auto; }
@media (max-width: 400px) {
  .mbuy { gap: var(--s2); }
  .mbuy-price b { font-size: 21px; }
  .mbuy-qty button { width: 34px; }
  .mbuy-qty output { min-width: 18px; }
  .mbuy-add { padding: 0 14px; }
}
.mbuy-price small { font: 400 11px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; }
.mbuy-qty button, .mbuy-qty output { font-family: var(--font-sans); }
.mbuy-add { font: 600 14px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; }
.viewer .nav, .viewer .shut, .viewer .count { font-family: var(--font-sans); }

/* ── Заливка вместо линий ───────────────────────────────────────────────────────────────────────────── */
.row1 { border-top: 0; padding-top: var(--s4); }
.below .blk, .pdp-wide { border-top: 0; }
.below .blk { padding-top: 0; }
.below .blk + .blk, .below .blk[style] { margin-top: var(--s7) !important; }
.pdp-wide { padding-top: 0; margin-top: var(--s9); }

/* Таблицы «название — значение»: серые строки через одну, без линий (как в макете) */
.pdp .k-table { border-collapse: separate; border-spacing: 0; }
.pdp .k-table.spec th, .pdp .k-table.spec td { border-bottom: 0; padding: var(--s2) var(--s3); }
.pdp .k-table.spec th { padding-right: var(--s2); color: var(--muted); font-weight: 400; }
.pdp .k-table.spec td { color: var(--ink); font-weight: 500; }
.pdp .k-table.spec tr:nth-child(odd) > * { background: var(--chip); }
.pdp .k-table.spec tr > :first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.pdp .k-table.spec tr > :last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.pdp .k-table.spec td u { color: var(--muted); }

/* Описание и текстовые блоки: Inter, цвет текста bruleur */
.pdp .prose { font: 400 15px/1.7 var(--font-sans); color: var(--ink); max-width: 780px; }
.pdp .prose > :first-child { margin-top: 0; }
.pdp .prose > :last-child { margin-bottom: 0; }
.pdp .prose p { margin: 0 0 14px; }
.pdp .prose ul, .pdp .prose ol { margin: 0 0 14px; padding-left: 22px; }
.pdp .prose h3 { margin: 24px 0 10px; font: 600 17px/1.3 var(--font-sans); }
.pdp .prose h4 { margin: 20px 0 8px; font: 600 15.5px/1.3 var(--font-sans); }
.pdp .prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--surface-3); }
.pdp .prose a:hover { text-decoration-color: var(--ink); }
.pdp .prose hr { height: 0; margin: 22px 0; border: 0; border-top: 1px solid var(--surface-3); }
.pdp .prose blockquote { margin: 0 0 14px; padding: 14px 18px; border-radius: var(--r-md); background: var(--chip); }
.pdp .prose img { display: block; max-width: 100%; height: auto; margin: 8px 0 16px; border-radius: var(--r-md); }
.pdp .prose .pdp-table { margin: 0 0 18px; overflow-x: auto; border-radius: var(--r-md); }
.pdp .prose table { width: 100%; min-width: 440px; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.5; }
.pdp .prose th, .pdp .prose td { padding: 9px 14px; border: 0; text-align: left; vertical-align: top; }
.pdp .prose th { background: var(--surface-3); font-weight: 600; }
.pdp .prose tr:nth-child(even) > td { background: var(--chip); }

/* Взаимозаменяемые и «подходит к»: плашки на заливке, без обводки */
.pdp .k-chip, .pdp .chips span { border: 0; background: var(--chip); border-radius: var(--r-sm); color: var(--ink); font: 400 14px/1.3 var(--font-sans); }
.pdp .k-chip:hover { border: 0; background: var(--surface-3); }
.pdp .chips span { color: var(--ink); }

/* Документы: строка на заливке, ссылка без подчёркивания */
.docs { display: grid; gap: var(--s2); max-width: 780px; margin: 0; padding: 0; list-style: none; }
.docs li { margin: 0; }
.docs a.k-link { display: flex; align-items: center; padding: 12px 16px; border-radius: var(--r-md); background: var(--chip); text-decoration: none; font: 400 14.5px/1.35 var(--font-sans); transition: background var(--t-fast) ease; }
.docs a.k-link:hover { background: var(--surface-3); }

/* ── Галерея ─────────────────────────────────────────────────────────────────────────────────────────── */
.gal-main, .gal-thumbs button { background: var(--surface); border-radius: var(--r-md); }
.gal-thumbs button { border-radius: var(--r-sm); }
.gal-main .zoom { background: rgba(11, 12, 15, .72); }
.gal-cap { font: 400 12px/1.5 var(--font-sans); }
.gal-empty { position: relative; background: var(--chip); border-radius: var(--r-md); font: 500 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.gal-empty.gal-art { background: var(--surface); }

/* ── Панель покупки: светлая плитка на --surface-2 (в krom — тёмная k-dark) ─────────────────────────── */
.k-dark.purchase { background: var(--chip); color: var(--ink); border-radius: var(--r-lg); box-shadow: none; padding: var(--s5); --focus: 0 0 0 2px var(--chip), 0 0 0 4px var(--ink); }
.purchase .k-hint { color: var(--muted); font-family: var(--font-sans); }
.purchase-price b { font: 800 44px/1 var(--font-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.purchase-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); align-self: stretch; min-height: 28px; }
.purchase-save { display: flex; align-items: center; gap: var(--s3); }
.purchase-was { color: var(--muted); font: 500 15px/1 var(--font-sans); text-decoration-thickness: 1.5px; }
.purchase-off { background: var(--brand); color: #fff; font: 700 13px/1 var(--font-sans); padding: 5px 8px; border-radius: 7px; }
.purchase .state-badge { height: auto; min-height: 24px; padding: 3px 10px; line-height: 1.3; white-space: nowrap; flex: none; }
.purchase .k-qty { background: var(--surface); border: 0; border-radius: var(--r-sm); }
.purchase .k-qty button { color: var(--muted); }
.purchase .k-qty button:hover { color: var(--ink); background: var(--surface-3); }
.purchase .k-qty button:disabled { color: var(--dim); background: none; }
.purchase .k-qty input { color: var(--ink); border: 0; font: 600 14px/1 var(--font-sans); }
.purchase .k-btn.inv { background: var(--ink); color: var(--dark-ink); }
.purchase .k-btn.inv:hover { background: color-mix(in srgb, var(--ink) 86%, var(--surface)); }
.purchase .k-btn.inv:active { background: var(--ink); }
.purchase .k-btn.sec { background: var(--surface); color: var(--ink); border: 0; }
.purchase .k-btn.sec:hover { background: var(--surface-3); border: 0; }
.purchase .k-btn.sec:active { background: var(--surface-3); }
.k-dark .k-btn:disabled, .k-dark .k-btn[aria-disabled="true"] { background: var(--surface-3) !important; color: var(--muted) !important; }
.purchase-promise { border-top: 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); }
.purchase-promise.k-hint, .purchase .purchase-promise.k-hint { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.purchase-promise svg { color: var(--muted); }

/* ── Телефон: вкладки и полоса покупки ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.pdp-tabs-row { border: 0; background: var(--chip); border-radius: var(--r-md); }
	.pdp-tabs.stuck { box-shadow: 0 4px 16px rgba(0, 0, 0, .05); }
	.pdp-tabs a[aria-current="true"] { color: var(--dark-ink); }
	.pdp-pill { background: var(--ink); }
	.mbuy-qty { background: var(--chip); border-radius: var(--r-sm); }
	.mbuy-add { background: var(--ink); color: var(--dark-ink); border-radius: var(--r-sm); }
	.mbuy-add[disabled] { background: var(--surface-3); color: var(--muted); }
	a.mbuy-add { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
}

/* ── Мини-карточки «Похожие» (static/catalog/minicard.css krom) ───────────────────────────────────────── */
.pdp .mc-name { font-family: var(--font-sans); }
.pdp .mc-money b { font: 700 14px/1.15 var(--font-sans); }
.pdp .mc-money s { font: 500 11px/1.2 var(--font-sans); color: var(--badge-red-fg); }
.pdp .mc-money small { display: none; }
.pdp .mc-stock { font: 600 11px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--badge-green-fg); }
.pdp .mc-add { background: var(--ink); color: var(--dark-ink); font: 600 12px/1.25 var(--font-sans); letter-spacing: 0; text-transform: none; min-height: 34px; border-radius: var(--r-sm); }
.pdp .mc-qty { background: var(--chip); border-radius: var(--r-sm); min-height: 34px; }
.pdp .mc-qty output { font-family: var(--font-sans); }
.pdp .mc-shot { background: var(--surface); border-radius: var(--r-md); }
.pdp .mc-none { background: var(--chip); }
/* Рабочая область bruleur уже, чем у krom (боковая панель 280 px, а не 252): восемь мини-карточек в строку помещаются при минимальной
   ширине столбца 104 px (в krom — 116 px); иначе восьмая падала бы одна на вторую строку. Всё остальное — правило krom. */
.pdp .mc-grid { grid-template-columns: repeat(auto-fill, minmax(max(104px, calc((100% - 7 * var(--s4)) / 8)), 1fr)); }
@media (max-width: 640px) { .pdp .mc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }