/* ============================================================================
   RP2 · ОСНОВА ТЕМИ
   Перенесено з прототипу v2 (reports/html/prototype-v2): скидання, фокус,
   каркас, типографіка, шапка, підвал, герой зі стрічкою живлення.
   Кольори — тільки токени rp2-tokens.css.
   ========================================================================== */

/* ===== СКИДАННЯ =========================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background: var(--rp-air);          /* явний фон із токена — обов'язково */
  color: var(--rp-ink);
  font-family: var(--rp-font-text);
  font-size: var(--rp-fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* сторінка ніколи не їде вбік */
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,p,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
table{ border-collapse:collapse; }
a{ color:inherit; }
:target{ scroll-margin-top: var(--rp-s5); }

/* обгортка частини шаблона не має власної геометрії */
.wp-block-template-part{ display:contents; }

/* ===== ФОКУС ІЗ КЛАВІАТУРИ ================================================ */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: 2px solid var(--rp-focus);
  outline-offset: 2px;
}
:where(a,button,summary):focus:not(:focus-visible){ outline:none; }

.skip{
  position:absolute; left:var(--rp-s3); top:var(--rp-s3); z-index:100;
  transform: translateY(-200%);
  background: var(--rp-flame); color: var(--rp-on-flame);
  padding: 10px 16px; border-radius: var(--rp-r-pill);
  font-size: var(--rp-fs-small); text-decoration:none;
}
.skip:focus{ transform:none; }

/* ===== КАРКАС ============================================================= */
.wrap{ max-width: var(--rp-max); margin-inline:auto; padding-inline: var(--rp-pad); }

/* Висота закріпленої шапки. Під нею ховалися б усі переходи по якорях —
   «Показати перелік», пагінація #перелік, /генератори/#pidbir. Тому відступ
   прокрутки на кореневому елементі: він накриває всі якорі одразу. */
:root{ --rp-hh: 76px; }
@media (max-width: 1139px){ :root{ --rp-hh: 124px; } }
html{ scroll-padding-top: calc(var(--rp-hh) + var(--rp-s3)); }

/* смуга = розворот: вузька ліва колонка підписів + широке праве поле */
.band{ padding-block: var(--rp-sec); }
/* лінію між смугами знято: у референсі їх розділяє повітря і зміна тла.
   Там, де лінія справді потрібна, — .band--ruled */
.band--ruled{ border-top: var(--rp-hair) solid var(--rp-line); }
.band--paper{ background: var(--rp-paper); }
.band--tint { background: var(--rp-tint); }
.band--air  { background: var(--rp-air); }
.band--flush{ padding-block:0; }
/* хвіст сторінки: заклик .band--flush упирався в темний підвал без жодного
   повітря (правка 28.08). Сам .band--flush чіпати не можна — на ньому стоїть
   ще й блок картини машини. */
.band--tail{ padding-top: var(--rp-sec-tight); padding-bottom: var(--rp-sec); }
.band--tight{ padding-block: var(--rp-sec-tight); }
.band--dark { background: var(--rp-navy); }

.band__grid{ display:grid; gap: var(--rp-s4); }
.band__grid > *{ min-width:0; }
/* ярлик смуги = надзаголовок референсу: дрібний, великими, помаранчевий */
.band__label{
  display:flex; flex-wrap:wrap; align-items:baseline; gap: 4px 10px;
  font-size: var(--rp-fs-micro); font-weight: var(--rp-w-bold);
  letter-spacing: var(--rp-ls-wide); text-transform:uppercase;
  color: var(--rp-flame);
}

.band__label b{
  display:block; font-weight: var(--rp-w-bold); color: var(--rp-flame);
  font-size: var(--rp-fs-micro); margin-bottom:2px;
}
@media (min-width: 900px){
  /* правка Влада з канвасу 25.08: без бокової колонки — вміст на всю ширину,
     ярлик стає рядком-надзаголовком над вмістом */
  .band__grid{ grid-template-columns: minmax(0,1fr); }
}

/* підпис розвороту може нести справжній заголовок — вигляд не міняється */
.band__label :is(h2,h3,h4){
  display:block; margin:0 0 2px;
  font-size: var(--rp-fs-micro); font-weight: var(--rp-w-bold);
  line-height:1.5; letter-spacing:0; color: var(--rp-ink);
}

.hr{ border:0; border-top: var(--rp-hair) solid var(--rp-line); margin: var(--rp-s4) 0; }
.hr--rule{ border-top-color: var(--rp-rule); }

/* широкий вміст у власному контейнері — сторінка не їде вбік */
.scroll-x{ overflow-x:auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling:touch; }
.scroll-x:focus-visible{ outline: 2px solid var(--rp-focus); outline-offset: 2px; }

[hidden]{ display:none !important; }
.step{ scroll-margin-top: var(--rp-s4); }

/* ===== ТИПОГРАФІКА ======================================================== */
h1,.h1{
  font-family: var(--rp-font-head); font-size: var(--rp-fs-display);
  font-weight: var(--rp-w-bold); line-height:1.12; letter-spacing: var(--rp-ls-tight);
}
h2,.h2{ font-size: var(--rp-fs-h2); font-weight: var(--rp-w-bold); line-height:1.2; letter-spacing: var(--rp-ls-tight); }
h3,.h3{ font-size: var(--rp-fs-h3); font-weight: var(--rp-w-bold); line-height:1.3; letter-spacing:-.01em; }

/* надзаголовок секції — той самий прийом, що й .band__label */
.eyebrow{
  font-size: var(--rp-fs-micro); font-weight: var(--rp-w-bold);
  letter-spacing: var(--rp-ls-wide); text-transform:uppercase; color: var(--rp-flame);
}
.lead{ font-size: var(--rp-fs-body); color: var(--rp-muted); max-width: 44ch; }
.lead--hero{ font-size: var(--rp-fs-lead); }
.lead b{ font-weight:400; color: var(--rp-ink); }
.note{ font-size: var(--rp-fs-small); color: var(--rp-muted); }
.micro{ font-size: var(--rp-fs-micro); color: var(--rp-muted); }

/* Число — усе, що вимірюється або коштує. Моноширинного шрифту в темі
   більше немає (27.08): стовпці тримає tabular-nums, вагу — 700. */
.num{ font-weight: var(--rp-w-bold); font-variant-numeric: tabular-nums; }
.num--text{ font-weight:inherit; font-variant-numeric: tabular-nums; }
.price{
  font-size: var(--rp-fs-price); font-weight: var(--rp-w-bold);
  font-variant-numeric: tabular-nums; letter-spacing:-.01em; white-space:nowrap;
}
/* стара ціна й знижена — розмітка стоїть наперед, даних поки немає */
.price del, .price .price--was{
  font-size: var(--rp-fs-micro); font-weight: var(--rp-w-text);
  color:#9AA0A6; margin-right:6px;
}
.price ins, .price .price--now{
  font-weight: var(--rp-w-black); color: var(--rp-flame); text-decoration:none;
}
.price--l{ font-size: var(--rp-fs-price-l); letter-spacing:-.015em; }
.price small{ font-size: var(--rp-fs-micro); color: var(--rp-muted); font-weight: var(--rp-w-text); margin-left:6px; }

.link{
  color: var(--rp-flame); text-decoration:none; font-size: var(--rp-fs-ui);
  border-bottom: var(--rp-hair) solid currentColor; padding-bottom:2px;
}
.link:hover{ color: var(--rp-ink); }

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0;
}

/* дані, яких від клієнта ще немає: місце видиме й підписане,
   вигаданого числа замість них не ставимо */
.pend{
  display:inline-flex; align-items:center; gap:6px; vertical-align:baseline;
  padding: 1px 8px; border-radius: var(--rp-r-pill); background: var(--rp-sunk);
  box-shadow: inset 0 0 0 var(--rp-hair) var(--rp-line);
  font-size: var(--rp-fs-micro);
  color: var(--rp-muted); white-space:nowrap;
}
.pend::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background: var(--rp-muted); }
.band--tint .readout, .band--tint .pend{ background: var(--rp-paper); }

/* ---- вертикальний ритм вмісту розвороту ---- */
.vst > * + *{ margin-top: var(--rp-s3); }
.vst > .lead{ margin-top: var(--rp-s2); }

/* ---- рядок «кнопка й підпис» ---- */
.btnrow{ display:flex; flex-wrap:wrap; gap: var(--rp-s3); align-items:center; }

/* ===== ШАПКА ==============================================================
   Правка 28.08: шапка помаранчева й закріплена, службова смуга над нею —
   біла і прокручується. Смуга стоїть ПОЗА <header> (див. parts/header.html):
   так шапка — прямий нащадок .wp-site-blocks, і top:0 тримається до кінця
   сторінки без розрахунку висоти смуги. */
.site{
  position:sticky; top:0; z-index:50;
  background: var(--rp-head-bg);
  box-shadow: var(--rp-sh-2);
}

/* службова смуга — біла, текст Ніч, по центру */
.site__strip{
  background: var(--rp-strip-bg);
  border-bottom: var(--rp-hair) solid var(--rp-strip-line);
  color: var(--rp-strip-ink);
}
.site__strip .wrap{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1px; padding-block: 6px;
}
.site__strip .micro{ color: var(--rp-strip-ink); }
.site__strip :focus-visible{ outline-color: var(--rp-strip-ink); }

.site__row{
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--rp-s3) var(--rp-s4);
  min-height:76px; padding-block:14px;
}
/* Знак TEPLOVOLT (вибір Влада 01.09, варіант «Розряд»). Малюнок не новий:
   це та сама ламана, що пробігає по кнопці розрядом, — фірмова прикмета зі
   схваленого прототипу, винесена зі стану натискання у знак. Фарбується від
   currentColor, тож окремих версій «на білому» й «на темному» не треба:
   .on-flame і .on-dark перекидають --rp-ink самі. */
.mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:0 0 auto; }
.mark__i{ display:flex; flex:none; color: var(--rp-flame); }
.mark__i svg{ display:block; }
.mark__t{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.mark__w{ font-size:1.3125rem; font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.mark__v{ color: var(--rp-flame); }
.mark__d{ display:none; }
.mark__s{ font-size: var(--rp-fs-micro); color: var(--rp-muted); letter-spacing:.02em; }

/* На шапці .on-flame уже перекинула --rp-flame на біле, тож ламана виходить
   білою сама. А «VOLT» на білому тлі слова загубився б — усередині шапки він
   іде Ніччю: на Вогні це 5,1:1, тобто читається краще за біле. */
.site .mark__v{ color: var(--rp-on-flame); }

.nav{ order:3; flex:1 1 100%; min-width:0; }
.nav__l{ list-style:none; display:flex; gap: clamp(14px,2vw,26px); white-space:nowrap; padding-bottom:1px; }
.nav__l a{
  display:inline-block; color:inherit; text-decoration:none;
  font-size: var(--rp-fs-small); padding-block:6px;
  border-bottom: var(--rp-hair) solid transparent;
}
.nav__l a:hover{ color: var(--rp-flame); border-bottom-color: var(--rp-flame); }
.nav__l a[aria-current="page"]{ color: var(--rp-flame); border-bottom-color: var(--rp-flame); }
.site__tail{ order:2; margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap: var(--rp-s3); }

/* кошик — контурна іконка; число з'являється лише коли в кошику є товари.
   Селектор саме a.cart: у WooCommerce клас cart висить на table.cart
   класичного кошика, і голий .cart ламав йому розкладку. */
a.cart{
  position:relative; display:inline-flex; align-items:center;
  color: var(--rp-ink); text-decoration:none; white-space:nowrap;
  padding: 4px 2px;
}
a.cart:hover{ color: var(--rp-flame); }
a.cart svg{ flex:none; }
.cart__n{
  position:absolute; top:-5px; right:-8px;
  min-width:15px; padding:1px 4px; text-align:center;
  border-radius: var(--rp-r-pill);
  background: var(--rp-flame); color: var(--rp-on-flame);
  font-size: var(--rp-fs-micro); line-height:1.3;
}

/* телефон — штрихова іконка слухавки перед номером */
.tel{
  display:inline-flex; align-items:center; gap:7px;
  font-size: var(--rp-fs-small); color: var(--rp-ink); text-decoration:none;
  white-space:nowrap; font-variant-numeric: tabular-nums;
}
.tel svg{ flex:none; }
.tel:hover{ color: var(--rp-flame); }

/* Телефони в шапці (правки 10.09). На ПК два номери стовпчиком під однією
   слухавкою — рядок не ширшає. На телефоні rp2-shell.js вішає .tels--js:
   у рядку лишається кнопка-слухавка, а номери з графіком живуть у
   спливаючій панелі, як меню. Без сценарію номери стоять у рядку й там. */
.tels{ display:flex; align-items:center; }
.tels__p{ display:inline-flex; align-items:center; gap:7px; color: var(--rp-ink); }
.tels__i{ flex:none; }
.tels__l{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.tels__h, .tels__b{ display:none; }

/* ---- меню решти сторінок (правка 28.08) ----------------------------------
   У рядку лишились чотири кнопки каталогу, решта сторінок живе тут.
   Прогресивне розширення, як у керуванні каруселлю: без сценаріїв кнопка
   лишається схованою, а панель — звичайним списком у рядку шапки. Сценарій
   додає .more--js і робить із неї спадне меню. */
.more{ position:relative; }
.more__b{
  display:inline-flex; align-items:center; gap: var(--rp-s2);
  padding: 7px 14px; border-radius: var(--rp-r-pill);
  border: var(--rp-hair) solid var(--rp-line);
  background:transparent; color: var(--rp-ink); cursor:pointer;
  font-size: var(--rp-fs-small); font-family:inherit;
  transition: background-color var(--rp-dur) linear, border-color var(--rp-dur) linear;
}
.more__b:hover{ background: var(--rp-hover); border-color: var(--rp-ink); }
.more__b svg{ flex:none; }

.more__p ul{ list-style:none; display:flex; flex-wrap:wrap; gap: 4px var(--rp-s3); }
.more__p a{
  color: var(--rp-ink); text-decoration:none; font-size: var(--rp-fs-small);
  border-bottom: var(--rp-hair) solid transparent; padding-block:6px;
}
.more__p a:hover{ color: var(--rp-flame); border-bottom-color: var(--rp-flame); }
.more__p a[aria-current="page"]{ color: var(--rp-flame); border-bottom-color: var(--rp-flame); }

/* зі сценарієм — спадна панель */
.more--js > .more__p{
  position:absolute; right:0; top: calc(100% + 10px); z-index:1;
  min-width: 232px; padding: var(--rp-s2);
  background: var(--rp-paper); border: var(--rp-hair) solid var(--rp-line);
  border-radius: var(--rp-r); box-shadow: var(--rp-sh-4);
}
.more--js > .more__p[hidden]{ display:none; }
.more--js > .more__p ul{ display:grid; gap:0; }
.more--js > .more__p a{
  display:block; padding: 10px 12px; border-bottom:0; border-radius: var(--rp-r-sm);
}
.more--js > .more__p a:hover{ background: var(--rp-hover); color: var(--rp-ink); }
.more--js > .more__p a[aria-current="page"]{ color: var(--rp-flame); background: var(--rp-tint); }

/* знак бренду на вузькому екрані — лише менший кегль назви */
@media (max-width: 479px){
  .mark__w{ font-size:1.25rem; }
}
/* Закріплена шапка на телефоні розпадалась на три рядки й з'їдала 23% екрана
   (правка 28.08). Стискаємо до двох: знак і хвіст в один рядок, чотири кнопки
   каталогу — у другий. Дескриптор під знаком і слово «Меню» на кнопці на
   вузькому екрані ховаємо: назву кнопці дає aria-label. */
@media (max-width: 1139px){
  .site__row{ min-height:0; padding-block:8px; gap: var(--rp-s2) var(--rp-s3); }
}
@media (max-width: 719px){
  .mark__s{ display:none; }
  .mark__w{ font-size:1.125rem; }
  .more__t{ display:none; }
  .more__b{ padding: 9px 11px; }
  .site__row{ gap: 2px var(--rp-s2); }
  .site__tail{ gap: 10px; }
  .tel{ font-size: var(--rp-fs-data); gap:5px; }
  .tels__p{ gap:5px; }
}
/* Найвужчі екрани: знак і хвіст мусять лишитись одним рядком, інакше
   закріплена шапка розповзається на три рядки. Натискні цілі кошика,
   телефона й кнопок каталогу при цьому не чіпаємо — вужчають лише
   проміжки й кегль назви. */
@media (max-width: 429px){
  .mark__w{ font-size:1rem; letter-spacing:0; }
  .site__tail{ gap: 8px; }
  .more__b{ padding: 9px; }
  /* слухавка перед номером — оздоба (aria-hidden). Номер важливіший за неї:
     без іконки рядок сходиться навіть на 360px */
  .tel svg, .tels__i{ display:none; }
}
@media (min-width: 1140px){
  .nav{ order:2; flex:1 1 auto; }
  .site__tail{ order:3; margin-left:0; }
}

/* телефони на телефоні: кнопка-слухавка + спливаюча панель (правка 10.09) */
@media (max-width: 719px){
  .site__tail{ position:relative; }
  .tels--js .tels__b{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 9px 11px; border-radius: var(--rp-r-pill);
    border: var(--rp-hair) solid var(--rp-line);
    background:transparent; color: var(--rp-ink); cursor:pointer;
    transition: background-color var(--rp-dur) linear, border-color var(--rp-dur) linear;
  }
  .tels--js .tels__b:hover,
  .tels--js.is-open .tels__b{ background: var(--rp-hover); border-color: var(--rp-ink); }
  .tels--js .tels__b svg{ display:block; }
  .tels--js .tels__p{
    /* світлий острівець на Вогні шапки — ті самі значення, що в .on-paper;
       задані тут, у медіазапиті, щоб на ПК вони не діяли ні за якого стану */
    --rp-ink:#1A1A1A; --rp-muted:#6B7280; --rp-line:#E8EAED; --rp-paper:#FFFFFF;
    --rp-hover:#F5F6F8; --rp-flame:#FF6900; --rp-focus:#0D1B2A;
    color: var(--rp-ink);
    display:none; position:absolute; right:0; top: calc(100% + 10px); z-index:1;
    flex-direction:column; align-items:stretch; gap:0;
    min-width: 248px; padding: var(--rp-s2);
    background: var(--rp-paper); border: var(--rp-hair) solid var(--rp-line);
    border-radius: var(--rp-r); box-shadow: var(--rp-sh-4);
  }
  .tels--js.is-open .tels__p{ display:flex; }
  .tels--js .tels__i{ display:none; }
  .tels--js .tels__l{ align-items:stretch; }
  .tels--js .tels__l .tel{
    padding: 13px 12px; border-radius: var(--rp-r-sm);   /* ціль дотику 44px */
    font-size: var(--rp-fs-ui); color: var(--rp-ink);
  }
  .tels--js .tels__l .tel:hover{ background: var(--rp-hover); color: var(--rp-ink); }
  .tels--js .tels__h{
    display:block; margin-top:4px; padding: 10px 12px 4px;
    border-top: var(--rp-hair) solid var(--rp-line);
    font-size: var(--rp-fs-micro); color: var(--rp-muted);
  }
}

/* перемикач теми: край елемента керування, а не волосінь */

/* ===== ПІДВАЛ ============================================================= */
/* Підвал темний: сторінка закривається Ніччю, як у референсі, і темний
   блок «чому нам можна вірити» перестає висіти самотньо. Токени всередині
   перекидає утиліта .on-dark у розмітці. */
.foot{ background: var(--rp-navy); }

/* ---- відгуки (правка 25.08: замість смуги «чому переліку можна вірити») ---- */
.foot__rev{ padding-block: clamp(32px,4vw,56px); }
.rev__top{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap: var(--rp-s2) var(--rp-s4); justify-content:space-between;
}
.rev__sum{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--rp-s2) var(--rp-s3); }
.rev__score{
  font-size: var(--rp-fs-h3); font-weight: var(--rp-w-bold);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
}
.rev__stars{ display:inline-flex; gap:2px; color: var(--rp-flame); }
.rev__stars svg{ display:block; }
.rev__list{
  list-style:none; display:grid; gap: var(--rp-s3);
  grid-template-columns: minmax(0,1fr);
  margin-top: var(--rp-s4);
}
@media (min-width: 760px){ .rev__list{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.rev{
  display:flex; flex-direction:column; gap: var(--rp-s2);
  background: var(--rp-dark-fill); border: var(--rp-hair) solid var(--rp-dark-line);
  border-radius: var(--rp-r); padding: 16px 18px 18px;
}
.rev__quote{ font-size: var(--rp-fs-small); line-height:1.55; }
.rev__meta{ margin-top:auto; padding-top: var(--rp-s2); }
.rev__more{ font-size: var(--rp-fs-small); }
.rev__act{ margin-top: var(--rp-s4); }
.foot .rev__src{ margin-top: var(--rp-s3); }

.foot__grid{
  display:grid; gap: var(--rp-s5); padding-block: clamp(32px,4vw,56px);
  border-top: var(--rp-hair) solid var(--rp-line);
}
@media (min-width: 760px){ .foot__grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot__grid h3{ font-size: var(--rp-fs-small); font-weight: var(--rp-w-bold); color: var(--rp-on-dark); margin-bottom: var(--rp-s3); }
.foot__grid ul{ list-style:none; display:grid; gap:9px; }
.foot__grid a, .foot__grid li{ color: var(--rp-muted); font-size: var(--rp-fs-small); text-decoration:none; }
.foot__grid a:hover{ color: var(--rp-flame); }

.foot__bar{
  border-top: var(--rp-hair) solid var(--rp-line); padding-block: var(--rp-s4);
  display:grid; gap: var(--rp-s2);
  font-size: var(--rp-fs-data); color: var(--rp-muted);
}

/* ===== ГЕРОЙ ============================================================== */
.hero{ background: var(--rp-paper); }

.hero__in{
  display:grid;
  gap: clamp(24px, 3.2vw, 40px);
  max-width: var(--rp-max);
  margin-inline: auto;
  padding-inline: var(--rp-pad);
  padding-block: clamp(24px, 3vw, 44px);
}
.hero__in > *{ min-width:0; }

/* від 980 px права колонка виходить у праве поле сторінки */
@media (min-width: 980px){
  .hero__in{
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    align-items:center;
    column-gap: clamp(28px, 3.4vw, 56px);
    max-width:none;
    margin-inline:0;
    padding-left: max(var(--rp-pad), calc((100% - var(--rp-max)) / 2 + var(--rp-pad)));
    padding-right: 0;
  }
}

.hero h1{ text-wrap: balance; }
.hero__lead{ margin-top: var(--rp-s3); }

/* дві дії: обидві — кнопки, головна з розрядом */
.hero__acts{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap: var(--rp-s3);
  margin-top: var(--rp-s4);
}
.hero__act{ display:flex; flex-direction:column; gap: var(--rp-s2); }
.hero__act .btn{ align-self:flex-start; }

.hero__calc{ margin-top: var(--rp-s3); }

/* ---- кадр ---- */
.hero__side{ display:flex; flex-direction:column; }
.hero__photo{ margin:0; }
.hero__photo img{
  width:100%; height:auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--rp-photo);
}
@media (min-width: 620px) and (max-width: 979px){
  .hero__photo img{ aspect-ratio: 2 / 1; }
}
@media (min-width: 980px){
  .hero__photo img{ aspect-ratio:auto; height: clamp(240px, 24vw, 352px); }
}

/* підпис кадру — мова складу, текст ніколи не лягає на кадр */
.hero__cap{
  display:flex; flex-wrap:wrap; align-items:center;
  gap: var(--rp-s2) var(--rp-s3);
  padding-top: var(--rp-s3);
}
.hero__cap-l{

  font-size: var(--rp-fs-data);
  font-variant-numeric: tabular-nums;
  color: var(--rp-muted);
  line-height:1.6;
}
.hero__cap-l b{ font-weight:500; color: var(--rp-ink); }

/* смуга юрособи */
.hero__b2b{
  margin-top: var(--rp-s4);
  padding: var(--rp-s3) var(--rp-s4);
  background: var(--rp-tint);
  border-left: 2px solid var(--rp-flame);
  border-radius: 0 var(--rp-r) var(--rp-r) 0;
  font-size: var(--rp-fs-small);
  line-height:1.5;
}
.hero__b2b .link{ font-size: var(--rp-fs-small); white-space:nowrap; }

@media (min-width: 980px){
  .hero__cap{ padding-right: var(--rp-pad); }
  .hero__b2b{ margin-right: var(--rp-pad); }
}

/* ---- смуга чисел ---- */
.hero__rail{ border-top: var(--rp-hair) solid var(--rp-line); }

.hero__figs{
  list-style:none;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.hero__fig{ padding: var(--rp-s3) var(--rp-s3) var(--rp-s3) 0; }
.hero__fig:nth-child(even){
  padding-left: var(--rp-s3);
  border-left: var(--rp-hair) solid var(--rp-line);
}
@media (min-width: 760px){
  .hero__figs{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hero__fig{ padding-right: var(--rp-s4); }
  .hero__fig + .hero__fig{
    padding-left: var(--rp-s4);
    border-left: var(--rp-hair) solid var(--rp-line);
  }
}
.hero__fig-n{
  display:block;

  font-size: var(--rp-fs-h3);
  font-weight:500;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.015em;
  line-height:1.25;
}
.hero__fig-t{
  display:block;
  margin-top: var(--rp-s1);
  font-size: var(--rp-fs-small);
  color: var(--rp-muted);
}

.hero__next{
  display:flex; align-items:center; gap: var(--rp-s2);
  padding-block: var(--rp-s3);
  border-top: var(--rp-hair) solid var(--rp-line);
  font-size: var(--rp-fs-small);
  color: var(--rp-muted);
}
.hero__next::before{
  content:""; flex:none; width:8px; height:8px;
  border-left: var(--rp-hair) solid currentColor;
  border-bottom: var(--rp-hair) solid currentColor;
  transform: rotate(-45deg);
}

/* ---- стрічка живлення (анімація героя, обрано 24.08) ---- */
.hero__wave{ display:flex; flex-direction:column; }
.hero__wave canvas{
  display:block; width:100%;
  height: clamp(220px, 30vw, 420px);
  /* стрічка входить і виходить м'яко, без обрубаних країв */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* підписи під стрічкою прибрано правкою 25.08 — лишається чиста анімація */

/* ===== НАТИСКНА ЦІЛЬ (вузький екран) ====================================== */
@media (max-width: 719px){
  .skip{ padding-block: 12px; }
  .chip{ padding-block: 12px; }
  .seg button{ padding-block: 14px; }
  .btn--sm{ padding-block: 14px; }
  .btn--line.btn--sm{ padding-block: 13px; }
  .field input, .field select, .field textarea{ padding-block: 13px; }
  .check input{ width:24px; height:24px; }
  .mark{ padding-block: 5px; }
  a.cart{ padding-block: 11px; }
  .tel{ padding-block: 11px; }
  /* два номери стовпчиком: повна ціль кожному роздула б шапку вдвічі */
  .tels__l .tel{ padding-block: 3px; }
  .nav__l a{ padding-block: 13px; }
  /* Назва товару в картці — блокове посилання 17px заввишки, це нижче за
     мінімум натискної цілі. Розширюємо поле дотику вертикально; від'ємний
     зовнішній відступ утримує розкладку картки на місці (правка 01.09). */
  .card__t a{ display:block; padding-block: 7px; margin-block: -7px; }
  .crumbs a{ display:inline-block; padding-block: 12px; }
  .r-t a{ padding-block: 3px; }
  .foot__grid ul{ gap: 0; }
  .foot__grid a{ display:inline-block; padding-block: 13px; }
  .tale summary{ padding-block: 11px; }
  p > .link:only-child,
  .btnrow > .link{ display:inline-block; padding-block: 11px; }
}