/* отличия главного блока этой страницы от main.css */
.top h1{max-width:22ch;text-wrap:balance}
/* ============================================================
КАРТОЧКА ТОВАРА (design-product.html)
Все цвета/радиусы/тени – токены дизайн-системы, новых нет.
============================================================ */
/* крошки + мобильный логотип */
.pd-top{padding:16px 0 0}
.pd-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--gray);min-width:0}
.crumbs a{color:var(--gray);white-space:nowrap}
.crumbs a:hover{color:var(--green-dark)}
.crumbs i{font-style:normal;opacity:.45}
.crumbs em{font-style:normal;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* ---------- сетка «галерея + покупка» ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:36px;padding:18px 0 8px}
/* галерея: миниатюры колонкой слева, крупное фото справа, залипает при прокрутке */
/* Ячейка сетки под галерею. Chrome ограничивает липкий элемент не своей
строкой сетки, а всей сеткой, поэтому фото уезжало вниз и наползало на
блок «Закажите сейчас» под ним. Обёртка растягивается на высоту строки и
становится границей: галерея липнет внутри своей строки и не более. */
.pd-gal-cell{min-width:0;height:100%}
.pd-gal{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:start;position:sticky;top:100px}
.pd-thumbs{display:flex;flex-direction:column;gap:9px;min-width:0}
.pd-thumb{position:relative;aspect-ratio:3/4;border-radius:11px;overflow:hidden;background:var(--cream);
box-shadow:var(--sh-sm);cursor:pointer;transition:transform .25s var(--ease)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb:hover{transform:translateY(-2px)}
/* рамка выделения – псевдоэлементом: inset-тень под ![]()
не видна */
.pd-thumb::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 2px var(--green);opacity:0;transition:opacity .2s var(--ease)}
.pd-thumb.on::after{opacity:1}
.pd-thumb .vmark{position:absolute;inset:0;display:grid;place-items:center;background:rgba(34,48,58,.42);
color:#fff;font-size:13px;padding-left:2px}
.pd-thumb .vlbl{position:absolute;left:0;right:0;bottom:0;background:rgba(34,48,58,.72);color:#fff;
font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:2px 0}
.pd-stage{position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--cream);
box-shadow:var(--sh-sm);cursor:zoom-in}
.pd-stage>img{width:100%;height:100%;object-fit:cover;transition:opacity .25s var(--ease)}
/* лупа: слой с тем же фото в 2× по позиции курсора */
.pd-zoom{position:absolute;inset:0;background-repeat:no-repeat;background-size:200% 200%;opacity:0;
transition:opacity .22s var(--ease);pointer-events:none}
@media (hover:hover){.pd-stage:hover .pd-zoom{opacity:1}}
.pd-badges{position:absolute;top:14px;left:14px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.pd-badges .c-metka{position:static}
.pd-badges .b-hit{background:var(--cream);color:var(--orange-text);font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill)}
/* сердечко: селектор с родителем – иначе его перебивают правила .pcard-fav из общих стилей
(в т.ч. мобильное уменьшение до 26px) */
.pd-stage .pd-fav{position:absolute;top:12px;right:12px;z-index:3;width:42px;height:42px;border-radius:50%;
background:rgba(255,255,255,.94);color:var(--gray);display:grid;place-items:center;box-shadow:var(--sh-sm)}
.pd-stage .pd-fav svg{width:21px;height:21px}
.pd-stage .pd-fav:hover{color:var(--red)}
/* в избранном – розовое, как на витрине (.heart-fx.on из main.css перебивалось правилом выше: вес тот же, файл позже) */
.pd-stage .pd-fav.on{background:radial-gradient(circle at 38% 32%,#F48FB1 0%,#F06292 50%,#E91E63 100%);color:#fff;box-shadow:0 3px 14px rgba(240,98,146,.55)}
.pd-stage .pd-fav.on svg{fill:#fff;stroke:#fff}
.pd-zhint{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
background:rgba(34,48,58,.6);color:#fff;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .25s var(--ease)}
.pd-zhint svg{width:14px;height:14px}
.pd-zhint em{font-style:normal}
.pd-zhint .zh-t{display:none}
@media (hover:none){.pd-zhint .zh-h{display:none}.pd-zhint .zh-t{display:inline}}
@media (hover:hover){.pd-stage:hover .pd-zhint{opacity:0}}
/* видео-кадр: затемнение + кнопка проигрывания (на боевом – mp4 из карточки Shopkeeper3) */
.pd-stage .pd-play{position:absolute;inset:0;z-index:3;display:none;place-items:center;background:rgba(34,48,58,.34)}
.pd-stage.is-vid{cursor:default}
.pd-stage.is-vid .pd-play{display:grid}
.pd-stage.is-vid .pd-zoom,.pd-stage.is-vid .pd-zhint{display:none}
.pd-play button{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--green-dark);
display:grid;place-items:center;box-shadow:var(--sh-md);transition:transform .22s var(--ease)}
.pd-play button:hover{transform:scale(1.07)}
.pd-play button svg{width:26px;height:26px;margin-left:3px}
.pd-vbar{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;display:none;align-items:center;gap:10px;
background:rgba(34,48,58,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
border-radius:var(--r-pill);padding:8px 14px;color:#fff;font-size:12px;font-weight:600}
.pd-stage.is-play .pd-vbar{display:flex}
.pd-stage.is-play .pd-play{background:rgba(34,48,58,.12)}
.pd-vbar .ln{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.pd-vbar .ln i{display:block;height:100%;width:0;background:#fff;animation:pd-vprog 24s linear forwards}
@keyframes pd-vprog{to{width:100%}}
/* ---------- правая колонка ---------- */
.pd-title{font-size:29px;line-height:1.18;text-wrap:balance}
.pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;margin-top:12px;font-size:13px;color:var(--gray)}
.pd-meta .rt{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700}
.pd-meta .rt .s{color:var(--orange);letter-spacing:1px;font-weight:400}
.pd-meta .rt a{color:var(--gray);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pd-meta .rt a:hover{color:var(--green-dark)}
.pd-meta .in{display:inline-flex;align-items:center;gap:6px;color:var(--green-dark);font-weight:700}
.pd-meta .in .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green)}
.pd-meta .in .dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:dot-pulse 1.3s ease-out infinite}
/* карточка состава – на матовой зелёной подложке (вариант C дизайн-системы) */
.pd-compose{margin-top:18px;border-radius:var(--r-lg);padding:20px 22px}
.pd-compose h3{font-size:16px;color:var(--green-dark)}
.pd-sizes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0 15px}
.pd-size{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r-sm);padding:11px 13px;
cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .18s var(--ease)}
.pd-size:hover{box-shadow:inset 0 0 0 1.5px var(--green-light)}
.pd-size .rad{width:15px;height:15px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .18s var(--ease)}
.pd-size .nm{font-size:13px;font-weight:600;line-height:1.25}
.pd-size .nm small{display:block;color:var(--gray);font-size:11.5px;font-weight:500}
.pd-size b{margin-left:auto;font-family:var(--head);font-weight:800;font-size:15px;white-space:nowrap}
.pd-size.on{box-shadow:inset 0 0 0 2px var(--green)}
.pd-size.on .rad{box-shadow:inset 0 0 0 5px var(--green)}
.pd-comp{list-style:none;display:grid;gap:6px;font-size:13.5px;color:var(--green-dark)}
.pd-comp li{position:relative;padding-left:16px}
.pd-comp li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.pd-comp li b{font-weight:700}
.pd-dims{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.pd-dims span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.7);color:var(--green-dark);
border-radius:var(--r-pill);padding:6px 12px;font-size:12.5px;font-weight:700}
.pd-dims svg{width:14px;height:14px}
/* блок покупки */
.pd-buy{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-sm);padding:20px 22px}
.pd-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px}
.pd-price b{font-family:var(--head);font-weight:800;font-size:34px;line-height:1;white-space:nowrap}
.pd-price s{font-family:var(--head);font-weight:600;font-size:18px;color:var(--gray);white-space:nowrap}
.pd-price .off{background:var(--orange);color:var(--ink);font-weight:700;font-size:12px;padding:4px 9px;border-radius:var(--r-pill)}
.pd-save{margin-top:6px;font-size:13px;font-weight:600;color:var(--green-dark)}
.pd-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.qty{display:inline-flex;align-items:center;height:48px;flex:0 0 auto;background:var(--page);
border-radius:var(--r-sm);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.qty button{width:40px;height:100%;font-size:19px;line-height:1;color:var(--green-dark);border-radius:var(--r-sm);transition:background .16s}
.qty button:hover{background:var(--green-light)}
.qty span{min-width:32px;text-align:center;font-weight:700;font-size:15px}
.pd-row .btn{height:48px}
.pd-cart{flex:1 1 180px;justify-content:center}
.pd-oc{flex:1 1 168px;justify-content:center;background:#fff;color:var(--purple-text);
box-shadow:inset 0 0 0 1.5px rgba(156,60,160,.5)}
.pd-oc:hover{background:var(--purple-light);box-shadow:inset 0 0 0 1.5px var(--purple)}
.pd-oc:active{background:#EADCEC}
.pd-oc svg{width:16px;height:16px}
.pd-total{margin-top:12px;font-size:13.5px;color:var(--gray)}
.pd-total b{font-family:var(--head);font-weight:800;font-size:16px;color:var(--ink)}
.pd-total[hidden]{display:none}
/* сплит: показываем от порога (порог – открытый вопрос ТЗ, сейчас 3 000 ₽) */
.pd-split{position:relative;display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px dotted var(--line-2);font-size:13px;color:var(--gray)}
.pd-split .pie{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:conic-gradient(var(--purple) 0 25%,var(--purple-light) 25% 100%)}
.pd-split b{color:var(--ink)}
/* --- ПОМЕТКА-ВОПРОС с выпадающей подсказкой (единый контрол страницы) ---
Раньше подсказки было две разные: ссылка «условия →» у бонуса и «i» с нативным
title у Сплита. Клиент попросил пометку-вопрос (08.08.2026) – свели к одному приёму.
Кружок сидит надстрочно у последнего слова, окно раскрывается вверх, положение
и стрелку считает JS, чтобы окно не вылезало за край блока. */
.qm{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
background:#fff;color:var(--orange-text);box-shadow:inset 0 0 0 1.2px rgba(144,86,0,.4);
font-family:var(--body);font-weight:800;font-size:10.5px;line-height:1;
vertical-align:super;margin-left:3px;cursor:pointer;flex:0 0 auto;
transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease)}
.qm:hover{background:var(--orange);color:var(--ink);box-shadow:none}
.qm[aria-expanded="true"]{background:var(--orange);color:var(--ink);box-shadow:none}
.qm:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* последнее слово и пометка – одним куском, иначе на узком экране «?» переносится один */
.qnb{white-space:nowrap}
/* у Сплита строка серая – там пометка нейтральная */
.pd-split .qm{color:var(--gray);box-shadow:inset 0 0 0 1.2px var(--line-2);vertical-align:baseline;margin-left:1px}
.pd-split .qm:hover,.pd-split .qm[aria-expanded="true"]{background:var(--green);color:#fff;box-shadow:none}
.qpop{position:absolute;bottom:calc(100% + 9px);left:0;width:min(320px,86vw);z-index:6;
background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);
padding:13px 15px;font-size:12.5px;line-height:1.55;color:var(--gray);text-align:left;
opacity:0;visibility:hidden;transform:translateY(5px);
transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.qpop.open{opacity:1;visibility:visible;transform:none}
.qpop b{color:var(--ink)}
.qpop ul{list-style:none;margin:6px 0 0;padding:0}
.qpop li{position:relative;padding-left:14px;margin-bottom:4px}
.qpop li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--orange)}
.qpop .qp-link{display:inline-block;margin-top:8px;color:var(--green-dark);font-weight:700;
text-decoration:underline;text-underline-offset:3px}
.qpop .qp-link:hover{color:var(--green)}
.qpop .qarr{position:absolute;top:100%;margin-top:-6px;width:12px;height:12px;background:#fff;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.qpop{transition:none}}
/* атрибут hidden не работает против display:flex – гасим явно */
.pd-split[hidden]{display:none}
/* Правая колонка одним столбцом: цена и покупка, под ними компактно –
доставка, бонусы и связь с флористом. Раньше это лежало под фотографией
слева и было разбито на отдельные плитки; клиент попросил собрать всё
справа под кнопками и не выделять плитками. Разделяем тонкими линиями. */
.pd-col{display:flex;flex-direction:column;min-width:0}
/* доставка */
.pd-del{margin-top:16px;display:grid;gap:9px}
.pd-now{display:inline-flex;align-items:center;gap:9px;justify-self:start;background:#F3F9F5;border:1.5px solid var(--green-light);
border-radius:var(--r-pill);padding:6px 14px 6px 11px;font-size:14px;font-weight:600;color:var(--green-dark)}
.pd-now b{font-family:var(--head);font-weight:800;white-space:nowrap}
.pd-now .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.pd-now .dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:dot-pulse 1.3s ease-out infinite}
.pd-dl{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink)}
.pd-dl svg{width:18px;height:18px;flex:0 0 auto;color:var(--green);margin-top:2px}
/* Подстрочник идёт в ту же строку, если она вмещает: в правой колонке справа
оставалось пустое место, а текст всё равно переносился. inline-block –
чтобы при нехватке места подстрочник уходил вниз целиком, а не рвался
посередине фразы. */
.pd-dl small{display:inline-block;color:var(--gray);font-size:12.5px}
.pd-dl small::before{content:"·";margin:0 7px 0 0;color:var(--line-2)}
.pd-dl a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pd-dl a:hover{color:var(--green)}
/* бонусы и социальное доказательство */
.pd-perks{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);display:grid;gap:7px}
.pd-perk{position:relative;display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink)}
.pd-perk .ic{width:18px;height:18px;flex:0 0 auto;margin-top:1px;display:grid;place-items:center;color:var(--orange-text)}
.pd-perk.n .ic{color:var(--gray)}
.pd-perk .ic svg{width:18px;height:18px}
.pd-perk b{font-weight:700}
.pd-perk a{color:var(--orange-text);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pd-perk a:hover{color:#7a4900}
/* быстрая консультация */
.pd-ask{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:12.5px;color:var(--gray)}
.pd-ask a{display:inline-flex;align-items:center;gap:7px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);
border-radius:var(--r-pill);padding:7px 14px;font-size:13px;font-weight:700;color:var(--ink);transition:.18s}
.pd-ask a svg{width:15px;height:15px}
.pd-ask a.tg:hover{color:#229ED9;box-shadow:inset 0 0 0 1.5px #229ED9}
.pd-ask a.mx:hover{color:#7A6FD9;box-shadow:inset 0 0 0 1.5px #7A6FD9}
/* ---------- допы «Добавим подарок?» ---------- */
.addons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.addon{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:13px 14px;cursor:pointer;text-align:left;transition:border-color .18s var(--ease),box-shadow .25s var(--ease),background .18s}
.addon:hover{box-shadow:var(--sh-sm);border-color:var(--green-light)}
.addon.on{border-color:var(--green);background:#F5FAF7}
.addon .ph{width:64px;height:64px;flex:0 0 auto;border-radius:11px;overflow:hidden;background:var(--cream)}
.addon .ph img{width:100%;height:100%;object-fit:cover}
.addon .tx{min-width:0}
.addon .tx b{overflow-wrap:anywhere}
.addon .tx b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.addon .tx span{font-family:var(--head);font-weight:800;font-size:14px}
.addon .cb{width:22px;height:22px;flex:0 0 auto;margin-left:auto;border-radius:7px;color:#fff;
box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;transition:.18s}
.addon .cb svg{width:14px;height:14px;opacity:0;transition:opacity .15s}
.addon.on .cb{background:var(--green);box-shadow:none}
.addon.on .cb svg{opacity:1}
.addon[hidden]{display:none}
.addons-foot{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.addons-sum{font-size:13.5px;color:var(--gray)}
.addons-sum b{font-family:var(--head);font-weight:800;font-size:16px;color:var(--ink)}
/* ---------- описание + характеристики ---------- */
.pd-info{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
.pd-desc p{color:var(--gray);font-size:14.5px;line-height:1.7;margin-bottom:12px;max-width:66ch}
.pd-desc p b{color:var(--ink)}
.specs{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm)}
.specs div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 16px;
font-size:13.5px;border-bottom:1px dotted var(--line-2)}
.specs div:last-child{border-bottom:none}
.specs span{color:var(--gray);flex:0 0 auto}
.specs b{font-weight:700;text-align:right;min-width:0}
/* ---------- уход за букетом ---------- */
.care{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.care-i{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm);
transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.care-i:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.care-i .ic{width:42px;height:42px;border-radius:11px;background:var(--green-light);color:var(--green-dark);
display:grid;place-items:center;margin-bottom:12px}
.care-i .ic svg{width:22px;height:22px}
.care-i b{display:block;font-size:14px;margin-bottom:4px}
.care-i small{color:var(--gray);font-size:12.5px;line-height:1.5}
/* ---------- залипающая полоса покупки ---------- */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-fab) - 1);padding:10px 0;
background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-top:1px solid var(--line);box-shadow:0 -8px 26px rgba(34,48,58,.10);
transform:translateY(115%);transition:transform .35s var(--ease)}
.pbar.on{transform:none}
.pbar .wrap{display:flex;align-items:center;gap:14px}
.pbar img{width:42px;height:50px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.pbar .nm{font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;min-width:0}
.pbar .nm small{display:block;color:var(--gray);font-size:12px;font-weight:500}
.pbar .pr{margin-left:auto;flex:0 0 auto;font-family:var(--head);font-weight:800;font-size:20px;white-space:nowrap}
.pbar .pr s{display:block;font-size:12.5px;font-weight:600;color:var(--gray)}
.pbar .btn{flex:0 0 auto;height:44px}
/* плавающая кнопка связи не должна оказаться под полосой */
body.bar-on .fab{bottom:96px}
.fab{transition:bottom .35s var(--ease)}
/* счётчик избранного в шапке: hidden не гасит display:grid */
.iconbtn .cnt[hidden]{display:none}
/* модалка «в 1 клик» и лайтбокс фото */
.modal.oc .panel{max-width:430px}
.modal.lb{padding:32px 20px;align-items:center}
.modal.lb .panel{max-width:min(94vw,620px);padding:10px;position:relative}
.modal.lb img{width:100%;height:auto;border-radius:var(--r);display:block}
.modal.lb .close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.92);box-shadow:var(--sh-sm)}
/* ---------- адаптив ---------- */
/* 901–1080: две колонки сохраняем (иначе рядом с галереей остаётся пустое поле),
но выбор длины ставим в одну колонку – в 460px две кнопки уже жмутся */
@media(max-width:1080px){
.pd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.pd-gal{grid-template-columns:66px minmax(0,1fr)}
.pd-title{font-size:25px}
.pd-sizes{grid-template-columns:1fr}
.pd-compose,.pd-buy{padding:18px 18px}
.pd-info{grid-template-columns:1fr;gap:22px}
.addons{grid-template-columns:repeat(3,minmax(0,1fr))}
.care{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ≤900: галерея и покупка друг под другом, фото не растягиваем на всю ширину */
@media(max-width:900px){
.pd{grid-template-columns:1fr;gap:26px;padding-top:14px}
.pd-gal{position:static;max-width:520px;grid-template-columns:70px minmax(0,1fr)}
}
@media(max-width:760px){
/* подпись секции не должна жаться в правый угол рядом с заголовком */
.sec-head{flex-direction:column;align-items:flex-start;gap:8px}
.sec-head .hint{text-align:left;max-width:none}
.pd-gal{grid-template-columns:1fr;max-width:none}
.pd-thumbs{order:2;flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.pd-thumb{flex:0 0 64px}
.pd-stage{border-radius:var(--r)}
.pd-title{font-size:22px}
.pd-compose,.pd-buy{padding:17px 16px}
.pd-sizes{grid-template-columns:1fr}
.pd-price b{font-size:29px}
.pd-row .btn,.pd-cart,.pd-oc{flex:1 1 100%}
.addons{grid-template-columns:repeat(2,minmax(0,1fr))}
.addon{padding:11px 12px;gap:10px}
.addon .ph{width:56px;height:56px}
.care{grid-template-columns:repeat(2,minmax(0,1fr))}
.pbar .nm{display:none}
.pbar img{display:none}
.pbar .pr{margin-left:0}
.pbar .btn{flex:1 1 auto;justify-content:center}
.specs div{padding:10px 13px;font-size:13px}
}
/* ≤620: в двух колонках карточка допа уже 170px – икона, текст и чекбокс не помещаются */
@media(max-width:620px){.addons{grid-template-columns:1fr}}
@media(max-width:370px){
.pd-title{font-size:20px}
.pd-price b{font-size:26px}
.care{grid-template-columns:1fr}
.pd-dims span,.pd-perk{font-size:12px}
.pbar .pr{font-size:17px}
}
/* матовая подложка (вариант C): карточка состава – тот же приём, что у .sub и .calc-res.
Правило стоит после собственных фонов блока – иначе не перебьёт их. */
.pd-compose{background:var(--grad-green);position:relative;isolation:isolate}
.pd-compose::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
background-image:var(--grain);background-size:220px 220px;opacity:.32;mix-blend-mode:multiply}
@media(prefers-reduced-motion:reduce){.pd-vbar .ln i{animation:none;width:38%}}
/* объёмные иконки */
/* Иконка – один