/* ============================================================
   Каталог: латиница в названии, две формы выпуска, галерея
   ============================================================ */

.lat{ font-weight:500; color:var(--text-2); font-size:.8em; letter-spacing:0; }

/* карточка каталога: кнопки «Ампула» и «Ручка» в один ряд */
.pcard-buy{ display:flex; gap:8px; }
.pcard-buy .btn{ flex:1 1 0; justify-content:center; min-width:0; }

/* страница товара: три фото — общий вид, ампула, ручка */
.pdp-thumbs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.pdp-thumbs button{
  padding:0; aspect-ratio:1; overflow:hidden; cursor:pointer;
  border:2px solid var(--line); border-radius:var(--radius-s); background:var(--surface);
  transition:border-color .2s var(--ease);
}
.pdp-thumbs button:hover{ border-color:var(--line-2); }
.pdp-thumbs button.on{ border-color:var(--brand); }
.pdp-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumbs button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* выбор формы выпуска */
.variants{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin:18px 0 8px; }
.variant{
  display:grid; gap:3px; text-align:left; cursor:pointer; font:inherit; color:var(--text);
  padding:12px 14px; border-radius:var(--radius-s);
  border:1.5px solid var(--line); background:var(--surface);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.variant span{ font-size:12.5px; color:var(--text-2); }
.variant b{ font:800 18px/1.2 var(--head); font-variant-numeric:tabular-nums; }
.variant.on{ border-color:var(--brand); background:var(--brand-soft); }
.variant:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- кнопка «Весь каталог» под хитами ---------- */
.more-row{ display:flex; justify-content:center; margin-top:clamp(22px,4vw,36px); }
.more-row .btn{ max-width:100%; }

/* ---------- «Назад» на странице товара ---------- */
.back-btn{
  display:inline-flex; align-items:center; gap:6px; margin-right:12px; vertical-align:middle;
  padding:7px 13px 7px 10px; border-radius:999px; cursor:pointer; font:600 13px/1 var(--head);
  color:var(--text); background:var(--surface); border:1px solid var(--line);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.back-btn svg{ width:15px; height:15px; transform:scaleX(-1); }
.back-btn:hover{ border-color:var(--line-2); background:var(--surface-2); }
.back-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- быстрый просмотр ---------- */
.qv{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,3vw,30px); align-items:start; }
.qv-photo{
  display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:var(--radius); background:var(--bg-3);
}
.qv-thumbs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.qv-thumbs button{
  padding:0; aspect-ratio:1; overflow:hidden; cursor:pointer;
  border:2px solid var(--line); border-radius:var(--radius-s); background:var(--surface);
}
.qv-thumbs button.on{ border-color:var(--brand); }
.qv-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.qv-info{ display:grid; gap:12px; align-content:start; min-width:0; padding-right:34px; }
.qv-info h3{ font-size:clamp(20px,2.4vw,26px); line-height:1.2; }
.qv-price{ display:grid; gap:2px; }
.qv-price .price{ font-size:clamp(22px,2.6vw,28px); }
.qv-price .dim{ font-size:12.5px; }
.qv-buy{ display:grid; gap:8px; }
.qv-buy .btn{ width:100%; justify-content:center; }
.qv-info > .btn-o{ justify-content:center; }
@media (max-width:720px){
  .qv{ grid-template-columns:minmax(0,1fr); }
  .qv-photo{ max-height:46vh; max-height:46dvh; object-fit:contain; }
  .qv-info{ padding-right:0; }
}

/* ---------- мобильные устройства ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a, button, .btn, .chip{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
img{ max-width:100%; }
@supports (height:100dvh){ .modal{ max-height:88dvh; } }

/* iPhone увеличивает страницу при фокусе на поле со шрифтом меньше 16 px */
@media (max-width:640px){
  input, select, textarea, .sel, .inp{ font-size:16px !important; }
  .modal{ max-height:calc(100vh - 24px); }
  @supports (height:100dvh){ .modal{ max-height:calc(100dvh - 24px); } }
  .overlay{ padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}

/* узкие телефоны: в карточке две кнопки друг под другом, цена помещается в строку */
@media (max-width:480px){
  .pcard-buy{ flex-direction:column; gap:6px; }
  .pcard-buy .btn{ flex:none; width:100%; padding-inline:8px; }
  .pcard .price{ font-size:16px; white-space:nowrap; }
  .pcard .price-per{ font-size:11px; }
  .pcard-title h3 .lat{ display:block; margin-top:2px; }
  .variants{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .variant{ padding:10px 11px; }
  .variant b{ font-size:16px; }
  .back-btn{ margin:0 0 10px; }
}
@media (max-width:360px){
  .pcard .price{ font-size:14.5px; }
}

/* сенсорные экраны: наведение «залипает» после касания — эффекты отключаем */
@media (hover:none){
  .pcard:hover .pcard-media img.art{ transform:none; filter:none; }
  .pcard:hover{ transform:none; }
}

/* фильтр «форма» убран — сортировка на телефоне занимает всю строку */
@media (max-width:640px){ .cat-tools .sel{ grid-column:1/-1; } }

/* плашка категории в быстром просмотре — по ширине текста */
.qv-info .eyebrow{ justify-self:start; }

/* ---------- описание товара ---------- */
.desc{ display:grid; gap:12px; color:var(--text-2); font-size:15px; line-height:1.7; max-width:72ch; }
.desc-lead{ color:var(--text); }
.desc h3{ font:700 17px/1.3 var(--head); color:var(--text); margin-top:10px; }
.desc ul, .desc ol{ margin:0; padding-left:20px; display:grid; gap:6px; }
.desc li::marker{ color:var(--brand); }
.desc-note{ font-size:13px; color:var(--text-3); }
.desc details{ border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); padding:12px 14px; }
.desc details + details{ margin-top:-4px; }
.desc summary{ cursor:pointer; font-weight:600; color:var(--text); list-style-position:inside; }
.desc details p{ margin-top:8px; }
/* Таблица сравнения на странице подборки: на телефоне листается вбок внутри своей рамки */
.cmp{ width:100%; min-width:560px; border-collapse:collapse; font-size:14px; line-height:1.5; }
.cmp th, .cmp td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); }
.cmp thead th{ font:700 14px/1.3 var(--head); color:var(--text); background:var(--surface); }
.cmp tbody th{ font-weight:600; color:var(--text); width:22%; }
/* Узкий экран: строка таблицы — карточка «признак → значение для каждого вещества», без листания вбок */
@media (max-width:640px){
  .cmp{ min-width:0; }
  .cmp thead{ display:none; }
  .cmp tr{ display:block; padding:10px 0; border-bottom:1px solid var(--line); }
  .cmp th, .cmp td{ display:block; padding:3px 0; border:0; width:auto; }
  .cmp tbody th{ width:auto; margin-bottom:4px; }
  .cmp td::before{ content:attr(data-label); display:block; font-size:12.5px; font-weight:600; color:var(--text-3); }
}
.desc-refs{ font-size:13px; color:var(--text-3); overflow-wrap:anywhere; }
.desc ul{ list-style:disc; }
.desc ol{ list-style:decimal; }

/* ---------- статьи (/stati) ---------- */
.art{ max-width:74ch; font-size:16px; }
.art h1{ font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.15; color:var(--text); margin-bottom:2px; }
.art h2{ font:700 clamp(1.2rem,2.2vw,1.45rem)/1.3 var(--head); color:var(--text); margin-top:18px; }
.art .desc-lead{ font-size:1.08em; }
.art-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:clamp(12px,1.8vw,20px); margin-bottom:26px; }
.art-card{
  display:flex; flex-direction:column; gap:10px; padding:20px 22px; text-decoration:none; color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.art-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.art-card:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.art-card h3{ font:700 17px/1.3 var(--head); }
.art-card p{
  color:var(--text-2); font-size:14px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.art-more{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font:600 13.5px/1 var(--head); color:var(--brand); }
.art-more svg{ width:15px; height:15px; }
@media (hover:none){ .art-card:hover{ transform:none; } }