/* --- main.css --- */
/* ════════════════════════════════════════════════════════
   Eurosmak — main.css
   Generated from prototypes: smak24-home, category-archive, product-card
   ════════════════════════════════════════════════════════ */

/* ── 0. Custom Properties ──────────────────────────────── */
:root {
  /* Токени з прототипу smak24-checkout.html — холодні сірі,
     на відміну від теплих --surface2/--accent-light теми. */
  --field: #f5f6f8;          /* фон полів вводу */
  --page: #fafbfc;           /* фон сторінки чекауту (щоб поля не зливались) */
  --field-hover: #eef0f3;
  --line-soft: #f0f2f5;
  --green-tint: #eef8f1;     /* м'який зелений фон блоків */
  --green-line: #cfe8d8;
  --green-dark: #157a3d;

  --accent:       #16a34a;
  --accent-hover: #15803d;
  --accent-light: #eef8f1;
  --accent-text:  #15803d;
  --red:          #dc2626;
  --red-light:    #fee2e2;
  --red-text:     #b91c1c;
  --health:       #0ea5e9;
  --health-light: #e0f2fe;
  --health-text:  #0369a1;
  --health-dark:  #075985;
  --bg:           #f6f6f6;
  --surface:      #fff;
  --surface2:     #f5f6f8;
  --border:       #e5e4e0;
  --border2:      #d1d0cc;
  --text:         #1a1a18;
  --text2:        #6b6b67;
  --text3:        #9a9a96;
  --radius:       12px;
  --radius-sm:    8px;
  --radius-lg:    16px;
  --shadow:       0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-lg:    0 2px 8px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.10);
}

/* ── 1. Reset & Base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* ── 2. Container ──────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ── 3. Header ─────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: box-shadow .2s;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}

/* Logo */
.logo {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.logo-img { height: 38px; width: auto; object-fit: contain; }
.logo-text { font-family: 'Geologica', sans-serif; font-weight: 700; }

/* Search */
.search-wrap { flex: 1; margin: 0 auto; position: relative; }
.search-wrap form { display: flex; align-items: center; }
.search-wrap input[type="search"],
.search-wrap input[type="text"] {
  width: 100%; height: 40px;
  padding: 0 44px 0 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--field);
  font-size: 14px; font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}
.search-wrap input:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(22,163,74,.1);
}
.search-wrap input::placeholder { color: var(--text3); }
.search-btn {
  position: absolute; right: 0; top: 0;
  width: 40px; height: 40px;
  background: var(--accent); border: none;
  border-radius: 0 10px 10px 0;
  color: white;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.search-btn:hover { background: var(--accent-hover); }
.search-btn svg { width: 16px; height: 16px; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* ── Nav dropdown (info button) ─────────────────────────── */
.h-nav-wrap { position: relative; }
.h-btn--nav { }
.h-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  min-width: 200px;
  padding: 6px 0;
  white-space: nowrap;
}
.h-nav-dropdown.is-open { display: block; }
.h-nav-list { list-style: none; margin: 0; padding: 0; }
.h-nav-list li a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--text2);
  transition: color .15s, background .15s;
}
.h-nav-list li a:hover { color: var(--accent); background: var(--surface2); }
.h-nav-list li.current-menu-item > a { color: var(--accent); font-weight: 600; }

/* Mobile catalog open button — hidden on desktop, shown via media query below */
.h-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: none; border: none; color: var(--text2);
  font-size: 10px; font-family: inherit; cursor: pointer;
  transition: color .15s, background .15s;
  position: relative;
}
.h-btn:hover { color: var(--text); background: var(--surface2); }
.h-btn svg    { width: 26px; height: 26px; }
.h-badge {
  position: absolute; top: 2px; right: 6px;
  background: var(--red); color: white;
  font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.error-404 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 100px;
}
.error-404__code {
  font-size: 80px;
  color: #16a34a;
  font-family: 'Geologica', sans-serif;}
/* ── 4. Navbar ─────────────────────────────────────────── */

.main-content {
  min-height: 600px;
}
.btn-categories {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  background: var(--accent); color: white;
  border: none; font-size: 13px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; flex-shrink: 0; cursor: pointer;
  border-radius: 10px;
  transition: background .15s;
}
.btn-categories:hover { background: var(--accent-hover); }
.btn-categories svg   { width: 16px; height: 16px; }

/* Nav links — WP menu renders ul>li>a */
.nav-links,
.nav-links ul {
  display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
}
.nav-links li { position: relative; }
.nav-links li a,
.nav-links > a {
  display: flex; align-items: center; height: 46px; padding: 0 13px;
  font-size: 14px; color: var(--text2);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.nav-links li a:hover,
.nav-links li.current-menu-item > a,
.nav-links li.current-page-ancestor > a,
.nav-links li.current-menu-ancestor > a {
  color: var(--text);
}
.nav-links li.current-menu-item > a {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
}

/* Language switcher */
.nav-lang { margin-left: auto; display: flex; gap: 2px; }
.lang-btn {
  padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 600;
  border: none; background: none; color: var(--text3); transition: all .15s; cursor: pointer;
}
.lang-btn:hover { color: var(--text); background: var(--surface2); }
.lang-btn.active { background: var(--surface2); color: var(--text); }

/* Categories dropdown */
#categories-menu {
  display: none;
  position: absolute; top: 108px; left: 0; right: 0; z-index: 180;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 24px 0;
}
#categories-menu.is-open { display: block; }
#categories-menu .container > ul {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; list-style: none;
}
#categories-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text2); transition: background .15s, color .15s;
}
#categories-menu a:hover { background: var(--surface2); color: var(--accent); }
#categories-menu .cat-icon-tiny {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}

/* Mobile menu */
/* ── Mobile menu — slide panel from left ────────────────── */
#mobile-menu {
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none; visibility: hidden;
  transition: visibility 0s .3s;
}
#mobile-menu.is-open {
  pointer-events: auto; visibility: visible;
  transition: visibility 0s 0s;
}
body.menu-open { overflow: hidden; }

.mobile-menu__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .3s;
}
#mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }

.mobile-menu__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(320px, 100vw);
  background: var(--surface);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .3s ease;
  box-shadow: 4px 0 24px rgba(0,0,0,.13);
  overflow: hidden;
}
#mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

/* Head — search field + close button */
.mobile-menu__head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.mobile-menu__head-search { flex: 1; display: block; margin: 0; }

/* Рамка, фон і скруглення — на самому <input>, як у пошуку основної шапки
   (.search-wrap input). Раніше вони були на <form>, а всередині лежав голий
   input: focus-кільце малювалось на input, а не на видимій рамці, кнопка
   лупи висіла окремо, а випадайка результатів вирівнювалась по input, тому
   була вужча за рамку. Тепер input і є видимим полем, і все збігається. */
.mobile-menu__head-search input[type="search"] {
  display: block; width: 100%; height: 42px;
  padding: 0 44px 0 14px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--field, #f5f6f8);
  font-size: 14px; color: var(--text); outline: none;
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mobile-menu__head-search input[type="search"]::placeholder { color: var(--text3); }
.mobile-menu__head-search input[type="search"]:focus {
  background: var(--surface, #fff); border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22,163,74,.1);
}
.mobile-menu__head-search input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Лупа — усередині поля, притиснута до правого краю (позиціонується
   від .mobile-menu__search-wrap, у нього position: relative). */
.mobile-menu__head-search button[type="submit"] {
  position: absolute; right: 0; top: 0;
  width: 42px; height: 42px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 10px 10px 0;
  transition: color .15s;
}
.mobile-menu__head-search button[type="submit"]:hover,
.mobile-menu__head-search input[type="search"]:focus ~ button[type="submit"] { color: var(--accent); }
.mobile-menu__head-search svg { width: 18px; height: 18px; }
.mobile-menu__close {
  background: none; border: none; cursor: pointer;
  color: var(--text3); padding: 4px; flex-shrink: 0;
  display: flex; align-items: center; border-radius: 6px;
}
.mobile-menu__close:hover { color: var(--text); }
.mobile-menu__close svg { width: 22px; height: 22px; }

/* Scrollable body */
.mobile-menu__body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
}

/* Category list */
.mobile-menu__list {
  list-style: none; margin: 0; padding: 0;
}
.mobile-menu__list li { position: relative; }

/* Item without children — plain link */
.mobile-menu__list li:not(.menu-item-has-children) > a {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  font-size: 16px; font-weight: 500; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--border);
}
.mobile-menu__list li:not(.menu-item-has-children) > a:hover { color: var(--accent); }

/* Item with children — row wraps link + arrow */
.mm-item-row {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.mm-item-row > a {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  font-size: 16px; font-weight: 500; color: var(--text);
  text-decoration: none;
}
.mm-item-row > a:hover { color: var(--accent); }
.mobile-menu__list li.mm-open > .mm-item-row > a { color: var(--accent); }
.mm-cat-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }

/* Arrow toggle button */
.mm-sub-arrow {
  flex-shrink: 0; width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-left: 1px solid var(--border);
  cursor: pointer; color: var(--text3);
  transition: color .15s;
}
.mm-sub-arrow svg { transition: transform .22s ease; }
.mm-sub-arrow:hover { color: var(--accent); }
.mobile-menu__list li.mm-open > .mm-item-row .mm-sub-arrow { color: var(--accent); }
.mobile-menu__list li.mm-open > .mm-item-row .mm-sub-arrow svg { transform: rotate(180deg); }

/* Sub-menu.
   Розкриття анімується висотою: display:none → block плавності не дає.
   Реальну висоту (max-height у px) виставляє main.js за scrollHeight —
   значення заздалегідь невідоме, а max-height:auto не анімується.
   visibility з затримкою потрібна, щоб згорнуті пункти не ловили фокус
   із клавіатури, але й не зникали раніше, ніж закінчиться згортання. */
.mobile-menu__list .sub-menu {
  display: block; list-style: none; margin: 0; padding: 0;
  background: var(--bg2, #f9f9f9);
  max-height: 0; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: max-height .32s cubic-bezier(.4, 0, .2, 1),
              opacity .22s ease,
              visibility 0s linear .32s;
}
.mobile-menu__list li.mm-open > .sub-menu {
  max-height: 2000px; /* запасне значення, якщо клас додано без JS-виміру */
  opacity: 1; visibility: visible;
  transition: max-height .32s cubic-bezier(.4, 0, .2, 1),
              opacity .28s ease .06s,
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__list .sub-menu,
  .mobile-menu__list li.mm-open > .sub-menu { transition: none; }
  .mm-sub-arrow svg { transition: none; }
}
.mobile-menu__list .sub-menu li > a {
  display: block; padding: 10px 16px 10px 28px;
  font-size: 13px; color: var(--text2);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mobile-menu__list .sub-menu li:last-child > a { border-bottom: none; }
.mobile-menu__list .sub-menu li > a:hover { color: var(--accent); }

/* Lang at bottom */
.mobile-menu__lang {
  padding: 12px 16px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; flex-shrink: 0;
}
.mobile-menu__lang .lang-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
  color: var(--text2); text-decoration: none;
  border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.mobile-menu__lang .lang-btn.active,
.mobile-menu__lang .lang-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Wishlist fav button on product card ─────────────────── */
.card-fav-btn {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.82); border: none; border-radius: 50%;
  cursor: pointer; color: var(--text3);
  transition: color .15s, background .15s;
  backdrop-filter: blur(3px);
}
.card-fav-btn:hover   { color: var(--red); background: #fff; }
.card-fav-btn.is-active { color: var(--red); }

/* ── 4b. Categories mega-menu ─────────────────────────────── */
.categories-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1240px;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.13);
}
.categories-dropdown.is-open { display: block; }

.cat-menu {
  display: flex;
  height: 100%;
}

/* Left column — parent list */
.cat-menu__parents {
  width: 230px;
  flex-shrink: 0;
  list-style: none;
  margin: 0; padding: 6px 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.cat-menu__item { display: block; }
.cat-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 15px;
  color: var(--text);
  transition: background .1s, color .1s;
  white-space: nowrap;
  overflow: hidden;
}
.cat-menu__link span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-menu__icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}
.cat-menu__icon svg { width: 22px; height: 22px; display: block; }
.cat-menu__arrow {
  width: 13px; height: 13px;
  flex-shrink: 0;
  opacity: .3;
  margin-left: auto;
  transition: opacity .12s, transform .12s;
}
.cat-menu__item.is-active .cat-menu__link {
  background: var(--surface2);
  color: var(--accent);
  font-weight: 600;
}
.cat-menu__item.is-active .cat-menu__arrow {
  opacity: 1;
  transform: translateX(2px);
}
.cat-menu__item:not(.is-active) .cat-menu__link:hover {
  background: var(--surface2);
  color: var(--accent);
}

/* Right column — subcategory panels */
.cat-menu__stage {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
.cat-menu__panel { display: none; }
.cat-menu__panel.is-active { display: block; }

.cat-menu__panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.cat-menu__subs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 6px;
}
.cat-menu__sub {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text2);
  transition: background .1s, color .1s;
  white-space: nowrap;
  overflow: hidden;
}
.cat-menu__sub::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--border2);
  flex-shrink: 0;
  margin-right: 8px;
  transition: background .1s;
}
.cat-menu__sub span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-menu__sub:hover { background: var(--surface2); color: var(--accent); }
.cat-menu__sub:hover::before { background: var(--accent); }
.cat-menu__sub-icon { display: none; }
.cat-menu__sub-icon svg { display: none; }

.cat-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.cat-menu__view-all svg { width: 13px; height: 13px; }
.cat-menu__view-all:hover { text-decoration: underline; }

/* ── 5. Sections layout ────────────────────────────────── */
.section {
  max-width: 1280px; margin: 40px auto 0; padding: 0 20px;
}
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.section-title {
  font-family: 'Geologica', sans-serif;
  font-size: 20px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.section-title::before {
  content: ''; display: block;
  width: 4px; height: 22px; border-radius: 2px;
  background: var(--accent); flex-shrink: 0;
}
.section-title.red::before,
.section-title--red::before    { background: var(--red); }
.section-title.blue::before,
.section-title--blue::before   { background: var(--health); }
.section-link {
  font-size: 13px; color: var(--text2);
  display: flex; align-items: center; gap: 4px;
  transition: color .15s;
}
.section-link:hover { color: var(--accent); }
.section-link svg { width: 14px; height: 14px; }

/* ── 6. Hero ───────────────────────────────────────────── */
.hero {
  max-width: 1280px; margin: 20px auto 0; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 320px; gap: 16px;
}
.hero-main {
  border-radius: var(--radius-lg);
  position: relative; height: 360px; background: #1a3a2a;
  overflow: visible;
}

/* Prototype-style pure CSS slider */
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; padding: 36px;
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hero-slide  .promo-img-float {
  position: absolute;
  bottom: -30px;
  right: -5px;
  height: calc(100% + 28px);
  max-width: 38%;
}
.hero-slide-overlay { position: absolute; inset: 0; }
/* In overlay mode the slide itself must not clip the floating image */
.hero-slide.hero-slide--img-overlay {
  overflow: visible;
}
.hero-slide.hero-slide--img-overlay .hero-slide-bg,
.hero-slide.hero-slide--img-overlay .hero-slide-overlay {
  border-radius: var(--radius-lg);
}
.hero-img-float {
  position: absolute;
  bottom: 0; right: 0;
  height: calc(100% + 40px);
  width: auto; max-width: 50%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(-8px 4px 24px rgba(0,0,0,.35));
  transform-origin: bottom center;
}
.hero-slide--img-overlay .hero-content { max-width: 50%; }
.hero-slide-hitbox {
  position: absolute; inset: 0;
  z-index: 1;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
}
.hero-content {
  position: relative; z-index: 2; color: white; max-width: 420px;
}
.hero-tag {
  display: inline-block; background: var(--red); color: white;
  font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px; margin-bottom: 10px;
}
.hero-title {
  font-family: 'Geologica', sans-serif;
  font-size: 28px; font-weight: 700; line-height: 1.25; margin-bottom: 10px;
}
.hero-sub { font-size: 14px; opacity: .85; margin-bottom: 20px; line-height: 1.5; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px; background: var(--accent); color: white;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; border: none;
  white-space: nowrap; width: fit-content; max-width: 100%;
  transition: background .15s, transform .1s;
}
.hero-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.hero-btn svg,
.hero-btn .icon {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke-width: 2.5; transition: transform .15s;
}
.hero-btn:hover svg,
.hero-btn:hover .icon { transform: translateX(3px); }

/* Dots */
.hero-dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 10;
}
.hero-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.4); border: none; padding: 0;
  transition: width .3s, background .3s; cursor: pointer;
}
.hero-dot.active { width: 20px; background: white; }

/* Hero side banners */
.hero-side { display: flex; flex-direction: column; gap: 16px; }
.hero-side-banner {
  flex: 1; border-radius: var(--radius); overflow: hidden;
  position: relative; cursor: pointer; min-height: 0;
  display: block;
}
.hsb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hsb-overlay { position: absolute; inset: 0; }
.hsb-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}
.hsb-tag { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 4px; max-width: 120px;
  display: flex;
  justify-content: center;}
.hsb-title { font-family: 'Geologica', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.hsb-subtitle { font-size: 12px; opacity: .75; margin-bottom: 8px; }
.hsb-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 6px; border: none;
  width: fit-content; transition: opacity .15s; cursor: pointer;
}
.hsb-cta:hover { opacity: .85; }

/* ── 7. Categories grid ────────────────────────────────── */
.cats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.cat-card {
  background: rgb(229, 248, 220);
  border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: row; align-items: stretch;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  min-height: 90px;
}
.cat-card:hover { box-shadow: var(--shadow); border-color: var(--accent); transform: translateY(-2px); }
.cat-card__text {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 14px 16px; gap: 4px;
}
.cat-card .cat-name  { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; margin: 0; }
.cat-card .cat-count { font-size: 12px; color: var(--text3); margin: 0; }
.cat-photo {
  width: 50%; flex-shrink: 0;
  overflow: hidden;
}
.cat-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; display: block; }
.cat-card:hover .cat-photo img { transform: scale(1.05); }

/* Картка «Знижки»: червоний відтінок замість зеленого, а замість фото
   категорії — значок відсотка в колі. */
/* Фон — той самий, що в головного банера (hero): темно-зелений градієнт
   135° (#1a3a2a → #2d6a4f) і затемнення поверх нього. Це копія значень
   зі слайда hero (hero.php), а не посилання: якщо колір слайда змінити
   в адмінці, картку треба правити тут. */
.cat-card--sale {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1)),
    linear-gradient(135deg, #1a3a2a, #2d6a4f);
  border-color: transparent;
}
.cat-card--sale:hover { border-color: #fff; }
.cat-card--sale .cat-name  { color: #fff; }
.cat-card--sale .cat-count { color: rgba(255, 255, 255, .75); }
.cat-photo--icon { display: flex; align-items: center; justify-content: center; }
.cat-sale-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #dc2626; color: #fff;   /* червоний плашки .hero-tag головного банера */
  transition: transform .3s ease;
}
.cat-sale-icon svg { width: 28px; height: 28px; }
.cat-card--sale:hover .cat-sale-icon { transform: rotate(-10deg) scale(1.08); }

/* ── 8. Product cards ──────────────────────────────────── */
.products-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.prod-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
  position: relative;
}
.prod-card:hover { box-shadow: var(--shadow-lg) }

.prod-img-wrap {
  aspect-ratio: 1; background: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.prod-img-wrap img,
.prod-img {
  position: absolute; inset: 5%;
  width: 90%; height: 90%;
  object-fit: contain;
  transition: transform .3s;
}
.woocommerce-Price-currencySymbol {
  font-size: 0.73em;
}
.prod-labels {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 4px; z-index: 1;
}
.prod-label {
  display: inline-flex; padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.4;
}
.lbl-new    { background: var(--accent-light); color: var(--accent-text); }
.lbl-sale   { background: var(--red-light);    color: var(--red-text);    }
.lbl-hot    { background: #fef3c7;             color: #92400e;            }
.lbl-health { background: var(--health-light); color: var(--health-text); }

/* Tag badges — bottom of product image */
.prod-tag-badges {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 8px; z-index: 1; justify-content: flex-start;
}
.prod-tag-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  line-height: 1.3; white-space: nowrap;
  border: 1px solid transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.prod-tag-badge__icon { display: inline-flex; width: 12px; height: 12px; flex-shrink: 0; }
.prod-tag-badge__icon svg { width: 12px; height: 12px; }

.prod-fav {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); transition: all .15s; opacity: 0; z-index: 1;
}
.prod-card:hover .prod-fav { opacity: 1; }
.prod-fav:hover,
.prod-fav.is-active {
  color: var(--red); border-color: var(--red); background: var(--red-light);
}
.prod-fav svg { width: 14px; height: 14px; }

.prod-body { padding: 12px 12px 14px; display: flex; flex-direction: column; flex: 1; }
.prod-brand { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; }
.prod-name {
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  flex: 1;
  margin-bottom: 10px;
  text-overflow: ellipsis;
  min-height: 2.8em;   /* резерв двох строк: однорядкова назва не робить картку нижчою */
  max-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-name a { color: inherit; }
.prod-name a:hover { color: var(--accent); }

.prod-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.star {
  width: 12px; height: 12px; color: #f59e0b;
}
.star--fill { color: #f59e0b; }
.prod-rating-count { font-size: 11px; color: var(--text3); margin-left: 2px; }

.prod-price-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.prod-price {
  font-family: 'Geologica', sans-serif; font-size: 17px; font-weight: 600; color: var(--text);
}
/* WooCommerce price HTML structure overrides */
.prod-price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.prod-price ins  { text-decoration: none; color: var(--red); }
.prod-price del  { font-size: 12px; color: var(--text3); font-weight: 400; }
.prod-price del .woocommerce-Price-amount { color: var(--text3); font-size: 12px; }

.prod-buy {
  width: 100%;
  height: 34px;
  background: #16a34a00;
  color: #16a34a;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.prod-buy:hover { background: var(--accent-hover); border-color: var(--accent-hover); color:#fff}
.prod-buy.loading,
.prod-buy.is-adding { opacity: .6; pointer-events: none; }
.prod-buy svg { width: 14px; height: 14px; }

/* ── 9. Promo strip ────────────────────────────────────── */
.promo-strip {
  max-width: 1280px; margin: 40px auto 0; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  overflow: visible;
}
.promo-banner {
  border-radius: var(--radius); overflow: hidden;
  position: relative; height: 180px;
  display: block;
}
.promo-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.promo-overlay   { position: absolute; inset: 0; }
.promo-content {
  position: relative; z-index: 1; padding: 28px;
  height: 100%; display: flex; flex-direction: column; justify-content: center; color: white;
}
.promo-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: .8; margin-bottom: 6px;
}
.promo-title { font-family: 'Geologica', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.promo-sub { font-size: 13px; opacity: .8; margin-bottom: 14px; }
.promo-btn {
  display: inline-flex; align-items: center;
  padding: 8px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; border: 2px solid white;
  color: white; background: transparent; width: fit-content;
  transition: background .15s, color .15s; cursor: pointer;
}
.promo-btn:hover { background: white; color: var(--text); }

/* Promo banner: image floating above block */
.promo-banner--img-overlay,
.hero-side-banner--img-overlay {
  overflow: visible;
}
/* Restore rounded corners on inner layers (parent overflow:visible breaks clipping) */
.promo-banner--img-overlay .promo-banner-bg,
.promo-banner--img-overlay .promo-overlay {
  border-radius: var(--radius);
}
.hero-side-banner--img-overlay .hsb-bg,
.hero-side-banner--img-overlay .hsb-overlay {
  border-radius: var(--radius);
}
.promo-img-float {
  position: absolute;
  bottom: 0; right: -5px;
  height: calc(100% + 28px);
  width: auto; max-width: 48%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.25));
}
/* Rotate variants — обрати в адмін-панелі банера */
.promo-img-float--r0   { transform: rotate(0deg); }
.promo-img-float--r5   { transform: rotate(5deg); }
.promo-img-float--r10  { transform: rotate(10deg); }
.promo-img-float--r15  { transform: rotate(15deg); }
.promo-img-float--r20  { transform: rotate(20deg); }
.promo-img-float--rm5  { transform: rotate(-5deg); }
.promo-img-float--rm10 { transform: rotate(-10deg); }
.promo-img-float--rm15 { transform: rotate(-15deg); }
.promo-img-float--rm20 { transform: rotate(-20deg); }
/* Clip siblings above the float so content text doesn't overlap */
.promo-banner--img-overlay .promo-content,
.hero-side-banner--img-overlay .hsb-content {
  max-width: 58%;
}

/* ── 10. Health section ────────────────────────────────── */
.health-section {
  max-width: 1280px; margin: 48px auto 0; padding: 0 20px;
}
.health-banner {
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
  border-radius: var(--radius-lg); padding: 36px 40px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
.health-banner::before {
  content: ''; position: absolute; top: -60px; right: 200px;
  width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.05);
  pointer-events: none;
}
.health-banner::after {
  content: ''; position: absolute; bottom: -80px; right: 80px;
  width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.06);
  pointer-events: none;
}
.health-left { position: relative; z-index: 1; }
.health-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15); color: white;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
.health-tag svg { width: 13px; height: 13px; }
.health-title {
  font-family: 'Geologica', sans-serif;
  font-size: 26px; font-weight: 700; color: white; line-height: 1.3; margin-bottom: 10px;
}
.health-sub {
  font-size: 14px; color: rgba(255,255,255,.75);
  line-height: 1.6; margin-bottom: 22px; max-width: 500px;
}
.health-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.health-pill {
  background: rgba(255,255,255,.15); color: white;
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.2);
}
.health-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; background: white; color: var(--health-dark);
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; border: none;
  transition: transform .15s, box-shadow .15s; cursor: pointer;
}
.health-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.health-cta svg { width: 16px; height: 16px; }
.health-stats {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 14px;
}
.health-stat {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius); padding: 14px 20px; text-align: center; min-width: 130px;
}
.health-stat-num {
  font-family: 'Geologica', sans-serif;
  font-size: 26px; font-weight: 700; color: white; line-height: 1;
}
.health-stat-label { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 4px; }
.health-products { margin-top: 24px; }

/* Pulse icon for health tag */
.icon-pulse { display: inline-flex; align-items: center; }

/* ── 11. Articles ──────────────────────────────────────── */
.articles-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
.article-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.article-img-wrap {
  position: relative;
  overflow: hidden;
}
.article-img {
  aspect-ratio: 16/9; background: var(--surface2);
  display: block; overflow: hidden;
}
.article-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.article-card:hover .article-img img { transform: scale(1.04); }
.article-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.95); color: var(--accent-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
  transition: background .15s, color .15s, box-shadow .15s;
}
.article-cat svg,
.article-cat .cat-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke-width: 2.3;
}
.article-cat:hover {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.article-cat--promo {
  color: var(--red);
}
.article-cat--promo:hover {
  background: var(--red); color: #fff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}
.article-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-title {
  font-family: 'Geologica', sans-serif;
  font-size: 15px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; color: var(--text);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-title a { color: inherit; }
.article-title a:hover { color: var(--accent); }
.article-excerpt {
  font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; gap: 8px;
}
.article-date {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text3);
}
.article-date svg { width: 12px; height: 12px; }
.article-link {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--accent); transition: gap .15s;
}
.article-link:hover { gap: 6px; }
.article-link svg { width: 12px; height: 12px; }

/* ── 12. Trust strip ───────────────────────────────────── */
.trust-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 48px 0 0;
}
.trust-inner {
  max-width: 1280px; margin: 0 auto; padding: 24px 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-item { display: flex; align-items: flex-start; gap: 14px; }
.trust-icon {
width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.trust-icon svg { width: 20px; height: 20px; }
.trust-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.trust-sub   { font-size: 12px; color: var(--text2); line-height: 1.4; }

/* ── 13. Footer ────────────────────────────────────────── */
.site-footer { background: #18181b; padding: 48px 0 24px;}
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.footer-top {
  display: grid; grid-template-columns: 240px 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 36px; border-bottom: 1px solid #27272a;
}
.footer-logo {
  display: block; margin-bottom: 10px;
  font-family: 'Geologica', sans-serif; font-size: 22px; font-weight: 700; color: #ef4444;
}
.footer-logo-img { height: 40px; width: auto; object-fit: contain; }
.footer-desc { font-size: 13px; color: #71717a; line-height: 1.6; margin-bottom: 16px; }
.footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.social-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: #27272a; border: none; color: #a1a1aa;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.social-btn:hover { background: var(--accent); color: white; }
.social-btn svg { width: 15px; height: 15px; }
.footer-col-title {
  font-size: 13px; font-weight: 700; color: #e4e4e7;
  margin-bottom: 14px; letter-spacing: .04em; text-transform: uppercase;
}
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a,
.footer-links li a { font-size: 13px; color: #71717a; transition: color .15s; }
.footer-links a:hover { color: #e4e4e7; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: #71717a; text-decoration: none;
}
.footer-contact-item:hover { color: #a1a1aa; }
.footer-contact-item svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.footer-schedule { display: flex; flex-direction: column; gap: 6px; }
.footer-schedule-row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #71717a;
}
.footer-schedule-row span:last-child { color: #a1a1aa; }
.footer-bottom {
  padding-top: 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 12px; color: #52525b; }
.footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Підпис розробника під копірайтом — як на obrani.dp.ua (там .app-develop). */
.app-develop {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #52525b; text-decoration: none;
  transition: color .15s;
}
.app-develop:hover { color: #a1a1aa; }
.app-develop img { width: 14px; height: 14px; flex-shrink: 0; }
.footer-pay  { display: flex; align-items: center; gap: 8px; }
.pay-logo {
  height: 22px; padding: 4px 8px; background: #27272a; border-radius: 4px;
  font-size: 10px; font-weight: 700; color: #a1a1aa;
  display: flex; align-items: center;
}

/* ── 14. Scroll to top ─────────────────────────────────── */
.scroll-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent); color: white; border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(22,163,74,.4);
  transition: opacity .3s, transform .3s;
  opacity: 0; pointer-events: none;
}
.scroll-top.visible   { opacity: 1; pointer-events: auto; }
.scroll-top:hover     { transform: translateY(-2px); }
.scroll-top svg       { width: 20px; height: 20px; }
body.single-product .scroll-top { display: none !important; }

/* ── 15. Breadcrumb ────────────────────────────────────── */
.breadcrumb-scroll {
  position: relative;
  overflow: hidden;
}
.breadcrumb-scroll::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 56px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
}
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text3);
  flex-wrap: nowrap; white-space: nowrap;
  padding: 14px 52px 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb a { color: var(--text2); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--border2); }

/* ── 16. Pagination ────────────────────────────────────── */
.pagination {
  display: flex; justify-content: center; gap: 4px;
  margin: 32px 0; flex-wrap: wrap;
}
.pagination .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--border); color: var(--text2);
  transition: background .15s, border-color .15s, color .15s;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: white; }
.pagination .dots { border-color: transparent; pointer-events: none; }

/* ── 17. Category page (WooCommerce archive) ───────────── */
.cat-page { padding-bottom: 40px; }
.cat-archive-title {
  font-family: 'Geologica', sans-serif;
  font-size: 22px; font-weight: 700; margin: 8px 0 16px; color: var(--text);
}
.cat-page-layout {
  display: flex; gap: 32px;
  align-items: flex-start;
}
.cat-sidebar { flex: 0 0 280px; position: sticky; top: 130px; background: #fff;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);}
.cat-main { flex: 1; min-width: 0; max-width: 100%;}

/* ── Filter checkboxes / radios (wcpsf-item) ─────── */
.wcpsf-item input[type="checkbox"],
.wcpsf-item input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1.5px solid var(--border2); border-radius: 3px;
  background: #fff; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s;
}
.wcpsf-item input[type="radio"] { border-radius: 50%; }
.wcpsf-item input[type="checkbox"]:checked,
.wcpsf-item input[type="radio"]:checked {
  background: var(--accent); border-color: var(--accent);
}
.wcpsf-item input[type="checkbox"]:checked::after {
  content: ''; position: absolute;
  left: 4px; top: 1px; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.wcpsf-item input[type="radio"]:checked::after {
  content: ''; position: absolute;
  left: 3px; top: 3px; width: 6px; height: 6px;
  border-radius: 50%; background: #fff;
}
.wcpsf-item--active input[type="checkbox"],
.wcpsf-item--active input[type="radio"] {
  background: var(--accent); border-color: var(--accent);
}

/* ── Filter placeholder ──────────────────────────── */
.filter-placeholder {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 20px 18px;
  box-shadow: 0 4px 24px rgba(22,163,74,.07);
}
.filter-placeholder h3 {
  font-family: 'Geologica', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 18px;
}
.filter-ph-group {
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.filter-ph-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-ph-label { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.filter-ph-items { display: flex; flex-direction: column; gap: 8px; }
.filter-ph-item  { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text3); }
.filter-ph-check { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid var(--border2); background: var(--surface2); flex-shrink: 0; }
.filter-ph-range { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent-light) 55%, var(--surface2) 100%); margin: 8px 0 4px; }
.filter-ph-minmax { display: flex; justify-content: space-between; font-size: 12px; color: var(--text3); }
.filter-ph-actions { display: flex; gap: 10px; margin-top: 18px; }
.filter-ph-btn {
  flex: 1; height: 36px; border-radius: var(--radius-sm); border: none;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: not-allowed; opacity: .65;
}
.filter-ph-btn-apply { background: var(--accent); color: #fff; }
.filter-ph-btn-reset { background: var(--surface2); color: var(--text2); }

/* ── Sort pills row ──────────────────────────────── */
.filter-sort-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
  justify-content: space-between;
}
.filter-toggle {
  display: none; /* shown on mobile */
  align-items: center; gap: 6px;
  padding: 7px 16px; font-size: 14px; font-weight: 600;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.sort-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.sort-pill {
  padding: 7px 18px; border-radius: 20px;
  border: 1px solid var(--border2); background: #FFF;
  color: var(--text); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.sort-pill:hover { border-color: var(--accent); color: var(--accent-hover); }
.sort-pill.active {
  background: rgba(22,163,74,.14); border-color: #70cf70;
  color: var(--accent-hover); font-weight: 600;
}
span.cat-found-count {
    COLOR: #a0a0a0;
    FONT-SIZE: 15PX;
}
/* ── Archive product grid ────────────────────────── */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* ── Product card (archive + search + related) ───── */
.product-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none; color: inherit; display: block;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.card-img {
  aspect-ratio: 1; background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.card-img img {
  position: absolute; inset: 3%;
  width: 94%; height: 94%; object-fit: contain;
}
.card-badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
  font-family: 'Geologica', sans-serif;
}
.card-badge-new  { background: var(--accent-light); color: var(--accent-text); }
.card-badge-sale { background: var(--red-light);    color: var(--red-text);    }

.card-body { padding: 12px 14px 14px; }
.card-name {
  font-size: 13px; line-height: 1.4; color: var(--text);
  margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-price-row   { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.card-price       { font-family: 'Geologica', sans-serif; font-size: 16px; font-weight: 600; color: var(--text); }
.card-price .woocommerce-Price-amount { font-size: inherit; color: inherit; }
.card-price.sale  { color: var(--red); }
.card-old         { font-size: 13px; color: var(--text3); text-decoration: line-through; }
.card-old .woocommerce-Price-amount { font-size: inherit; color: var(--text3); }
.card-buy {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; height: 34px; border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm); background: none; color: var(--accent);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s, opacity .15s; text-decoration: none;
}
.card-buy:hover,
.card-buy--details:hover { background: var(--accent); color: white; }
.card-buy.is-adding,
.card-buy.loading { opacity: .5; pointer-events: none; cursor: default; }

.card-stock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; margin-bottom: 9px;
}
.card-stock::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.card-stock--in  { color: #2d9b4e; }
.card-stock--in::before  { background: #2d9b4e; }
.card-stock--out { color: var(--text3); }
.card-stock--out::before { background: #c0c0c0; }
.product-card--out { opacity: .75;filter: grayscale(0.7); }
.product-card--out .card-buy { border-color: var(--border); color: var(--text3); }
.product-card--out .card-buy:hover { background: var(--border); color: var(--text3); }

/* ── Category description at bottom ────────────── */
.cat-description-block {
  margin: 36px 0 0; padding: 0;
}
.cat-description-block h3 {
  font-family: 'Geologica', sans-serif;
  font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 14px;
}
.cat-description-inner {
  position: relative;
  font-size: 15px; line-height: 1.7; color: var(--text2); text-align: left;
}

/* Rich content styles for all description areas */
.wcpsf-intro-text,
.wcpsf-bottom-text,
.cat-description-inner {
  font-size: 15px; line-height: 1.7; color: var(--text2);
}
.wcpsf-intro-text p, .wcpsf-bottom-text p, .cat-description-inner p {
  margin-bottom: 12px;
}
.wcpsf-intro-text ul, .wcpsf-bottom-text ul, .cat-description-inner ul,
.wcpsf-intro-text ol, .wcpsf-bottom-text ol, .cat-description-inner ol {
  margin-bottom: 14px; padding-left: 0; list-style: none;
}
.wcpsf-intro-text ul li, .wcpsf-bottom-text ul li, .cat-description-inner ul li {
  position: relative; padding-left: 20px; margin-bottom: 6px;
}
.wcpsf-intro-text ul li::before, .wcpsf-bottom-text ul li::before, .cat-description-inner ul li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.wcpsf-intro-text ol, .wcpsf-bottom-text ol, .cat-description-inner ol {
  counter-reset: seo-ol;
}
.wcpsf-intro-text ol li, .wcpsf-bottom-text ol li, .cat-description-inner ol li {
  position: relative; padding-left: 28px; margin-bottom: 6px;
  counter-increment: seo-ol;
}
.wcpsf-intro-text ol li::before, .wcpsf-bottom-text ol li::before, .cat-description-inner ol li::before {
  content: counter(seo-ol);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.wcpsf-intro-text h2, .wcpsf-bottom-text h2, .cat-description-inner h2,
.wcpsf-intro-text h3, .wcpsf-bottom-text h3, .cat-description-inner h3 {
  font-family: 'Geologica', sans-serif; font-weight: 700;
  color: var(--text); margin: 20px 0 8px;
}
.wcpsf-intro-text h2, .wcpsf-bottom-text h2, .cat-description-inner h2 { font-size: 18px; }
.wcpsf-intro-text h3, .wcpsf-bottom-text h3, .cat-description-inner h3 { font-size: 16px; }
.wcpsf-intro-text { margin-bottom: 20px; }
.wcpsf-bottom-text { margin-top: 36px; }

/* Legacy: keep old WC product-grid rules for safety */
.products-grid { width: 100%; }
.products-grid ul.products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
  list-style: none; margin: 0; padding: 0;
}

/* Sidebar filter (real widgets, when added later) */
.category-filter,
.widget.woocommerce-widget-layered-nav,
.widget.widget_price_filter,
.widget.woocommerce-widget-layered-nav-filters {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.widget-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--text); font-family: 'Geologica', sans-serif; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--text2); }
.widget ul li a { color: var(--text2); transition: color .15s; }
.widget ul li a:hover { color: var(--accent); }
.widget ul li.chosen > a { color: var(--accent); font-weight: 600; }
.widget .count { font-size: 12px; color: var(--text3); margin-left: auto; }
.price_slider_wrapper { padding: 4px 0; }
.price_slider.ui-slider { background: var(--surface2); border-radius: 4px; height: 4px; border: none; margin: 10px 0; }
.price_slider .ui-slider-range { background: var(--accent); border: none; }
.price_slider .ui-slider-handle {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); top: -6px; outline: none;
}
.price_label { font-size: 13px; color: var(--text2); margin-bottom: 10px; }

.single-post-wrap { max-width: 820px; margin: 0 auto; padding: 0; }
.single-post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.post-header { margin-bottom: 24px; }
.post-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.post-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  background: var(--accent-light); color: var(--accent-text); letter-spacing: .04em;
  transition: background .15s, color .15s;
}
.post-cat svg,
.post-cat .cat-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke-width: 2.3;
}
.post-cat:hover {
  background: var(--accent);
  color: #fff;
}
.post-cat--promo {
  background: var(--red-light);
  color: var(--red-text);
}
.post-cat--promo:hover {
  background: var(--red);
  color: #fff;
}
.post-title {
  font-family: 'Geologica', sans-serif;
  font-size: 32px; font-weight: 700; line-height: 1.3; margin-bottom: 14px;
}
.post-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--text2);
}
.post-meta-item { display: flex; align-items: center; gap: 5px; }
.post-meta-item svg { width: 14px; height: 14px; color: var(--text3); }
.post-feat-img { border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; }
.post-feat-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-content { font-size: 16px; line-height: 1.8; color: var(--text); }
.post-content h2 { font-family: 'Geologica', sans-serif; font-size: 22px; font-weight: 700; margin: 28px 0 12px; }
.post-content h3 { font-family: 'Geologica', sans-serif; font-size: 18px; font-weight: 600; margin: 22px 0 10px; }
.post-content p  { margin-bottom: 16px; }
/* Lists in blog posts only */
.post-content ul,
.post-content .wp-block-list:not(ol) {
  list-style: disc outside !important;
  margin: 0 0 20px 0;
  padding-left: 26px;
}
.post-content ol,
.post-content ol.wp-block-list {
  list-style: decimal outside !important;
  margin: 0 0 20px 0;
  padding-left: 26px;
}
.post-content ul > li {
  list-style-type: disc !important;
  margin-bottom: 8px;
  line-height: 1.7;
}
.post-content ol > li {
  list-style-type: decimal !important;
  margin-bottom: 8px;
  line-height: 1.7;
}
.post-content ol ol {
  list-style-type: lower-alpha !important;
  margin: 8px 0 8px 0;
  padding-left: 22px;
}
.post-content ol ol > li {
  list-style-type: lower-alpha !important;
}
.post-content ul ul,
.post-content ol ul {
  list-style-type: circle !important;
  margin: 8px 0 8px 0;
  padding-left: 22px;
}
.post-content ul ul > li,
.post-content ol ul > li {
  list-style-type: circle !important;
}
.post-content ul ol {
  list-style-type: decimal !important;
  margin: 8px 0 8px 0;
  padding-left: 22px;
}
.post-content ul ol > li {
  list-style-type: decimal !important;
}
.post-content img { border-radius: var(--radius-sm); margin: 16px 0; }
.post-content a { color: var(--accent); }
.post-content a:hover { text-decoration: underline; }
.post-content blockquote {
  border-left: 3px solid var(--accent); padding: 12px 20px;
  background: var(--accent-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 20px 0; font-style: italic;
}

/* ── 19. Page templates ────────────────────────────────── */
.page-wrap { max-width: 900px; margin: 0 auto; padding: 24px 20px 60px; }
.page-title-wrap { margin-bottom: 24px; }
.page-title-wrap h1 {
  font-family: 'Geologica', sans-serif; font-size: 28px; font-weight: 700;
}
.entry-content { font-size: 16px; line-height: 1.7; }
.entry-content p { margin-bottom: 14px; }
.entry-content h2 { font-family: 'Geologica', sans-serif; font-size: 22px; font-weight: 700; margin: 24px 0 10px; }

/* ── Static pages (page.php) ───────────────────────────── */
.page-content { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }
.page-article {}
.page-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.page-title  { font-family: 'Geologica', sans-serif; font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--text); margin: 0; }
.page-thumbnail { border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; }
.page-thumbnail img { width: 100%; height: auto; display: block; }
.page-body { font-size: 16px; line-height: 1.8; color: var(--text); }
.page-body p  { margin-bottom: 16px; }
.page-body h2 { font-family: 'Geologica', sans-serif; font-size: 24px; font-weight: 700; margin: 32px 0 12px; color: var(--text); }
.page-body h3 { font-family: 'Geologica', sans-serif; font-size: 20px; font-weight: 600; margin: 24px 0 10px; color: var(--text); }
.page-body h4 { font-family: 'Geologica', sans-serif; font-size: 17px; font-weight: 600; margin: 20px 0 8px; }
.page-body a  { color: var(--accent); }
.page-body a:hover { text-decoration: underline; }
.page-body ul { margin: 0 0 16px 0; padding: 0; list-style: none; }
.page-body ul li { padding-left: 20px; position: relative; margin-bottom: 8px; }
.page-body ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.page-body ol { margin: 0 0 16px 0; padding: 0; list-style: none; counter-reset: page-ol; }
.page-body ol li { padding-left: 32px; position: relative; margin-bottom: 8px; counter-increment: page-ol; }
.page-body ol li::before { content: counter(page-ol); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.page-body img { border-radius: var(--radius-sm); max-width: 100%; height: auto; margin: 16px 0; }
.page-body blockquote { border-left: 4px solid var(--accent); margin: 20px 0; padding: 12px 18px; background: var(--accent-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--text2); }
.page-body blockquote p { margin: 0; }
.page-body table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 15px; }
.page-body table th, .page-body table td { padding: 10px 14px; border: 1px solid var(--border); text-align: left; }
.page-body table th { background: var(--surface2); font-weight: 600; }
.page-body table tr:nth-child(even) td { background: var(--surface); }
.page-body .wp-block-image { margin: 20px 0; }
.page-body .wp-block-image img { border-radius: var(--radius-sm); }
.page-body .wp-block-quote { border-left: 4px solid var(--accent); margin: 20px 0; padding: 12px 18px; background: var(--accent-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
@media (max-width: 680px) {
  .page-content { padding: 20px 16px 48px; }
  .page-title { font-size: 26px; }
  .page-body h2 { font-size: 20px; }
  .page-body h3 { font-size: 18px; }
}

/* ── 20. 404 / not found ───────────────────────────────── */
.error-page {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 60px 20px;
}
.error-code {
  font-family: 'Geologica', sans-serif;
  font-size: 100px; font-weight: 700; color: var(--border2); line-height: 1;
}
.error-title {
  font-family: 'Geologica', sans-serif;
  font-size: 28px; font-weight: 700; margin: 16px 0 12px;
}
.error-text { font-size: 16px; color: var(--text2); margin-bottom: 28px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: var(--accent); color: white;
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; border: none;
  transition: background .15s; cursor: pointer;
}
.btn-primary:hover { background: var(--accent-hover); }

/* ── 21. Search results ────────────────────────────────── */
.search-page-wrap  { padding-bottom: 60px; }
.search-page-title { font-family: 'Geologica', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.search-page-title em { font-style: normal; color: var(--accent); }

/* ── 22. WordPress alignment helpers ──────────────────── */
.alignnone  { margin: 0 0 16px; }
.alignleft  { float: left; margin: 0 20px 16px 0; }
.alignright { float: right; margin: 0 0 16px 20px; }
.aligncenter { display: block; margin: 0 auto 16px; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--text3); text-align: center; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto; clip-path: none; height: auto; margin: 0;
  overflow: visible; width: auto;
  background: var(--surface); padding: 10px 20px;
  top: 0; left: 0; position: fixed; z-index: 9999;
}

/* ── 23. Responsive ────────────────────────────────────── */
@media (max-width: 1100px) {
  .cats-grid     { grid-template-columns: repeat(3, 1fr); }
  .products-row  { grid-template-columns: repeat(4, 1fr); }
  .health-products .products-row { grid-template-columns: repeat(4, 1fr); }
  .footer-top    { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 1024px) {
  .cats-grid    { grid-template-columns: repeat(2, 1fr); }
  .cat-page-layout { gap: 20px; }
  .cat-sidebar { flex-basis: 230px; }
}

@media (max-width: 820px) {
  .hero                  { grid-template-columns: 1fr; }
  .hero-side             { flex-direction: row; height: 140px; }
  .hero-side-banner      { flex: 1; min-height: unset; }
  .hero-main             { height: 280px; }
  .hero-slide            { height: 280px; }
  .cats-grid             { grid-template-columns: repeat(2, 1fr); }
  .promo-strip           { grid-template-columns: 1fr; }
  .articles-grid         { grid-template-columns: 1fr 1fr; }
  .trust-inner           { grid-template-columns: repeat(2, 1fr); }
  .health-banner         { grid-template-columns: 1fr; }
  .health-stats          { flex-direction: row; flex-wrap: wrap;}
  .health-products .products-row { grid-template-columns: repeat(3, 1fr); }
  .footer-top            { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cat-page-layout { flex-direction: column; }
  /* Filter sidebar becomes a slide-in drawer on mobile */
  .cat-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 80vw; max-width: 320px;
    background: var(--surface); z-index: 1001;
    overflow-y: auto; padding: 24px 20px 40px;
    transform: translateX(-110vw); transition: transform .3s cubic-bezier(.7,0,.3,1);
    box-shadow: none;
  }
  .health-cta{
        width: 100%;
    justify-content: center;
  }
  .cat-sidebar.is-open {
    transform: translateX(0);
  }
  /* Slide from bottom (when plugin mobileDirection = "bottom") */
  #cat-filter-sidebar[data-mobile-dir="bottom"] {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%; height: 85vh;
    transform: translateY(110vh);
    border-radius: 16px 16px 0 0;
  }
  #cat-filter-sidebar[data-mobile-dir="bottom"].is-open {
    transform: translateY(0);
  }
  .filter-toggle { display: flex; }

  /* Рядок «Фільтр + лічильник»: лічильник займає решту ширини і стоїть
     по центру, а пілюлі сортування розтягуються на весь екран порівну. */
  /* Три колонки 1fr / auto / 1fr: кнопка «Фільтр» ліворуч, лічильник у
     середній колонці — а вона завжди на середині екрана, бо бічні колонки
     рівні. Пілюлі йдуть другим рядком на всі три колонки. Якщо кнопка з
     лічильником колись не влізуть, колонка кнопки розшириться сама, і
     накладання не буде. */
  .filter-sort-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px 8px;
  }
  .filter-toggle { justify-self: start; padding: 7px 14px; }
  span.cat-found-count { grid-column: 2; text-align: center; white-space: nowrap; font-size: 13px; }
  .sort-pills { grid-column: 1 / -1; flex-wrap: nowrap; gap: 8px; }
  .sort-pill  { flex: 1 1 0; min-width: 0; text-align: center; padding: 7px 8px; }

  .post-title            { font-size: 24px; }
  .nav-links li a        { padding: 0 9px; font-size: 13px; }
  .hsb-content{ padding: 15px 10px;}
  .promo-img-float {
  position: absolute;
bottom: -5px;
  right: -5px;
  height: auto;
  max-width: 55%;
}
.hsb-content {
  justify-content: flex-start;

}
.hero-btn{
  display:none;
}
.hero-content {
  pointer-events: none;
}
.hero-slide-hitbox {
  z-index: 5;
}
}

@media (max-width: 640px) {
  .hero-main             { height: 220px; }
  .hero-slide            { height: 220px; padding: 15px; }
  .hero-title            { font-size: 20px; }
  .hsb-subtitle          { display: none; }
  .cats-grid             { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card .cat-count{display:none;}
  .cat-photo img{
    object-fit: contain;
  }
  .products-row          { grid-template-columns: repeat(2, 1fr); }
  .health-products .products-row { grid-template-columns: repeat(2, 1fr); }
  .articles-grid         { grid-template-columns: 1fr; }
  .trust-inner           { grid-template-columns: 1fr; }
  .nav-links             { display: none; }
  .footer-top            { grid-template-columns: 1fr; }
  .health-banner         { padding: 24px 20px; }
  .health-title          { font-size: 20px; }
  .h-btn span:not(.h-badge) { display: none; }
  .promo-strip           { gap: 10px; }
  .arch-grid { grid-template-columns: repeat(2, 1fr); }
  /* Mobile: КАТАЛОГ button — compact with label */
  .btn-categories        { height: 40px; padding: 0 12px; width: auto; gap: 6px; border-radius: 10px; }
  .btn-categories span   { font-size: 11px; letter-spacing: .04em; display: flex; }
  .site-header .search-wrap { display: none; }

  .h-nav-wrap            { display: none; }
  /* Єдиний бічний відступ на мобільних — 10px, як в архіві товарів.
     Раніше .container мав 10px, а шапка, секції головної й футер —
     свої 20px, тож шапка виходила вужчою за контент під нею. */
  /* Нижній рядок футера: копірайт, підпис розробника й іконки оплати
     по центру, кожен рядок окремо. */
  .footer-bottom  { flex-direction: column; justify-content: center; text-align: center; }
  .footer-legal   { align-items: center; }
  .footer-pay     { justify-content: center; }

  .container,
  .header-inner,
  .hero,
  .section,
  .promo-strip,
  .health-section,
  .footer-inner,
  .page-wrap,
  .trust-inner           { padding-left: 10px; padding-right: 10px; }
  .single-post-wrap      { padding-left: 0; padding-right: 0; }

  /* Декоративна картинка в бічному банері hero та promo (right:-5px +
     поворот) при відступі 10px виступає за екран і розширює сторінку.
     clip обрізає лише це виступання по горизонталі, не чіпаючи вертикаль
     і тіні (на відміну від hidden). */
  .hero,
  .promo-strip           { overflow-x: clip; }

  /* Логотип строго по центру шапки */
  .header-inner { position: relative; }
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
  }
}

/* ============================================================
   18. Single product page
   ============================================================ */
.sp-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 0;
}
/* Стоїть саме тут, а не в мобільному блоці вище: базове правило .sp-wrap
   йде в файлі пізніше й при рівній специфічності перебило б його. */
@media (max-width: 640px) {
  .sp-wrap { padding-left: 10px; padding-right: 10px; }
}
.sp-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 40px;
}

/* --- Gallery --- */
.sp-gallery { display: flex; flex-direction: column; gap: 12px; }
.sp-main-img {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.sp-main-img .sp-photo {
  width: 92%; height: 92%;
  object-fit: contain;
  transition: transform .3s;
  display: block;
}
.sp-main-img:hover .sp-photo { transform: scale(1.05); }
.sp-badge {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px; font-weight: 600;
  z-index: 1;
}
.sp-badge-new { background: var(--accent-light); color: var(--accent); }
.sp-badge-sale { background: #fde8e8; color: #c0392b; }
.sp-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-thumb {
  width: 72px; height: 72px;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
  padding: 0;
}
.sp-thumb:hover { border-color: var(--border2); }
.sp-thumb.active { border-color: var(--accent); }
.sp-thumb img {
  width: 92%; height: 92%;
  object-fit: contain;
  display: block;
}

/* Gallery arrows (desktop hover; mobile touch handled in JS) */
.sp-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text);
  opacity: 0;
  transition: opacity .18s;
  z-index: 2;
  line-height: 0;
}
.sp-arr--prev { left: 6px; }
.sp-arr--next { right: 6px; }
.sp-main-img:hover .sp-arr { opacity: .7; }
.sp-arr:hover { opacity: 1 !important; }
@media (hover: none) { .sp-arr { display: none; } }

/* --- Info panel --- */
.sp-info { display: flex; flex-direction: column; gap: 18px; }
.sp-meta-row {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.sp-brand-link {
  font-size: 12px; font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 10px;
  background: var(--accent-light);
  border-radius: 4px;
  text-decoration: none;
}
.sp-brand-link:hover { background: var(--accent); color: #fff; }
.sp-brand-logo-link {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background: #fff;
  border-radius: 50%;
}
.sp-brand-logo-link:hover { border-color: var(--accent); }
.sp-brand-logo-corner {
  position: absolute;
  top: 12px;
  right: 14px;
}
.sp-brand-logo {
  max-height: 36px;
  max-width: 36px;
  border-radius: 50%;;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.sp-attr-brand-logo-link { display: inline-flex; align-items: center; }
.sp-attr-brand-logo { max-height: 28px; max-width: 70px; width: auto; height: auto; object-fit: contain; display: block; }
.sp-attr-brand-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.sp-attr-brand-link:hover { text-decoration: underline; }
.sp-sku { font-size: 12px; color: var(--text3); }
.sp-title {
  font-family: 'Geologica', sans-serif;
  font-size: 22px; font-weight: 500; line-height: 1.35;
  margin: 0;
}
.sp-rating-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-stars { display: flex; gap: 3px; }
.sp-star-icon { width: 18px; height: 18px; }
.sp-star-icon.filled { color: #f5a623; }
.sp-star-icon.empty { color: #d0d0d0; }
.sp-rating-num { font-size: 14px; font-weight: 600; }
.sp-rating-link {
  font-size: 13px; color: var(--text2);
  border-bottom: 1px dashed var(--border2);
  text-decoration: none;
}
.sp-rating-link:hover { color: var(--accent); border-color: var(--accent); }

/* Price block */
.sp-price-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.sp-price-row {
  display: flex; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
}
.sp-price-current {
  font-family: 'Geologica', sans-serif;
  font-size: 32px; font-weight: 600;
}
.sp-price-old {
  font-size: 18px; color: var(--text3);
  text-decoration: line-through;
}
.sp-price-save {
  font-size: 13px; font-weight: 600;
  background: #fde8e8; color: #c0392b;
  padding: 2px 10px; border-radius: 20px;
}
.sp-stock-row {
  display: flex; align-items: center;
  gap: 6px; font-size: 13px;
  color: var(--accent); font-weight: 600;
}
.sp-stock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.sp-stock-dot.out { background: #c0392b; }
.sp-stock-row:has(.sp-stock-dot.out) { color: #c0392b; }
.sp-stock-sep { color: var(--border2); margin: 0 2px; }
.sp-stock-row .sp-sku { font-weight: 400; color: var(--text3); font-size: 12px; }

/* Attributes */
.sp-attrs-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sp-attrs-block table { width: 100%; border-collapse: collapse; }
.sp-attrs-block tr:not(:last-child) td { border-bottom: 1px dashed var(--border); }
.sp-attrs-block td { padding: 10px 16px; font-size: 14px; line-height: 1.4; }
.sp-attrs-block td:first-child {
  color: var(--text2); width: 38%;
  background: var(--surface2);
}
.sp-attrs-block td:last-child { color: var(--text); font-weight: 500; }

/* Short description */
.sp-desc-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.sp-desc-text { font-size: 14px; color: var(--text2); line-height: 1.7; }
.sp-desc-text p:last-child { margin-bottom: 0; }

/* Actions */
.sp-actions-block { display: flex; flex-direction: column; gap: 10px; }
.sp-qty-cart-row { display: flex; gap: 10px; align-items: stretch; }
.sp-qty-ctrl {
  display: flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden; flex-shrink: 0;
}
.sp-qty-btn {
  width: 40px; height: 44px;
  border: none; background: none;
  font-size: 18px; cursor: pointer;
  color: var(--text2);
  transition: background .15s;
  font-family: inherit;
}
.sp-qty-btn:hover { background: var(--surface2); }
.sp-qty-input {
  width: 52px; height: 44px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font-size: 15px; font-weight: 600;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
  -moz-appearance: textfield;
}
.sp-qty-input::-webkit-inner-spin-button,
.sp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sp-btn-buy {
  flex: 1; height: 44px;
  background: var(--accent); color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background .15s;
  display: flex; align-items: center;
  justify-content: center; gap: 8px;
}
.sp-btn-buy:hover { background: var(--accent-hover); }
.sp-btn-row { display: flex; gap: 8px; }
.sp-btn-outline {
  flex: 1; height: 40px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text2);
  font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center;
  justify-content: center; gap: 6px;
}
.sp-btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.sp-btn-fav:hover { border-color: #c0392b; color: #c0392b; background: #fde8e8; }
.sp-out-of-stock {
  padding: 12px 16px;
  background: #fde8e8; color: #c0392b;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  text-align: center;
}

/* ── Delivery & Payment block ── */
.sp-delivery-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
  background: var(--surface);
}
.sp-deliv-section {
  padding: 11px 14px;
}
.sp-deliv-section + .sp-deliv-section {
  border-top: 1px solid var(--border);
}
.sp-deliv-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  margin-bottom: 7px;
}
.sp-deliv-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
}
@media (max-width: 820px) {
  .sp-deliv-list { flex-direction: column; gap: 6px; }
}
.sp-deliv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.sp-deliv-row--time {
  font-weight: 600;
  color: var(--accent-hover);
}
.sp-deliv-row--free {
  color: #15803d;
  font-weight: 500;
}
.sp-deliv-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-deliv-carrier-icon {
  height: 18px;
  width: auto;
  display: block;
  object-fit: contain;
}
.sp-deliv-row--free .sp-deliv-icon { opacity: 1; color: #16a34a; }
.sp-deliv-row em { font-style: normal;}
.sp-deliv-pay-text {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  line-height: 1.4;
}
.sp-deliv-pay-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-deliv-pay-icons img {
  height: 22px;
  width: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
  background: #fff;
  object-fit: contain;
}

/* Full description + sections */
.sp-full-desc, .sp-section {
  margin-top: 40px;
}
.sp-full-desc{
      background: #fff;
    border-radius: 10px;
    padding: 20px;
        border: 1px solid var(--border);
}
.sp-section-title {
  font-family: 'Geologica', sans-serif;
  font-size: 20px; font-weight: 600;
  margin: 0 0 20px;
}
.sp-full-desc-body {
  font-size: 15px; color: var(--text2);
  line-height: 2;
}
.sp-full-desc-body p:last-child { margin-bottom: 0; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Question modal */
.sp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sp-modal-overlay[hidden] { display: none; }
.sp-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 100%; max-width: 480px;
  padding: 28px;
}
.sp-modal-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sp-modal-title {
  font-family: 'Geologica', sans-serif;
  font-size: 17px; font-weight: 600;
  margin: 0;
}
.sp-modal-close {
  width: 32px; height: 32px;
  border: none; background: var(--surface2);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); transition: background .15s;
}
.sp-modal-close:hover { background: var(--border); }
.sp-modal-product {
  display: flex; align-items: center;
  gap: 10px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 18px;
  font-size: 13px; color: var(--text);
}
.sp-modal-img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.sp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sp-field:last-child { margin-bottom: 0; }
.sp-form-row .sp-field { margin-bottom: 0; }
.sp-field label { font-size: 13px; font-weight: 500; color: var(--text2); }
.sp-field input,
.sp-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px; font-family: inherit;
  color: var(--text); background: var(--surface);
  outline: none; transition: border-color .15s;
}
.sp-field input:focus,
.sp-field textarea:focus { border-color: var(--accent); }
.sp-field textarea { min-height: 90px; resize: vertical; }
.sp-modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 16px;
}
.sp-btn-cancel {
  height: 38px; padding: 0 18px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text2); font-size: 14px;
  font-family: inherit; cursor: pointer;
  transition: all .15s;
}
.sp-btn-cancel:hover { border-color: var(--accent); color: var(--accent); }
.sp-btn-submit {
  height: 38px; padding: 0 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background .15s;
}
.sp-btn-submit:hover { background: var(--accent-hover); }

/* Responsive */
@media (max-width: 960px) {
  .sp-grid { grid-template-columns: 360px 1fr; gap: 24px; }
}
@media (max-width: 820px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-main-img .sp-photo { width: 92%; height: 92%; }
}
@media (max-width: 560px) {
  .sp-title { font-size: 18px; }
  .sp-price-current { font-size: 26px; }
  .sp-form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   24. Blog — archive & single
   ═══════════════════════════════════════════════════════ */

/* ── Layout: 2-column (content + sidebar) ── */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
  padding-bottom: 60px;
}
.blog-main { min-width: 0; }
.single-layout {
  max-width: 820px;
  margin: 18px auto 0;
  padding-bottom: 32px;
}

/* ── Archive header ── */
.blog-archive-header { margin-bottom: 28px; }
.blog-archive-title {
  font-family: 'Geologica', sans-serif;
  font-size: 26px; font-weight: 700; margin-bottom: 8px;
}
.blog-archive-desc { font-size: 15px; color: var(--text2); margin-bottom: 0; }

/* ── Blog grid (article cards) ── */
.blog-archive-wrap {
  padding-bottom: 60px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
/* ── Порожній стан блогу ── */
.blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: var(--radius-lg, 16px);
  max-width: 580px;
  margin: 30px auto 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.blog-empty__icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent-light, #eef8f1);
  color: var(--accent, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform .25s ease, background-color .25s ease;
}
.blog-empty:hover .blog-empty__icon {
  transform: translateY(-3px) scale(1.03);
}
.blog-empty__icon svg {
  width: 38px;
  height: 38px;
  display: block;
}
.blog-empty__title {
  font-family: 'Geologica', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #1a1a18);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.blog-empty__desc {
  font-size: 15px;
  color: var(--text2, #6b6b67);
  line-height: 1.55;
  max-width: 440px;
  margin: 0 0 28px;
}
.blog-empty__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.blog-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm, 8px);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
  cursor: pointer;
}
.blog-empty__btn--primary {
  background: var(--accent, #16a34a);
  color: #fff;
  border: 1.5px solid var(--accent, #16a34a);
}
.blog-empty__btn--primary:hover {
  background: var(--accent-hover, #15803d);
  border-color: var(--accent-hover, #15803d);
  color: #fff;
  transform: translateY(-1px);
}
.blog-empty__btn--secondary {
  background: transparent;
  color: var(--text, #1a1a18);
  border: 1.5px solid var(--border2, #d1d0cc);
}
.blog-empty__btn--secondary:hover {
  border-color: var(--accent, #16a34a);
  color: var(--accent, #16a34a);
  background: var(--surface2, #f5f6f8);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .blog-empty {
    padding: 44px 18px;
    margin: 20px auto 40px;
  }
  .blog-empty__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
  }
  .blog-empty__icon svg {
    width: 32px;
    height: 32px;
  }
  .blog-empty__title {
    font-size: 19px;
  }
  .blog-empty__desc {
    font-size: 14px;
    margin-bottom: 22px;
  }
  .blog-empty__actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  .blog-empty__btn {
    width: 100%;
  }
}

/* ── Sidebar ── */
.blog-sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.blog-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
}
.blog-widget__title {
  font-family: 'Geologica', sans-serif;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 14px; color: var(--text);
}
/* Category list */
.blog-cat-list { list-style: none; margin: 0; padding: 0; }
.blog-cat-list__item + .blog-cat-list__item { border-top: 1px solid var(--border); }
.blog-cat-list__item a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 14px; color: var(--text2);
  transition: color .15s;
}
.blog-cat-list__item a:hover,
.blog-cat-list__item.is-active a { color: var(--accent); }
.blog-cat-list__count {
  font-size: 12px; color: var(--text3);
  background: var(--surface2); padding: 1px 6px; border-radius: 20px;
}
/* Recent posts */
.blog-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.blog-recent-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--text);
}
.blog-recent-item img {
  width: 52px; height: 52px; flex-shrink: 0;
  object-fit: cover; border-radius: var(--radius-sm);
}
.blog-recent-item span { display: flex; flex-direction: column; gap: 3px; }
.blog-recent-item strong { font-weight: 600; line-height: 1.4; }
.blog-recent-item time { font-size: 11px; color: var(--text3); }
.blog-recent-item:hover strong { color: var(--accent); }

/* ── Single post — post-nav ── */
.post-nav {
  display: flex; gap: 12px;
  border-top: none;
  padding-top: 0; margin-top: 20px;
}
.post-nav__prev,
.post-nav__next { flex: 1; }
.post-nav__next { text-align: right; }
.post-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--text2);
  transition: color .15s;
}
.post-nav a:hover { color: var(--accent); }
.post-nav a span {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Single post — tags ── */
.post-tags { margin-top: 20px; margin-bottom: 4px; }
.post-tags a {
  display: inline-block; margin: 0 4px 6px 0;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; color: var(--text2);
  border: 1px solid var(--border);
  transition: border-color .15s, color .15s;
}
.post-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* ── Single post — Instagram business card widget ── */
.post-insta-card {
  margin-top: 28px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-insta-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}
.post-insta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.post-insta-card__header {
  display: flex;
  align-items: center;
  gap: 18px;
}
.post-insta-card__avatar-link {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  text-decoration: none;
}
.post-insta-card__avatar-ring {
  width: 72px;
  height: 72px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-insta-card__avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
  border: 2px solid #ffffff;
  display: block;
}
.post-insta-card__avatar-badge {
  position: absolute;
  bottom: 0;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.post-insta-card__avatar-badge svg {
  width: 12px;
  height: 12px;
}
.post-insta-card__info {
  flex: 1 1 auto;
  min-width: 0;
}
.post-insta-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.post-insta-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #111827);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.post-insta-card__name:hover {
  color: #dc2743;
}
.post-insta-card__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0095f6;
}
.post-insta-card__handle {
  font-size: 13px;
  color: var(--text3, #8a8d91);
  font-weight: 500;
}
.post-insta-card__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.post-insta-card__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text, #111827);
}
.post-insta-card__stat-count {
  font-weight: 700;
  font-size: 14px;
}
.post-insta-card__stat-label {
  color: var(--text2, #65676b);
}
.post-insta-card__badge-official {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #16a34a;
  background: #f0fdf4;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.post-insta-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-block;
}
.post-insta-card__action {
  flex-shrink: 0;
}
.post-insta-card__follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff !important;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  text-decoration: none;
}
.post-insta-card__follow-btn svg {
  flex-shrink: 0;
}
.post-insta-card__bio {
  font-size: 14px;
  color: var(--text2, #4b5563);
  line-height: 1.55;
  margin: 14px 0 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-light, #f1f3f5);
}
@media (max-width: 640px) {
  .post-insta-card {
    padding: 18px;
  }
  .post-insta-card__header {
    flex-wrap: wrap;
    gap: 14px;
  }
  .post-insta-card__avatar-ring {
    width: 62px;
    height: 62px;
  }
  .post-insta-card__action {
    width: 100%;
    margin-top: 8px;
  }
  .post-insta-card__follow-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }
}

/* ── Legacy author box fallback ── */
.post-author-box {
  display: flex; align-items: flex-start; gap: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-top: 32px; background: var(--surface);
}
.post-author-box__avatar { border-radius: 50%; flex-shrink: 0; }
.post-author-box__name { font-size: 15px; font-weight: 700; display: block; margin-bottom: 6px; }
.post-author-box__bio { font-size: 14px; color: var(--text2); margin: 0; line-height: 1.6; }

/* ── Paginated post ── */
.post-pages {
  display: flex; align-items: center; gap: 8px;
  margin-top: 24px; flex-wrap: wrap; font-size: 14px;
}
.post-pages a, .post-pages span {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  color: var(--text2); font-weight: 600; transition: all .15s;
}
.post-pages a:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   25. Brands page
   ═══════════════════════════════════════════════════════ */

.brands-page-header { margin-bottom: 28px; }
.brands-page-title {
  font-family: 'Geologica', sans-serif;
  font-size: 28px; font-weight: 700; margin-bottom: 10px;
}

/* Letter filter alphabar */
.brands-alpha {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 32px;
}
.brands-alpha__item {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--border); color: var(--text2);
  transition: border-color .15s, color .15s, background .15s;
}
.brands-alpha__item:hover { border-color: var(--accent); color: var(--accent); }
.brands-alpha__item.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Letter section */
.brands-section { margin-bottom: 36px; }
.brands-section__letter {
  font-family: 'Geologica', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--accent); margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 2px solid var(--accent-light);
}

/* Brand card grid */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.brand-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 16px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow .2s, border-color .2s, transform .15s;
  text-align: center;
}
.brand-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.brand-card__logo {
  height: 60px; display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.brand-card__logo img {
  max-width: 120px; max-height: 60px;
  width: auto; height: auto; object-fit: contain;
}
.brand-card__initials {
  font-family: 'Geologica', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--accent-text); background: var(--accent-light);
  width: 56px; height: 56px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.brand-card__name {
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3;
}
.brand-card__count {
  font-size: 11px; color: var(--text3);
}
.brands-empty { font-size: 15px; color: var(--text2); padding: 40px 0; }

/* ── Single brand archive header ── */
.brand-archive-header {
  display: flex; align-items: center; gap: 28px;
  margin-bottom: 32px;
  padding: 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.brand-archive-logo {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 140px; max-width: 200px;
}
.brand-archive-logo img { max-height: 90px; width: auto; object-fit: contain; }
.brand-archive-info { flex: 1; }
.brand-archive-title {
  font-family: 'Geologica', sans-serif;
  font-size: 24px; font-weight: 700; margin-bottom: 8px;
}
.brand-archive-desc { font-size: 14px; color: var(--text2); line-height: 1.6; margin-bottom: 8px; }
.brand-archive-count {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; background: var(--accent-light); color: var(--accent-text);
}
.brand-no-products { text-align: center; padding: 60px 20px; color: var(--text2); }
.brand-no-products p { margin-bottom: 20px; font-size: 16px; }

/* ══ Responsive ══════════════════════════════════════════ */
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-archive-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .post-author-box { flex-direction: column; }
  .single-layout { margin-top: 14px; padding-bottom: 24px; }
  .single-post-card { padding: 22px 18px; border-radius: var(--radius); }
}
@media (max-width: 400px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Temporarily hidden: login button & language switcher ── */
.h-btn--login { display: none !important; }
.nav-lang     { display: none !important; }


/* ── Wishlist drawer ──────────────────────────────────────── */
#wishlist-drawer {
  position: fixed; inset: 0; z-index: 400;
  pointer-events: none; visibility: hidden;
  transition: visibility 0s .28s;
}
#wishlist-drawer.is-open {
  pointer-events: auto; visibility: visible;
  transition: visibility 0s 0s;
}
.wishlist-drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .25s;
}
#wishlist-drawer.is-open .wishlist-drawer__overlay { opacity: 1; }
.wishlist-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 100vw);
  background: var(--surface); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s;
  overflow: hidden;
}
#wishlist-drawer.is-open .wishlist-drawer__panel { transform: translateX(0); }
body.wishlist-open { overflow: hidden; }
.wishlist-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.wishlist-drawer__title { font-size: 17px; font-weight: 600; margin: 0; }
.wishlist-drawer__close {
  background: none; border: none; cursor: pointer; color: var(--text3);
  padding: 4px; display: flex; align-items: center;
}
.wishlist-drawer__close:hover { color: var(--text); }
.wishlist-drawer__body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
}
.wishlist-drawer__foot {
  padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.wishlist-drawer__empty,
.wishlist-drawer__loading {
  text-align: center; color: var(--text3); padding: 40px 0; font-size: 14px;
}
.wishlist-drawer__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.wishlist-drawer__item {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.wishlist-drawer__item:last-child { border-bottom: none; padding-bottom: 0; }
.wishlist-drawer__thumb img {
  width: 60px; height: 60px; object-fit: contain;
  border-radius: 6px; border: 1px solid var(--border);
}
.wishlist-drawer__info { flex: 1; min-width: 0; }
.wishlist-drawer__name {
  display: block; font-size: 13px; font-weight: 500; color: var(--text);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wishlist-drawer__name:hover { color: var(--accent); }
.wishlist-drawer__price { font-size: 13px; color: var(--accent); font-weight: 600; }
.wishlist-drawer__remove {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text3); padding: 6px; border-radius: 4px;
  transition: color .15s, background .15s;
}
.wishlist-drawer__remove:hover { color: var(--red, #e05); background: #fef2f2; }

/* ── Sticky buy bar (single product) ───────────────────── */
.sp-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.10);
  z-index: 300;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.sp-sticky-bar.is-visible { transform: translateY(0); }
.sp-sticky-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}
.sp-sticky-product {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.sp-sticky-img {
  width: 48px; height: 48px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.sp-sticky-title {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-sticky-price {
  font-size: 18px; font-weight: 700;
  color: var(--accent);
  white-space: nowrap; flex-shrink: 0;
}
.sp-sticky-qty { flex-shrink: 0; }
.sp-sticky-qty .sp-qty-input { width: 40px; }
@media (max-width: 820px) {
  .sp-sticky-title { display: none; }
  .sp-sticky-inner { gap: 10px; height: 56px; }
}
.pay-logo img {
    max-width: 35px;
}
.phone-loggin {
    position: relative;
}
span.phone-prefix {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}
input#billing_phone {
    padding-left: 35px;
}

/* ============================================================
   Слайдер товарів (головна). Чистий CSS scroll-snap + невеликий JS
   для стрілок. Не чіпає .products-row — ту сітку ще використовує пошук.
   ============================================================ */
.pslider {
  --gap: 14px;
  --per: 5;              /* скільки карток у вікні на десктопі */
  --edge: 8px;           /* поля під тінь крайніх карток при hover */
  position: relative;
  margin: -4px calc(-1 * var(--edge)) -24px;   /* компенсує padding треку */
}
.pslider__track {
  display: grid;
  grid-auto-flow: column;
  /* Рівно --per карток у вікні, наступна не виглядає. */
  grid-auto-columns: calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Запас довкола карток: overflow-x:auto обрізає й по вертикалі, а
     тінь картки на hover велика (0 16px 48px). */
  padding: 4px var(--edge) 24px;
}
.pslider__track::-webkit-scrollbar { display: none; }
.pslider__track > .prod-card { scroll-snap-align: start; min-width: 0; }

@media (max-width: 1100px) { .pslider { --per: 4; } }
@media (max-width: 1024px) { .health-products .pslider { --per: 3; } }

/* Стрілки — у .section-head поруч із посиланням «Всі …».
   Вигляд той самий, що в кнопок плагіна «Схожі товари». */
.section-head .section-link { margin-left: auto; }
.pslider-nav { display: flex; align-items: center; gap: 6px; margin-left: 14px; flex-shrink: 0; }
.pslider-nav.is-static { display: none; }
.pslider-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border-radius: 4px; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; cursor: pointer; line-height: 1;
  transition: background .15s, border-color .15s;
}
.pslider-arrow:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.pslider-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }


/* Телефон: стрілок немає (гортають свайпом), у вікні 2.1 картки —
   третя виглядає, а на її краю градієнт у колір фону. */
@media (max-width: 640px) {
  .pslider { --gap: 10px; --edge: 0px; margin-right: -10px; }   /* лента до краю екрана */
  .pslider__track {
    grid-auto-columns: calc((100% - 2 * var(--gap)) / 2.1);
    padding-right: 10px;
  }
  .pslider-nav { display: none; }

  /* Градієнт лежить на виглядаючій частині третьої картки: її ширина —
     0.1 картки плюс 10px виходу за гуртер і плюс проміжок. */
  .pslider::after {
    content: ''; position: absolute; right: 0; top: 4px; bottom: 24px;
    width: calc((100% - 10px - 2 * var(--gap)) / 2.1 * 0.1 + 10px + var(--gap));
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .pslider.is-end::after { opacity: 0; }   /* далі гортати нічого */
}

/* ── Mobile hero search fallback ── */
.mobile-hero-search {
  display: none;
  padding: 40px 0 0;
}
.mobile-hero-search .search-wrap {
  max-width: 100%;
}
.mobile-hero-search .search-wrap input[type="search"] {
  border-radius: var(--radius-lg, 16px) !important;
}
.mobile-hero-search .search-btn {
  border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0 !important;
}
.mobile-hero-search__input {
  caret-color: var(--accent, #16a34a);
}
@media (max-width: 768px) {
  .mobile-hero-search {
    display: block;
  }
}

/* ── Product Page Promo Strip (before footer) ── */
.sp-wrap .srp-section:last-child {
  margin-bottom: 0;
}
.sp-promo-strip {
  margin: 36px 0;
}
.sp-promo-strip + .trust-strip {
  margin-top: 0;
}
.sp-promo-strip-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
  border-radius: var(--radius-lg, 14px);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(12, 74, 110, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sp-promo-strip-inner:hover {
  box-shadow: 0 6px 24px rgba(12, 74, 110, 0.28);
}
.sp-promo-strip-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  z-index: 1;
}
.sp-promo-strip-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.sp-promo-strip-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
.sp-promo-strip-tag {
  display: inline-block;
  background: #dc2626;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.2;
}
.sp-promo-strip-title {
  font-family: 'Geologica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
  text-wrap: balance;
  text-wrap: pretty;
}
.sp-promo-strip-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
  text-wrap: balance;
  text-wrap: pretty;
}
.sp-promo-strip-right {
  flex-shrink: 0;
  z-index: 2;
}
.sp-promo-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #0369a1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(12, 74, 110, 0.16);
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.sp-promo-strip-btn:hover {
  background: #f0f9ff;
  color: #0284c7;
  transform: translateY(-1px);
}
.sp-promo-strip-btn svg {
  transition: transform .15s ease;
}
.sp-promo-strip-btn:hover svg {
  transform: translateX(3px);
}
.sp-promo-strip-hitbox {
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (max-width: 768px) {
  .sp-wrap .srp-section {
    margin: 28px 0;
  }
  .sp-promo-strip {
    margin: 24px 0;
  }
  .sp-promo-strip-inner {
    padding: 14px 16px;
    gap: 12px;
  }
  .sp-promo-strip-icon {
    width: 36px;
    height: 36px;
    color: #fff;
  }
  .sp-promo-strip-icon svg {
    width: 18px;
    height: 18px;
  }
  .sp-promo-strip-text {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .sp-promo-strip-tag {
    display: none !important;
  }
  .sp-promo-strip-title {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    text-wrap: balance;
    text-wrap: pretty;
  }
  .sp-promo-strip-sub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    text-wrap: balance;
    text-wrap: pretty;
  }
  .sp-promo-strip-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media (max-width: 580px) {
  .sp-promo-strip-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .sp-promo-strip-left {
    align-items: flex-start;
  }
  .sp-promo-strip-right {
    width: 100%;
  }
  .sp-promo-strip-btn {
    width: 100%;
    justify-content: center;
  }
}


/* --- woocommerce.css --- */
/* ════════════════════════════════════════════════════════
   Eurosmak — woocommerce.css
   WooCommerce-specific overrides on top of main.css
   ════════════════════════════════════════════════════════ */

/* ── Reset WooCommerce defaults ─────────────────────────── */
.woocommerce-page .woocommerce,
.woocommerce                           { max-width: 100%; }

/* ── Checkout: WC-секція доставки прихована — НП UI рендериться після billing-форми ─── */
.woocommerce-shipping-fields           { display: none !important; }

/* ── Prevent grid-item overflow from subcategory tiles ──── */
/* WooCommerce subcategory <li> images have explicit width attrs;
   without min-width:0 the grid cell won't shrink below that width. */
.arch-grid > * { min-width: 0; }
.arch-grid li.product-category img { width: 100%; height: auto; }
.woocommerce form .form-row label      { font-size: 14px; color: var(--text2); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea   {
  background: var(--field);
  border: 1.5px solid transparent; border-radius: 10px;
  font-family: 'Nunito', sans-serif; font-size: 15px; padding: 13px 15px;
  transition: border-color .2s, background .2s; width: 100%;
}
.woocommerce form .form-row input.input-text:focus { background: #fff; border-color: var(--accent); outline: none; }

/* ── Sale flash ─────────────────────────────────────────── */
.woocommerce span.onsale,
.wc-sale-badge {
  background: var(--red) !important; color: white !important;
  font-size: 11px !important; font-weight: 700 !important;
  border-radius: 4px !important; min-width: auto !important;
  padding: 2px 7px !important; line-height: 1.5 !important;
  top: 8px !important; left: 8px !important;
}

/* ── Product loop on category page ─────────────────────── */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex !important; flex-direction: column;
  margin: 0 !important; padding: 0 !important;
  float: none !important;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.woocommerce ul.products li.product a img {
  width: 100% !important; aspect-ratio: 1; object-fit: contain;
  padding: 16px; border-bottom: 1px solid var(--border);
  background: var(--surface2); margin: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Nunito', sans-serif; font-size: 13px; line-height: 1.4; padding: 0 !important;
  color: var(--text);
}
.woocommerce ul.products li.product .price {
  font-family: 'Geologica', sans-serif; font-size: 16px; font-weight: 600; color: var(--text);
  display: block; margin: 6px 0 10px;
}
.woocommerce ul.products li.product .price del      { color: var(--text3); font-size: 12px; font-weight: 400; }
.woocommerce ul.products li.product .price ins      { color: var(--red); text-decoration: none; }
.woocommerce ul.products li.product a.wc-forward,
.woocommerce ul.products li.product .button.add_to_cart_button {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; height: 34px;
  background: var(--accent) !important; color: white !important;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: none;
  transition: background .15s; font-family: inherit;
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover { background: var(--accent-hover) !important; }
.woocommerce ul.products li.product .button.loading { opacity: .6; pointer-events: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1; }
.woocommerce ul.products li.product .product-inner,
.woocommerce ul.products li.product .entry-summary { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }

/* ── Sorting ─────────────────────────────────────────────── */
.woocommerce .woocommerce-ordering { margin: 0; float: none; }
.woocommerce .woocommerce-ordering select {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 30px 7px 12px; font-family: 'Nunito', sans-serif; font-size: 13px;
  background: var(--surface); height: 36px; appearance: none; outline: none;
}
.woocommerce .woocommerce-result-count { font-size: 13px; color: var(--text2); margin: 7px 0; }

/* ── Pagination ──────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; list-style: none; margin: 24px 0; padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--border); color: var(--text2);
  transition: all .15s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--accent); color: var(--accent); }
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--accent); border-color: var(--accent); color: white;
}

/* ── Single product page ──────────────────────────────────── */
.single-product div.product {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 480px 1fr; gap: 36px; align-items: start;
}
.single-product .woocommerce-product-gallery {
  position: sticky; top: 130px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; padding: 20px;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper img {
  width: 70%; margin: 0 auto; object-fit: contain; aspect-ratio: 1;
}
.single-product .woocommerce-product-gallery__trigger { display: none; } /* handled by Fancybox */
.single-product .summary.entry-summary {
  padding: 0;
}
.single-product .product_title {
  font-family: 'Geologica', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3;
  margin-bottom: 10px; color: var(--text);
}
.single-product .woocommerce-product-rating { margin-bottom: 14px; }
.single-product .star-rating {
  color: #f59e0b !important; font-size: 14px;
}
.single-product .star-rating::before { color: var(--border2) !important; }
.single-product .price {
  font-family: 'Geologica', sans-serif; font-size: 28px; font-weight: 700; color: var(--text);
  display: block; margin-bottom: 16px;
}
.single-product .price del    { color: var(--text3); font-size: 18px; font-weight: 400; }
.single-product .price ins    { color: var(--red); text-decoration: none; }
.single-product .woocommerce-variation-price .price { font-size: 24px; }
.single-product .cart { margin-top: 20px; }
.single-product form.cart .quantity input {
  width: 70px; height: 44px; text-align: center; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 16px; font-weight: 600;
  -moz-appearance: textfield; outline: none;
}
.single-product form.cart .quantity input:focus { border-color: var(--accent); }
.single-product form.cart button.single_add_to_cart_button {
  height: 44px; padding: 0 32px; background: var(--accent); color: white;
  border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700;
  font-family: 'Nunito', sans-serif; transition: background .15s; cursor: pointer;
}
.single-product form.cart button.single_add_to_cart_button:hover { background: var(--accent-hover); }
.single-product .woocommerce-tabs .tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--border); list-style: none; padding: 0; margin: 28px 0 20px; flex-wrap: wrap;
}
.single-product .woocommerce-tabs .tabs li a {
  display: block; padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--text2);
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.single-product .woocommerce-tabs .tabs li a:hover { color: var(--text); }
.single-product .woocommerce-tabs .tabs li.active a { color: var(--accent); border-bottom-color: var(--accent); }
.single-product .woocommerce-Tabs-panel { padding: 0; }
.woocommerce-product-details__short-description { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 16px; }

/* ════════════════════════════════════════════════════════════
   CHECKOUT — двоколонковий макет
   ════════════════════════════════════════════════════════════ */

/* Розширюємо вузький page-content (860px) для сторінки чекауту */
.woocommerce-checkout .page-content {
  max-width: 1280px;
}

/* Головний flex-контейнер: ліво = дані, право = замовлення */
form.woocommerce-checkout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  /* wrap потрібен для блоку помилок нижче: без нього він став би
     третьою колонкою й розчавив дві половини форми */
  flex-wrap: wrap;
}

/* Помилки валідації.
   WooCommerce вставляє їх ЧЕРЕЗ prepend всередину form.checkout, тож у
   flex-контейнері вони автоматично ставали третьою колонкою — звідси
   зламана верстка. Розтягуємо на всю ширину й піднімаємо нагору через
   order, щоб не залежати від того, куди саме WooCommerce їх вставить. */
form.woocommerce-checkout > .woocommerce-NoticeGroup,
form.woocommerce-checkout > .woocommerce-error,
form.woocommerce-checkout > .woocommerce-message,
form.woocommerce-checkout > .woocommerce-info,
form.woocommerce-checkout > ul.woocommerce-error {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  order: -1;
  margin: 0 0 24px;
  box-sizing: border-box;
}

/* Список помилок усередині блоку — без маркерів і зайвих відступів,
   інакше тема додає крапки й лівий padding від загальних стилів списків. */
form.woocommerce-checkout .woocommerce-error {
  list-style: none;
  padding-left: 16px;
}
form.woocommerce-checkout .woocommerce-error li {
  padding-left: 0;
  margin: 0 0 4px;
}
form.woocommerce-checkout .woocommerce-error li::before {
  display: none;
}
#customer_details {
  flex: 0 0 calc(50% - 16px);
  min-width: 0;
}
#order_review {
  flex: 0 0 calc(50% - 16px);
  position: sticky;
  top: 130px;
}

/* Заголовки кроків */
#customer_details > h3,
#order_review    > h3 {
  font-family: 'Geologica', sans-serif;
  font-size: 18px; font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  color: var(--text);
}
/* Прибираємо дефолтний WC-заголовок billing (він вже є у form-checkout.php) */
.woocommerce-billing-fields > h3 { display: none; }

/* Billing-поля адреси/email не потрібні (доставка через НП, контакт — телефон) */
#billing_country_field, #billing_address_1_field, #billing_address_2_field,
#billing_city_field, #billing_state_field, #billing_postcode_field,
#billing_email_field { display: none !important; }

/* ── Білінг-поля у flex-рядки ─────────────────────────────── */
.woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* Ім'я + прізвище поряд */
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last {
  flex: 1 1 0;
  min-width: 0;
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
  width: auto;
}
/* Повна ширина */
.woocommerce-billing-fields__field-wrapper .form-row-wide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
}
/* label + input */
.woocommerce-billing-fields__field-wrapper .form-row label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 5px; }
.woocommerce-billing-fields__field-wrapper .form-row input.input-text {
  height: auto; padding: 13px 15px; font-size: 15px; width: 100%;
  background: var(--field);
  border: 1.5px solid transparent; border-radius: 10px;
  font-family: 'Nunito', sans-serif; transition: border-color .2s, background .2s; box-sizing: border-box;
}
.woocommerce-billing-fields__field-wrapper .form-row input.input-text:focus { background: #fff; border-color: var(--accent); outline: none; }

/* ── Методи оплати — кастомні radio ──────────────────────── */
#payment {
  background: none;
  padding: 0;
  border-radius: 0;
}
.wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.wc_payment_method { margin: 0; padding: 0; }

/* Список товарів у замовленні */
.woocommerce-checkout-review-order__list { list-style: none; margin: 0 0 16px; padding: 0 !important; }

/* Прибираємо кульки ::before з page-body ul li на чекауті */
.woocommerce-checkout .page-body ul li::before,
.woocommerce-checkout .page-body ol li::before { display: none; }
.woocommerce-checkout .page-body ul li,
.woocommerce-checkout .page-body ol li { padding-left: 0; }

/* Прихований нативний radio */
.wc_payment_method input[type="radio"].input-radio {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
/* Картка методу */
.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text);
  transition: border-color .2s, background .2s;
  position: relative;
}
/* Кастомний кружечок */
.wc_payment_method > label::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 2px solid var(--border2);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color .2s;
}
/* Активний стан */
.wc_payment_method input[type="radio"]:checked + label {
  border-color: var(--accent);
  background: var(--accent-light);
}
.wc_payment_method input[type="radio"]:checked + label::before {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 40%, transparent 45%);
}
/* Вміст payment box (деталі методу) */
.payment_box {
  font-size: 13px; color: var(--text2);
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-top: -2px;
}
.payment_box p { margin: 0; }

/* ── Кастомні чекбокси (.custom-checkbox) ────────────────── */
.custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  user-select: none;
}
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.custom-checkbox .checkmark {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 2px solid var(--border2);
  border-radius: 4px;
  background: var(--surface);
  margin-top: 2px;
  position: relative;
  transition: border-color .2s, background .2s;
}
.custom-checkbox input:checked ~ .checkmark {
  background: var(--accent);
  border-color: var(--accent);
}
.custom-checkbox input:checked ~ .checkmark::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: 2px solid white;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.custom-checkbox a { color: var(--accent); }
/* Кнопка submit */
#place_order {
  width: 100%;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  letter-spacing: -.005em;
}
/* Чекбокси перед кнопкою */
#payment .form-row.validate-required,
#payment .form-row { margin: 0 0 10px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  form.woocommerce-checkout {
    flex-direction: column;
  }
  #order_review {
    flex: none;
    width: 100%;
    position: static;
  }
}
@media (max-width: 560px) {
  .woocommerce-billing-fields__field-wrapper .form-row-first,
  .woocommerce-billing-fields__field-wrapper .form-row-last {
    flex: 0 0 100%;
  }
}

/* ── Cart & checkout ─────────────────────────────────────── */
.woocommerce-cart table.cart { border-collapse: collapse; width: 100%; font-size: 14px; }
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.woocommerce-cart table.cart th { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-thumbnail img { border-radius: var(--radius-sm); width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--border); }
.woocommerce button.button:not(.apply_coupon_button),
.woocommerce a.button {
  background: var(--accent) !important; color: white !important; border: none;
  padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  font-family: 'Nunito', sans-serif; transition: background .15s; cursor: pointer !important;
}
.woocommerce button.button:not(.apply_coupon_button):hover,
.woocommerce a.button:hover { background: var(--accent-hover) !important; }
.woocommerce button.button.alt { background: #e0342b !important; }
.woocommerce button.button.alt:hover { background: #c02a22 !important; }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-sm); padding: 14px 18px;
  border-left: 4px solid var(--accent); background: var(--accent-light);
  color: var(--text); font-size: 14px; display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; list-style: none;
}
.woocommerce-error { border-left-color: var(--red); background: var(--red-light); }

/* ── Related products ────────────────────────────────────── */
.related.products > h2,
.upsells.products > h2 {
  font-family: 'Geologica', sans-serif; font-size: 20px; font-weight: 600; margin-bottom: 16px;
}
.related ul.products { grid-template-columns: repeat(4, 1fr) !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 820px) {
  .single-product div.product { grid-template-columns: 1fr; }
  .single-product .woocommerce-product-gallery { position: static; }
  .woocommerce ul.products, .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products, .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Нова Пошта: порядок блоків ────────────────────────────
   У np-data-sync 3.1.0 блок «Популярні» переїхав ПІСЛЯ поля міста —
   у 3.0.0 він стояв перед ним. Повертаємо звичний порядок через
   flex-order, а не правкою плагіна: так це переживе його оновлення.
   .np-flex у плагіні — flex-column, тож order працює напряму. */
.np-flex .np-popular-cities { order: -1; }

/* Заголовок «Популярні:» у 3.1.0 втратив відступ під собою,
   через що кнопки міст злипались із полем вводу. */
.np-popular-cities label { margin-bottom: 8px; }

/* ── Сторінка «Дякуємо»: склад замовлення ──────────────────
   Розкриття анімуємо через grid-template-rows 0fr→1fr, а не max-height:
   не треба вгадувати висоту, і список із трьох чи з тридцяти позицій
   поводиться однаково. */
.thnk-items {
  border-top: 1px dashed #ccc;
  margin-top: 4px;
  padding-top: 8px;
}
.thnk-items__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 8px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-weight: 500; color: inherit; text-align: left;
}
.thnk-items__toggle:hover { color: var(--accent, #16a34a); }
.thnk-items__chevron { display: inline-flex; transition: transform .25s ease; flex-shrink: 0; }
.thnk-items[data-open="1"] .thnk-items__chevron { transform: rotate(180deg); }

.thnk-items__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.thnk-items[data-open="1"] .thnk-items__panel { grid-template-rows: 1fr; }
.thnk-items__inner { overflow: hidden; min-height: 0; }

.thnk-item {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; font-size: 13px; line-height: 1.35;
  border-bottom: 1px dashed #d9d9d9;
}
.thnk-item:last-child { border-bottom: 0; }
.thnk-item__qty { color: #6b7280; margin-left: 4px; white-space: nowrap; }
.thnk-item__sum { white-space: nowrap; }
.thnk-item--total { font-weight: 600; }

/* Без JS панель має лишатись доступною, а не зникнути назавжди. */
.no-js .thnk-items__panel { grid-template-rows: 1fr; }

/* ── Сторінка «Дякуємо»: дві колонки ───────────────────────
   Ліворуч — підсумок замовлення, праворуч — реквізити (якщо шлюз їх дає).
   Коли реквізитів немає, класу --two немає, і єдина колонка лишається
   по центру, як було раніше. */
.thnk-cols {
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.thnk-main { flex: 1 1 340px; max-width: 500px; }
.thnk-cols--two > .thnk-side { flex: 1 1 340px; max-width: 520px; }
.thnk-main .order_details { margin: 0; max-width: 100%; }

/* Заголовок тепер усередині колонки — центруємо по ній, а не по сторінці. */
.thnk-main .thnk-page-header {
  text-align: center; margin: 0 0 6px;
}
.thnk-main .thnk-page-sub-header {
  text-align: center; margin: 0 0 18px; color: var(--text2, #6b7280);
  font-size: 14px; line-height: 1.45;
}
.thnk-side .eup-req { margin-top: 0; }

@media (max-width: 860px) {
  .thnk-cols { flex-direction: column; align-items: stretch; }
  .thnk-main,
  .thnk-cols--two > .thnk-side { max-width: 100%; }
}

/* Копіювання IBAN */
.eup-req__copy { position: relative; user-select: all; }
.eup-req__copy.is-copied { outline: 1px solid var(--accent, #16a34a); }
.eup-req__copy[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #1d2327; color: #fff;
  font-size: 11px; line-height: 1; white-space: nowrap;
  padding: 5px 8px; border-radius: 4px; pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   Сторінка «Дякуємо»: вертикальне центрування
   ────────────────────────────────────────────────────────────
   Заголовок сторінки тут прихований (page.php), тож контент
   починався одразу під шапкою — притискався до верху екрана,
   тоді як знизу лишалася порожнеча. Робимо блок центрованим
   по вертикалі з однаковими відступами зверху й знизу.        */
.woocommerce-order-received .page-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Мінімум — щоб було де центрувати; 100vh мінус приблизна
     висота шапки та підвалу. Якщо контент вищий — блок просто
     росте, центрування не заважає.                            */
  min-height: calc(100vh - 420px);
  padding-top: clamp(32px, 6vh, 72px);
  padding-bottom: clamp(32px, 6vh, 72px);
}

@media (max-width: 768px) {
  .woocommerce-order-received .page-content {
    min-height: 0;
    padding-top: clamp(24px, 4vh, 40px);
    padding-bottom: clamp(24px, 4vh, 40px);
  }
}


/* ═══════════════════════════════════════════════════════════
   ЧЕКАУТ — візуал за прототипом smak24-checkout.html
   Змінюється лише оформлення: розмітка й логіка не чіпались.
   Кольори — з токенів теми, а не з прототипу, щоб сторінка не
   випадала зі стилю решти сайту.
   ═══════════════════════════════════════════════════════════ */

/* ── Колонки 60/40 ─────────────────────────────────────────
   У прототипі права колонка зафіксована на 420px — на широких
   екранах це розтягує ліву частину непропорційно.            */
/* Фон сторінки: --bg теми (#f6f6f6) майже збігається з --field (#f5f6f8),
   через що поля вводу зливалися з тлом. У прототипі сторінка світліша. */
body.woocommerce-checkout { background: var(--page); }

@media (min-width: 1081px) {
  form.woocommerce-checkout { gap: 32px; }
  #customer_details { flex: 0 0 calc(60% - 16px); }
  #order_review     { flex: 0 0 calc(40% - 16px); top: 96px; }
}

/* ── Кроки: номер у кружку + лінія-конектор ────────────────
   Крок 1 — заголовок #customer_details > h3.
   Крок 2 — заголовок .np-row > h3 (його друкує плагін НП,
   лежить усередині billing-полів, а не прямим нащадком).     */
#customer_details { position: relative; padding-left: 52px; }
#customer_details::before {
  content: ''; position: absolute;
  left: 17px; top: 40px; bottom: 20px;
  width: 2px; background: var(--border);
}
#customer_details > h3,
#customer_details .np-row > h3 {
  font-family: 'Geologica', sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  border-bottom: none; padding: 4px 0 0; margin: 0 0 22px;
  position: relative; color: var(--text);
}
#customer_details > h3::before,
#customer_details .np-row > h3::before {
  position: absolute; left: -52px; top: -4px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  box-shadow: 0 0 0 4px var(--bg);
}
#customer_details > h3::before        { content: '1'; }
#customer_details .np-row > h3::before { content: '2'; }
.np-row { margin-top: 34px; }

/* ── Поля вводу ────────────────────────────────────────────── */
.woocommerce-checkout .form-row label:not(.custom-checkbox),
.woocommerce-checkout .np-select-wrap > label,
.woocommerce-checkout .np-field > label {
  font-size: 13px; font-weight: 600; color: var(--text2);
  margin-bottom: 7px; display: block;
}
.woocommerce-checkout .required { color: #e0342b; text-decoration: none; }
.woocommerce-checkout .input-text,
.woocommerce-checkout .np-input-container input,
.woocommerce-checkout .np-field input {
  background: var(--field); border: 1.5px solid transparent;
  border-radius: 10px; padding: 13px 15px;
  font-size: 15px; width: 100%;
  transition: border-color .15s, background .15s;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout .np-input-container input:focus,
.woocommerce-checkout .np-field input:focus {
  outline: none; background: #fff; border-color: var(--accent);
}

/* ── Чипи міст ─────────────────────────────────────────────── */
.np-popular-cities > label {
  font-size: 13px; font-weight: 600; color: var(--text3);
}
#np-popular { display: flex; flex-wrap: wrap; gap: 8px; }
.np-pop-btn {
  padding: 9px 16px; border-radius: 8px;
  background: #fff; border: 1.5px solid var(--line-soft);
  font-size: 14px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .15s;
}
.np-pop-btn:hover  { border-color: var(--accent); color: var(--accent); }
.np-pop-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Перемикач адресної доставки ───────────────────────────── */
.np-address-toggle { padding: 14px 0 6px; }
.np-address-toggle label {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; font-weight: 500; cursor: pointer; margin: 0;
}
.np-address-toggle input[type=checkbox] {
  appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin: 0;
  border: 1.5px solid #c8ccd3; border-radius: 5px; background: #fff;
  cursor: pointer; position: relative; transition: all .15s;
}
.np-address-toggle input[type=checkbox]:checked {
  background: var(--accent); border-color: var(--accent);
}
.np-address-toggle input[type=checkbox]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ── Права колонка: картка ─────────────────────────────────── */
#order_review {
  background: #fff; border-radius: 16px; padding: 0;
  box-shadow: 0 1px 3px rgba(20,25,35,.06), 0 12px 32px -8px rgba(20,25,35,.10);
  overflow: hidden;
}
#order_review > h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  padding: 20px 24px 16px; margin: 0;
  border-bottom: 1px solid var(--border); border-radius: 0;
}
#order_review > h3::before, #order_review > h3::after { content: none; }
.woocommerce-checkout-review-order-table { padding: 0 24px; }

/* Купон */
.woocommerce-coupon-block {
  display: flex; flex-direction: column; gap: 8px;
  /* .woocommerce-checkout-review-order-table має padding 0 24px —
     виносимо блок на всю ширину картки, як .coupon у прототипі. */
  margin: 0 -24px !important; padding: 18px 24px;
  border-top: 1px solid var(--line-soft);
}
.woocommerce-coupon-fields {
  display: flex; gap: 10px; width: 100%;
}
.woocommerce-coupon-block input.input-text,
.woocommerce-coupon-fields input.input-text {
  flex: 1; min-width: 0; height: auto;
  border: 1.5px solid transparent;
  background: var(--field);
  border-radius: 9px; padding: 11px 14px; font-size: 14px;
  transition: border-color .15s, background .15s;
}
.woocommerce-coupon-block input.input-text:focus,
.woocommerce-coupon-fields input.input-text:focus {
  outline: none; background: #fff; border-color: var(--accent);
}
.woocommerce-coupon-block .apply_coupon_button,
.woocommerce-coupon-fields .apply_coupon_button {
  padding: 11px 20px; border-radius: 9px; flex-shrink: 0;
  background: transparent; border: 1.5px solid var(--accent);
  color: var(--green-dark); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.woocommerce-coupon-block .apply_coupon_button:hover,
.woocommerce-coupon-fields .apply_coupon_button:hover {
  background: var(--accent); color: #fff;
}
.woocommerce-coupon-block .apply_coupon_button:disabled,
.woocommerce-coupon-fields .apply_coupon_button:disabled {
  opacity: .6; cursor: not-allowed;
}
.coupon-inline-notice {
  font-size: 13px; line-height: 1.4; padding: 8px 12px;
  border-radius: 8px; display: none;
}
.coupon-inline-notice.notice-error {
  display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
}
.coupon-inline-notice.notice-success {
  display: block; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;
}

/* Знижка за промокодом */
.review-total-discount .value {
  color: var(--green-dark, #15803d);
}
.review-total-discount .woocommerce-remove-coupon {
  margin-left: 8px; color: #dc2626; font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.review-total-discount .woocommerce-remove-coupon:hover {
  text-decoration: underline;
}

/* Підсумки */
.woocommerce-checkout-review-order__totals { padding: 4px 0 16px; }
.review-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; font-size: 14.5px; color: var(--text2);
}
.review-total .value { font-weight: 600; color: var(--text); }
.review-total.review-total-order-total {
  padding: 18px 0 4px; margin-top: 8px; border-top: 2px solid var(--text);
}
.review-total.review-total-order-total .label {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
}
.review-total.review-total-order-total .value {
  font-size: 24px; font-weight: 800; letter-spacing: -.03em;
  color: var(--green-dark); line-height: 1;
}

/* Прогрес до знижки — як .progress у прототипі */
.vol-discount {
  padding: 15px 17px;
  background: var(--green-tint); border-radius: 11px;
}
.vol-discount__next { font-size: 13.5px; font-weight: 600; color: var(--text2); margin-bottom: 11px; }
.vol-discount__next b { color: var(--green-dark); font-weight: 800; }
.vol-discount__bar { height: 6px; background: #d5e9dd; border-radius: 3px; }
.vol-discount__fill { background: var(--accent); border-radius: 3px; height: 100%; display: block; }

/* Згоди перед кнопкою — блок .consents у прототипі */
#payment .form-row.validate-required,
#payment > .form-row { margin: 0; }
#payment .custom-checkbox { font-size: 12px; color: var(--text2); padding: 7px 0; }
#payment .custom-checkbox .checkmark { margin-top: 1px; }

/* ── Способи оплати ────────────────────────────────────────── */
#payment { background: transparent; padding: 0 24px 6px; border-radius: 0; }
#order_review .payment-title {
  font-size: 13px; font-weight: 700; color: var(--text3);
  margin: 10px 24px 12px;
}
#payment ul.payment_methods { padding: 0; margin: 0; border: none; list-style: none; }
#payment ul.payment_methods li.wc_payment_method {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 0; margin: 0 0 9px;
  border-radius: 11px; background: var(--field);
  border: 1.5px solid transparent; cursor: pointer; transition: all .15s;
}
#payment ul.payment_methods li.wc_payment_method:hover { background: var(--field-hover); }
/* Обраний спосіб — .pay-opt.on у прототипі. WooCommerce не вішає клас
   на <li>, тож спираємось на стан самого radio. */
#payment ul.payment_methods li.wc_payment_method:has(input:checked) {
  background: var(--green-tint); border-color: var(--accent);
}
#payment ul.payment_methods li input[type=radio] {
  appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin: 0;
  border: 2px solid #c3c8d0; border-radius: 50%;
  cursor: pointer; transition: all .15s;
}
#payment ul.payment_methods li input[type=radio]:checked {
  border-color: var(--accent); border-width: 6px;
}
#payment ul.payment_methods li label {
  flex: 1; margin: 0; font-size: 14.5px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
}
#payment .payment_box {
  flex-basis: 100%; background: transparent; margin: -8px 0 0; border: 0;
  padding: 0 16px 14px 43px;           /* відступи; зліва — під текстом назви методу */
  font-size: 13px; color: #45453f;     /* темніше за --text2, щоб читалось */
}
/* Обраний спосіб: без зеленої рамки (фон-підсвітка лишається) */
#payment ul.payment_methods li.wc_payment_method:has(input:checked) { border-color: transparent; }
#payment .wc_payment_method input[type="radio"]:checked + label { border-color: transparent; }
#payment .payment_box::before { content: none; }

/* ── Згоди + кнопка ────────────────────────────────────────── */
#payment .form-row.place-order { padding: 8px 24px 24px; margin: 0; }
#payment .place-order .custom-checkbox {
  font-size: 12px; color: var(--text2);
  padding: 8px 0; margin: 0;
}
#payment #place_order {
  width: 100%; background: #e0342b; color: #fff; border: none;
  font-size: 16px; font-weight: 800; letter-spacing: -.005em;
  padding: 18px; border-radius: 12px; margin-top: 8px;
  box-shadow: 0 4px 14px -3px rgba(224,52,43,.45);
  transition: background .15s, transform .08s, box-shadow .15s;
}
#payment #place_order:hover {
  background: #c02a22; box-shadow: 0 6px 18px -3px rgba(224,52,43,.55);
}
#payment #place_order:active { transform: translateY(1px); }

.checkout-cta-note {
  text-align: center; font-size: 12.5px; color: var(--text3);
  margin-top: 11px; line-height: 1.45;
}

@media (max-width: 1080px) {
  #customer_details { padding-left: 46px; }
  #customer_details > h3::before,
  #customer_details .np-row > h3::before { left: -46px; }
  #customer_details::before { left: 14px; }
}

@media (max-width: 640px) {
  /* Відступ ліворуч віддано під кружки кроків. Без такого ж відступу
     праворуч поля виглядали зсунутими. Дзеркалимо його й трохи
     зменшуємо кружок, щоб форма не стала завузькою. */
  #customer_details { padding-left: 40px; padding-right: 40px; }
  #customer_details > h3::before,
  #customer_details .np-row > h3::before {
    left: -40px; width: 32px; height: 32px; font-size: 15px;
  }
  #customer_details::before { left: 15px; }
}

/* Логотип платіжного методу — інлайнова картинка приходить у власному
   розмірі, тож обмежуємо її явно. */
#checkout_plata_logo,
.payment_method_mono_gateway img {
  width: 80px !important;
  height: auto;
}

/* Рядок товару: лічильник і кнопка видалення в один ряд.
   Кнопка стоїть навпроти лічильника, а не поверх ціни (як у прототипі). */
.checkout-review-order-item { align-items: stretch; }
.checkout-review-order-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.checkout-review-order-item .item-details {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.checkout-review-order-item .item-details .co-qty { margin-top: auto; }
.checkout-review-order-item .item-subtotal { height: auto; }
.checkout-review-order-item .co-remove {
  margin-top: auto;
  /* вирівнюємо по центру з лічильником: у нього висота 30px, у кнопки 23px */
  margin-bottom: 3px;
}

@media (max-width: 640px) {
  /* Назва товару — максимум два рядки, далі трикрапка. */
  .checkout-review-order-item .item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- cart.css --- */
/* ═══════════════════════════════════════════════════════
   Cart Drawer — eurosmak
   ═══════════════════════════════════════════════════════ */

/* Hide WC "View Cart" anchor injected by add-to-cart.min.js */
a.added_to_cart.wc-forward { display: none !important; }

/* ── Drawer wrapper (covers full screen, pointer reset) ── */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s .35s;
}
.cart-drawer.is-open {
  pointer-events: all;
  visibility: visible;
  transition: visibility 0s 0s;
}

/* ── Overlay / backdrop ──────────────────────────────── */
.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background .35s ease;
  cursor: pointer;
}
.cart-drawer.is-open .cart-drawer__overlay {
  background: rgba(0, 0, 0, 0.45);
}

/* ── Slide panel ─────────────────────────────────────── */
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 390px;
  max-width: 100vw;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.14);
  z-index: 1;
  will-change: transform;
}
.cart-drawer.is-open .cart-drawer__panel {
  transform: translateX(0);
}

/* ── Header ──────────────────────────────────────────── */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.cart-drawer__title {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--text, #111);
  margin: 0;
}
.cart-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-muted, #777);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color .18s, background .18s;
  margin: -6px;
}
.cart-drawer__close:hover {
  color: var(--red, #e53e3e);
  background: rgba(229, 62, 62, 0.09);
}

/* ── Body (scrollable) ───────────────────────────────── */
.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 16px 8px;
  overscroll-behavior: contain;
  position: relative;
  min-height: 100px;
}

/* Loading spinner overlay */
.cart-drawer__body.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.cart-drawer__body.is-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid var(--border, #e5e7eb);
  border-top-color: var(--red, #e53e3e);
  border-radius: 50%;
  animation: cart-spin .7s linear infinite;
  z-index: 3;
}
@keyframes cart-spin {
  to { transform: rotate(360deg); }
}

/* ── Footer ──────────────────────────────────────────── */
.cart-drawer__foot {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  transition: opacity .2s;
}
.cart-drawer__foot.is-updating {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Cart Item ───────────────────────────────────────── */
.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}
.cart-item:last-child {
  border-bottom: none;
}
.cart-item.removing {
  opacity: 0;
  transform: translateX(24px);
}

/* thumbnail */
.cart-item__img-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg, #f3f3f3);
  display: block;
  text-decoration: none;
}
.cart-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}
.cart-item__img-wrap:hover .cart-item__img {
  transform: scale(1.04);
}

/* info column */
.cart-item__info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-item__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #111);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  transition: color .18s;
}
.cart-item__name:hover {
  color: var(--red, #e53e3e);
}

/* meta row: qty + price */
.cart-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* qty controls */
.cart-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}
.cart-qty-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 28px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: var(--text, #222);
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.cart-qty-btn:hover:not(:disabled) {
  background: var(--border, #e5e7eb);
  color: var(--red, #e53e3e);
}
.cart-qty-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.cart-qty-val {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111);
  padding: 0 3px;
  user-select: none;
}

/* price */
.cart-item__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--red, #e53e3e);
  white-space: nowrap;
}
.cart-item__price ins {
  text-decoration: none;
}

/* remove button */
.cart-item__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #bbb);
  padding: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .18s, background .18s;
  align-self: center;
}
.cart-item__remove:hover {
  color: var(--red, #e53e3e);
  background: rgba(229, 62, 62, 0.09);
}

/* ── Footer elements ─────────────────────────────────── */
.cart-foot-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--text, #111);
}
.cart-foot-total strong {
  font-size: 19px;
  font-weight: 700;
  color: var(--red, #e53e3e);
}
.cart-foot-total strong .woocommerce-Price-amount {
  color: inherit;
}

.cart-foot-checkout {
  display: block;
  width: 100%;
  background: var(--red, #e53e3e);
  color: #fff;
  text-align: center;
  padding: 13px 16px;
  border-radius: 8px;
  font-family: 'Geologica', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s, transform .15s;
  margin-bottom: 8px;
  line-height: 1;
}
.cart-foot-checkout:hover {
  background: #c53030;
  transform: translateY(-1px);
  color: #fff;
}
.cart-foot-checkout:active {
  transform: translateY(0);
}

/* ── Empty cart ──────────────────────────────────────── */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 50px 20px 40px;
  text-align: center;
  color: var(--text-muted, #aaa);
}
.cart-empty svg {
  opacity: 0.35;
  display: block;
}
.cart-empty p {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--text, #555);
}
.cart-empty__btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 7px;
  background: var(--red, #e53e3e);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.cart-empty__btn:hover {
  background: #c53030;
  color: #fff;
}

/* ── Body scroll lock when drawer open ───────────────── */
/*
 * scrollbar-gutter: stable ensures the scrollbar slot is always reserved,
 * so locking overflow never causes a layout jump.
 * The padding-right fallback handles old browsers.
 */
html {
  scrollbar-gutter: stable;
}
body.cart-drawer-open {
  overflow: hidden;
}

/* ── Mobile: full-width panel ────────────────────────── */
@media (max-width: 420px) {
  .cart-drawer__panel {
    width: 100vw;
  }
}

/* ═══════════════════════════════════════════════════════
   Volume discount — progress block (drawer foot + checkout)
   ═══════════════════════════════════════════════════════ */
.vol-discount {
  background: var(--green-tint);
  border: none;
  border-radius: 11px;
  padding: 15px 17px;
  font-size: 13px;
  line-height: 1.4;
}
.vol-discount__active {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-text, #15803d);
  font-weight: 600;
  margin-bottom: 4px;
}
.vol-discount__active svg { flex: 0 0 auto; }
.vol-discount__active b { font-weight: 800; }
.vol-discount__next {
  color: var(--text2, #6b6b67);
  margin-bottom: 8px;
}
.vol-discount__next b { color: var(--accent-text, #15803d); font-weight: 700; }
.vol-discount__next--max {
  color: var(--accent-text, #15803d);
  font-weight: 600;
}
/* progress bar */
.vol-discount__bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: #d5e9dd;
}
.vol-discount__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.vol-discount__tick {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #b8d9c6;
  transform: translateY(-50%);
  transition: box-shadow .3s, background .3s;
}
.vol-discount__tick.is-reached {
  background: var(--accent);
  box-shadow: 0 0 0 2px #b8d9c6;
}

/* ═══════════════════════════════════════════════════════
   Checkout — AJAX qty / remove controls + animation
   ═══════════════════════════════════════════════════════ */
.checkout-review-order-item {
  padding-top: 5px;
  padding-bottom: 5px;
  overflow: hidden;
  transition: opacity .28s ease, max-height .3s ease,
              padding .3s ease, margin .3s ease, transform .28s ease;
  max-height: 240px;
}
/* qty stepper */
.co-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 6px;
  border: 1px solid var(--border, #e5e4e0);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  background: var(--surface, #fff);
  width: max-content;
}
.co-qty-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 28px;
  height: 28px;
  font-size: 17px;
  line-height: 1;
  color: var(--text, #1a1a18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.co-qty-btn:hover:not(:disabled) { background: var(--accent-light, #dcfce7); color: var(--accent-text, #15803d); }
.co-qty-btn:disabled { opacity: .35; cursor: default; }
.co-qty-val {
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}
/* remove button */
.co-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text3, #9a9a96);
  cursor: pointer;
  padding: 4px;
  margin-top: 4px;
  border-radius: 50%;
  display: inline-flex;
  transition: background .15s, color .15s;
}
.co-remove:hover { background: var(--red-light, #fee2e2); color: var(--red, #dc2626); }
.item-subtotal { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* busy / removing states */
.checkout-review-order-item.co-busy { opacity: .55; pointer-events: none; }
.checkout-review-order-item.co-removing {
  opacity: 0;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: translateX(12px);
}
/* smooth fade while WooCommerce re-renders the review */
.woocommerce-checkout-review-order.processing,
.woocommerce-checkout-review-order-table.processing { position: relative; }
.woocommerce-checkout-review-order .blockUI.blockOverlay { border-radius: var(--radius-sm, 8px); }
.woocommerce-checkout-review-order__list { transition: opacity .25s ease; }

/* --- promo.css --- */
/* Акції: плашка на товарі й прогрес у кошику. */

/* Іконка — як на картці «Знижки» на головній: червоне коло, біла іконка %. */
.promo-badge__icon{
  flex:none;display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  background:#dc2626;color:#fff;
}
.promo-badge__icon svg{width:13px;height:13px}

.promo-badge{
  display:inline-flex;align-items:center;gap:6px;
  max-width:100%;
  font-weight:600;line-height:1.2;color:#1a1a18;
}
.promo-badge__text{min-width:0}

/* Архів: накладка внизу фото. Ширина — за текстом, не на всю картку. */
.promo-badge--overlay{
  position:absolute;left:8px;bottom:8px;z-index:2;
  width:max-content;max-width:calc(100% - 16px);
  padding:3px 9px 3px 3px;
  background:#fff;border-radius:999px;
  box-shadow:0 1px 5px rgba(0,0,0,.22);
  font-size:11.5px;
  pointer-events:none;           /* картка — це <a>: клік має йти по ній */
}
.promo-badge--overlay .promo-badge__text{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Теги-бейджі товару тримаються внизу фото — піднімаємо їх над плашкою. */
.card-img:has(.promo-badge--overlay) .prod-tag-badges{bottom:38px}

/* Сторінка товару: під ціною, ширина за написом. */
.promo-badge--price{
  display:flex;width:max-content;
  margin:10px 0 2px;
  padding:5px 12px 5px 5px;
  background:#fff6f5;border:1px solid #f5c9c5;border-radius:999px;
  font-size:13.5px;color:#7f1d1d;
}
.promo-badge--price .promo-badge__icon{width:22px;height:22px}
.promo-badge--price .promo-badge__icon svg{width:14px;height:14px}

.promo-progress{margin:10px 0;display:flex;flex-direction:column;gap:6px}
.promo-progress__icon{
  flex:none;display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  background:#dc2626;color:#fff;
}
.promo-progress__icon svg{width:12px;height:12px}
.promo-progress__text{min-width:0}
.promo-progress__row{
  display:flex;align-items:center;gap:8px;
  font-size:13px;line-height:1.35;color:#7a5200;
  background:#fff6e5;border:1px solid #f3d9a4;border-radius:8px;padding:8px 10px;
}
.promo-progress__row.is-done{color:#1d6b2f;background:#eaf7ec;border-color:#b7e2c0}

.gift-tag__icon{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-right:5px;border-radius:50%;background:#dc2626;color:#fff}
.gift-tag__icon svg{width:10px;height:10px}
.gift-tag{
  /* Плашка за шириною тексту. У шторці батько — flex-колонка, і звичайний
     inline-block розтягувався на всю ширину; align-self + width:fit-content це гасять. */
  display:inline-flex;align-items:center;align-self:flex-start;
  width:fit-content;max-width:100%;
  margin:4px 0 0;padding:2px 9px 2px 4px;border-radius:999px;
  background:#eaf7ec;color:#1d6b2f;font-size:11.5px;font-weight:700;white-space:nowrap;line-height:1.3;
}
.gift-qty{color:#646970}

@media (max-width:480px){
  .promo-badge--overlay{left:6px;bottom:6px;font-size:11px;max-width:calc(100% - 12px)}
  .card-img:has(.promo-badge--overlay) .prod-tag-badges{bottom:34px}
  .promo-badge--price{font-size:13px}
}

/* Подарунок у складі замовлення / шторці: нульова ціна — червоним, без +/−. */
.gift-price,
.gift-price .woocommerce-Price-amount,
.cart-item__price.gift-price{color:#dc2626 !important;font-weight:700}
.gift-qty{display:inline-block;margin-top:6px;color:#646970;font-size:13px}

/* «Подарунок: 3+1 на каву» — одним рядком, а не стовпчиком. */
.checkout-review-order-item dl.variation{margin:4px 0 0;font-size:12.5px;color:#646970;line-height:1.35}
.checkout-review-order-item dl.variation dt,
.checkout-review-order-item dl.variation dd,
.checkout-review-order-item dl.variation dd p{display:inline;margin:0}
.checkout-review-order-item dl.variation dd{margin-left:3px}

/* Картка на головній (.prod-card): тег-бейджі піднімаємо над плашкою, як в архіві. */
.prod-img-wrap:has(.promo-badge--overlay) .prod-tag-badges{bottom:38px}
@media (max-width:480px){.prod-img-wrap:has(.promo-badge--overlay) .prod-tag-badges{bottom:34px}}