/* Порядок каскадних шарів: важливі оголошення в РАННЬОМУ шарі сильніші.
   hb-ui — наші елементи (кнопка теми), hb-dark — перекриття темного режиму. */
@layer hb-ui, hb-dark;

/* custom.css — загальні структурні правки дизайну поверх теми oct_ultrastore.
   Файл спільний для всіх сайтів (symlink на /home/admin/shared/custom.css) —
   правка тут одразу застосовується на всіх клонах.

   Сюди йдуть структурні речі (відступи, розташування, поведінка блоків),
   які однаково доречні на будь-якій ніші.

   Кольори/шрифти/радіуси/лого — НЕ сюди, це brand.css на кожному сайті окремо. */

/* ============================================================
   ТОКЕНИ КОЛЬОРУ (світла тема) — 2026-08-31.
   Єдине місце, звідки беруться кольори наших блоків.
   Значення тут — рівно ті, що були захардкожені раніше,
   тому вигляд світлої теми не змінюється ні на піксель.
   Темна тема (нижче) перевизначає ЦІ Ж змінні — і все,
   що на них спирається, перефарбовується автоматично.

   ВАЖЛИВО: змінні теми --tea-* тут НЕ оголошуємо —
   їх задає brand.css кожного сайту (military, obuv мають свої).
   У темному режимі ми перекриваємо їх із вищою специфічністю.
   ============================================================ */
:root{
  /* поверхні */
  --hb-bg:#ffffff;            /* фон сторінки */
  --hb-surface:#ffffff;       /* картки, поля вводу, плитки */
  --hb-surface-2:#F6F3EE;     /* плитка характеристики */
  --hb-surface-3:#F5F1E6;     /* «Як зробити замовлення», іконки умов */
  --hb-line:#E4DCCB;          /* рамки, роздільники */
  --hb-line-2:#EEE7DC;        /* світліша рамка */
  --hb-card-border:rgba(40,30,20,.08);
  --hb-card-shadow:0 6px 22px rgba(40,30,20,.07);

  /* текст */
  --hb-ink:#2B251C;           /* основний */
  --hb-ink-2:#2F2620;         /* значення характеристик */
  --hb-mut:#6b6252;           /* приглушений */
  --hb-dim:#8B816F;           /* мітки-капси */
  --hb-dim-2:#8a7f74;
  --hb-dim-3:#9a8f80;
  --hb-on-accent:#ffffff;     /* текст на кольоровій кнопці */

  /* зелений акцент */
  --hb-green:#5b8a4e;
  --hb-green-2:#4a7340;
  --hb-green-d:#426b39;
  --hb-green-t:#4C7A43;       /* зелений як колір тексту/обводки */
  --hb-green-h:#527f46;
  --hb-green-hd:#3a6033;
  --hb-green-3:#3E6537;
  --hb-green-soft:#F4F8F2;
  --hb-green-soft-2:#F1F6EF;
  --hb-green-line:#D9E2D5;
  --hb-green-line-h:#BFD2B8;

  /* золото */
  --hb-gold:#C9A45C;
  --hb-gold-l:#D8B978;
  --hb-gold-d:#A8853F;
  --hb-gold-2:#C9A44E;
  --hb-gold-2d:#A67F2E;
  --hb-gold-ink:#FFF8E6;
  --hb-gold-ink-2:#2F2610;

  /* стани й дрібниці */
  --hb-ok-bg:#E7F2E2;   --hb-ok-ink:#3f8a35;
  --hb-code-bg:#EFE8D5; --hb-code-ink:#5c5443;
  --hb-star-off:#C9C2B6;
  --hb-scroll-thumb:#e0d8c6;
}

/* Шрифт теми зашитий у main.css в кількох місцях (в т.ч. з !important) —
   не чіпаємо ядро теми, перебиваємо тут одним правилом на всі сайти. */
body, .us-body, [class*="us-"] {
  font-family: var(--brand-font, 'Open Sans', sans-serif) !important;
}
/* іконки не займати — інакше замість піктограм квадратики */
.fa, .fas, .far, .fab, .fal, [class*="fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* Текстовий фолбек логотипа — рендериться, коли в адмінці не завантажено
   картинку лого (тема віддає <h1><a>{{ name }}</a></h1>).
   Колір теми успадковувався тёмний і на тёмній шапці зникав; розмір 40px
   не влазив у колонку. Колір беремо зі змінної бренду — кожен сайт
   задає свій у brand.css, дефолт світлий. */
#logo h1 { margin: 0; line-height: 1.15; }
#logo h1 a {
  color: var(--brand-logo-color, #f2efe6);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}
#logo h1 a:hover { color: var(--brand-logo-color-hover, var(--brand-logo-color, #fff)); opacity: .85; }


/* DEMO-BLANK 2026-08-31: фото в картках каталогу на всю ширину картки (не 200px по центру) */
.us-module-img img, .product-thumb .image img { width: 100%; max-width: 100%; height: auto; }


/* ============================================================
   HOSTURM 2026-08-31 — КАРТКА КАТАЛОГУ «Варіант A» (фінал).
   Рівно як у макеті: фото на всю ширину, бейдж поверх фото,
   назва, унизу ціна + кнопка одним рядком. Без іконок,
   рейтингу й лічильника кількості.
   ============================================================ */
.us-module-item{
  position:relative !important; display:grid !important;
  grid-template-columns:1fr auto; align-content:start;
  background:var(--hb-surface); border:1px solid var(--hb-card-border); border-radius:16px;
  overflow:hidden; padding:0 0 14px 0 !important; height:100%;
  box-shadow:var(--hb-card-shadow);
}
.us-module-item .us-module-buttons-list,
.us-module-item .us-module-rating{ display:none !important; }
.us-module-item .us-module-stickers{
  position:absolute !important; top:10px; left:10px; z-index:3; margin:0 !important; padding:0 !important; width:auto !important;
}
.us-module-item .us-module-img{
  grid-column:1 / -1; width:100% !important; margin:0 !important; padding:0 !important;
  border-radius:0 !important; aspect-ratio:1/1; overflow:hidden;
}
.us-module-item .us-module-img a, .us-module-item .us-module-img > div{ display:block; width:100%; height:100%; }
.us-module-item .us-module-img img{ width:100% !important; height:100% !important; object-fit:cover !important; max-width:none !important; }
.us-module-item .us-module-title{
  grid-column:1 / -1; width:auto !important; padding:12px 14px 0 !important; margin:0 !important; text-align:left;
}
.us-module-item .us-module-title a{
  font-size:14px; font-weight:600; line-height:1.35; color:var(--hb-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px;
}
.us-module-item .us-module-price{
  position:static !important; grid-column:1; align-self:end; justify-self:start;
  margin:10px 0 0 14px !important; padding:0 !important; width:auto !important;
  font-size:19px; font-weight:800; white-space:nowrap; text-align:left;
}
.us-module-item .us-module-price .us-module-price-actual{ font-size:19px; font-weight:800; }
.us-module-item .us-product-category-quantity{
  position:static !important; grid-column:2; align-self:end; justify-self:end;
  margin:10px 14px 0 0 !important; padding:0 !important; width:auto !important;
  display:flex !important; align-items:center;
}
.us-module-item .us-product-category-quantity > .us-product-quantity,
.us-module-item .us-product-category-quantity > .btn-group{ display:none !important; }
.us-module-item .us-module-cart-btn{
  margin:0 !important; width:auto !important; min-width:0 !important;
  padding:10px 13px !important; border-radius:9px !important;
  font-size:12px !important; font-weight:700 !important; white-space:nowrap;
}
.us-module-item .us-module-cart-btn i, .us-module-item .us-module-cart-btn .fa{ display:none !important; }

/* ряд гортається вбік, коли картки не влазять по ширині */
@media (min-width:992px){
  .us-module-row-scroll{
    display:flex !important; flex-wrap:nowrap !important; overflow-x:auto;
    gap:16px; scroll-snap-type:x proximity; padding-bottom:12px; margin:0;
  }
  .us-module-row-scroll > *{
    scroll-snap-align:start; flex:0 0 236px !important; max-width:236px !important; padding:0 !important;
  }
  .us-module-row-scroll::-webkit-scrollbar{ height:8px; }
  .us-module-row-scroll::-webkit-scrollbar-thumb{ background:var(--hb-scroll-thumb); border-radius:99px; }
}

/* ============================================================
   СТОРІНКА ТОВАРУ — «Варіант A» з макета:
   ліворуч фото, праворуч модель/наявність/ціна, кількість і
   обидві кнопки одним рядком, під ними три плитки умов.
   ============================================================ */
.us-price-actual{ font-size:34px !important; font-weight:800; letter-spacing:-.01em; }
.us-product-info-item-stock .us-product-info-is{
  display:inline-block; background:var(--hb-ok-bg); color:var(--hb-ok-ink); font-weight:700;
  border-radius:6px; padding:3px 10px; font-size:13px;
}
.us-product-info-item-model .us-product-info-code{
  display:inline-block; background:var(--hb-code-bg); color:var(--hb-code-ink); font-weight:600;
  border-radius:99px; padding:3px 12px; font-size:12.5px;
}
/* кількість і обидві кнопки — в один рядок */
.us-product-action{ display:flex !important; align-items:center; gap:12px; flex-wrap:wrap; }
.us-product-action-left{ display:flex !important; gap:10px; align-items:center; flex-wrap:wrap; }
.us-product-action-left .us-product-btn{ width:auto !important; margin:0 !important; }
/* порожній блок рейтингу/вішліста над ціною — прибрати */
.us-product-rating-wishlist{ min-height:0 !important; padding:0 !important; margin:0 0 6px !important; }
.us-product-rating-wishlist .us-product-rating{ display:none !important; }
/* три плитки умов */
.us-product-trust-block{
  display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:18px;
}
.us-product-advantages-item{ background:var(--hb-surface-3); border-radius:10px; padding:12px 14px; margin:0; }
.us-product-advantages-link{ font-weight:700; color:var(--hb-ink); font-size:13px; }
.us-product-advantages-text{ font-size:12.5px; color:var(--hb-mut); margin:2px 0 0; }
@media (max-width:760px){
  .us-product-trust-block{ grid-template-columns:1fr; }
}

/* сторінка товару: блок дій на всю ширину правої колонки, обидві кнопки в один рядок */
.us-product-action{ width:100%; }
.us-product-action-left{ flex:1 1 100%; width:100%; }
.us-product-action-left .us-product-btn{ flex:1 1 0; min-width:0; padding:14px 16px !important; }

/* блок дій — на всю ширину правої колонки; порожній рядок із «обраним» прибираємо (просив Аман) */
.us-product-action{ display:flex !important; width:100% !important; }
.us-product-action-left{ flex:1 1 auto !important; max-width:none !important; width:100% !important; }
.us-product-action-left .us-product-btn{ flex:0 1 auto; white-space:nowrap; }
.us-product-rating-wishlist{ display:none !important; }

/* щоб кількість + обидві кнопки гарантовано влізли в один рядок */
.us-product-action{ gap:8px !important; }
.us-product-action-left{ gap:8px !important; }
.us-product-quantity{ max-width:165px !important; }
.us-product-action-left .us-product-btn{ padding:14px 14px !important; }

/* кількість не має обрізатись */
.us-product-quantity{ max-width:none !important; flex:0 0 auto !important; width:auto !important; }
.us-product-action-left .us-product-btn{ padding:14px 12px !important; font-size:12.5px !important; }

/* інлайновий стиль теми в header.twig перебиває display — піднімаємо специфічність */
.us-module-item.us-module-item{ display:grid !important; grid-template-columns:1fr auto !important; align-content:start !important; }
.us-module-item.us-module-item .us-module-price{ grid-column:1 !important; align-self:end !important; justify-self:start !important; }
.us-module-item.us-module-item .us-product-category-quantity{ grid-column:2 !important; align-self:end !important; justify-self:end !important; }
.us-module-item.us-module-item .us-module-img, .us-module-item.us-module-item .us-module-title{ grid-column:1 / -1 !important; }

/* ціна + кнопка мають гарантовано вміститись у ширину картки */
.us-module-item.us-module-item{ grid-template-columns:minmax(0,auto) minmax(0,auto) !important; }
.us-module-item.us-module-item .us-module-price{ margin-left:12px !important; font-size:17px !important; }
.us-module-item.us-module-item .us-module-price .us-module-price-actual{ font-size:17px !important; }
.us-module-item.us-module-item .us-product-category-quantity{ margin-right:12px !important; max-width:100% !important; min-width:0 !important; }
.us-module-item.us-module-item .us-module-cart-btn{ padding:9px 10px !important; font-size:11.5px !important; max-width:100% !important; }

/* сторінка товару: характеристики під кнопками, опис у правій колонці */
.us-product-attr{ order:4 !important; }
.us-product-desc-right{ order:5; margin-top:16px; }
.us-product-desc-right-title{ font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--hb-dim); margin:0 0 8px; }
.us-product-desc-right p{ font-size:14px; line-height:1.6; color:var(--hb-mut); margin:0; }

/* ============================================================
   HOSTURM 2026-08-31 — характеристики товару плитками
   (мітка зверху, значення знизу), плюс акцентні «Ефект» і «Міцність».
   ============================================================ */
.us-product-attr .us-product-attr-title{
  font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hb-dim); margin:0 0 10px;
}
.us-product-attr .us-product-attr-cont{ display:flex; flex-direction:column; gap:6px; }
.us-product-attr .us-product-attr-item{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  gap:2px !important; border:none !important; background:var(--hb-surface-2); border-radius:10px;
  padding:9px 13px !important; font-size:13.5px; line-height:1.4;
}
.us-product-attr .us-product-attr-item:after{ display:none !important; }
.us-product-attr .us-product-attr-item span{ background:transparent !important; }
.us-product-attr .us-product-attr-item span:first-child{
  color:var(--hb-dim-2) !important; font-size:12px; flex:0 0 auto; max-width:100% !important; text-align:left !important;
}
.us-product-attr .us-product-attr-item span:last-child{
  color:var(--hb-ink-2) !important; font-weight:700; font-size:14px;
  text-align:left !important; max-width:100% !important;
}
/* акцент: «Ефект» — золота плитка */
.us-product-attr .us-product-attr-item.us-attr-effect{
  background:linear-gradient(135deg,var(--hb-gold-2),var(--hb-gold-2d)) !important; padding:13px 16px !important; margin:4px 0;
}
.us-product-attr .us-product-attr-item.us-attr-effect span:first-child{
  color:var(--hb-gold-ink) !important; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.us-product-attr .us-product-attr-item.us-attr-effect span:last-child{ color:var(--hb-gold-ink-2) !important; font-weight:700; }
/* акцент: «Міцність» — зірки в один рядок */
.us-product-attr .us-product-attr-item.us-attr-power{
  flex-direction:row !important; align-items:center !important; justify-content:space-between;
  background:var(--hb-surface) !important; border:1px solid var(--hb-line-2) !important; padding:10px 14px !important;
}
.us-product-attr .us-product-attr-item.us-attr-power .us-attr-stars{
  letter-spacing:1px; font-size:14px; color:var(--hb-gold-2);
}
.us-product-attr .us-product-attr-item.us-attr-power .us-attr-stars b{ color:var(--hb-ink-2); font-size:13px; margin-left:6px; }

/* ============================================================
   HOSTURM 2026-08-31 — блок покупки на сторінці товару.
   Кількість і кнопки однієї висоти, в одній лінії, без «пігулок»
   різного розміру. Головна кнопка ширша й помітніша.
   ============================================================ */
.us-product-action{ align-items:stretch !important; }
.us-product-action-left{ align-items:stretch !important; }
.us-product-quantity{
  height:52px; border:1px solid var(--hb-line) !important; border-radius:12px !important;
  background:var(--hb-surface); box-shadow:none !important; overflow:hidden; display:flex !important; align-items:center;
}
.us-product-quantity input,
.us-product-quantity .form-control{
  height:50px !important; border:0 !important; box-shadow:none !important;
  font-weight:700 !important; font-size:15px !important; width:52px !important; text-align:center;
}
.us-product-quantity button,
.us-product-quantity .btn{
  height:50px !important; width:42px !important; border:0 !important; background:transparent !important;
  color:var(--hb-dim) !important; font-size:18px !important; font-weight:700 !important; box-shadow:none !important;
}
.us-product-quantity button:hover{ background:var(--hb-surface-2) !important; }
.us-product-action-left .us-product-btn{
  height:52px !important; display:inline-flex !important; align-items:center; justify-content:center;
  border-radius:12px !important; font-size:12.5px !important; font-weight:800 !important;
  letter-spacing:.06em !important; padding:0 22px !important; box-shadow:none !important;
}
.us-product-action-left .us-product-btn-active{
  background:var(--hb-green-t) !important; color:var(--hb-on-accent) !important; border:0 !important; flex:1 1 auto; min-width:190px;
}
.us-product-action-left .us-product-btn-active:hover{ background:var(--hb-green-3) !important; }
.us-product-action-left .button-one-click{
  background:var(--hb-surface) !important; color:var(--hb-green-t) !important; border:1.5px solid var(--hb-green-t) !important;
}
.us-product-action-left .button-one-click:hover{ background:var(--hb-green-soft-2) !important; }

/* кнопки покупки: обидві в один ряд, без розтягування головної */
.us-product-action-left .us-product-btn-active{ flex:0 0 auto !important; min-width:0 !important; }
.us-product-action-left{ flex-wrap:nowrap !important; }
.us-product-action-left .us-product-btn{ padding:0 18px !important; }

/* HOSTURM 2026-08-31: точна вертикальна вісь блоку покупки —
   лічильник, його «-/+», поле й обидві кнопки строго по одному центру */
.us-product-right .us-product-action,
.us-product-right .us-product-action-left{ align-items:center !important; }
.us-product-right .us-product-quantity{
  height:52px !important; min-height:52px !important; padding:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; box-sizing:border-box !important;
}
.us-product-right .us-product-quantity > *{ margin:0 !important; }
.us-product-right .us-product-quantity input,
.us-product-right .us-product-quantity .form-control{
  height:52px !important; line-height:52px !important; padding:0 !important; margin:0 !important;
  border:0 !important; box-shadow:none !important; display:block !important;
}
.us-product-right .us-product-quantity button,
.us-product-right .us-product-quantity .btn,
.us-product-right .us-product-quantity a{
  height:52px !important; line-height:52px !important; padding:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.us-product-right .us-product-action-left .us-product-btn{
  height:52px !important; min-height:52px !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.us-product-right .us-product-action .us-product-quantity-title,
.us-product-right .us-product-action label{ align-self:center !important; margin:0 10px 0 0 !important; }

/* HOSTURM 2026-08-31: назва товару в картці — рівно 2 рядки, з запасом висоти,
   щоб довгий текст не наїжджав на ціну й кнопку */
.us-module-item.us-module-item .us-module-title{ padding:12px 14px 0 !important; }
.us-module-item.us-module-item .us-module-title a{
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
  overflow:hidden !important; font-size:13.5px !important; line-height:1.45 !important;
  height:40px !important; min-height:40px !important; max-height:40px !important;
}

/* відступ між назвою та нижнім рядком картки (ціна + кнопка) */
.us-module-item.us-module-item .us-module-price{ margin-top:14px !important; }
.us-module-item.us-module-item .us-product-category-quantity{ margin-top:14px !important; }

/* більший відступ між назвою та нижнім рядком */
.us-module-item.us-module-item{ row-gap:10px !important; }
.us-module-item.us-module-item .us-product-category-quantity{ margin-top:16px !important; }

/* HOSTURM 2026-08-31: назва товару показується ПОВНІСТЮ (без обрізки),
   картка росте під текст, нижній рядок завжди притиснутий до низу */
.us-module-item.us-module-item .us-module-title a{
  display:block !important;
  -webkit-line-clamp:none !important;
  height:auto !important; min-height:40px !important; max-height:none !important;
  overflow:visible !important; text-overflow:clip !important;
  font-size:13.5px !important; line-height:1.45 !important;
}
.us-module-item.us-module-item .us-module-title{ padding:12px 14px 0 !important; }

/* HOSTURM 2026-08-31: «Міцність» у стилі привала — темні заповнені зірки,
   світло-сірі порожні, число жирним праворуч */
.us-product-attr .us-product-attr-item.us-attr-power{
  background:var(--hb-surface) !important; border:1px solid var(--hb-line-2) !important; border-radius:12px !important;
  padding:11px 14px !important;
}
.us-product-attr .us-product-attr-item.us-attr-power .us-attr-stars{
  font-size:15px; letter-spacing:2px; color:var(--hb-star-off); display:inline-flex; align-items:center;
}
.us-product-attr .us-product-attr-item.us-attr-power .us-attr-stars .on{ color:var(--hb-ink-2); }
.us-product-attr .us-product-attr-item.us-attr-power .us-attr-stars b{
  color:var(--hb-ink-2); font-size:13.5px; font-weight:800; margin-left:8px; letter-spacing:0;
}

.us-product-attr .us-attr-power .us-attr-stars i{ font-style:normal; color:var(--hb-ink-2); }

/* контейнер назви не має обрізати текст (у темі height:42px + overflow hidden) */
.us-module-item.us-module-item .us-module-title{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }

/* +2px до відступу між назвою та рядком «ціна + кнопка» (прохання Амана) */
.us-module-item.us-module-item .us-product-category-quantity{ margin-top:18px !important; }
.us-module-item.us-module-item .us-module-price{ margin-top:16px !important; }

/* рівно 18px: row-gap 10 + margin 8 */
.us-module-item.us-module-item .us-product-category-quantity{ margin-top:8px !important; }
.us-module-item.us-module-item .us-module-price{ margin-top:8px !important; }

/* ============================================================
   HOSTURM 2026-08-31 — розділ «Доставка та оплата», варіант B:
   три картки + пам'ятка «Як зробити замовлення».
   ============================================================ */
.hb-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start; margin-top:6px; }
.hb-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hb-card{
  border:1px solid var(--hb-line); border-radius:14px; padding:18px; background:var(--hb-surface);
  display:flex; flex-direction:column; gap:10px;
}
.hb-top{ display:flex; align-items:center; gap:10px; }
.hb-ic{
  width:40px; height:40px; border-radius:11px; background:var(--hb-surface-3);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto;
}
.hb-card h4{ margin:0; font-size:15px; font-weight:800; color:var(--hb-ink); }
.hb-card ul{ margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.hb-card li{
  font-size:13px; color:var(--hb-mut); display:grid; grid-template-columns:14px minmax(0,1fr);
  gap:8px; align-items:start; line-height:1.5;
}
.hb-card li em{ font-style:normal; color:var(--hb-green-t); font-weight:800; }
.hb-foot{
  margin-top:auto; padding-top:10px; border-top:1px dashed var(--hb-line);
  font-size:13px; font-weight:700; color:var(--hb-ink);
}
.hb-how{ background:var(--hb-surface-3); border-radius:14px; padding:18px; font-size:13px; color:var(--hb-mut); line-height:1.6; }
.hb-how-t{
  font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hb-dim); margin:0 0 10px;
}
.hb-how p{ margin:0 0 8px; }
.hb-how b{ color:var(--hb-ink); }
.hb-how-n{ margin-top:12px !important; padding-top:10px; border-top:1px dashed var(--hb-line); }
@media (max-width:991px){
  .hb-wrap{ grid-template-columns:1fr; }
  .hb-grid{ grid-template-columns:1fr; }
}

/* коли працює новий блок B — стару верстку ховаємо */
body.hb-on .us-product-trust-block{ display:none !important; }
body.hb-on .us-product-trust-block-top{ display:none !important; }

/* ============================================================
   HOSTURM 2026-08-31 — «Про товар», варіант A: смуга по центру
   між блоком покупки та розділом «Доставка та оплата».
   ============================================================ */
.hb-about{ padding:34px 0 30px; text-align:center; border-top:1px solid var(--hb-line); margin-top:26px; }
.hb-about-kick{
  font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hb-gold-d); margin-bottom:10px;
}
.hb-about-title{
  font-family:Georgia,"Times New Roman",serif; font-size:26px; font-weight:600;
  margin:0 0 14px; color:var(--hb-ink); line-height:1.25;
}
.hb-about-text{ max-width:760px; margin:0 auto; font-size:15.5px; line-height:1.75; color:var(--hb-mut); }
.hb-about-text p{ margin:0 0 10px; }
.hb-about-text p:last-child{ margin-bottom:0; }
.hb-about-rule{ width:54px; height:2px; background:var(--hb-gold); margin:16px auto 0; border-radius:2px; }
@media (max-width:760px){
  .hb-about{ padding:26px 0 22px; text-align:left; }
  .hb-about-text{ text-align:left; }
  .hb-about-rule{ margin-left:0; }
}

/* ============================================================
   HOSTURM 2026-08-31 — «Міцність» шкалою замість зірок:
   плитка як у решти характеристик, під міткою — сегментна шкала
   з підписами «м'який / міцний» і значенням.
   ============================================================ */
.us-product-attr .us-product-attr-item.us-attr-power{
  flex-direction:column !important; align-items:stretch !important;
  background:var(--hb-surface-2) !important; border:0 !important; border-radius:10px !important;
  padding:11px 14px 12px !important; gap:8px !important;
}
.us-product-attr .us-attr-power span:first-child{
  color:var(--hb-dim-2) !important; font-size:12px !important; font-weight:600 !important;
}
.us-attr-scale{ display:block; width:100%; }
.us-attr-scale .segs{ display:flex; gap:4px; margin-bottom:6px; }
.us-attr-scale .seg{
  flex:1 1 0; height:8px; border-radius:99px; background:var(--hb-line); display:block;
}
.us-attr-scale .seg.on{ background:linear-gradient(90deg,var(--hb-gold-l),var(--hb-gold-d)); }
.us-attr-scale .ends{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.us-attr-scale .ends em{ font-style:normal; font-size:11.5px; color:var(--hb-dim-3); }
.us-attr-scale .ends b{ font-size:13.5px; font-weight:800; color:var(--hb-ink-2); }

/* стрілки слайдера: контрастніші, щоб не губились на світлому фото */
.us-slideshow-plus .slick-arrow{ width:46px !important; height:46px !important; background:rgba(28,22,14,.62) !important; box-shadow:0 4px 14px rgba(0,0,0,.28) !important; transition:background .2s ease, transform .2s ease !important; }
.us-slideshow-plus .slick-arrow:hover{ background:rgba(28,22,14,.85) !important; transform:translateY(-50%) scale(1.06) !important; }
.us-slideshow-plus .slick-prev{ left:18px !important; }
.us-slideshow-plus .slick-next{ right:18px !important; }
.us-slideshow-plus .slick-prev::before, .us-slideshow-plus .slick-next::before{ width:11px !important; height:11px !important; border-top-width:2.5px !important; border-right-width:2.5px !important; }

/* кнопка «До кошика» у списку категорії була сірою: тема бере
   var(--brand-btn-gradient) з фолбеком linear-gradient(#5a5a5a,#3d3d3d),
   а змінна ніде не задана. Задаємо наш зелений. */
:root{ --brand-btn-gradient: linear-gradient(180deg,var(--hb-green),var(--hb-green-2)); }
.product-grid .us-module-cart-btn,
.us-module-cart-btn.us-cat-button-cart{ background:linear-gradient(180deg,var(--hb-green),var(--hb-green-2)) !important; color:var(--hb-on-accent) !important; border:0 !important; }
.product-grid .us-module-cart-btn:hover,
.us-module-cart-btn.us-cat-button-cart:hover{ background:linear-gradient(180deg,var(--hb-green-2),var(--hb-green-3)) !important; }

/* ============================================================
   HOSTURM 2026-08-31 — стрілки й точки слайдера: скляний круг
   із тонкою світлою обводкою, читається і на темному, і на світлому фото.
   ============================================================ */
.us-slideshow-plus .slick-arrow{
  width:48px !important; height:48px !important;
  background:rgba(24,19,12,.55) !important;
  border:1.5px solid rgba(255,255,255,.55) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.30) !important;
  backdrop-filter:blur(3px) !important; -webkit-backdrop-filter:blur(3px) !important;
  transition:background .2s ease, border-color .2s ease !important;
}
.us-slideshow-plus .slick-arrow:hover{
  background:rgba(24,19,12,.78) !important; border-color:rgba(255,255,255,.9) !important;
}
.us-slideshow-plus .slick-prev{ left:22px !important; }
.us-slideshow-plus .slick-next{ right:22px !important; }
.us-slideshow-plus .slick-prev::before,
.us-slideshow-plus .slick-next::before{
  width:11px !important; height:11px !important;
  border-top:2.5px solid var(--hb-surface) !important; border-right:2.5px solid var(--hb-surface) !important;
  opacity:1 !important;
}
/* точки пагінації — помітніші */
.us-slideshow-plus .slick-dots{ bottom:16px !important; }
.us-slideshow-plus .slick-dots li button:before{ font-size:0 !important; }
.us-slideshow-plus .slick-dots li{ width:auto !important; height:auto !important; margin:0 4px !important; }
.us-slideshow-plus .slick-dots li button{
  width:9px !important; height:9px !important; border-radius:99px !important;
  background:rgba(255,255,255,.45) !important; padding:0 !important; border:0 !important;
  transition:background .2s ease, width .2s ease !important;
}
.us-slideshow-plus .slick-dots li.slick-active button{
  background:var(--hb-gold) !important; width:22px !important;
}

/* стрілки не мають перекривати текст банера — ставимо парою в правий нижній кут */
.us-slideshow-plus .slick-arrow{
  top:auto !important; bottom:16px !important; transform:none !important;
  width:42px !important; height:42px !important;
}
.us-slideshow-plus .slick-arrow:hover{ transform:none !important; }
.us-slideshow-plus .slick-prev{ left:auto !important; right:72px !important; }
.us-slideshow-plus .slick-next{ right:20px !important; }
.us-slideshow-plus .slick-dots{ text-align:left !important; padding-left:24px !important; }

/* ПОВЕРНЕННЯ ДО ЗАТВЕРДЖЕНОГО ВИГЛЯДУ: стрілки по центру боків банера
   (перенос у нижній кут був моєю самодіяльністю — скасовано).
   Робимо їх білими й читабельними на будь-якому фото. */
.us-slideshow-plus .slick-arrow{
  top:50% !important; bottom:auto !important; transform:translateY(-50%) !important;
  width:46px !important; height:46px !important;
  background:rgba(255,255,255,.94) !important; border:0 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.20) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.us-slideshow-plus .slick-arrow:hover{
  background:var(--hb-surface) !important; transform:translateY(-50%) scale(1.05) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.26) !important;
}
.us-slideshow-plus .slick-prev{ left:16px !important; right:auto !important; }
.us-slideshow-plus .slick-next{ right:16px !important; left:auto !important; }
.us-slideshow-plus .slick-prev::before,
.us-slideshow-plus .slick-next::before{
  border-top-color:var(--hb-ink) !important; border-right-color:var(--hb-ink) !important;
}
.us-slideshow-plus .slick-dots{ text-align:left !important; padding-left:24px !important; }

/* ============================================================
   HOSTURM 2026-08-31 — ЄДИНИЙ СТИЛЬ КНОПОК «М'який» (стиль 2,
   затверджений Аманом). Це фінальний блок: усі кнопки покупки
   й стрілки слайдера керуються ЛИШЕ звідси, не дописувати вище.
   ============================================================ */

/* --- головна кнопка «До кошика» (сторінка товару) --- */
.us-product-right .us-product-action-left .us-product-btn-active,
.us-product-btn.us-product-btn-active{
  background:linear-gradient(180deg,var(--hb-green),var(--hb-green-d)) !important;
  color:var(--hb-on-accent) !important; border:0 !important;
  border-radius:999px !important;
  box-shadow:0 6px 14px rgba(76,122,67,.28) !important;
  letter-spacing:.05em !important;
}
.us-product-right .us-product-action-left .us-product-btn-active:hover,
.us-product-btn.us-product-btn-active:hover{
  background:linear-gradient(180deg,var(--hb-green-h),var(--hb-green-hd)) !important;
  box-shadow:0 8px 18px rgba(76,122,67,.34) !important;
}
/* --- вторинна кнопка «Швидке замовлення» --- */
.us-product-right .us-product-action-left .button-one-click,
.us-product-btn.button-one-click{
  background:var(--hb-surface) !important; color:var(--hb-green-t) !important;
  border:1.5px solid var(--hb-green-line) !important; border-radius:999px !important;
  box-shadow:none !important;
}
.us-product-right .us-product-action-left .button-one-click:hover,
.us-product-btn.button-one-click:hover{
  background:var(--hb-green-soft) !important; border-color:var(--hb-green-line-h) !important;
}
/* --- лічильник кількості під той самий стиль --- */
.us-product-right .us-product-quantity{ border-radius:999px !important; }

/* --- кнопка в картці каталогу й на головній --- */
.us-module-item.us-module-item .us-module-cart-btn,
.product-grid .us-module-cart-btn,
.us-module-cart-btn.us-cat-button-cart,
.us-module-cart-btn{
  background:linear-gradient(180deg,var(--hb-green),var(--hb-green-d)) !important;
  color:var(--hb-on-accent) !important; border:0 !important;
  border-radius:999px !important;
  box-shadow:0 5px 12px rgba(76,122,67,.24) !important;
}
.us-module-item.us-module-item .us-module-cart-btn:hover,
.product-grid .us-module-cart-btn:hover,
.us-module-cart-btn.us-cat-button-cart:hover,
.us-module-cart-btn:hover{
  background:linear-gradient(180deg,var(--hb-green-h),var(--hb-green-hd)) !important;
  box-shadow:0 7px 16px rgba(76,122,67,.30) !important;
}

/* --- стрілки слайдера: білі круги з м'якою тінню (позиція по центру боків) --- */
.us-slideshow-plus .slick-arrow{
  top:50% !important; bottom:auto !important; transform:translateY(-50%) !important;
  width:46px !important; height:46px !important;
  background:var(--hb-surface) !important; border:0 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.us-slideshow-plus .slick-arrow:hover{
  background:var(--hb-surface) !important; transform:translateY(-50%) scale(1.06) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.24) !important;
}
.us-slideshow-plus .slick-prev{ left:16px !important; right:auto !important; }
.us-slideshow-plus .slick-next{ right:16px !important; left:auto !important; }
.us-slideshow-plus .slick-prev::before,
.us-slideshow-plus .slick-next::before{
  border-top-color:var(--hb-green-t) !important; border-right-color:var(--hb-green-t) !important;
}

/* шеврон стрілки — рівно по центру круга (у темі стояли компенсаційні
   margin-left/right під старий розмір, через них стрілка з'їжджала) */
.us-slideshow-plus .slick-arrow{
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:0 !important; line-height:0 !important; padding:0 !important;
}
.us-slideshow-plus .slick-prev::before,
.us-slideshow-plus .slick-next::before{
  margin:0 !important; position:static !important; display:block !important;
}
.us-slideshow-plus .slick-prev::before{ transform:rotate(-135deg) translate(-1.5px,-1.5px) !important; }
.us-slideshow-plus .slick-next::before{ transform:rotate(45deg) translate(-1.5px,-1.5px) !important; }

/* точне доцентрування шеврона за замірами (центр маси пікселів): prev був зміщений вліво/вниз, next — вправо/вгору */
.us-slideshow-plus .slick-prev::before{ margin:-2px 0 0 2px !important; }
.us-slideshow-plus .slick-next::before{ margin:3px 0 0 -3px !important; }

/* фінальне доцентрування (друга ітерація замірів) */
.us-slideshow-plus .slick-prev::before{ margin:-3px 0 0 3.5px !important; }
.us-slideshow-plus .slick-next::before{ margin:4px 0 0 -4px !important; }

/* симетричне центрування шеврона: без компенсаційних margin, лише поворот
   і однакове зміщення на пів товщини лінії для обох стрілок */
.us-slideshow-plus .slick-prev::before,
.us-slideshow-plus .slick-next::before{ margin:0 !important; }
.us-slideshow-plus .slick-prev::before{ transform:rotate(-135deg) translate(-1.2px,-1.2px) !important; }
.us-slideshow-plus .slick-next::before{ transform:rotate(45deg) translate(-1.2px,-1.2px) !important; }

/* ============================================================
   КНОПКА ПЕРЕМИКАННЯ ТЕМИ (шапка) — 2026-09-01.
   Легкий вигляд: без кола й заливки, сама лінійна іконка —
   як сусідні іконки шапки (кошик, лупа). Було коло 40px
   із заливкою й обводкою — Аман сказав «жирно».
   Шапка темна в обох темах, тому вигляд кнопки однаковий.

   Лежить у шарі hb-ui з !important: тема стилізує button у шапці
   своїми правилами з !important, і без шару кнопка отримувала
   стандартний сірий вигляд браузера.
   ============================================================ */
@layer hb-ui{

.hb-theme-toggle{
  flex:0 0 auto !important; align-self:center !important;
  width:34px !important; height:34px !important; min-width:0 !important;
  margin:0 16px 0 0 !important; padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:0 !important; border-radius:999px !important;
  background:transparent !important;
  /* колір фіксований, НЕ з токена: шапка темна в обох темах,
     а --hb-ink у світлій темі темний — іконка зникала на темному тлі */
  color:#EFE8DA !important;
  -webkit-text-fill-color:#EFE8DA !important;
  box-shadow:none !important;
  opacity:.85 !important;
  cursor:pointer !important;
  transition:opacity .2s ease, color .2s ease !important;
  -webkit-appearance:none !important; appearance:none !important;
}
.hb-theme-toggle:hover{
  opacity:1 !important;
  color:var(--hb-gold, #C9A45C) !important;
  -webkit-text-fill-color:var(--hb-gold, #C9A45C) !important;
}
.hb-theme-toggle:focus-visible{ outline:2px solid var(--hb-gold, #C9A45C) !important; outline-offset:2px !important; }
/* лінія іконки тонка — під товщину іконок теми (CSS перебиває
   презентаційний атрибут stroke-width="1.9" на самому svg) */
.hb-theme-toggle svg{
  display:block !important; width:19px !important; height:19px !important;
  stroke-width:1.4 !important;
}

@media (prefers-reduced-motion: reduce){
  .hb-theme-toggle{ transition:none !important; }
}

/* на мобільній працює тільки кнопка у верхній панелі іконок:
   десктопна лишалась видимою (34×34) і давала ДВІ однакові кнопки
   й два таб-стопи — знайдено на приймальні */
@media (max-width:991.98px){
  #hb-theme-toggle{ display:none !important; }
}

/* мобільний варіант — у верхній панелі іконок, під розмір сусідів */
.hb-theme-toggle-mobile{
  width:52px !important; height:50px !important; margin:0 !important;
  background:transparent !important; border:0 !important;
  border-radius:0 !important; opacity:1 !important;
}
.hb-theme-toggle-mobile:hover{ background:rgba(255,255,255,.08) !important; }
.hb-theme-toggle-mobile svg{ width:20px !important; height:20px !important; }


/* ============================================================
   ЗНАЙДЕНО НА ПРИЙМАЛЬНІЙ: на мобільній верхня панель іконок
   ширша за екран — на сторінці товару документ розтягувався до
   499px при 375px вікна, тобто сторінка їздила вбік.
   Перевірено: без нашої кнопки теми — ті самі 499, тобто це
   дефект теми, а не наслідок кнопки. Ужимаємо панель, щоб влізла.
   ============================================================ */
@media (max-width:575.98px){
  /* сторінку розтягував прихований блок мобільного меню (500px) —
     замикаємо документ по ширині вікна; власні горизонтальні
     стрічки (.us-module-row-scroll) мають свій overflow-x і не страждають */
  html, body{ max-width:100% !important; overflow-x:hidden !important; }
  header .container.d-flex.h-100{ max-width:100% !important; overflow:hidden !important; }
  .us-mobile-top-btn,
  .hb-theme-toggle-mobile{ width:44px !important; min-width:44px !important; }
  .us-menu-mobile{ flex:0 0 auto !important; }
  .us-mobile-top-btn i,
  .us-mobile-top-btn svg{ font-size:17px !important; }
}

}

/* ============================================================
   ТЕМНА ТЕМА — 2026-08-31.
   Вмикається атрибутом data-theme="dark" на <html>.
   Атрибут завжди ставить інлайн-скрипт у <head> (див. header.twig):
   режим "auto" він сам перетворює на light|dark за системною темою,
   тому в CSS достатньо ОДНОГО селектора — без дублювання в @media.

   Палітра тепла, чайна (не «синій айтішний» темний).
   ============================================================ */
html[data-theme="dark"]{
  color-scheme: dark;

  /* --- наші токени --- */
  --hb-bg:#14110C;
  --hb-surface:#1C1811;
  --hb-surface-2:#241F16;
  --hb-surface-3:#221D15;
  --hb-line:#332C20;
  --hb-line-2:#3A3226;
  --hb-card-border:rgba(255,240,210,.10);
  --hb-card-shadow:0 6px 22px rgba(0,0,0,.45);

  --hb-ink:#EFE8DA;
  --hb-ink-2:#F5F0E4;
  --hb-mut:#B8AC95;
  --hb-dim:#A79B84;
  --hb-dim-2:#A0937C;
  --hb-dim-3:#8F8471;
  /* текст на кольоровій кнопці: у темній темі акценти яскравіші,
     тому напис на них темний — так контраст 6:1 замість 3:1 з білим */
  --hb-on-accent:#10190C;

  --hb-green:#6FA05E;
  --hb-green-2:#5F8C50;
  --hb-green-d:#4F7742;
  --hb-green-t:#8FBE7E;      /* зелений як текст — на темному має бути світлішим */
  --hb-green-h:#7CAF6B;
  --hb-green-hd:#557F48;
  --hb-green-3:#4A7340;
  --hb-green-soft:#1E2A19;
  --hb-green-soft-2:#1B2617;
  --hb-green-line:#3A5233;
  --hb-green-line-h:#4E6B44;

  --hb-gold:#D8B978;
  --hb-gold-l:#E8CE94;
  --hb-gold-d:#B9964E;
  --hb-gold-2:#D5B45F;
  --hb-gold-2d:#A8853F;
  --hb-gold-ink:#FFF8E6;
  --hb-gold-ink-2:#2F2610;

  --hb-ok-bg:#1E2E1A;   --hb-ok-ink:#8FD07E;
  --hb-code-bg:#2A2418; --hb-code-ink:#C6B894;
  --hb-star-off:#4A4133;
  --hb-scroll-thumb:#3A3226;

  /* --- змінні самої теми: перекриваємо з вищою специфічністю,
         щоб перебити :root у brand.css кожного сайту --- */
  --tea-clay:#17130D;        /* шапка, футер, темні блоки */
  --tea-clay-soft:#2A2318;
  --tea-deep:#0F0C08;
  --tea-deepest:#0A0806;
  --tea-cream:#14110C;       /* фон сторінки */
  --tea-mist:#1C1811;        /* картки, «світлі» блоки */
  --tea-accent:#6FA05E;
  --tea-accent-hover:#7CB169;
  --tea-jade:#6FA05E;
  --tea-jade-dark:#5F8C50;
  --tea-jade-soft:#83B372;
  --tea-amber:#D8B978;
  --tea-amber-soft:#E4CB94;
  --tea-btn-1:#3E6B33;
  --tea-btn-2:#5F8C50;
  --tea-btn-3:#7CB169;
}

/* ============================================================
   ТЕМНА ТЕМА — перекриття теми oct_ultrastore.

   МЕХАНІКА (важливо для наступних правок):
   тема фарбує половину блоків хардкодом з !important, частина
   правил — з ID-селекторами в інлайн-<style> усередині header.twig,
   тобто перебити їх звичайною специфічністю неможливо.
   Тому всі перекриття лежать у каскадному шарі @layer hb-dark:
   за специфікацією CSS важливі (!important) оголошення В ШАРІ
   виграють у важливих оголошень ПОЗА шарами — незалежно від
   специфічності. Через це кожне правило тут має бути з !important
   (без нього правило в шарі, навпаки, слабше за звичайні).
   ============================================================ */
@layer hb-dark{

/* --- ГОЛОВНЕ ПРАВИЛО ТЕКСТУ ---
   тема майже скрізь фарбує текст не через color, а через
   -webkit-text-fill-color: var(--tea-clay) !important (≈30 місць у main.css).
   Через це заголовки лишались темними навіть із правильним color.
   Прирівнюємо fill до color — далі керуємо звичайним color.
   Виняток нижче: іконки переваг, де fill:transparent — це градієнтний текст. */
html[data-theme="dark"] *{ -webkit-text-fill-color:currentColor !important; }
html[data-theme="dark"] .us-advantages-img i{ -webkit-text-fill-color:transparent !important; }

/* --- каркас сторінки --- */
html[data-theme="dark"] body{
  background:var(--hb-bg) !important;
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] header{
  background:linear-gradient(135deg,var(--tea-clay) 0%,#0F0C08 100%) !important;
}
html[data-theme="dark"] #top,
html[data-theme="dark"] .menu-row{ background:#0F0C08 !important; }
/* на мобільній цей ряд шапки стає fixed і тема фарбує його білим */
html[data-theme="dark"] header .container > .row{
  background:var(--tea-clay) !important; color:var(--hb-ink) !important;
}

/* --- картки й «світлі» блоки --- */
html[data-theme="dark"] .us-module-item,
html[data-theme="dark"] .us-news-block,
html[data-theme="dark"] .us-advantages-box,
html[data-theme="dark"] .us-html-box,
html[data-theme="dark"] .us-category-item,
html[data-theme="dark"] .us-product-box,
html[data-theme="dark"] .us-blog-item,
html[data-theme="dark"] .us-categories-wall-item,
html[data-theme="dark"] .us-categories-wall-link{
  background:var(--hb-surface) !important;
  border-color:var(--hb-card-border) !important;
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .us-module-item,
html[data-theme="dark"] .us-news-block,
html[data-theme="dark"] .us-advantages-box{
  box-shadow:var(--hb-card-shadow) !important;
}
/* підкладка під фото — щоб світле фото не «різало» очі */
html[data-theme="dark"] .us-module-img,
html[data-theme="dark"] .us-category-img,
html[data-theme="dark"] .us-product-image,
html[data-theme="dark"] .us-categories-wall-img{
  background:var(--hb-surface-2) !important;
}

/* --- заголовки й тексти, які тема фарбує темним --- */
html[data-theme="dark"] .us-main-shop-title,
html[data-theme="dark"] .us-content-title,
html[data-theme="dark"] .us-categories-wall-title,
html[data-theme="dark"] .us-advantages-title,
html[data-theme="dark"] .us-news-block-title,
html[data-theme="dark"] .us-news-block a,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .us-module-item .us-module-title a,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5{
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .us-module-price,
html[data-theme="dark"] .us-module-price-actual,
html[data-theme="dark"] .us-price-actual{
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .us-advantages-text,
html[data-theme="dark"] .us-news-block-text,
html[data-theme="dark"] .us-html-box,
html[data-theme="dark"] .us-html-box p,
html[data-theme="dark"] .us-html-box li,
html[data-theme="dark"] .us-html-box td{
  color:var(--hb-mut) !important;
}
html[data-theme="dark"] .us-html-box b,
html[data-theme="dark"] .us-html-box strong{ color:var(--hb-ink) !important; }

/* --- мобільне меню, випадайка каталогу, попап локації --- */
html[data-theme="dark"] .nav-dropdown-menu,
html[data-theme="dark"] .nav-dropdown-menu-content,
html[data-theme="dark"] .us-header-location,
html[data-theme="dark"] .us-header-location-collapsed,
html[data-theme="dark"] body > .d-lg-none,
html[data-theme="dark"] .us-mobile-menu,
html[data-theme="dark"] .us-mobile-menu-content,
html[data-theme="dark"] .us-modal,
html[data-theme="dark"] .us-modal-content,
html[data-theme="dark"] .modal-content{
  background:var(--hb-surface) !important;
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .us-modal-body-one-click,
html[data-theme="dark"] .us-modal-comment,
html[data-theme="dark"] .modal-holder{
  background:var(--hb-surface) !important; color:var(--hb-ink) !important;
}
/* мітки в попапі швидкого замовлення (тема малює їх білою плашкою) */
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .control-label-quantity{
  background:transparent !important; color:var(--hb-mut) !important;
}
html[data-theme="dark"] .nav-dropdown-menu a,
html[data-theme="dark"] .us-dropdown-item,
html[data-theme="dark"] .us-dropdown-item a,
html[data-theme="dark"] .us-header-location,
html[data-theme="dark"] .us-fixed-contact-item,
html[data-theme="dark"] .us-fixed-contact-item span{
  color:var(--hb-ink) !important;
}

/* --- поля вводу (пошук, підписка, форми) --- */
html[data-theme="dark"] .header-input-group,
html[data-theme="dark"] header .us-search-box .header-input,
html[data-theme="dark"] input.header-input,
html[data-theme="dark"] #input_search,
html[data-theme="dark"] .us-footer-form-top-input,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background:var(--hb-surface-2) !important;
  color:var(--hb-ink) !important;
  -webkit-text-fill-color:var(--hb-ink) !important;
  border-color:var(--hb-line) !important;
}
html[data-theme="dark"] ::placeholder{
  color:var(--hb-dim) !important; -webkit-text-fill-color:var(--hb-dim) !important; opacity:1 !important;
}
/* лічильник кількості на сторінці товару */
html[data-theme="dark"] .us-product-quantity{
  background:var(--hb-surface-2) !important; border-color:var(--hb-line) !important;
}
html[data-theme="dark"] .us-product-quantity button:hover{ background:var(--hb-surface-3) !important; }

/* --- випадайка живого пошуку --- */
html[data-theme="dark"] header .us-search-box .us_livesearch,
html[data-theme="dark"] .us_livesearch{
  background:var(--hb-surface) !important;
  color:var(--hb-ink) !important;
  box-shadow:0 -4px 16px rgba(0,0,0,.5) !important;
}

/* --- наші блоки (доставка, «Про товар», характеристики) --- */
html[data-theme="dark"] .hb-card{ background:var(--hb-surface) !important; border-color:var(--hb-line) !important; }
html[data-theme="dark"] .hb-how,
html[data-theme="dark"] .hb-ic{ background:var(--hb-surface-3) !important; }
html[data-theme="dark"] .us-product-attr .us-product-attr-item{ background:var(--hb-surface-2) !important; }
html[data-theme="dark"] .us-product-advantages-item{ background:var(--hb-surface-3) !important; }

/* --- стрілки слайдера: темний круг замість білого --- */
html[data-theme="dark"] .us-slideshow-plus .slick-arrow{
  background:rgba(28,24,17,.88) !important;
  border:1px solid rgba(255,240,210,.22) !important;
}
html[data-theme="dark"] .us-slideshow-plus .slick-prev::before,
html[data-theme="dark"] .us-slideshow-plus .slick-next::before{
  border-top-color:var(--hb-ink) !important;
  border-right-color:var(--hb-ink) !important;
}

/* --- напис на кольорових кнопках і лічильниках ---
   у темній темі акценти яскраві, тому текст на них темний:
   контраст 6:1 замість 3:1, який давав білий напис. Перевірено розрахунком. */
html[data-theme="dark"] .us-module-cart-btn,
html[data-theme="dark"] .us-product-btn-active,
html[data-theme="dark"] .us-html-readmore,
html[data-theme="dark"] .pv-all-posts,
html[data-theme="dark"] .us-pcc-btn,
html[data-theme="dark"] .us-footer-form-top-buttton,
html[data-theme="dark"] .oct-fixed-bar-quantity,
html[data-theme="dark"] .us-module-cart-btn *,
html[data-theme="dark"] .us-html-readmore *,
html[data-theme="dark"] .pv-all-posts *{
  color:var(--hb-on-accent) !important;
}
html[data-theme="dark"] .header-cart-index{ color:#ffffff !important; }

/* ============================================================
   ЗНАЙДЕНО НА ПРИЙМАЛЬНІЙ (01.09) — місця, де тема лишила
   темний текст на темному. Заміряно контрастом, не на око.
   ============================================================ */
/* кошик: заголовки 2.37, «Ціна за шт.» 2.37, «Використовувати купон» 1.40 */
html[data-theme="dark"] .us-cart-title,
html[data-theme="dark"] .us-cart-block-title,
html[data-theme="dark"] .us-cart-block-title span,
html[data-theme="dark"] .us-cart-text,
html[data-theme="dark"] .us-cart-price-one,
html[data-theme="dark"] .us-cart-block-total-price,
html[data-theme="dark"] .us-cart-block-total-price span,
html[data-theme="dark"] .us-cart-item-title,
html[data-theme="dark"] .us-cart-item-title a{
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .us-cart-price-one,
html[data-theme="dark"] .us-cart-text{ color:var(--hb-mut) !important; }

/* контакти: «Час роботи», «Наша адреса» були чорні — 1.19 */
html[data-theme="dark"] .us-content-contact-title,
html[data-theme="dark"] .us-content-contact-text,
html[data-theme="dark"] .us-content-contact-text-bold,
html[data-theme="dark"] .us-content-contact-item,
html[data-theme="dark"] .us-content-contact-item a{
  color:var(--hb-ink) !important;
}

/* заголовок мобільного меню — 3.23 */
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] #us_menu_mobile_title .modal-title{ color:var(--hb-ink) !important; }

/* світлі плями, помічені на скрінах: кнопка «Продовжити» і стрілки стрічки мініатюр */
html[data-theme="dark"] .us-module-btn,
html[data-theme="dark"] .us-product-images .slick-prev,
html[data-theme="dark"] .us-product-images .slick-next,
html[data-theme="dark"] .us-product-thumbs .slick-prev,
html[data-theme="dark"] .us-product-thumbs .slick-next{
  background:var(--hb-surface-2) !important; color:var(--hb-ink) !important;
}

/* межі полів вводу майже зливалися з тлом (1.19–1.36 при нормі 3:1) */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  border-color:#5A5040 !important;
}

/* --- роздільники --- */
html[data-theme="dark"] hr,
html[data-theme="dark"] .us-divider{ border-color:var(--hb-line) !important; }

/* --- дрібні світлі підкладки теми --- */
html[data-theme="dark"] .us-categories-wall-row{
  background:linear-gradient(180deg,rgba(255,240,210,.05) 0%,transparent 100%) !important;
}
html[data-theme="dark"] .us-news-stickers-date{
  background:linear-gradient(135deg,var(--hb-surface-2),var(--hb-surface-3)) !important;
  color:var(--hb-gold) !important;
}

/* --- загальний контейнер контенту (кошик, оформлення, статичні сторінки) --- */
html[data-theme="dark"] .us-content,
html[data-theme="dark"] .us-content-inner,
html[data-theme="dark"] .us-cart-block,
html[data-theme="dark"] .us-checkout-block,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .well{
  background:var(--hb-surface) !important;
  border-color:var(--hb-line) !important;
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .us-content table,
html[data-theme="dark"] .us-content td,
html[data-theme="dark"] .us-content th,
html[data-theme="dark"] .us-content label,
html[data-theme="dark"] .us-content dt,
html[data-theme="dark"] .us-content dd,
html[data-theme="dark"] .us-cart-price-all,
html[data-theme="dark"] .us-cart-total,
html[data-theme="dark"] .us-cart-item-name,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .breadcrumb li{
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .us-content table,
html[data-theme="dark"] .us-content td,
html[data-theme="dark"] .us-content th{ border-color:var(--hb-line) !important; }
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-title.us-content-title{
  background:var(--hb-surface-2) !important; color:var(--hb-ink) !important;
}
html[data-theme="dark"] .btn-group,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light{
  background:var(--hb-surface-2) !important; color:var(--hb-ink) !important; border-color:var(--hb-line) !important;
}

/* --- сторінка категорії --- */
html[data-theme="dark"] .us-category-content,
html[data-theme="dark"] .us-categories-box,
html[data-theme="dark"] .us-category-sort-block,
html[data-theme="dark"] .us-trust-item,
html[data-theme="dark"] .us-category-appearance-btn,
html[data-theme="dark"] .us-refine-item{
  background:var(--hb-surface) !important;
  border-color:var(--hb-line) !important;
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .us-category-sort-block,
html[data-theme="dark"] .us-trust-item{ background:var(--hb-surface-2) !important; }
html[data-theme="dark"] .sc-label,
html[data-theme="dark"] .us-trust-ic,
html[data-theme="dark"] .us-trust-item,
html[data-theme="dark"] .us-categories-box a,
html[data-theme="dark"] .us-category-sort-block select,
html[data-theme="dark"] .us-category-appearance-btn{ color:var(--hb-ink) !important; }
html[data-theme="dark"] .us-category-appearance-btn.active{ background:var(--hb-surface-3) !important; }

/* --- сторінка товару: білий контейнер теми --- */
html[data-theme="dark"] .us-product,
html[data-theme="dark"] .us-product-page,
html[data-theme="dark"] .us-product-left,
html[data-theme="dark"] .us-product-right{
  background:var(--hb-surface) !important;
  color:var(--hb-ink) !important;
}
html[data-theme="dark"] .us-page-main-title,
html[data-theme="dark"] .us-product-info-item,
html[data-theme="dark"] .us-product-info-item span,
html[data-theme="dark"] .hb-about-title{ color:var(--hb-ink) !important; }
html[data-theme="dark"] .us-product-quantity-btn,
html[data-theme="dark"] .us-product-quantity button,
html[data-theme="dark"] .us-product-quantity .btn{ color:var(--hb-dim) !important; }
html[data-theme="dark"] .hb-about{ border-top-color:var(--hb-line) !important; }
html[data-theme="dark"] .hb-about-text{ color:var(--hb-mut) !important; }

/* золота плитка «Ефект» лишається золотою — вона акцент, а не поверхня */
html[data-theme="dark"] .us-product-attr .us-product-attr-item.us-attr-effect{
  background:linear-gradient(135deg,var(--hb-gold-2),var(--hb-gold-2d)) !important;
}
html[data-theme="dark"] .us-product-attr .us-attr-effect span:last-child{
  color:var(--hb-gold-ink-2) !important;
}

}

/* ============================================================
   PRIVALSHOP 2026-09-06 — хвіст поверх спільного custom.css.

   Усе вище — точна копія /home/admin/shared/custom.css болванки
   shop3 (токени, @layer hb-ui, @layer hb-dark, картка товару,
   характеристики плитками, «Ефект», шкала «Міцність», кнопка теми).

   Тут — ЛИШЕ перекриття власних блоків привала, яких немає на
   болванці: .us-buy-panel (біла картка покупки), .us-buy-trust,
   .us-gram-box (повзунок «Скільки грамів?»), зебра характеристик.
   Ці правила живуть в інлайн-<style> усередині header.twig привала
   (108 КБ, поза шарами, частина з !important та ID-селекторами),
   тому перекриваємо їх у шарі hb-dark з !important — важливе
   оголошення в шарі сильніше за важливе поза шарами.

   Кольори беремо ТІЛЬКИ з токенів --hb-*: у темній темі вони
   темні, у світлій — світлі, тож обидві теми лишаються цілими.
   ============================================================ */
@layer hb-dark{

/* --- 1. Права колонка як на болванці ---------------------------
   Привал ділив .us-product-right на дві колонки (характеристики
   ліворуч, біла панель покупки 300px праворуч, sticky).
   На болванці колонка ОДНА: модель/наявність → ціна → рядок
   «Кількість + 2 кнопки» → «Характеристики чаю» плитками.
   Скасовуємо грід і розпускаємо панель — порядок далі задає
   custom.css (.us-product-attr{order:4}). */
.us-product-right{
  display:flex !important; flex-direction:column !important;
  grid-template-columns:none !important; grid-template-rows:none !important;
}
.us-buy-panel{
  grid-column:auto !important; grid-row:auto !important; position:static !important;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; box-shadow:none !important;
  display:flex !important; flex-direction:column !important; width:100% !important;
}

/* --- 2. Шапка панелі: модель, наявність, ціна ------------------ */
.us-buy-panel .us-product-info{ order:1 !important; }
.us-buy-panel .us-product-info-list{ margin-bottom:10px !important; }
.us-buy-panel .us-product-info-item{ color:var(--hb-mut) !important; font-size:13px !important; }
.us-buy-panel .us-product-info-item-model .us-product-info-code{
  background:var(--hb-code-bg) !important; color:var(--hb-code-ink) !important;
  border-radius:99px !important; padding:3px 12px !important; font-size:12.5px !important; font-weight:600 !important;
}
.us-buy-panel .us-product-info-item-stock .us-product-info-is{
  background:var(--hb-ok-bg) !important; color:var(--hb-ok-ink) !important;
  border-radius:99px !important; padding:3px 12px !important; font-size:12.5px !important; font-weight:700 !important;
}
.us-buy-panel .us-price-actual,
.us-buy-panel .us-price-new,
.us-price-actual{
  color:var(--hb-ink) !important; font-size:36px !important; font-weight:800 !important;
  letter-spacing:-.01em !important;
}
.us-buy-panel .us-price-old{ color:var(--hb-dim-3) !important; }
.us-buy-panel .us-price-block{ margin:0 0 4px !important; gap:14px !important; flex-wrap:wrap !important; }
.us-buy-panel .oct-popup-found-cheaper-link,
.us-buy-panel .us-product-link{ color:var(--hb-green-t) !important; font-size:12.5px !important; }

/* --- 3. Рядок покупки: лічильник + дві кнопки в ОДНУ лінію -----
   Інлайн привала ставив .us-product-action{display:block!important}
   і кнопки на 100% ширини одна під одною. */
.us-buy-panel .us-product-action,
.us-product-right .us-product-action{
  order:2 !important; display:flex !important; width:100% !important;
  align-items:center !important; gap:10px !important; flex-wrap:wrap !important;
  /* роздільник під ціною малює сама тема (border-bottom у .us-product-info) —
     свою лінію не додаємо, інакше виходили дві смуги і зайвий провал */
  padding-top:6px !important; margin-top:0 !important; border-top:0 !important;
}
.us-buy-panel .us-product-action-left,
.us-product-right .us-product-action-left{
  display:flex !important; width:100% !important; align-items:center !important;
  gap:10px !important; flex-wrap:nowrap !important;
}
.us-buy-panel .us-product-quantity{ margin:0 !important; }
.us-buy-panel .us-product-btn,
.us-product-right .us-product-action-left .us-product-btn{
  width:auto !important; margin:0 !important; flex:0 1 auto !important; white-space:nowrap !important;
}
/* «Кількість:» — підпис у рядок, не окремим блоком */
.us-product-right .us-product-action .product-quantity-label,
.us-buy-panel .product-quantity-label{
  color:var(--hb-mut) !important; font-size:13px !important; font-weight:600 !important;
  margin:0 10px 0 0 !important; white-space:nowrap !important; background:transparent !important;
}
.us-buy-panel .us-product-quantity > .us-product-quantity,
.us-product-right .us-product-quantity.us-product-quantity{ margin-bottom:0 !important; }
/* обгортка «label + степер» теж у рядок */
.us-product-right .us-product-action-left > .us-product-quantity{
  display:flex !important; align-items:center !important; border:0 !important;
  background:transparent !important; border-radius:0 !important; flex:0 0 auto !important;
}
/* сам степер: тема лишає gap:14px і зрізає «+» */
.us-product-right .btn-group.us-product-quantity,
.us-buy-panel .btn-group.us-product-quantity{
  gap:0 !important; background:var(--hb-surface-2) !important;
  border:1px solid var(--hb-line) !important; border-radius:999px !important; overflow:hidden !important;
}
.us-product-right .btn-group.us-product-quantity .form-control,
.us-product-right .btn-group.us-product-quantity input{
  background:transparent !important; color:var(--hb-ink) !important;
  -webkit-text-fill-color:var(--hb-ink) !important; border:0 !important;
}

/* --- 4. Рядок довіри: окрема плитка ПІД характеристиками --------
   Скрипт у footer.twig переносить .us-buy-trust у кінець правої
   колонки: на болванці між кнопками і «Характеристиками чаю»
   нічого немає, а тут цей рядок рвав картку навпіл. */
.us-product-right > .us-buy-trust,
.us-buy-trust{
  order:9 !important; margin:14px 0 0 !important; padding:12px 14px !important;
  border:0 !important; border-radius:10px !important;
  background:var(--hb-surface-2) !important;
  color:var(--hb-dim-2) !important; font-size:12.5px !important; line-height:1.55 !important;
  display:grid !important; gap:6px !important;
}
.us-buy-trust b{ color:var(--hb-ink-2) !important; }

/* --- 5. Характеристики: зняти зебру привала --------------------
   custom.css робить плитки (мітка зверху сірим, значення білим);
   інлайн привала фарбував кожен другий рядок у #f6f3ee. */
/* акцентні плитки виключаємо — інакше зебра з :nth-child (вища
   специфічність) перебивала золото «Ефекту» у світлій темі */
.us-product-attr-cont .us-product-attr-item:not(.us-attr-effect):not(.us-attr-power),
.us-product-attr-cont .us-product-attr-item:nth-child(odd):not(.us-attr-effect):not(.us-attr-power){
  background:var(--hb-surface-2) !important;
}
.us-product-attr-cont .us-product-attr-item span:first-child{ color:var(--hb-dim-2) !important; }
.us-product-attr-cont .us-product-attr-item span:last-child{ color:var(--hb-ink-2) !important; }
.us-product-attr .us-product-attr-title{ color:var(--hb-dim) !important; }

/* --- 6. «Ефект» і «Міцність» ------------------------------------
   Скрипт у footer.twig приводить розмітку привала до вигляду
   болванки (додає клас .us-product-attr-item, <b> → <span>,
   зірки → сегментна шкала). Тут — страховка на випадок, якщо
   скрипт не встиг відпрацювати, і фарбування самої шкали. */
.us-product-attr-cont .us-attr-effect,
.us-product-attr .us-product-attr-cont .us-product-attr-item.us-attr-effect,
.us-product-attr-cont .us-product-attr-item.us-attr-effect:nth-child(odd){
  background:linear-gradient(135deg,var(--hb-gold-2),var(--hb-gold-2d)) !important;
  border:0 !important; border-radius:10px !important; padding:13px 16px !important; margin:4px 0 !important;
  display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:2px !important;
}
.us-product-attr-cont .us-attr-effect b,
.us-product-attr-cont .us-attr-effect span:first-child{
  color:var(--hb-gold-ink) !important; font-size:11px !important; font-weight:800 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important; margin:0 !important;
  background:transparent !important; display:block !important;
}
.us-product-attr-cont .us-attr-effect span:last-child{
  color:var(--hb-gold-ink-2) !important; font-weight:700 !important; font-size:14px !important;
  background:transparent !important;
}
.us-product-attr-cont .us-attr-power,
.us-product-attr .us-product-attr-cont .us-product-attr-item.us-attr-power,
.us-product-attr-cont .us-product-attr-item.us-attr-power:nth-child(odd){
  background:var(--hb-surface-2) !important; border:0 !important; border-radius:10px !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:8px !important; padding:11px 14px 12px !important; margin:0 0 6px !important;
}
.us-product-attr-cont .us-attr-power > span:first-child{
  color:var(--hb-dim-2) !important; font-size:12px !important; font-weight:600 !important;
  background:transparent !important;
}
.us-product-attr-cont .us-attr-power .us-attr-stars{
  color:var(--hb-ink-2) !important; background:transparent !important;
}
/* сегментна шкала (розмітку створює скрипт, як на болванці) */
.us-attr-scale{ display:block !important; width:100% !important; }
.us-attr-scale .segs{ display:flex !important; gap:4px !important; margin-bottom:6px !important; }
.us-attr-scale .seg{
  flex:1 1 0 !important; height:8px !important; border-radius:99px !important;
  background:var(--hb-line) !important; display:block !important;
}
.us-attr-scale .seg.on{ background:linear-gradient(90deg,var(--hb-gold-l),var(--hb-gold-d)) !important; }
.us-attr-scale .ends{ display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:10px !important; }
.us-attr-scale .ends em{ font-style:normal !important; font-size:11.5px !important; color:var(--hb-dim-3) !important; }
.us-attr-scale .ends b{ font-size:13.5px !important; font-weight:800 !important; color:var(--hb-ink-2) !important; }

/* --- 7. Повзунок «Скільки грамів?» (розсипний чай) -------------- */
.us-gram-box{ order:2 !important; margin:14px 0 4px !important; }
.us-gram-head{ color:var(--hb-dim) !important; }
.us-gram-head b{ color:var(--hb-ink) !important; }
#us-gram-range{
  background:linear-gradient(90deg,var(--hb-gold-d) 0%,var(--hb-gold) var(--fill),var(--hb-line) var(--fill),var(--hb-line) 100%) !important;
}
#us-gram-range::-webkit-slider-thumb{ background:var(--hb-surface) !important; border-color:var(--hb-gold) !important; }
#us-gram-range::-moz-range-thumb{ background:var(--hb-surface) !important; border-color:var(--hb-gold) !important; }
.us-gram-ticks{ color:var(--hb-dim-3) !important; }
.us-gram-full{
  background:var(--hb-surface-2) !important; color:var(--hb-mut) !important; border-radius:11px !important;
}
.us-gram-full b{ color:var(--hb-gold) !important; }
#us-gram-full-go{ color:var(--hb-green-t) !important; }
.us-gram-min{ color:var(--hb-dim-3) !important; }
.us-gram-per, .us-price-per{ color:var(--hb-dim-2) !important; }

/* розсипний режим: вагу задає повзунок, штатний лічильник і його
   підпис «Кількість:» ховаємо (наше правило вище повертало їх) */
.us-gram-mode .us-product-action-left > .us-product-quantity,
.us-gram-mode .us-product-quantity,
.us-gram-mode .product-quantity-label{ display:none !important; }

/* --- 8. Плитки категорії «Ефект / Міцність» --------------------- */
.us-cat-eff{ background:var(--hb-surface-3) !important; color:var(--hb-gold) !important; }
.us-cat-power{ color:var(--hb-dim-2) !important; }
.us-cat-power b{ color:var(--hb-ink-2) !important; }
.us-cat-stars i{ color:var(--hb-gold) !important; }
.us-cat-stars i.off{ color:var(--hb-star-off) !important; }
.us-module-price .us-module-price-actual{ color:var(--hb-ink) !important; }

/* --- 9. Попап кошика привала ----------------------------------- */
#us-cart-modal .modal-header{ background:var(--hb-surface) !important; border-bottom-color:var(--hb-line) !important; }
#us-cart-modal .modal-title{ color:var(--hb-ink) !important; }
#us-cart-modal .us-cart-item{ border-top-color:var(--hb-line) !important; }
#us-cart-modal .us-cart-item-last .total-text{ color:var(--hb-ink) !important; border-top-color:var(--hb-line) !important; }
#us-cart-modal .us-cart-item-last .total-text .gold{ color:var(--hb-gold) !important; }
.us-cart-ship{ background:var(--hb-surface-2) !important; color:var(--hb-mut) !important; }
.us-cart-ship-done{ background:var(--hb-green-soft) !important; color:var(--hb-green-t) !important; }
.us-cart-ship-bar{ background:var(--hb-line) !important; }
.us-cart-actions .us-module-btn{ border-color:var(--hb-line) !important; color:var(--hb-mut) !important; background:var(--hb-surface-2) !important; }

/* --- 10. Секція «Про товар» (створює скрипт у footer.twig) ------ */
.hb-about{ border-top-color:var(--hb-line) !important; }
.hb-about-title{ color:var(--hb-ink) !important; }
.hb-about-text, .hb-about-text p, .hb-about-text li{ color:var(--hb-mut) !important; }
.hb-about-text b, .hb-about-text strong{ color:var(--hb-ink) !important; }
.hb-about-kick{ color:var(--hb-gold) !important; }

/* --- 10b. Горизонтальний скрол ---------------------------------
   Шапка привала перевантажена (лого + каталог + чат + пошук +
   телефон + кошик): .us-cart-box вилазив за вікно на 6px ще ДО
   наших правок, кнопка теми додавала ще ~15px. Замикаємо документ
   по ширині вікна через overflow-x:clip — на відміну від hidden
   він не ламає position:sticky. Кнопці теми зменшуємо відступ. */
html, body{ max-width:100% !important; overflow-x:clip !important; }
header .container > .row{ max-width:100% !important; }
#hb-theme-toggle{ margin-right:8px !important; }

/* --- 10c. Мобільна: фото зверху ---------------------------------
   Привал ставив .us-product-right{order:-1} — на телефоні картка
   починалася з ціни, фото їхало під характеристики. На болванці
   порядок звичайний: заголовок → фото → ціна → кнопки. */
@media (max-width:991.98px){
  .us-product-top > .us-product-left{ order:0 !important; }
  .us-product-top > .us-product-right{ order:1 !important; }
}

/* --- 11. Мобільна ≤575: колонка без накладань -------------------
   На болванці на 390px кнопки налазять одна на одну — у привала
   робимо стовпчик: степер 120×40, обидві кнопки на всю ширину. */
@media (max-width:575.98px){
  .us-buy-panel .us-product-action,
  .us-product-right .us-product-action{
    display:block !important; padding-top:12px !important; margin-top:12px !important;
  }
  .us-buy-panel .us-product-action-left,
  .us-product-right .us-product-action-left{
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    gap:8px !important; flex-wrap:wrap !important; width:100% !important;
  }
  .us-product-right .us-product-action-left > .us-product-quantity{
    flex-direction:row !important; align-items:center !important; justify-content:flex-start !important;
    gap:10px !important; width:100% !important;
  }
  .us-product-right .btn-group.us-product-quantity,
  .us-buy-panel .btn-group.us-product-quantity{
    width:120px !important; min-width:120px !important; max-width:120px !important;
    height:40px !important; min-height:40px !important; flex:0 0 120px !important; gap:0 !important;
  }
  .us-product-right .btn-group.us-product-quantity button,
  .us-product-right .btn-group.us-product-quantity .btn{
    height:38px !important; line-height:38px !important; width:34px !important; min-width:34px !important;
  }
  .us-product-right .btn-group.us-product-quantity input,
  .us-product-right .btn-group.us-product-quantity .form-control{
    height:38px !important; line-height:38px !important; width:44px !important; font-size:14px !important;
  }
  .us-buy-panel .us-product-btn,
  .us-product-right .us-product-action-left .us-product-btn{
    width:100% !important; min-width:0 !important; flex:0 0 auto !important;
    height:46px !important; min-height:46px !important;
    font-size:13.5px !important; padding:0 14px !important; white-space:nowrap !important;
  }
  .us-buy-panel .us-price-actual, .us-price-actual{ font-size:30px !important; }
  .us-product-attr-cont .us-attr-effect{ padding:12px 14px !important; }
}

}

/* ==== HBCARD3-START ==== 2026-09-06 */

:root{
  --hb-font-display:'Cormorant Garamond','Playfair Display',Georgia,'Times New Roman',serif;
  --hb-font-body:'Manrope','Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --brand-font:var(--hb-font-body);
  --hb-gold-soft:rgba(201,164,92,.12);
}

html[data-font="b"]{
  --hb-font-display:'Playfair Display','Cormorant Garamond',Georgia,serif;
}

@layer hb-dark{
/* блок hbcard3
   ВАЖЛИВО про специфічність: у header.twig після нашого <link> йде ~108 КБ
   інлайн-CSS теми (блоки <style id="product-card-2025"> тощо), а в цьому ж
   файлі вище є старіші правила з !important. Тому селектори тут навмисно
   «важкі» (клас повторюється двічі-тричі) — інакше правило програє.        */

/* ------------------------------------------------------------------
   1. ТИПОГРАФІКА
   Пара: Cormorant Garamond 600/700 (заголовки) + Manrope 400…700 (текст).
   Обидві мають повну кирилицю. Тема тягне шрифт через
   `body,[class*="us-"]{font-family:var(--brand-font,'Open Sans')!important}`
   (рядок 78) — задаємо --brand-font, і весь текст стає Manrope.
   ------------------------------------------------------------------ */
/* Варіант B пари (Playfair Display): <html data-font="b"> */

html body,
html body [class*="us-"]{ font-family:var(--hb-font-body) !important; }

/* заголовки — display-гарнітура */
html body h1, html body h2, html body h3,
html body .us-content-title.us-content-title,
html body .us-main-shop-title.us-main-shop-title,
html body .us-module-column-box-title.us-module-column-box-title,
html body .us-categories-wall-title.us-categories-wall-title,
html body .us-category-title.us-category-title,
html body .us-product-title.us-product-title,
html body .us-advantages-title.us-advantages-title,
html body .us-news-block-title.us-news-block-title,
html body .us-module-box-title.us-module-box-title,
html body .us-footer-title.us-footer-title,
html body .ft2-col-t, html body .ft2-sub-t,
html body .hb-about-title,
html body .modal-title.modal-title{
  font-family:var(--hb-font-display) !important;
  font-weight:700 !important;
  letter-spacing:.005em !important;
}

/* шкала розмірів: H1 картки товару / категорії */
html body h1.us-main-shop-title.us-main-shop-title,
html body h1.us-content-title.us-content-title,
html body .us-product-top h1{
  font-size:42px !important; line-height:1.12 !important; letter-spacing:-.005em !important;
}
@media (max-width:991.98px){
  html body h1.us-main-shop-title.us-main-shop-title,
  html body h1.us-content-title.us-content-title{ font-size:32px !important; }
}
@media (max-width:575.98px){
  html body h1.us-main-shop-title.us-main-shop-title,
  html body h1.us-content-title.us-content-title{ font-size:28px !important; line-height:1.15 !important; }
}

/* ціна на картці товару */
html body .us-price-actual.us-price-actual,
html body .us-buy-panel .us-price-actual.us-price-actual{
  font-family:var(--hb-font-body) !important;
  font-size:34px !important; font-weight:700 !important; letter-spacing:-.5px !important;
}
@media (max-width:575.98px){
  html body .us-price-actual.us-price-actual,
  html body .us-buy-panel .us-price-actual.us-price-actual{ font-size:30px !important; }
}

/* плитки характеристик: мітка — капси, значення — 15/600 */
html body .us-product-attr-item.us-product-attr-item > span:first-child{
  font-size:12px !important; font-weight:600 !important;
  text-transform:uppercase !important; letter-spacing:.08em !important;
}
html body .us-product-attr-item.us-product-attr-item > span:last-child{
  font-size:15px !important; font-weight:600 !important; letter-spacing:0 !important;
}

/* кнопки */
html body .us-product-btn.us-product-btn,
html body .us-module-cart-btn.us-module-cart-btn,
html body .button-one-click.button-one-click,
html body #button-cart{
  font-family:var(--hb-font-body) !important;
  font-size:13px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.06em !important;
}

/* ------------------------------------------------------------------
   3. ШАПКА: кнопка «Онлайн чат» (її вставляє віджет
   sklad.privalshop.com.ua/chat-widget.js прямо в .us-search-box і вона
   налазить на поле пошуку) — прибрана. Чат лишається пузирем справа знизу.
   ------------------------------------------------------------------ */
#us-header-chat-btn,
.us-search-box #us-header-chat-btn,
button#us-header-chat-btn{ display:none !important; }

html body .us-search-box{ gap:12px !important; }
html body .us-search-box #search,
html body .us-search-box .header-input-group{
  flex:1 1 auto !important; min-width:0 !important; width:auto !important; max-width:none !important;
}

/* ------------------------------------------------------------------
   2. ФОТО ТОВАРУ: контейнери головного фото і мініатюр — поверхня теми,
   картинка вписується (contain). Білі поля всередині самих JPG прибрати
   версткою не можна (це пікселі), але контейнер більше не білий.
   ------------------------------------------------------------------ */
html body .us-product-photo-main,
html body .us-product-slide-box,
html body .us-product-photo-nav,
html body .us-product-slide-nav{ background:transparent !important; }

html body .us-product-photo-main .us-product-slide,
html body .us-product-photo-main .slick-slide{
  background:var(--hb-surface) !important;
  border-radius:16px !important; overflow:hidden !important;
}
html body .us-product-photo-main .oct-gallery{
  display:block !important; background:var(--hb-surface) !important;
  border-radius:16px !important; overflow:hidden !important;
}
/* height:100% + contain — щоб непропорційне фото стояло по центру
   квадратного слайда, а не тулилося догори з проваллям знизу */
html body .us-product-photo-main .us-product-slide img,
html body .us-product-photo-main .slick-slide img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; background:transparent !important;
  border-radius:16px !important; display:block !important;
}

/* мініатюри: .image-additional-item > a.additional-gallery-item > img */
html body .image-additional-box,
html body .image-additional-list,
html body .image-additional-item{ background:transparent !important; }
html body .image-additional-item a.additional-gallery-item{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:90px !important; height:90px !important;
  background:var(--hb-surface) !important;
  border:1px solid var(--hb-line) !important;
  border-radius:12px !important; overflow:hidden !important;
}
html body .image-additional-item a.additional-gallery-item img{
  width:100% !important; height:100% !important;
  /* cover, а не contain: у частини фото білий фон вшитий у самі пікселі,
     і на мініатюрі він читався як біла рамка */
  object-fit:cover !important; background:transparent !important;
  border:0 !important; border-radius:11px !important;
}
/* стрілки слайдерів були світло-сірими прямокутниками на темному тлі */
html body .us-product-left .slick-arrow,
html body .image-additional-box .slick-arrow,
html body .us-product-photo-main .slick-arrow{
  background:var(--hb-surface-2) !important;
  color:var(--hb-ink) !important;
  border:1px solid var(--hb-line) !important;
  border-radius:10px !important;
}

/* ------------------------------------------------------------------
   4. КАРТКА КАТАЛОГУ (категорія + головна)
   ------------------------------------------------------------------ */
html body .us-category-products .product-layout,
html body .us-module-column-box-content .product-layout{
  display:flex !important; min-width:0 !important;
}

html body .us-module-item.us-module-item.us-module-item{
  display:flex !important; flex-direction:column !important;
  width:100% !important; min-width:0 !important; height:100% !important;
  background:var(--hb-surface) !important;
  border:1px solid var(--hb-line) !important;
  border-radius:16px !important; overflow:hidden !important;
  padding:0 0 12px 0 !important;
  box-shadow:none !important;
}
html body .us-module-item.us-module-item .us-module-img{
  order:1; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important;
  /* flex-item інакше стискається і квадрат ріже картинку зверху/знизу */
  flex:0 0 auto !important; height:auto !important;
  aspect-ratio:1/1 !important; background:var(--hb-surface-2) !important; border-radius:0 !important;
}
html body .us-module-item.us-module-item .us-module-img img{
  width:100% !important; height:100% !important; object-fit:cover !important;
}
html body .us-module-item.us-module-item .us-module-caption{
  order:2; display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; width:100% !important; min-width:0 !important;
  padding:0 !important; margin:0 !important;
}
html body .us-module-item.us-module-item .us-module-title{
  order:1; padding:12px 12px 0 !important; margin:0 !important; text-align:center !important;
  min-width:0 !important; min-height:0 !important;
}
html body .us-module-item.us-module-item .us-module-title a{
  font-size:15px !important; font-weight:600 !important; line-height:1.3 !important;
  color:var(--hb-ink) !important;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important; white-space:normal !important;
  /* два рядки резервуємо завжди — інакше картка з коротшою назвою
     виходить нижчою і кнопки в ряду стоять на різній висоті */
  min-height:2.6em !important;
}
html body .us-module-item .us-product-list-description{ display:none !important; }

/* «Ефект» — компактна приглушено-золота плашка в один рядок з трикрапкою.
   Багаторядковий -webkit-box тут не працює: плашка є flex-item, і Chromium
   блокіфікує display у flow-root, тому line-clamp мовчки вимикається. */
html body .us-cat-eff.us-cat-eff{
  order:2; margin:8px 10px 0 !important; padding:5px 9px !important;
  border-radius:8px !important;
  background:var(--hb-gold-soft) !important;
  border:1px solid rgba(201,164,92,.28) !important;
  color:var(--hb-gold-l) !important;
  font-size:11.5px !important; font-weight:600 !important; line-height:1.35 !important;
  text-align:center !important;
  white-space:nowrap !important; text-overflow:ellipsis !important;
  min-width:0 !important; max-width:100% !important;
  overflow:hidden !important;
}

/* «Міцність» — сегментна шкала замість зірок (розмітку робить hb-cat-js) */
html body .us-cat-power.us-cat-power{
  order:3; margin:9px 10px 0 !important; padding:0 !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:5px !important;
  font-size:11px !important; font-weight:600 !important;
  text-transform:uppercase !important; letter-spacing:.08em !important;
  color:var(--hb-dim) !important; min-width:0 !important; white-space:normal !important;
}
html body .us-cat-power .us-cat-stars{ display:none !important; }
html body .us-cat-power > b{ display:none !important; }
html body .us-cat-power .hb-cat-scale{
  display:flex !important; align-items:center !important; gap:7px !important;
  text-transform:none !important; letter-spacing:0 !important;
}
html body .us-cat-power .hb-cat-segs{ display:flex !important; gap:3px !important; }
html body .us-cat-power .hb-cat-segs i{
  display:block !important; width:8px !important; height:5px !important; border-radius:2px !important;
  background:var(--hb-line) !important; font-style:normal !important;
}
html body .us-cat-power .hb-cat-segs i.on{
  background:linear-gradient(180deg,var(--hb-gold-l),var(--hb-gold)) !important;
}
html body .us-cat-power .hb-cat-num{
  font-size:12px !important; font-weight:700 !important; color:var(--hb-ink) !important;
  letter-spacing:0 !important; text-transform:none !important;
}

/* ціна */
html body .us-module-item.us-module-item .us-module-price{
  order:4; position:static !important; grid-column:auto !important;
  justify-self:auto !important; align-self:auto !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:2px !important;
  margin:12px 10px 0 !important; padding:0 !important; text-align:center !important;
  white-space:normal !important; min-width:0 !important;
}
html body .us-module-item .us-module-price .us-module-price-actual.us-module-price-actual{
  font-size:20px !important; font-weight:700 !important; letter-spacing:-.3px !important;
  color:var(--hb-ink) !important;
}
html body .us-module-item .us-price-per.us-price-per{
  font-size:12px !important; font-weight:500 !important; color:var(--hb-dim) !important;
  white-space:normal !important; margin:0 !important; line-height:1.25 !important;
}

/* кнопка «До кошика» — на всю ширину картки, притиснута донизу */
html body .us-module-item.us-module-item .us-product-category-quantity{
  order:5; position:static !important; grid-column:auto !important;
  justify-self:stretch !important; align-self:stretch !important;
  display:block !important; width:auto !important; min-width:0 !important; max-width:none !important;
  margin:0 10px 0 !important; margin-top:auto !important; padding:12px 0 0 !important;
}
html body .us-module-item .us-module-cart-btn.us-module-cart-btn{
  display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  width:100% !important; max-width:none !important; min-width:0 !important;
  height:44px !important; padding:0 10px !important;
  border-radius:999px !important; border:0 !important;
  background:linear-gradient(180deg,#6FA05E,#4F7742) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-size:12.5px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.05em !important;
  white-space:nowrap !important;
  box-shadow:0 6px 16px rgba(79,119,66,.28) !important;
}
html body .us-module-item .us-module-cart-btn.us-module-cart-btn:hover{
  background:linear-gradient(180deg,#7BAE69,#578349) !important;
}
html body .us-module-item .us-module-cart-btn.us-module-cart-btn::before{
  content:"\f07a"; font-family:"Font Awesome 5 Free" !important; font-weight:900;
  font-size:13px; display:inline-block; color:#fff !important; -webkit-text-fill-color:#fff !important;
}

/* сітка: 2 в ряд на мобільній з відступом 10px, рівна висота */
@media (max-width:767.98px){
  html body .row.us-category-products{
    display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important; margin-left:0 !important; margin-right:0 !important;
  }
  html body .us-category-products .product-layout{
    width:auto !important; max-width:none !important; min-width:0 !important;
    flex:none !important; padding:0 !important; margin:0 !important;
  }
  /* стикери на вузькій картці були завбільшки з пів фото */
  html body .us-module-item .us-module-stickers{ top:8px !important; left:8px !important; gap:4px !important; }
  html body .us-module-item .us-module-stickers-sticker{
    font-size:8.5px !important; padding:2px 7px !important; line-height:1.4 !important;
    letter-spacing:.02em !important;
  }
  html body .us-module-item .us-module-stickers-sticker ~ .us-module-stickers-sticker{ display:none !important; }
  html body .us-module-item.us-module-item .us-module-title a{ font-size:14px !important; }
  html body .us-module-item .us-module-price .us-module-price-actual.us-module-price-actual{ font-size:19px !important; }
  html body .us-module-item .us-module-cart-btn.us-module-cart-btn{ font-size:11.5px !important; letter-spacing:.04em !important; }
}

/* ------------------------------------------------------------------
   5. «ПРО ТОВАР» на мобільній: по центру, без порожніх абзаців
   ------------------------------------------------------------------ */
html body .hb-about-text p.hb-empty{ display:none !important; }
html body .hb-about-text p.hb-gap{ margin:0 !important; height:8px !important; }
html body .hb-about-text br + br{ display:none !important; }

@media (max-width:767.98px){
  html body .hb-about{ padding:24px 16px 22px !important; text-align:center !important; }
  html body .hb-about-kick{ text-align:center !important; }
  html body .hb-about-title{ font-size:24px !important; line-height:1.2 !important; text-align:center !important; }
  html body .hb-about-text{ text-align:center !important; font-size:15px !important; line-height:1.6 !important; padding:0 !important; }
  html body .hb-about-text p{ margin:0 0 10px !important; text-align:center !important; }
  html body .hb-about-text p:last-child{ margin-bottom:0 !important; }
  html body .hb-about-text ul, html body .hb-about-text ol{
    list-style-position:inside !important; padding-left:0 !important; margin:0 0 10px !important;
    text-align:center !important;
  }
  html body .hb-about-text ul{ list-style:none !important; }
  html body .hb-about-text ul > li{ padding:0 !important; text-align:center !important; }
  html body .hb-about-text ul > li::before{
    content:"·"; color:var(--hb-gold); font-weight:700; margin-right:6px !important;
  }
  html body .hb-about-text ol > li{ text-align:center !important; }
  html body .hb-about-rule{ margin:16px auto 0 !important; }
  html body .hb-about-text img{ margin:8px auto !important; display:block !important; }
}

/* ------------------------------------------------------------------
   ТЕМНА ТЕМА — донастройка під нові блоки
   ------------------------------------------------------------------ */
html[data-theme="dark"] body .us-product-photo-main .us-product-slide,
html[data-theme="dark"] body .us-product-photo-main .slick-slide,
html[data-theme="dark"] body .us-product-photo-main .oct-gallery,
html[data-theme="dark"] body .us-product-photo-nav .slick-slide a,
html[data-theme="dark"] body .us-product-slide-nav .slick-slide a{
  background:var(--hb-surface) !important;
}
html[data-theme="dark"] body .us-module-item.us-module-item{
  background:var(--hb-surface) !important; border-color:var(--hb-line) !important;
}
html[data-theme="dark"] body .us-module-item.us-module-item .us-module-img{
  background:#141009 !important;
}
html[data-theme="dark"] body .us-module-item .us-module-title a,
html[data-theme="dark"] body .us-module-item .us-module-price .us-module-price-actual.us-module-price-actual,
html[data-theme="dark"] body .us-cat-power .hb-cat-num{ color:var(--hb-ink) !important; }
html[data-theme="dark"] body .us-cat-power .hb-cat-segs i:not(.on){
  background:rgba(255,240,210,.14) !important;
}
html[data-theme="dark"] body .us-cat-eff.us-cat-eff{
  background:rgba(201,164,92,.13) !important; color:var(--hb-gold-l) !important;
}



}
/* ==== HBCARD3-END ==== */


/* ==== DYNASTY-START ==== 2026-09-06 (Prata + Manrope, ієрогліфічний підпис) */
:root{
  --hb-font-display:'Prata',Georgia,'Times New Roman',serif;
  --hb-font-body:'Manrope','Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hb-font-cjk:'Noto Serif SC','Songti SC','SimSun','PingFang SC',serif;
  --brand-font:var(--hb-font-body);
}
html[data-font="b"]{
  --hb-font-display:'Prata',Georgia,serif;
}

@layer hb-dark{
/* «ДИНАСТІЯ» — типографіка Prata + Manrope, вертикальний ієрогліфічний підпис.
   Кожна декларація — окремим рядком: збірник (mklayer2.py) чіпляє !important
   до рядка, що закінчується на ';'. */



/* ------------------------------------------------------------------
   1. Prata має тільки вагу 400 — 700 давав би синтетичний жир.
   ------------------------------------------------------------------ */
html body h1, html body h2, html body h3,
html body .us-content-title.us-content-title,
html body .us-main-shop-title.us-main-shop-title,
html body .us-module-column-box-title.us-module-column-box-title,
html body .us-categories-wall-title.us-categories-wall-title,
html body .us-category-title.us-category-title,
html body .us-product-title.us-product-title,
html body .us-advantages-title.us-advantages-title,
html body .us-news-block-title.us-news-block-title,
html body .us-module-box-title.us-module-box-title,
html body .us-footer-title.us-footer-title,
html body .ft2-col-t, html body .ft2-sub-t,
html body .hb-about-title,
html body .hb-about-title.hb-about-title,
html body .modal-title.modal-title{
  font-family:var(--hb-font-display) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* H1 картки товару / категорії */
html body h1.us-main-shop-title.us-main-shop-title,
html body h1.us-content-title.us-content-title,
html body .us-product-top h1{
  font-size:40px !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
}
@media (max-width:991.98px){
  html body h1.us-main-shop-title.us-main-shop-title,
  html body h1.us-content-title.us-content-title{
    font-size:30px !important;
    line-height:1.12 !important;
  }
}
@media (max-width:575.98px){
  html body h1.us-main-shop-title.us-main-shop-title,
  html body h1.us-content-title.us-content-title{
    font-size:28px !important;
    line-height:1.12 !important;
  }
}

/* заголовки секцій головної («Популярні товари», «Категорії» тощо) */
html body .us-module-column-box-title.us-module-column-box-title,
html body .us-module-box-title.us-module-box-title,
html body .us-categories-wall-title.us-categories-wall-title,
html body .us-content-title.us-content-title,
html body .us-advantages-title.us-advantages-title,
html body .us-news-block-title.us-news-block-title{
  font-size:32px !important;
  line-height:1.15 !important;
}
@media (max-width:767.98px){
  html body .us-module-column-box-title.us-module-column-box-title,
  html body .us-module-box-title.us-module-box-title,
  html body .us-categories-wall-title.us-categories-wall-title,
  html body .us-advantages-title.us-advantages-title,
  html body .us-news-block-title.us-news-block-title{
    font-size:24px !important;
  }
}

/* ціна картки товару — display-гарнітура, вага 400 */
html body .us-price-actual.us-price-actual,
html body .us-buy-panel .us-price-actual.us-price-actual{
  font-family:var(--hb-font-display) !important;
  font-size:34px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}
@media (max-width:575.98px){
  html body .us-price-actual.us-price-actual,
  html body .us-buy-panel .us-price-actual.us-price-actual{
    font-size:30px !important;
  }
}
/* «за 25 г» під ціною — Manrope 500 приглушений */
html body .us-buy-panel .us-price-per.us-price-per,
html body .us-product-right .us-price-per.us-price-per{
  font-family:var(--hb-font-body) !important;
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  color:var(--hb-mut) !important;
}

/* плитки характеристик: мітка 11/500 капси, значення 14.5/600 */
html body .us-product-attr-item.us-product-attr-item > span:first-child{
  font-family:var(--hb-font-body) !important;
  font-size:11px !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}
html body .us-product-attr-item.us-product-attr-item > span:last-child{
  font-family:var(--hb-font-body) !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}

/* кнопки — Manrope 700 13/.06em капси */
html body .us-product-btn.us-product-btn,
html body .us-module-cart-btn.us-module-cart-btn,
html body .button-one-click.button-one-click,
html body #button-cart{
  font-family:var(--hb-font-body) !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}

/* назва й ціна в плитці каталогу — display-гарнітура */
html body .us-module-item.us-module-item .us-module-title a{
  font-family:var(--hb-font-display) !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
}
html body .us-module-item .us-module-price .us-module-price-actual.us-module-price-actual{
  font-family:var(--hb-font-display) !important;
  font-size:20px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}
@media (max-width:767.98px){
  html body .us-module-item.us-module-item .us-module-title a{
    font-size:15px !important;
  }
  html body .us-module-item .us-module-price .us-module-price-actual.us-module-price-actual{
    font-size:19px !important;
  }
}

/* ------------------------------------------------------------------
   2. ВЕРТИКАЛЬНИЙ ІЄРОГЛІФІЧНИЙ ПІДПИС (розмітку робить hb-dyn-js)
   ------------------------------------------------------------------ */
html body .us-product-top .us-product-right.us-product-right{
  position:relative !important;
}
@media (min-width:992px){
  html body .us-product-top .us-product-right.us-product-right{
    padding-right:56px !important;
  }
}
html body .hb-vert{
  position:absolute !important;
  right:0 !important;
  top:2px !important;
  bottom:2px !important;
  z-index:2 !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  font-family:var(--hb-font-cjk) !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:.35em !important;
  color:var(--hb-gold) !important;
  border-left:1px solid var(--hb-line) !important;
  padding-left:10px !important;
  opacity:.85 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  pointer-events:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}
/* заголовки секцій мобільного меню були жорстко прописані Cormorant
   в інлайн-CSS шапки — без нього падали на Georgia */
html body .usmenu-section-head a,
html body #us_menu_mobile_content .usmenu-section-head a{
  font-family:var(--hb-font-display) !important;
  font-weight:400 !important;
  font-size:19px !important;
}

/* ------------------------------------------------------------------
   3. ТЕМНИЙ ТЕКСТ НА ТЕМНОМУ — залишки після аудиту (390, dark):
   світлими лишаємо не темніше --hb-dim (#A79B84). Світлої теми не чіпаємо.
   ------------------------------------------------------------------ */
/* блоки переваг на головній: посилання були rgb(44,36,32) */
html[data-theme="dark"] body .us-advantages-title a,
html[data-theme="dark"] body .us-advantages-title,
html[data-theme="dark"] body .us-advantages-text{
  color:var(--hb-ink) !important;
}
/* адреса в мобільному інфо-меню: була rgb(39,35,35) */
html[data-theme="dark"] body .us-header-location-address,
html[data-theme="dark"] body .us-header-location-city{
  color:var(--hb-mut) !important;
}
/* зелені підзаголовки й посилання — темно-зелений #5B8A4E на темному не читався */
html[data-theme="dark"] body .mobile-info-title strong,
html[data-theme="dark"] body .mobile-info-title,
html[data-theme="dark"] body .ig-feed-handle,
html[data-theme="dark"] body .oct-policy-text a,
html[data-theme="dark"] body .us-footer-contacts a{
  color:var(--hb-green-t) !important;
}
/* підкатегорії в категорії: назви були rgb(102,102,102) */
html[data-theme="dark"] body .subcat-item-title,
html[data-theme="dark"] body .subcat-item .subcat-item-title{
  color:var(--hb-ink) !important;
}
/* опис категорії: rgb(137,137,137) */
html[data-theme="dark"] body .us-category-description-text,
html[data-theme="dark"] body .us-category-description-text p,
html[data-theme="dark"] body .us-category-description-text li,
html[data-theme="dark"] body .us-category-description-text strong,
html[data-theme="dark"] body .us-category-description-text b{
  color:var(--hb-mut) !important;
}
/* другорядні підписи картки: були #A0937C / #8F8471 */
html[data-theme="dark"] body .us-product-attr-item > span:first-child,
html[data-theme="dark"] body .us-attr-scale .ends em,
html[data-theme="dark"] body .us-gram-ticks span,
html[data-theme="dark"] body .us-gram-min,
html[data-theme="dark"] body .us-buy-trust span,
html[data-theme="dark"] body .us-gram-per{
  color:var(--hb-dim) !important;
}

@media (max-width:991.98px){
  html body .hb-vert.hb-vert--h{
    position:static !important;
    writing-mode:horizontal-tb !important;
    display:block !important;
    width:auto !important;
    border-left:0 !important;
    padding-left:0 !important;
    margin:4px 0 12px !important;
    text-align:center !important;
    font-size:12px !important;
    letter-spacing:.4em !important;
    opacity:.9 !important;
  }
}

}

/* ТЕМНИЙ ТЕКСТ НА ТЕМНОМУ (Аман, 06.09.2026): мобільне меню й банери.
   Дописати в кінець privalshop-hb.css після завершення hbcard3. */
@layer hb-dark {
  html[data-theme="dark"] #us_menu_mobile_content .usmenu-section-head a,
  html[data-theme="dark"] #us_menu_mobile_content .usmenu-section-head,
  html[data-theme="dark"] #us_menu_mobile_content .usmenu-label,
  html[data-theme="dark"] #us_menu_mobile_content .oct-menu-item-name,
  html[data-theme="dark"] #us_menu_mobile_content .oct-menu-a,
  html[data-theme="dark"] #us_menu_mobile_content a { color: var(--hb-ink) !important; }
  html[data-theme="dark"] #us_menu_mobile_content .usmenu-label { opacity: .92 !important; }
  /* банери на головній: заголовок/текст/кнопка були кольору rgb(23,19,13)/rgb(90,74,64) */
  html[data-theme="dark"] .us-banner-plus-title,
  html[data-theme="dark"] .us-banner-plus-text,
  html[data-theme="dark"] .us-banner-plus-btn { color: var(--hb-ink) !important; }
  html[data-theme="dark"] .us-banner-plus-btn { border-color: var(--hb-gold) !important; }
}
/* ==== DYNASTY-END ==== */

@layer hb-dark{
/* ФОТО-ПРОВАЛ НА МОБІЛЬНІЙ (Аман, 07.09.2026): slick фіксує висоту .slick-list
   по найвищому слайду — під широким фото (1000x552 у наборів) лишалась порожня
   смуга ~150px до мініатюр. Контейнер слайдера тут .us-product-slide-box
   (не .us-product-photo-main). На вузьких екранах — висота по контенту. */
@media (max-width:767.98px){
  html body .us-product-slide-box .slick-list,
  html body .us-product-slide-box .slick-track,
  html body .us-product-slide-box .us-product-slide,
  html body .us-product-slide-box .slick-slide,
  html body .us-product-slide-box .slick-slide > div,
  html body .us-product-slide-box .oct-gallery{ height:auto !important; }
  html body .us-product-slide-box .us-product-slide img,
  html body .us-product-slide-box .slick-slide img{
    height:auto !important; max-height:72vh !important; padding-bottom:0 !important;
  }
  html body .us-product-slide-box{ margin-bottom:10px !important; }
  html body .us-product-slide-nav,
  html body .us-product-photo-nav{ margin-top:0 !important; }
}
}