/* product.css — карточка товара: страница .pdpage (/{lang}/products/{id}/) с верхней строкой
   «назад + путь» .pdtop/.crumbs, галерея .gal, первый экран .pd*, размеры .sizes, сетка фактов
   .pd-grid с кнопками «?» и поповером .pd-hint, аккордеоны details.pd-acc, ряд ссылок .pd-links,
   «Пригодится вместе» .pd-with, таблица размеров #szm, мобильная панель .mobuy
   и полноэкранный просмотр фото .lb*. Правила старой модалки .modal/.sheet оставлены для запасного
   index.html, в котором она ещё есть. Владелец: команда «товар». */

/* modal / product */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.on{display:block}
/* вуаль и тени карточки — развёртка rgb токена --brand2: подложка холодная, как вся витрина */
.modal .veil{position:absolute;inset:0;background:rgba(2,41,90,.58);backdrop-filter:blur(3px)}
.modal .sheet{position:absolute;inset:26px;max-width:1120px;margin:auto;background:#fff;border-radius:var(--rl);
  overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 80px rgba(2,41,90,.35);-webkit-overflow-scrolling:touch}

/* навигация карточки: липкая полоса нулевой высоты — кнопки не уезжают вместе с текстом */
.pd-nav{position:sticky;top:0;height:0;z-index:7;pointer-events:none}
.pd-nav>button{pointer-events:auto;position:absolute}
.pd-nav .pd-back{left:14px;top:14px}
.pd-nav .close{right:14px;top:14px;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--brand);
  display:grid;place-items:center;font-size:18px;border:1.5px solid var(--line);box-shadow:0 2px 10px rgba(3,62,128,.12)}
.pd-nav .close:hover{background:var(--brand-soft);border-color:var(--brand3)}
/* язык внутри карточки: шапку сайта закрывает вуаль модалки */
.pd-nav .pd-lang{pointer-events:auto;position:absolute;left:64px;top:14px;display:flex;height:42px;
  background:#fff;border:1.5px solid var(--line);border-radius:21px;overflow:hidden;box-shadow:0 2px 10px rgba(3,62,128,.12)}
.pd-nav .pd-lang button{min-width:38px;padding:0 6px;border:0;background:transparent;
  font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:.3px}
.pd-nav .pd-lang button:hover{color:var(--ink)}
.pd-nav .pd-lang button.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
/* кольцо внутрь: у пилюли overflow:hidden, наружное кольцо ядра она срезает */
.pd-nav .pd-lang button:focus-visible{outline:2px solid var(--brand);outline-offset:-3px;border-radius:99px}

.pd{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:30px}
.gal .main{border:1px solid var(--line);border-radius:var(--rl);aspect-ratio:4/5;display:grid;place-items:center;padding:18px;background:#fff;position:relative;overflow:hidden}
.gal .main img{position:absolute;inset:18px;width:auto;height:auto;max-width:calc(100% - 36px);max-height:calc(100% - 36px);margin:auto;object-fit:contain;cursor:zoom-in}
/* товар без фото: название и обещание прислать снимок — кнопка заявки при этом работает */
.gal .main.empty{aspect-ratio:auto;min-height:200px;background:var(--brand-soft)}
.gal .main .nopic{display:grid;place-items:center;gap:8px;text-align:center;color:var(--ink2);padding:24px;position:relative}
.gal .main .nopic b{color:var(--ink);font-size:15px;font-weight:600;line-height:1.35;max-width:22ch}
.gal .main .nopic i{font-style:normal;font-size:12.5px}
.gal .thumbs{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
/* миниатюра — кнопка (Tab + Enter), картинка внутри */
.gal .thumbs .th{width:64px;height:64px;border:1px solid var(--line);border-radius:var(--r);padding:6px;
  cursor:pointer;background:#fff;display:grid;place-items:center}
.gal .thumbs .th img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.gal .thumbs .th.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(3,62,128,.14)}
.gal .thumbs .th:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* десктоп: галерея липнет к верху модалки — иначе при прокрутке правой колонки
   левая половина .sheet пустует на всю высоту экрана.
   align-self:start снимает растягивание grid-элемента, max-height держит галерею
   в пределах прокручиваемой области (если фото много — свой скролл, ничего не теряется).
   Порог по высоте: ниже 800 px липкая колонка не помещалась бы целиком. */
@media(min-width:1081px) and (min-height:800px){
  .pd .gal{position:sticky;top:30px;align-self:start;
    max-height:calc(100vh - 82px);overflow:auto;overscroll-behavior:contain}
}

.pd .pdcol{min-width:0}
.pd-h{display:flex;align-items:flex-start;gap:12px;padding-right:48px}
.pd-h h1,.pd-h h2{margin:4px 0 6px;font-size:clamp(21px,2.6vw,27px);letter-spacing:-.8px;line-height:1.1;font-weight:700;flex:1;min-width:0;
  position:relative;padding-bottom:12px;overflow-wrap:anywhere}
/* штрих-диагональ той же геометрии, что у .sec-head h2 в base.css. Живёт внутри padding заголовка,
   поэтому после первой отрисовки ничего не сдвигает и не наезжает на строку .tag */
.pd-h h1::after,.pd-h h2::after{content:"";position:absolute;left:0;bottom:2px;width:44px;height:5px;background:var(--accent);
  transform:skewX(var(--skew));clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.pd h2{margin:4px 0 6px}
.pd .tag{color:var(--ink2);margin:0 0 16px}
.pd-share{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:8px 12px;min-height:40px;
  border:1.5px solid var(--line);border-radius:var(--r);background:#fff;font-size:13px;color:var(--brand);font-weight:600;transition:.15s}
.pd-share:hover{background:var(--brand-soft);border-color:var(--brand3);color:var(--brand2)}
.pd-share:active{transform:scale(.97)}

/* блок покупки — отдельная белая карточка с холодной тенью: цена, ярлык наличия,
   строка обещаний и одна кнопка. На белом фоне зачёркнутая старая цена (--ink3) даёт 4.89:1 */
.buybox{border:1.5px solid var(--line);border-radius:var(--rl);padding:20px;margin:18px 0;background:#fff;box-shadow:var(--sh)}
.buybox .p{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.buybox .p b{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.buybox .p b.ask{font-size:20px;letter-spacing:-.3px}
.buybox .p b.promo{color:var(--sale)}
.buybox .p s{color:var(--ink3);font-size:17px}
/* единица продажи рядом с ценой: «туба · 6 шт.» — из Rules.unitOf */
.buybox .p .unit{font-size:14px;color:var(--ink2);font-weight:600}
/* строка гарантий читается как пункт-обещание: синяя точка вместо сноски мелким шрифтом.
   Флексом её делать нельзя — внутри голые текстовые узлы и inline <b> из buyHtml() */
.buybox .note{font-size:13px;color:var(--ink2);margin-bottom:14px;line-height:1.5;position:relative;padding-left:15px}
.buybox .note::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--brand3)}
.buybox .btn{width:100%;min-height:52px;font-size:16px}
/* главное действие карточки — оранжевая заливка по брифу. В режиме preorder_all товар
   всегда рисует .btn-pre (синюю у ядра), поэтому перекрашиваем её скоупом, не трогая base.css */
.buybox .btn,.mobuy .btn{background:var(--accent-d);color:#fff}
.buybox .btn:hover,.mobuy .btn:hover{background:var(--accent-d);filter:brightness(.9)}
.buybox .btn:active,.mobuy .btn:active{filter:brightness(.85)}
.colors{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.colors button{border:1px solid var(--line);border-radius:var(--r);padding:9px 13px;font-size:13.5px;background:#fff;min-height:40px;white-space:nowrap;color:var(--ink)}
.colors button.on{border-color:var(--brand);color:var(--brand);font-weight:600;box-shadow:0 0 0 2px rgba(3,62,128,.14)}
/* .has идёт строго после .on: специфичность одинаковая, а кнопка может иметь оба класса */
.colors button.has{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok);color:var(--ok)}
/* выбранный цвет, который есть в наличии: синий ореол выбора + зелёная метка наличия */
.colors button.on.has{border-color:var(--brand);box-shadow:0 0 0 2px rgba(3,62,128,.14),inset 0 0 0 1px var(--ok)}

/* размеры: кликабельные кнопки, недоступный у выбранного цвета — зачёркнут */
.sizes{margin:14px 0 0;font-size:13px;color:var(--ink2);line-height:1.7}
.sizes[hidden]{display:none}
.sizes b{color:var(--ink2);font-weight:700;display:block;margin-bottom:8px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.6px}
.sizes .szrow{display:flex;flex-wrap:wrap;gap:7px}
.sizes .szrow button{min-width:46px;min-height:40px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;font-size:13.5px;color:var(--ink);transition:.15s}
.sizes .szrow button:hover:not(:disabled){border-color:var(--brand3);background:var(--soft)}
.sizes .szrow button.on{border-color:var(--brand);color:var(--brand);font-weight:600;box-shadow:0 0 0 2px rgba(3,62,128,.14)}
.sizes .szrow button.na{color:var(--ink3);text-decoration:line-through;background:var(--soft);opacity:.7;cursor:not-allowed}
.pd-szbtn{display:inline-flex;align-items:center;gap:7px;margin-top:10px;min-height:40px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:13.5px;color:var(--brand);font-weight:600}
.pd-szbtn:hover{background:var(--brand-soft);border-color:var(--brand3)}

/* сетка фактов: у ракетки 2×2 (жёсткость | баланс / вес-хват | уровень), у остальных 1–4 ячейки.
   Пустые ячейки не рисуются; нечётная последняя растягивается на обе колонки */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 6px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rl);overflow:hidden}
.pd-grid[hidden]{display:none}
.pd-cell{background:#fff;padding:10px 14px 12px;min-width:0;display:flex;flex-direction:column;gap:3px}
.pd-cell:only-child,.pd-cell:last-child:nth-child(odd){grid-column:1/-1}
.pd-k{display:flex;align-items:center;gap:4px;min-height:28px}
.pd-k span{color:var(--ink3);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;min-width:0}
.pd-cell b{font-weight:600;font-size:14.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
/* «?» — круг 22 px, тап-зона 28 px (на телефоне 44 px, см. ниже) */
.pd-q{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;margin:-4px 0 -4px auto;border:0;background:none;
  color:var(--brand);font-size:12.5px;font-weight:700;cursor:pointer;position:relative;z-index:0;padding:0}
.pd-q::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px solid var(--brand3);background:#fff;z-index:-1}

.pd-q[aria-expanded="true"]::before{background:var(--brand-soft);border-color:var(--brand)}
@media(hover:hover){.pd-q:hover::before{background:var(--brand-soft);border-color:var(--brand)}}
.pd-q:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:50%}

/* поповер пояснения: абсолютный внутри .pdpage, ширину и место ставит product.js (pdHintPlace) */
.pd-hint{position:absolute;z-index:40;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 14px 40px rgba(2,41,90,.22);padding:10px 12px 12px 14px;font-size:13.5px;
  line-height:1.5;color:var(--ink2)}
.pd-hint[hidden]{display:none}
.pd-hint:focus{outline:none}
.pd-hint:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pd-hint::before{content:"";position:absolute;top:-6px;left:var(--ax,50%);width:10px;height:10px;margin-left:-5px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.pd-hint.up::before{top:auto;bottom:-6px;transform:rotate(225deg)}
.pd-hint-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.pd-hint-h b{color:var(--ink);font-size:13.5px;font-weight:700}
.pd-hint-x{flex:none;width:32px;height:32px;margin:-6px -6px -6px 0;border:0;background:none;border-radius:50%;
  color:var(--ink2);font-size:14px;cursor:pointer}
.pd-hint-x:hover{background:var(--soft);color:var(--ink)}
.pd-hint-x:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.pd-hint p{margin:4px 0 0}
.pd-hint p b{color:var(--ink)}

/* описание в аккордеоне */
.pd-desc{color:var(--ink2);font-size:14.5px;line-height:1.55}
.pd-desc p{margin:0 0 12px}

/* ряд служебных ссылок: доставка · возврат · натяжка */
.pd-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px}
.pd-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--brand);font-weight:600}
.pd-links a::after{content:"→";margin-left:5px;font-weight:600}
.pd-links a:hover{text-decoration:underline;text-underline-offset:3px}

table.spec{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px;border-top:1px solid var(--line)}
table.spec td{padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.spec td:first-child{color:var(--ink2);width:44%;padding-right:14px}
table.spec td:last-child{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.tech{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.tech .t{border:1px solid var(--line);border-radius:var(--r);padding:13px;display:flex;gap:12px;align-items:flex-start}
.tech .t img{width:44px;height:44px;object-fit:contain;flex:none}
.tech .t b{font-size:13.5px;display:block;margin-bottom:2px}
.tech .t span{font-size:12.5px;color:var(--ink2);line-height:1.45}
h4.blk{margin:24px 0 6px;font-size:15.5px;letter-spacing:-.3px;font-weight:700}
/* аккордеон блоков карточки: на десктопе открыт (атрибут open ставит fillDetails) */
details.pd-acc{border-top:1px solid var(--line);margin-top:8px}
details.pd-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:10px;min-height:44px}
details.pd-acc>summary::-webkit-details-marker{display:none}
details.pd-acc>summary::after{content:"";width:8px;height:8px;flex:none;margin-right:4px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .18s}
details.pd-acc[open]>summary::after{transform:rotate(-135deg)}
details.pd-acc>summary h4.blk{margin:14px 0}
details.pd-acc>summary:hover h4.blk{color:var(--brand)}
details.pd-acc>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
details.pd-acc>summary:active{opacity:.7}
/* «поделиться» в верхней полосе карточки — только телефон */
.pd-nav .pd-share-top{display:none}
.mobuy{display:none}

/* «с этим берут» */
.pd-with{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:8px}
/* .wc — ссылка на соседний товар: блочная, текст своего цвета */
.pd-with .wc{display:block;border:1px solid var(--line);border-radius:var(--rl);padding:10px;background:#fff;text-align:left;color:inherit;transition:.15s}
.pd-with .wc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* подъём и тень — только для мыши: на телефоне это горизонтальная лента, тени на скролле запрещены */
@media(hover:hover){.pd-with .wc:hover{border-color:var(--brand);box-shadow:var(--sh);transform:translateY(-3px)}}
.pd-with .wc:active{transform:scale(.98)}
.pd-with .wph{display:grid;place-items:center;height:86px;margin-bottom:8px}
.pd-with .wph img{max-height:86px;width:auto;object-fit:contain}
.pd-with .wph i{font-style:normal;font-size:11px;color:var(--ink3)}
.pd-with .wc b{display:block;font-size:12.5px;font-weight:600;line-height:1.35;margin-bottom:4px}
.pd-with .wc em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.pd-with .wc .unit{display:block;font-size:11.5px;color:var(--ink2);margin-top:1px}

.cnote:not(:empty){margin:8px 0 0;padding:8px 10px 8px 11px;border-radius:var(--r);background:var(--warn-bg);
  border:0;border-left:3px solid var(--warn);color:var(--warn);font-size:12px;line-height:1.45}

/* кнопка увеличения фото (сама .rnd — в base.css) */
.rnd.zoom{position:absolute;right:10px;bottom:10px;width:36px;height:36px;background:rgba(255,255,255,.92)}

/* ============ таблица размеров: свой слой между .modal (100) и .lb (120) ============ */
#szm{position:fixed;inset:0;z-index:115}
#szm[hidden]{display:none}
#szm .szveil{position:absolute;inset:0;background:rgba(2,41,90,.55)}
#szm .szcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,92vw);
  max-height:min(84vh,720px);overflow:auto;background:#fff;border-radius:var(--rl);padding:22px;box-shadow:0 30px 80px rgba(2,41,90,.35)}
#szm .szclose{position:absolute;right:12px;top:12px;font-size:17px}
#szm h3{margin:0 0 10px;font-size:16px;font-weight:700;padding-right:46px}
#szm h3+*{margin-top:0}
#szm .szadv{margin:0 0 12px;padding:9px 11px;border-radius:9px;background:var(--warn-bg);color:var(--warn);font-size:13px;line-height:1.45}
#szm .sznote{margin:10px 0 0;font-size:12px;color:var(--ink3);line-height:1.45}
#szm table.sztab{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:6px}
#szm table.sztab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--brand3);
  padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
#szm table.sztab td{padding:7px 8px;border-bottom:1px solid var(--line)}
#szm table.sztab tbody tr:nth-child(odd){background:var(--soft)}
#szm h3:not(:first-child){margin-top:20px}

/* просмотр фото на весь экран */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:120;background:var(--brand2);display:grid;place-items:center;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))}
.lb img{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain;border-radius:var(--rl);background:#fff}
.lb .lb-back{position:absolute;left:16px;top:calc(16px + env(safe-area-inset-top))}
.lb .lb-prev{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.lb .lb-next{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.lb .lb-n{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.6px;font-variant-numeric:tabular-nums;opacity:.85}

/* ============ страница товара ============ */
.pdpage{padding:18px 0 56px;position:relative}
/* верхняя строка: круглая «назад» и путь «Магазин / Категория» — возврат в текущий раздел */
.pdtop{display:flex;align-items:center;gap:12px;margin-bottom:18px;min-height:44px}
.pdtop .rnd{flex:none}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;min-width:0;font-size:13.5px;color:var(--ink3)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--brand);font-weight:600}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs a:active{opacity:.7}
.pdpage .pd{padding:0}
.pdpage .pd-h{padding-right:0}
/* липкая галерея считается от шапки сайта, а не от верха модалки */
@media(min-width:1081px) and (min-height:800px){
  .pdpage .pd .gal{top:calc(var(--hdr) + 16px);max-height:calc(100vh - var(--hdr) - 32px)}
  /* колонка на странице шире, чем в модалке: фото 4:5 во всю ширину выталкивало миниатюры
     за край липкой колонки. Фото ограничиваем по высоте экрана, миниатюры остаются видны */
  .pdpage .gal .main{max-height:calc(100vh - var(--hdr) - 190px)}
}
.pdnf{padding-top:8px}

/* ============ tablet ============ */
@media(max-width:1080px){
  .pd{grid-template-columns:1fr;gap:24px}
}

/* ============ phone ============ */
@media(max-width:760px){
  .modal .sheet{inset:0;border-radius:0;max-width:none}
  .modal .veil{backdrop-filter:none} /* лист во весь экран — размытия под ним всё равно не видно */
  /* карточка проявляется, содержимое подъезжает снизу. Двигать transform'ом сам .sheet нельзя:
     пока идёт анимация, он становится containing block для position:fixed и нижняя панель
     «цена + предзаказ» уезжает за экран. opacity такого эффекта не даёт. */
  .modal.on .sheet{animation:fadeIn .16s ease}
  .modal.on #pd{animation:pdIn .24s ease}
  @keyframes pdIn{from{opacity:0;transform:translateY(14px)}}
  .lb{animation:fadeIn .18s ease}
  .pd{padding:14px 16px calc(100px + var(--safeB))}
  .pd-h{padding-right:0}
  .pd-h h2{font-size:20px}
  /* кнопка «поделиться» переехала в верхнюю полосу поверх фото: в строке с заголовком
     она на узком экране съедала половину ширины */
  .pd-h .pd-share{display:none}
  .pd-nav .pd-share-top{display:grid;pointer-events:auto;position:absolute;
    right:64px;top:calc(10px + env(safe-area-inset-top));width:44px;height:44px;
    background:rgba(255,255,255,.95);backdrop-filter:blur(6px)}

  /* галерея лентой: кадр во всю ширину, свайп со snap, точки под ней */
  .gal .main{border:0;padding:8px;aspect-ratio:1/.92}
  .gal .main.mtrack{padding:0;aspect-ratio:auto;display:block;overflow:hidden;position:relative}
  .gal .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
  .gal .track::-webkit-scrollbar{display:none}
  .gal .track{width:100%}
  .gal .gs{flex:0 0 100%;min-width:0;margin:0;position:relative;aspect-ratio:1/.92;background:#fff;scroll-snap-align:center}
  .gal .gs picture{display:contents}
  .gal .gs img{position:absolute;inset:10px;margin:auto;width:auto;height:auto;
    max-width:calc(100% - 20px);max-height:calc(100% - 20px);object-fit:contain;cursor:zoom-in}
  /* миниатюры на телефоне — точки: сами кнопки остаются (Tab, aria-pressed), фото в них не нужно */
  .gal .thumbs{justify-content:center;gap:0;margin-top:6px;flex-wrap:nowrap}
  .gal .thumbs .th{width:44px;height:44px;min-width:44px;border:0;background:none;padding:0;
    border-radius:0;box-shadow:none;place-items:center}
  .gal .thumbs .th img{display:none}
  .gal .thumbs .th:before{content:"";width:8px;height:8px;border-radius:99px;background:var(--line);
    transition:width .18s,background .18s}
  .gal .thumbs .th.on{border:0;box-shadow:none}
  .gal .thumbs .th.on:before{width:20px;background:var(--brand)}
  .buybox{display:none}
  .mobuy{display:block;position:fixed;left:0;right:0;bottom:0;z-index:6;background:rgba(255,255,255,.97);
    backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(3,62,128,.08);
    padding:10px max(16px,var(--safeL)) calc(10px + var(--safeB));
    display:flex;align-items:center;gap:12px}
  .mobuy .pp{flex:0 1 auto;min-width:0}
  .mobuy .pp .ppl{display:flex;align-items:baseline;gap:0 6px;flex-wrap:wrap}
  .mobuy .pp b{font-size:20px;font-weight:700;letter-spacing:-.6px;line-height:1.15;font-variant-numeric:tabular-nums}
  .mobuy .pp b.ask{font-size:15px;letter-spacing:-.2px}
  .mobuy .pp b.promo{color:var(--sale)}
  .mobuy .pp s{color:var(--ink3);font-size:12.5px}
  .mobuy .pp .unit{font-size:12px;color:var(--ink2);font-weight:600;white-space:nowrap}
  .mobuy .pp span{display:block;font-size:11.5px;color:var(--ink2);white-space:nowrap}
  .mobuy .btn{flex:1;min-height:50px;max-width:62%}
  .tech{grid-template-columns:1fr}
  /* «с этим берут» — горизонтальная лента: в две колонки карточки были слишком мелкими */
  .pd-with{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;margin:8px -16px 0;padding:2px 16px}
  .pd-with::-webkit-scrollbar{display:none}
  .pd-with .wc{flex:0 0 150px;min-width:0;scroll-snap-align:start}
  /* кнопки навигации карточки: всегда в верхних углах, с учётом «чёлки» */
  /* лёгкая белая подложка сверху: под кнопками не просвечивает текст при прокрутке */
  .pd-nav::before{content:"";position:absolute;left:0;right:0;top:0;pointer-events:none;
    height:calc(66px + env(safe-area-inset-top));
    background:linear-gradient(#fff 38%,rgba(255,255,255,.72) 70%,rgba(255,255,255,0))}
  .pd-nav .pd-back{left:12px;top:calc(10px + env(safe-area-inset-top));background:rgba(255,255,255,.95);backdrop-filter:blur(6px)}
  .pd-nav .pd-lang{left:64px;top:calc(10px + env(safe-area-inset-top));height:44px;border-radius:22px;
    background:rgba(255,255,255,.95);backdrop-filter:blur(6px)}
  .pd-nav .pd-lang button{min-width:40px}
  .pd-nav .close{right:12px;top:calc(10px + env(safe-area-inset-top));width:44px;height:44px;
    background:rgba(255,255,255,.95);backdrop-filter:blur(6px)}
  /* тап-зоны 44 px — переехали сюда из base.css (там стоял NEEDS(product)) */
  .sizes .szrow button{min-height:44px}
  .pd-szbtn{min-height:44px}
  .colors button{min-height:44px}
  /* «?» — 44 px тап-зона, круг прежний */
  .pd-q{width:44px;height:44px;margin:-10px -10px -10px auto}
  .pd-k{min-height:24px}
  .pd-cell{padding:9px 12px 11px}
  .pd-hint-x{width:44px;height:44px;margin:-12px -10px -12px 0}
  .pd-links a{min-height:44px}
  .rnd.zoom{width:44px;height:44px}
  .lb .lb-prev{left:8px}.lb .lb-next{right:8px}
  .lb img{max-height:72vh}
  #szm .szcard{width:100%;max-height:100%;height:100%;top:0;left:0;transform:none;border-radius:0;
    padding:18px 16px calc(18px + var(--safeB))}
  #szm .szclose{top:calc(12px + env(safe-area-inset-top))}
  #szm h3{padding-right:56px}

  /* страница товара: снизу место под панель «цена + кнопка», сама панель — над нижней навигацией
     сайта. Высоту навигации меряет product.js (--pdbn); без неё панель садится на край с safe-area */
  .pdpage{padding:6px 0 84px}
  .pdtop{margin-bottom:8px;gap:10px}
  .crumbs a{min-height:44px}
  .pdpage .pd{padding:0;gap:16px}
  .pdpage .mobuy{bottom:var(--pdbn,calc(56px + var(--safeB)));z-index:65;padding-bottom:10px}
  .pdpage.pd-nobn .mobuy{padding-bottom:calc(10px + var(--safeB))}
  /* «поделиться» рядом с заголовком — одной иконкой 44×44, чтобы не отнимать строку у названия */
  .pdpage .pd-h .pd-share{display:inline-flex;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;margin-top:0}
  .pdpage .pd-h .pd-share span{display:none}
  .pdpage .pd-h h1{font-size:21px}
}