/* ─────────────────────────────────────────────────────────────────────
   Карточка товара.

   Величины сняты с утверждённого артборда
   05_Разработка/demo/products/fnc-0005/desktop.html и mobile.html:
   первый экран — одна белая секция 1280×897 радиусом 28, внутри медиа
   570×713, колонка покупки 482, панель цены 482×169 радиусом 20 на
   фарфоре, и полоса фактов во всю ширину. H1 42, разделы 38, подразделы 28.
   ───────────────────────────────────────────────────────────────────── */

.pdp{padding-top:20px}

/* ── Первый экран: одна белая композиция ───────────────────────────── */
/* Радиус карточки в макете 28, не 24: она крупнее прочих поверхностей */
.pdp__wrap{margin-top:18px;background:var(--white);border-radius:28px;overflow:hidden;
  line-height:1.6}
/* Сетка макета: доли 7 к 5 при поле 40 и зазоре 44 — правая колонка
   получается 482 сама, без жёсткой ширины. */
.pdp__hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:44px;padding:40px;align-items:start}
.buy{min-width:0}

.gal{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:stretch}
/* Один снимок — ленты миниатюр нет, и колонка под неё не нужна */
.gal--one{grid-template-columns:minmax(0,1fr)}
/* Лента живёт в своей коробке и прокручивается, а не растягивает сетку */
.gal__rail{position:relative;overflow:hidden}
.gal__thumbs{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:thin}
.gal__thumb{position:relative;flex:0 0 auto;width:88px;aspect-ratio:4/5;padding:0;overflow:hidden;background:var(--porcelain);border-radius:16px;border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--border-strong)}
.gal__thumb--on{border-color:var(--burgundy)}
.gal__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Счётчик кадров: пилюля 50×32 в правом верхнем углу снимка (макет) */
.gal__count{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;
  align-items:center;height:32px;padding:0 14px;border-radius:var(--radius-pill);
  background:rgba(247,242,236,.94);color:var(--burgundy);font-size:12px;font-weight:600}
/* Портретная пропорция утверждена артбордом: 570×713 ≈ 4:5. */
/* width:100% обязателен: auto-поля отменяют растяжение grid-элемента,
   и слот схлопывался до размера содержимого. */
/* Липкая панель покупки на телефоне: величины из мобильного макета. */
.stickybuy{display:none}
@media (max-width:767px){

  .stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:flex;align-items:center;gap:12px;width:100%;max-width:430px;
    margin-inline:auto;padding:12px 16px 14px;background:var(--white);
    border-top:1px solid var(--border);border-radius:24px 24px 0 0}
  .stickybuy__i{min-width:0;flex:1 1 auto}
  .stickybuy__price{margin:0;font-size:15px;font-weight:600}
  .stickybuy__note{margin:2px 0 0;font-size:12px;color:var(--in-stock);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Кнопка в 116 px читалась как приписка к цене, поэтому она шире, чем
     в макете, — это осознанное отступление. Но вместе с ним она осталась
     блочной и с выравниванием по левому краю: текст прижимался к отступу
     слева и к верху, а не стоял в середине широкой кнопки. Высота 48
     как в макете, содержимое по центру. */
  .stickybuy__btn{display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;min-width:min(52%,190px);min-height:48px;padding:0 22px;
    background:var(--burgundy);border:0;border-radius:var(--radius-pill);
    font:inherit;font-size:15px;font-weight:600;line-height:1;color:#FFF;
    text-align:center;cursor:pointer}
  /* Панель перекрывает низ страницы — освобождаем место под ней */
  body:has(.stickybuy) .footer{padding-bottom:89px}
}

/* Крупный просмотр: белый лист во весь экран с лентой снимков.
   Величины из макета: заголовок липкий, кадры min(72vw,900px) и 1:1. */
.lbox{position:fixed;inset:0;z-index:90;background:var(--white)}
.lbox[hidden]{display:none}
.lbox__scroll{position:absolute;inset:0;overflow:hidden auto}
.lbox__head{position:sticky;top:0;z-index:2;display:grid;justify-items:center;
  gap:2px;padding:18px 72px 14px;background:var(--white)}
.lbox__kicker{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.lbox__title{margin:0;font-size:clamp(20px,2vw,26px);font-weight:600;
  letter-spacing:-.02em}
.lbox__list{display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:0 0 64px}
/* Квадратная рамка с обрезкой годится плитке, но не крупному просмотру:
   вертикальные кадры теряли в ней крышку и низ упаковки. Сюда приходят,
   чтобы рассмотреть товар целиком, поэтому рамку задаёт сам снимок, а
   высоту ограничиваем экраном — чтобы длинный кадр не требовал прокрутки
   внутри самого себя. */
.lbox__item{margin:0;display:flex;justify-content:center}
.lbox__item img{display:block;width:auto;height:auto;
  max-width:min(72vw,900px);max-height:86vh;
  background:var(--surface-soft)}
.lbox__close{position:fixed;top:14px;right:18px;z-index:3;display:grid;
  place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);
  border-radius:var(--radius-pill);background:var(--white);color:var(--ink);
  cursor:pointer}
.lbox__close:hover{border-color:var(--burgundy);color:var(--burgundy)}
@media (max-width:767px){
  /* Отступы под заголовками из мобильного макета */
  .pdp__title{margin:0 0 12px}
  .sect h2{margin:0 0 10px}
  .sect--sm .sect__h h2{margin:0}
  .sect h3{margin:0 0 12px}
  .lbox__head{padding:14px 60px 12px}
  .lbox__item img{max-width:calc(100vw - 24px)}
}

/* Кадр занимает колонку целиком: в макете он обрезан по рамке, а не
   вписан с полями по бокам. */
.gal__stage{position:relative;aspect-ratio:4/5;background:var(--porcelain);border-radius:20px;overflow:hidden}
/* Крупный кадр — кнопка: открыть просмотр можно и с клавиатуры. Рамку
   фокуса рисуем внутрь, иначе её срезает overflow сцены. */
.gal__zoom{position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:zoom-in}
.gal__zoom:focus-visible{outline:2px solid var(--burgundy);outline-offset:-4px}
.gal__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

.gal__none{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px;text-align:center}
.gal__mono{font-size:40px;font-weight:600;letter-spacing:.14em;color:#C9BBAF}
.gal__none strong{font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.gal__none span{font-size:13px;color:var(--border-strong)}

.pdp__type{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pdp__title{margin:0 0 14px;font-size:clamp(30px,3.2vw,42px);line-height:1.1;font-weight:600;letter-spacing:-.03em;text-wrap:pretty}
.pdp__line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 22px;font-size:14px;color:var(--muted)}
.pdp__line b{font-size:14px;font-weight:600;color:var(--ink)}
.pdp__stars{color:#D9A441;letter-spacing:.05em}
.pdp__sku{margin-left:auto}
/* Переключатель фасовок: тот же чип, что в фактах, но нажимаемый.
   Текущая фасовка залита бордовым — это ответ на вопрос «где я». */
.packs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.packs__i{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-pill);font-size:14px;font-weight:600;
  color:var(--ink);transition:border-color .2s ease,background .2s ease}
.packs__i:hover{border-color:var(--burgundy);color:var(--burgundy)}
.packs__i--on{background:var(--burgundy);border-color:var(--burgundy);
  color:var(--white);cursor:default}
.packs__i--on:hover{color:var(--white)}

.pdp__facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.pdp__facts li{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;background:var(--porcelain);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:13px;color:var(--ink)}
/* Чип бренда — ссылка на его страницу. Поля и высота принадлежат чипу,
   поэтому ссылка растягивается на него целиком: иначе на телефоне
   нажималась бы только строка текста высотой в полтора десятка пикселей. */
.pdp__facts li:has(a){padding:0}
.pdp__facts li a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 14px;color:inherit}
.pdp__facts li a:hover{color:var(--burgundy)}

/* Панель цены и наличия. Величины из макета: цена 40/600, старая 19/400,
   строка «за единицу» 13/400, наличие 15/600 с точкой и 13/400 про остаток. */
.money{padding:22px;background:var(--porcelain);border-radius:20px}
.money__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px}
/* То же в карточке: старая цена рядом с новой, а не отдельной строкой */
.money__now del{margin-right:12px;font-size:19px;font-weight:400;
  color:var(--text-faint);text-decoration:line-through}
.money__now ins{text-decoration:none;background:0}
.money__now{margin:0;font-size:clamp(30px,3.2vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
/* Без цены та же строка меньше: сорок пунктов на «Цена уточняется»
   кричали бы о том, чего нет. */
.money__now--empty{font-size:26px}
.money__old{margin:0;font-size:19px;color:var(--text-faint);text-decoration:line-through}
.money__off{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;background:var(--burgundy);color:var(--white);border-radius:var(--radius-pill);font-size:13px;font-weight:600}
.money__unit{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.money__stock{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.money__dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--border-strong)}
.money__in{margin:0;font-size:15px;font-weight:600;color:var(--muted)}
.money__left{margin:0;font-size:13px;color:var(--muted)}
/* Когда остаток появится, точка и подпись станут зелёными */
.money__stock--in .money__dot{background:var(--in-stock)}
.money__stock--in .money__in{color:var(--in-stock)}

.buy__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
/* Счётчик количества: в макете он слева от кнопки */
.qty{display:grid;grid-template-columns:48px 56px 48px;align-items:center;height:56px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill)}
.qty button{display:grid;place-items:center;height:100%;padding:0;background:0;border:0;font:inherit;font-size:20px;color:var(--ink);cursor:pointer}
.qty span{min-width:28px;text-align:center;font-size:16px;font-weight:600}
/* То же в карточке: перебиваем оформление плагина */
.buy__btn.buy__btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;background:var(--burgundy);color:var(--white);border:0;border-radius:var(--radius-pill);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
/* Пока покупка выключена на сервере, кнопка обязана выглядеть выключенной */
.buy__btn[disabled]{opacity:.4;cursor:not-allowed}
a.buy__btn{text-decoration:none}
.buy__fav{display:grid;place-items:center;width:56px;height:56px;padding:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--ink);cursor:pointer}
/* Нажатое избранное обязано выглядеть нажатым: сердце заливается */
.buy__fav[aria-pressed=true]{border-color:var(--favorite);color:var(--favorite)}
.buy__fav[aria-pressed=true] svg{fill:var(--favorite)}
.buy__fav:hover{border-color:var(--favorite);color:var(--favorite)}
/* Подпись стоит в одной строке с кнопками и занимает остаток места */
.buy__hint{flex:1 1 220px;margin:0;font-size:13px;color:var(--muted)}
.buy__ship{display:flex;align-items:center;gap:10px;margin-top:20px;padding:14px 18px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:13px;color:var(--muted)}

/* ── Полоса фактов внутри первого экрана ───────────────────────────── */
.supply{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border)}


.supply__i{display:flex;align-items:center;gap:14px;padding:26px 32px;border-right:1px solid var(--border)}

/* Кружок залит, а не обведён: обводка делала иконку блёклой и кривой */
.supply__ic{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;background:var(--porcelain);border-radius:var(--radius-pill);color:var(--burgundy)}
.supply__i:last-child{border-right:0}
.supply__k{display:block;margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.supply__v{display:block;margin:2px 0 0;font-size:19px;font-weight:600;letter-spacing:-.01em}

/* ── Плашка БАД ────────────────────────────────────────────────────── */
.badnote{display:flex;align-items:flex-start;gap:14px;margin-top:20px;padding:20px 24px;background:rgba(229,196,200,.32);border-radius:20px;font-size:14px}
.badnote strong{font-weight:600}
.badnote svg{flex:0 0 auto;width:24px;height:24px;margin-top:2px;color:var(--burgundy)}

/* ── Разделы ───────────────────────────────────────────────────────── */
/* Секции макета: радиус 24 и поле 40 — у первого экрана радиус крупнее */
.sect{margin-top:20px;background:var(--white);border-radius:24px;padding:40px}
.sect--sm{padding:36px}
.sect__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.sect h2{margin:0 0 12px;font-size:clamp(28px,3vw,38px);line-height:1.15;font-weight:600;letter-spacing:-.03em}
/* В малых секциях заголовок мельче, чем в «Составе»: 22–28 против 28–38 */
.sect--sm h2{font-size:clamp(22px,2.1vw,28px);line-height:1.25;letter-spacing:-.02em}
.sect h3{margin:0 0 18px;font-size:clamp(22px,2.1vw,28px);line-height:1.25;font-weight:600;letter-spacing:-.02em}
/* «Все условия →», «Источник сведений» — тот же запас */
.sect__note a{display:inline-flex;align-items:center;min-height:32px}
@media (max-width:767px){.sect__note a{min-height:40px}}
.sect__note{margin:12px 0 20px;font-size:13px;color:var(--muted);text-wrap:pretty}
a.sect__note{display:inline-flex;align-items:center;min-height:44px}
.pdp__lead{max-width:70ch;margin:0 0 32px;font-size:17px;color:var(--muted);text-wrap:pretty}
.pdp__lead p{margin:0 0 12px}
.pdp__lead p:last-child{margin-bottom:0}

/* Состав шире, применение уже — асимметрия артборда */
/* Пропорция макета 649/519 и панель применения по своему содержимому:
   без align-self она растягивалась на высоту списка состава — почти
   две тысячи пикселей пустой бежевой плоскости. */
.pdp__cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px}
/* В макете панель растянута по колонке, поэтому нижняя таблица стоит
   вровень с низом состава, а не висит посередине. */
/* Панель по содержимому, а не растянутая: иначе внутри неё возникают
   пустоты, а слева под составом остаётся четверть блока белого места.
   Собственные отступы заголовков и абзацев внутри снимаем — расстояния
   держит один зазор колонки. */
.pdp__use{display:flex;flex-direction:column;gap:22px;padding:28px;
  background:var(--porcelain);border-radius:20px;align-self:start}
.pdp__use > h3{margin:0}
/* Кегль текста применения — 17 по макету. Раньше стоял 15 прямо
   в разметке, и правила его не перебивали. */
.pdp__use > p{margin:0;font-size:17px;line-height:1.6}
.pdp__use > .empty{margin:0}

/* Полный список ингредиентов — вложенная панель со сворачиванием */
.inci{padding:20px 22px;background:var(--porcelain);border-radius:20px}
/* Кегли из макета: заголовок 14/600, счётчик 13/400 приглушённый */
.inci__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:10px;font-size:14px;font-weight:600}
.inci__head span:last-child{font-size:13px;font-weight:400;color:var(--muted)}
/* Сплошная строка состава, как в макете. Обрезка только по высоте:
   полный текст приходит с сервера и остаётся в разметке, но развернуть
   его без JavaScript нельзя — кнопка не сработает. */
.inci__list{margin:0;font-size:14px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.inci__list[data-clip]{position:relative;max-height:112px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.inci__more[hidden]{display:none}
.inci__more{min-height:40px;margin-top:12px;padding:0 16px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill);font:inherit;font-size:13px;font-weight:600;color:var(--burgundy);cursor:pointer}
.inci__more:hover{border-color:var(--burgundy);color:var(--burgundy)}
.comp[data-clip]{max-height:270px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);
  mask-image:linear-gradient(#000 72%,transparent)}

.comp{list-style:none;margin:0;padding:0}
.comp li{padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.comp li:last-child{border-bottom:0}

.params{margin:0}
.params__r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-top:1px solid var(--border);font-size:14px}
.params__r:first-child{border-top:0}
.params__k{color:var(--muted)}
.params__v{font-weight:600;text-align:right}

.pdp__two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
/* Пустые состояния карточки: бежевая подложка и компактные поля,
   как в макете, а не воздушная пунктирная рамка на пол-экрана. */
.sect .empty{border:0;background:var(--porcelain);border-radius:var(--radius-card);
  padding:22px 24px;text-align:left}
.sect .empty__t{font-size:15px;margin-bottom:6px}
.sect .empty__p{font-size:13px;line-height:1.5;max-width:46ch;margin-inline:0}

/* В макете рамки вокруг блока нет: линия во всю ширину секции сверху
   и тонкие вертикали между колонками. */
/* У доставки поля живут в шапке: линия под ней идёт от края до края */
.sect--ship{padding:0;overflow:hidden}
.sect--ship .sect__h{margin:0;padding:32px 36px 24px}
.ship{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border)}
.ship__c{padding:24px 28px;border-right:1px solid var(--border)}
.ship__c:last-child{border-right:0}


.ship__k{display:block;margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ship__v{display:block;font-size:17px;font-weight:600}
.ship__n{display:block;margin-top:6px;font-size:13px;color:var(--muted)}


/* Список файлов появится, когда ИНМОСТ передаст документы на партию.
   Величины из макета: плашка 16px 18px, радиус 16, иконка 22. */
.docs{display:flex;flex-direction:column;gap:10px}
.docs a{display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--porcelain);border-radius:16px;color:var(--ink)}
.docs a:hover{background:var(--surface-soft)}
.docs svg{flex:0 0 auto;width:22px;height:22px;color:var(--burgundy)}
.docs__t{display:block;font-size:15px;font-weight:600}
.docs__m{display:block;font-size:13px;color:var(--muted)}
.docs__dl{flex:0 0 auto;width:20px;height:20px;color:var(--muted)}

/* ── Похожие товары: три крупные плитки без общей подложки ─────────── */
.alike{margin-top:20px}
.alike .sect__h{margin-bottom:6px}
.alike__lead{margin:8px 0 0;font-size:15px;color:var(--muted)}
.alike h2{margin:0 0 8px;font-size:clamp(28px,3vw,38px);line-height:1.15;font-weight:600;letter-spacing:-.03em}
/* То же в похожих товарах: клик по всей плитке */
.alike .tile{position:relative}
.alike .tile__name a::after{content:'';position:absolute;inset:0;z-index:1}
.alike__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* ═══ Планшет ══════════════════════════════════════════════════════ */
@media (max-width:1199px){
  .pdp__hero{grid-template-columns:minmax(0,1fr) 360px;gap:24px}
  .pdp__cols{grid-template-columns:1.3fr 1fr;gap:32px}
  .sect h2,.alike h2{font-size:30px}
  .sect h3{font-size:22px}
  .ship{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* На двух колонках вертикаль только у левых, горизонталь — со второго ряда */
  .ship__c{padding:20px 24px}
  .ship__c:nth-child(even){border-right:0}
  .ship__c:nth-child(odd){border-right:1px solid var(--border)}
  .ship__c:nth-child(n+3){border-top:1px solid var(--border)}
  .ship__c:nth-child(3){border-left:0}
  .alike__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ═══ Телефон ══════════════════════════════════════════════════════ */
@media (max-width:767px){
  .pdp__wrap{padding:16px;border-radius:var(--radius-surface)}
  /* Поля 40 — величина настольного артборда. На 390 они съедали треть
     ширины: фото ужималось до 246 при экране 390. Своих полей здесь
     не нужно вовсе — белая обёртка .pdp__wrap уже отступает на 16. */
  .pdp__hero{grid-template-columns:minmax(0,1fr);gap:18px;padding:0}
  /* В макете фото занимает всю ширину белой карточки — поля 1 пиксель.
     У обёртки они 16, поэтому галерею выпускаем за них, а текст
     остаётся с полями. Радиус карточки в макете 16, не 24. */
  .pdp__wrap{border-radius:16px}
  .gal{margin:-16px -16px 0}
  .gal__stage{border-radius:16px 16px 0 0}
  .gal__thumbs{padding-inline:16px}
  /* Артикул прижимался вправо рядом с оценкой — в столбце он оказывался
     оторван от строки и висел у края. */
  .pdp__sku{margin-left:0}

  /* Порядок артборда: основное медиа, под ним лента миниатюр.
     На настольной раскладке лента лежит слоем внутри .gal__rail
     (position:absolute; inset:0), и высоту ей задаёт колонка сетки.
     В один столбец задавать стало нечему: рельс схлопывался в ноль,
     а миниатюры выходили полосками в два пикселя — две рамки друг
     на друге. Поэтому на телефоне возвращаем ленту в поток. */
  .gal{grid-template-columns:1fr;gap:12px}
  .gal__stage{order:1;max-width:none;border-radius:16px}
  .gal__rail{order:2;overflow:visible}
  .gal__thumbs{position:static;flex-direction:row;overflow-x:auto;
    padding-bottom:4px}
  .gal__thumb{width:64px;flex:none}   /* 64×80 по пропорции 4:5 */

  .pdp__title{font-size:26px;line-height:1.14;margin-bottom:12px}  /* макет: 26 */
  .money{padding:18px}
  .money__now{font-size:28px}
  .money__now--empty{font-size:22px}
  /* Подпись «Итого …» тянула на себя остаток строки, и сердце сваливалось
     во второй ряд рядом с ней — ряд покупки читался как две разные группы.
     Отдаём подписи всю ширину: количество, кнопка и сердце остаются вместе. */
  .buy__row{gap:8px}
  .buy__hint{flex:1 1 100%;order:2;margin-top:2px}
  /* Кнопка берёт ровно остаток строки: с flex-basis она вырастала на всю
     ширину и выдавливала сердце на следующий ряд */
  /* Селектор удвоен нарочно: выше по файлу кнопка задана как
     .buy__btn.buy__btn, а медиазапрос специфичности не добавляет —
     одинарный селектор проигрывал, и padding 32 не давал ей ужаться */
  .buy__btn.buy__btn{flex:1 1 0;min-width:0;padding:0 10px;white-space:nowrap}
  /* Счётчику хватает 124 px — остаток отдаём кнопке, она главное действие */
  .qty{grid-template-columns:42px 40px 42px;height:52px}
  .qty button{font-size:19px}
  .qty{width:132px;height:52px}
  .qty button{width:34px;height:50px}
  .buy__btn{flex:1 1 auto;min-width:0;min-height:52px;padding:0 12px}
  .buy__fav{width:52px;height:52px;flex:none}

  /* Полоса фактов вынесена к краям карточки, поля и зазор — из макета:
     метка встаёт на 106 от края экрана, как в артборде. */
  .supply{grid-template-columns:1fr;margin:18px -16px 0;padding:6px 24px 0}
  /* На телефоне полоса фактов — строки «метка / значение» с линиями между
     ними; вертикальные разделители десктопной сетки здесь не нужны. */
  /* Как в макете: круг с иконкой слева, метка и значение столбиком
     справа от него. Строкой со space-between значения прыгали по правому
     краю — «31 стик», «Желе-стики» и «31 день» вставали на трёх разных
     позициях; иконку я до этого скрыл зря, в артборде она есть. */
  .supply__i{display:flex;flex-direction:row;align-items:center;gap:22px;
    min-height:0;padding:14px 0;border-right:0;
    border-top:1px solid var(--border)}
  .supply__i:first-child{border-top:0}
  
  .supply__v{font-size:19px;text-align:left}

  /* Поля секций на телефоне из макета: 22 сверху и снизу, 20 по бокам */
  .sect{padding:22px 24px;border-radius:24px}
  .sect h2{font-size:28px}
  .sect--sm h2{font-size:22px}
  .sect h3{font-size:19px}
  .pdp__lead{font-size:17px;margin-bottom:22px}
  .pdp__cols{grid-template-columns:1fr;gap:18px}
  .pdp__use{padding:28px}   /* поля блока из макета: 28, не 18 */
  /* Заголовок и текст блока — по макету: 22 и 17, а не 19 и 15 */
  .pdp__use > h3{font-size:22px}
  .pdp__two{grid-template-columns:1fr;gap:14px}
  /* В узкой колонке значение у правого края отрывалось от своей подписи
     и висело само по себе — прижимаем к тексту слева. */
  .params__v{text-align:left}
  /* Поля секции на телефоне 20 — столько же и вылет линии */
  /* В двух колонках по 155 px «Не рассчитан» и «Выберите город» ломались
     пополам, и блок читался набором обрывков. Строками: ключ слева,
     значение и пояснение справа. */
  .ship{grid-template-columns:minmax(0,1fr);margin:0 -24px;padding:0 24px}
  /* Поля 32/36 от десктопа занимали на 390 треть первого экрана блока.
     Заголовок и ссылка помещаются в строку: 192 + 90 при 345 доступных.
     Переносились они не по ширине, а из-за выравнивания по базовой линии
     при кнопочной высоте ссылки в 44 пикселя. */
  .sect--ship .sect__h{flex-wrap:nowrap;align-items:center;
    padding:20px 24px 12px;gap:12px}
  /* Заголовок не сжимаем, ссылка уступает: иначе «Доставка и оплата»
     ломается пополам при том, что место есть */
  .sect--ship .sect__h h2{flex:0 0 auto;font-size:21px;white-space:nowrap}
  /* .sect__note — это сама ссылка, а не обёртка вокруг неё */
  .sect--ship .sect__note{flex:0 0 auto;white-space:nowrap}
  .ship__c{display:grid;grid-template-columns:minmax(0,86px) minmax(0,1fr);
    align-items:baseline;gap:2px 14px;padding:14px 0;
    border-right:0;border-bottom:1px solid var(--border)}
  /* Правило двух колонок выше задаёт border-right через nth-child, а он
     весит больше простого класса — на телефоне у первой и третьей карточек
     оставались вертикальные линии в пустоту. Гасим тем же весом. */
  .ship__c:nth-child(odd),
  .ship__c:nth-child(even){border-right:0;border-left:0}
  .ship__c:nth-child(n+3){border-top:0}
  .ship__c:last-child{border-bottom:0}
  .ship__k{grid-row:span 2;margin:0}
  .ship__n{grid-column:2;margin-top:2px}
  .alike h2{font-size:28px}

  /* Похожие — горизонтальная лента, плитки 208px, как в артборде.
     Выравнивание по верху оставляло плитки разной высоты, и цена
     с кнопкой скакали от карточки к карточке. Тянем на общую высоту. */
  .alike__grid{display:flex;align-items:stretch;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:6px;
    margin-inline:calc(50% - 50vw);padding-inline:16px}
  .alike__grid > *{flex:0 0 208px;scroll-snap-align:start;border-radius:18px}
  /* Название без резерва третьей строки, но цена снова прижата к низу:
     плитки теперь одной высоты, и без этого цена висела бы у названия. */
  .alike__grid .tile__name{min-height:0}
  .alike__grid .tile__price{margin:auto 0 0;padding-top:6px}
  .alike__grid > * > .tile__body{flex:1 1 auto}

}

@media (max-width:360px){
  .ship__k{font-size:12px}
  .ship__v{font-size:15px}
  .qty{width:112px}
  .qty button{width:28px}
  .buy__fav{width:48px;height:48px}
  .buy__btn{font-size:15px}
}