/* ============================================================================
   RP2 · КОМПОНЕНТИ СТОРІНОК (каталог · картка · головна · смуги)
   Перенесено 1:1 зі схваленого прототипу v2 (reports/html/prototype-v2):
   основа §8–§10 + збірка «КАТАЛОГ» / «КАРТКА ТОВАРУ» + патчі v2 сторінок.
   Кольори ТІЛЬКИ токенами --rp-* (світла база rp2-tokens.css, темна
   утиліта .on-dark) — жодного власного кольору тут немає.
   ========================================================================== */

/* ===== 8. МОВА ВИМІРЮВАННЯ (від A) ======================================== */
.scale{ position:relative; height:96px; margin:0 6px; }
.scale__axis{
  position:absolute; left:0; right:0; top:34px;
  height: var(--rp-hair); background: var(--rp-tick);
}
.scale__tick{
  position:absolute; top:34px; width: var(--rp-hair); height:6px;
  background: var(--rp-tick); transform: translateX(-.5px);
}
.scale__tick--mid  { height:10px; }
.scale__tick--major{ height:15px; background: var(--rp-tick-major); }
.scale__n{
  position:absolute; top:53px; transform: translateX(-50%);
  font-size: var(--rp-fs-micro);
  color: var(--rp-muted); font-variant-numeric: tabular-nums;
}
.scale__span{                       /* обраний проміжок */
  position:absolute; top:20px; height:14px;
  background: var(--rp-span);
  border-top: 2px solid var(--rp-ink);
}
.scale__idx{                        /* покажчик — петроль, не мітка A */
  position:absolute; top:8px; width:2px; height:34px; background: var(--rp-index);
}
.scale__idx::after{
  content: attr(data-v); position:absolute; top:-16px; left:50%; transform: translateX(-50%);
  font-size: var(--rp-fs-micro); font-weight:500;
  color: var(--rp-index); white-space:nowrap;
}
.scale__zone{                       /* підпис зони під шкалою */
  position:absolute; top:74px; height:20px;
  border-left: var(--rp-hair) solid var(--rp-tick); padding-left:8px;
  font-size: var(--rp-fs-micro);
  letter-spacing:.07em; text-transform:uppercase; color: var(--rp-muted);
  white-space:nowrap; overflow:hidden;
}
@media (max-width: 719px){
  .scale{ height:74px; }
  .scale__n.is-dense{ display:none; }
}

/* заглиблене поле значення — те, що показує результат вимірювання */
.readout{
  display:inline-flex; flex-direction:column; gap:2px;
  background: var(--rp-sunk); padding: 10px 14px; border-radius: var(--rp-r);
}
.readout__n{
  font-size: var(--rp-fs-h3); font-weight: var(--rp-w-bold);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums; letter-spacing:-.02em; line-height:1.1;
}
.readout__c{ font-size: var(--rp-fs-data); color: var(--rp-muted); }

/* ===== 9. МОВА СКЛАДУ (від C) ============================================= */
.rows{ border-top: var(--rp-hair) solid var(--rp-rule); }
.row{
  display:grid; gap: var(--rp-s4); align-items:start;
  padding: 20px 0; border-bottom: var(--rp-hair) solid var(--rp-line);
  transition: background-color var(--rp-dur) linear;
}
.row > *{ min-width:0; }
.row:hover{ background: var(--rp-hover); }

/* стан наявності: слово несе зміст, кружечок лише підсилює */
.state{
  display:inline-flex; align-items:center; gap:7px;
  font-size: var(--rp-fs-small); color: var(--rp-ink);
}
.state::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background: var(--rp-muted);
}
.state--in::before { background: var(--rp-signal); }
.state--wait::before{ background: var(--rp-muted); }
.state--out::before{ background: var(--rp-stop); }
.state--out{ color: var(--rp-stop); }
.state--pill{
  padding: 3px 9px; border-radius: var(--rp-r-pill);
  font-size: var(--rp-fs-data); background: var(--rp-sunk);
}
.state--pill.state--in { background: var(--rp-signal-wash); }
.state--pill.state--out{ background: var(--rp-stop-wash); }

/* штамп обліку — артикул, стан машини, дата */
.stamp{
  display:inline-block; padding: 1px 7px; border-radius: var(--rp-r-pill);
  border: var(--rp-hair) solid var(--rp-line);
  font-size: var(--rp-fs-micro);
  letter-spacing:.06em; text-transform:uppercase; color: var(--rp-muted);
}
.stamp--ink{ background: var(--rp-navy); border-color: var(--rp-navy); color:#FFFFFF; }

/* пара «підпис — значення» з відбивкою крапками, як у відомості */
.spec{ display:flex; align-items:baseline; gap:8px; font-size: var(--rp-fs-small); }
.spec__t{ color: var(--rp-muted); white-space:nowrap; }
.spec__f{ flex:1 1 auto; min-width:12px; border-bottom: var(--rp-hair) solid var(--rp-line); transform: translateY(-4px); }
.spec__v{ font-size: var(--rp-fs-data); font-variant-numeric: tabular-nums; white-space:nowrap; }
.specs{ display:grid; gap:9px; }

/* Вузький екран: підпис показника мусить переноситись. Заборона переносу на
   .spec__t і .spec__v тримала рядок в одну лінію, і паспорт розпирав сторінку
   до 437px при екрані 360 — з'явилась горизонтальна прокрутка. Вада була й
   раніше, просто паспорт стояв закритим і її ніхто не бачив (знайдено
   наскрізним проходом 01.09). Пунктирна поводка лишається, але може зникнути
   до мінімуму — це нормально, коли підпис займає обидва рядки. */
@media (max-width: 719px){
  .spec{ flex-wrap:wrap; }
  .spec__t{ white-space:normal; min-width:0; flex:1 1 auto; }
  .spec__f{ flex:0 1 auto; }
  .spec__v{ white-space:normal; margin-left:auto; text-align:right; }
}

/* щільна відомість характеристик */
.ledger{ width:100%; font-size: var(--rp-fs-small); }
.ledger th{
  text-align:left; font-weight:500; color: var(--rp-muted);
  padding: 7px 16px 7px 0; border-bottom: var(--rp-hair) solid var(--rp-line); white-space:nowrap;
}
.ledger td{
  padding: 7px 0; border-bottom: var(--rp-hair) solid var(--rp-line);
  font-size: var(--rp-fs-data);
  font-variant-numeric: tabular-nums;
}
.ledger thead th{ border-bottom-color: var(--rp-rule); }

/* ===== 10. КЕРУВАННЯ ІНТЕРФЕЙСОМ (від C) ================================== */
/* перемикач із двох-трьох положень */
.seg{ display:inline-flex; border: var(--rp-hair) solid var(--rp-edge); border-radius: var(--rp-r-sm); overflow:hidden; }
.seg button, .seg a{
  background: var(--rp-paper); border:0; cursor:pointer; text-decoration:none;
  padding: 9px 16px; font-size: var(--rp-fs-small); color: var(--rp-muted);
  transition: background-color var(--rp-dur) linear, color var(--rp-dur) linear;
}
.seg button + button, .seg a + a{ border-left: var(--rp-hair) solid var(--rp-line); }
.seg button:hover, .seg a:hover{ background: var(--rp-tint); color: var(--rp-ink); }
.seg button[aria-pressed="true"], .seg a[aria-current="true"]{ background: var(--rp-flame); color: var(--rp-on-flame); }
.seg button:focus-visible, .seg a:focus-visible{ outline: 2px solid var(--rp-focus); outline-offset:-3px; }

/* фасети з лічильниками; чип буває кнопкою, посиланням або спаном-заглушкою */
.chipset{ display:grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 6px; }
.chipset .chip{ justify-content:center; padding: 8px 6px; white-space:nowrap; font-size: 13px; gap: 5px; }
.chipset .chip .chip__c{ font-size: 11px; letter-spacing: -0.01em; }
@media (max-width: 900px){ .chipset{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px){ .chipset{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip{
  display:inline-flex; align-items:baseline; gap:8px; cursor:pointer;
  background: var(--rp-paper); color: var(--rp-ink); text-decoration:none;
  border: var(--rp-hair) solid var(--rp-line); border-radius: var(--rp-r-pill);
  padding: 10px 14px; font-size:.9375rem;
  transition: background-color var(--rp-dur) linear, border-color var(--rp-dur) linear;
}
.chip:hover{ border-color: var(--rp-flame); }
.chip__c{ font-size: var(--rp-fs-data); color: var(--rp-muted); font-variant-numeric: tabular-nums; }
/* обраний чип ≠ основна кнопка (правка 25.08): фон «обраного проміжку шкали»,
   помаранчева рамка на Присоку, чорнильний текст */
.chip[aria-pressed="true"], .chip[aria-current="true"]{ background: var(--rp-span); border-color: var(--rp-flame); color: var(--rp-ink); }
.chip[aria-pressed="true"] .chip__c, .chip[aria-current="true"] .chip__c{ color: var(--rp-muted); }
.chip[disabled]{ color: var(--rp-muted); cursor:not-allowed; text-decoration: line-through; text-decoration-thickness: var(--rp-hair); }

/* поле вводу */
.field{ display:grid; gap:6px; }
.field label, .field__l{
  font-size: var(--rp-fs-data); color: var(--rp-muted);
}
.field input, .field select, .field textarea{
  width:100%; min-width:108px;
  font-size:.9375rem; color: var(--rp-ink);
  background: var(--rp-paper);
  border: var(--rp-hair) solid var(--rp-edge); border-radius: var(--rp-r-sm);
  padding: 10px 12px;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--rp-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline: 2px solid var(--rp-focus); outline-offset:-1px; border-color: var(--rp-flame);
}
.field--wide input{ min-width:260px; }
.field__err{ font-size: var(--rp-fs-small); color: var(--rp-stop); }
.field.is-bad input, .field.is-bad select{ border-color: var(--rp-stop); }

/* справжня позначка згоди — доступна з клавіатури, над кнопкою */
.check{ display:flex; align-items:flex-start; gap:10px; font-size: var(--rp-fs-small); cursor:pointer; }
.check input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color: var(--rp-flame); }

/* ═══════════════════════════════════════════════════════════════════
   БЛОК · ПІДБІР ЗА ПОТУЖНІСТЮ (прилад)
   ═══════════════════════════════════════════════════════════════════ */
.pick > * + *{ margin-top: var(--rp-s5); }
.pick__head > * + *{ margin-top: var(--rp-s2); }

/* прилад: керування + шкала + смуги в одному аркуші */
.pick__panel{ background: var(--rp-paper); padding: clamp(16px, 2.4vw, 28px);
  border: var(--rp-hair) solid var(--rp-line); border-radius: var(--rp-r); }
.pick__panel > * + *{ margin-top: var(--rp-s4); }

.pick__ctl{ display:flex; flex-wrap:wrap; gap: var(--rp-s4); align-items:flex-end; }
.pick__sw{ display:grid; gap:6px; }
.pick__out{ margin-left:auto; }
@media (max-width: 719px){ .pick__out{ margin-left:0; } }

.pick__hints{ display:grid; gap: var(--rp-s2) var(--rp-s5); }
@media (min-width: 720px){ .pick__hints{ grid-template-columns: 1fr 1fr; } }

/* доріжка шкали: живе в .scroll-x і не буває вужчою за 720 px */
.pick__rail{ min-width: 720px; padding: var(--rp-s2) 14px var(--rp-s3); }
.pick__swipe{ display:none; }
@media (max-width: 719px){
  .pick__rail .scale{ height:96px; }
  .pick__rail .scale__n.is-dense{ display:block; }
  .pick__swipe{ display:block; }
}

/* смуги реєстру — доступна з клавіатури заміна шкали */
.pick__grp + .pick__grp{ margin-top: var(--rp-s4); }
.pick__grp-t{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom: var(--rp-s2); }
.pick__r{ font-size: var(--rp-fs-micro); color: var(--rp-muted); }
.chip[aria-pressed="true"] .pick__r, .chip[aria-current="true"] .pick__r{ color: var(--rp-muted); }
.chip[disabled] .pick__r, .chip[disabled] .chip__c{ color: var(--rp-muted); }

/* результат — єдине місце блоку з петролевою рискою */
.pick__res{ background: var(--rp-paper); border-top: 3px solid var(--rp-flame);
  border-radius: var(--rp-r); padding: clamp(16px, 2.4vw, 28px); }
.pick__res > * + *{ margin-top: var(--rp-s3); }
.pick__res-b{ display:flex; flex-wrap:wrap; gap: var(--rp-s3); align-items:center; }

/* ═══════════════════════════════════════════════════════════════════
   БЛОК · КАТАЛОГ
   ═══════════════════════════════════════════════════════════════════ */
/* ---- 1. Шапка блоку ----------------------------------------------------- */
.cat__top{
  display:flex; flex-wrap:wrap; gap: var(--rp-s4) clamp(24px,4vw,56px);
  align-items:flex-end; justify-content:space-between;
}
.cat__top > *{ min-width:0; }

/* Сусідні смуги каталогу не складають відступи вдвічі (правка 10.09): між
   шапкою, шкалою, шухлядою й переліком стояло 100–145px порожнечі. */
.band.cat__hd{ padding-bottom: var(--rp-s4); }
.band.cat__pick{ padding-top: var(--rp-s4); padding-bottom: 0; }
.band.cat__filt{ padding-top: var(--rp-s5); padding-bottom: 0; }
.band.cat__filt + .band.cat{ padding-top: var(--rp-s5); }

/* ---- 2. Рубрики: плитки з піктограмами ---------------------------------- */
.rub{
  list-style:none; display:grid; gap: var(--rp-hair);
  grid-template-columns: repeat(auto-fit, minmax(min(238px,100%), 1fr));
  background: var(--rp-line);
  border: var(--rp-hair) solid var(--rp-line);
  border-radius: var(--rp-r-lg); overflow:hidden;
  margin-top: var(--rp-s4);
}
.rub__a{
  display:grid; grid-template-columns: auto minmax(0,1fr); gap: 13px;
  align-items:start; height:100%;
  background: var(--rp-paper); padding: 15px 17px 16px;
  text-decoration:none;
  transition: background-color var(--rp-dur) linear;
}
.rub__a:hover{ background: var(--rp-hover); }
.rub__i{
  width:26px; height:26px; flex:none; color: var(--rp-muted); margin-top:1px;
  transition: color var(--rp-dur) linear;
}
.rub__a:hover .rub__i, .rub__a:focus-visible .rub__i{ color: var(--rp-flame); }
.rub__t{ display:block; font-weight:500; line-height:1.25; }
.rub__a:hover .rub__t{ text-decoration:underline; text-decoration-thickness: var(--rp-hair); text-underline-offset:3px; }
.rub__l{ display:block; font-size: var(--rp-fs-small); color: var(--rp-muted); line-height:1.4; margin-top:3px; }

/* ---- 3. Фасети ---------------------------------------------------------- */
.facet{ display:grid; grid-template-columns: 104px minmax(0,1fr); gap: 10px var(--rp-s3); align-items:start; }
.facet + .facet{ margin-top: 14px; }
.facet__l{
  font-size: var(--rp-fs-data);
  color: var(--rp-muted); padding-top: 11px;
}
.facet__t{ font-size: var(--rp-fs-small); color: var(--rp-muted); padding-top:10px; }
@media (max-width: 639px){
  .facet{ grid-template-columns: minmax(0,1fr); gap:6px; }
  .facet__l{ padding-top:0; }
  .facet__t{ padding-top:0; }
}
.cat__sort{ display:flex; flex-wrap:wrap; gap: var(--rp-s3) var(--rp-s4); align-items:center; justify-content:space-between; margin-top: var(--rp-s4); }
.cat__sort .seg button, .cat__sort .seg a{ white-space:nowrap; }

/* смуга сортування (правка 28.08): чотири варіанти мають 555px і в контейнер
   на 497px не влазили — «спершу дорожчі» обрізався, дістати його можна було
   лише прокруткою вбік. Прокрутку знято: нижче 640px сегмент іде на всю
   ширину рядка сіткою два на два. Від 640px поле розвороту дає щонайменше
   589px, і чотири варіанти стають одним рядком самі. Клас власний, бо .seg
   несе ще перемикач вигляду
   «сіткою / списком» і перемикач кВт/кВА на картці машини. */
@media (max-width: 639px){
  .cat__sortx{ flex: 1 1 100%; min-width:0; }
  .seg--sort{
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); width:100%;
    /* роздільники тепер дає проміжок на тлі контейнера: border-left у сітці
       лишав би зайву лінію на початку другого рядка */
    gap: var(--rp-hair); background: var(--rp-line);
  }
  .seg--sort a{ text-align:center; border-left:0; }
}

/* ---- 4. Відомість ------------------------------------------------------- */
.cat__cols{ display:none; }
.cat .row{ grid-template-columns: minmax(0,1fr); gap: var(--rp-s3); }
.cat .r-shot{ max-width: 340px; }

@media (min-width: 1180px){
  .cat__cols{
    display:grid; grid-template-columns: 128px 196px minmax(0,1fr) 268px;
    gap: var(--rp-s4); padding-bottom:7px;
  }
}
.cat__cols span{
  font-size: var(--rp-fs-micro);
  letter-spacing:.08em; text-transform:uppercase; color: var(--rp-muted);
}
.cat__cols span:last-child{ text-align:right; }

/* стовпець обліку */
.r-id{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; align-content:start; }
@media (min-width: 900px){ .r-id{ display:grid; gap:7px; justify-items:start; } }
.r-id .state{ font-size: var(--rp-fs-small); }

/* кадр */
.r-shot{
  position:relative;
  background: var(--rp-photo); aspect-ratio: 4/3; overflow:hidden;
  border: var(--rp-hair) solid var(--rp-line); border-radius: var(--rp-r-sm);
}
.r-shot img{ width:100%; height:100%; object-fit:cover; }
.r-shot a{ display:block; height:100%; }

/* тіло */
.r-t{ font-size:1.0625rem; font-weight:500; line-height:1.26; letter-spacing:-.008em; }
.r-t a{ text-decoration:none; }
.row:hover .r-t a{ text-decoration:underline; text-decoration-thickness: var(--rp-hair); text-underline-offset:3px; }
.r-by{ font-size: var(--rp-fs-small); color: var(--rp-muted); margin:4px 0 13px; }
.cat .specs{
  grid-template-columns: repeat(auto-fit, minmax(min(232px,100%), 1fr));
  gap: 7px var(--rp-s4); max-width: 640px;
}
.cat .spec{ flex-wrap: wrap; }

/* ціна й дія */
.r-buy{ display:grid; gap:9px; align-content:start; justify-items:start; }
.r-buy .btn{ width:100%; }
.r-pay{ font-size: var(--rp-fs-small); color: var(--rp-muted); line-height:1.45; }
/* ціни немає — місце ціни не порожнє, але й не вдає число */
.price--none{
  font-size: var(--rp-fs-lead); font-weight:500; color: var(--rp-muted);
  line-height:1.2; white-space:nowrap;
}
.r-act{ display:grid; gap:8px; width:100%; }

/* ---- 5. Підвал переліку ------------------------------------------------- */
.cat__more{ display:flex; flex-wrap:wrap; gap: var(--rp-s3) var(--rp-s4); align-items:center; margin-top: var(--rp-s4); }
.cat__pages{ display:flex; flex-wrap:wrap; gap: var(--rp-s2); align-items:center; }
.cat__pages .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; padding: 8px 10px; text-decoration:none;
  font-size: var(--rp-fs-data);
  border: var(--rp-hair) solid var(--rp-line); border-radius: var(--rp-r-sm);
  color: var(--rp-ink); background: var(--rp-paper);
}
.cat__pages a.page-numbers:hover{ border-color: var(--rp-flame); color: var(--rp-flame); }
.cat__pages .page-numbers.current{ background: var(--rp-flame); border-color: var(--rp-flame); color: var(--rp-on-flame); }
.cat__pages .page-numbers.dots{ border:0; background:none; }


/* ═══════════════════════════════════════════════════════════════════
   БЛОК · КАРТКА ТОВАРУ
   ═══════════════════════════════════════════════════════════════════ */
/* ---- хлібні крихти ------------------------------------------------------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
  font-size: var(--rp-fs-data); color: var(--rp-muted); }
.crumbs a{ text-decoration:none; border-bottom: var(--rp-hair) solid var(--rp-line); }
.crumbs a:hover{ color: var(--rp-ink); border-bottom-color: var(--rp-edge); }
.crumbs span[aria-current]{ color: var(--rp-ink); }

/* ---- розворот шапки картки: галерея ліворуч, купівля праворуч ------------ */
.pdp{ display:grid; gap: clamp(24px, 4vw, 52px); align-items:start; }
.pdp > *{ min-width:0; }
@media (min-width: 940px){
  .pdp{ grid-template-columns: minmax(0,1.14fr) minmax(0,1fr); }
  .gal{ grid-column:1; grid-row:1; }
  .buy{ grid-column:2; grid-row:1 / span 2; }
  .pdp__notes{ grid-column:1; grid-row:2; margin-top: calc(-1 * clamp(24px, 4vw, 52px) + var(--rp-s3)); }
}

/* ---- галерея ------------------------------------------------------------- */
.gal__frame{ background: var(--rp-photo); border: var(--rp-hair) solid var(--rp-line);
  border-radius: var(--rp-r); overflow:hidden; }
.gal__frame img{ width:100%; aspect-ratio: 4 / 3; object-fit: contain; }
.gal__cap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px;
  padding: 8px 12px; border-top: var(--rp-hair) solid var(--rp-line);
  font-size: var(--rp-fs-micro); color: var(--rp-muted); }
.gal__thumbs{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--rp-s2); margin-top: var(--rp-s2); }
.gal__thumb{ padding:0; border: var(--rp-hair) solid var(--rp-line); background: var(--rp-photo);
  border-radius: var(--rp-r-sm); cursor:pointer; overflow:hidden; }
.gal__thumb img{ width:100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gal__thumb[aria-pressed="true"]{ border-color: var(--rp-flame); box-shadow: inset 0 0 0 2px var(--rp-flame); }
.gal__thumb:focus-visible{ outline: 2px solid var(--rp-focus); outline-offset: 2px; }

/* ---- блок купівлі -------------------------------------------------------- */
.buy__price{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: var(--rp-s3) var(--rp-s4);
  border-top: var(--rp-hair) solid var(--rp-rule); border-bottom: var(--rp-hair) solid var(--rp-rule);
  padding-block: var(--rp-s3); margin-block: var(--rp-s4);
}
.buy__side{ font-size: var(--rp-fs-small); color: var(--rp-muted); max-width: 30ch; }
.avail{ display:grid; gap:7px; }
.buy__actions{ display:grid; gap:6px; margin-top: var(--rp-s4); }
.buy__actions .btn{ margin-top: var(--rp-s2); }
.buy__actions .btn:first-child{ margin-top:0; }
.hint{ font-size: var(--rp-fs-small); color: var(--rp-muted); }
.stamps{ display:flex; flex-wrap:wrap; gap: var(--rp-s2); margin-top: var(--rp-s4); align-items:center; }

/* ---- характеристики: дві колонки пар «підпис — значення» ------------------ */
.specgrid{ display:grid; gap: var(--rp-s5) clamp(24px, 4vw, 56px); }
@media (min-width: 760px){ .specgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.specgroup > :is(h3,h4){ margin-bottom: var(--rp-s2); }
.specgroup .hr{ margin: 0 0 var(--rp-s3); }
.spec__v .pend{ font-size: var(--rp-fs-micro); }
.spec--empty .spec__v{ font-family: var(--rp-font-text); color: var(--rp-muted); font-size: var(--rp-fs-small); }

/* ---- заглиблені поля значень поруч --------------------------------------- */
.readouts{ display:flex; flex-wrap:wrap; gap: var(--rp-s2); }

/* ---- опис від продавця --------------------------------------------------- */
.tale{ max-width: 68ch; }
.tale p + p{ margin-top: var(--rp-s3); }
.tale details{ margin-top: var(--rp-s3); }
.tale details p{ margin-top: var(--rp-s3); }
.tale summary{ cursor:pointer; font-size: var(--rp-fs-small); color: var(--rp-flame); width:max-content; }
.tale summary::marker{ color: var(--rp-muted); }

/* ---- документи ----------------------------------------------------------- */
.docs{ display:flex; flex-wrap:wrap; gap: var(--rp-s2); }

/* ---- таблиця аналогів ---------------------------------------------------- */
.ledger td .stamp{ margin-left:6px; }
.ledger tr[aria-current="true"] td{ background: var(--rp-tint); }
.ledger .t-name{ font-family: var(--rp-font-text); font-size: var(--rp-fs-small); white-space:nowrap; }
.ledger .t-name a{ text-decoration:none; }
.ledger .t-name a:hover{ text-decoration:underline; text-decoration-thickness: var(--rp-hair); text-underline-offset:3px; }
.ledger .t-eng{ font-family: var(--rp-font-text); font-size: var(--rp-fs-small); color: var(--rp-muted); white-space:nowrap; }
.ledger .t-no{ color: var(--rp-muted); }

/* ═══ V2 · ПАТЧ КАТАЛОГУ ══════════════════════════════════════════════════ */
/* розряд у рядках відомості: у спокої нитка раз на 15 с, фазові зсуви
   рядків; наведення/фокус/натиснення повертають штатну частоту одразу */
.cat .rows .btn{ --rp-arc-dur: 15s; }
.cat .rows .btn:hover, .cat .rows .btn:focus-visible{ --rp-arc-dur: 2.4s; }
.cat .rows .row:nth-child(1) .btn::after,
.cat .rows .row:nth-child(1) .btn::before{ animation-delay: -0.4s; }
.cat .rows .row:nth-child(2) .btn::after,
.cat .rows .row:nth-child(2) .btn::before{ animation-delay: -2.1s; }
.cat .rows .row:nth-child(3) .btn::after,
.cat .rows .row:nth-child(3) .btn::before{ animation-delay: -3.9s; }
.cat .rows .row:nth-child(4) .btn::after,
.cat .rows .row:nth-child(4) .btn::before{ animation-delay: -5.6s; }
.cat .rows .row:nth-child(5) .btn::after,
.cat .rows .row:nth-child(5) .btn::before{ animation-delay: -7.2s; }
.cat .rows .row:nth-child(6) .btn::after,
.cat .rows .row:nth-child(6) .btn::before{ animation-delay: -8.8s; }
.cat .rows .row:nth-child(7) .btn::after,
.cat .rows .row:nth-child(7) .btn::before{ animation-delay: -10.3s; }
.cat .rows .row:nth-child(8) .btn::after,
.cat .rows .row:nth-child(8) .btn::before{ animation-delay: -11.9s; }
.cat .rows .row:nth-child(9) .btn::after,
.cat .rows .row:nth-child(9) .btn::before{ animation-delay: -13.5s; }
.cat .rows .row .btn:hover::after,         .cat .rows .row .btn:hover::before,
.cat .rows .row .btn:focus-visible::after, .cat .rows .row .btn:focus-visible::before,
.cat .rows .row .btn.is-hover::after,      .cat .rows .row .btn.is-hover::before,
.cat .rows .row .btn.is-focus::after,      .cat .rows .row .btn.is-focus::before{
  animation-delay: 0s, 1.98s;
}
.cat .rows .row .btn:active::after, .cat .rows .row .btn:active::before{
  animation-delay: 0s;
}

/* ---- складник «згортка»: плавне відкривання-закривання (лише div) -------- */
div.fold{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows calc(var(--rp-dur) * 2) ease;
}
div.fold > .fold__in{
  overflow:hidden; min-height:0; visibility:hidden;
  transition: visibility calc(var(--rp-dur) * 2);
}
div.fold.is-open{ grid-template-rows: 1fr; }
div.fold.is-open > .fold__in{ visibility:visible; }
.fold__gap{ padding-top: var(--rp-s4); }

/* стрілка на кнопках-згортках */
.chev{
  display:inline-block; width:8px; height:8px; flex:none;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  transition: transform var(--rp-dur) linear;
}
[aria-expanded="true"] .chev{ transform: translateY(2px) rotate(135deg); }

/* ---- рядок згорнутої шкали ----------------------------------------------- */
.pickbar{
  display:flex; flex-wrap:wrap; align-items:center;
  gap: var(--rp-s2) var(--rp-s4);
}
.pickbar__lead{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap: 4px var(--rp-s3);
}
.pickbar > .btn{ margin-left:auto; }
@media (max-width: 719px){
  .pickbar > .btn{ margin-left:0; width:100%; }
}

/* ---- фільтр-шухляда ------------------------------------------------------- */
.filt__top{
  display:flex; flex-wrap:wrap; align-items:center;
  gap: var(--rp-s2) var(--rp-s3);
  margin-bottom: var(--rp-s3);
}
.filt__top > .btn{ margin-left:auto; }
.filt__state{ flex:0 1 auto; }
@media (max-width: 719px){
  .filt__top > .btn{ margin-left:0; width:100%; }
}
.filt__badge{
  min-width:18px; padding:1px 6px; border-radius: var(--rp-r-pill);
  background: var(--rp-flame); color: var(--rp-on-flame);
  font-size: var(--rp-fs-micro); text-align:center;
}
.filt__pow{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--rp-s2) var(--rp-s3); }

/* ---- рядок посилань-рубрик (без чисел) ------------------------------------ */
.rublinks{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap: var(--rp-s1) clamp(14px, 2vw, 26px);
  margin-bottom: var(--rp-s4);
}
.rublinks a{
  color: var(--rp-muted); text-decoration:none; font-size: var(--rp-fs-small);
  border-bottom: var(--rp-hair) solid var(--rp-line); padding-bottom:2px;
}
.rublinks a:hover{ color: var(--rp-flame); border-bottom-color: var(--rp-flame); }
@media (max-width: 719px){
  .rublinks a{ display:inline-block; padding-block: 11px; }
}

/* ---- рядок відомості на дієті --------------------------------------------- */
.r-cards{ display:flex; flex-wrap:wrap; gap: var(--rp-s2); margin-top: 12px; }
.readout--sm{ padding: 8px 12px; }
.readout--sm .readout__n{ font-size: var(--rp-fs-body); }
.readout__n small{
  font-size: var(--rp-fs-data);
  color: var(--rp-muted); font-weight:400;
}
.r-more{ margin-top: 12px; }
.r-more > summary{
  cursor:pointer; font-size: var(--rp-fs-small); color: var(--rp-flame);
  width:max-content;
}
.r-more > summary::marker{ color: var(--rp-muted); }
.r-more[open] > summary{ margin-bottom: 10px; }
@media (max-width: 719px){
  .r-more > summary{ padding-block: 11px; }
}
/* ціна — головне число рядка: стоїть упритул над дією, підпис — під кнопкою */
.cat .r-buy{ gap: var(--rp-s2); }
.cat .r-buy .price{ line-height:1.1; }
.cat .r-buy .r-pay{
  font-size: var(--rp-fs-micro);
  color: var(--rp-muted); max-width: 26ch;
}
/* рядок полегшав — чотири колонки стають уже з 900 px */
@media (min-width: 900px){
  .cat .row{
    grid-template-columns: 118px 172px minmax(0,1fr) 218px;
    grid-template-areas: "id shot body buy";
  }
  .cat .r-id  { grid-area:id; }
  .cat .r-shot{ grid-area:shot; max-width:none; }
  .cat .r-body{ grid-area:body; }
  .cat .r-buy{
    grid-area:buy;
    grid-template-columns: minmax(0,1fr);
    justify-items:end; text-align:right; align-content:start;
  }
}
@media (min-width: 1180px){
  .cat .row{
    grid-template-columns: 128px 196px minmax(0,1fr) 268px;
  }
}
#pidbir{ scroll-margin-top: var(--rp-s4); }

/* ═══ V2 · ДОДАТКИ СТОРІНКИ МАШИНИ ════════════════════════════════════════ */
/* ---- плашки паспорта (база — .readout) ----------------------------------- */
.plaqs{ display:grid; gap: var(--rp-s2); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 760px){ .plaqs{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.plaqs--sm{ grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: var(--rp-s2); }
@media (min-width: 560px){ .plaqs--sm{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 940px){ .plaqs--sm{ grid-template-columns: repeat(6, minmax(0,1fr)); } }
.plaqs .readout{ display:flex; padding: var(--rp-s3); }
.readout--lg .readout__n{ font-size: var(--rp-fs-price); }
.plaqs .readout__n small{ font-size:.66em; font-weight:400; color: var(--rp-muted); }
.plaqs--sm .readout__n{ font-size: var(--rp-fs-body); }

/* ---- перемикач незаповнених показників паспорта (правка 01.09) ---------
   У реєстрі 51 поле; на слабко заповненій позиції паспорт ставав стіною
   «немає в паспорті». Ховаємо порожні рядки за замовчуванням і даємо
   прапорець, щоб їх повернути. Прапорець, а не кнопка зі сценарієм: працює
   без JS, а сусідній селектор ~ дістає рядки в наступному блоці. */
.emptysw__i{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.emptysw__l{
  display:inline-flex; margin-bottom: var(--rp-s3); align-items:center; gap: var(--rp-s2);
  cursor:pointer; font-size: var(--rp-fs-small); color: var(--rp-muted);
  padding-block: 6px;
}
.emptysw__l::before{
  content:""; width:16px; height:16px; flex:none;
  border: var(--rp-hair-2) solid var(--rp-edge); border-radius:4px;
  transition: background-color var(--rp-dur) linear, border-color var(--rp-dur) linear;
}
.emptysw__l:hover::before{ border-color: var(--rp-flame); }
.emptysw__i:checked + .emptysw__l::before{
  background: var(--rp-flame); border-color: var(--rp-flame);
}
.emptysw__i:focus-visible + .emptysw__l::before{
  outline: 2px solid var(--rp-focus); outline-offset: 2px;
}
.emptysw__i:not(:checked) ~ .specgrid .spec--empty{ display:none; }
@media (max-width: 719px){ .emptysw__l{ padding-block: 11px; } }

/* ---- розгортання «Повний паспорт» / «повний опис» (лише details) --------- */
details.fold > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap: var(--rp-s2);
  padding: 13px 16px; border: var(--rp-hair) solid var(--rp-edge); border-radius: var(--rp-r-pill);
  font-size: var(--rp-fs-small); font-weight:500; color: var(--rp-ink);
  transition: background-color var(--rp-dur) linear, border-color var(--rp-dur) linear;
}
details.fold > summary::-webkit-details-marker{ display:none; }
details.fold > summary::after{ content:"▾"; color: var(--rp-muted); }
details.fold[open] > summary::after{ content:"▴"; }
details.fold > summary:hover{ background: var(--rp-hover); border-color: var(--rp-flame); }
details.fold > summary:focus-visible{ outline: 2px solid var(--rp-focus); outline-offset: 2px; }
.fold__body{ margin-top: var(--rp-s4); }

/* ---- умови купівлі плашками з розгортанням -------------------------------- */
.termgrid{ display:grid; gap: var(--rp-s2); }
@media (min-width: 760px){ .termgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.term{ background: var(--rp-sunk); border-radius: var(--rp-r); }
.term > summary{ cursor:pointer; list-style:none; display:block; padding: var(--rp-s3); }
.term > summary::-webkit-details-marker{ display:none; }
.term > summary:hover{ background: var(--rp-hover); }
.term > summary:focus-visible{ outline: 2px solid var(--rp-focus); outline-offset: -2px; }
.term__t{ display:flex; justify-content:space-between; align-items:baseline; gap: var(--rp-s2); font-weight:500; }
.term__t::after{ content:"▾"; color: var(--rp-muted); }
.term[open] .term__t::after{ content:"▴"; }
.term__line{ display:block; margin-top: var(--rp-s1); font-size: var(--rp-fs-small); color: var(--rp-muted); }
.term__body{ padding: 0 var(--rp-s3) var(--rp-s3); font-size: var(--rp-fs-small); }
.term__body .note{ margin-top: var(--rp-s2); }

/* ---- сервіс: плашки напрямів (головна + сторінка «Сервіс») ---------------- */
.svcgrid{ list-style:none; margin:0; padding:0; display:grid; gap: var(--rp-s2); }
@media (min-width: 560px){ .svcgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.svc{
  background: var(--rp-paper); border: var(--rp-hair) solid var(--rp-line);
  border-radius: var(--rp-r); box-shadow: var(--rp-sh-1); padding: var(--rp-s4);
}
.band--paper .svc{ background: var(--rp-sunk); }
.svc b{ display:block; font-weight: var(--rp-w-bold); font-size: var(--rp-fs-ui); }
.svc p{ margin-top:5px; font-size: var(--rp-fs-small); color: var(--rp-muted); }

/* ---- шлях назад ----------------------------------------------------------- */
.backrow{ margin-top: var(--rp-s2); }
.backrow .link{ display:inline-block; padding-block: 12px; }

/* ---- закріплений рядок ціни на вузькому екрані ----------------------------
   Єдиний дозволений повтор числа ціни на сторінці (план дієти §5). */
.buybar{ display:none; }
@media (max-width: 939px){
  .single-product .buybar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap: var(--rp-s3);
    padding: var(--rp-s2) var(--rp-pad);
    background: var(--rp-paper); box-shadow: 0 -8px 30px rgb(13 27 42 / .10);
  }
  .single-product{ padding-bottom: var(--rp-s7); }
}

/* ═══ V2 · ДОДАНЕ ЗБІРКОЮ ГОЛОВНОЇ ════════════════════════════════════════ */
/* ---- тизер каталогу ---- */
.tez{
  list-style:none; display:grid; gap: var(--rp-s3);
  grid-template-columns: minmax(0,1fr);
  margin-top: var(--rp-s4);
}
@media (min-width: 560px){  .tez{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px){ .tez{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tez__a{
  display:flex; flex-direction:column; gap:10px; height:100%;
  background: var(--rp-paper); padding: 14px 14px 16px;
  border: var(--rp-hair) solid var(--rp-line); border-radius: var(--rp-r);
  box-shadow: var(--rp-sh-1); text-decoration:none;
  transition: background-color var(--rp-dur) linear;
}
.tez__a:hover{
  background: var(--rp-paper); border-color: var(--rp-flame);
  transform: translateY(-7px); box-shadow: var(--rp-sh-3);
}
.tez__a:hover .tez__shot img{ transform: scale(1.05); }
.tez__shot{
  position:relative;
  background: var(--rp-photo); aspect-ratio: 4/3; overflow:hidden;
  border: var(--rp-hair) solid var(--rp-line); border-radius: var(--rp-r-sm);
}
.tez__shot img{
  width:100%; height:100%; object-fit:cover;
  transition: transform var(--rp-dur-slow) var(--rp-ease);
}
.tez__t{ font-size: var(--rp-fs-body); font-weight:500; line-height:1.3; letter-spacing:-.008em; }
.tez__a:hover .tez__t{ text-decoration:underline; text-decoration-thickness: var(--rp-hair); text-underline-offset:3px; }
.tez__price{ margin-top:auto; padding-top:2px; color: var(--rp-ink); }

/* бейдж стану — поверх фото, лівий верхній кут фото-зони (правка 25.08) */
.card-flags{
  position:absolute; top:8px; left:8px; z-index:1;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  pointer-events:none;
}
.card-flags .stamp:not(.stamp--ink){
  background: var(--rp-paper); box-shadow: 0 2px 6px rgb(0 0 0 / .12);
}
/* «вживана» кружком у куті — форма з референсу, зміст наш: стан, не знижка */
.card-flags .stamp--ink{ box-shadow: var(--rp-sh-flame-sm); }

/* ---- віджет підбору: стрічка смуг ---- */
.pidbir .chipset{ gap: var(--rp-s2); }
.pidbir .btnrow{ margin-top: var(--rp-s4); }

/* ===== НАТИСКНА ЦІЛЬ (додатки до основи) ================================== */
@media (max-width: 719px){
  .chip{ padding-block: 12px; }
  .seg button, .seg a{ 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; }
  .crumbs a{ display:inline-block; padding-block: 12px; }
  .r-t a{ padding-block: 3px; }
  .tale summary{ padding-block: 11px; }
  p > .link:only-child,
  .filt__pow > .link,
  p.note .link,
  .pick__res-b > .link{ display:inline-block; padding-block: 11px; }
  .gal__thumbs{ gap: 6px; }
}

.rev__stars--card{ display:inline-flex; gap:2px; color: var(--rp-flame); margin-bottom: 6px; }

/* ===== 14. МАГАЗИН: ПЛАШКА ПОВІДОМЛЕННЯ Й КЛАСИЧНИЙ КОШИК (25.08) ==========
   Кошик переведено з блочного на класичний шорткод [woocommerce_cart]
   (див. templates/page-cart.html). Замість трьох таблиць стилів WooCommerce
   тут стільки правил, скільки треба саме нашій розмітці, — мовою теми
   й лише на токенах.
   ========================================================================= */

/* --- плашка «товар додано до кошика».
   WooCommerce 11 віддає її блочною розміткою навіть класичним сторінкам,
   але wc-blocks.css при цьому не підключає. На блочному оформленні плашку
   малює сам WooCommerce — там наші правила не діють. */
body:not(.woocommerce-checkout) .woocommerce-notices-wrapper{ display:grid; gap: var(--rp-s2); }
body:not(.woocommerce-checkout) .woocommerce-notices-wrapper:not(:empty){ margin-bottom: var(--rp-s4); }
body:not(.woocommerce-checkout) .wc-block-components-notice-banner{
  display:flex; align-items:flex-start; gap: var(--rp-s3);
  padding: 14px var(--rp-s4);
  background: var(--rp-paper);
  border: var(--rp-hair) solid var(--rp-edge);
  border-left: 3px solid var(--rp-flame);
  border-radius: var(--rp-r);
  font-size: var(--rp-fs-small); line-height:1.45; color: var(--rp-ink);
}
body:not(.woocommerce-checkout) .wc-block-components-notice-banner > svg{
  flex:none; width:20px; height:20px; margin-top:1px; fill: var(--rp-flame);
}
body:not(.woocommerce-checkout) .wc-block-components-notice-banner.is-error{ border-left-color: var(--rp-stop); }
body:not(.woocommerce-checkout) .wc-block-components-notice-banner.is-error > svg{ fill: var(--rp-stop); }
body:not(.woocommerce-checkout) .wc-block-components-notice-banner__content{
  flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap: var(--rp-s2) var(--rp-s4);
}
/* «Переглянути кошик» у плашці — посилання, а не друга велика кнопка */
body:not(.woocommerce-checkout) .wc-block-components-notice-banner__content .button{
  padding:0; background:none; border:0; color: var(--rp-flame);
  font-size: var(--rp-fs-small); text-decoration:none;
  border-bottom: var(--rp-hair) solid currentColor;
}
body:not(.woocommerce-checkout) .wc-block-components-notice-banner__content .button:hover{ color: var(--rp-ink); }

/* --- каркас сторінки кошика */
.woocommerce-cart-form{ margin:0; }
.woocommerce-cart-form table.cart{
  width:100%; border-collapse:collapse;
  background: var(--rp-paper);
  border: var(--rp-hair) solid var(--rp-edge); border-radius: var(--rp-r);
  overflow:hidden;
}
.woocommerce-cart-form table.cart thead th.product-price,
.woocommerce-cart-form table.cart thead th.product-subtotal{ text-align:right; }
.woocommerce-cart-form table.cart thead th.product-quantity{ text-align:center; }
.woocommerce-cart-form table.cart thead th{
  text-align:left; font-size: var(--rp-fs-micro); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color: var(--rp-muted);
  padding: 12px 14px; border-bottom: var(--rp-hair) solid var(--rp-rule);
  white-space:nowrap;
}
.woocommerce-cart-form table.cart td{
  padding: 14px; border-top:0; border-bottom: var(--rp-hair) solid var(--rp-line);
  vertical-align:middle;
}
.woocommerce-cart-form table.cart tr:last-child td{ border-bottom:0; }
.woocommerce-cart-form .product-remove{ width:44px; min-width:44px; text-align:center; }
.woocommerce-cart-form .product-remove a.remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius: var(--rp-r-pill);
  color: var(--rp-muted); text-decoration:none; font-size:1.1rem; line-height:1;
}
.woocommerce-cart-form .product-remove a.remove:hover{ background: var(--rp-hover); color: var(--rp-stop); }
.woocommerce-cart-form .product-thumbnail{ width:92px; }
/* max-width:100% з основи стискав би кадр до ширини вузької комірки */
.woocommerce-cart-form .product-thumbnail img{
  width:78px; min-width:78px; max-width:78px; height:auto;
  aspect-ratio: 4/3; object-fit:cover;
  background: var(--rp-photo); border-radius: var(--rp-r-sm);
  display:block;
}
/* назва забирає весь залишок ширини, решта колонок — по вмісту */
.woocommerce-cart-form .product-name{ width:100%; }
.woocommerce-cart-form .product-name a{ color: var(--rp-ink); text-decoration:none; }
.woocommerce-cart-form .product-name a:hover{ color: var(--rp-flame); }
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal{
  font-variant-numeric: tabular-nums;
  white-space:nowrap; text-align:right;
}
.woocommerce-cart-form .product-subtotal{ font-weight:500; }
.woocommerce-cart-form .product-quantity{ width:110px; }
.woocommerce-cart-form .quantity .qty{
  width:72px; padding: 9px 10px; text-align:center;
  font-variant-numeric: tabular-nums;
  color: var(--rp-ink); background: var(--rp-paper);
  border: var(--rp-hair) solid var(--rp-edge); border-radius: var(--rp-r-sm);
}
/* рядок дій лишається коміркою таблиці (colspan=6) — розкладку робить
   внутрішній inline-flex, інакше td випадає з рядка */
.woocommerce-cart-form td.actions{ background: var(--rp-hover); }
.woocommerce-cart-form td.actions .coupon{
  display:inline-flex; gap: var(--rp-s2); vertical-align:middle;
}
/* специфічність вища за woocommerce.css, де .input-text у діях = 80px */
.woocommerce-cart-form table.cart td.actions .coupon .input-text{
  width:190px; padding: 10px 12px; color: var(--rp-ink); background: var(--rp-paper);
  border: var(--rp-hair) solid var(--rp-edge); border-radius: var(--rp-r-sm);
}
.woocommerce-cart-form td.actions .coupon .button{ white-space:nowrap; }
.woocommerce-cart-form td.actions button[name="update_cart"]{ float:right; }

/* --- підсумок і перехід до оформлення */
.cart-collaterals{ margin-top: var(--rp-s5); display:flex; justify-content:flex-end; }
.cart-collaterals .cart_totals{ width:min(420px, 100%); }
.cart-collaterals .cart_totals h2{ font-size: var(--rp-fs-h3); margin-bottom: var(--rp-s3); }
.cart-collaterals .cart_totals table{
  width:100%; border-collapse:collapse;
  background: var(--rp-paper);
  border: var(--rp-hair) solid var(--rp-edge); border-radius: var(--rp-r);
  overflow:hidden;
}
.cart-collaterals .cart_totals th{
  text-align:left; font-weight:400; color: var(--rp-muted);
  padding: 12px 14px; border-top:0; border-bottom: var(--rp-hair) solid var(--rp-line);
}
.cart-collaterals .cart_totals td{
  padding: 12px 14px; text-align:right; border-top:0;
  border-bottom: var(--rp-hair) solid var(--rp-line);
  font-variant-numeric: tabular-nums;
  white-space:nowrap; width:1%;
}
.cart-collaterals .cart_totals tr:last-child th,
.cart-collaterals .cart_totals tr:last-child td{ border-bottom:0; }
.cart-collaterals .cart_totals .order-total th,
.cart-collaterals .cart_totals .order-total td{ background: var(--rp-tint); color: var(--rp-ink); }
.cart-collaterals .cart_totals .order-total th{ font-weight:500; color: var(--rp-ink); }
.cart-collaterals .cart_totals .order-total td{ font-size: 1.0625rem; font-weight:500; }
.wc-proceed-to-checkout{ margin-top: var(--rp-s3); }
.wc-proceed-to-checkout .checkout-button{ display:block; width:100%; text-align:center; }

/* --- порожній кошик */
.cart-empty{ font-size: var(--rp-fs-lead); }
.return-to-shop{ margin-top: var(--rp-s3); }

@media (max-width: 720px){
  .woocommerce-cart-form table.cart,
  .woocommerce-cart-form table.cart tbody{ display:block; }
  .woocommerce-cart-form table.cart thead{ display:none; }
  .woocommerce-cart-form table.cart tr{ display:block; }
  .woocommerce-cart-form table.cart td{ display:block; padding:0; border:0; }
  .woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item{
    display:grid; grid-template-columns:78px 1fr auto; gap:4px var(--rp-s3);
    align-items:center; padding: var(--rp-s3);
    border-bottom: var(--rp-hair) solid var(--rp-line);
  }
  .woocommerce-cart-form .product-thumbnail{ grid-column:1; grid-row:1 / span 3; width:auto; }
  .woocommerce-cart-form .product-name{ grid-column:2; grid-row:1; width:auto; }
  .woocommerce-cart-form .product-remove{ grid-column:3; grid-row:1; width:auto; }
  .woocommerce-cart-form .product-price{ grid-column:2; grid-row:2; text-align:left; color: var(--rp-muted); }
  .woocommerce-cart-form .product-quantity{ grid-column:2; grid-row:3; width:auto; }
  .woocommerce-cart-form .product-subtotal{ grid-column:3; grid-row:3; }
  .woocommerce-cart-form td.actions{ padding: var(--rp-s3); }
  .woocommerce-cart-form table.cart td.actions .coupon{ display:flex; flex-wrap:wrap; }
  .woocommerce-cart-form table.cart td.actions .coupon .input-text{ width:100%; }
  .woocommerce-cart-form td.actions button[name="update_cart"]{ float:none; width:100%; margin-top: var(--rp-s2); }
  .cart-collaterals{ justify-content:stretch; }
}

/* ═══ ДВЕРІ АУДИТОРІЙ ═══════════════════════════════════════════════════════
   Перший вибір на головній: побутовий підбір чи промисловий. Двоє великих
   воріт, а не список посилань — рішення тут одне і воно бінарне. */

.doors{ display:grid; gap: var(--rp-s3); grid-template-columns: 1fr; }
@media (min-width: 720px){ .doors{ grid-template-columns: 1fr 1fr; } }

.door{
  display:grid; align-content:start; gap: 10px;
  background: var(--rp-paper); border: var(--rp-hair) solid var(--rp-line);
  border-radius: var(--rp-r-lg); padding: var(--rp-s4);
  text-decoration:none; color: var(--rp-ink);
  box-shadow: var(--rp-sh-1);
  transition: border-color var(--rp-dur-2) ease, transform var(--rp-dur-2) ease,
              box-shadow var(--rp-dur-2) ease;
}
.door:hover{
  border-color: var(--rp-flame); transform: translateY(-7px);
  box-shadow: var(--rp-sh-3);
}
.door:focus-visible{ outline: 2px solid var(--rp-focus); outline-offset: 3px; }

.door__t{ font-family: var(--rp-font-head); font-size: var(--rp-fs-h3); font-weight: var(--rp-w-bold); }
.door__n{ font-size: var(--rp-fs-small); color: var(--rp-muted); }
.door__n .num{ color: var(--rp-ink); font-variant-numeric: tabular-nums; }
.door__d{ font-size: var(--rp-fs-small); color: var(--rp-muted); max-width: 46ch; }
.door__go{ margin-top: 4px; color: var(--rp-flame); font-size: var(--rp-fs-data); font-weight: var(--rp-w-semi); }

.doors__alt{
  margin-top: var(--rp-s4);
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--rp-s3) var(--rp-s4);
}
.doors__alt .note{ max-width: 60ch; }

/* калькулятор окремим рядком кнопками під підбором (правка 10.09) */
.calcrow{
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--rp-s3) var(--rp-s4);
  padding-top: var(--rp-s4); border-top: var(--rp-hair) solid var(--rp-line);
}
.calcrow__t{ font-size: var(--rp-fs-small); font-weight: var(--rp-w-semi); color: var(--rp-ink); }
.calcrow .btnrow{ gap: var(--rp-s2); }

/* ═══ ФАСЕТИ: порожні значення й неповні поля ═══════════════════════════════
   Значення, яке нічого не дасть, лишається видимим і не клікається: покупець
   має бачити межі складу, а не гадати, чому позиції зникли. */

.chip--empty{ color: var(--rp-muted); border-style: dashed; pointer-events:none; }
.chip--empty .chip__c{ color: var(--rp-muted); }
.facet__miss{ grid-column: 2; margin-top: 6px; color: var(--rp-muted); }

/* ═══ ТИПОВІ НАБОРИ КАЛЬКУЛЯТОРА ═══════════════════════════════════════════
   Вхід для того, хто не знає своїх кіловат: «дім на сто метрів» замість
   переліку приладів. Набір заповнює перелік нижче, далі людина править. */

.calc__presets{ margin-bottom: var(--rp-s4); }
.calc__presets .note{ margin: 6px 0 var(--rp-s3); max-width: 62ch; }
.chipset--wide{ grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
/* Картка набору — два рядки тексту, тому радіус картки, а не пігулки:
   у пігулці текст упирався в заокруглені краї (правка 10.09). */
.chipset .chip--preset{
  display:grid; gap: 5px; text-align:left; white-space: normal;
  padding: 14px 18px; height:auto; cursor:pointer; justify-content: start; align-content:start;
  border-radius: var(--rp-r);
}
.chipset .chip--preset .chip__n{ font-size: 13px; font-weight: 500; color: var(--rp-ink); }
.chipset .chip--preset .chip__h{ font-size: 12px; color: var(--rp-muted); line-height: 1.35; }
.chip--preset[aria-pressed="true"] .chip__h{ color: var(--rp-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   17 · СІТКА КАРТОК (перенесення з generatorpro.co.uk, 27.08)
   Картка й рядок відомості — два вигляди одного запису. Рядок лишається:
   він показує характеристики в стовпчик, і саме заради цього робився.
   ═══════════════════════════════════════════════════════════════════════════ */
.grid{
  display:grid; gap: var(--rp-s3);
  grid-template-columns: repeat(auto-fill, minmax(min(238px, 100%), 1fr));
  margin-top: var(--rp-s4);
}
@media (min-width: 1180px){ .grid--home{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.card{
  display:flex; flex-direction:column; overflow:hidden;
  background: var(--rp-paper);
  border: var(--rp-hair) solid var(--rp-line);
  border-radius: var(--rp-r);
  box-shadow: var(--rp-sh-1);
  transition: transform var(--rp-dur-2) var(--rp-ease),
              box-shadow var(--rp-dur-2) var(--rp-ease),
              border-color var(--rp-dur-2) var(--rp-ease);
}
.card:hover{
  transform: translateY(-7px);
  box-shadow: var(--rp-sh-3);
  border-color: var(--rp-flame);
}

/* фото вписується на білому, а не обрізається: сітка показує машину цілком */
.card__shot{
  position:relative; overflow:hidden;
  background: var(--rp-photo);
  border-bottom: var(--rp-hair) solid var(--rp-line);
}
.card__shot img{
  display:block; width:100%; aspect-ratio: 4/3;
  object-fit: contain; padding: 12px;
  transition: transform var(--rp-dur-slow) var(--rp-ease);
}
.card:hover .card__shot img{ transform: scale(1.05); }

.card__body{ padding: 14px 14px 0; flex:1 1 auto; }
.card__t{
  font-size: var(--rp-fs-card); font-weight: var(--rp-w-semi);
  line-height:1.35; letter-spacing:-.01em;
}
.card__t a{ color: var(--rp-ink); text-decoration:none; }
.card:hover .card__t a{ color: var(--rp-flame); }
.card__by{ margin-top:5px; font-size: var(--rp-fs-data); color: var(--rp-muted); }
.card__hours{ margin-top:4px; font-size: var(--rp-fs-data); color: var(--rp-muted); }

/* показники в картці (правка 01.09): пари «підпис — значення» двома
   колонками. Підпис приглушений, значення кольором тексту — щоб цифри
   читались першими при швидкому перегляді сітки. */
.card__spec{
  display:grid; grid-template-columns: auto 1fr; gap: 2px var(--rp-s2);
  margin-top: 10px; padding-top: 10px;
  border-top: var(--rp-hair) solid var(--rp-line);
  font-size: var(--rp-fs-data); line-height:1.35;
}
.card__spec dt{ color: var(--rp-muted); }
.card__spec dd{ margin:0; color: var(--rp-ink); font-variant-numeric: tabular-nums; }

.card__buy{ display:grid; gap:10px; padding: 12px 14px 16px; }
.card__buy .price{ font-size: var(--rp-fs-price); }
.card__buy .price--none{ font-size: var(--rp-fs-small); color: var(--rp-muted); }

/* бейдж стану на картці — той самий знак, що й на рядку та сторінці машини */
.card .card-flags{ top:10px; left:10px; }


/* ═══════════════════════════════════════════════════════════════════════════
   18 · БЛОКИ ГОЛОВНОЇ (перенесення з generatorpro.co.uk, 27.08)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- герой каруселлю ------------------------------------------------------
   Механіка — scroll-snap. Слайди лишаються в потоці (inert, не display:none),
   інакше ліниве завантаження сусідніх кадрів не спрацює. */
.hero--slides{ position:relative; background: var(--rp-navy); overflow:hidden; }
.hero__track{
  display:flex; scroll-snap-type: x mandatory;
  overflow-x:auto; overscroll-behavior-x: contain;
  scrollbar-width:none;
}
.hero__track::-webkit-scrollbar{ display:none; }
.hero__track:focus-visible{ outline: 2px solid var(--rp-flame); outline-offset:-2px; }

.hero__slide{
  flex: 0 0 100%; scroll-snap-align:start;
  display:grid; grid-template-columns: minmax(0,1fr);
  min-width:0;
}
@media (min-width: 980px){
  .hero__slide{ grid-template-columns: minmax(0,42fr) minmax(0,58fr); align-items:stretch; }
}

.hero__panel{
  display:flex; flex-direction:column; justify-content:center; gap: var(--rp-s3);
  padding: var(--rp-pad-block) var(--rp-pad);
  background: var(--rp-navy);
}
.hero__h{
  font-size: var(--rp-fs-display); font-weight: var(--rp-w-bold);
  line-height:1.12; letter-spacing: var(--rp-ls-tight); color: var(--rp-on-dark);
}
.hero__lead{ color: var(--rp-on-dark-2); max-width: 46ch; }
.hero__lead b{ color: var(--rp-on-dark); font-weight: var(--rp-w-bold); }
.hero__acts{ display:flex; flex-wrap:wrap; gap: var(--rp-s2) 12px; margin-top: var(--rp-s2); }
.hero__act{ margin:0; }

.hero__shot{ position:relative; overflow:hidden; min-height: clamp(220px, 34vw, 460px); }
.hero__shot img{ display:block; width:100%; height:100%; object-fit:cover; }
.hero__cap{
  position:absolute; left:0; right:0; bottom:0;
  display:grid; gap:2px; padding: 28px 24px 20px;
  background: var(--rp-scrim-cap); color:#FFFFFF;
}
.hero__cap span{
  font-size: var(--rp-fs-badge); font-weight: var(--rp-w-bold);
  letter-spacing: var(--rp-ls-wide); text-transform:uppercase; color: var(--rp-flame);
}
.hero__cap b{ font-size: var(--rp-fs-h3); font-weight: var(--rp-w-bold); }

.hero__ctl{
  position:absolute; right: var(--rp-pad); bottom: var(--rp-s3); z-index:2;
  display:flex; align-items:center; gap: var(--rp-s2);
}
.hero__nav, .hero__pause{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:0; border-radius: var(--rp-r-pill);
  background: rgb(255 255 255 / .92); color: var(--rp-navy);
  font-size:18px; line-height:1; cursor:pointer;
  box-shadow: var(--rp-sh-2);
  transition: transform var(--rp-dur) linear;
}
.hero__nav:hover, .hero__pause:hover{ transform: scale(1.08); }
.hero__nav:focus-visible, .hero__pause:focus-visible,
.hero__dot:focus-visible{ outline: 2px solid var(--rp-flame); outline-offset:2px; }
/* пауза: два штрихи ⏸ / трикутник ▶ — малюємо, щоб не тягти ще один SVG */
.hero__pause::before{ content:"❚❚"; font-size:11px; letter-spacing:1px; }
.hero__pause[aria-pressed="true"]::before{ content:"▶"; font-size:12px; }

.hero__dots{ display:flex; gap:6px; }
.hero__dot{
  width:22px; height:4px; padding:0; border:0; border-radius:2px; cursor:pointer;
  background: rgb(255 255 255 / .35);
  transition: background-color .3s linear, width .3s linear;
}
.hero__dot[aria-current="true"]{ background: var(--rp-flame); width:30px; }
/* Крапка — смужка 4px заввишки: пальцем у неї не влучити. Смужка лишається
   такою ж, а поле дотику розширює псевдоелемент поверх неї (правка 01.09). */
.hero__dot{ position:relative; }
.hero__dot::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:44px; transform: translateY(-50%);
}

/* На вузькому екрані підпис слайда й керування стоять в одному куті й
   налазять одне на одне. Розводимо: підпис вище, керування під ним. */
@media (max-width: 719px){
  .hero__cap{ padding: 24px 16px 56px; }
  .hero__ctl{ right:12px; bottom:10px; gap:6px; }
  .hero__nav, .hero__pause{ width:32px; height:32px; font-size:16px; }
}

/* Карусель у сітці сайту (правка 10.09): темне тло лишається на всю ширину,
   а слайди стоять у тій самій колонці, що й решта блоків.
   · Обгортка — .hero__frame: клас .hero__in уже зайнятий старим героєм
     (сітка 52/48), і назва зіткнулась би з ним.
   · Поле сітки — padding самого слайда, а не обгортки: так сусідній слайд
     починається за полем, і сяйво його кнопок не заходить у кадр.
   · Трек — position:relative, бо сценарій гортає за offsetLeft слайда. */
.hero__frame{ position:relative; max-width: var(--rp-max); margin-inline:auto; }
.hero__track{ position:relative; }
.hero__slide{ padding-inline: var(--rp-pad); }
.hero__panel{ padding-inline: 0; }
@media (min-width: 980px){
  .hero__panel{ padding-right: var(--rp-s5); }
  .hero__shot{ margin-block: var(--rp-s5); border-radius: var(--rp-r-lg); }
  .hero--slides .hero__ctl{ right: calc(var(--rp-pad) + var(--rp-s3)); bottom: calc(var(--rp-s5) + var(--rp-s3)); }
}
@media (max-width: 979px){
  .hero__shot{ margin-bottom: var(--rp-s4); border-radius: var(--rp-r); }
  .hero--slides .hero__ctl{ right: calc(var(--rp-pad) + 12px); bottom: calc(var(--rp-s4) + 10px); }
}

/* ---- смуга довіри --------------------------------------------------------- */
.trustband{ border-top: var(--rp-hair) solid var(--rp-dark-line); }
.trust{
  list-style:none; display:grid; gap: var(--rp-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr));
}
.trust__it{ display:grid; gap:6px; align-content:start; padding-inline: var(--rp-s2); }
@media (min-width: 720px){
  .trust__it{ border-right: var(--rp-hair) solid var(--rp-dark-line); }
  .trust__it:last-child{ border-right:0; }
}
.trust__i{ color: var(--rp-flame); }
.trust__t{ font-size: var(--rp-fs-ui); font-weight: var(--rp-w-bold); color: var(--rp-on-dark); }
.trust__d{ font-size: var(--rp-fs-data); color: var(--rp-on-dark-2); }
.trust--col{ grid-template-columns: minmax(0,1fr); gap: var(--rp-s3); }
.trust--col .trust__it{ border-right:0; padding-inline:0; }

/* ---- бенто-плитки --------------------------------------------------------- */
.bento{
  display:grid; gap: var(--rp-s3); margin-top: var(--rp-s4);
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 720px){  .bento{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px){
  .bento{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .bento__t--lg{ grid-column: span 2; }
}
.bento__t{
  position:relative; display:block; overflow:hidden;
  min-height: 240px; border-radius: var(--rp-r-lg);
  background: var(--rp-navy-mid); color:#FFFFFF; text-decoration:none;
  transition: transform var(--rp-dur-2) var(--rp-ease), box-shadow var(--rp-dur-2) var(--rp-ease);
}
.bento__t--lg{ min-height: 300px; }
.bento__t:hover{ transform: translateY(-7px); box-shadow: var(--rp-sh-3); }
.bento__t:focus-visible{ outline: 2px solid var(--rp-flame); outline-offset:3px; }
.bento__shot{ position:absolute; inset:0; }
.bento__shot img{
  width:100%; height:100%; object-fit:cover;
  transition: transform var(--rp-dur-slow) var(--rp-ease);
}
.bento__t:hover .bento__shot img{ transform: scale(1.06); }
.bento__grad{ position:absolute; inset:0; background: var(--rp-scrim); }
.bento__body{
  position:relative; display:grid; gap:6px; align-content:end;
  height:100%; padding: var(--rp-s4);
}
.bento__h{ font-size: var(--rp-fs-h3); font-weight: var(--rp-w-bold); }
.bento__n{ font-size: var(--rp-fs-data); color: rgb(255 255 255 / .9); }
.bento__n .num{ color:#FFFFFF; }
.bento__d{ font-size: var(--rp-fs-data); color: rgb(255 255 255 / .78); max-width: 42ch; }
.bento__t--sm .bento__d{ display:none; }
.bento__go{
  margin-top:4px; font-size: var(--rp-fs-data);
  font-weight: var(--rp-w-semi); color: var(--rp-flame);
}

/* ---- темний блок «чому нам можна вірити» ---------------------------------- */
.why{ display:grid; gap: var(--rp-s5); align-items:center; }
@media (min-width: 980px){ .why{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.why__text{ display:grid; gap: var(--rp-s3); align-content:start; }
.why__text h2{ color: var(--rp-on-dark); }
.why__text .lead{ color: var(--rp-on-dark-2); max-width: 48ch; }
/* кнопки відступають від пігулок-переваг, щоб не читались одним рядом (правка 10.09) */
.why__text .btnrow{ margin-top: var(--rp-s4); }
.why__wave canvas{ display:block; width:100%; height: clamp(200px, 26vw, 340px); }

.pills{ list-style:none; display:flex; flex-wrap:wrap; gap: 10px; }
.pill{
  padding: 10px 18px; border-radius: var(--rp-r-pill);
  background: var(--rp-dark-fill); border: var(--rp-hair) solid var(--rp-dark-line);
  font-size: var(--rp-fs-data); color: var(--rp-on-dark);
}

.figs{
  list-style:none; display:grid; gap: var(--rp-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr));
  margin-top: var(--rp-s5);
}
.fig{
  display:grid; gap:4px; padding: var(--rp-s4);
  background: var(--rp-dark-fill-2); border: var(--rp-hair) solid var(--rp-dark-line-2);
  border-radius: var(--rp-r);
}
.fig__n{
  font-size: var(--rp-fs-metric); font-weight: var(--rp-w-bold);
  line-height:1.05; color: var(--rp-flame);
}
.fig__t{ font-size: var(--rp-fs-data); color: var(--rp-on-dark-3); }

/* ---- фінальний заклик ------------------------------------------------------ */
.cta{
  display:grid; gap: var(--rp-s4); align-items:center;
  padding: var(--rp-pad-block) clamp(24px, 4vw, 56px);
  border-radius: var(--rp-r-lg);
  background: var(--rp-cta-grad); color:#FFFFFF;
}
@media (min-width: 900px){ .cta{ grid-template-columns: minmax(0,1fr) auto; gap: var(--rp-s5); } }
.cta__h{ font-size: var(--rp-fs-h2); font-weight: var(--rp-w-bold); color:#FFFFFF; }
.cta__l{ margin-top:8px; font-size: var(--rp-fs-ui); color: rgb(255 255 255 / .88); max-width: 52ch; }
.cta__acts{ display:flex; flex-wrap:wrap; gap: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   19 · СТОРІНКА МАШИНИ Й КОШИК під нову форму (27.08)
   ═══════════════════════════════════════════════════════════════════════════ */

/* галерея карткою — бейдж стану лягає в її куток */
.gal--card{ position:relative; }
.gal--card > .card-flags{ top:12px; left:12px; }

/* смуга довіри стовпчиком у блоці купівлі */
.buy .trust--col{
  margin-top: var(--rp-s4); padding-top: var(--rp-s4);
  border-top: var(--rp-hair) solid var(--rp-line);
}
.buy .trust--col .trust__it{
  grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  gap: 2px var(--rp-s2); align-items:start;
}
.buy .trust--col .trust__i{ grid-row: span 2; margin-top:2px; color: var(--rp-flame); }
.buy .trust--col .trust__t{ color: var(--rp-ink); font-size: var(--rp-fs-small); }
.buy .trust--col .trust__d{ color: var(--rp-muted); font-size: var(--rp-fs-data); }

/* панель — картка навколо блоку сторінки машини */
.panel{
  background: var(--rp-paper);
  border: var(--rp-hair) solid var(--rp-line);
  border-radius: var(--rp-r);
  box-shadow: var(--rp-sh-1);
  padding: clamp(18px, 2.4vw, 28px);
}
.panel--tint{ background: var(--rp-tint); border-color: transparent; box-shadow:none; }
.panel--flat{ box-shadow:none; }

/* кошик: підсумок у темно-синій панелі, як у референсі */
.woocommerce-cart .cart_totals{
  background: var(--rp-navy); color: var(--rp-on-dark);
  border-radius: var(--rp-r-lg); padding: clamp(20px, 3vw, 32px);
}
.woocommerce-cart .cart_totals h2{ color: var(--rp-on-dark); }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td{ border-color: var(--rp-dark-line); color: var(--rp-on-dark); }
/* рядок «Загалом» усередині темної панелі: світлий підклад там читався
   як чужа плашка — робимо його своїм */
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td{
  background: rgb(255 255 255 / .07) !important;
  color: var(--rp-on-dark) !important;
}
.woocommerce-cart .cart_totals .order-total td .amount,
.woocommerce-cart .cart_totals .order-total td bdi{ color: var(--rp-flame); }

/* Підписи підсумку зникали (правка 10.09): таблиця лишалась білою
   (--rp-paper з розділу 14), а текст у темній панелі теж білий. */
.woocommerce-cart .cart_totals table{ background: transparent; border-color: var(--rp-dark-line); }
.woocommerce-cart .cart_totals table th{ color: var(--rp-on-dark-2); }

/* Ширина панелі. woocommerce-layout.css ставить float:right і 48% — на
   телефоні панель стискалась до 160px, таблиця вилазила за край, а кнопка
   «Перейти до оформлення» ламалась у три рядки й ставала кругом. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals{ float:none; width: min(420px, 100%); }
@media (max-width: 720px){
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals{ width:100%; }
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.button{ display:block; padding: 15px 24px; line-height:1.25; }

/* Порожній кошик (правка 10.09): іконка, текст і кнопка в каталог — по центру */
.cartnil{ display:grid; justify-items:center; gap: var(--rp-s2); text-align:center; padding-top: var(--rp-s4); }
.cartnil__i{
  display:flex; align-items:center; justify-content:center;
  width:120px; height:120px; margin-bottom: var(--rp-s3);
  border-radius: var(--rp-r-pill); background: var(--rp-tint); color: var(--rp-flame);
}
.cartnil__t{ max-width: 44ch; }
.woocommerce-cart .return-to-shop{ margin-top: var(--rp-s4); text-align:center; }
.woocommerce-cart .return-to-shop a.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 26px; border:0; border-radius: var(--rp-r-pill);
  background: var(--rp-flame); color:#FFFFFF; text-decoration:none;
  font-weight: var(--rp-w-semi); box-shadow: var(--rp-sh-flame);
}
.woocommerce-cart .return-to-shop a.button:hover{ background: var(--rp-flame-hi); color:#FFFFFF; }

/* Оформлення на вузькому екрані стояло впритул до країв: поля й панелі
   займали 0–375px, і рамки полів зрізало краєм вікна (правка 10.09). */
body.woocommerce-checkout main.wp-block-group{ padding-inline: var(--rp-pad); }

.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.button{
  background: var(--rp-flame) !important; color:#FFFFFF !important;
  border-radius: var(--rp-r-pill); font-weight: var(--rp-w-semi);
  box-shadow: var(--rp-sh-flame);
}

/* оформлення: головна кнопка блочного WooCommerce — та сама пігулка */
.wc-block-components-button,
.wc-block-components-checkout-place-order-button{
  border-radius: var(--rp-r-pill) !important;
  background: var(--rp-flame) !important; color:#FFFFFF !important;
  font-weight: var(--rp-w-semi) !important;
}
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover{ background: var(--rp-flame-hi) !important; }