/* Карточка товара: копия apps/catalog/templates/catalog/_css_product.html krom БЕЗ изменения правил — только вынесена из <style> в файл,
   комментарии шаблона стали обычными. Окно «Запросить счёт» (.ivm) — invoice-modal.css; цвета и обводки bruleur — pdp-skin.css (токены — krom-bridge.css). */
.pdp{padding-top:var(--s6); padding-bottom:var(--s9)}

/* Хлебные крошки */
.crumbs{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center;
  font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:var(--s5)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--ink)}
/* Знак марки прижат вправо: слева дорожка каталога, справа — кто сделал.
   Служебные ссылки идут следом и к запуску исчезнут вместе с правами. */
.brandmark{margin-left:auto; display:inline-flex; align-items:center; flex:none}
.brandmark img{height:var(--mark-h); width:auto; max-width:150px; display:block;
  object-fit:contain}
.brandmark b{font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted)}
.brandmark:hover b{color:var(--ink)}
/* Компьютер: знак марки — правой колонкой шапки, в рамке одного размера
   для всех марок (широкие упираются в ширину, квадратные — в высоту), под
   ним подпись «Brand <имя>» (замечания владельца 03.10.2026). Имя марки под
   знаком — текстом и ссылкой на её страницу: для поиска марка звучит
   словами, а не только картинкой. Телефон — по своим правилам, как был. */
@media (min-width:901px){
  /* Шапка — две колонки: слева название и номера, справа знак марки с
     подписью, по центру высоты левой колонки (замечание владельца 03.10.2026:
     справа слиплось и не выровнено по вертикали). */
  .pdp-head{display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--s7);
    align-items:center}
  .pdp-head > h1, .pdp-head > .ids{grid-column:1}
  .pdp-head > .brandmark{grid-column:2; grid-row:1 / span 2; margin:0; padding:0 var(--s3);
    flex-direction:column; align-items:center; gap:12px; text-decoration:none}
  .pdp-head > .brandmark *{text-decoration:none}
  /* Рамка по знаку, а не пустой ящик: широкие упираются в 150, высокие в 44. */
  .pdp-head > .brandmark img{width:auto; height:auto; max-width:150px; max-height:44px}
  .brandmark-cap{font:var(--f-label); line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); text-align:center; white-space:nowrap}
  .brandmark-cap b{color:var(--ink); font-weight:600; margin-left:.4em}
  /* На компьютере марка — под знаком (вместе с именем); в строке номеров
     её не повторяем. На телефоне знака нет — там марка в строке номеров. */
  .pdp-head .ids-brand{display:none}
}
.pdp-head .ids a{color:inherit; text-decoration:none}
.pdp-head .ids a:hover b{text-decoration:underline; text-underline-offset:3px}

/* Заголовок над первой строкой: имя целиком, номера рядом */
.pdp-tabs{display:none}
.pdp-head{margin-bottom:var(--s6)}
.pdp-head h1{font:var(--f-h1); letter-spacing:-.015em; margin:0 0 var(--s3); max-width:none}
.pdp-head .ids{display:flex; gap:var(--s5); flex-wrap:wrap; font:var(--f-small); color:var(--muted)}
.pdp-head .ids b{color:var(--ink); font-weight:600}

/* ── Первая строка: галерея · характеристики · покупка ──────────────────── */
/* Три блока строго одной высоты: сетка растягивает их до самого высокого
   (им всегда оказывается галерея — её задаёт квадрат снимка), а внутри
   каждый блок — колонка, которая распределяет содержимое на всю высоту.
   Поэтому строка не «скачет» от того, сколько у товара характеристик
   или сколько снимков. */
.row1{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(300px,.85fr);
  gap:var(--s7); align-items:start; padding-top:var(--s6); border-top:1px solid var(--line)}
@media (max-width:1180px){ .row1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
                           .row1 > .purchase{grid-column:1 / -1} }
@media (max-width:760px){ .row1{grid-template-columns:1fr} }

/* Блоки без рамок: раздел обозначает заголовок (k-head системы), а не коробка вокруг него.
   Единственная тёмная поверхность на странице — панель покупки (k-dark). */
.blk{min-width:0; display:flex; flex-direction:column}

/* Галерея */
/* Квадрат 1:1 — стандарт европейского рынка (Amazon EU, eBay, Google
   Shopping, idealo) и то, в чём источник уже отдаёт снимки: 1440x1440
   и 1600x1600. Портрет 3:4 — российская норма маркетплейсов, здесь она
   только добавила бы полей по бокам. */
.gal-main{position:relative; aspect-ratio:1/1; background:var(--panel); border:0;
  border-radius:var(--r-sm); overflow:hidden; cursor:zoom-in; display:block; width:100%; padding:0}
.gal-main img{width:100%; height:100%; object-fit:contain; display:block}
.gal-main .zoom{position:absolute; right:8px; bottom:8px; width:26px; height:26px;
  border-radius:var(--r-sm); background:rgba(30,33,36,.72); display:grid; place-items:center;
  pointer-events:none}
/* Миниатюры — столбиком слева от снимка (решение владельца 18.09.2026):
   полосой под снимком они занимали ещё одну строку, а сам снимок растягивался
   на всю колонку и съедал экран. Столбец стоит абсолютом: высоту блока задаёт
   квадрат снимка, и сколько бы снимков ни было, галерея выше не становится —
   лишние прокручиваются внутри столбца. */
.gal-wrap{position:relative; margin:0}   /* figure: браузер сам даёт 40px слева — галерея съезжала */
.gal-wrap.gal-side{padding-left:66px}
.gal-thumbs{position:absolute; left:0; top:0; bottom:0; width:54px;
  display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumbs button:first-child{margin-top:auto}   /* миниатюры прижаты к нижнему краю галереи; margin вместо justify-content — иначе длинный столбец нельзя прокрутить вверх */
/* Снимок один — столбца нет: повторять его миниатюрой незачем. */
.gal-wrap:not(.gal-side) .gal-thumbs{display:none}
/* Миниатюры: выбранная в полную силу, остальные приглушены — различие
   яркостью, не обводкой. */
.gal-thumbs button{flex:none; width:54px; height:54px; padding:2px; background:var(--panel); cursor:pointer;
  border:0; border-radius:var(--r-sm); opacity:.42; transition:opacity var(--t-fast) ease}
.gal-thumbs button:hover{opacity:.75}
.gal-thumbs button[aria-current="true"]{opacity:1}
.gal-thumbs img{width:100%; height:100%; object-fit:contain; display:block}
/* Подпись под снимком: имя детали со словом покупки. Она же — текст,
   который поиск по картинкам показывает рядом со снимком. */
.gal-cap{margin:var(--s3) 0 0; font:400 11.5px/1.5 var(--sans); color:var(--muted)}
/* 3D-форсунка (catalog/nozzle3d.py, static/catalog/nozzle3d.js): на месте снимка, тот же квадрат; миниатюра «3D» — надписью на плашке. */
.gal-3d{position:relative; aspect-ratio:1/1; background:var(--panel); border-radius:var(--r-sm); overflow:hidden}
.gal-3d[hidden], .gal-thumbs .gal-3d-btn[hidden], .gal-art[hidden]{display:none}
.gal-3d-stage{position:absolute; inset:0 0 40px}   /* снизу — место подписи о фильтре */
.gal-3d .nz-gl{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y}
.gal-3d .nz-gl:active{cursor:grabbing}
.gal-3d-note{position:absolute; left:0; right:0; bottom:var(--s3); margin:0; text-align:center; pointer-events:none;
  font:var(--f-name); color:var(--ink)}
.gal-thumbs .gal-3d-btn{display:grid; place-items:center; background:var(--chip);
  font:var(--f-button); letter-spacing:.1em; color:var(--ink)}
.gal-empty{aspect-ratio:1/1; background:var(--chip); border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--muted);
  font:var(--f-label); letter-spacing:.14em; text-transform:uppercase}
/* Снимка нет — картинка раздела (правило владельца 17.09.2026), а подпись
   «фото пока нет» остаётся под ней: картинка — знак раздела, не этот товар. */
.gal-empty.gal-art{position:relative; background:var(--panel); overflow:hidden}
.gal-art img{display:block; width:100%; height:100%; object-fit:contain}
.gal-art span{position:absolute; left:0; right:0; bottom:var(--s4); text-align:center}

/* Основные характеристики — k-table spec системы: строки показывает fit() в product.html — столько,
   сколько помещается в высоту галереи; «all specifications» (k-more) прижат вниз блока. */
.k-table.spec td u{text-decoration:none; color:var(--muted); font-weight:400; margin-left:var(--s1)}
#specBlock .k-more{margin-top:auto; padding-top:var(--s4); align-self:flex-start}
#specBlock .k-hint{margin:var(--s3) 0 0}
/* Подпись — по содержимому, а не 45 % системы: колонка здесь узкая (около 340 px), значения короткие,
   и при 45 % «Conductor cross-section» ломалась на две строки при пустой правой половине. */
#specBlock .k-table.spec th{width:auto}

/* ── Покупка: k-dark системы (/dev/design/patterns/buy/), разметка — catalog/_pdp_buy.html ──────
   Колонкой: части по левому краю, ряд счётчика, кнопка счёта и обещания — во всю ширину. Распорка
   .purchase-fill прижимает обещания к низу, когда fit() тянет панель до высоты галереи. */
.purchase{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3);
  position:sticky; top:calc(var(--topbar) + var(--s5))}
@media (max-width:1180px){ .purchase{position:static} }
.purchase p{margin:0}
.purchase-was{font:var(--f-small); color:var(--danger-on-dark)}
.purchase-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3)}
.purchase-price b{font:var(--f-price); letter-spacing:-.02em}
/* Счётчик и «в корзину» — друг под другом во всю ширину, на всех языках. Подпись k-btn не переносится:
   рядом со счётчиком в панели 300 px помещалась только английская, и та до «In cart · 10» — дальше кнопка
   прыгала строкой ниже. Счётчик во всю ширину, как в карточке каталога: три равные доли. Этого в k-qty
   системы пока нет (шаг A плана перевода) — правило здесь, только ролями; появится в системе — удалить. */
.purchase-row{display:grid; gap:var(--s2); align-self:stretch; margin-top:var(--s2)}
.purchase-row .k-qty{display:flex}
.purchase-row .k-qty > *{flex:1; width:auto; min-width:0}
.purchase > .k-btn.block{align-self:stretch}
.purchase-fill{flex:1; min-height:var(--s4)}
.purchase-promise{display:grid; gap:var(--s3); align-self:stretch; margin:0; padding:var(--s4) 0 0; list-style:none;
  border-top:var(--bd-on-dark)}
.purchase-promise li{display:flex; gap:var(--s3); align-items:flex-start}
.purchase-promise svg{flex:none; margin-top:1px}
/* Чего у системы на тёмном пока нет (_css_ui.html, шаг A плана перевода): метки — светлая подложка
   k-badge на --dark торчала бы наклейкой, смысл здесь несёт точка; второе действие («Request invoice») —
   k-btn sec белая, как «в корзину», и две белые кнопки спорили бы. Правила здесь, только ролями;
   появятся в системе (.k-dark .k-badge, .k-dark .k-btn.sec) — удалить. */
.purchase .k-badge, .purchase .k-badge.ok, .purchase .k-badge.warn{
  background:color-mix(in srgb, var(--dark-ink) 15%, var(--dark)); color:var(--dark-ink)}
.purchase .k-badge i{background:color-mix(in srgb, var(--dark-ink) 40%, var(--dark))}
.purchase .k-badge.ok i{background:var(--ok-on-dark)}
.purchase .k-badge.warn i{background:var(--warn-dot)}
.purchase .k-btn.sec{background:none; color:var(--dark-ink); border:var(--bd-on-dark)}
.purchase .k-btn.sec:hover{background:color-mix(in srgb, var(--dark-ink) 10%, var(--dark)); border:var(--bd-on-dark)}
.purchase .k-btn.sec:active{background:color-mix(in srgb, var(--dark-ink) 16%, var(--dark))}

/* ── Ниже первой строки ─────────────────────────────────────────────────── */
.below{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--s6); margin-top:var(--s6); align-items:start}
/* minmax(0,1fr), а не 1fr: колонке разрешено быть уже своего содержимого.
   Иначе таблица подбора форсунок (min-width 420px, своя прокрутка) распирала
   колонку, страница становилась шире экрана, и телефон отзумливал её целиком
   вместе с текстом — 453 px вместо 390. */
@media (max-width:900px){ .below{grid-template-columns:minmax(0,1fr)} }
.below .blk{padding-top:var(--s6); border-top:1px solid var(--line)}
.pdp-wide{margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid var(--line)}
.fit-burners{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--s3)}
/* Горелки и котлы — k-card системы (тень, --r-md) в сетке: снимок 96 px слева, справа имя, топливо
   и мощность, ссылка на все детали к ней прижата вниз (владелец 21.10.2026). */
.fit-burners .k-card{display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows:auto auto 1fr;
  gap:var(--s1) var(--s4); padding:var(--s3)}
.fit-burners img{grid-row:1 / span 3; width:96px; height:96px; object-fit:contain; background:var(--panel); border-radius:var(--r-sm)}
.fit-burners b{font:var(--f-name); overflow-wrap:anywhere}
.fit-burners .k-card:hover b{text-decoration:underline}
.fit-burners span{font:var(--f-hint); color:var(--muted)}
.fit-burners em{align-self:end; font:var(--f-hint); font-weight:500; font-style:normal; color:var(--muted)}
@media (max-width:640px){ .fit-burners{grid-template-columns:1fr} }
/* Описание — роль «Описание товара» (--f-desc), цвет — основной текст (--ink). Раньше —
   var(--graphite, #3A3A3A): переменной --graphite нет, и работал запасной цвет. */
.prose{font:var(--f-desc); color:var(--ink); max-width:74ch}
/* Взаимозаменяемые и подходящая техника: ссылки — k-chip; надпись без ссылки (по ней идти некуда) —
   не чип, а текст (/dev/design/components/choice/), но в том же ряду: размер и шрифт как у k-chip, заливка
   и серый — видно, что она не нажимается. Имена бывают длиннее экрана телефона («Kromschroder Burner
   control unit BCU370WI2FEU0D3 88600619»): высота --h-sm — наименьшая, а не жёсткая, длинное переносится
   с полями сверху и снизу. У k-chip системы высота жёсткая — правило здесь; появится в системе — удалить. */
.chips{display:flex; gap:var(--s2); flex-wrap:wrap}
.chips .k-chip, .chips span{height:auto; min-height:var(--h-sm); max-width:100%; padding-block:var(--s1); overflow-wrap:anywhere}
.chips .k-chip{line-height:1.3}
.chips span{display:inline-flex; align-items:center; padding-inline:var(--s3); border:var(--bd); border-color:var(--chip);
  border-radius:var(--r-pill); background:var(--chip); color:var(--muted); font:500 12px/1.3 var(--sans)}

/* ── Просмотрщик фото ───────────────────────────────────────────────────── */
.viewer{position:fixed; inset:0; z-index:var(--z-modal); background:rgba(12,13,14,.94);
  display:none; place-items:center}
.viewer[open]{display:grid}
.viewer img{max-width:92vw; max-height:88vh; object-fit:contain; cursor:zoom-in;
  transition:transform .18s ease; transform-origin:center}
.viewer img.zoomed{cursor:zoom-out; transform:scale(2.1)}
.viewer .nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:64px;
  background:rgba(255,255,255,.1); border:0; border-radius:var(--r-sm); cursor:pointer;
  color:var(--dark-ink); font:300 22px/1 var(--mono)}
.viewer .nav:hover{background:rgba(255,255,255,.2)}
.viewer .prev{left:16px} .viewer .next{right:16px}
.viewer .shut{position:absolute; top:16px; right:16px; width:38px; height:38px;
  background:rgba(255,255,255,.1); border:0; border-radius:var(--r-sm); cursor:pointer;
  color:var(--dark-ink); font:300 18px/1 var(--mono)}
.viewer .count{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font:500 11px/1 var(--mono); color:rgba(255,255,255,.6); letter-spacing:.1em}

/* ── Телефон: порядок блоков (решение владельца 17.09.2026) ────────────────
   крошки одной строкой → галерея (листается пальцем) → название → SKU и бренд
   → покупка → характеристики → всё остальное, как было. Сетка первой строки
   растворяется (display:contents), и её блоки встают в общую колонку по order.
   На компьютере порядок и вид прежние. */
@media (max-width:900px){
  .pdp{display:flex; flex-direction:column}
  .pdp > *{order:10}
  .row1{display:contents}
  .pdp > .crumbs{order:1; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap;
    margin-bottom:var(--s3); scrollbar-width:none}
  .pdp > .crumbs::-webkit-scrollbar{display:none}
  .pdp > .crumbs a{flex:none}
  /* Марка — в строке под названием; знак с подписью на телефоне не нужен. */
  .pdp-head > .brandmark{display:none}
  #galBlock{order:2; margin-bottom:var(--s4)}
  #galBlock > h2{display:none}
  .pdp-head{order:3; margin-bottom:var(--s4)}
  .row1 > .purchase{order:4; margin-bottom:var(--s6)}
  /* «Главные характеристики» на телефоне не показываем вовсе: всё, что в них
     есть, повторяется ниже — характеристиками, номерами и совместимостью
     (решение владельца 19.09.2026). На компьютере блок нужен: там он стоит
     рядом с галереей и заполняет первый экран. */
  #specBlock{display:none}
  /* Тугл разделов: полоса во всю ширину экрана, липнет под верхнюю панель.
     Выбранное подсвечено подложкой, а не обводкой, — как выбранный отбор в
     каталоге; ползунок переезжает с пункта на пункт, чтобы переход был виден.
     Пунктов много или язык длинный — полоса прокручивается вбок. */
  /* Прокрутка вбок — у строки внутри, а липнет сама полоса: липкий элемент со
     своей прокруткой телефон перерисовывает рывками, и полоса тряслась при
     прокрутке страницы (замечание владельца 19.09.2026). Свой слой отрисовки
     (translateZ) убирает дрожь на Android. */
  /* Тугл — тот же, что в отборе каталога (.seg в catalog/list.html): коробка с
     волосяной рамкой, выбранное тёмной заливкой. Здесь заливка не перескакивает,
     а переезжает — тогда видно, куда перешли (решение владельца 19.09.2026).
     Прокрутка вбок — у строки внутри, а липнет сама полоса: липкий элемент со
     своей прокруткой телефон перерисовывает рывками, и полоса тряслась. */
  .pdp-tabs{order:1; display:block; position:sticky; top:var(--topbar); z-index:var(--z-sticky);
    margin:0 calc(var(--edge) * -1) var(--s4); padding:var(--s2) var(--edge);
    background:var(--page); transform:translateZ(0); backface-visibility:hidden}
  /* Прилипшая полоса отделяется от содержимого еле заметной тенью — той же,
     что у нижней панели; линии здесь не нужно (замечание владельца 19.09.2026). */
  .pdp-tabs.stuck{box-shadow:0 4px 16px rgba(0,0,0,.03)}
  .pdp-tabs-row{position:relative; display:flex; padding:4px;
    border:1px solid var(--line); border-radius:var(--r-md); background:var(--page);
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .pdp-tabs-row::-webkit-scrollbar{display:none}
  .pdp-tabs a{position:relative; z-index:var(--z-raise); flex:1 0 auto; display:inline-flex;
    align-items:center; justify-content:center; height:36px; padding:0 10px;
    border-radius:var(--r-sm); white-space:nowrap;
    font:500 10.5px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase;
    color:var(--muted); text-decoration:none; transition:color var(--t-fast)}
  .pdp-tabs a[aria-current="true"]{color:var(--dark-ink)}
  /* Заливка выбранного: место ей считает сценарий по самому пункту, поэтому
     left и width в пикселях — она встаёт ровно под надписью. */
  .pdp-pill{position:absolute; top:4px; left:0; height:36px; width:0;
    border-radius:var(--r-sm); background:var(--dark); will-change:transform, width;
    transition:transform .26s cubic-bezier(.2,.7,.2,1), width .26s cubic-bezier(.2,.7,.2,1)}
  @media (prefers-reduced-motion:reduce){ .pdp-pill{transition:none} }
  /* Горизонтальное движение по фото отдаём свайпу, вертикальное — прокрутке. */
  .gal-main{touch-action:pan-y pinch-zoom}

  /* Полоса покупки над нижним меню (решение владельца 18.09.2026): цена и
     «в корзину» всегда на виду. Сама полоса — в базовом шаблоне, рядом с
     нижней панелью; здесь только её начинка. Тёмная плашка покупки со
     всеми подробностями остаётся на своём месте в потоке страницы. */
  .mbuy-price{display:flex; flex-direction:column; gap:3px; min-width:0}
  .mbuy-price{flex:0 1 auto}
  .mbuy-price b{font:600 15px/1 var(--mono); color:var(--ink); white-space:nowrap}
  /* Цена до скидки — серая зачёркнутая, как в каталоге (решение 8A системы). Налога здесь нет:
     он назван в плашке на странице (решение владельца 19.09.2026). */
  .mbuy-price s{font:500 10px/1 var(--mono); color:var(--muted); text-decoration:line-through;
    white-space:nowrap}
  .mbuy-price small{font:400 9px/1.2 var(--mono); letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted)}
  /* Кнопки счётчика — под палец: 44 px, меньше мимо (замечание владельца
     19.09.2026). Цена при этом ужимается первой, кнопка покупки — последней. */
  .mbuy-qty{flex:none; display:flex; align-items:center; height:46px;
    background:var(--chip); border-radius:var(--r-sm); overflow:hidden}
  .mbuy-qty button{flex:none; width:44px; height:46px; padding:0; border:0; background:none;
    color:var(--ink); cursor:pointer; font:400 18px/1 var(--mono)}
  .mbuy-qty button:active{background:color-mix(in srgb, var(--ink) 10%, transparent)}
  .mbuy-qty output{min-width:22px; text-align:center; font:600 13.5px/1 var(--mono); color:var(--ink)}
  /* Товар уже в корзине — кнопки нет, и счётчик занимает её место. */
  .mbuy-qty.wide{flex:1 1 auto; justify-content:space-between}
  .mbuy-qty.wide button{width:56px}
  .mbuy-add[hidden]{display:none}
  .mbuy-add{flex:1 1 auto; min-width:0; margin-left:auto; min-height:46px; padding:0 var(--s3);
    border:0; border-radius:var(--r-sm); background:var(--dark); color:var(--dark-ink);
    cursor:pointer; font:600 10.5px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase}
  .mbuy-add[disabled]{background:var(--chip); color:var(--dim); cursor:default}
  /* В плашке кнопки «в корзину» на телефоне нет: она стоит в полосе внизу, и
     дважды на странице ей делать нечего (замечание владельца 18.09.2026).
     Счётчик штук остаётся — полоса кладёт в корзину именно столько. */
  /* В плашке нет только того, что стоит в полосе внизу, — цены и кнопки
     «в корзину» (решение владельца 19.09.2026). Остальное на месте: наличие,
     счётчик штук, запрос цены, условия и обещания. Кнопка из разметки не
     убрана — полоса жмёт именно её. */
  /* Счётчика в плашке на телефоне тоже нет: кнопка покупки стоит в полосе внизу, и счётчик рядом
     с ней не нужен (замечание владельца 19.09.2026) — ряд .purchase-row прячется целиком. */
  /* Цена, старая цена и скидка в плашке на телефоне не нужны: они стоят в полосе внизу (замечание владельца 03.11.2026:
     вернули — дублировали полосу; одинокое «−11%» без цены ничего не значило). Остаются наличие, счёт и обещания. */
  .purchase .purchase-save, .purchase .purchase-price, .purchase .purchase-row, .purchase .purchase-fill{display:none}   /* .purchase — чтобы перебить pdp-skin.css, он грузится позже */
  .purchase .purchase-top{justify-content:flex-start}
}

/* Слайдер галереи (apps/catalog/gallery_slider.py): слайд — карточка 3:4 слоями back → живой холст → front; без набора галерея прежняя */
.gal-main--live{aspect-ratio:3/4; background:#fff}
.gal-main--live img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.gal-main--live .gal-back{z-index:0}
.gal-main--live #galImg{z-index:2}
.gal-main .gal-live{position:absolute; left:5%; top:17.5%; width:70%; height:78.75%; border-radius:5.714% / 3.81%; z-index:1; pointer-events:none; object-fit:cover}   /* ровно блок карточки: x 45–675, y 210–1155 из 900×1200 */
.gal-main .gal-mark{position:absolute; left:11.889%; top:74.667%; width:21.333%; height:16.333%; z-index:3; pointer-events:none}   /* «100% ОРИГИНАЛ» точками поверх товара: x 107–299, y 896–1092 из 900×1200 */
.gal-main--live .gal-mark{inset:74.667% auto auto 11.889%; width:21.333%; height:16.333%; object-fit:fill}
.gal-main .zoom{z-index:4}
.gal-edit{display:inline-block; margin:0 0 8px; padding:6px 12px; border:0; border-radius:8px; background:var(--ink,#111); color:#fff; font:600 12.5px/1.2 var(--font-sans,inherit); cursor:pointer}   /* кнопка персонала «Изменить медиа» */
.gal-main img, .gal-main canvas, #viewer img, .gal-thumbs img{-webkit-user-drag:none; user-select:none; -webkit-touch-callout:none}   /* защита фото: нет перетаскивания и меню «Сохранить» на тач-экранах */