/* ==========================================================================
   thermera.com.ua - main.css v4 (дизайн-система Thermera, макети «Thermera Home», «Thermera Category», «Thermera Product»)
   Один файл для всіх шаблонів: home, category, product, article, hub, static,
   landing-b2b, 404. Включає колишні інлайн-чанки styles.inner і styles.usp.
   Класи: блок_елемент (одне підкреслення), модифікатори --mod, стани .is-*.
   ========================================================================== */

/* ---------- 1. Токени ---------- */
:root {
  /* Базова палітра */
  --th-ember-500: #C4501B;   /* акцент «жар» */
  --th-ember-600: #A8420F;   /* hover акценту */
  --th-ember-400: #E1622A;   /* hover акценту на темному */
  --th-ember-100: #F1D9C8;   /* рамка на ember-25 */
  --th-ember-50:  #FCEFE6;   /* обрана фасовка, м'який тінт */
  --th-ember-25:  #FFF7F1;   /* поверхня калькулятора */
  --th-amber-300: #E1A56B;   /* eyebrow на темному */
  --th-brown-700: #8A4A1F;   /* посилання, вторинний акцент */
  --th-ink-900: #1C1917;
  --th-ink-700: #3F3832;
  --th-ink-600: #5C544C;
  --th-ink-500: #6B625A;
  --th-ink-400: #9A928A;
  --th-ink-300: #B9AE9E;
  --th-sand-25:  #FBF9F5;    /* фон сторінки */
  --th-sand-50:  #F5F0E8;    /* м'яка поверхня, фон без фото */
  --th-sand-100: #F3EEE5;    /* футер */
  --th-sand-150: #F0EBE2;    /* роздільник рядків таблиці */
  --th-sand-200: #E8E1D6;    /* рамки */
  --th-sand-300: #E0D6C6;    /* роздільник футера */
  --th-sand-400: #D9CFC0;    /* неактивні точки */
  --th-cocoa-900: #2B2420;   /* темний блок «Опт» */
  --th-cocoa-100: #F3EADF;
  --th-cocoa-300: #CDBFAE;
  --th-cocoa-400: #B8A996;
  --th-white: #FFFFFF;
  --th-paper: #FFFDFA;       /* поверхня модалки */
  --th-green-600: #2E7D4F;
  --th-amber-600: #B07A1F;
  --th-red-600: #C0392B;
  --th-red-300: #F2A08A;

  /* Семантика */
  --bg-page: var(--th-sand-25);
  --bg-surface: var(--th-white);
  --bg-soft: var(--th-sand-50);
  --bg-footer: var(--th-sand-100);
  --bg-dark: var(--th-cocoa-900);
  --bg-accent-soft: var(--th-ember-25);
  --bg-accent-tint: var(--th-ember-50);
  --border-default: var(--th-sand-200);
  --border-row: var(--th-sand-150);
  --border-accent-soft: var(--th-ember-100);
  --border-on-dark: rgba(255,255,255,.14);
  --text-primary: var(--th-ink-900);
  --text-body: var(--th-ink-700);
  --text-lead: var(--th-ink-600);
  --text-muted: var(--th-ink-500);
  --text-disabled: var(--th-ink-400);
  --text-link: var(--th-brown-700);
  --text-on-dark: var(--th-cocoa-100);
  --text-on-dark-muted: var(--th-cocoa-300);
  --accent: var(--th-ember-500);
  --accent-hover: var(--th-ember-600);
  --accent-hover-on-dark: var(--th-ember-400);
  --accent-eyebrow-on-dark: var(--th-amber-300);
  --status-instock: var(--th-green-600);
  --status-preorder: var(--th-amber-600);
  --status-out: var(--th-ink-400);
  --status-error: var(--th-red-600);
  --overlay: rgba(24,18,12,.55);

  /* Типографіка */
  --font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Радіуси, тіні, рух */
  --radius-xs: 5px;  --radius-sm: 8px;  --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 14px; --radius-2xl: 16px; --radius-3xl: 18px; --radius-4xl: 24px;
  --radius-pill: 999px;
  --shadow-dialog: 0 24px 64px rgba(0,0,0,.35);
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: .15s;
  --dur: .2s;

  /* Сітка */
  --container: 1216px;
  --gutter: 16px;
  --section-gap: 32px;
  --grid-gap: 12px;

  /* Сумісність: старі імена змінних (на них спираються інлайн-стилі 404 та ін.) */
  --paper: var(--bg-page);
  --paper-2: var(--bg-footer);
  --white: var(--th-white);
  --ink: var(--text-primary);
  --ink-2: var(--text-body);
  --ink-3: var(--text-lead);
  --muted: var(--text-muted);
  --border: var(--border-default);
  --border-2: var(--th-sand-300);
  --accent-light: var(--accent-hover-on-dark);
  --brand-2: var(--text-link);
  --dark: var(--bg-dark);
  --dark-text: var(--text-on-dark);
  --dark-muted: var(--text-on-dark-muted);
  --gold: var(--accent-eyebrow-on-dark);
  --error: var(--status-error);
  --r: var(--radius-2xl);
  --r-sm: var(--radius-lg);
  --r-xs: var(--radius-md);
  --r-lg: var(--radius-4xl);
}
@media (min-width: 768px)  { :root { --gutter: 32px; --grid-gap: 16px; } }
@media (min-width: 1024px) { :root { --section-gap: 56px; --grid-gap: 20px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 112px; } }

/* ---------- 2. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--accent); }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl { margin: 0; }
ul { padding: 0; list-style: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 3. Кнопки (Button: primary / outline / dark / ghost / muted / on-dark; sm / md / lg) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: var(--radius-lg);
  font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1;
  white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: var(--radius-md); }
.btn--md { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-md); }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; border-radius: var(--radius-lg); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--dark { background: var(--text-primary); color: #fff; }
.btn--dark:hover { background: #2B2F35; color: #fff; }
.btn--muted { background: var(--text-muted); color: #fff; }
.btn--muted:hover { color: #fff; }
.btn--outline {
  min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md);
  background: transparent; color: var(--text-primary); border: 1.5px solid var(--text-primary);
}
.btn--outline:hover { background: var(--text-primary); color: #fff; }
.btn--outline.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; border-radius: var(--radius-lg); }
.btn--ghost {
  min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md);
  background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
}
.btn--ghost:hover { background: var(--accent); color: #fff; }
.btn--on-dark { background: transparent; color: var(--text-on-dark); border: 1.5px solid rgba(255,255,255,.4); font-weight: 600; }
.btn--on-dark:hover { border-color: #fff; color: #fff; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .6; cursor: default; pointer-events: none; }

/* ---------- 4. Текстові елементи ---------- */
.link-more { font-size: 15px; font-weight: 600; color: var(--text-link); white-space: nowrap; }
.link-more:hover { color: var(--accent); }
.link-underline { font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.link { color: var(--text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.link:hover { color: var(--accent); }

.eyebrow { font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--text-link); }
@media (min-width: 768px) { .eyebrow { font-size: 13px; } }

.section_head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.section_title { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
@media (min-width: 1024px) { .section_title { font-size: 26px; } }

/* Badge: dark (за замовч.) / soft / accent */
.badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1; background: var(--text-primary); color: #fff; white-space: nowrap; }
.badge--soft { background: var(--bg-page); color: var(--text-muted); }
.badge--accent { background: var(--accent); color: #fff; }

/* StockStatus: крапка + текст */
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--status-instock); }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stock--preorder { color: var(--status-preorder); }
.stock--out { color: var(--status-out); }

/* Chip */
.chip { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: #fff; color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-fast); }
.chip:hover { border-color: var(--accent); color: var(--text-primary); }
.chip.is-active { background: var(--text-primary); border-color: var(--text-primary); color: #fff; }
.chip--sm { padding: 9px 14px; font-size: 13px; }

/* ---------- 5. Заглушка фото ---------- */
.ph {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 8px;
  padding: 12px; background: var(--bg-soft);
  color: var(--th-ink-300); font-size: 13px; line-height: 1.4; text-align: center;
}
.ph svg { width: 34px; height: 34px; stroke: currentColor; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 6. Хедер ---------- */
.header { position: sticky; top: 0; z-index: 30; background: var(--bg-page); border-bottom: 1px solid var(--border-default); }
.header_inner { height: 60px; display: flex; align-items: center; gap: 6px; }
.container.header_inner { padding-right: 8px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo:hover { color: var(--text-primary); }
.logo_mark { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; }
.logo_mark svg { width: 19px; height: 19px; fill: #fff; }
.logo_name { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.nav { display: none; }
.header_right { display: none; }
.header_phone-icon { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; color: var(--accent); }
.header_phone-icon svg { width: 22px; height: 22px; }
.burger { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; color: var(--text-primary); }
.burger svg { width: 24px; height: 24px; }

/* LangSwitch (UA / RU / EN) */
.lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); }
.lang_item { min-width: 34px; height: 28px; padding: 0 8px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.lang_item:hover { color: var(--text-primary); }
.lang_item.is-active { background: var(--text-primary); color: #fff; }
.lang--compact { padding: 0; border: 0; }
.lang--compact .lang_item { height: 32px; padding: 0 10px; border: 1px solid var(--border-default); color: var(--text-primary); }
.lang--compact .lang_item:not(.is-active) { display: none; }
.lang--compact .lang_item.is-active { background: transparent; color: var(--text-primary); }

/* позиція в шапці: на мобільному - праворуч від логотипа, перед іконкою телефону; на десктопі - після кнопки дзвінка */
.header .lang { margin-left: auto; }
.header .lang + .header_phone-icon { margin-left: 0; }
@media (min-width: 1024px) { .header .lang { margin-left: 0; } }

@media (min-width: 1024px) {
  .header_inner { height: 72px; gap: 32px; }
  .container.header_inner { padding-right: var(--gutter); }
  .logo_mark { width: 36px; height: 36px; border-radius: 10px; }
  .logo_mark svg { width: 22px; height: 22px; }
  .logo_name { font-size: 22px; }
  .nav { display: flex; gap: 22px; margin-left: 12px; font-size: 15px; font-weight: 500; white-space: nowrap; }
  .nav a.is-opt { color: var(--text-link); }
  .nav a.is-active { color: var(--accent); font-weight: 600; }
  .nav a:hover { color: var(--accent); }
  .header_phone-icon, .burger { display: none; }
  .header_right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
  .header_phone { display: none; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; white-space: nowrap; }
  .header_phone svg { width: 18px; height: 18px; stroke: var(--accent); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .header_inner { gap: 20px; }
  .nav { gap: 14px; font-size: 14px; margin-left: 0; }
  .header_right { gap: 12px; }
  .header_cta { padding: 0 14px; }
}
/* .header_phone на десктопі прихований: як у макеті, телефон - у hero, футері та мобільній іконці.
   Щоб повернути: .header_phone { display: flex; } - але тоді меню треба скоротити, у 1216px усе не влазить. */

/* Мобільне меню */
.menu { position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; overflow-y: auto; background: var(--bg-page); }
.menu.is-open { display: flex; }
.menu_head { height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-bottom: 1px solid var(--border-default); }
.menu_close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px; color: var(--text-primary); }
.menu_contact { display: flex; flex-direction: column; gap: 12px; padding: 20px 16px; border-bottom: 1px solid var(--border-default); }
.menu_phone { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.menu_nav { display: flex; flex-direction: column; padding: 8px 16px; font-size: 18px; font-weight: 600; }
.menu_nav a { padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.menu_nav a:last-child { border-bottom: 0; }
.menu_nav a.is-opt { color: var(--text-link); }

/* ---------- 7. Головна: hero ---------- */
.hero { padding: 24px 0 8px; }
.hero_inner { display: flex; flex-direction: column; gap: 16px; }
.hero_title { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; text-wrap: pretty; }
.hero_lead { font-size: 16px; line-height: 1.45; color: var(--text-lead); text-wrap: pretty; }
.hero_photo { position: relative; height: 220px; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border-default); }
.hero_usp { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.hero_usp li { display: flex; align-items: center; gap: 8px; }
.hero_usp svg { width: 18px; height: 18px; flex: none; stroke: var(--accent); }
.hero_actions { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.phone-big { display: flex; flex-direction: column; gap: 2px; }
.phone-big:hover { color: var(--text-primary); }
.phone-big_num { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.phone-big_note { font-size: 13px; line-height: 1.4; color: var(--text-muted); }

@media (min-width: 768px) {
  .hero { padding: 40px 0 24px; }
  .hero_title { font-size: 38px; }
  .hero_photo { height: 320px; }
  .hero_usp { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
  .hero_actions { flex-direction: row; align-items: center; gap: 24px; }
  .hero_actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero { padding: 48px 0 40px; }
  .hero_inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
  .hero_text { display: flex; flex-direction: column; gap: 22px; }
  .hero_title { font-size: 46px; line-height: 1.08; }
  .hero_lead { font-size: 18px; }
  .hero_photo { height: 400px; border-radius: var(--radius-3xl); }
  .hero_actions { margin-top: 6px; }
  .phone-big_num { font-size: 30px; }
}
@media (max-width: 1023px) {
  .hero_text { display: contents; }
  .hero_eyebrow { order: 1; } .hero_title { order: 2; } .hero_lead { order: 2; }
  .hero_photo { order: 3; } .hero_usp { order: 4; } .hero_actions { order: 5; }
}

/* ---------- 8. Головна: каталог (ProductCard) ---------- */
.catalog { padding: 28px 0 8px; }
.catalog_inner { display: flex; flex-direction: column; gap: 14px; }
.catalog_grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.cat-tile { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); transition: border-color var(--dur-fast); }
.cat-tile:hover { border-color: var(--accent); color: inherit; }
.cat-tile_photo { position: relative; height: 110px; background: var(--bg-soft); }
.cat-tile_body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.cat-tile_name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.cat-tile_price { font-size: 15px; font-weight: 700; color: var(--accent); }
.cat-tile_sub { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.cat-tile_sub--long { display: none; }
@media (min-width: 768px) { .cat-tile_photo { height: 150px; } }
@media (min-width: 1024px) {
  .catalog { padding: 8px 0 0; }
  .catalog_inner { gap: 20px; }
  .catalog_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-tile { border-radius: var(--radius-2xl); }
  .cat-tile_photo { height: 190px; }
  .cat-tile_body { gap: 6px; padding: 18px 20px 20px; }
  .cat-tile_name { font-size: 21px; }
  .cat-tile_price { font-size: 17px; }
  .cat-tile_sub { font-size: 14px; line-height: 1.45; }
  .cat-tile_sub--short { display: none; }
  .cat-tile_sub--long { display: block; }
}

/* ---------- 9. Головна: біла смуга-секція (Топ продажів, Ціни, Відгуки) ---------- */
.band, .top, .prices, .reviews { margin-top: var(--section-gap); padding: 24px 0; background: #fff; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
@media (min-width: 1024px) { .band, .top, .prices, .reviews { padding: 48px 0; } }

/* Топ продажів (новий блок, розмітка - у README до файлу) */
.top_inner { display: flex; flex-direction: column; gap: 14px; }
.top_head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.top_head .link-more { margin-left: auto; }
.top_title { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.top_grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.top-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); transition: border-color var(--dur); }
.top-card:hover { border-color: var(--accent); }
.top-card_photo { position: relative; display: block; height: 130px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-soft); }
.top-card_photo img { width: 100%; height: 100%; object-fit: cover; }
.top-card_badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.top-card_cat { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.top-card_title { font-size: 15px; font-weight: 700; line-height: 1.3; text-wrap: pretty; min-height: 2.6em; }
.top-card_prices { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.top-card_old { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.top-card_price { font-size: 18px; font-weight: 700; color: var(--accent); }
.top-card .btn { width: 100%; min-height: 44px; padding: 0 14px; font-size: 15px; border-radius: var(--radius-md); }
@media (min-width: 1024px) {
  .top_inner { gap: 22px; }
  .top_title { font-size: 30px; }
  .top_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .top-card { gap: 12px; padding: 16px; border-radius: var(--radius-2xl); }
  .top-card_photo { height: 220px; border-radius: var(--radius-lg); }
  .top-card_cat { font-size: 13px; }
  .top-card_title { font-size: 19px; }
  .top-card_old { font-size: 15px; }
  .top-card_price { font-size: 21px; }
}

/* Ціни сьогодні (поточний блок головної; у макеті його замінює «Топ продажів») */
.prices_inner { display: flex; flex-direction: column; gap: 14px; }
.prices_head { display: flex; flex-direction: column; gap: 8px; }
.prices_date { align-self: flex-start; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--bg-page); font-size: 12px; font-weight: 600; line-height: 1; color: var(--text-muted); }
.prices_head .link-more { display: none; }
.prices_more--mobile { display: inline; }
.prices_list { display: flex; flex-direction: column; }
.price-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-row); }
.price-card:hover { color: inherit; }
.price-card_main { display: flex; flex-direction: column; gap: 2px; }
.price-card_name { font-size: 16px; font-weight: 600; }
.price-card_unit { font-size: 13px; color: var(--text-muted); }
.price-card_ton { display: flex; align-items: baseline; gap: 4px; }
.price-card_from { display: none; }
.price-card_num { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.price-card_per { font-size: 13px; font-weight: 600; }
@media (min-width: 768px) {
  .prices_list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
  .price-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 22px 22px 20px; border: 1px solid var(--border-default); border-radius: var(--radius-2xl); background: #fff; transition: border-color var(--dur); }
  .price-card:hover { border-color: var(--accent); }
  .price-card_main { display: contents; }
  .price-card_name { order: 1; font-size: 15px; color: var(--text-muted); }
  .price-card_ton { order: 2; gap: 6px; }
  .price-card_unit { order: 3; padding-top: 10px; border-top: 1px solid var(--border-row); font-size: 14px; color: var(--text-primary); }
  .price-card_from { display: inline; font-size: 13px; color: var(--text-muted); }
  .price-card_num { font-size: 36px; }
  .price-card_per { font-size: 15px; }
}
@media (min-width: 1024px) {
  .prices_inner { gap: 22px; }
  .prices_head { flex-direction: row; align-items: center; gap: 16px; }
  .prices_head .section_title { font-size: 30px; }
  .prices_date { align-self: auto; }
  .prices_head .link-more { display: inline; margin-left: auto; }
  .prices_more--mobile { display: none; }
  .prices_list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- 10. Головна: Опт (OptCta без форми) ---------- */
.opt { margin-top: var(--section-gap); }
.opt_inner { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; background: var(--bg-dark); color: var(--text-on-dark); border-radius: var(--radius-3xl); }
.opt_text { display: flex; flex-direction: column; gap: 12px; }
.opt .eyebrow { color: var(--accent-eyebrow-on-dark); }
.opt_title { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.opt_lead { font-size: 15px; line-height: 1.5; color: var(--text-on-dark-muted); text-wrap: pretty; }
.opt_actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.opt_actions .btn { width: 100%; }
.opt_actions a:not(.btn):hover { color: var(--accent-eyebrow-on-dark); }
.opt_list { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.opt_list li { display: flex; align-items: baseline; gap: 10px; }
.opt_list li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-eyebrow-on-dark); transform: translateY(-2px); }
.opt_list-title { font-weight: 700; }
.opt_list-text { display: none; }
@media (min-width: 768px) {
  .opt_inner { padding: 36px 32px; border-radius: var(--radius-4xl); gap: 24px; }
  .opt_text { gap: 16px; }
  .opt_lead { font-size: 16px; }
  .opt_actions { flex-direction: row; gap: 20px; }
  .opt_actions .btn { width: auto; }
  .opt_list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .opt_list li { flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--border-on-dark); border-radius: var(--radius-xl); }
  .opt_list li::before { display: none; }
  .opt_list-title { font-size: 17px; }
  .opt_list-text { display: block; font-size: 14px; line-height: 1.45; color: var(--text-on-dark-muted); }
}
@media (min-width: 1024px) {
  .opt_inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 44px 48px; }
  .opt_title { font-size: 30px; }
  .opt_lead { max-width: 560px; }
}
@media (max-width: 1023px) { .opt_text { display: contents; } .opt_list { order: 3; } .opt_actions { order: 4; } }

/* ---------- 11. Головна: Довідник ---------- */
.guides { padding: 32px 0 0; }
.guides_inner { display: flex; flex-direction: column; gap: 14px; }
.guides_grid { display: flex; flex-direction: column; gap: var(--grid-gap); }
.guide-tile { display: flex; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); transition: border-color var(--dur-fast); }
.guide-tile:hover { border-color: var(--accent); color: inherit; }
.guide-tile_icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-soft); color: var(--accent); }
.guide-tile_icon svg { width: 22px; height: 22px; }
.guide-tile_body { display: flex; flex-direction: column; gap: 4px; }
.guide-tile_title { font-size: 16px; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.guide-tile_desc { display: none; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.guide-tile_meta { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text-link); }
.guides_more--mobile { display: block; }
.section_head .guides_more--desktop { display: none; }
@media (min-width: 768px) {
  .guides_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-tile { flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-2xl); }
  .guide-tile_body { flex: 1; gap: 12px; }
  .guide-tile_title { font-size: 19px; }
  .guide-tile_desc { display: block; }
  .guide-tile_meta { margin-top: auto; }
  .guides_more--mobile { display: none; }
  .section_head .guides_more--desktop { display: inline; }
}
@media (min-width: 1024px) { .guides { padding: 64px 0 0; } .guides_inner { gap: 20px; } }

/* ---------- 12. Головна: Чому Thermera (у макеті блоку немає - стилі на випадок, якщо його залишите) ---------- */
.why { padding: var(--section-gap) 0 0; }
.why_inner { display: flex; flex-direction: column; gap: 14px; }
.why_grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.why-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.why-card_title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.why-card_text { font-size: 13px; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }
@media (min-width: 768px) { .why-card { gap: 10px; padding: 22px; border-radius: var(--radius-2xl); } .why-card_title { font-size: 17px; } .why-card_text { font-size: 14px; } }
@media (min-width: 1024px) { .why_inner { gap: 20px; } .why_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 13. Головна: Відгуки ---------- */
.reviews_inner { display: flex; flex-direction: column; gap: 14px; }
.reviews_track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.reviews_track::-webkit-scrollbar { display: none; }
.review { flex: none; width: 290px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--bg-page); border-radius: var(--radius-xl); }
.review_text { font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.review_meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; }
.review_product { color: var(--text-muted); }
.reviews_dots { display: flex; justify-content: center; gap: 6px; }
.reviews_dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--th-sand-400); transition: width var(--dur), background var(--dur); }
.reviews_dots span.is-active { width: 18px; background: var(--accent); }
.reviews .section_head .link-more { display: none; }
@media (min-width: 768px) {
  .reviews_track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); overflow: visible; margin: 0; padding: 0; }
  .review { width: auto; gap: 14px; padding: 24px; border-radius: var(--radius-2xl); }
  .review_text { font-size: 16px; }
  .review_meta { font-size: 14px; }
  .reviews_dots { display: none; }
  .reviews .section_head .link-more { display: inline; }
}
@media (min-width: 1024px) { .reviews_inner { gap: 20px; } }
/* дві білі смуги поспіль не дублюють рамку */
.top + .reviews, .prices + .reviews { margin-top: 0; border-top: 0; }

/* ---------- 14. Головна: SEO-текст ---------- */
.seo { padding: 28px 0 32px; }
.seo_inner { display: flex; flex-direction: column; gap: 12px; max-width: 820px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.seo_title { font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--text-primary); }
.seo_body { display: flex; flex-direction: column; gap: 12px; }
.seo_body p + p { display: none; }
.seo_inner.is-expanded .seo_body p + p { display: block; }
.seo_more { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--text-link); }
.seo_inner.is-expanded .seo_more { display: none; }
@media (min-width: 768px) {
  .seo { padding: 56px 0 64px; }
  .seo_inner, .seo_body { gap: 14px; }
  .seo_title { font-size: 26px; }
  .seo_body p + p { display: block; }
  .seo_more { display: none; }
}

/* ---------- 15. Футер ---------- */
.footer { padding: 24px 0 20px; background: var(--bg-footer); border-top: 1px solid var(--border-default); font-size: 14px; line-height: 1.45; }
.footer_inner { display: flex; flex-direction: column; gap: 24px; }
.footer_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.footer_col { display: flex; flex-direction: column; gap: 8px; }
.footer_label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.footer_brand { display: none; }
.footer_col--contacts-d { display: none; }
.footer_phone { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.footer_note { color: var(--text-muted); }
.footer_bottom { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--th-sand-300); font-size: 12px; color: var(--text-muted); }
.footer_bottom a:hover { color: var(--accent); }
@media (min-width: 1024px) {
  .footer { padding: 40px 0 24px; font-size: 15px; line-height: 1.4; }
  .footer_inner { gap: 28px; }
  .footer_grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
  .footer_col { gap: 10px; }
  .footer_label { font-size: 13px; }
  .footer_brand { display: flex; flex-direction: column; gap: 14px; }
  .footer_brand p { max-width: 300px; color: var(--text-muted); }
  .footer_col--contacts-m { display: none; }
  .footer_col--contacts-d { display: flex; }
  .footer_phone { font-size: 20px; font-weight: 700; letter-spacing: 0; }
  .footer_bottom { gap: 24px; padding-top: 20px; font-size: 13px; }
}

/* ---------- 16. Модалки (Dialog) ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: none; overflow-y: auto; padding: 40px 12px; background: var(--overlay); }
.modal.is-open { display: block; }
.modal_box { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: 20px; background: var(--th-paper); color: var(--text-primary); border-radius: var(--radius-2xl); box-shadow: var(--shadow-dialog); }
.modal--wholesale .modal_box { max-width: 620px; }
.modal--order .modal_box { max-width: 560px; }
.modal_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.modal_title { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.modal_subtitle { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.modal_close { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: transparent; color: var(--text-primary); font-size: 18px; line-height: 1; transition: border-color var(--dur-fast); }
.modal_close:hover { border-color: var(--text-primary); }
@media (min-width: 768px) { .modal { padding: 60px 24px; } .modal_box { padding: 28px; } }

/* ---------- 17. Форми (Input / Select / textarea) ---------- */
.form, .form--opt-short, .form--callback, .form--order, .form--opt { display: flex; flex-direction: column; gap: 14px; }
.form-wrap { position: relative; }
.form_grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.form_field, .form_row { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text-muted); }
.form_row--inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.form_row--inline .form_label { width: 100%; }
.form_label { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text-muted); }
.form_field input, .form_field select, .form_field textarea, .form_input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: #fff; color: var(--text-primary);
  font: 400 16px/1.4 var(--font); outline: none;
  transition: border-color var(--dur-fast);
}
.form_field textarea, textarea.form_input { min-height: 96px; padding: 12px 14px; resize: vertical; }
.form_field select, select.form_input {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B625A' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.form_field input::placeholder, .form_field textarea::placeholder, .form_input::placeholder { color: var(--th-ink-400); }
.form_field input:focus, .form_field select:focus, .form_field textarea:focus, .form_input:focus { border-color: var(--text-primary); }
.form_input--qty { width: 110px; }
.form_unit { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.form_field.has-error input, .form_row.error .form_input, .form_input.error { border-color: var(--status-error); }
.form_error { display: none; font-size: 13px; font-weight: 500; color: var(--status-error); }
.form_field.has-error .form_error { display: block; }
.form_row .form_error:not(:empty) { display: block; }
.form_hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form_row--full, .form_field--full { grid-column: 1 / -1; }
.form_actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.form_actions .btn { width: 100%; }
.form_consent { font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--text-muted); }
.form_consent a { text-decoration: underline; }
.form_message { font-size: 14px; color: var(--text-lead); }
.form_message:empty { display: none; }
@media (min-width: 768px) {
  .form_grid { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .form_actions { flex-direction: row; align-items: center; gap: 18px; }
  .form_actions .btn { width: auto; }
  .form_actions .form_consent { flex: 1; }
}

/* Успіх */
.form_success { display: none; flex-direction: column; gap: 14px; padding: 12px 0 4px; }
.form_success-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; }
.form_success-icon svg { width: 24px; height: 24px; stroke: #fff; }
.form_success-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.form_success-text { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.form-success_title { font-weight: 700; }
.form-success { display: none; padding: 14px 16px; border-radius: var(--radius-md); background: #EAF5EE; color: #1F5F3A; font-weight: 600; }
.form-wrap.is-success .form { display: none; }
.form-wrap.is-success .form_success { display: flex; }
.form-wrap.is-success .form-success { display: block; }

/* ==========================================================================
   ВНУТРІШНІ СТОРІНКИ (раніше чанк styles.inner)
   ========================================================================== */

/* ---------- 18. Каркас ---------- */
/* лише вертикальні відступи: горизонтальні дає .container (у шаблонах main.main.container) */
.main { padding-top: 16px; padding-bottom: 40px; }
.main > * + * { margin-top: 28px; }
@media (min-width: 768px)  { .main { padding-top: 24px; padding-bottom: 56px; } .main > * + * { margin-top: 40px; } }
@media (min-width: 1024px) { .main { padding-top: 28px; padding-bottom: 72px; } .main > * + * { margin-top: 56px; } }

/* Хлібні крихти */
.breadcrumbs { font-size: 13px; color: var(--text-muted); }
.main > .breadcrumbs + * { margin-top: 12px; }
.breadcrumbs_list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumbs_item { display: flex; align-items: center; }
.breadcrumbs_item + .breadcrumbs_item::before { content: '/'; margin: 0 8px; color: var(--th-sand-300); }
.breadcrumbs_link:hover { color: var(--accent); }
.breadcrumbs_item--current { color: var(--text-lead); }
@media (min-width: 768px) { .breadcrumbs { font-size: 14px; } .main > .breadcrumbs + * { margin-top: 16px; } }

/* Заголовок сторінки */
.page-head { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.page-head_title, .product_title, .article_title { font-size: 27px; font-weight: 800; line-height: 1.12; letter-spacing: -.03em; text-wrap: pretty; }
.page-head_lead { font-size: 17px; line-height: 1.45; color: var(--text-lead); text-wrap: pretty; }
.page-head_price { font-size: 16px; color: var(--text-lead); }
.page-head_price strong { font-size: 20px; font-weight: 800; color: var(--accent); }
.page-head_price a { color: var(--text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.page-head_actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
@media (min-width: 768px) {
  .page-head { gap: 14px; }
  .page-head_title, .product_title, .article_title { font-size: 34px; }
  .page-head_lead { font-size: 18px; }
  .page-head_actions { flex-direction: row; align-items: center; gap: 16px; }
}
@media (min-width: 1024px) { .page-head_title, .product_title, .article_title { font-size: 40px; line-height: 1.1; } }

/* Заголовки секцій внутрішніх сторінок */
.subcats_title, .bridge_title, .catalog_title, .price-table_title, .faq_title, .guides_title,
.specs_title, .other-packs_title, .next-guide_title, .hub-stage_title, .converter_title, .calc_title {
  font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
}
@media (min-width: 1024px) {
  .subcats_title, .bridge_title, .catalog_title, .price-table_title, .faq_title, .guides_title,
  .specs_title, .other-packs_title, .next-guide_title, .hub-stage_title, .converter_title, .calc_title { font-size: 26px; }
}

/* ---------- 19. Текст (intro / content) ---------- */
.intro, .content { max-width: 820px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.intro > * + *, .content > * + * { margin-top: 14px; }
.intro p, .content p { text-wrap: pretty; }
.intro strong, .content strong { color: var(--text-primary); font-weight: 700; }
.intro a, .content a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.intro a:hover, .content a:hover { color: var(--accent); }
.content h2 { margin-top: 32px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--text-primary); }
.content h3 { margin-top: 24px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.content h2:first-child, .content h3:first-child { margin-top: 0; }
.content ul, .content ol { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.content li::marker { color: var(--accent); }
.content blockquote { padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--bg-accent-soft); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; color: var(--text-primary); }
.content img { border-radius: var(--radius-lg); }
.content figure { display: flex; flex-direction: column; gap: 8px; }
.content figcaption { font-size: 13px; color: var(--text-muted); }
.content hr { margin: 24px 0; border: 0; border-top: 1px solid var(--border-default); }
@media (min-width: 768px) {
  .intro > * + *, .content > * + * { margin-top: 16px; }
  .content h2 { margin-top: 40px; font-size: 26px; }
  .content h3 { margin-top: 28px; }
}

/* ---------- 20. Таблиці (PriceTable) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.table, .content table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  font-size: 14px; line-height: 1.4;
}
.table caption { caption-side: top; padding: 0 2px 10px; text-align: left; font-size: 12px; color: var(--text-muted); }
.table th, .table td, .content th, .content td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-row); }
.table thead th, .content thead th { font-size: 12px; font-weight: 600; color: var(--text-muted); background: #fff; border-bottom-color: var(--border-default); white-space: nowrap; }
.table tbody th, .content tbody th { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.table tbody tr:last-child th, .table tbody tr:last-child td, .content tbody tr:last-child th, .content tbody tr:last-child td { border-bottom: 0; }
.table td { font-weight: 600; color: var(--text-primary); }
.table td:nth-child(3), .table td:nth-child(4) { white-space: nowrap; }
/* ціни - праворуч, як у макеті */
.price-table .table thead th:not(:first-child), .price-table .table td { text-align: right; }
.table--specs th { width: 42%; font-weight: 500; color: var(--text-muted); white-space: normal; }
.table--specs td { font-weight: 600; color: var(--text-primary); }
.table--converter td { white-space: nowrap; }
.table--converter tbody th { font-weight: 500; color: var(--text-body); }
/* мобільний: перша колонка залипає при горизонтальній прокрутці */
@media (max-width: 767px) { .table-wrap .table th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; } }
@media (min-width: 768px) {
  .table-wrap { margin: 0; padding: 0; }
  .table, .content table { font-size: 15px; border-radius: var(--radius-2xl); }
  .table caption { font-size: 13px; }
  .table th, .table td, .content th, .content td { padding: 14px 20px; }
  .table thead th, .content thead th { font-size: 13px; }
}

/* ---------- 21. Плитки підкатегорій (category.tile) ---------- */
.subcats, .bridge, .hub-catalog, .supply { display: flex; flex-direction: column; gap: 14px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.tile { overflow: hidden; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); transition: border-color var(--dur-fast); }
.tile:hover { border-color: var(--accent); }
.tile_link { display: flex; flex-direction: column; height: 100%; }
.tile_link:hover { color: inherit; }
.tile_img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg-soft); }
.tile_title { padding: 12px 14px 4px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.tile_price { margin-top: auto; padding: 0 14px 14px; font-size: 14px; font-weight: 700; color: var(--accent); }
.tile_link > .tile_title:last-child { padding-bottom: 14px; }
.subcats--intents .tile_title { font-size: 15px; }
@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile_title { padding: 16px 18px 6px; font-size: 18px; }
  .tile_price { padding: 0 18px 18px; font-size: 15px; }
}
@media (min-width: 1024px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile { border-radius: var(--radius-2xl); }
  .tile_title { font-size: 21px; }
  .tile_price { font-size: 17px; }
  .tiles--subcats { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.bridge_note { max-width: 720px; font-size: 14px; color: var(--text-muted); }
.bridge_note a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 22. Список товарів (ProductRow) ---------- */
.main .catalog { display: flex; flex-direction: column; gap: 20px; padding: 0; }
.catalog_group { display: flex; flex-direction: column; gap: 10px; }
.catalog_group-title { font-size: 19px; font-weight: 700; line-height: 1.3; }
.product-list { display: flex; flex-direction: column; gap: 10px; }
.product-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px;
  padding: 12px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  transition: border-color var(--dur-fast);
}
.product-row:hover { border-color: var(--accent); }
.product-row.is-out { opacity: .6; }
.product-row_img-link { display: block; position: relative; height: 84px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-soft); }
.product-row_img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-row_img--empty {
  background: var(--bg-soft) center / 34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9AE9E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='16' cy='9' r='1.5'/%3E%3C/svg%3E");
}
.product-row_body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.product-row_title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.product-row_attrs { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.product-row_stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--status-instock); }
.product-row_stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.product-row.is-preorder .product-row_stock { color: var(--status-preorder); }
.product-row.is-out .product-row_stock { color: var(--status-out); }
.product-row_buy {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding-top: 10px; border-top: 1px solid var(--border-row);
}
.product-row_price { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.product-row_price strong { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.product-row_old { margin-right: 6px; font-size: 15px; font-weight: 400; color: var(--text-disabled); }
.product-row_per-ton { order: 3; width: 100%; font-size: 13px; color: var(--text-muted); }
.product-row_price--ask { font-size: 17px; font-weight: 700; color: var(--text-link); }
.product-row_buy .btn { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-md); }
.product-row.is-out .product-row_buy .btn { background: var(--text-muted); }
@media (min-width: 768px) {
  .product-row { grid-template-columns: 132px 1fr 260px; align-items: center; gap: 24px; padding: 16px 20px 16px 16px; border-radius: var(--radius-2xl); }
  .product-row_img-link { height: 100px; }
  .product-row_title { font-size: 17px; }
  .product-row_attrs { gap: 4px 14px; font-size: 13px; }
  .product-row_stock { font-size: 13px; }
  .product-row_stock::before { width: 8px; height: 8px; }
  .product-row_buy { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding-top: 0; border-top: 0; text-align: right; }
  .product-row_price strong { font-size: 24px; }
  .product-row_old { font-size: 18px; }
  .product-row_per-ton { order: 0; width: auto; }
  .product-row_buy .btn { margin-top: 4px; }
}

/* ---------- 23. Таблиця цін категорії ---------- */
.price-table { display: flex; flex-direction: column; gap: 14px; }
.price-table_note { max-width: 720px; font-size: 14px; color: var(--text-muted); }

/* ---------- 24. FAQ (Accordion) ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.faq_title { margin-bottom: 4px; }
.faq_item { padding: 0 20px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.faq_question {
  position: relative; list-style: none; cursor: pointer;
  min-height: 56px; display: flex; align-items: center; padding: 14px 36px 14px 0;
  font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text-primary);
}
.faq_question::-webkit-details-marker { display: none; }
.faq_question::after {
  content: '+'; position: absolute; right: 0; top: 50%;
  font-size: 22px; font-weight: 400; line-height: 1; color: var(--accent);
  transform: translateY(-50%); transition: transform var(--dur);
}
.faq_item[open] .faq_question::after { transform: translateY(-50%) rotate(45deg); }
.faq_answer { max-width: 760px; padding: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--text-lead); }
.faq_answer > * + * { margin-top: 10px; }
.faq_answer a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 25. Гайди (guide.tile на внутрішніх) ---------- */
.main .guides { display: flex; flex-direction: column; gap: 14px; padding: 0; }
.guide-tiles { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.guide-tiles .guide-tile { display: block; padding: 0; overflow: hidden; }
.guide-tile_link { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px; }
.guide-tile_link:hover { color: inherit; }
.guide-tile_img { width: calc(100% + 36px); max-width: none; margin: -18px -18px 8px; aspect-ratio: 5 / 3; object-fit: cover; background: var(--bg-soft); }
.guide-tile_link .guide-tile_title { font-size: 17px; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.guide-tile_lead { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.guide-tile_link .guide-tile_meta { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--text-link); }
.guides_all { font-size: 15px; font-weight: 600; }
.guides_all a { color: var(--text-link); }
.guides_all a:hover { color: var(--accent); }
@media (min-width: 768px) {
  .guide-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-tile_link { gap: 12px; padding: 24px; }
  .guide-tile_img { width: calc(100% + 48px); margin: -24px -24px 8px; }
  .guide-tile_link .guide-tile_title { font-size: 19px; }
}
.guides--product .guide-tiles, .next-guide .guide-tiles { grid-template-columns: 1fr; max-width: 520px; }

/* ---------- 26. CTA опт з формою (OptCta withForm) ---------- */
.cta-opt { display: flex; flex-direction: column; gap: 20px; padding: 24px 20px; background: var(--bg-dark); color: var(--text-on-dark); border-radius: var(--radius-3xl); }
.cta-opt_text { display: flex; flex-direction: column; gap: 12px; }
.cta-opt .eyebrow { color: var(--accent-eyebrow-on-dark); }
.cta-opt_title { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.cta-opt_lead { font-size: 15px; line-height: 1.5; color: var(--text-on-dark-muted); text-wrap: pretty; }
.cta-opt_links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.cta-opt_links .btn--outline { color: var(--text-on-dark); border-color: rgba(255,255,255,.4); }
.cta-opt_links .btn--outline:hover { background: transparent; border-color: #fff; color: #fff; }
.cta-opt_links .link { color: var(--text-on-dark); }
.cta-opt_links .link:hover { color: var(--accent-eyebrow-on-dark); }
.cta-opt_form { padding: 0; }
.cta-opt .form_label, .cta-opt .form_field { color: var(--text-on-dark-muted); }
.cta-opt .form_input { border-color: rgba(255,255,255,.18); }
.cta-opt .form_error { color: var(--th-red-300); }
.cta-opt .form_consent { color: var(--th-cocoa-400); }
.cta-opt .form_message { color: var(--text-on-dark-muted); }
.cta-opt .form_success-text { color: var(--text-on-dark-muted); }
@media (min-width: 768px) {
  .cta-opt { padding: 36px 32px; border-radius: var(--radius-4xl); }
  .cta-opt_text { gap: 16px; }
  .cta-opt_title { font-size: 26px; }
  .cta-opt_lead { font-size: 16px; }
  .cta-opt_form { padding: 22px; background: rgba(255,255,255,.06); border: 1px solid var(--border-on-dark); border-radius: var(--radius-3xl); }
}
@media (min-width: 1024px) {
  .cta-opt { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center; padding: 44px 48px; }
  .cta-opt_title { font-size: 30px; }
}

/* ---------- 27. Картка товару (макет «Thermera Product», v4) ---------- */
/* Каркас: заголовок → [галерея | buy-box + калькулятор] → [характеристики | про товар] → FAQ → схожі → гайд → опт */
.product { display: flex; flex-direction: column; gap: 32px; }
.product > * { min-width: 0; }

/* Заголовок */
.product_head { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
.product_title { font-size: 26px; }
.product_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.product_meta .badge { padding: 6px 11px; }
.product_meta-text span + span::before { content: ' · '; }
.product_meta-text span:first-child::first-letter { text-transform: uppercase; }

/* Галерея + права колонка */
.product_layout { display: flex; flex-direction: column; gap: 20px; }
.product_side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gallery_main {
  position: relative; display: block; height: 260px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border-default); border-radius: var(--radius-3xl);
}
.gallery_main img { width: 100%; height: 100%; object-fit: cover; }
.gallery_main .ph { gap: 10px; }
.gallery_main .ph svg { width: 44px; height: 44px; opacity: .8; }
.gallery_thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gallery_thumb {
  display: block; width: 100%; height: 64px; padding: 0; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast);
}
.gallery_thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery_thumb:hover { border-color: var(--accent); }
.gallery_thumb.is-active { border: 2px solid var(--accent); }

/* Buy-box */
.buy { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-3xl); }
.buy_top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.buy_price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.buy_old { font-size: 18px; font-weight: 500; color: var(--text-disabled); }
.buy_value { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.buy_unit { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.buy_price--ask { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--text-link); }
.buy_date { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.buy_per-ton { font-size: 15px; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }
.buy_per-ton strong { font-weight: 700; color: var(--text-primary); }
.buy_per-ton a { color: var(--text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.buy_min { font-size: 14px; color: var(--text-muted); }
.buy_qty { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.buy_qty-note { font-size: 14px; color: var(--text-muted); }
.buy_actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.buy_actions .btn { width: 100%; padding: 0 16px; }
.buy_benefits { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-row); font-size: 14px; line-height: 1.45; color: var(--text-primary); }
.buy_benefits li { display: flex; align-items: flex-start; gap: 10px; }
.buy_check { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.buy_benefits a { color: var(--text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.buy_benefits a:hover { color: var(--accent); }

/* Stepper, розмір lg */
.stepper { background: #fff; }
.stepper--lg .stepper_btn { width: 48px; height: 50px; font-size: 22px; }
.stepper--lg .stepper_value { width: 56px; font-size: 18px; -moz-appearance: textfield; }
.stepper_value::-webkit-outer-spin-button, .stepper_value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Калькулятор сезону на картці товару */
.pcalc { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--bg-accent-soft); border: 1px solid var(--border-accent-soft); border-radius: var(--radius-3xl); }
.pcalc_head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pcalc_title { font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.pcalc_tag { font-size: 12px; font-weight: 600; color: var(--text-link); }
.pcalc_field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pcalc_label { display: flex; justify-content: space-between; gap: 12px; padding: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pcalc_out { color: var(--accent); }
.pcalc_range {
  --fill: 22%;
  width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; accent-color: var(--accent);
}
.pcalc_range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--fill), var(--th-sand-400) var(--fill)); }
.pcalc_range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pcalc_range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--th-sand-400); }
.pcalc_range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.pcalc_range::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* Segmented control (радіокнопки) */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seg_item { position: relative; display: block; }
.seg_item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg_item span {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 6px;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--text-primary); cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.seg_item:hover span { border-color: var(--accent); }
.seg_item input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.seg_item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.pcalc_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.pcalc_stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; background: #fff; border: 1px solid var(--border-accent-soft); border-radius: var(--radius-lg); }
.pcalc_stat-label { font-size: 12px; line-height: 1.3; color: var(--text-muted); }
.pcalc_stat-value { font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); }
.pcalc_foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--border-accent-soft); }
.pcalc_total { display: flex; flex-direction: column; }
.pcalc_total-label { font-size: 13px; color: var(--text-muted); }
.pcalc_total-value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.pcalc_total-value--ask { font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--text-link); }
.pcalc_foot .btn { background: #fff; }
.pcalc_foot .btn:hover { background: var(--text-primary); }
.pcalc_note { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.pcalc_note a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* Характеристики | Про товар */
.product_info { display: flex; flex-direction: column; gap: 32px; }
.specs { display: flex; flex-direction: column; gap: 14px; max-width: none; min-width: 0; }
.specs .table--specs { border-radius: var(--radius-2xl); overflow: hidden; }
.specs .table--specs th { width: 45%; font-weight: 400; }
.specs_usage { padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--text-body); background: var(--bg-accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.product_about { max-width: none; }
.product_about h2 { font-size: 22px; }
.other-packs { display: flex; flex-direction: column; gap: 14px; }

/* Схожі товари */
.similar { display: flex; flex-direction: column; gap: 16px; }
.similar_title { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }

@media (min-width: 768px) {
  .product { gap: 40px; }
  .product_title { font-size: 32px; }
  .product_meta { font-size: 15px; }
  .gallery_main { height: 420px; }
  .gallery_thumb { height: 88px; }
  .buy, .pcalc { padding: 24px; }
  .buy_value { font-size: 40px; }
  .buy_unit { font-size: 18px; }
  .buy_actions { grid-template-columns: 1.2fr 1fr; }
  .pcalc_title { font-size: 20px; }
  .pcalc_stat { padding: 12px 14px; }
  .pcalc_stat-value { font-size: 22px; }
  .similar { gap: 20px; }
  .similar_title, .product_about h2 { font-size: 26px; }
}
@media (min-width: 1024px) {
  .product { gap: 56px; }
  .product > .product_head { margin-bottom: -32px; }
  .product_title { font-size: 36px; line-height: 1.1; }
  .product_layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .gallery_main { height: 460px; }
  .gallery_thumb { height: 96px; }
  .product_side { gap: 18px; }
  .product_info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .product_info--single { grid-template-columns: minmax(0, 820px); }
  .similar_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  /* FAQ: заголовок ліворуч, акордеон праворуч - як на категорії */
  .page--product .faq { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 48px; row-gap: 0; max-width: none; align-items: start; }
  .page--product .faq_title { grid-column: 1; grid-row: 1 / span 40; margin: 0; }
  .page--product .faq_item { grid-column: 2; }
  .page--product .faq_item + .faq_item { margin-top: 10px; }
}
@media (min-width: 1200px) {
  .product_layout { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 56px; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .page--product .faq { grid-template-columns: 260px minmax(0, 1fr); column-gap: 32px; } }

/* ---------- 28. Стаття, зміст, хаб ---------- */
.article { display: flex; flex-direction: column; gap: 28px; max-width: 820px; }
.article_head { display: flex; flex-direction: column; gap: 12px; }
.article_meta { font-size: 13px; color: var(--text-muted); }
.article_updated, .article_reading { white-space: nowrap; }
.article_author { font-weight: 600; color: var(--text-lead); }
.article_lead { font-size: 17px; line-height: 1.45; color: var(--text-lead); text-wrap: pretty; }
.article_body.content { max-width: none; }
.article_back { font-size: 15px; font-weight: 600; }
.article_back a { color: var(--text-link); }
.article .bridge { padding-top: 28px; border-top: 1px solid var(--border-default); }
.next-guide { display: flex; flex-direction: column; gap: 14px; }
.toc, .hub-nav { max-width: 820px; padding: 18px 20px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-2xl); }
.toc_title { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.toc_list, .hub-nav_list { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; list-style: decimal; font-size: 15px; font-weight: 500; }
.toc_list li::marker, .hub-nav_list li::marker { color: var(--accent); font-weight: 700; }
.toc_list a:hover, .hub-nav_list a:hover { color: var(--accent); }
.toc_item--sub { margin-left: 12px; list-style: none; font-weight: 400; color: var(--text-lead); }
.hub-stage { display: flex; flex-direction: column; gap: 14px; }
.hub-stage_title { padding-top: 24px; border-top: 1px solid var(--border-default); }
@media (min-width: 768px) {
  .article { gap: 36px; }
  .article_meta { font-size: 14px; }
  .article_lead { font-size: 18px; }
  .toc, .hub-nav { padding: 22px 26px; }
  .hub-nav_list { gap: 8px; font-size: 16px; }
}
@media (min-width: 1024px) { .article .tiles--bridge { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 29. Статичні сторінки, контакти ---------- */
.static { display: flex; flex-direction: column; gap: 28px; }
.contacts { display: flex; flex-direction: column; gap: 18px; }
.contacts_grid { display: flex; flex-direction: column; gap: 20px; }
.contacts_list { display: flex; flex-direction: column; gap: 12px; }
.contacts_list > div { display: flex; flex-direction: column; gap: 2px; }
.contacts_list dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.contacts_list dd { margin: 0; font-size: 17px; font-weight: 600; }
.contacts_list a:hover { color: var(--accent); }
.contacts_map { min-height: 260px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); }
.contacts_map iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }
.contacts_requisites { font-size: 14px; color: var(--text-muted); }
.callback-block { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
@media (min-width: 768px) {
  .contacts_grid { display: grid; grid-template-columns: minmax(260px, 1fr) 1.4fr; gap: 32px; }
  .contacts_map, .contacts_map iframe { min-height: 340px; }
}

/* ---------- 30. Лендинг B2B ---------- */
.segments, .terms, .opt-form, .cases { display: flex; flex-direction: column; gap: 16px; }
.segments_list, .cases_list { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.segment, .case { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-2xl); }
.segment_icon { width: 44px; height: 44px; padding: 10px; border-radius: var(--radius-md); background: var(--bg-soft); color: var(--accent); }
.segment_title { font-size: 19px; font-weight: 700; line-height: 1.3; }
.segment_text, .case_text { font-size: 15px; line-height: 1.5; color: var(--text-body); }
.terms_list { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.terms_item { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.terms_title { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.terms_value { margin: 0; font-size: 19px; font-weight: 700; }
.opt-form { max-width: 860px; padding: 24px 20px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-3xl); }
.opt-form_lead { max-width: 640px; font-size: 15px; color: var(--text-lead); }
.case_title { font-size: 17px; font-weight: 700; }
.case_volume { font-size: 14px; font-weight: 600; color: var(--accent); }
@media (min-width: 768px) {
  .segments_list, .cases_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .terms_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-form { padding: 32px; }
}
@media (min-width: 1024px) { .terms_list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   БЛОКИ ЕТАПІВ 2-3 (раніше чанк styles.usp)
   ========================================================================== */

/* ---------- 31. УТП: 5 обіцянок ---------- */
.usp { padding: 0; }
.usp_list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.usp_item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.usp_title { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.usp_title::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4501B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.usp_title a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.usp_title a:hover { color: var(--accent); }
.usp_text { padding-left: 26px; font-size: 13px; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }
.product .usp { margin-top: 0; }
@media (min-width: 600px) { .usp_list { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (min-width: 1024px) {
  .usp_list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .usp_item { gap: 8px; padding: 18px 18px 20px; border-radius: var(--radius-2xl); }
  .usp_title { font-size: 16px; }
  .usp_text { padding-left: 0; font-size: 14px; }
}

/* ---------- 32. Конвертер «мішок → тонна» і калькулятор сезону ---------- */
.converter, .calc { display: flex; flex-direction: column; gap: 18px; }
.converter_head, .calc_head { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.converter_lead, .calc_lead { font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.converter_grid { display: flex; flex-direction: column; gap: 16px; }
.converter_form, .calc_form {
  display: grid; grid-template-columns: 1fr; gap: 12px; padding: 18px;
  background: var(--bg-accent-soft); border: 1px solid var(--border-accent-soft); border-radius: var(--radius-2xl);
}
.converter_field, .calc_field { display: flex; flex-direction: column; gap: 6px; }
.converter_label, .calc_label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.converter_input, .calc_input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: #fff; color: var(--text-primary);
  font: 600 17px/1.4 var(--font); outline: none; -moz-appearance: textfield;
  transition: border-color var(--dur-fast);
}
select.calc_input {
  appearance: none; -webkit-appearance: none; padding-right: 36px; font-size: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B625A' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.converter_input::-webkit-outer-spin-button, .converter_input::-webkit-inner-spin-button,
.calc_input::-webkit-outer-spin-button, .calc_input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.converter_input:focus, .calc_input:focus { border-color: var(--text-primary); }
.converter_result, .calc_result { padding: 14px 16px; font-size: 16px; line-height: 1.5; color: var(--text-body); background: #fff; border: 1px solid var(--border-accent-soft); border-radius: var(--radius-lg); }
.converter_result strong, .calc_result strong { color: var(--text-primary); }
.calc_result:empty { display: none; }
.calc_row + .calc_row { margin-top: 6px; }
.calc_row--main { font-size: 18px; }
.calc_row--main strong { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); }
.calc_row--muted { font-size: 14px; color: var(--text-muted); }
.converter_formula, .calc_note { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.calc_note a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .converter_form { grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; padding: 22px; }
  .converter_result, .converter_formula { grid-column: 1 / -1; }
  .calc_form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 22px; }
  .calc_result, .calc_note { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .converter_lead, .calc_lead { font-size: 16px; }
  .converter_grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
  .calc_form { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- 33. Stepper (кількість) і обрана фасовка ---------- */
.stepper { display: inline-flex; align-items: center; overflow: hidden; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); }
.stepper_btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text-primary); font-size: 20px; }
.stepper_btn:hover { color: var(--accent); }
.stepper_value { min-width: 40px; text-align: center; font-size: 17px; font-weight: 700; border: 0; background: transparent; outline: none; }
.is-selected-pack, .pack.is-selected { background: var(--bg-accent-tint); border: 2px solid var(--accent); }

/* ==========================================================================
   КАТЕГОРІЯ (макет «Thermera Category», v3)
   Шаблон category + чанк product.card. Класи: cat-hero, price-today, chips-row, shop, filters, check, product-card.
   ========================================================================== */

/* ---------- 34. Hero категорії: H1 + лід + картка «Ціна» ---------- */
.cat-hero { display: flex; flex-direction: column; gap: 16px; }
.cat-hero_text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cat-hero_lead { max-width: 760px; font-size: 16px; line-height: 1.5; color: var(--text-lead); text-wrap: pretty; }

.price-today {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px 18px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl);
}
.price-today_label { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text-muted); }
.price-today_value { display: flex; align-items: baseline; gap: 6px; color: var(--text-primary); }
.price-today_value small { font-size: 14px; color: var(--text-muted); }
.price-today_value b { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.price-today_value span { font-size: 16px; font-weight: 600; }
.price-today_value--ask { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text-link); }
.price-today_note { font-size: 14px; line-height: 1.45; color: var(--text-body); }
.price-today_note b { font-weight: 800; color: var(--text-primary); }
.price-today_note .link { font-size: inherit; text-underline-offset: 3px; }
.price-today_btn { margin-top: 4px; }

@media (min-width: 768px) {
  .cat-hero_lead { font-size: 18px; }
  .price-today { max-width: 420px; padding: 20px 22px; border-radius: var(--radius-2xl); gap: 10px; }
  .price-today_value b { font-size: 34px; }
}
@media (min-width: 1024px) {
  .cat-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
  .cat-hero_text { gap: 14px; }
  .price-today { max-width: none; }
}

/* ---------- 35. Чипи видів (посилання на підкатегорії) ---------- */
.main > .chips-row { margin-top: 20px; }
.chips-row {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px;
}
.chips-row::-webkit-scrollbar { display: none; }
.chips-row .chip { flex: none; }
.chips-row .chip--intent { border-style: dashed; }
.chips-row .chip--intent.is-active { border-style: solid; }
@media (min-width: 768px) {
  .main > .chips-row { margin-top: 28px; }
  .chips-row { flex-wrap: wrap; gap: 10px; overflow: visible; margin: 0; padding: 0; }
}

/* ---------- 36. Каталог: фільтри + сітка ---------- */
.main > .chips-row + .shop, .main > .cat-hero + .shop { margin-top: 24px; }
.shop { display: flex; flex-direction: column; gap: 16px; }
.shop_main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.shop_bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.shop_found { font-size: 15px; color: var(--text-muted); }
.shop_found b { color: var(--text-primary); }
.shop_sort { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.shop_sort::-webkit-scrollbar { display: none; }
.shop_sort .chip { flex: none; }
.shop_sort-label { display: none; font-size: 15px; color: var(--text-muted); }
.shop_grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.shop_grid[hidden], .product-card[hidden] { display: none; }
.shop_empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 20px; text-align: center; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-2xl);
  font-size: 14px; color: var(--text-muted);
}
.shop_empty[hidden] { display: none; }
.shop_empty-title { font-size: 19px; font-weight: 700; color: var(--text-primary); }

@media (min-width: 560px) { .shop_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .main > .chips-row + .shop, .main > .cat-hero + .shop { margin-top: 32px; }
  .shop_main { gap: 20px; }
  .shop_grid { gap: 16px; }
  .shop_sort { margin-left: auto; overflow: visible; }
  .shop_sort-label { display: inline; margin-right: 2px; }
}
@media (min-width: 1024px) {
  .shop { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
  .shop--nofilters { grid-template-columns: minmax(0, 1fr); }
  .shop_grid { gap: 20px; }
}
@media (min-width: 1200px) {
  .shop { grid-template-columns: 264px minmax(0, 1fr); gap: 32px; }
  .shop_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Панель фільтрів: на мобільному - згорнутий <details>, з 1024px - завжди відкрита картка ліворуч */
.filters { position: relative; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.filters[hidden] { display: none; }
.filters_head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 18px;
}
.filters_head::-webkit-details-marker { display: none; }
.filters_head::after {
  content: ''; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--text-primary); border-bottom: 2px solid var(--text-primary);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--dur);
}
.filters[open] .filters_head::after { transform: translateY(2px) rotate(-135deg); }
.filters_title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.filters_badge {
  min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
}
.filters_badge[hidden] { display: none; }
.filters_body { display: flex; flex-direction: column; padding: 0 18px 18px; }
.filters_reset {
  display: block; margin: 0 18px 18px; padding: 0; border: 0; background: none;
  font-size: 15px; font-weight: 600; color: var(--text-link);
}
.filters_reset:hover { color: var(--accent); }
.filters_group { margin: 0; padding: 16px 0 0; min-width: 0; border: 0; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 12px; }
.filters_group + .filters_group { margin-top: 16px; }
.filters_group-title { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.filters_group-title + * { clear: both; }

@media (min-width: 1024px) {
  .filters { padding: 22px 22px 24px; border-radius: var(--radius-2xl); }
  .filters_head { cursor: default; min-height: 0; padding: 0 90px 18px 0; }
  .filters_head::after { display: none; }
  .filters_title { font-size: 20px; }
  .filters_body { padding: 0; }
  .filters_reset { position: absolute; top: 24px; right: 22px; margin: 0; }
}

/* Checkbox з лічильником */
.check { position: relative; display: flex; align-items: center; gap: 10px; min-height: 24px; cursor: pointer; font-size: 15px; line-height: 1.3; color: var(--text-primary); }
.check_input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.check_box {
  flex: none; width: 20px; height: 20px; border: 1.5px solid var(--th-sand-300); border-radius: var(--radius-xs); background: #fff;
  display: grid; place-items: center; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.check_box::after {
  content: ''; width: 10px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); opacity: 0;
}
.check:hover .check_box { border-color: var(--accent); }
.check_input:checked + .check_box { background: var(--text-primary); border-color: var(--text-primary); }
.check_input:checked + .check_box::after { opacity: 1; }
.check_input:focus-visible + .check_box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check_label { flex: 1; min-width: 0; }
.check_count { font-size: 13px; color: var(--text-muted); }

/* ---------- 37. Картка товару в сітці (product.card) ---------- */
.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  transition: border-color var(--dur);
}
.product-card:hover { border-color: var(--accent); }
.product-card.is-out { opacity: .6; }
.product-card_photo { position: relative; display: block; height: 180px; background: var(--bg-soft); }
.product-card_photo .ph { padding: 0 24px; }
.product-card_img { width: 100%; height: 100%; object-fit: cover; }
.product-card_badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  display: inline-block; max-width: calc(100% - 24px); padding: 5px 10px; overflow: hidden; text-overflow: ellipsis;
  border-radius: var(--radius-pill); background: var(--text-primary); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.product-card_badge::first-letter { text-transform: uppercase; }
.product-card.is-out .product-card_badge { background: var(--text-muted); }
.product-card_body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 14px; }
.product-card_title { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.product-card_title a:hover { color: var(--accent); }
.product-card_desc { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.product-card_desc::first-letter { text-transform: uppercase; }
.product-card_desc span + span::before { content: ' · '; }
.product-card_price { margin-top: auto; padding-top: 12px; min-height: 34px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
.product-card_value { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text-primary); }
.product-card_value small { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.product-card_value s { margin-right: 4px; font-size: 16px; font-weight: 500; color: var(--text-disabled); }
.product-card_per-ton { font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.product-card_ask { font-size: 17px; font-weight: 700; color: var(--text-link); }
.product-card_actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.product-card_actions .btn { width: 100%; min-height: 44px; padding: 0 10px; font-size: 15px; border-radius: var(--radius-md); }
.product-card.is-out .product-card_actions .btn--outline:first-child { border-color: var(--text-muted); color: var(--text-muted); }

@media (min-width: 768px) {
  .product-card { border-radius: var(--radius-2xl); }
  .product-card_photo { height: 220px; }
  .product-card_body { padding: 18px 16px 16px; }
  .product-card_title { font-size: 19px; }
  .product-card_value { font-size: 26px; }
  .product-card_price { padding-top: 14px; }
}

/* ---------- 38. FAQ на категорії: заголовок ліворуч, акордеон праворуч ---------- */
@media (min-width: 1024px) {
  .page--category .faq { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 48px; row-gap: 0; max-width: none; align-items: start; }
  .page--category .faq_title { grid-column: 1; grid-row: 1 / span 40; margin: 0; }
  .page--category .faq_item { grid-column: 2; }
  .page--category .faq_item + .faq_item { margin-top: 10px; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .page--category .faq { grid-template-columns: 260px minmax(0, 1fr); column-gap: 32px; } }

/* ---------- 39. Таблиця цін категорії: текстові колонки ліворуч ---------- */
.price-table .table--prices thead th:nth-child(2), .price-table .table--prices td:nth-child(2),
.price-table .table--prices thead th:nth-child(5), .price-table .table--prices td:nth-child(5) { text-align: left; }
.table--prices td:nth-child(5) { font-weight: 400; color: var(--text-muted); }