/* LOOLA — стили страницы товара.
   Источник: theme/demo/product-page.html, прототип §19, LOOLA Design Code.
   Правки вносить в прототип и переносить сюда, а не наоборот. */


/* ============================================================
   ТОКЕНИ — LOOLA-DESIGN-CODE.md v2.7 §2, без змін
   ============================================================ */
:root{
  --ink:#1A1A1A; --body:#2D2D2D; --soft:#555555; --muted:#767676;
  --canvas:#FFFFFF; --surface:#FFFFFF; --wash:#F6F6F6;
  --line:#E5E5E5; --line-strong:#949494; --on-dark:#FFFFFF;
  --scrim:rgba(26,26,26,.55);
  --accent:#1A1A1A; --accent-hover:#3D3D3D; --accent-pressed:#000000; --on-accent:#FFFFFF;
  --price-sale:#BE1128; --danger:#BE1128;
  --note:#3B4C8F;      /* колір нотаток прототипу, не інтерфейс */
  --st-quiet:#FFFFFF;  --on-st-quiet:#1A1A1A;
  --st-urgent:#1A1A1A; --on-st-urgent:#FFFFFF;
  --st-sale:#BE1128;   --on-st:#FFFFFF;   /* у резерві */
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --hairline:1px; --focus-ring:2px; --icon-stroke:1.5;
  --r-xs:0px; --r-sm:2px; --r-md:4px; --r-pill:999px;
  --elevation:0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.10);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --container:1440px; --gutter:24px; --pad-page:20px;
  --hd-h:64px;
  --ease:cubic-bezier(0.22,0.61,0.36,1); --ease-soft:ease-in-out; --ease-out:cubic-bezier(0,0,0.2,1);
  --t-fast:200ms; --t-media:200ms; --t-color:300ms; --t-panel:325ms; --t-reveal:400ms; --t-hover:500ms;
}
@media (min-width:768px){ :root{ --pad-page:48px } }
@media (min-width:1024px){ :root{ --pad-page:80px } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-padding-top:calc(var(--hd-h) + var(--s-4)) }
body{ margin:0; background:var(--canvas); color:var(--body);
  font-family:var(--font-body); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden }
body.locked{ overflow:hidden }
h1,h2,h3{ margin:0; font-weight:400; color:var(--ink) }
p,dl,dd,figure{ margin:0 } img{ max-width:100%; display:block }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:var(--ink); text-decoration:none; transition:color var(--t-color) var(--ease-soft) }
:focus-visible{ outline:var(--focus-ring) solid var(--ink); outline-offset:2px }

/* ── Типографіка §5 ───────────────────────────────────────── */
.t-display-l{ font-family:var(--font-display); font-weight:300; font-size:clamp(26px,4.4vw,40px);
  line-height:1.2; letter-spacing:.08em; text-transform:uppercase }
.t-h2{ font-family:var(--font-display); font-weight:500; font-size:16px; line-height:1.5;
  letter-spacing:.16em; text-transform:uppercase }
.t-body-l{ font-size:17px; line-height:1.7 }
.t-caption{ font-size:13px; line-height:1.45; color:var(--muted) }
.t-label{ font-family:var(--font-display); font-weight:500; font-size:11px; line-height:1.5;
  letter-spacing:.18em; text-transform:uppercase }

/* ── Кнопки §7 ────────────────────────────────────────────── */
.btn{ --btn-h:44px; --btn-px:28px; --btn-fs:12px; --btn-ls:.16em;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--btn-h); padding:0 var(--btn-px);
  font-family:var(--font-display); font-weight:500; font-size:var(--btn-fs);
  letter-spacing:var(--btn-ls); text-transform:uppercase;
  border-radius:var(--r-sm); border:var(--hairline) solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft) }
.btn-lg{ --btn-h:54px; --btn-px:36px; --btn-fs:13px }
.btn-block{ display:flex; width:100% }
.btn-buy{ background:var(--accent); color:var(--on-accent) }
.btn-buy:hover{ background:var(--accent-hover) }
.btn-buy:active{ transition:none; background:var(--accent-pressed) }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn-secondary:hover{ background:var(--ink); color:var(--canvas) }

/* ── Стікери §8 ───────────────────────────────────────────── */
.sticker{ display:inline-flex; align-items:center; padding:4px 8px;
  font-family:var(--font-display); font-weight:500; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; border-radius:var(--r-xs); white-space:nowrap }
.st-quiet { background:var(--st-quiet);  color:var(--on-st-quiet) }
.st-urgent{ background:var(--st-urgent); color:var(--on-st-urgent) }

/* ============================================================
   ПАМ'ЯТКА ПРОТОТИПУ — на сайті цього блоку немає
   ============================================================ */


/* §11 · текучий контейнер до 1440 з полями сторінки, а не 1200 з полями всередині */
.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--pad-page) }
/* §19 · хлібних крихт над галереєю немає: єдиний потрібний крок — угору
   до категорії — стоїть першим рядком панелі. Розбір і відкинуті
   варіанти: demo/breadcrumbs.html */

/* ============================================================
   §19 · СІТКА СТОРІНКИ ТОВАРУ — галерея 7 / панель 5
   ============================================================ */
.pdp{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-7); align-items:start;
  padding-top:var(--s-6) }

/* ── Галерея ──────────────────────────────────────────────── */
.gallery{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--s-4) }
.thumbs{ display:flex; flex-direction:column; gap:var(--s-2) }
.thumb{ width:64px; aspect-ratio:2/3; padding:0; border:0; background:var(--wash);
  cursor:pointer; overflow:hidden; border-radius:var(--r-xs);
  box-shadow:inset 0 0 0 var(--hairline) transparent;
  transition:box-shadow var(--t-fast) var(--ease) }
.thumb img{ width:100%; height:100%; object-fit:cover }
/* кольцо активного кадра — --line-strong: чёрное на світлих знімках
   читається як рамка навколо фото. Рішення власника 24.08.2026 */
.thumb[aria-current="true"]{ box-shadow:inset 0 0 0 var(--hairline) var(--line-strong) }
.thumb-ph{ display:grid; place-items:center; border:1px dashed var(--line-strong) }
.thumb-ph span{ font-family:var(--font-display); font-weight:500; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); line-height:1.5 }
/* ── Сцена: стрічка кадрів ────────────────────────────────────
   Усі кадри лежать поруч, видно один. На телефоні стрічку гортають
   пальцем — саме цього чекають від фото в картці, і точки нарешті
   показують, де ти. На десктопі стрічку зсуває скрипт, коли
   натискають мініатюру, а прокрутка пальцем там нікому не потрібна. */
.stage{ position:relative; display:flex; aspect-ratio:2/3; overflow:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  background:var(--wash); border-radius:var(--r-xs); cursor:zoom-in }
.stage::-webkit-scrollbar{ display:none }
/* Товар без фото: збільшувати там нічого, курсор не обіцяє зайвого */
.stage-empty{ cursor:default }

/* ── Стрілки на кадрі ─────────────────────────────────────────
   Тільки на телефоні: на десктопі кадри перемикають мініатюри,
   і стрілка поверх фото була б третім способом зробити те саме.

   Значок темний, не білий, як у перегляді: там він лежить на
   затемненні, а тут — прямо на кадрі, і краї кадру в нас світлі.
   Світлий ореол тримає його, коли товар чорний.                */
.stage-wrap{ position:relative }
.stage-nav{ display:none; position:absolute; z-index:2; top:50%;
  transform:translateY(-50%); width:44px; height:44px; padding:0;
  place-items:center; color:var(--ink); background:none; border:0;
  cursor:pointer; opacity:.8; transition:opacity var(--t-color) var(--ease-soft) }
.stage-nav svg{ filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) }
.stage-nav:hover{ opacity:1 }
.stage-nav[disabled]{ opacity:.25; cursor:default }
.stage-nav.prev{ left:0 }
.stage-nav.next{ right:0 }
/* display у класі перебиває браузерне [hidden] — повертаємо */
.dots[hidden]{ display:none }
/* ── Кадр проявляється з розмитої мініатюри ───────────────────
   Під кожним кадром лежить його ж мініатюра 200×300 — 6,5 КБ,
   і вона вже нарізана в бібліотеці (розмір medium). Розтягнута
   й розмита, вона з'являється миттєво: людина бачить той самий
   кадр, тільки нерізкий, а не порожнє поле. Коли великий файл
   декодовано, він проявляється поверх.

   Прийом lululemon. Своя прозорість кадру без цієї підкладки
   проблему не вирішувала: при стрибку через кілька кадрів той,
   що йде, зникає одразу, а новий ще не намальований — і між
   ними видно --wash. Заміряно до правки: 853 мс сірого поля.

   Підкладку не ховаємо після прояву: кадр непрозорий і накриває
   її цілком, а лишається вона для наступного прояву. */
.stage > .shot{ position:relative; flex:0 0 100%; width:100%; height:100%;
  overflow:hidden; scroll-snap-align:start }
.stage > .shot::before{ content:''; position:absolute; inset:0;
  background:var(--ph) center/cover no-repeat;
  /* Масштаб — щоб розмиття не лізло світлою каймою по краях кадру */
  filter:blur(12px); transform:scale(1.08) }
.stage > .shot > img{ position:relative; width:100%; height:100%; object-fit:cover }

/* Клас ставить скрипт: без нього кадри лишилися б прозорими
   назавжди. Ті, що вже намальовані на момент запуску скрипта,
   отримують is-on у тому ж такті — інакше вони блимнули б. */
.stage.is-fade > .shot > img{ opacity:0; transition:opacity var(--t-media) var(--ease-out) }
.stage.is-fade > .shot > img.is-on{ opacity:1 }

/* ── Перегляд фото ────────────────────────────────────────────
   Лічильник, хрестик, стрілки — і все. Людина відкрила його, щоб
   дивитись тканину, а не інтерфейс: решта тільки заважала б.

   Курсор не малюємо своїм значком — zoom-in і zoom-out у браузера
   вже саме та лупа з плюсом і мінусом, якої тут чекають.          */
.viewer[hidden]{ display:none }
/* Заливка суцільна, не затемнення. Прийом Alo.

   Напівпрозорий --scrim здавався правильним — крізь нього видно,
   що сторінка на місці. Але при перемиканні кадрів крізь нього
   проступала й сама сторінка, і на телефоні, де кадр на всю
   ширину, це читалося як стрибки картинок одна по одній. Суцільна
   заливка вбиває цей клас дефектів цілком: під кадром завжди
   рівне біле поле, і рухається тільки кадр.

   Ціна — значки. На затемненні вони були білі, тут стають
   темними, а тримає їх над світлим фото той самий ореол, що
   на стрілках картки. */
.viewer{ position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; padding:var(--s-5) var(--s-8);
  background:var(--canvas); overscroll-behavior:contain }

/* Рамка тримає розмір сама, а не бере його від картинки.

   Раніше розмір давала саме картинка: width:auto, height:auto і два
   максимуми. Через це холодний кадр не мав розміру взагалі, рамка
   схлопувалась у нуль — і розмиту підкладку туди було не покласти.
   Саме тому прояв із мініатюри спершу зробили тільки в сцені.

   Тепер рамка сама 2:3 — усі кадри знімають у 1200×1800, — а ширину
   бере меншу з двох: скільки дає екран і скільки дозволяє висота при
   цій пропорції. Розмір є завжди, ще до першого байта файлу.

   dvh, а не vh: на телефоні vh рахується від висоти без панелей
   браузера, і низ кадру ховався б за адресним рядком. */
.viewer-frame{ position:relative; aspect-ratio:2/3;
  width:min(100%, calc((100vh - var(--s-5) * 2) * 2 / 3));
  overflow:hidden; cursor:zoom-in; touch-action:pan-y }
@supports (height:100dvh){
  .viewer-frame{ width:min(100%, calc((100dvh - var(--s-5) * 2) * 2 / 3)) }
}

/* Та сама розмита мініатюра, що під кадром у сцені: скрипт кладе
   в --ph той самий файл 200×300, який уже лежить у .shot. */
.viewer-frame::before{ content:''; position:absolute; inset:0;
  background:var(--ph) center/cover no-repeat;
  filter:blur(12px); transform:scale(1.04) }

/* contain, не cover: у перегляді нічого різати не можна. Кадри 2:3,
   тому в звичайному випадку різниці немає — вона з'явиться, якщо
   колись завантажать фото іншої пропорції. */
.viewer-frame img{ position:relative; display:block;
  width:100%; height:100%; object-fit:contain;
  transform-origin:0 0;
  transition:transform var(--t-panel) var(--ease), opacity var(--t-media) var(--ease-out) }
.viewer-frame img{ opacity:0 }
.viewer-frame img.is-on{ opacity:1 }
.viewer-frame.is-zoom{ cursor:zoom-out }
.viewer-frame.is-zoom img{ cursor:grab }
.viewer-frame.is-drag img{ cursor:grabbing; transition:none }

/* ── Щоб кадр тягався, а не тягнувся ──────────────────────────
   Дві різні поломки з одним наслідком: людина тягне збільшений
   кадр, і перетягування зривається.

   На десктопі картинку можна тягати як файл — це вбудоване
   поведінка <img>. Замість панорами браузер піднімав привид
   файлу й чекав, куди його кинуть.

   На телефоні винен був touch-action:pan-y на рамці. Поки кадр
   не збільшено, він потрібен: вертикальний скрол сторінки
   лишається браузеру, горизонтальний свайп — наш. Але коли кадр
   збільшено, тягнути треба в обидва боки, а браузер за цим
   правилом забирав вертикаль собі — і жест обривався на
   pointercancel. Під збільшенням віддаємо весь жест нам. */
.stage img,
.viewer-frame img{ -webkit-user-drag:none; user-select:none }
.viewer-frame.is-zoom{ touch-action:none }

/* z-index обов'язковий. Кадр лежить у розмітці після кнопок і теж
   позиційований — тому малюється поверх них. На десктопі це не видно:
   фото вужче за екран, стрілки стоять збоку від нього. На телефоні
   воно на всю ширину й закривало кнопки цілком. */
.viewer-count{ position:absolute; z-index:2; top:var(--s-5); left:var(--s-5);
  font-size:13px; line-height:1; color:var(--soft);
  font-variant-numeric:tabular-nums; opacity:.9 }
.viewer-x,.viewer-nav{ position:absolute; z-index:2; width:44px; height:44px; padding:0;
  display:grid; place-items:center; color:var(--ink);
  background:none; border:0; cursor:pointer; opacity:.75;
  transition:opacity var(--t-color) var(--ease-soft) }
/* Ореол, а не тінь: значки тепер темні на білому полі, але на
   телефоні стрілки лежать на самому кадрі, а він буває темним.
   Той самий прийом, що на стрілках картки. */
.viewer-x svg,.viewer-nav svg{ filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) }
.viewer-x:hover,.viewer-nav:hover{ opacity:1 }
.viewer-x:focus-visible,.viewer-nav:focus-visible{ opacity:1; outline:2px solid var(--on-dark); outline-offset:2px }
.viewer-x{ top:var(--s-4); right:var(--s-4) }
.viewer-nav{ top:50%; transform:translateY(-50%) }
.viewer-nav.prev{ left:var(--s-3) }
.viewer-nav.next{ right:var(--s-3) }
.viewer-nav[disabled]{ opacity:.2; cursor:default }

@media (max-width:739px){
  /* Кадр 2:3 на вузькому екрані впирається в ширину, не у висоту:
     поля з боків прямо забирають у нього розмір, тому їх мінімум.

     Стрілки лишаються й тут — вони підказують, що кадр не один, ще
     до того, як людина спробує свайп. Місця поруч із кадром уже
     немає, тому вони лягають на самий його край; від світлого фото
     їх тримає тінь на значку. */
  /* З боків нуля: кадр 2:3 на вузькому екрані впирається саме в ширину,
     і кожен піксель поля забирає в нього розмір. Стрілки лягають на
     край кадру — інакше на 375px їх нікуди подіти; від світлого фото
     їх тримає тінь на значку. */
  .viewer{ padding:var(--s-5) 0 }
  .viewer-nav.prev{ left:0 }
  .viewer-nav.next{ right:0 }
}
@media (prefers-reduced-motion:reduce){
  .viewer-frame img{ transition:none }
  /* Прояв теж вимикаємо, але кадр лишається видимим: прозорість
     без переходу означала б порожню сцену назавжди. */
  .stage.is-fade > .shot > img{ transition:none }
}
.stage-stickers{ position:absolute; top:var(--s-3); left:var(--s-3); display:flex; flex-direction:column; gap:var(--s-1); z-index:2 }
.dots{ display:none; justify-content:center; gap:var(--s-2); padding-top:var(--s-3) }
.dot{ width:6px; height:6px; border-radius:var(--r-pill); background:var(--line-strong); border:0; padding:0 }
.dot[aria-current="true"]{ background:var(--ink) }

/* ── Панель покупки ───────────────────────────────────────── */
.panel{ position:sticky; top:calc(var(--hd-h) + var(--s-5)) }
.panel-in{ max-width:480px }

/* §19 · перший рядок панелі. Він і називає категорію, і веде до неї —
   тому окремого надзаголовка більше немає. Стрілка читається як дія,
   а не як підпис; область натискання добирається до 44px псевдоелементом */
.pdp-cat{ color:var(--muted); margin-bottom:var(--s-3) }
/* вирівнювання по базовій, а не по центру коробок: інакше стрілка
   сідає на 1.25px нижче підпису */
.pdp-cat a{ position:relative; display:inline-flex; align-items:baseline; gap:var(--s-2); color:var(--muted) }
.pdp-cat a::after{ content:''; position:absolute; inset:50% 0 auto; transform:translateY(-50%); height:44px }
.pdp-cat a:hover{ color:var(--ink) }
/* стрілка більша за підпис: в 11px вона читається як крапка */
.pdp-cat .arw{ font-size:15px; line-height:1; letter-spacing:normal }
/* Назва важить більше за ціну — обґрунтування в §19.
   Два рівні: коротка назва з поля «Назва», розшифровка —
   з поля «Розширена назва» (платформа кладе її в h1 span). */
.pdp-title{ font-family:var(--font-display); font-weight:500;
  font-size:clamp(26px,2.2vw,30px); line-height:1.25; letter-spacing:.01em;
  text-transform:none; color:var(--ink); text-wrap:balance }
.pdp-title .name-details{ display:block; margin-top:var(--s-3);
  font-family:var(--font-body); font-weight:400; font-size:15px; line-height:1.6;
  letter-spacing:normal; color:var(--soft); text-wrap:pretty }

/* Звичайна ціна — спокійний факт: Inter 500, 17px, і ніколи
   не сама на рядку. Вагу й колір отримує лише знижка (§4).  */
.pdp-price{ font-weight:500; font-size:17px; color:var(--ink);
  font-variant-numeric:tabular-nums }
.pdp-price.is-sale{ font-weight:600; color:var(--price-sale) }
/* .was лишалося з прототипу — WooCommerce друкує <del>/<ins>.
   Перекреслену ціну малює база (header-footer.css). */

/* Ряд свотчів і посилання на сітку — один рядок:
   свотчі ліворуч, посилання відкинуте до правого краю.
   Самотнє посилання під свотчами ні до чого не кріпилося. */
.size-row{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3) var(--s-4); flex-wrap:wrap }

/* Рядок посадки — замість підпису зросту моделі. Підпису «Посадка:»
   в ньому немає: тексти власника від 19.09.2026 — самостійні речення,
   і після підпису виходило «Посадка: Висока посадка…». Саме слово
   нікуди не поділося — воно лишилось рядком у характеристиках. */
.fit{ margin-top:var(--s-6); padding-left:var(--s-4); border-left:var(--hairline) solid var(--line);
  font-size:14px; line-height:1.6; color:var(--body) }

.size-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4);
  margin:var(--s-5) 0 var(--s-3) }
.size-head .t-label{ color:var(--soft) }
/* посилання тихіше за лейбл: Inter 13, не капслок */
.size-guide{ background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-body); font-weight:400; font-size:13px; color:var(--soft);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }
.size-guide:hover{ color:var(--ink) }

.sizes{ display:flex; flex-wrap:wrap; gap:var(--s-2) }
.size{ min-width:48px; height:44px; padding:0 var(--s-3);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:500; font-size:14px; color:var(--ink);
  background:var(--surface); border:var(--hairline) solid var(--line-strong);
  border-radius:var(--r-sm); cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) }
.size:hover{ border-color:var(--ink) }
.size[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.size:disabled{ cursor:not-allowed; color:var(--muted); border-color:var(--line);
  position:relative; overflow:hidden }
.size:disabled::after{ content:''; position:absolute; inset:0; opacity:.55;
  background:linear-gradient(to top right,transparent calc(50% - .5px),
    currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px)) }

/* Лічильника кількості немає: одяг беруть по одній позиції, а кількість
   правиться в кошику. Так само в Alo, lululemon і Gymshark.
   Рішення власника 25.08.2026 — виконано настройкою Products #002. */
.buy-row{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-5) }
/* Вішлист — рамкований квадрат заввишки з кнопкою покупки.
   Гола іконка поруч із заливкою 54px читалася як помилка.   */
.wish{ width:54px; height:54px; flex:0 0 54px; display:grid; place-items:center;
  background:transparent; cursor:pointer; color:var(--ink);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease) }
.wish:hover{ border-color:var(--ink) }
.wish[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.wish[aria-pressed="true"] svg{ fill:var(--ink) }
.buy-cta{ flex:1 1 auto; min-width:0 }
.buy-cta .btn{ width:100% }

/* Своя знижка покупця — тихий рядок під кнопкою. Ціну в картці вона
   не чіпає: у каталозі й у розмітці для пошуку ціна публічна
   (inc/discounts.php). Тому й колір тут звичайний: червоне на сторінці
   означає акційну ціну, і два червоних числа сперечалися б. */
.buy-club{ margin-top:var(--s-3); font-size:13px; line-height:1.5; color:var(--muted) }

.trust{ margin-top:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3) }
.trust li{ display:flex; align-items:center; gap:var(--s-3); font-size:14px; color:var(--body) }
.trust svg{ flex:0 0 20px; color:var(--soft) }

.specs{ margin-top:var(--s-6); border-top:var(--hairline) solid var(--line) }
.specs .row{ display:grid; grid-template-columns:40% 1fr; align-items:center;
  min-height:40px; border-bottom:var(--hairline) solid var(--line) }
.specs .row:last-child{ border-bottom:0 }   /* прибирає подвійну лінію перед акордеоном */
.specs dt{ color:var(--muted) }
.specs dd{ font-size:14px; color:var(--body) }

/* ── Акордеон вкладок ─────────────────────────────────────── */
.acc{ margin-top:var(--s-6) }
.acc-h{ width:100%; min-height:56px; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding:var(--s-4) 0; background:none; cursor:pointer; text-align:left;
  border:0; border-top:var(--hairline) solid var(--line);
  font-family:var(--font-display); font-weight:500; font-size:16px; line-height:1.5;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink) }
.acc-h .sign{ flex:0 0 auto; font-family:var(--font-body); font-weight:400; font-size:20px;
  color:var(--ink); line-height:1 }
.acc-h[aria-expanded="true"] .sign::before{ content:'\2212' }
.acc-h[aria-expanded="false"] .sign::before{ content:'+' }
.acc-c{ padding:0 0 var(--s-5) }
.acc-c[hidden]{ display:none }
.acc-c p + p{ margin-top:var(--s-4) }
.acc-c .t-body-l{ color:var(--body) }
.acc-c h3{ font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--soft); margin:var(--s-5) 0 var(--s-3) }
.acc-c h3:first-child{ margin-top:0 }
/* ── Догляд зі значками ───────────────────────────────────────
   Міжнародні символи (GINETEX) стоять окремою колонкою зліва.
   Рядок без стандартного символу лишає колонку порожньою — так
   текст усіх рядків тримається однієї вертикалі.              */
.care{ display:grid; gap:var(--s-3) }
.care li{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--s-3);
  align-items:start; font-size:15px; line-height:1.6; color:var(--soft) }
.care-ico{ flex:0 0 24px; width:24px; height:24px; display:block; color:var(--muted) }

/* Рядок під правилами — на повну сторінку догляду. Тихий: на картці це
   виноска, а не заклик, правила вище вже все сказали. */
.care-more,.deliv-more{ margin-top:var(--s-4); font-size:14px; color:var(--soft) }
.care-more a,.deliv-more a{ color:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-strong);
  transition:text-decoration-color var(--t-color) var(--ease-soft) }
.care-more a:hover,.deliv-more a:hover{ color:var(--ink); text-decoration-color:var(--ink) }

.bullets li{ position:relative; padding-left:var(--s-4); font-size:15px; line-height:1.6 }
.bullets li + li{ margin-top:var(--s-2) }
.bullets li::before{ content:''; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--line-strong) }
.spec-table{ width:100%; border-collapse:collapse }
.spec-table th,.spec-table td{ text-align:left; font-weight:400; vertical-align:top;
  padding:var(--s-3) 0; border-bottom:var(--hairline) solid var(--line); font-size:14px }
.spec-table th{ width:45%; color:var(--muted); font-family:var(--font-display); font-weight:500;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding-top:var(--s-4) }
.spec-table td{ color:var(--body) }
/* Останній рядок не підкреслюємо: одразу під ним верхня лінія
   заголовка наступної вкладки — виходили дві лінії підряд.
   Те саме правило, що й у .specs вище.                        */
.spec-table tr:last-child th,
.spec-table tr:last-child td{ border-bottom:0 }

/* ============================================================
   ВІДЖЕТ ТОВАРУ — секції нижче, однакові для всіх товарів
   ============================================================ */
.section{ margin-top:var(--s-9) }
/* Остання секція сторінки впритул до підвала читається як обрив:
   картка товару зливається з інверсією підвала. Повітря стільки ж,
   скільки під сіткою каталогу.                                     */
.section:last-child{ margin-bottom:var(--s-8) }
.section-h{ margin-bottom:var(--s-6) }
.section-lead{ max-width:56ch; margin-bottom:var(--s-7); color:var(--soft) }

/* ── Заглушка під ненятий кадр ────────────────────────────
   Рамка тримає точний формат майбутнього фото й описує,
   що на ньому має бути. На сайті цього класу не буде.      */
.ph{ display:flex; align-items:center; justify-content:center; text-align:center;
  padding:var(--s-5); background:var(--wash);
  border:1px dashed var(--line-strong); border-radius:var(--r-xs) }
.ph > span{ max-width:36ch; font-size:13px; line-height:1.55; color:var(--muted) }
.ph b{ display:block; margin-bottom:var(--s-2); font-family:var(--font-display); font-weight:500;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.ph i{ display:block; margin-top:var(--s-2); font-style:normal;
  font-size:11px; letter-spacing:.06em; color:var(--line-strong) }

/* ── Рівень підтримки: шкала з трьох чипів ────────────────
   Активний стан — рамка, не заливка (§19, правило 1).      */
.support-scale{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-1) }
.support-scale li{ min-height:44px; display:flex; align-items:center; justify-content:center;
  padding:var(--s-2) var(--s-1); text-align:center;
  font-family:var(--font-display); font-weight:500; font-size:10px; letter-spacing:.1em;
  line-height:1.35; text-transform:uppercase; color:var(--muted);
  border:var(--hairline) solid var(--line); border-radius:var(--r-sm) }
.support-scale li.is-on{ color:var(--ink); border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }

/* варіант 1 — у правій колонці */
.support{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:var(--hairline) solid var(--line) }
.support-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-3); margin-bottom:var(--s-3) }
.support-head .t-label{ color:var(--soft) }
.support-now{ font-size:14px; color:var(--ink) }
.support p{ margin-top:var(--s-3) }

/* варіант 2 — секцією внизу, з мапою всієї лінійки

   Поточний ступінь позначено рамкою і підписом «цей товар»
   (рішення власника 19.09.2026, theme/demo/support-levels.html,
   раунд 2). До того була тільки темна лінія зверху: на широкому
   екрані вона читалася в порівнянні з трьома сусідніми, а на
   телефоні, де стовпець один, ставала просто роздільником.

   Рамка — та сама мова, що в чипах шкали вище (.support-scale),
   тож обидві шкали сторінки позначають «ось цей» однаково.

   Поля однакові в усіх ступенів, рамка в неактивних прозора —
   тому текст не зсувається. Від’ємне поле всієї мапи повертає
   перший стовпець на сітку сторінки. */
.support-map{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-6);
  margin:0 calc(var(--s-4) * -1) }
.support-map .step{ padding:var(--s-4); border:var(--hairline) solid transparent;
  border-top-color:var(--line); border-radius:var(--r-sm) }
.support-map .step.is-on{ border-color:var(--ink) }
/* Підпис порожній у неактивних: тримає назви на одній лінії */
.support-map .step-mark{ display:block; min-height:1.4em; margin-bottom:var(--s-2);
  font-family:var(--font-display); font-weight:500; font-size:10px; line-height:1.4;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink) }
.support-map .lvl{ font-family:var(--font-display); font-weight:300;
  font-size:clamp(20px,2.2vw,26px); letter-spacing:.04em; color:var(--muted); display:block }
.support-map .step.is-on .lvl{ color:var(--ink) }
.support-map .who{ margin-top:var(--s-3); font-size:15px; color:var(--body) }

/* Для чого річ годиться — під шкалою, не в ній. Хайрлайн відділяє
   висновок від міри: вище — компресія, нижче — сам товар. */
.support-note{ margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:var(--hairline) solid var(--line); max-width:64ch; color:var(--body) }

/* ── Анатомія: липкий кадр + нумеровані виноски ───────────── */
/* Кадр 3:4 — як його генерують, без обрізки (28.09.2026). Колонка
   4/12: на 1440 кадр 406×541, заввишки зі списком у 4–5 пунктів
   (406–532), а не вдвічі вищий за нього, як було в 5/12 і 2:3.
   height:auto обов'язковий: WordPress ставить у <img> атрибут
   height="2400", і без нього aspect-ratio не діє — кадр розтягувало
   на всі 2400 px і на комп'ютері, і на телефоні. */
.anatomy{ display:grid; grid-template-columns:minmax(320px,4fr) minmax(0,8fr); gap:var(--s-7); align-items:start }
.anatomy-media{ position:sticky; top:calc(var(--hd-h) + var(--s-5)) }
.anatomy-media img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; background:var(--wash) }
.anatomy-media .ph{ aspect-ratio:3/4 }
.anatomy-list{ counter-reset:anat }
.anatomy-list li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-5);
  padding:var(--s-5) 0; border-bottom:var(--hairline) solid var(--line) }
.anatomy-list li:first-child{ padding-top:0 }
.anatomy-list li:last-child{ border-bottom:0 }
.anatomy-list li::before{ counter-increment:anat;
  content:counter(anat,decimal-leading-zero);
  font-family:var(--font-display); font-weight:300; font-size:20px;
  line-height:1.35; color:var(--line-strong) }
.anatomy-list h3{ font-family:var(--font-display); font-weight:500; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--s-2) }
.anatomy-list p{ font-size:15px; line-height:1.6; color:var(--soft); max-width:52ch }

/* ── Тканина: одна широка смуга + цифри ───────────────────── */
/* height:auto — з тієї ж причини, що в анатомії: атрибут height у <img> */
.fabric-band img{ display:block; width:100%; height:auto; aspect-ratio:16/7; object-fit:cover;
  background:var(--wash); border-radius:var(--r-xs) }
.fabric-band .ph{ aspect-ratio:16/7 }
.fabric-nums{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-5) var(--s-7); margin-top:var(--s-6) }
.fabric-nums .num{ display:block; font-family:var(--font-display); font-weight:300;
  font-size:clamp(24px,3.4vw,40px); line-height:1.1; letter-spacing:.04em; color:var(--ink) }
.fabric-nums .cap{ margin-top:var(--s-3); font-size:14px; line-height:1.6; color:var(--soft) }
/* Комплект: низ і верх поруч, у кожного свій кадр 4:3 і цифри під ним
   стовпчиком — у половині ширини три колонки цифр не вміщаються.
   Підпис частини стоїть над кадром, тому свого верхнього поля не має. */
.fabric-parts.is-set{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-7) }
.fabric-parts.is-set .anatomy-part{ margin-top:0 }
.fabric-parts.is-set .fabric-band img,.fabric-parts.is-set .fabric-band .ph{ aspect-ratio:4/3 }
.fabric-parts.is-set .fabric-nums{ grid-template-columns:minmax(0,1fr); gap:var(--s-5); margin-top:var(--s-5) }

/* ── Як підібрати розмір ──────────────────────────────────
   Третя пропорція на сторінці — майже квадрат, і не фото,
   а креслення. Секція не повторює ритм двох попередніх.    */
/* Ліва колонка тепер із підзаголовками й списками, тому кадр
   вирівняно по верху, а не по центру: інакше схема обмірів пливла б
   десь навпроти середини тексту. */
.sizehelp{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-7); align-items:start }
.sizehelp p,.sizehelp ul{ max-width:56ch }
.sizehelp-body > * + *{ margin-top:var(--s-4) }
.sizehelp-body h3{ font-family:var(--font-display); font-weight:500; font-size:11px;
  line-height:1.5; letter-spacing:.18em; text-transform:uppercase; color:var(--soft);
  margin-top:var(--s-6) }
.sizehelp-body h3 + p,.sizehelp-body h3 + ul,.sizehelp-body h3 + .btn{ margin-top:var(--s-3) }
.sizehelp-body b{ font-weight:500; color:var(--ink) }
.sizehelp figure{ background:var(--wash); border-radius:var(--r-xs); padding:var(--s-5) }
.sizehelp svg{ display:block; width:100%; height:auto }

/* Манекен з мірками (кадр С17, 28.09.2026). Підписи — колонкою ліворуч
   від кадру на висоті своєї лінії: текст на фото §13 не дозволяє.
   Лінія мірки — пунктир --ink поперек торса з рисками на краях; від
   лівого краю кадру до торса її веде тонка сіра виноска, щоб підпис
   і мірка читалися разом. Висоти й краї задає розмітка (--y, --x1, --x2). */
.measure-fig{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--s-3) }
.measure-keys{ position:relative; margin:0; padding:0; list-style:none }
.measure-keys li{ position:absolute; right:0; top:var(--y); transform:translateY(-50%);
  font-family:var(--font-display); font-weight:500; font-size:11px; line-height:1.5;
  letter-spacing:.18em; text-transform:uppercase; color:var(--soft); white-space:nowrap }
.measure-shot{ position:relative }
.measure-shot img{ display:block; width:100%; height:auto }
.measure-lead,.measure-line{ position:absolute; top:var(--y); height:0 }
.measure-lead{ left:0; width:var(--x1); border-top:var(--hairline) solid var(--line-strong) }
.measure-line{ left:var(--x1); width:calc(var(--x2) - var(--x1)); border-top:var(--hairline) dashed var(--ink) }
.measure-line::before,.measure-line::after{ content:''; position:absolute; top:-6px; width:var(--hairline); height:11px; background:var(--ink) }
.measure-line::before{ left:0 }
.measure-line::after{ right:0 }

/* ── Доставка: одна таблиця замість трьох колонок ─────────── */
.deliv{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-7); align-items:start }
.deliv-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.deliv-table th{ text-align:left; padding:0 0 var(--s-3);
  border-bottom:var(--hairline) solid var(--line);
  font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.deliv-table td{ padding:var(--s-4) 0; border-bottom:var(--hairline) solid var(--line);
  font-size:15px; color:var(--body) }
.deliv-table td + td{ text-align:right; white-space:nowrap; color:var(--muted); font-size:14px }
/* Заголовок над сроком — по правому краю, как сами сроки */
.deliv-table th + th{ text-align:right }
.deliv-aside dt{ font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-2) }
.deliv-aside dd{ font-size:15px; line-height:1.6; color:var(--body) }
.deliv-aside div + div{ margin-top:var(--s-5); padding-top:var(--s-5);
  border-top:var(--hairline) solid var(--line) }
/* Подпись к срокам — под таблицей, тихо: оговорка, а не правило */
.deliv-note{ margin-top:var(--s-4) }
/* Оплата: по строке на способ, как способы доставки слева.
   Ограничение Укрпошты — отдельной строкой и тёмным, как на странице
   доставки: это единственное «нельзя» в блоке */
.deliv-pay li + li{ margin-top:var(--s-1) }
.deliv-only{ margin-top:var(--s-3); font-weight:500; color:var(--ink) }
/* Сноски на полные страницы — последней строкой того же столбца,
   через ту же линию, что делит пункты над ней */
.deliv-more{ margin-top:var(--s-5); padding-top:var(--s-5);
  border-top:var(--hairline) solid var(--line) }
.deliv-more li + li{ margin-top:var(--s-2) }

/* Схожі товари */
.grid4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-6) var(--s-4) }
/* Той самий кадр 2:3, що в каталозі. Було 3:4 — воно зрізало по 100px
   зверху й знизу, вдвічі більше за каталог, і саме тут це помітно. */
.card-media{ background:var(--wash); aspect-ratio:2/3; overflow:hidden; border-radius:var(--r-xs) }
.card-media img{ width:100%; height:100%; object-fit:cover }
/* §5 · імʼя товару — спокійний підпис, не заголовок */
.card-title{ margin-top:var(--s-3); font-family:var(--font-body); font-weight:400; font-size:15px;
  line-height:1.5; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card:hover .card-title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }
.card-price{ margin-top:var(--s-1); font-weight:600; font-size:15px; color:var(--ink);
  font-variant-numeric:tabular-nums }

/* ── Модалка «Таблиця розмірів» ───────────────────────────── */
/* лист притиснутий до верху: у вкладок різна висота, при центруванні
   вікно стрибало обома краями */
.modal{ position:fixed; inset:0; z-index:70; --modal-top:min(12vh,96px);
  display:flex; align-items:flex-start;
  justify-content:center; padding:var(--modal-top) var(--pad-page) var(--s-6);
  pointer-events:none; visibility:hidden;
  transition:visibility 0s linear var(--t-panel) }
.modal.open{ pointer-events:auto; visibility:visible; transition-delay:0s }
.modal .veil{ position:absolute; inset:0; background:var(--scrim); opacity:0;
  transition:opacity var(--t-panel) var(--ease-out) }
.modal.open .veil{ opacity:1 }
/* позиція — розкладкою: translate(-50%,-50%) від власної висоти дає
   дробове зміщення, і шар малюється розмито */
.modal .sheet{ position:relative; width:min(720px,100%);
  max-height:calc(100vh - var(--modal-top) - var(--s-6));
  transform:translateY(-8px); opacity:0; overflow-y:auto;
  background:var(--surface); border-radius:var(--r-md); box-shadow:var(--elevation); padding:var(--s-6);
  transition:opacity var(--t-panel) var(--ease-out), transform var(--t-panel) var(--ease-out) }
.modal.open .sheet{ opacity:1; transform:none }
@media (max-width:739px){ .modal{ --modal-top:var(--s-6) } }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5) }
.sg-tabs{ display:flex; gap:var(--s-2); margin-bottom:var(--s-5) }
.sg-tab{ height:36px; padding:0 18px; background:transparent; color:var(--ink);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) }
.sg-tab[aria-selected="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.sheet img{ width:100%; border-radius:var(--r-xs); background:var(--wash) }
.sg-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.sg-table th{ text-align:left; padding:0 var(--s-3) var(--s-3) 0;
  border-bottom:var(--hairline) solid var(--line);
  font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.sg-table td{ padding:var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom:var(--hairline) solid var(--line); font-size:15px; color:var(--body) }
.sg-table td:first-child{ font-weight:600; color:var(--ink) }
.sg-table tr.is-hit td{ background:var(--wash) }
/* Підбір за мірками */
.sg-find{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:var(--hairline) solid var(--line) }
.sg-fields{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-3) }
.sg-fields label{ display:block; font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--soft); margin-bottom:var(--s-2) }
.sg-fields input{ width:110px; height:44px; padding:0 var(--s-3);
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--surface);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-sm) }
.sg-fields input:focus{ outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.sg-result{ margin-top:var(--s-4); font-size:15px; color:var(--ink); min-height:24px }
.sg-result b{ font-family:var(--font-display); font-weight:500; letter-spacing:.1em }
.sheet .hint{ margin-top:var(--s-5) }


/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:979px){
  .pdp{ grid-template-columns:minmax(0,1fr); gap:var(--s-6) }
  .panel{ position:static }
  .panel-in{ max-width:none }
  .anatomy,.sizehelp,.deliv{ grid-template-columns:minmax(0,1fr); gap:var(--s-6) }
  /* Кадр цілий, 3:4, але не ширший за 420 — як схема обмірів нижче:
     на планшеті на всю ширину він з'їдав би екран */
  .anatomy-media{ position:static; max-width:420px }
  .sizehelp figure{ max-width:420px }
  .support-map{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5) }
}
@media (max-width:739px){
  .gallery{ grid-template-columns:minmax(0,1fr) }
  .thumbs{ display:none }
  .dots{ display:flex }
  /* тут стрічку гортають пальцем, тому прокрутка вмикається */
  .stage{ margin-inline:calc(var(--pad-page) * -1); border-radius:0; overflow-x:auto }
  /* Стрілки підказують, що кадр не один, ще до першого свайпу */
  .stage-nav{ display:grid }
  /* на телефоні фото має починатися одразу під шапкою */
  .pdp{ padding-top:var(--s-4) }
  /* §7 · липка смуга покупки (П-1, після запуску). Лічильника більше немає,
     тому в смузі їдуть кнопка й обране разом — окремий рядок під одне серце
     з'їдав 66px і читався як помилка */
  .buy-row{ position:sticky; bottom:0; z-index:30;
    margin-inline:calc(var(--pad-page) * -1);
    padding:var(--s-3) var(--pad-page) calc(var(--s-3) + env(safe-area-inset-bottom,0px));
    background:var(--surface); border-top:var(--hairline) solid var(--line) }
  /* Назва на телефоні дрібніша, інакше вона з'їдає перший екран */
  .pdp-title{ font-size:24px }
  .pdp-title .name-details{ font-size:14px }
  .fabric-nums{ grid-template-columns:minmax(0,1fr); gap:var(--s-5) }
  .fabric-band img,.fabric-band .ph{ aspect-ratio:4/3 }
  .fabric-parts.is-set{ grid-template-columns:minmax(0,1fr); gap:var(--s-7) }
  .support-map{ grid-template-columns:minmax(0,1fr) }
  /* Стовпець один — резервувати рядок під підпис нема для чого,
     порожні рядки тільки з’їдали б висоту. */
  .support-map .step:not(.is-on) .step-mark{ display:none }
  .support-scale{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-1) }
  .anatomy-list li{ gap:var(--s-4) }
  .grid4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .specs .row{ grid-template-columns:50% 1fr }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}

/* ── Обычные страницы: корзина, оформление, кабинет ────────
   Блоки WooCommerce рисуют себя сами, тема задаёт им поле и ритм. */
.page-body{ padding:var(--s-7) 0 var(--s-9) }
.page-body > .t-display-l{ margin-bottom:var(--s-6) }
.page-content table{ width:100%; border-collapse:collapse }
.page-content th,.page-content td{ padding:var(--s-3) 0; text-align:left;
  border-bottom:var(--hairline) solid var(--line) }
/* Подчёркиваем ссылки в тексте, но не кнопки блоков WooCommerce:
   иначе «Перейти до оформлення замовлення» выглядит подчёркнутой ссылкой
   внутри чёрной кнопки. */
.page-content :where(p,li,td,dd,h1,h2,h3,h4) a{ text-decoration:underline; text-underline-offset:3px }

/* ── Подзаголовок части комплекта ──────────────────────────
   У комплекта анатомия и ткань состоят из двух частей — низ и верх.
   Класс пришёл из боевой вёрстки (tools/build-catalog-fill.mjs);
   в прототипе product-page.html комплект показан только низом,
   поэтому стиля там не было. Уровнем ниже заголовка секции. */
.anatomy-part{ margin:var(--s-7) 0 var(--s-4);
  font-family:var(--font-display); font-weight:500; font-size:13px;
  line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.section-h + .anatomy-part,
.section-lead + .anatomy-part{ margin-top:var(--s-5) }
.anatomy-part + .fabric-nums{ margin-top:var(--s-4) }