/* ==========================================================================
   Aroma-Vita — design tokens
   ========================================================================== */
:root {
  --green-50:  #f2f7f0;
  --green-100: #e2eedd;
  --green-200: #c4ddba;
  --green-500: #5c8a4b;
  --green-600: #4a7238;
  --green-700: #3a5a2b;
  --green-900: #23361a;

  --sand-50:  #fbf8f3;
  --sand-100: #f4ede1;
  --sand-200: #e9dcc7;

  --ink-900: #211f1c;
  --ink-700: #4a453e;
  --ink-500: #79726690;
  --ink-500-solid: #79726c;
  --ink-300: #cdc6ba;
  --ink-100: #ece7de;

  --white: #ffffff;
  --danger: #b3432c;
  --danger-bg: #fbeae5;
  --warning: #a5730f;
  --success: #3a7a4e;

  --bg: var(--sand-50);
  --surface: var(--white);
  --surface-2: var(--sand-100);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500-solid);
  --border: var(--ink-100);
  --border-strong: var(--ink-300);
  --accent: var(--green-600);
  --accent-strong: var(--green-700);
  --accent-bg: var(--green-50);
  --accent-bg-2: var(--green-100);

  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(35,54,26,0.06), 0 1px 1px rgba(35,54,26,0.04);
  --shadow-md: 0 8px 24px rgba(35,54,26,0.10);
  --shadow-lg: 0 20px 48px rgba(35,54,26,0.16);
  --container: 1280px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171512;
    --surface: #1f1c18;
    --surface-2: #262220;
    --text-primary: #f3efe8;
    --text-secondary: #cbc3b6;
    --text-muted: #948c7e;
    --border: #322d27;
    --border-strong: #46403a;
    --accent: #7fb56a;
    --accent-strong: #97cb82;
    --accent-bg: #202a1c;
    --accent-bg-2: #263623;
    --danger-bg: #3a2420;
  }
}
:root[data-theme="dark"] {
  --bg: #171512;
  --surface: #1f1c18;
  --surface-2: #262220;
  --text-primary: #f3efe8;
  --text-secondary: #cbc3b6;
  --text-muted: #948c7e;
  --border: #322d27;
  --border-strong: #46403a;
  --accent: #7fb56a;
  --accent-strong: #97cb82;
  --accent-bg: #202a1c;
  --accent-bg-2: #263623;
  --danger-bg: #3a2420;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .5em; line-height: 1.2; color: var(--text-primary); }
h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--text-secondary); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .75em 1.4em; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; cursor: pointer; transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn-ghost { background: var(--accent-bg); color: var(--accent-strong); }
.btn-ghost:hover { background: var(--accent-bg-2); }
.btn-sm { padding: .5em 1em; font-size: .85rem; }
.btn-block { width: 100%; }
.btn-danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.chip { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: .3em .8em; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.chip-new { background: var(--accent-bg-2); color: var(--accent-strong); }
.chip-status-new { background: #e6effa; color: #2a5a97; }
.chip-status-confirmed { background: var(--accent-bg-2); color: var(--accent-strong); }
.chip-status-paid { background: #f5e9c9; color: var(--warning); }
.chip-status-shipped { background: #e3d9fb; color: #6b3fa0; }
.chip-status-done { background: var(--accent-bg-2); color: var(--accent-strong); }
.chip-status-cancelled { background: var(--danger-bg); color: var(--danger); }
.stock-qty-badge { display: inline-block; font-weight: 700; font-size: .9rem; }
.stock-qty-badge.is-low { color: var(--danger); background: var(--danger-bg); padding: .2em .6em; border-radius: 6px; }
.stock-qty-badge.is-unlimited { color: var(--warning); background: #f5e9c9; padding: .2em .6em; border-radius: 6px; font-size: .78rem; white-space: nowrap; }
.notify-channel-status-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.chip-status-deleted { background: var(--border); color: var(--text-muted); }

/* inline customer-tier picker on the admin clients list -- styled to read
   like a chip (matching chip-status-confirmed/chip-status-shipped) while
   still being a real <select> so it submits its own tier-change form */
.tier-select {
  border: none; border-radius: 999px; padding: .3em 1.6em .3em .8em; font-size: .78rem; font-weight: 600;
  cursor: pointer; background-color: var(--surface-2); color: var(--text-secondary);
  background-image: none; appearance: none; -webkit-appearance: none;
}
.tier-select-loyal { background: var(--accent-bg-2); color: var(--accent-strong); }
.tier-select-vip { background: #e3d9fb; color: #6b3fa0; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4em; color: var(--text-secondary); }
.field input, .field textarea, .field select {
  width: 100%; padding: .75em .9em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-size: .95rem; font-family: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg-2); }

/* ---- password show/hide toggle (partials/password_field.html) ---- */
.password-field { position: relative; }
.field .password-field input { padding-right: 2.6em; }
.password-toggle {
  position: absolute; top: 50%; right: .3em; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.1em; height: 2.1em; padding: 0; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.password-toggle:hover { color: var(--text-primary); background: var(--surface-2); }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-showing .icon-eye { display: none; }
.password-toggle.is-showing .icon-eye-off { display: flex; }
.field-error { color: var(--danger); font-size: .82rem; margin-top: .3em; }
.form-errors { background: var(--danger-bg); color: var(--danger); padding: .9em 1.1em; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; }
.form-errors ul { padding-left: 1.2em; list-style: disc; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--accent); }

/* ---- topbar ---- */
.topbar { background: var(--accent-strong); color: #fff; font-size: .82rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.topbar a { opacity: .92; }
.topbar a:hover { opacity: 1; text-decoration: underline; }
.topbar-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
/* ---- topbar phone switch: all contact numbers, active messenger icons
   next to whichever number(s) actually match a configured Viber/WhatsApp/
   Telegram contact (see base.html -- not every phone_N is messenger-
   reachable, so icons only appear where that's actually configured). ---- */
.phone-switch { position: relative; }
.phone-switch summary {
  display: flex; align-items: center; gap: .4em; cursor: pointer; list-style: none;
  color: #fff; opacity: .92;
}
.phone-switch summary::-webkit-details-marker, .phone-switch summary::marker { display: none; content: ""; }
.phone-switch summary:hover { opacity: 1; text-decoration: underline; }
.phone-switch summary svg:last-child { transition: transform .15s ease; }
.phone-switch[open] summary svg:last-child { transform: rotate(180deg); }
.phone-switch-panel {
  position: absolute; top: 100%; left: 0; margin-top: .6rem; z-index: 96;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .4rem; min-width: 250px;
  display: flex; flex-direction: column; gap: .1rem;
}
.phone-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5em .6em; border-radius: var(--radius-sm); }
.phone-switch-row:hover { background: var(--surface-2); }
.phone-switch-number { color: var(--text-primary); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.phone-switch-messengers { display: flex; gap: .5em; flex-shrink: 0; }
.phone-switch-messengers a { display: flex; transition: transform .1s ease; }
.phone-switch-messengers a:hover { transform: scale(1.12); }

.lang-switch { display: flex; gap: .4rem; }
.lang-switch a { padding: .1em .5em; border-radius: 4px; }
.lang-switch a.active { background: rgba(255,255,255,.22); font-weight: 700; }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 91; background: var(--surface); border-bottom: 1px solid var(--border); }
.header-main { display: flex; align-items: center; gap: 1.5rem; padding: 14px 0; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent-strong); display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.logo-mark { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-strong); padding: 6px; flex-shrink: 0; }
.logo-mark-footer { background: rgba(255,255,255,.12); }
.search-form { flex: 1; display: flex; max-width: 620px; position: relative; }
/* as-you-type suggestions under the header search (main.js) */
.search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 97; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .35rem; max-height: min(70vh, 520px); overflow-y: auto; }
.search-suggest[hidden] { display: none; }
.search-suggest-item { display: flex; align-items: center; gap: .75rem; padding: .45rem .55rem; border-radius: 8px; color: var(--text-primary); text-decoration: none; }
.search-suggest-item:hover, .search-suggest-item.active { background: var(--surface-2); }
.search-suggest-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.search-suggest-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.search-suggest-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.search-suggest-name { font-size: .88rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-suggest-meta { display: flex; gap: .5rem; font-size: .74rem; color: var(--text-muted); }
.search-suggest-out { color: var(--danger); }
.search-suggest-item.is-out .search-suggest-thumb img { opacity: .45; }
.search-suggest-price { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--accent-strong); white-space: nowrap; }
.search-suggest-all { display: block; text-align: center; margin-top: .25rem; padding: .55rem; border-top: 1px solid var(--border); font-size: .84rem; font-weight: 700; color: var(--accent-strong); text-decoration: none; }
.search-suggest-all:hover { background: var(--surface-2); border-radius: 0 0 8px 8px; }
.search-suggest-empty { padding: .8rem .7rem; font-size: .85rem; color: var(--text-muted); }
.search-form input { flex: 1; border: 1px solid var(--border-strong); border-right: none; border-radius: 999px 0 0 999px; padding: .7em 1.2em; font-size: .92rem; background: var(--surface); color: var(--text-primary); }
.search-form input:focus { outline: none; border-color: var(--accent); }
.search-form button { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 0 999px 999px 0; padding: 0 1.2em; cursor: pointer; }
.header-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.icon-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem .6rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: .68rem; font-weight: 600; }
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.icon-btn i { font-size: 1.35rem; }
.icon-btn .count { position: absolute; top: 0; right: 2px; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

.main-nav { border-top: 1px solid var(--border); }
.main-nav .container { display: flex; align-items: center; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; }
.main-nav .container::-webkit-scrollbar { display: none; }
.main-nav a { display: block; padding: .8em 0; font-size: .88rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { color: var(--accent-strong); border-color: var(--accent); }

.mobile-toggle, .mobile-search-toggle { display: none; }

/* ---- mega dropdown ----
   Native <details>/<summary> drives open/close -- no JS required for the
   core toggle, so it can never be broken by a script that fails to attach
   for any reason. JS only layers on top (click-outside-to-close, Escape). */
.mega { position: relative; }
.mega-trigger {
  display: flex; align-items: center; gap: .45em; margin: .5em 0; padding: .55em 1.1em; border: none;
  background: var(--accent); color: #fff; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background .15s ease;
  list-style: none; user-select: none; -webkit-user-select: none;
}
.mega-trigger::-webkit-details-marker, .mega-trigger::marker { display: none; content: ""; }
.mega-trigger svg:last-child { transition: transform .15s ease; }
.mega-trigger:hover { background: var(--accent-strong); }
.mega[open] .mega-trigger { background: var(--accent-strong); }
.mega[open] .mega-trigger svg:last-child { transform: rotate(180deg); }
.mega-panel {
  /* position: fixed (not absolute) so it can never be clipped by an
     ancestor's overflow -- .main-nav .container scrolls horizontally
     (overflow-x: auto), which per spec forces overflow-y non-visible too
     and was silently clipping an absolutely-positioned dropdown. JS sets
     top/left inline whenever the menu opens. */
  position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 96; display: flex; overflow: hidden;
  max-height: calc(100vh - 130px);
}
.mega-cat-list { width: 260px; padding: .6rem; overflow-y: auto; border-right: 1px solid var(--border); flex-shrink: 0; }
.mega-cat-link {
  display: block; min-width: 0; padding: .55em .8em; border-radius: var(--radius-sm);
  font-size: .86rem; font-weight: 500; color: var(--text-secondary); border: none !important;
  white-space: normal !important; line-height: 1.3;
}
.mega-cat-link:hover, .mega-cat-link.is-active { background: var(--accent-bg); color: var(--accent-strong); }

.mega-cat-preview { width: 300px; padding: 1.1rem; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; }
.mega-cat-preview [hidden] { display: none !important; }
.mega-preview-content { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mega-preview-list-item {
  display: block; min-width: 0; padding: .55em 0; font-size: .84rem;
  border-bottom: 1px solid var(--border); border-radius: 0 !important;
  white-space: normal !important;
}
.mega-preview-list-item:last-of-type { border-bottom: none; }
.mega-preview-item-name {
  display: block; color: var(--text-secondary); overflow-wrap: break-word;
  white-space: normal !important; line-height: 1.3;
}
.mega-preview-list-item:hover .mega-preview-item-name { color: var(--accent-strong); }
.mega-preview-list-item.is-out-of-stock .mega-preview-item-name { color: var(--text-muted); }
.mega-preview-list-item.is-out-of-stock:hover .mega-preview-item-name { color: var(--text-muted); }
.mega-preview-item-stock { display: block; font-size: .74rem; font-weight: 600; color: var(--text-muted); margin-top: .1em; }

/* ---- hero ---- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg) 100%);
  padding: 22px 0;
}
.hero-bg-shape {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, var(--accent-bg-2) 0%, transparent 100%) -10% -30% / 55% 130% no-repeat,
    radial-gradient(closest-side, var(--sand-200) 0%, transparent 100%) 110% 120% / 45% 100% no-repeat;
  opacity: .6;
}
.hero-copy { position: relative; z-index: 1; }
/* Compact single-strip layout: badge, H1 (kept in the DOM for SEO/UA-RU but
   sized down -- the real visual "hero" moment is the banner above this),
   subtitle and stats all sit on one wrapped line instead of stacking with
   large vertical gaps. See index.html's own comment above the categories
   section: shoppers should reach real products within seconds, so this
   strip is intentionally minimal now rather than a second full hero. */
.hero-copy-center { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 1.4rem; row-gap: .5rem; text-align: left; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .5em; background: var(--surface); border: 1px solid var(--border); padding: .3em .9em; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--accent-strong); }
.hero h1 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; margin: 0; }
.hero-sub { display: none; } /* full pitch now redundant with the category grid right below; keep in template for possible future reuse */
.hero-stats { display: flex; gap: 1.4rem; }
.hero-stats strong { font-family: var(--font-display); font-size: 1rem; color: var(--accent-strong); }
.hero-stats span { font-size: .74rem; color: var(--text-muted); margin-left: .3em; }
.hero-banner-strip {
  position: relative; z-index: 1;
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
  overflow: hidden;
}
.hero-banner-strip img { width: 100%; height: auto; aspect-ratio: 1920/480; display: block; }

/* ---- homepage banner carousel ---- */
.banner-carousel {
  position: relative; z-index: 1; width: 100vw; margin-left: 50%; transform: translateX(-50%);
  overflow: hidden; background: var(--surface-2);
}
.banner-track { position: relative; height: clamp(220px, 32vw, 480px); }
.banner-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease; }
.banner-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.banner-slide picture, .banner-slide-link { display: block; width: 100%; height: 100%; }
.banner-slide-link { position: relative; }
.banner-copy {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem clamp(1.2rem, 5vw, 4rem) 2rem;
  background: linear-gradient(0deg, rgba(20,15,10,.62) 0%, rgba(20,15,10,0) 75%);
  color: #fff; max-width: 640px;
}
.banner-copy h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2.2rem); margin: 0 0 .35rem; color: #fff; line-height: 1.15; }
.banner-copy p { font-size: clamp(.86rem, 1.4vw, 1.05rem); margin: 0 0 1rem; opacity: .92; }
.banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.85);
  color: var(--ink-900); display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-md); transition: background .15s ease, transform .15s ease;
}
.banner-arrow:hover { background: #fff; }
.banner-prev { left: 1rem; }
.banner-prev svg { transform: rotate(180deg); }
.banner-next { right: 1rem; }
.banner-dots { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2; display: flex; gap: .5rem; }
.banner-dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: background .15s ease, width .15s ease; }
.banner-dot.active { background: #fff; width: 22px; }
@media (max-width: 700px) {
  .banner-arrow { display: none; }
  .banner-copy { padding: 1.3rem 1.1rem; }
}

/* ---- split banners (paired promo tiles) ---- */
.split-banners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.split-banner-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 780 / 420; background: var(--surface-2); }
.split-banner-link { display: block; width: 100%; height: 100%; position: relative; }
@media (max-width: 700px) {
  .split-banners-grid { grid-template-columns: 1fr; }
}

/* ---- mid-page banner ---- */
.mid-banner { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1600 / 400; background: var(--surface-2); }
.mid-banner-link { display: block; width: 100%; height: 100%; position: relative; }

/* ---- shared banner media (image or looping video, any zone) ---- */
.banner-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-media.kb { animation: banner-kenburns 14s ease-in-out infinite alternate; }
@keyframes banner-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
  .banner-media.kb { animation: none; }
}

/* ---- admin-preview-only empty-zone placeholders (never shown to real visitors) ---- */
.banner-zone-placeholder {
  display: flex; align-items: center; justify-content: center; min-height: 140px; text-align: center; padding: 1rem;
  border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); font-size: .85rem;
}
.banner-zone-placeholder-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

/* ---- trust strip ---- */
.trust-strip { background: var(--accent-strong); }
.trust-strip-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.6rem;
  padding: .9rem 0; color: #fff;
}
.trust-item { display: flex; align-items: center; gap: .55em; font-size: .84rem; font-weight: 600; opacity: .95; white-space: nowrap; }

/* ---- "follow us" strip ---- */
.social-strip { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.social-strip-inner { display: flex; align-items: center; justify-content: center; gap: 1.1rem; padding: .9rem 0; flex-wrap: wrap; }
.social-strip-label {
  display: flex; align-items: center; gap: .5em; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary);
}
.social-strip-label svg { color: var(--accent); }
.social-strip-links { display: flex; gap: .6rem; }
.social-strip-links a {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--accent-strong);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.social-strip-links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

/* ---- GreenHealth origin-story banner (homepage) ---- */
.gh-story {
  background: radial-gradient(circle at 15% 20%, #3d5c2a, #1c2a14 70%);
  color: #fff;
  padding: 3.2rem 0;
  position: relative;
  overflow: hidden;
}
.gh-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 80%, rgba(217,242,196,.15), transparent 55%);
  pointer-events: none;
}
.gh-story-inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.gh-story-brands { display: flex; align-items: center; gap: 1rem; }
.gh-story-brand-badge { display: flex; align-items: center; gap: .5em; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .55em 1.2em; font-weight: 700; font-size: .95rem; }
.gh-story-brand-badge img { height: 22px; width: auto; }
.gh-story-brand-gh span { color: #d9f2c4; }
.gh-story-brand-gh b { color: #fff; }
.gh-story-plus { font-size: 1.3rem; color: #b8caa5; }
.gh-story-headline { color: #fff; font-size: 1.7rem; line-height: 1.3; margin: 0; max-width: 620px; }
.gh-story-text { color: #d7ddc9; font-size: .95rem; line-height: 1.6; max-width: 580px; margin: 0; }
.gh-story-btn { margin-top: .4rem; }

/* ---- sections ---- */
.section { padding: 48px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.6rem; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }

/* ---- why-us ---- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.why-card { padding: 1.6rem 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: box-shadow .15s ease, transform .15s ease; }
.why-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.why-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; color: var(--accent-strong); margin-bottom: .9rem; }
.why-card h3 { font-size: .98rem; margin-bottom: .35rem; }
.why-card p { font-size: .85rem; margin: 0; color: var(--text-secondary); }

/* ---- categories grid ---- */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.cat-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .6rem; min-height: 148px; padding: 1.3rem 1rem;
  border-radius: var(--radius); background: var(--surface) center/cover no-repeat; border: 1px solid var(--border);
  transition: all .18s ease; overflow: hidden;
}
.cat-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat-card.has-photo { justify-content: flex-end; border: none; }
.cat-card.has-photo span:not(.cat-icon) { color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.cat-card .cat-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; color: var(--accent-strong); font-size: 1.4rem; }
.cat-card span { font-size: .85rem; font-weight: 600; }

/* ---- product grid / cards ---- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.product-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; position: relative; }
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-thumb { aspect-ratio: 1/1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.product-thumb img.out-of-stock-img { opacity: .35; filter: grayscale(40%); }
.out-of-stock-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.out-of-stock-label span { background: rgba(33,31,28,.82); color: #fff; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .45em .9em; border-radius: 999px; }
.product-card.is-out-of-stock .product-name, .product-page.is-out-of-stock .product-info-col h1 { color: var(--text-secondary); }
.product-fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); z-index: 2; }
.product-fav:hover, .product-fav.active { color: var(--danger); border-color: var(--danger-bg); }
.product-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: .3rem; z-index: 2; }
.product-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-cat { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.product-name { font-size: .92rem; font-weight: 600; font-family: var(--font-sans); color: var(--text-primary); flex: 1; }
.product-name a { display: block; }
.product-tm-inline { white-space: nowrap; font-weight: 500; color: var(--text-muted); }
.product-price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--accent-strong); }
.product-price small { font-family: var(--font-sans); font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.product-actions { margin-top: .3rem; }
.add-form { display: flex; gap: .4rem; flex-wrap: wrap; }
.add-form select { flex: 1; min-width: 0; padding: .55em .6em; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font-size: .8rem; }
.add-form button { flex-shrink: 0; padding: .55em .8em; border-radius: var(--radius-sm); }
.product-add-form { display: block; }

/* ---- breadcrumbs ---- */
.breadcrumbs { font-size: .82rem; color: var(--text-muted); padding: 14px 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.breadcrumbs a:hover { color: var(--accent-strong); }

/* ---- category page ---- */
.category-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.category-header p { margin: 0; font-size: .88rem; color: var(--text-muted); }
.category-sort { display: flex; align-items: center; gap: .6em; margin: -.8rem 0 1.2rem; font-size: .88rem; color: var(--text-muted); }
.category-sort select { padding: .45em .8em; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: .88rem; }
.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 2.4rem; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600; border: 1px solid var(--border); }
.pagination a:hover { border-color: var(--accent); color: var(--accent-strong); }
.pagination .active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination-show-all {
  width: auto; min-width: unset; padding: 0 1.1em;
  background: var(--accent-bg); color: var(--accent-strong); border-color: transparent;
  margin-left: .4rem;
}
.pagination-show-all:hover { background: var(--accent); color: #fff; }

/* ---- lightweight hover tooltip for icon-only buttons ---- */
.has-tooltip { position: relative; }
.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--text-primary); color: var(--surface); font-size: .78rem; font-weight: 600;
  white-space: nowrap; padding: .4em .8em; border-radius: var(--radius-sm);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}
.has-tooltip:hover::after, .has-tooltip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (hover: none) {
  .has-tooltip::after { display: none; }
}

/* ---- product page ---- */
.product-page { display: grid; grid-template-columns: 440px 1fr; gap: 2.6rem; padding: 1.5rem 0 3rem; }
.product-gallery { position: sticky; top: 90px; align-self: start; }
.product-gallery-img { position: relative; aspect-ratio: 1/1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-gallery-img img, .product-gallery-img video { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.product-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-primary);
}
.product-gallery-arrow:hover { background: #fff; }
.product-gallery-arrow-prev { left: 12px; }
.product-gallery-arrow-next { right: 12px; }
.product-gallery-counter {
  position: absolute; bottom: 10px; right: 10px; font-size: .72rem; padding: .2em .6em; border-radius: 10px;
  background: rgba(0,0,0,.6); color: #fff;
}
.product-gallery-dots { display: none; gap: .5rem; justify-content: center; margin-top: .8rem; }
.product-gallery-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: width .15s, border-radius .15s; }
.product-gallery-dot.active { width: 20px; border-radius: 4px; background: var(--accent); }
.product-gallery-thumbs { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.product-gallery-thumb {
  position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; padding: 0;
  border: 2px solid transparent; background: var(--surface-2); cursor: pointer;
}
.product-gallery-thumb img, .product-gallery-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.product-gallery-thumb.active { border-color: var(--accent); }
.product-gallery-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.28); font-size: .8rem; }
.product-share { display: flex; gap: .5rem; margin-top: 1rem; }
.share-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.share-btn:hover { border-color: var(--accent); color: var(--accent-strong); }

.product-info-col h1 { margin-bottom: .4rem; }
.product-tm { display: inline-block; font-size: .6em; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.product-meta-row { display: flex; align-items: center; gap: 1rem; font-size: .84rem; color: var(--text-muted); margin-bottom: 1.1rem; flex-wrap: wrap; }
.stock-ok { color: var(--success); display: inline-flex; align-items: center; gap: .3em; font-weight: 600; }
.stock-out { color: var(--danger); display: inline-flex; align-items: center; gap: .3em; font-weight: 600; }
.product-gallery-img img.out-of-stock-img { opacity: .35; filter: grayscale(40%); }
.oos-notice { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-sm); padding: .8em 1em; font-size: .88rem; font-weight: 600; margin-bottom: 1.4rem; }
.notify-stock-card { padding: 1.1rem 1.2rem; margin-bottom: 1.4rem; }
.notify-stock-form { display: flex; flex-direction: column; gap: .7rem; }
.notify-stock-form input[type="email"], .notify-stock-form input[type="tel"] { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; font-size: .88rem; background: var(--surface); color: var(--text); }
.product-price-block { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.4rem; }
.product-price-block .price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent-strong); }
.variant-group { margin-bottom: 1.4rem; }
.variant-group > label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .6rem; }
.variant-options { display: flex; flex-wrap: wrap; gap: .6rem; }
.variant-options input { position: absolute; opacity: 0; pointer-events: none; }
.variant-options .opt { display: block; padding: .6em 1em; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .86rem; font-weight: 600; cursor: pointer; transition: all .12s ease; }
.variant-options input:checked + .opt { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-strong); }
.qty-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.qty-spin { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.qty-spin button { width: 36px; height: 40px; background: var(--surface-2); border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-primary); }
.qty-spin input { width: 46px; text-align: center; border: none; height: 40px; background: var(--surface); color: var(--text-primary); font-size: .95rem; }
.qty-spin-sm { margin-top: .3rem; }
.qty-spin-sm button { width: 24px; height: 24px; font-size: .82rem; }
.qty-spin-sm input { width: 30px; height: 24px; font-size: .8rem; }
.product-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.product-cta-row .btn { flex: 1; min-width: 180px; }
.contact-quick { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.contact-quick a { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em; border-radius: 999px; border: 1px solid var(--border); font-size: .84rem; font-weight: 600; }
.contact-quick a:hover { border-color: var(--accent); color: var(--accent-strong); }
.requisites-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.requisites-item strong { display: block; margin-bottom: .5em; color: var(--text-primary); }
.requisites-item p { margin: 0 0 .3em; font-size: .88rem; color: var(--text-secondary); }
@media (max-width: 700px) {
  .requisites-grid { grid-template-columns: 1fr; }
}

.tabs { border-top: 1px solid var(--border); padding-top: 1.6rem; }
.tabs h2 { font-size: 1.1rem; }
.desc-content { font-size: .95rem; color: var(--text-secondary); }
.desc-content p { margin-bottom: .8em; }
.desc-content a { color: var(--accent-strong); text-decoration: underline; }
/* images pasted into article/page/product bodies by the editor: keep them
   inside the text column (an uploaded photo is far wider than it) */
.desc-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; margin: 1rem auto; }
.desc-content figure { margin: 1rem 0; }
.desc-content figcaption { font-size: .82rem; color: var(--text-muted); text-align: center; margin-top: .35rem; }
.desc-content a:hover { text-decoration: none; }
/* Full description: click/tap-to-toggle only. max-height transition is the
   most broadly-compatible way to animate toward an unknown "auto" content height. */
.full-desc-reveal { margin-top: 1.2rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.full-desc-toggle {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  background: var(--accent-bg); color: var(--accent-strong); border: 1px solid transparent;
  font-weight: 600; font-size: .9rem; padding: .65em 1.1em; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.full-desc-toggle svg { transition: transform .25s ease; }
.full-desc-toggle:hover, .full-desc-toggle:focus-visible { background: var(--accent); color: #fff; }
.full-desc-reveal.is-open .full-desc-toggle svg { transform: rotate(180deg); }

.full-desc-panel-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.full-desc-panel-wrap .desc-content { padding-top: 1rem; }

.full-desc-reveal.is-open .full-desc-panel-wrap {
  /* No-JS fallback only -- product.html's toggle click handler measures
     the panel's real scrollHeight and sets an inline max-height that
     overrides this, since a fixed cap here clips any description longer
     than it (was 1400px, silently truncating longer full-description text). */
  max-height: 1400px;
}

/* ---- reviews & Q&A ---- */
.reviews-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2.6rem; align-items: start; }
.star-rating { display: inline-flex; gap: .1em; color: var(--border-strong); font-size: 1rem; line-height: 1; }
.star-rating span.is-filled { color: #f5a623; }
.star-rating-lg { font-size: 1.5rem; }
.rating-summary { display: flex; gap: 2.2rem; align-items: center; flex-wrap: wrap; padding: 1.2rem 0 1.6rem; border-bottom: 1px solid var(--border); margin-bottom: 1.4rem; }
.rating-summary-score { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.rating-summary-number { font-size: 2.4rem; font-weight: 800; font-family: var(--font-display); line-height: 1; }
.rating-summary-count { font-size: .8rem; color: var(--text-muted); }
.rating-summary-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .35rem; }
.rating-bar-row { display: grid; grid-template-columns: 34px 1fr 24px; gap: .6rem; align-items: center; font-size: .78rem; color: var(--text-muted); }
.rating-bar-track { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rating-bar-fill { height: 100%; background: #f5a623; border-radius: 4px; }
.review-list { display: flex; flex-direction: column; gap: 1.2rem; }
.review-card { padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.review-card-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.review-author { font-weight: 700; font-size: .88rem; }
.review-date { font-size: .78rem; color: var(--text-muted); margin-left: auto; }
.review-text { font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
.review-images { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.review-images img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.review-admin-reply { margin-top: .6rem; padding: .7rem .9rem; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .85rem; }
.review-form-card { padding: 1.4rem; position: sticky; top: 90px; }
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .1em; font-size: 1.6rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { color: var(--border-strong); cursor: pointer; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: #f5a623; }
.qa-list { display: flex; flex-direction: column; gap: 1.2rem; }
.qa-card { padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.qa-question { font-weight: 600; font-size: .9rem; display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; }
.qa-q-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-bg-2); color: var(--accent-strong); font-weight: 800; font-size: .78rem; flex-shrink: 0; }
.qa-answer { margin-top: .5rem; margin-left: 1.6rem; font-size: .87rem; color: var(--text-secondary); display: flex; align-items: flex-start; gap: .4em; }
.qa-answer-pending { color: var(--text-muted); font-style: italic; }

/* ---- cart ---- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; padding: 1.8rem 0 3rem; align-items: start; }
.cart-row { display: grid; grid-template-columns: 78px 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.cart-row img { width: 78px; height: 78px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px; }
.cart-row .name { font-weight: 600; font-size: .92rem; }
.cart-row .variant { font-size: .8rem; color: var(--text-muted); }
.cart-row .price { font-weight: 700; color: var(--accent-strong); font-family: var(--font-display); white-space: nowrap; }
.cross-sell-block { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.cross-sell-title { margin-bottom: 1rem; }
.cross-sell-grid { grid-template-columns: repeat(3, 1fr); }
.cart-remove { color: var(--text-muted); font-size: 1.2rem; padding: .3rem; }
.cart-remove:hover { color: var(--danger); }
.summary-card { padding: 1.4rem; position: sticky; top: 90px; }
.summary-row { display: flex; justify-content: space-between; font-size: .9rem; padding: .4rem 0; color: var(--text-secondary); }
.summary-total { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 700; padding: .8rem 0; border-top: 1px solid var(--border); margin-top: .5rem; }
.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state i { font-size: 3rem; color: var(--border-strong); margin-bottom: 1rem; display: block; }

/* Articles listing: one picture at the top, then rows. A full-bleed image
   on every entry made the list ~18 phone screens tall for 31 posts. */
.article-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; }
.article-featured { display: flex; flex-direction: column; overflow: hidden; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.article-featured:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
/* capped, or on a wide screen the 960px-wide container turns one 16:9 picture
   into a 540px hero and pushes the list itself below the fold */
.article-featured img { width: 100%; aspect-ratio: 16/9; max-height: 300px; object-fit: cover; display: block; }
.article-featured-body { padding: 1.1rem 1.3rem 1.3rem; }
.article-featured-body h2 { font-size: 1.25rem; margin-bottom: .4rem; }
.article-featured-body p { font-size: .88rem; color: var(--text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-row { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; color: inherit; transition: box-shadow .15s ease, border-color .15s ease; }
.article-row:hover { box-shadow: var(--shadow-sm); border-color: var(--accent); }
.article-row-thumb { width: 84px; height: 62px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; display: block; }
.article-row-body { min-width: 0; flex: 1 1 auto; }
/* clamped too, or a long title alone makes one row half again as tall as its neighbours */
.article-row-body h3 { font-size: .98rem; line-height: 1.3; margin: 0 0 .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* two lines of teaser, then an ellipsis -- keeps every row the same height */
.article-row-body p { font-size: .82rem; color: var(--text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-row-chevron { flex: 0 0 auto; color: var(--text-muted); display: flex; }
@media (max-width: 700px) {
  .article-featured-body { padding: .9rem 1rem 1rem; }
  .article-featured-body h2 { font-size: 1.1rem; }
  .article-row { padding: .6rem .7rem; gap: .7rem; }
  .article-row-thumb { width: 64px; height: 52px; }
  .article-row-body h3 { font-size: .92rem; }
  .article-row-body p { -webkit-line-clamp: 2; font-size: .78rem; }
  .article-row-chevron { display: none; }
}

.promo-box { margin: .8rem 0; }
.promo-form { display: flex; gap: .5rem; }
.promo-form input { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; font-size: .88rem; background: var(--surface); color: var(--text); }
.promo-applied-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem; background: var(--accent-bg-2); border-radius: 8px; }
.promo-applied-code { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .88rem; color: var(--accent-strong); }
.promo-applied-amount { font-weight: 600; }
.promo-remove-btn { background: none; border: none; color: var(--text-muted); font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0; }
.promo-remove-btn:hover { color: var(--danger); }

/* ---- checkout ---- */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; padding: 1.8rem 0 3rem; align-items: start; }
.checkout-mini-item { display: flex; justify-content: space-between; font-size: .86rem; padding: .5rem 0; border-bottom: 1px solid var(--border); gap: 1rem; }
.checkout-mini-item .qty-tag { color: var(--text-muted); }
.autocomplete { position: relative; }
.autocomplete-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto;
}
.autocomplete-item { padding: .6em .8em; font-size: .88rem; cursor: pointer; }
.autocomplete-item:hover { background: var(--accent-bg); color: var(--accent-strong); }
.autocomplete-item-hint { color: var(--text-muted); font-size: .82rem; }
.autocomplete-item-tag {
  display: inline-block; margin-left: .5em; padding: .1em .55em; border-radius: 999px;
  font-size: .72rem; font-weight: 700; vertical-align: middle;
}
.autocomplete-item-tag.tag-branch { background: var(--accent-bg); color: var(--accent-strong); }
.autocomplete-item-tag.tag-postomat { background: var(--accent-bg-2); color: var(--text-secondary); }
.field-hint { font-size: .78rem; color: var(--text-muted); margin-top: .4em; }
.radio-row { display: flex; flex-wrap: wrap; gap: 1.2rem; padding-top: .3rem; }
.radio-inline { display: flex; align-items: center; gap: .45em; font-size: .88rem; font-weight: 500; cursor: pointer; }
.radio-inline input { width: auto; }

/* ---- auth pages ---- */
.auth-wrap { max-width: 440px; margin: 0 auto; padding: 3rem 0; }
.auth-wrap .card { padding: 2rem; }
.auth-links { text-align: center; margin-top: 1.2rem; font-size: .88rem; color: var(--text-muted); }
.auth-links a { color: var(--accent-strong); font-weight: 600; }

/* ---- cabinet ---- */
.cabinet-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; padding: 1.8rem 0 3rem; }
.cabinet-nav { display: flex; flex-direction: column; gap: .2rem; }
.cabinet-nav a { padding: .7em 1em; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: .6em; }
.cabinet-nav a:hover { background: var(--surface-2); }
.cabinet-nav a.active { background: var(--accent-bg); color: var(--accent-strong); }
.table-simple { width: 100%; border-collapse: collapse; font-size: .88rem; }
/* A header wrapping onto 2 lines ("К-СТЬ / ЗАМОВЛЕНЬ") is what tips this
   into a real bug -- with `width:100%` and no fixed column widths, the
   browser's table layout will shrink a column by wrapping its content
   instead of ever growing the table past 100% (which is what would
   trigger the .card wrapper's own overflow-x:auto below). Keeping every
   header on one line forces the table to its real natural width instead,
   so a page with more columns than fit gets an honest horizontal
   scrollbar rather than squeezed, wrapped, half-cut-off cells -- on
   mobile too, where there's even less width to begin with. */
.table-simple th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: .6em .8em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table-simple td { padding: .8em .8em; border-bottom: 1px solid var(--border); }
.table-simple tr:hover td { background: var(--surface-2); }
.table-simple td.nowrap { white-space: nowrap; }
/* opt-in tighter cells for wide admin tables (e.g. categories: 7 columns incl.
   four action buttons) -- keeps them inside a 1024px laptop screen */
.table-simple.table-tight th, .table-simple.table-tight td { padding-left: .45em; padding-right: .45em; }
.table-simple.table-tight .btn-sm { padding-left: .6em; padding-right: .6em; }
/* Product cover/gallery editor (/admin/products/{id}/edit) */
.media-thumb { width: 110px; flex-shrink: 0; }
.media-thumb-img-wrap { position: relative; width: 110px; height: 110px; }
.media-thumb-img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; background: var(--surface-2); border: 2px solid transparent; display: block; }
.media-thumb-cover .media-thumb-img { border-color: var(--accent); }
.media-thumb-badge {
  position: absolute; left: 5px; bottom: 5px; font-size: .62rem; padding: .12em .55em;
  background: rgba(0,0,0,.65); color: #fff; border: none;
}
.media-thumb-del { position: absolute; top: -7px; right: -7px; margin: 0; }
.media-thumb-del button {
  width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: var(--danger); color: #fff; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.media-thumb-del button:hover { filter: brightness(1.1); }
.media-thumb-actions { display: flex; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }
.media-thumb-actions .btn-sm { padding: .25em .5em; font-size: .72rem; }
/* Denser variant for admin lists with many columns (/admin/orders) --
   tighter padding/font plus a smaller chip so a long status sentence
   ("Замовлення оплачене, очікує відправки") reads on 1-2 lines instead
   of 3, which was what actually pushed the trailing delete-icon column
   off past the visible width in the first place. */
.table-compact th, .table-compact td { padding: .45em .55em; font-size: .82rem; }
.table-compact .chip { padding: .2em .55em; font-size: .72rem; }

/* ---- admin: drag-and-drop product reordering (/admin/products, single-
   category filter) -- see products.html's dragstart/dragover/dragend. ---- */
.drag-handle { font-size: 1.1rem; user-select: none; }
.drag-handle:active { cursor: grabbing; }
.product-row-draggable.is-dragging { opacity: .4; background: var(--surface-2); }

/* ---- admin: inline tracking-number editor on the orders list ---- */
.tracking-inline-form { display: flex; gap: .3rem; align-items: center; }
.tracking-inline-input { width: 96px; padding: .35em .45em; border-radius: 6px; border: 1px solid var(--border-strong); font-size: .78rem; }
.tracking-inline-link { display: block; margin-top: .3rem; font-size: .74rem; color: var(--accent-strong); }
.copy-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: .2em; color: var(--text-muted); cursor: pointer; }
.copy-btn:hover { color: var(--accent-strong); }
.copy-btn.copied { color: var(--accent-strong); }

/* ---- admin ---- */
:root {
  --admin-bg: #1c2030;
  --admin-bg-2: #252a3c;
  --admin-bg-hover: #2a3046;
  --admin-border: #2e3448;
  --admin-text: #9aa1b9;
  --admin-text-dim: #6b7290;
  --admin-text-bright: #f4f5f9;
}
.admin-shell { display: grid; grid-template-columns: 258px 1fr; min-height: calc(100vh - 61px); background: var(--surface-2); }
.admin-topbar { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(20,18,14,.02); }
.admin-topbar .header-main { padding: 12px 0; }
.admin-topbar .logo { font-size: 1.1rem; gap: .5rem; }
.admin-topbar .logo .logo-mark { width: 30px; height: 30px; }
.admin-badge-tag { font-family: var(--font-sans); font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--accent-strong); background: var(--accent-bg); padding: .2em .55em; border-radius: 5px; margin-left: .3rem; vertical-align: middle; }
.admin-user-chip { display: flex; align-items: center; gap: .6rem; padding: .35em .7em .35em .35em; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--text-secondary); margin-right: .6rem; }
.admin-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }

.admin-sidebar { background: var(--admin-bg); border-right: 1px solid var(--admin-border); padding: 1.1rem .9rem 1.5rem; display: flex; flex-direction: column; }
.admin-sidebar-title { display: flex; align-items: center; gap: .6em; color: var(--admin-text-bright); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: .4em .6em 1rem; opacity: .55; }
.admin-nav-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--admin-text-dim); padding: 1rem .8em .45em; }
.admin-sidebar a { display: flex; align-items: center; gap: .8em; padding: .68em .8em; border-radius: 9px; font-size: .87rem; font-weight: 500; color: var(--admin-text); margin-bottom: .1rem; transition: background .12s ease, color .12s ease; }
.admin-sidebar a i, .admin-sidebar a svg { flex-shrink: 0; opacity: .85; }
.admin-sidebar a:hover { background: var(--admin-bg-hover); color: var(--admin-text-bright); }
/* superadmin-only shortcut to claude.ai/code -- tinted so it visually reads
   as a special/dev-only entry, not just another regular nav item */
.admin-nav-claude-link { background: rgba(211, 165, 74, .12); color: #d3a54a !important; }
.admin-nav-claude-link:hover { background: rgba(211, 165, 74, .22); color: #e3b95f !important; }
.admin-nav-external-hint { margin-left: auto; opacity: .6; display: flex; }
.admin-sidebar a.active { background: var(--accent); color: #fff; font-weight: 600; }
.admin-sidebar a.active svg { opacity: 1; }
.admin-sidebar-sep { border-top: 1px solid var(--admin-border); margin: .9rem .3rem .6rem; }
.admin-sidebar-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--admin-border); display: flex; flex-direction: column; }
.nav-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; min-width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.admin-sidebar a.active .nav-badge { background: rgba(255,255,255,.28); }

.admin-nav-group { margin-top: 1rem; }
.admin-nav-group-label {
  display: flex; align-items: center; gap: .8em; padding: .68em .8em; border-radius: 9px;
  font-size: .87rem; font-weight: 500; color: var(--admin-text); cursor: pointer; list-style: none;
  transition: background .12s ease, color .12s ease;
}
.admin-nav-group-label::-webkit-details-marker, .admin-nav-group-label::marker { display: none; content: ""; }
.admin-nav-group-label svg { flex-shrink: 0; opacity: .85; }
.admin-nav-group-label svg:last-child { margin-left: auto; transition: transform .15s ease; }
.admin-nav-group-label:hover { background: var(--admin-bg-hover); color: var(--admin-text-bright); }
.admin-nav-group[open] > .admin-nav-group-label { color: var(--admin-text-bright); }
.admin-nav-group[open] > .admin-nav-group-label svg:last-child { transform: rotate(180deg); }
.admin-nav-group-links { display: flex; flex-direction: column; padding: .2rem 0 .3rem; }
.admin-nav-group-links a { padding-left: 2.4em; font-size: .84rem; }

/* Generic collapsible admin card -- one <details class="card admin-collapsible">
   per row (notification templates, external links, ...), same marker-hiding
   + chevron-rotate technique as .phone-switch/.admin-nav-group above. */
.admin-collapsible-summary::-webkit-details-marker, .admin-collapsible-summary::marker { display: none; content: ""; }
.admin-collapsible-summary svg { transition: transform .15s ease; }
.admin-collapsible[open] .admin-collapsible-summary svg { transform: rotate(180deg); }

.admin-main { padding: 1.8rem 2.2rem 3rem; max-width: 1320px; }
.admin-main > h1 { margin-bottom: 1.4rem; }
.admin-main .card { box-shadow: var(--shadow-sm); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stat-card { padding: 1.2rem 1.3rem; display: flex; align-items: center; gap: .9rem; }
.stat-card .stat-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-bg); color: var(--accent-strong); }
.stat-card .stat-icon.tone-warn { background: #fbeedb; color: var(--warning); }
.stat-card .stat-icon.tone-danger { background: var(--danger-bg); color: var(--danger); }
.stat-card .stat-icon.tone-info { background: #e3edfa; color: #2a5a97; }
.stat-card strong { display: block; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; }
.stat-card span { font-size: .8rem; color: var(--text-muted); }

.admin-section-head { display: flex; align-items: center; justify-content: space-between; margin: 2.2rem 0 1rem; }
.admin-section-head h2 { margin: 0; font-size: 1.05rem; }
.table-empty { padding: 3rem 1rem; text-align: center; color: var(--text-muted); font-size: .9rem; }

.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.admin-toolbar > * { min-width: 0; }
.admin-main { overflow-x: hidden; }

/* Save button on every admin edit form stays reachable no matter how long
   the form is (settings.html alone runs 150+ lines of fields) -- pinned to
   the bottom of the viewport at all times instead of only existing
   wherever the form happens to end. position:fixed rather than sticky:
   .admin-main has overflow-x:hidden, which per spec forces its computed
   overflow-y to 'auto' too (the "visible" side of an overflow-x/y pair
   becomes 'auto' once the other is set) -- that silently makes .admin-main
   the sticky containing block instead of the viewport, and since
   .admin-main never actually scrolls itself (its height just matches its
   content), a sticky descendant never sticks to anything. fixed sidesteps
   that entirely. left offset matches .admin-shell's 258px sidebar column,
   collapsing to 0 at the same 860px breakpoint the sidebar itself does. */
.admin-save-bar {
  position: fixed; left: 258px; right: 0; bottom: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 16px rgba(20,18,14,.06);
  padding: .9rem 2.2rem; margin: 1.4rem 0 0;
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
}
/* This class's own `display: flex` above has the same specificity as the
   browser default `[hidden] { display: none }` and would otherwise win
   (author styles beat the UA stylesheet) -- this rule is needed for
   setting the `hidden` attribute (see main.js's dirty-form tracking) to
   actually hide the bar. */
.admin-save-bar[hidden] { display: none; }
/* Reserve space at the form's end so the fixed bar never covers the last
   real field above it. */
form:has(.admin-save-bar) { padding-bottom: 4.5rem; }
.admin-search { position: relative; max-width: 360px; flex: 1; min-width: 220px; }
.admin-search input { width: 100%; padding: .65em .9em .65em 2.3em; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text-primary); font-size: .88rem; }
.admin-search input:focus { outline: none; border-color: var(--accent); }
.admin-search svg { position: absolute; left: .8em; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.admin-filters { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; width: 100%; }
.admin-filter-select {
  padding: .65em .9em; border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); color: var(--text-primary); font-size: .86rem; font-family: inherit;
}
.admin-filter-select:focus { outline: none; border-color: var(--accent); }
.row-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-bg-2); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; font-family: var(--font-display); margin-right: .6rem; vertical-align: middle; }
.cell-user { display: flex; align-items: center; }
.status-pills { display: flex; gap: .4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.status-pill { padding: .45em 1em; border-radius: 999px; font-size: .82rem; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text-secondary); }
.status-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.status-pill:hover { border-color: var(--accent); color: var(--accent-strong); }
.status-pill.active:hover { color: #fff; }
.qty-unit-group { display: flex; width: fit-content; }
.qty-unit-group input { width: 70px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: none; }
.qty-unit-group select { width: 62px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 1px solid var(--border-strong); }
.qty-unit-group input:focus, .qty-unit-group select:focus { position: relative; z-index: 1; }
.expiry-inline-form { display: flex; align-items: center; gap: .4rem; }
.expiry-inline-input { padding: .45em .6em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .82rem; background: var(--surface); color: var(--text-primary); width: 148px; }
.expiry-inline-input.is-urgent { border-color: var(--danger); color: var(--danger); font-weight: 700; background: var(--danger-bg); }
.expiry-apply-btn { padding: .4em .8em; font-size: .78rem; white-space: nowrap; }
.image-upload-row { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.image-upload-preview { width: 84px; height: 84px; object-fit: contain; background: var(--surface-2); border-radius: 10px; padding: 6px; flex-shrink: 0; }
.image-upload-controls { flex: 1; min-width: 200px; }
.image-upload-controls input[type=file] { max-width: 100%; font-size: .85rem; }
.related-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.related-chip { display: inline-flex; align-items: center; gap: .4em; background: var(--accent-bg); color: var(--accent-strong); font-size: .82rem; font-weight: 600; padding: .4em .5em .4em .9em; border-radius: 999px; }
.related-chip button { background: none; border: none; color: var(--accent-strong); font-size: 1.1em; line-height: 1; cursor: pointer; padding: 0 .2em; opacity: .7; }
.related-chip button:hover { opacity: 1; }
.related-search-results { position: relative; max-width: 420px; margin-top: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; display: none; }
.related-search-results.open { display: block; }
.related-result-row { padding: .6em .9em; font-size: .86rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.related-result-row:last-child { border-bottom: none; }
.related-result-row:hover { background: var(--surface-2); }

/* ---- admin "homepage preview" -- a real, scaled-down render of the ГС
   with the proposed banner zones marked on top of it (see banners.html) ---- */
.hs-frame-wrap { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
#hs-frame { display: block; width: 1400px; border: none; transform-origin: top left; pointer-events: none; background: #fff; }
.hs-overlay { position: absolute; inset: 0; pointer-events: none; }
.hs-zone-marker {
  position: absolute; display: none; align-items: center; justify-content: center; z-index: 2;
  border: 2px dashed var(--accent); border-radius: 8px; pointer-events: auto; text-decoration: none;
  background: rgba(255,255,255,.06); transition: background .15s ease;
}
.hs-zone-marker:hover { background: rgba(255,255,255,.22); }
.hs-zone-marker-chip {
  display: flex; align-items: center; gap: .55em; background: var(--surface); border-radius: 999px;
  padding: .3em 1em .3em .3em; box-shadow: var(--shadow-md); max-width: 94%;
}
.hs-zone-marker-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hs-zone-marker-text { font-size: .72rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; text-align: left; white-space: nowrap; }
.hs-zone-marker-text strong { display: block; color: var(--accent-strong); font-size: .7rem; font-weight: 700; }

/* ---- admin statistics pages ---- */
.stats-filter-form { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.stats-summary-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.stats-summary-card { flex: 1; min-width: 170px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; }
.stats-summary-card span { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .3rem; }
.stats-summary-card strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-strong); }

.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 220px; border-bottom: 1px solid var(--border); padding-bottom: 4px; overflow-x: auto; }
.chart-bar-col { flex: 1; min-width: 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: pointer; }
.chart-bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: background .15s ease; }
.chart-bar-col:hover .chart-bar { background: var(--accent-strong); }
.chart-bar-label { font-size: .64rem; color: var(--text-muted); margin-top: .35rem; white-space: nowrap; }
.chart-tooltip {
  position: fixed; z-index: 999; background: var(--ink-900); color: #fff; font-size: .78rem; line-height: 1.4;
  padding: .5em .8em; border-radius: 8px; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap;
}

.stats-hbar-row { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.stats-hbar-row:last-child { border-bottom: none; }
.stats-hbar-label { width: 150px; flex-shrink: 0; font-size: .84rem; font-weight: 600; color: var(--text-secondary); }
.stats-hbar-track { flex: 1; height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.stats-hbar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.stats-hbar-value { flex-shrink: 0; font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

.feed-url-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.feed-url-row input {
  flex: 1; min-width: 240px; padding: .6em .9em; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--text-secondary); font-family: monospace; font-size: .82rem;
}
@media (max-width: 700px) {
  .stats-hbar-label { width: 100px; font-size: .78rem; }
}

/* ---- rich-text editor (landing page content) ---- */
.rte { border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; padding: .4rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rte-toolbar button {
  min-width: 28px; height: 28px; padding: 0 .4em; border: 1px solid transparent; border-radius: 6px;
  background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.rte-toolbar button:hover { background: var(--accent-bg); color: var(--accent-strong); }
.rte-toolbar button.active { background: var(--accent-bg-2); color: var(--accent-strong); }
.rte-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px .3rem; }
.rte-toolbar select {
  height: 28px; padding: 0 .3em; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font: inherit; font-size: .78rem; color: var(--text-secondary); cursor: pointer;
}
.rte-toolbar input[type="color"] {
  width: 28px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); cursor: pointer;
}
.rte-editable { min-height: 220px; max-height: 480px; overflow-y: auto; padding: .8rem; font-size: .9rem; line-height: 1.55; color: var(--text-secondary); }
.rte-editable:focus { outline: none; }
.rte-editable img { max-width: 100%; border-radius: 6px; }
.rte-editable h2, .rte-editable h3 { margin: .6em 0 .3em; color: var(--text-primary); }
.rte-editable p { margin: 0 0 .8em; }
.rte-editable ul, .rte-editable ol { margin: 0 0 .8em 1.2em; }
.rte-editable blockquote { margin: .6em 0; padding: .3em 1em; border-left: 3px solid var(--accent); color: var(--text-muted); }
.rte-source { width: 100%; min-height: 220px; max-height: 480px; padding: .8rem; border: none; font: 12px/1.5 monospace; resize: vertical; background: var(--surface); color: var(--text-secondary); }
.rte-editable a { color: var(--accent-strong); text-decoration: underline; }

/* Link insert/edit dialog (opened by the rte-toolbar's 🔗 button, see rte.js) */
.rte-link-dialog { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.rte-link-dialog[hidden] { display: none; }
.rte-link-dialog-box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 1.2rem; width: 360px; max-width: 90vw; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.rte-link-dialog-title { margin: 0 0 .9rem; color: var(--text-primary); font-size: 1rem; }
.rte-link-field { margin-bottom: .7rem; }
.rte-link-field label { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .3rem; }
.rte-link-field input[type="text"] { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-2); color: var(--text-primary); font-size: .85rem; }
.rte-link-checkbox { display: flex; align-items: center; gap: .5em; font-size: .85rem; color: var(--text-secondary); margin-bottom: 1.1rem; }
.rte-link-checkbox input { width: auto; }
.rte-link-actions { display: flex; align-items: center; gap: .5rem; }

/* Floating mini-toolbar that pops up right above a text selection (see
   positionFloatBar() in rte.js) so the link button doesn't require
   scrolling back up to the fixed .rte-toolbar. */
.rte-float-toolbar { position: fixed; z-index: 999; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: .3rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); display: flex; gap: .2rem; }
.rte-float-toolbar[hidden] { display: none; }
.rte-float-toolbar button { border: none; background: transparent; color: var(--text-secondary); font-size: .95rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; line-height: 1; }
.rte-float-toolbar button:hover { background: var(--accent-bg); color: var(--accent-strong); }

.qty-suffix-group { position: relative; width: 100px; }
.qty-suffix-group input { width: 100%; padding-right: 2.6em; }
.qty-suffix-group .qty-suffix { position: absolute; right: .8em; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .82rem; font-weight: 600; pointer-events: none; }
.pkg-dims-group { display: flex; align-items: center; gap: .25rem; white-space: nowrap; }
.pkg-dims-group span { color: var(--text-muted); font-size: .8rem; }

/* ---- GreenHealth cross-brand strip (site-wide, every page) ---- */
.gh-strip { display: block; background: linear-gradient(90deg, #23361a, #3d5c2a); text-decoration: none; }
.gh-strip-inner { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; flex-wrap: wrap; }
.gh-strip-brands { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.gh-strip-av-logo { height: 22px; width: auto; }
.gh-strip-x { color: #b8caa5; font-size: .9rem; }
.gh-strip-gh-mark { display: inline-flex; align-items: center; gap: .3em; color: #d9f2c4; font-weight: 700; font-size: .92rem; letter-spacing: .01em; }
.gh-strip-gh-mark b { color: #fff; }
.gh-strip-gh-icon { height: 20px; width: auto; }
.gh-strip-text { color: #e7ecdf; font-size: .85rem; flex: 1; min-width: 180px; }
.gh-strip-cta { display: inline-flex; align-items: center; gap: .2em; color: #fff; font-weight: 700; font-size: .85rem; white-space: nowrap; background: rgba(255,255,255,.14); padding: .4em .9em; border-radius: 999px; transition: background .15s; }
.gh-strip:hover .gh-strip-cta { background: rgba(255,255,255,.26); }

/* ---- newsletter subscribe strip ---- */
.newsletter-strip { background: var(--ink-900); color: #ded7ca; margin-top: 3rem; border-bottom: 1px solid #3a352c; }
.newsletter-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.6rem 0; flex-wrap: wrap; }
.newsletter-strip-inner h3 { color: #fff; font-size: 1.15rem; margin-bottom: .2rem; }
.newsletter-strip-inner p { font-size: .85rem; color: #b8b0a1; max-width: 42ch; margin: 0; }
.newsletter-strip-form { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.newsletter-strip-form input[type="email"] { padding: .6rem .9rem; border-radius: 8px; border: 1px solid #4b463d; background: #2a2620; color: #fff; font-size: .88rem; min-width: 220px; }
.newsletter-strip-form .radio-inline { color: #ded7ca; font-size: .8rem; }

/* ---- footer ---- */
.site-footer { background: var(--ink-900); color: #ded7ca; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding: 3rem 0 2rem; }
.footer-grid h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; font-family: var(--font-sans); }
.footer-grid li { margin-bottom: .55rem; font-size: .88rem; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-social { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #4b463d; display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); }
.footer-phones li { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.footer-phone-messengers { display: flex; gap: .4em; }
.footer-phone-messengers a { display: flex; opacity: .85; transition: opacity .15s, transform .1s ease; }
.footer-phone-messengers a:hover { opacity: 1; transform: scale(1.12); }
.footer-bottom { border-top: 1px solid #3a352e; padding: 1.2rem 0; font-size: .8rem; color: #9c9384; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* ---- cart drawer ---- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(20,18,14,.45); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw; background: var(--surface); z-index: 91; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .2s ease; display: flex; flex-direction: column; }
.cart-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--border); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 1.4rem; }
.drawer-foot { padding: 1.2rem 1.4rem; border-top: 1px solid var(--border); }
.drawer-close { font-size: 1.4rem; color: var(--text-muted); }

/* ---- toast ---- */
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--ink-900); color: #fff; padding: .9em 1.3em; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600; z-index: 200; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); transition: all .2s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--ink-900); color: #f3efe8;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.cookie-banner-inner {
  max-width: 1200px; margin: 0 auto; padding: 1rem 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
}
.cookie-banner-inner p { margin: 0; font-size: .85rem; line-height: 1.5; color: #d8d2c6; max-width: 62ch; }
.cookie-banner-inner a { color: #fff; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: .6rem; flex-shrink: 0; }

/* ---- flash ---- */
.flash-list { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 480px); }
.flash-item { padding: .8em 1.1em; border-radius: var(--radius-sm); font-size: .86rem; font-weight: 600; box-shadow: var(--shadow-md); word-break: break-word; }
.flash-success { background: var(--accent-bg-2); color: var(--accent-strong); border: 1px solid var(--accent); }
.flash-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }

.jivo-spacer-note { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .product-page { grid-template-columns: 380px 1fr; gap: 1.8rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .topbar-links { display: none; }
  .cabinet-layout, .checkout-layout, .cart-layout, .reviews-layout { grid-template-columns: 1fr; }
  .review-form-card { position: static; }
  .newsletter-strip-inner { flex-direction: column; align-items: flex-start; }
  .newsletter-strip-form input[type="email"] { width: 100%; min-width: 0; }
  .gh-strip-text { display: none; }
  .gh-strip-inner { justify-content: space-between; }
  .gh-story { padding: 2.2rem 0; }
  .gh-story-headline { font-size: 1.3rem; }
  .gh-story-brands { flex-wrap: wrap; justify-content: center; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-save-bar { left: 0; padding: .8rem 1.1rem; }
  form:has(.admin-save-bar) { padding-bottom: 4rem; }
  .admin-sidebar { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .3rem; border-right: none; border-bottom: 1px solid var(--admin-border); align-items: center; min-width: 0; padding: .6rem .7rem; }
  .admin-sidebar-links, .admin-sidebar-foot { display: contents; }
  .admin-sidebar-title, .admin-sidebar-sep, .admin-nav-label { display: none; }
  .admin-sidebar a { white-space: nowrap; margin-bottom: 0; flex-shrink: 0; }
  .admin-nav-group, .admin-nav-group-links { display: contents; }
  .admin-nav-group-label { display: none; }
  .admin-nav-group-links a { padding-left: .8em; }
  .admin-main { padding: 1.4rem 1.1rem 2.5rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .admin-main [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  .admin-main [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .admin-main [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr 1fr !important; }
  .admin-toolbar .admin-search { max-width: none !important; width: 100%; }
  .search-form { display: none; }
  .mobile-search-toggle { display: flex; }
  .mega-panel { position: fixed; top: 112px; left: 12px; right: 12px; max-height: calc(100vh - 130px); }
  .mega-cat-list { width: auto; border-right: none; }
  .mega-cat-preview { display: none; }
  .main-nav { display: none; }
  .main-nav.open { display: block; position: fixed; top: 0; left: 0; height: 100%; width: 82vw; background: var(--surface); z-index: 95; box-shadow: var(--shadow-lg); overflow-y: auto; }
  .main-nav.open .container { flex-direction: column; align-items: stretch; padding: 1.2rem; }
  .mobile-toggle { display: flex; }
  .header-main { padding: 10px 0; gap: .5rem; }
  .logo { font-size: 1.05rem; gap: .4rem; }
  .logo .logo-mark { width: 30px; height: 30px; }
  .icon-btn span.label { display: none; }
  /* the icon row (search/account/favorites/cart) is the one part of the
     header that can't shrink by hiding content -- tighten its own padding
     and gaps instead, otherwise on ~390px-wide phones (iPhone 12/13/14 and
     similar) it runs past the right edge and the last icon(s) get clipped */
  .header-actions { gap: .1rem; }
  .header-actions .icon-btn { padding: .4rem .35rem; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .product-page { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .product-gallery-thumbs { display: none; }
  .product-gallery-dots { display: flex; }
  .product-info-col { text-align: center; }
  .product-meta-row, .product-price-block, .qty-row, .product-cta-row, .contact-quick { justify-content: center; }
  .variant-group > label { text-align: center; }
  .variant-options { justify-content: center; }
  .product-share { justify-content: center; }
  /* .full-desc-toggle is inline-flex, so it centers via inherited text-align: center from .product-info-col above -- no extra rule needed */
  .section { padding: 30px 0; }
  .footer-grid { grid-template-columns: 1fr; padding: 2rem 0 1rem; }
  .hero-copy-center { justify-content: flex-start; }
  .cart-row {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas: "img details remove" "price price remove";
    row-gap: .4rem;
  }
  .cart-row img { grid-area: img; }
  .cart-row .cart-details { grid-area: details; }
  .cart-row .price { grid-area: price; }
  .cart-row .cart-remove-form { grid-area: remove; align-self: start; }
}

/* ---- admin desktop/mobile preview toggle (visible only to logged-in admins) ---- */
.admin-view-toggle {
  position: fixed; bottom: 20px; left: 20px; z-index: 500;
  display: flex; gap: .25rem; background: #fff; border-radius: 999px; padding: .3rem;
  cursor: default; user-select: none;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  opacity: .6; transition: opacity .15s ease;
}
.admin-view-toggle:hover, .admin-view-toggle:focus-within { opacity: 1; }
.admin-view-toggle button {
  display: flex; align-items: center; gap: .35em; border: none; background: transparent;
  padding: .5em 1em; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s;
}
.admin-view-toggle button.active { background: var(--accent); color: #fff; }
.admin-view-toggle button:not(.active):hover { background: var(--surface-2); color: var(--text); }
.admin-view-toggle button span { white-space: nowrap; }

.admin-mobile-preview-overlay {
  position: fixed; inset: 0; z-index: 600; background: rgba(20,18,14,.72);
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.admin-mobile-preview-overlay[hidden] { display: none !important; }
.admin-mobile-preview-close {
  position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.admin-mobile-preview-close:hover { background: rgba(255,255,255,.28); }
.admin-mobile-frame {
  /* content-box here on purpose: 390x844 must be the actual iframe viewport
     (matching a real phone's logical resolution) for the preview to be
     trustworthy -- with the inherited box-sizing:border-box, the 10px
     border would eat into that and quietly shrink the emulated viewport to
     370x824, squeezing/clipping header icons that fit fine on a real phone. */
  box-sizing: content-box;
  width: 390px; height: 844px; max-height: 90vh; border-radius: 40px; border: 10px solid #1a1a1a;
  box-shadow: 0 24px 70px rgba(0,0,0,.5); overflow: hidden; background: #fff; position: relative; flex-shrink: 0;
}
.admin-mobile-frame::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 22px; background: #1a1a1a; border-radius: 0 0 14px 14px; z-index: 2;
}
.admin-mobile-frame iframe { width: 100%; height: 100%; border: none; }

@media (max-width: 480px) {
  .admin-view-toggle button span { display: none; }
  .admin-mobile-frame { width: 100%; height: 100%; border-radius: 0; border: none; }
  .admin-mobile-preview-overlay { padding: 0; }
  .admin-mobile-frame::before { display: none; }
  .add-form select { flex: 1 1 100%; font-size: .78rem; }
  .add-form button { flex: 1 1 100%; width: 100%; }
  /* Two cards per row leaves the variant <select> too narrow for longer
     labels ("30 мл — 1 025,00") and the browser hard-clips the text with
     no ellipsis instead of wrapping -- one card per row on the narrowest
     phones gives it real room instead of chasing exact character counts. */
  .product-grid { grid-template-columns: 1fr; }
}