/* Лендинг адресных табличек на телефоне и планшете: слой поддомена.
   Спецификация docs/tablichki-mobile/spec.md (разделы 2–4), сторож test/tablichki-mobile.test.js.

   Правила файла:
   - каждое правило внутри @media с max-width не больше 1279.98px: на 1280 и шире вид заморожен;
     @supports допускается только с таким @media внутри;
   - селекторы только по хукам макета (data-m, data-sec, data-opt и data-part), против инлайна !important;
     по содержимому атрибута style не выбираем, внутрь плашки превью селекторы не ведём;
   - порядок: разделы 4.1 → 4.6 друг за другом, внутри раздела полосы от широких к узким,
     @supports сразу за своей полосой. */

/* ===== 4.1 Каркас ===== */
@media (max-width:1279.98px){
  :root{--m-head:84px}
  html{-webkit-text-size-adjust:100%}
  [data-m="page"]{min-width:0!important;overflow-x:clip;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  [data-m="page"] input,[data-m="page"] select,[data-m="page"] textarea{box-sizing:border-box}
}
@supports not (overflow:clip){@media (max-width:1279.98px){body{overflow-x:hidden}}}
@media (max-width:1099.98px){[data-sec]{padding-left:24px!important;padding-right:24px!important}}
@media (max-width:899.98px){[data-m="center-page"]{padding:24px 16px 0!important}
  [data-m="center-actions"]{flex-direction:column}[data-m="center-actions"]>a{display:block;text-align:center}}
@media (max-width:639.98px){[data-sec]{padding-left:16px!important;padding-right:16px!important}
  [data-m="page"] h1{font-size:28px!important;line-height:1.15!important;letter-spacing:-.6px!important}
  [data-m="page"] h2{font-size:23px!important;line-height:1.2!important;letter-spacing:-.4px!important}}
/* Сброс залипшего hover на сенсорных экранах. Тень у фона стены не трогаем: это кольцо выбора.
   У образца цвета тоже: в его hover тени нет, а на телефоне тень и есть кольцо выбора (4.3). Сброс
   специфичнее кольца и снимал его ровно у только что нажатого образца, пока :hover залип после касания. */
@media (max-width:1279.98px) and (hover:none){
  html [class*="scp"]:hover{transform:none!important;animation:none!important}
  html [class*="scp"]:hover:not([data-m="wall"]):not([data-m="swatch"]){box-shadow:none!important}}

/* ===== 4.2 Служебная строка, шапка, меню (H1–H9, T2, T3, T9, CC-09, CR-06) ===== */
/* Шапка липнет на всех ширинах до 1280: обёртка с overflow-x:clip (4.1) этому не мешает. */
@media (max-width:1279.98px){[data-m="header"]{position:sticky!important;top:0!important;z-index:50!important}}
/* Планшет горизонтально: шапка 84 px в одну строку, служебная строка без переноса (T2, T3). */
@media (min-width:900px) and (max-width:1279.98px){[data-m="header-row"]{padding-left:24px!important;padding-right:24px!important;gap:16px!important}[data-m="head-info"]{gap:18px!important}}
@media (min-width:900px) and (max-width:1179.98px){[data-m="head-info"]{display:none!important}}
@media (min-width:900px) and (max-width:1103.98px){[data-m="topbar-row"]{padding-left:24px!important;padding-right:24px!important;gap:12px!important}[data-m="home-link"],[data-m="callback"]{display:none!important}}
/* Компактная шапка 56 px: до 900 и на любой ширине до 1280 при высоте до 500 (телефон боком).
   Служебная строка уходит в панель меню, она открывается чекбоксом #m-menu (скрипт меню в head). */
@media (max-width:899.98px),(max-width:1279.98px) and (max-height:500px){
  :root{--m-head:56px}
  html:has(#m-menu:checked){overflow:hidden}
  [data-m="topbar"]{display:none!important}
  /* Панель не ниже экрана минус шапка 56 и полоса затемнения 48: с запасом только под шапку панель
     закрывала затемнение целиком (320×568, 640×360, 844×390), и закрыть меню касанием мимо было нельзя. */
  #m-menu:checked~[data-m="topbar"]{display:block!important;position:fixed!important;top:56px;left:0;right:0;z-index:60;max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain;background:#fff!important;box-shadow:0 18px 36px rgba(17,18,20,.18)}
  #m-menu:checked~[data-m="m-scrim"]{display:block!important;position:fixed;left:0;right:0;top:56px;bottom:0;z-index:59;background:rgba(17,18,20,.32)}
  [data-m="topbar-row"]{flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:4px 16px 16px!important;font-size:16px!important;font-weight:600!important;white-space:normal!important}
  [data-m="topbar-row"]>a{padding:13px 0!important;border-bottom:1px solid #eceef2}
  /* В меню все пункты: полоса 900–1103.98 прячет их только в строке. */
  [data-m="home-link"],[data-m="callback"]{display:block!important}
  [data-m="main-site"]{order:10;border-bottom:0!important}
  [data-m="spacer"]{display:none!important}
  [data-m="cart"],[data-m="callback"]{margin-top:12px;padding:13px 16px!important;font-size:16px!important;text-align:center;border-radius:12px!important}
  [data-m="callback"]{border-bottom:0!important}
  [data-m="m-hours"]{display:block!important;order:9;margin-top:12px;font-size:14px;color:#5b6068;text-align:center}
  [data-m="header-row"]{box-sizing:border-box;height:56px;flex-wrap:nowrap!important;gap:6px!important;padding:6px 8px 6px 16px!important}
  [data-m="brand"]{flex:1 1 auto!important;min-width:0;gap:10px!important}
  [data-m="brand"]>img{height:30px!important;width:auto;flex:0 0 auto}
  [data-m="brand"]>span,[data-m="head-info"],[data-m="phone"],[data-m="cta"]{display:none!important}
  [data-m="m-actions"]{display:flex!important;align-items:center;gap:4px;flex:0 0 auto}
  [data-m="m-actions"]>*{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:#17181c;cursor:pointer}
  [data-m="m-actions"]>*::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:var(--m-icon) center/contain no-repeat;mask:var(--m-icon) center/contain no-repeat}
  [data-m="m-cart"]{--m-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2'/%3E%3Ccircle cx='10' cy='20.5' r='1.3'/%3E%3Ccircle cx='17' cy='20.5' r='1.3'/%3E%3C/svg%3E")}
  [data-m="m-tel"]{--m-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");background:#2b59ff;color:#fff!important}
  [data-m="m-burger"]{--m-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
  #m-menu:checked~[data-m="header"] [data-m="m-burger"]{--m-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
  [data-m="m-cart"]::after{content:attr(data-count);position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:#2b59ff;color:#fff;font:700 11px/18px Manrope,system-ui,sans-serif;text-align:center}
  [data-m="m-cart"][data-count="0"]::after{content:none}
}
/* Название рядом со знаком, где хватает места; вторая строка подписи скрыта. Порог 480, а не 400
   из спецификации: логотип 30 px шириной 129, название 15 px с разделителем 155, кнопки 140, и всё
   это помещается только с 464 px (на 414 название налезало на кнопки на 50 px). */
@media (min-width:480px) and (max-width:899.98px),(min-width:480px) and (max-width:1279.98px) and (max-height:500px){
  [data-m="brand"]>span{display:inline-flex!important;padding-left:10px!important}
  [data-m="brand"]>span>span:first-child{font-size:15px!important;white-space:nowrap}
  [data-m="brand"]>span>span:last-child{display:none!important}}

/* ===== 4.3 Конструктор (calc-01…13, T4–T6, CC-01, CC-03, CC-08, CC-12, CC-13) ===== */
/* Кадр превью фиксированной высоты на всех узких ширинах: иначе при смене формы миниатюры под пальцем
   уезжают. Плашка вписана в кадр по ширине и по высоте через --pv-r (пропорция формы из разметки).
   Миниатюры auto-fill по 62 px: канва 52 + поля + рамка, без наезда на соседей (T4).
   Белая тень кадра закрывает зазор под шапкой (10 px) и скруглённые углы: без неё в углах липкого кадра
   проглядывали миниатюры, уходящие под него. */
@media (max-width:1279.98px){
  :root{--pv-frame-h:clamp(200px,40vh,360px)}
  [data-m="thumbs"]{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))!important}
  [data-m="thumbs"] canvas{max-width:none!important}
  /* Без привязки прокрутки внутри конструктора, как в Safari: Chromium брал опору в левой колонке и, когда
     она менялась по высоте (предупреждение о шрифте, строка размеров), докручивал страницу, и миниатюры
     правой колонки уезжали из-под пальца (640×360 на 171 px, 844×390 на 102, 932×430 на 84). */
  [data-m="calc-grid"]{align-items:stretch!important;overflow-anchor:none}
  /* Строка «Форма: … | Все формы с ценами» в одну строку при любой форме: иначе её высота менялась
     от формы к форме, и миниатюры под ней прыгали на 18 px (320). */
  [data-m="forms"]>:first-child>*{white-space:nowrap}
  [data-m="pv-frame"]{height:var(--pv-frame-h);box-sizing:border-box;padding:16px!important;position:sticky!important;top:calc(var(--m-head) + 10px);z-index:5;box-shadow:0 -10px 0 #fff,0 0 0 8px #fff}
  [data-m="pv-plate"]{width:min(92%,calc((var(--pv-frame-h) - 32px) * var(--pv-r)))!important}
  /* Вид изделия — не такая же опция, как цвет или крепёж: с 22.09.2026 это крупный переключатель
     на всю ширину, две половины с поясняющей строкой под названием. На телефоне подсказки
     по наведению нет, и пояснение обязано быть видно текстом, а не лежать в title.
     Поля 8 вместо инлайновых 11/12 на всём мобильном слое, а не только на телефоне: колонка опций
     всего уже на 640–899, где конструктор в две равные колонки (половина 134,5 px против 144 на
     телефоне 320). С инлайновыми полями строка «композит с объёмными буквами из акрила» вставала
     там в три строки против двух у «Стандарта», и половины расходились по высоте. */
  [data-opt="kind"] [data-m="chip"]{padding:8px!important}
}
@supports (height:1svh){@media (max-width:1279.98px){:root{--pv-frame-h:clamp(200px,40svh,360px)}}}
/* 900–1279.98: панель цены одной строкой при любом тираже. Старая цена (тираж от 2 шт) стояла рядом
   с суммой, строка переносилась, «Заказать» падал во второй ряд, а «+» тиража уезжал из-под пальца
   на 134–158 px. Теперь старая цена под суммой, как на узких экранах; тираж и «Заказать» не сжимаются
   и прижаты вправо, а место под старую цену занято всегда, поэтому высота панели от тиража не зависит. */
@media (min-width:900px) and (max-width:1279.98px){
  [data-m="bar"]{flex-wrap:nowrap!important;gap:12px!important}
  [data-m="bar-price"]{flex:0 0 auto;min-height:62px}
  [data-m="bar-label"]{line-height:15px}
  [data-m="bar-price"]>div:last-child{flex-direction:column!important;align-items:flex-start!important;gap:0!important}
  [data-m="bar-sum"]{white-space:nowrap}
  [data-m="bar-sum"]+div{font-size:13px!important;line-height:16px;white-space:nowrap}
  [data-m="qty"]{flex:0 0 auto;gap:4px!important}
  [data-m="qty-input"]{width:44px!important}
  [data-m="order"]{flex:0 0 auto}}
/* 900–1099.98: левая колонка 400 вместо 440, подписи 136 (на 124 «Светонакопительная» вылезает, T5). */
@media (min-width:900px) and (max-width:1099.98px){
  [data-m="calc-grid"]{grid-template-columns:minmax(0,400px) minmax(0,1fr)!important;gap:24px!important;padding:22px!important}
  [data-m="opts"]{grid-template-columns:136px minmax(0,1fr)!important}
  [data-m="addr"]{grid-template-columns:76px minmax(0,1fr) 64px 64px!important}
  [data-m="order"]{padding-left:22px!important;padding-right:22px!important}}
/* До 900: панель цены липнет к низу экрана внутри конструктора и уходит вместе с ним. */
@media (max-width:899.98px){
  [data-m="bar"]{position:sticky!important;bottom:var(--cookie-notice-h,0px);z-index:20;background:#fff;flex-wrap:nowrap!important;gap:6px!important;margin:0 -12px!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;box-shadow:0 -10px 18px -14px rgba(23,24,28,.35)}
  [data-m="bar-label"]{display:none!important}
  /* Цена не сжимается и не переносится: со старой ценой (тираж от 5 шт) она встаёт под суммой мелко,
     иначе на 360–414 текст наезжал на тираж на 12–42 px (замер этапа 3), а сжимается кнопка «Заказать». */
  [data-m="bar-price"]{flex:0 0 auto}
  [data-m="bar-price"]>div:last-child{flex-direction:column!important;align-items:flex-start!important;gap:0!important}
  [data-m="bar-sum"]{font-size:24px!important;white-space:nowrap}
  [data-m="bar-sum"]+div{font-size:12px!important;line-height:1.2;white-space:nowrap}
  [data-m="qty"]{gap:2px!important;margin-left:0!important}
  [data-m="qty-btn"]{width:36px!important;height:44px!important}
  [data-m="qty-input"]{width:40px!important;height:44px!important}
  [data-m="order"]{flex:1 1 auto;height:44px;padding:0 12px!important}
  [data-m="addr"] label>div{color:#5b6068!important}
  [data-m="sumline"],[data-m="pv-note"]{color:#6b717b!important}}
/* 640–899.98 (планшет портретом, телефон боком): две равные колонки, превью липнет справа. */
@media (min-width:640px) and (max-width:899.98px){
  [data-m="calc-wrap"]{padding:16px 16px 0!important}
  [data-m="calc-title"]{font-size:26px!important}
  [data-m="calc-grid"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:20px!important;padding:16px!important;border-radius:20px!important}
  [data-m="addr"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  [data-m="addr"]>:nth-child(2){grid-column:span 3}
  [data-m="addr"]>:nth-child(3),[data-m="addr"]>:nth-child(4){grid-column:span 2}
  [data-m="opts"]{grid-template-columns:136px minmax(0,1fr)!important}
  [data-m="bar"]{margin:0!important;padding-left:0!important;padding-right:0!important}}
/* 640–759.98: левая колонка 277–337 px, цена, тираж и «Заказать» в неё не помещаются (на 640 «900 ₽»
   переносилась на две строки). Тираж уходит в форму под сводку, как на телефоне до 360. */
@media (min-width:640px) and (max-width:759.98px){
  [data-m="bar"] [data-m="qty"]{display:none!important}
  [data-m="qty-m"]{display:flex!important}
  /* Строке формы при 13 px и gap 16 нужно до 304 px («Форма: №21 · 60×37,5 см»), в колонке 277–337.
     При 12 px и gap 8 нужно 274. */
  [data-m="forms"]>:first-child{gap:8px!important}
  [data-m="forms"]>:first-child>*{font-size:12px!important}
  /* Половина переключателя вида здесь самая узкая из всех — 134,5 px на 640, уже чем на телефоне 320
     (144). Строка «композит с объёмными буквами из акрила» вставала в три строки против двух
     у «Стандарта», и ряд вырастал до 83 px. При 10/1,25 обе строки по две, ряд 61 px. */
  [data-m="kind-hint"]{font-size:10px!important;line-height:1.25!important}}
/* Телефон: одна колонка в порядке владельца. Колонки формы и превью и сетка опций раскрыты
   (display:contents), их дети становятся ячейками сетки конструктора и встают по order:
   превью (липнет под шапкой), адрес, «Стандарт / Премиум», формы, цвета, остальное, фоны и сноска.
   Список «Форма таблички» скрыт, но остаётся в DOM (им пользуется plates-audit). */
@media (max-width:639.98px){:root{--pv-frame-h:clamp(140px,28vh,230px)}}
@supports (height:1svh){@media (max-width:639.98px){:root{--pv-frame-h:clamp(140px,28svh,230px)}}}
@media (max-width:639.98px){
  [data-m="calc-wrap"]{padding:10px 12px 0!important}
  /* Заголовок конструктора это <h2 data-m="calc-title">, и правило 4.1 [data-m="page"] h2 (0,1,1)
     перебивало «21 px» из 4.3 (0,1,0): в сборке было 23 px и две строки. Селектор с тегом и хуком
     специфичнее (0,2,1). Левое поле 0: раньше 2 px сдвигали заголовок вправо от колонки (x 14 при 12). */
  [data-m="page"] h2[data-m="calc-title"]{font-size:21px!important;line-height:1.2!important;letter-spacing:-.4px!important;margin:0 0 8px 0!important}
  [data-m="calc-lead"],[data-m="calc-hr"],[data-opt="model"],[data-opt="fontgap"][data-part="l"]{display:none!important}
  [data-m="calc-grid"]{grid-template-columns:minmax(0,1fr) auto!important;column-gap:12px!important;row-gap:12px!important;padding:0!important;border:0!important;border-radius:0!important;align-items:center!important}
  [data-m="calc-form"],[data-m="calc-view"],[data-m="opts"]{display:contents!important}
  [data-m="calc-form"]>*,[data-m="calc-view"]>*,[data-m="opts"]>*{grid-column:1/-1;min-width:0;order:50}
  /* Кадр превью и панель цены липнут, и всё между ними уезжает под них. Без кромки миниатюры и кнопки
     обрезаются ровной линией по краю фотографии стены и это читается как сбой отрисовки, а не как слой.
     У кадра тень только вниз (разброс −10 не даёт ей вылезти вверх под шапку), у панели только вверх. */
  [data-m="pv-frame"]{order:1;top:var(--m-head);z-index:15;margin:0 -12px;border-radius:0!important;padding:12px!important;box-shadow:0 10px 14px -10px rgba(23,24,28,.45)}
  [data-m="pv-plate"]{width:min(92%,calc((var(--pv-frame-h) - 24px) * var(--pv-r)))!important}
  [data-m="addr-title"]{order:2;font-size:17px!important;margin-bottom:-4px}
  [data-m="addr"]{order:3;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px 12px!important}
  [data-m="addr"]>:nth-child(2){grid-column:span 3}
  [data-m="addr"]>:nth-child(3),[data-m="addr"]>:nth-child(4){grid-column:span 2}
  /* Предупреждение о шрифте сразу под миниатюрами, а не над видом изделия (отступление от 4.3): оно
     появляется и пропадает при смене формы, и над миниатюрами сдвигало их под пальцем на 65–82 px. */
  [data-opt="kind"]{order:4}
  [data-m="forms"]{order:5;margin-top:0!important}
  [data-opt="fontgap"]{order:6}
  [data-m="thumbs"]{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}
  [data-m="thumb"]{padding:7px 2px!important;position:relative;gap:4px!important}
  /* Цена под миниатюрой: на телефоне подсказки по наведению нет, а «№1 · 50×15 см · от 900 ₽» лежит
     только в title. Разброс 900…4750 ₽, и без цены выбор формы идёт вслепую. */
  [data-m="thumb-price"]{display:block!important;font-size:10px;font-weight:600;line-height:1;color:#5b6068;white-space:nowrap}
  /* Точка цвета основы, которую поставит выбор формы: миниатюры №11 и №16, №12 и №17, №13 и №18
     совпадают пиксель в пиксель, и различает их только цвет. Точка живёт лишь на телефоне (в разметке
     скрыта инлайном), у акрила её нет: там форма цвет посетителя не трогает. */
  [data-m="thumb-dot"][data-dot="1"]{display:block!important;position:absolute;top:3px;right:3px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;box-shadow:0 0 0 1.5px #fff}
  [data-opt="color"]{order:7}[data-opt="ink"]{order:8}[data-opt="size"]{order:9}[data-opt="material"]{order:10}
  [data-opt="inv"]{order:11}[data-opt="surface"]{order:12}[data-opt="mount"]{order:13}
  /* Плашка «Обе опции вместе» в две строки: кнопка «Взять обе» была 82×35 при норме касания 44,
     а на 320 цена в тексте рвалась на «2 850 / ₽». Текст занимает всю ширину, кнопка встаёт под ним
     во всю ширину и не ниже 44. Цвет кнопки прежний, #1fae3d (решение владельца 16.09.2026). */
  [data-m="combo"]{order:14;flex-wrap:wrap!important;gap:10px!important}
  [data-m="combo"]>:first-child{flex:1 1 100%!important;font-size:12px!important;line-height:1.4!important}
  [data-m="combo"]>:last-child{flex:1 1 100%!important;min-height:44px!important;font-size:13px!important}
  [data-m="sumline"]{order:15}[data-m="qty-m"]{order:16}
  [data-m="walls"]{order:17;flex-wrap:nowrap!important;overflow-x:auto;margin:0 -12px!important;padding:0 12px 2px!important;scroll-snap-type:x proximity;scrollbar-width:none}
  [data-m="wall"]{flex-shrink:0;width:52px!important;height:44px!important}
  [data-m="pv-note"]{order:18;margin-top:0!important}
  [data-m="bar"]{order:99;box-shadow:0 -10px 16px -10px rgba(23,24,28,.40)}
  /* Ритм блока опций: над подписью 16 px (промежуток сетки 12 + это поле), между подписью и её
     контролом 2 px (12 − 10). Было 12 и 6, то есть 2:1, и группировки глазом не возникало.
     Высота строк от этого не меняется: 4 сверху и −4 снизу. */
  [data-part="l"]{margin-top:4px;margin-bottom:-10px}
  /* Крепёж отделён от плёнок сильнее: это конец списка опций. */
  [data-opt="mount"][data-part="l"]{margin-top:16px}
  /* Оборот цвета и плёнки строкой «подпись | переключатель» с разделителем сверху: без линии между
     подписью на x=12 и переключателем у правого края оставалось пустое поле без всякой связи.
     Линия идёт от левого края до переключателя (поле 12 с отрицательным полем перешагивает промежуток
     сетки), подпись и переключатель стоят по центру строки: центры расходятся на 0,5 px.
     Переключателю линию не даём: border-top у кнопки лёг бы прямо на дорожку, а padding сделал бы
     её выше 26 px (у кнопки content-box и высота задана инлайном). */
  [data-opt="inv"][data-part="l"],[data-opt="surface"][data-part="l"]{grid-column:1;margin-top:4px;margin-bottom:0;align-self:stretch;box-sizing:border-box;border-top:1px solid #eceef2;padding-top:8px;padding-right:12px;margin-right:-12px}
  /* У «Оборота цвета» подпись в одну строку (18 px), у плёнок в две (33,5 px с доплатой), поэтому
     высоту строки задаёт переключатель, а не подпись, и поле сверху у неё своё: 11 вместо 8.
     Тогда середина подписи и середина переключателя расходятся на 0,5 px в обеих строках.
     display у [data-opt="inv"] задан инлайном ({{ invShow }}), перебивать его спецификация запрещает. */
  [data-opt="inv"][data-part="l"]{padding-top:11px}
  /* Поле 12 сверху разводит строки: без него центры «Оборот цвета» и «Светоотражающая» стояли
     в 42,5 px, и области касания 44 px соседних переключателей перекрывались. */
  [data-opt="inv"][data-part="c"],[data-opt="surface"][data-part="c"]{grid-column:2;align-self:center;margin-top:12px!important;margin-bottom:0!important}
  [data-m="chip"]{min-height:44px;padding:8px 14px!important}
  /* Поля адреса, «Тип улицы» и «Комплект крепежа» были 41 px: при кегле 16 и полях 8 до нормы
     касания не хватало трёх. Сетка адреса от этого подросла на 6 px всего (две строки по 3). */
  [data-m="addr"] input,[data-m="addr"] select,[data-opt="mount"][data-part="c"]{min-height:44px}
  /* Образец цвета под палец: 40×40 было меньше нормы касания 44. Кольцо выбора не трогаем. */
  [data-m="swatch"]{width:44px!important;height:44px!important;border-radius:12px!important}
  /* «буквы и накладки» серым #8a9099 по белому давало контраст 3,22 при норме 4,5. */
  [data-opt="ink"][data-part="l"]>span:last-child{color:#5b6068!important;font-size:12px!important}
  [data-m="swatch"][data-sel="1"]{box-shadow:0 0 0 2px #fff,0 0 0 4px #2b59ff!important}
  [data-m="sel-name"]{display:inline!important;font-weight:600;color:#17181c}
  /* Переключатель 46×26 с областью касания 58×44. */
  [data-m="switch"]::before{content:"";position:absolute;inset:-9px -6px}
  /* Пока фокус в полях адреса, предупреждение о шрифте стоит сразу под ними поверх вида изделия:
     на своём месте под миниатюрами оно за краем экрана, пока посетитель набирает адрес. Над миниатюрами
     место ему занимать нельзя: при смене формы оно появляется и пропадает и двигало бы их под пальцем.
     Поэтому оно встаёт в четвёртую строку сетки (кадр, заголовок, поля, подпись вида) в одну ячейку
     с подписью вида, а нижнее поле −100 % (от ширины ячейки, больше любой высоты предупреждения)
     обнуляет его вклад в высоту строки: ниже ничего не сдвигается, текст лежит поверх «Стандарт /
     Премиум». Касания сквозь него не проходят: иначе касание по тексту нажимало невидимую кнопку «Премиум»
     под ним. position:absolute не годится: у родителей display:contents, и движок ставит такой элемент
     от всей сетки, а не от строки.
     Высота не меньше 97 px (было 72 при ряде из двух чипов по 44): от верха предупреждения до низа ряда
     «Премиум / Стандарт» 93,8 px (поле подписи 4 + строка подписи 18 − нижнее поле 10 + промежуток 12
     + ряд 69,8 в WebKit), и 3,2 px в запас. Текст предупреждения занимает 3 строки только до 360:
     на 390 и шире он вставал в 2 строки высотой 52,8 px и снизу торчала полоса обеих кнопок
     со срезанными буквами. До строки «Форма:» (низ ряда + 12) правило не достаёт: 97 < 105,8.
     Сверху потолок задаёт низ экрана, и на 320×568 он ниже 97: запас там равен не разнице высот,
     а расстоянию от низа ряда до низа экрана, и на 320 ряд кончался на 567,9 при экране 568.
     Поэтому на 320 ряд ужат отдельным правилом (ниже, @media 359.98), и min-height там свой. */
  [data-m="calc-grid"]:has([data-m="addr"] :focus) [data-opt="kind"][data-part="l"],
  [data-m="calc-grid"]:has([data-m="addr"] :focus) [data-opt="fontgap"][data-part="c"]{grid-row:4}
  [data-m="calc-grid"]:has([data-m="addr"] :focus) [data-opt="fontgap"][data-part="c"]{align-self:start;box-sizing:border-box;min-height:97px;margin-bottom:-100%!important;position:relative;z-index:10;box-shadow:0 8px 20px rgba(23,24,28,.16)}
  /* Пока фокус в полях адреса, панель цены скрыта (visibility: раскладка та же, ничего не сдвигается).
     На 320×568 между полями и панелью 48 px, и предупреждение высотой 70 px уходило под панель. При вводе
     на телефоне панель и так стоит под клавиатурой; так же на время ввода прячется баннер cookie (4.9). */
  [data-m="calc-grid"]:has([data-m="addr"] :focus) [data-m="bar"]{visibility:hidden}
}
@media (max-width:359.98px){
  [data-m="thumbs"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  [data-m="bar"] [data-m="qty"]{display:none!important}
  [data-m="qty-m"]{display:flex!important}
  /* 320×568 — единственный размер, где ряд «Премиум / Стандарт» упирается в низ экрана: при вводе
     адреса предупреждение о шрифте обязано накрыть его целиком, а само уместиться до низа видимого.
     Запас тут равен расстоянию от низа ряда до низа экрана, и при полном ряде (69,8 px) он был 0,1:
     WebKit уводил предупреждение за край на 3,2 px (Chromium — нет, у него ряд на 1 px ниже).
     Поэтому на самых узких телефонах ряд ужат до 58 px: поля 5/6 вместо 8, промежуток 2 вместо 3,
     название 15 вместо 16, поясняющая строка 10/1,25 вместо 11/1,3. Две половины, обе строки видны,
     цель касания 58 px — вдвое выше нормы 44. Ряд кончается на 556,2, накрыть надо 82, min-height 88:
     запас 6 сверху (накрыто с избытком) и 5,8 снизу до края экрана. */
  [data-opt="kind"] [data-m="chip"]{padding:5px 6px!important;gap:2px!important}
  [data-m="kind-name"]{font-size:15px!important}
  [data-m="kind-hint"]{font-size:10px!important;line-height:1.25!important}
  [data-m="calc-grid"]:has([data-m="addr"] :focus) [data-opt="fontgap"][data-part="c"]{min-height:88px}
  /* Строка формы: на 320 место 296 px, при 13 px нужно до 304, при 12 px и gap 8 нужно 274. */
  [data-m="forms"]>:first-child{gap:8px!important}
  [data-m="forms"]>:first-child>*{font-size:12px!important}}

/* ===== 4.4 Каталог (cat-01…13, T7) ===== */
/* 900–1099.98: та же таблица, но компактнее: узкие колонки номера и «Выбрать», шапка без капса. */
@media (min-width:900px) and (max-width:1099.98px){
  [data-m="cat-head"],[data-m="cat-row"]{grid-template-columns:56px minmax(0,1.4fr) repeat(4,minmax(0,1fr)) 72px!important;gap:10px!important;padding-left:16px!important;padding-right:16px!important}
  [data-m="cat-head"]{text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
  [data-m="cat-head"]>*,[data-m="cat-size"]{overflow-wrap:anywhere}}
/* До 900: строка таблицы становится карточкой. Первая строка: номер и «Выбрать» кнопкой справа;
   вторая: размер и раскладка одной ячейкой (текст не дробим); ниже цены по две в ряд с подписью из
   data-label разметки. У акрила плёнок нет: их колонки скрыты, единственная цена на всю ширину. */
@media (max-width:899.98px){
  [data-m="cat-head"]{display:none!important}
  [data-m="cat-table"]{border:0!important;border-radius:0!important;overflow:visible!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;align-items:start}
  [data-m="cat-row"]{display:flex!important;flex-wrap:wrap!important;align-items:center!important;align-content:start;column-gap:12px!important;row-gap:8px!important;padding:12px 14px 14px!important;border:1px solid #e3e5e9!important;border-radius:16px!important}
  [data-m="cat-name"]{order:0;font-size:20px;line-height:1.2}
  [data-m="cat-pick"]{order:1;margin-left:auto;display:flex!important;align-items:center;justify-content:center;min-height:44px;min-width:112px;padding:0 16px;box-sizing:border-box;background:#2b59ff;color:#fff!important;border-radius:12px;font-size:15px!important;text-align:center!important}
  [data-m="cat-size"]{order:2;flex:1 0 100%;font-size:14px!important;line-height:1.3;margin-top:-6px}
  [data-m="cat-price"]{order:3;flex:0 0 calc(50% - 6px);min-width:0;font-size:17px;line-height:1.25}
  [data-m="cat-price"]::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;line-height:1.3;color:#5b6068;margin-bottom:1px}
  [data-line="acryl"] [data-film]{display:none!important}
  [data-line="acryl"] [data-m="cat-price"]{flex-basis:100%}
  [data-m="cat-tab"]{min-height:44px!important}}
@media (max-width:639.98px){
  [data-m="cat-table"]{grid-template-columns:minmax(0,1fr)!important}
  [data-m="cat-tabs"]{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  [data-m="cat-tab"]{padding:8px 10px!important;line-height:1.2}}
@media (max-width:359.98px){[data-m="cat-price"]::before{font-size:11px}}

/* ===== 4.5 Корзина, заявка, «Спасибо», 404 (cart-01…12, T8, T12, CC-11) ===== */
/* Подпись согласия блоком: галочка 24×24 слева, текст рядом, ссылки светлые на тёмной карточке
   (#2b59ff на #17181c давал контраст 3,36). На 1280+ подпись прежняя: десктоп заморожен. */
@media (max-width:1279.98px){
  [data-m="consent"]{display:block!important;position:relative;padding:4px 0 4px 36px;line-height:1.5}
  [data-m="consent"]>input{position:absolute;left:0;top:2px;width:24px!important;height:24px!important;margin:0}
  [data-m="consent"] a{color:#8fa9ff!important}}
@media (min-width:900px) and (max-width:1099.98px){[data-m="cart-grid"]{grid-template-columns:minmax(0,1fr) 360px!important}}
/* До 900: одна колонка; состав заказа визуально скрыт, но в DOM (lead-form читает value). */
@media (max-width:899.98px){
  [data-m="cart-grid"]{grid-template-columns:minmax(0,1fr)!important}
  [data-m="cart-item"]{grid-template-columns:96px minmax(0,1fr) auto!important}
  [data-m="cart-remove"]{min-height:44px;padding:10px 16px!important}
  [data-m="cart-text"]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;opacity:0;pointer-events:none;overflow:hidden}
  [data-m="cart-more"]{display:inline-flex!important;align-self:flex-start;align-items:center;min-height:44px;font-weight:700;color:#2b59ff}}
@media (max-width:639.98px){
  [data-m="cart-item"]{grid-template-columns:64px minmax(0,1fr)!important;gap:12px!important;padding:14px!important}
  [data-m="cart-price"]{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;text-align:left!important}
  [data-m="cart-remove"]{margin-top:0!important}
  [data-m="cart-total"]{padding:18px 16px!important}
  [data-m="cart-sum"]{font-size:32px!important}
  [data-m="cart-empty"]{padding:24px 16px!important}}

/* ===== 4.6 Контент и подвал (C1–C16, T11) ===== */
/* Сетки из 4 карточек в 2 колонки; сетки из 3 карточек держатся до 700 (C5). */
@media (max-width:999.98px){
  [data-m="home-perks"],[data-m="steps-grid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:899.98px){
  [data-m="hero"]{padding:28px 24px!important;border-radius:24px!important}
  [data-m="faq"],[data-m="req-grid"]{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  /* Тёмная подложка отзывов: с полями 36 три карточки на 700 не влезают в неё (610 при 580). */
  [data-m="reviews"]{padding:24px 20px!important}
  [data-m="faq-q"]{align-items:flex-start!important}
  /* Текст вопроса движок кладёт в <span class="sc-interp">: он должен переноситься,
     а «+» последним ребёнком — не сжиматься. В снимке до оживления span один, и он же последний. */
  [data-m="faq-q"]>span:not(:last-child){flex:1 1 auto;min-width:0}
  [data-m="faq-q"]>span:last-child{flex:0 0 auto}
  [data-m="cta-row"]{flex-direction:column!important;align-items:stretch!important;gap:16px!important;padding-top:24px!important;padding-bottom:24px!important}
  [data-m="cta-actions"]{flex-shrink:1!important;flex-wrap:wrap}
  [data-m="cta-actions"]>a{flex:1 1 200px;text-align:center}
  [data-m="foot-grid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 16px!important;padding-top:32px!important}
  [data-m="foot-bottom"]{color:#9aa0a8!important}}
/* Доставка карточками: шапка таблицы не нужна, способ занимает строку целиком.
   Строка гибкая, а не сетка из двух колонок: срок и стоимость стоят одной строкой,
   пока обе фразы целиком в неё помещаются, а как только срок перестал помещаться,
   стоимость уходит на свою строку под ним (перенос по flex-basis:auto = max-content).
   В сетке стоимость вставала справа от первой строки переносящегося срока,
   и фраза читалась вперемешку («зависит от | по тарифу перевозчика» / «службы»). */
@media (max-width:699.98px){
  [data-m="specs-grid"],[data-m="pay-grid"],[data-m="reviews-grid"]{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  [data-m="ship-head"]{display:none!important}
  [data-m="ship-row"]{display:flex!important;flex-wrap:wrap;row-gap:2px!important;padding:12px 16px!important}
  [data-m="ship-row"]>:first-child{flex:1 0 100%}
  [data-m="ship-row"]>:nth-child(2){flex:1 1 auto;min-width:0}
  [data-m="ship-row"]>:nth-child(3){flex:0 1 auto;min-width:0}}
/* Телефон. Сплошной background с !important отменяет и градиент, и url(): фото обложки,
   «Как заказать» и отзывов на телефоне не качаются (около 330 КБ, C7). */
@media (max-width:639.98px){
  [data-m="hero"]{padding:22px 16px!important;border-radius:20px!important;background:#f4f4f6!important}
  [data-m="hero-badge"]{font-size:12px!important;padding:6px 12px!important;margin-bottom:12px!important}
  [data-m="hero-points"]{gap:10px!important;margin-bottom:20px!important;font-size:15px!important}
  [data-m="hero-cta"]{flex-direction:column}
  [data-m="hero-cta"]>a{text-align:center;padding:16px 20px!important}
  [data-m="home-perks"]{gap:10px!important}
  [data-m="perk"]{padding:14px!important;border-radius:16px!important}
  [data-m="steps"],[data-m="reviews"]{padding:20px 12px!important;border-radius:20px!important;background:#26282e!important}
  [data-m="steps-grid"]{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  [data-m="step"]{display:grid!important;grid-template-columns:32px minmax(0,1fr);column-gap:12px;padding:14px!important}
  [data-m="step"]>:first-child{grid-row:span 2;width:32px!important;height:32px!important;margin:0!important}
  [data-m="specs-head"]{flex-wrap:wrap!important}
  [data-m="specs-link"]{display:inline-block;padding:11px 0}
  [data-m="reviews-grid"]{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;margin:0 -12px;padding:0 12px 4px}
  [data-m="review"]{box-sizing:border-box;flex:0 0 85%;scroll-snap-align:start}
  [data-m="faq-q"]{padding:16px!important}
  [data-m="legal-row"]{flex-direction:column!important;gap:2px!important}
  [data-m="legal-row"]>span:last-child{text-align:left!important;font-variant-numeric:tabular-nums}
  [data-m="cta-band"]{margin-top:32px!important}
  [data-m="foot-brand"],[data-m="foot-contact"]{grid-column:1/-1}
  [data-m="foot-links"]{gap:0!important}
  [data-m="foot-links"]>a{display:block;padding:12px 0;font-size:15px!important}
  [data-m="foot-bottom"]{flex-direction:column!important;gap:6px!important}
  [data-m="foot-bottom"]>div{text-align:left!important;font-size:12px!important}}
@media (max-width:359.98px){[data-m="home-perks"]{grid-template-columns:minmax(0,1fr)!important}}

/* ===== 4.7 Страницы форм и подборок (этап 2 SEO, 23.09.2026) ===== */
/* Карточки форм: 4 в ряд на десктопе, 3 на узком планшете, 2 на телефоне. Силуэт в карточке
   держит пропорцию сам (aspect-ratio в разметке), поэтому ширину ему только ограничиваем. */
@media (max-width:1099.98px){
  [data-m="cards"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:899.98px){
  [data-m="mp-grid"]{grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
  [data-m="cards"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  [data-m="vp-text"]{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;margin-top:28px!important}
  [data-m="vid-links"]>a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}}
@media (max-width:639.98px){
  [data-m="card"]{padding:12px!important;border-radius:16px!important;gap:8px!important}
  [data-m="card-thumb"]{height:88px!important;padding:0 10px}
  [data-m="card"] span{font-size:16px!important}
  [data-m="mp-row"]{padding:12px 14px!important;gap:10px!important}
  /* Шапка таблицы без капса: «АЛЮМОКОМПОЗИТ» капсом с разрядкой не влезал в колонку на 375. */
  [data-m="mp-table"]>[data-m="mp-row"]:first-child{text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
  [data-m="mp-fact"]{grid-template-columns:minmax(0,1fr)!important;gap:2px!important;padding:12px 14px!important}
  [data-m="vp-text"] h2{font-size:18px!important}
  [data-m="vp-text"]>div{padding:18px!important;border-radius:16px!important}
  [data-m="crumbs"]{margin-bottom:8px!important}
  /* Колонка «Подборки» в подвале на телефоне удлиняла главную на 200 px; подборки там
     в каталоге строкой ссылок и на страницах форм. */
  [data-m="foot-vids"]{display:none!important}
  /* Ссылки на отдельные страницы в подвале по той же причине: на телефоне они есть
     на странице «Оплата и доставка». */
  [data-m="foot-more"]{display:none!important}
  [data-m="more-works"]>div:first-child{padding:16px 18px!important;font-size:15px!important}}
@media (max-width:359.98px){
  [data-m="cards"]{grid-template-columns:minmax(0,1fr)!important}}