/* ========================================
   K&K TIME STUDIO — Design System
   Луксозен дизайн за часовници, чанти, бижута
   ========================================

   ────── BREAKPOINT SYSTEM (unified) ──────
   Използваме 4 основни tier-а + 2 edge-case-а:

     --bp-compact:      480px   — Много малки phone-и
     --bp-mobile:       768px   — Mobile (primary)
     --bp-layout-col:   900px   — 2-col към 1-col layout collapse
     --bp-tablet:      1024px   — Tablet / small laptop
     --bp-product:     1100px   — Product grid 4 към 3 cols

   Забележка: CSS @media не поддържа var() — горните са
   документационни. Използвай точните стойности в media queries.
   Избягвай odd values като 700, 820, 960 — те са consolidated
   към 768 / 900 / 1024 за консистентност.
   ──────────────────────────────────────── */

/* "Luxury Serif" pairing (UI Pro Max: best for fashion brands, luxury e-commerce, jewelry)
   — Cormorant's elegance with Montserrat's geometric precision. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  color-scheme: dark light;

  /* ===== DARK THEME (default) — deep luxury ===== */
  --color-bg: #0a0a0a;
  --color-bg-soft: #141414;
  --color-bg-card: #1a1a1a;
  --color-cream: #f5f1ea;
  --color-cream-dim: #d4cdbf;
  --color-gold: #c9a961;
  --color-gold-bright: #e3c581;
  --color-gold-dark: #8a7340;
  --color-text: #f5f1ea;
  --color-text-dim: #a8a098;
  --color-text-muted: #6b655e;
  --color-border: rgba(201, 169, 97, 0.15);
  --color-border-strong: rgba(201, 169, 97, 0.4);

  /* Theme-specific surfaces/overlays */
  --color-header-bg: rgba(10, 10, 10, 0.85);
  --color-header-bg-scroll: rgba(10, 10, 10, 0.95);
  --color-header-shadow: 0 4px 20px rgba(0,0,0,0.4);
  --color-overlay: rgba(10, 10, 10, 0.85);
  --color-card-gradient: linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 60%);
  --color-wishlist-bg: rgba(245, 241, 234, 0.92);
  --color-wishlist-color: #0a0a0a;
  --color-hero-overlay: linear-gradient(90deg, #0a0a0a 0%, rgba(10,10,10,0.85) 35%, rgba(10,10,10,0.3) 70%, transparent 100%);
  --color-account-overlay: linear-gradient(rgba(10,10,10,0.5), rgba(10,10,10,0.7));
  --img-brightness: 0.55;
  --img-brightness-card: 0.75;
  --img-brightness-card-hover: 0.6;
  --grain-opacity: 0.05;

  /* Типография */
  --font-display:  'Cormorant', Georgia, 'Times New Roman', serif;
  --font-italiana: 'Cormorant', Georgia, serif;
  --font-body:     'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Алиаси за консистентност с admin.css и skill препоръките */
  --font-serif:    'Cormorant', Georgia, serif;
  --font-sans:     'Montserrat', system-ui, sans-serif;

  /* Размери */
  --container-max: 1240px;
  --container-pad: clamp(1.5rem, 5vw, 5rem);

  /* Easings */
  --ease-luxe: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Header height */
  --header-h: 72px;

  /* ── Aliases за legacy non-namespaced variables ──
     Search overlay + някои admin/dashboard rules използват кратки имена
     (--text, --bg-2, --border…) които не бяха дефинирани → invisible UI.
     Тези aliases ги mapват към реалните --color-* и автоматично следват
     light/dark theme (защото се override-ват в :root[data-theme="light"]). */
  --bg-2:        var(--color-bg-card);
  --text:        var(--color-text);
  --text-dim:    var(--color-text-dim);
  --border:      var(--color-border);
  --border-dim:  var(--color-border);
}

/* ===== LIGHT THEME ===== */
/* Applies when: user explicitly chose light, OR device prefers light and no explicit override */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #faf7f1;
  --color-bg-soft: #f0ebe0;
  --color-bg-card: #ffffff;
  --color-cream: #1a1612;
  --color-cream-dim: #3d3832;
  --color-gold: #8a7340;
  --color-gold-bright: #a68b4f;
  --color-gold-dark: #5c4c2b;
  --color-text: #1a1612;
  --color-text-dim: #5c544a;
  --color-text-muted: #928878;
  --color-border: rgba(138, 115, 64, 0.18);
  --color-border-strong: rgba(138, 115, 64, 0.5);

  --color-header-bg: rgba(250, 247, 241, 0.85);
  --color-header-bg-scroll: rgba(250, 247, 241, 0.95);
  --color-header-shadow: 0 4px 20px rgba(26, 22, 18, 0.08);
  --color-overlay: rgba(26, 22, 18, 0.5);
  --color-card-gradient: linear-gradient(to top, rgba(26,22,18,0.75) 0%, rgba(26,22,18,0.2) 45%, transparent 70%);
  --color-wishlist-bg: rgba(255, 255, 255, 0.95);
  --color-wishlist-color: #1a1612;
  --color-hero-overlay: linear-gradient(90deg, #faf7f1 0%, rgba(250,247,241,0.95) 45%, rgba(250,247,241,0.6) 75%, rgba(250,247,241,0.15) 100%);
  --color-account-overlay: linear-gradient(rgba(26,22,18,0.35), rgba(26,22,18,0.55));
  --img-brightness: 0.92;
  --img-brightness-card: 0.95;
  --img-brightness-card-hover: 0.85;
  --grain-opacity: 0.03;
}

/* Follow system preference when user has NOT explicitly chosen a theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --color-bg: #faf7f1;
    --color-bg-soft: #f0ebe0;
    --color-bg-card: #ffffff;
    --color-cream: #1a1612;
    --color-cream-dim: #3d3832;
    --color-gold: #8a7340;
    --color-gold-bright: #a68b4f;
    --color-gold-dark: #5c4c2b;
    --color-text: #1a1612;
    --color-text-dim: #5c544a;
    --color-text-muted: #928878;
    --color-border: rgba(138, 115, 64, 0.18);
    --color-border-strong: rgba(138, 115, 64, 0.5);

    --color-header-bg: rgba(250, 247, 241, 0.85);
    --color-header-bg-scroll: rgba(250, 247, 241, 0.95);
    --color-header-shadow: 0 4px 20px rgba(26, 22, 18, 0.08);
    --color-overlay: rgba(26, 22, 18, 0.5);
    --color-card-gradient: linear-gradient(to top, rgba(26,22,18,0.75) 0%, rgba(26,22,18,0.2) 45%, transparent 70%);
    --color-wishlist-bg: rgba(255, 255, 255, 0.95);
    --color-wishlist-color: #1a1612;
    --color-hero-overlay: linear-gradient(90deg, #faf7f1 0%, rgba(250,247,241,0.95) 45%, rgba(250,247,241,0.6) 75%, rgba(250,247,241,0.15) 100%);
    --color-account-overlay: linear-gradient(rgba(26,22,18,0.35), rgba(26,22,18,0.55));
    --img-brightness: 0.92;
    --img-brightness-card: 0.95;
    --img-brightness-card-hover: 0.85;
    --grain-opacity: 0.03;
  }
}

/* Smooth theme transition */
html { transition: background-color 0.3s ease; }
body, .header, .announcement, .cat-card, .testi-card, .product-img, .footer,
.cart-summary, .filter-group, .popup, .cookie, .payment-option, .contact-block,
.faq-item, .swatch, .btn, .field input, .field select, .field textarea,
.newsletter-form input, .popup-form input, .cart-promo input, .sort-select {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS — премахва синия flash при tap на интерактивни елементи */
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease-luxe); }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--color-gold); color: var(--color-bg); }

/* Изящна скрол лента */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-gold-dark); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold); }

/* ========== TYPOGRAPHY UTILITIES ========== */
.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.font-italiana { font-family: var(--font-italiana); letter-spacing: 0.04em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 640px) {
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.28em; }
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-gold);
}
.eyebrow.center::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-gold);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }

/* ========== CONTAINER ========== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ========== ANNOUNCEMENT BAR (премахнато) ========== */

/* ========== HEADER ========== */
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  transition: all 0.4s var(--ease-luxe);
}
.header.scrolled {
  background: var(--color-header-bg-scroll);
  box-shadow: var(--color-header-shadow);
}
.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 0.5rem;
}
/* Лого — компактно, без свиване */
.header-inner > .logo {
  flex-shrink: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
/* Search trigger е първият елемент в .nav, преди "Начало".
   Старото positioning веднага след логото е премахнато. */
.nav { align-items: center; }
.nav-search-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-right: 0.5rem;          /* леко разстояние спрямо първата връзка */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  transition: color 0.2s;
  font: inherit;
}
.nav-search-trigger svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.4;
  flex-shrink: 0;
}
.nav-search-trigger { flex-shrink: 0; }

/* BG думите са по-дълги от EN — намаляваме letter-spacing само за BG
   за да получим същия компактен вид както при английския език. */
html[lang="bg"] .nav a,
html[lang="bg"] .nav .nav-btn {
  letter-spacing: 0.06em;
}
.nav-search-trigger:hover { color: var(--color-gold); }
/* Навигацията се прилепва вдясно, плътно до .header-icons */
.header-inner > .nav {
  margin-left: auto;
}
/* Иконите вдясно */
.header-icons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}
/* Запазени за обратна съвместимост */
.header-left, .header-right {
  display: contents;
}

.logo {
  font-family: var(--font-italiana);
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: var(--color-cream);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.logo small {
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  margin-top: 4px;
  font-weight: 400;
}

.nav { display: flex; gap: 1.5rem; }
.nav a {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-cream);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: all 0.4s var(--ease-luxe);
  transform: translateX(-50%);
}
.nav a:hover { color: var(--color-gold); }
.nav a:hover::after, .nav a.active::after { width: 100%; }
.nav a.active { color: var(--color-gold); }

/* nav-btn — бутон styled като nav link (за #shop-trigger в навигацията) */
.nav-btn {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-cream);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  position: relative;
  font-family: inherit;
}
.nav-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: all 0.4s var(--ease-luxe);
  transform: translateX(-50%);
}
.nav-btn:hover { color: var(--color-gold); }
.nav-btn:hover::after, .nav-btn.active::after { width: 100%; }
.nav-btn.active { color: var(--color-gold); }

/* ========== SHOP MENU OVERLAY ========== */
.shop-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-luxe);
}
.shop-menu-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.shop-menu-title {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}
.shop-menu-overlay.open .shop-menu-title {
  opacity: 1;
  transform: translateY(0);
}
.shop-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, clamp(200px, 22vw, 300px));
  gap: 1.5rem;
  padding: 0 2rem;
}
/* Анимиране на cat-cards в overlay */
.shop-menu-grid .cat-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.shop-menu-overlay.open .shop-menu-grid .cat-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.shop-menu-overlay.open .shop-menu-grid .cat-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.shop-menu-overlay.open .shop-menu-grid .cat-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

.shop-menu-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-cream);
  opacity: 0.6;
  padding: 8px;
  transition: opacity 0.2s;
}
.shop-menu-close:hover { opacity: 1; }
.shop-menu-close svg { width: 28px; height: 28px; }

/* Линк "Виж всичко" под картите */
.shop-menu-all {
  margin-top: 2rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.45s, transform 0.4s ease 0.45s;
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
}
.shop-menu-overlay.open .shop-menu-all {
  opacity: 0.75;
  transform: translateY(0);
}
.shop-menu-all:hover { opacity: 1; color: var(--color-gold); }

/* Drawer: разширяем под-списък за Магазин */
.drawer-shop-sub {
  display: none;
  flex-direction: column;
  padding-left: 1.2rem;
  gap: 0;
  overflow: hidden;
}
.drawer-shop-sub.open { display: flex; }
.drawer-shop-sub a {
  font-size: 0.82rem;
  padding: 0.55rem 0;
  color: var(--color-cream);
  opacity: 0.75;
  border-bottom: none;
}
.drawer-shop-sub a:hover { opacity: 1; color: var(--color-gold); }
.drawer-shop-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-cream);
  padding: 0;
  text-align: left;
}
.drawer-shop-trigger:hover { color: var(--color-gold); }
.drawer-shop-trigger svg {
  width: 16px; height: 16px;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.drawer-shop-trigger.open svg { transform: rotate(180deg); }

@media (max-width: 768px) {
  .shop-menu-grid {
    grid-template-columns: 1fr;
    max-height: 70vh;
    overflow-y: auto;
  }
  .shop-menu-grid .cat-card { aspect-ratio: 5/2; }
}

.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-cream);
  transition: color 0.3s var(--ease-luxe);
}
/* WCAG 2.5.5 — minimum 44x44px tap target on touch devices.
   Header icons stay at 40px (visually compact luxury header) — explicitly opted out below. */
@media (hover: none) and (pointer: coarse) {
  .icon-btn,
  .theme-toggle,
  .menu-toggle,
  .drawer-close,
  .product-wishlist,
  .product-remove,
  .modal-close,
  .lightbox-close,
  .lightbox-arrow,
  .lightbox-prev,
  .lightbox-next {
    min-width: 44px;
    min-height: 44px;
  }
  /* Header is visually compact — opt out of the 44px floor inside header only. */
  .header .icon-btn,
  .header .theme-toggle,
  .header .menu-toggle {
    min-width: 0;
    min-height: 0;
  }
}
/* При вписан потребител #header-profile се превръща в "Здравей, X"
   — махаме фиксираната ширина за да не прелива върху theme-toggle. */
.icon-btn.is-greeting {
  width: auto;
  padding: 0 10px;
  text-decoration: none;
}
.icon-btn:hover { color: var(--color-gold); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.2; }
.icon-btn .badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--color-gold);
  color: var(--color-bg);
  font-size: 0.55rem;
  font-weight: 600;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

/* Theme toggle button */
.theme-toggle {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-cream);
  transition: color 0.3s var(--ease-luxe), transform 0.5s var(--ease-luxe);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--color-gold);
  transform: rotate(15deg);
}
.theme-toggle svg { width: 18px; height: 18px; stroke-width: 1.4; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.menu-toggle {
  display: none;
  /* Bullet-proofing: дори при overflow в header, hamburger стои видим */
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-inner > .logo { margin-left: 0; }
}
@media (max-width: 768px) {
  .logo { font-size: 1rem; }
  :root { --header-h: 70px; }
  /* Slightly tighter spacing 481-768px range */
  .header-icons { gap: 0.3rem; }
}
/* Phone-size header — full icon set [☰] [logo] [profile] [wishlist] [theme] [cart].
   Compact icon size + tight gaps so logo and the 4-icon stack both fit on 360-480px. */
@media (max-width: 768px) {
  /* Compact icon hit boxes on mobile */
  .header .icon-btn,
  .header .theme-toggle,
  .header .menu-toggle {
    width: 36px;
    height: 36px;
  }
  .header .icon-btn svg,
  .header .theme-toggle svg,
  .header .menu-toggle svg { width: 17px; height: 17px; }
  .header .icon-btn::before,
  .header .theme-toggle::before { inset: 3px; }
}
@media (max-width: 480px) {
  /* Greeting текст + logout бутон се крият на phone (тесен header).
     Profile иконата остава видима — водеща към profile.html. */
  #header-greeting,
  .icon-btn.is-greeting,
  #logout-btn { display: none; }
  .header-icons { gap: 3px; margin-left: auto; }
  .header-inner { gap: 0.4rem; }
  .header .icon-btn,
  .header .menu-toggle { width: 34px; height: 34px; }
  /* Лого размерът за ≤480/≤360 е дефиниран по-долу (след .header .logo
     блока на ред ~5200), за да override-не 1.05rem ≤768 правилото. */
  .header-inner > .logo { margin-left: 0; }
}
/* Phone: hide theme toggle за да съберем logo + 3-те commerce икони
   (profile / wishlist / cart) без horizontal overflow на 361-480px range.
   Theme persist-ва в localStorage — set веднъж от desktop и остава. */
@media (max-width: 480px) {
  .header .theme-toggle { display: none; }
}
/* Very narrow phones: shrink icons допълнително (лого размерът — по-долу).
   Стягаме и gap-овете: на 320px hamburger+лого(nowrap)+икони не се събират
   в content-а → икони изтичат ~4px извън вьюпорта. По-малък gap ги прибира. */
@media (max-width: 360px) {
  .header .icon-btn,
  .header .menu-toggle { width: 32px; height: 32px; }
  .header .icon-btn svg,
  .header .menu-toggle svg { width: 16px; height: 16px; }
  .header-inner { gap: 0.2rem; }
  .header-icons { gap: 2px; }
}

/* Mobile drawer — must sit above chat-widget (9998) and social-float (50)
   so opening the drawer cleanly covers floating elements behind. */
.drawer {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-luxe);
  padding: 2rem;
  padding-top:    calc(2rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  padding-left:   calc(2rem + env(safe-area-inset-left, 0px));
  padding-right:  calc(2rem + env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.drawer-nav { display: flex; flex-direction: column; gap: 1.5rem; }
.drawer-nav a {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-cream);
}
.drawer-nav a:hover, .drawer-nav a.active { color: var(--color-gold); }
.drawer-foot {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Drawer-foot row: profile + theme + wishlist (mirrors what's hidden from header on <480px) */
.drawer-foot .drawer-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.drawer-foot .drawer-actions a,
.drawer-foot .drawer-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  min-height: 44px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
  text-decoration: none;
  position: relative;
}
.drawer-foot .drawer-actions a:hover,
.drawer-foot .drawer-actions button:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.drawer-foot .drawer-actions svg { width: 18px; height: 18px; stroke-width: 1.4; }
.drawer-foot .drawer-actions .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-gold);
  color: var(--color-bg);
  font-size: 0.55rem;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Theme toggle inside drawer — show whichever icon matches current theme */
.drawer-actions .theme-toggle .icon-sun { display: none; }
.drawer-actions .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .drawer-actions .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .drawer-actions .theme-toggle .icon-moon { display: none; }

/* ============================================================
   MOBILE DRAWER — typography & spacing tuned for phone use
   Drawer is mobile-only by design but base font-size: 2rem reads
   as oversized on real devices. Override down to 1.25rem.
   ============================================================ */
@media (max-width: 768px) {
  .drawer-nav { gap: 0.25rem; }
  .drawer-nav a,
  .drawer-shop-trigger {
    font-size: 1.25rem;
    padding: 0.75rem 0;
    line-height: 1.2;
  }
  .drawer-shop-sub {
    padding-left: 1rem;
  }
  .drawer-shop-sub a {
    font-size: 1rem;
    padding: 0.5rem 0;
  }
  .drawer-head { margin-bottom: 2rem; }
}

/* ========== HERO ========== */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-bg);
}

/* На началната страница: header-ът остава нормалeн (както на другите страници);
   градиентът върху снимката и оригиналното текст-стилизиране също се запазват.
   Премахваме само радиалното бяло "хало" зад текста. */
body.page-home .hero-content::before { display: none !important; }
.hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 75% 45%, rgba(201, 169, 97, 0.10), transparent 65%),
    url('/images/hero-watchmaker.jpg?v=20260512');
  background-size: cover;
  background-position: 55% center;
  filter: brightness(var(--img-brightness)) contrast(1.08) saturate(1.05);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(10, 10, 10, 0.78) 0%,
      rgba(10, 10, 10, 0.55) 40%,
      rgba(10, 10, 10, 0.28) 70%,
      rgba(10, 10, 10, 0.15) 100%
    ),
    var(--color-hero-overlay);
}
:root[data-theme="light"] .hero-bg::after {
  /* Светла тема: по-лек кремав слой, за да изпъкне снимката на майстора-
     часовникар вдясно (одобрено от Andrey, 2026-05-29). Слоят е плътен отляво
     (текстът остава четим) и избледнява до прозрачно надясно, където преди
     hero-ът изглеждаше празен. Преди: двоен градиент скриваше снимката почти
     напълно. Тъмната тема НЕ е променяна. */
  background:
    linear-gradient(
      to right,
      rgba(250, 247, 241, 0.97) 0%,
      rgba(250, 247, 241, 0.91) 28%,
      rgba(250, 247, 241, 0.60) 50%,
      rgba(250, 247, 241, 0.16) 76%,
      rgba(250, 247, 241, 0.00) 100%
    );
}
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain-opacity);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 6rem 0;
}
.hero h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 300;
  line-height: 0.95;
  margin: 1.5rem 0 2rem;
  color: var(--color-cream);
}
.hero h1 em {
  font-style: italic;
  color: var(--color-gold);
  font-weight: 400;
}
.hero p {
  font-size: 1.05rem;
  color: var(--color-text-dim);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  font-weight: 300;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-side {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  color: var(--color-text-dim);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero-side .scroll {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-side .scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero-side .scroll-line::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--color-gold-bright);
  animation: scrollDown 2.5s var(--ease-luxe) infinite;
}
@keyframes scrollDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(300%); }
}
@media (max-width: 1024px) { .hero-side { display: none; } }

/* ============================================================
   HERO READABILITY — text-shadow & backdrop overlay
   Reinforced 2026-05-12 for the watchmaker portrait background:
   busier composition demands deeper shadow + stronger backdrop fade.
   ============================================================ */
.hero h1 {
  text-shadow:
    0 2px 28px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] .hero h1 {
  text-shadow:
    0 0 28px rgba(250, 247, 241, 0.95),
    0 0 12px rgba(250, 247, 241, 0.85),
    0 1px 4px rgba(250, 247, 241, 0.7);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero h1 {
    text-shadow:
      0 0 28px rgba(250, 247, 241, 0.95),
      0 0 12px rgba(250, 247, 241, 0.85),
      0 1px 4px rgba(250, 247, 241, 0.7);
  }
}
.hero p {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] .hero p {
  text-shadow: 0 0 14px rgba(250, 247, 241, 0.92), 0 1px 4px rgba(250, 247, 241, 0.75);
}

/* ============================================================
   HERO TWEAKS (одобрено от Andrey, 2026-05-29) — върху снимката:
   1) махнат бял "кант"/ореол около gold "лукс" в светлата тема
   2) подзаглавието — една идея по-плътно за четимост на фона
   3) бутон "Нашата история" (.btn-ghost) — бял фон, само в hero-а
   ============================================================ */
:root[data-theme="light"] .hero h1 em { text-shadow: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero h1 em { text-shadow: none; }
}
.hero p { font-weight: 500; }
.hero .btn-ghost {
  background: #ffffff;
  border-color: #ffffff;
  color: #1a1612;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}
.hero .btn-ghost:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #1a1612;
}

/* Backup overlay BEHIND the text content — radial fade in current bg colour.
   z-index: -1 stacks behind h1/p (siblings) but inside .hero-content's
   stacking context so it stays above .hero-bg::after. */
.hero-content {
  isolation: isolate;
}
.hero-content::before {
  content: '';
  position: absolute;
  inset: -2rem -3.5rem -1.5rem -3.5rem;
  z-index: -1;
  background: radial-gradient(ellipse at 22% 50%, var(--color-bg) 0%, transparent 75%);
  opacity: 0.72;
  pointer-events: none;
  border-radius: 16px;
}

/* ============================================================
   HERO — TABLET (≤1024px) overlay strengthening for portrait subject
   ============================================================ */
@media (max-width: 1024px) {
  .hero-bg {
    /* Pull the watchmaker's face into upper-right; clears space for text */
    background-position: 72% center;
  }
  .hero-bg::after {
    background:
      linear-gradient(
        to right,
        rgba(10, 10, 10, 0.82) 0%,
        rgba(10, 10, 10, 0.62) 45%,
        rgba(10, 10, 10, 0.32) 80%,
        rgba(10, 10, 10, 0.18) 100%
      ),
      var(--color-hero-overlay);
  }
  :root[data-theme="light"] .hero-bg::after {
    background:
      linear-gradient(
        to right,
        rgba(250, 247, 241, 0.92) 0%,
        rgba(250, 247, 241, 0.75) 45%,
        rgba(250, 247, 241, 0.42) 80%,
        rgba(250, 247, 241, 0.22) 100%
      ),
      var(--color-hero-overlay);
  }
}

/* ============================================================
   HERO — MOBILE (≤768px) horizontal overlay strengthening
   ============================================================ */
@media (max-width: 768px) {
  .hero-bg {
    background-position: 78% 30%;
  }
  .hero-bg::after {
    background:
      linear-gradient(
        to right,
        rgba(10, 10, 10, 0.88) 0%,
        rgba(10, 10, 10, 0.72) 55%,
        rgba(10, 10, 10, 0.45) 100%
      ),
      var(--color-hero-overlay);
  }
  :root[data-theme="light"] .hero-bg::after {
    background:
      linear-gradient(
        to right,
        rgba(250, 247, 241, 0.96) 0%,
        rgba(250, 247, 241, 0.82) 55%,
        rgba(250, 247, 241, 0.55) 100%
      ),
      var(--color-hero-overlay);
  }
  .hero p {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  :root[data-theme="light"] .hero p {
    text-shadow: 0 0 14px rgba(250, 247, 241, 0.9), 0 1px 3px rgba(250, 247, 241, 0.7);
  }
  .hero-content::before {
    inset: -1.5rem -2.25rem;
    opacity: 0.78;
    background: radial-gradient(ellipse at 28% 50%, var(--color-bg) 0%, transparent 78%);
  }
}

/* ≤480px — vertical fade since text spans full width */
@media (max-width: 480px) {
  .hero-bg {
    background-position: 82% 28%;
  }
  .hero-bg::after {
    background:
      linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.78) 35%,
        rgba(10, 10, 10, 0.88) 100%
      ),
      var(--color-hero-overlay);
  }
  :root[data-theme="light"] .hero-bg::after {
    background:
      linear-gradient(
        180deg,
        rgba(250, 247, 241, 0.55) 0%,
        rgba(250, 247, 241, 0.82) 35%,
        rgba(250, 247, 241, 0.94) 100%
      ),
      var(--color-hero-overlay);
  }
  .hero-content {
    padding: 3.5rem 0 2.5rem;
  }
  .hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.6rem);
    margin: 1rem 0 1.5rem;
  }
  .hero p {
    font-size: 0.98rem;
    margin-bottom: 1.75rem;
  }
  .hero-actions { gap: 0.75rem; }
  .hero-content::before {
    inset: -1rem -1.5rem;
    opacity: 0.85;
    background: radial-gradient(ellipse at 50% 55%, var(--color-bg) 0%, transparent 82%);
  }
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.1rem 2.25rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.4s var(--ease-luxe);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-gold);
  color: var(--color-bg);
}
.btn-primary:hover {
  background: var(--color-gold-bright);
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(201, 169, 97, 0.25);
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-cream);
}
.btn-ghost:hover {
  background: rgba(201, 169, 97, 0.08);
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-cream);
  color: var(--color-cream);
}
.btn-outline:hover {
  background: var(--color-cream);
  color: var(--color-bg);
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-luxe);
}
.btn:hover .arrow { transform: translateX(4px); }
/* Компактни бутони на телефон — дългият БГ текст + широкият letter-spacing
   причиняваха horizontal overflow на тесни екрани (напр. brand CTA
   „Виж всички … модели"). Позволяваме и wrap като краен fallback. */
@media (max-width: 480px) {
  .btn {
    padding: 1rem 1.5rem;
    letter-spacing: 0.14em;
    max-width: 100%;
    white-space: normal;
  }
}

/* ========== SECTION ========== */
section { padding: clamp(4rem, 10vw, 8rem) 0; position: relative; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
  gap: 2rem;
  flex-wrap: wrap;
}
.section-head.center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* align-items:center сайзва децата по max-content → дълъг eyebrow/заглавие с
   letter-spacing може да стърчи извън контейнера на тесни екрани. Кап до 100%. */
.section-head.center > * {
  max-width: 100%;
  overflow-wrap: break-word;
}
.section-head h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  margin-top: 1rem;
  /* min(700px,100%): на десктоп 700px (непроменено), на тесни екрани се сваля
     до ширината на контейнера, за да не стърчи дълга дума (напр. центрирано
     h2 във flex-column section-head сайзва по max-content). */
  max-width: min(700px, 100%);
  overflow-wrap: break-word;
}
.section-head h2 em {
  font-style: italic;
  color: var(--color-gold);
}
.section-head .head-link {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-gold);
}
.section-head .head-link:hover { gap: 1rem; }

/* ========== CATEGORIES ========== */
.categories {
  padding-top: 0;
  background: var(--color-bg);
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--color-bg-card);
  cursor: pointer;
}
.cat-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-luxe);
  filter: brightness(var(--img-brightness-card));
}
.cat-card:hover img { transform: scale(1.06); filter: brightness(var(--img-brightness-card-hover)); }
.cat-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  color: var(--color-cream);
  /* По-силен gradient отдолу — гарантира четимост в двата режима */
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.55) 30%,
    rgba(0,0,0,0.18) 55%,
    transparent 80%);
}
.cat-card .num {
  font-family: var(--font-italiana);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: #e3c581;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.cat-card h3 {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.55);
}
.cat-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  padding-top: 1rem;
  border-top: 1px solid rgba(245, 241, 234, 0.15);
  margin-top: 1rem;
}
.cat-card .meta .arrow {
  width: 28px; height: 28px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  transition: all 0.4s var(--ease-luxe);
}
.cat-card:hover .meta .arrow {
  background: var(--color-gold);
  color: var(--color-bg);
}

/* ========== PRODUCT GRID ========== */
.products-section { background: var(--color-bg-soft); }
.product-grid {
  display: grid;
  /* Fluid columns с по-голям min — auto-fill реши колко колони
     се събират. min 300px = 3 карти × ~316px на shop layout —
     по-четими, по-luxury feel. На по-широки монитори (≥2000px)
     може да дойде 4-та колона естествено. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.25rem 1.75rem;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (max-width: 768px)  { .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.5rem 1rem; } }

/* Shop page — по-широк container за по-добро използване на desktop viewport.
   Запазва оригиналните 1240px за homepage / legal pages / други. */
body[data-page="shop"] .container { max-width: 1500px; }

.product {
  position: relative;
  cursor: pointer;
  display: block;
  color: inherit;
}
.product-img {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--color-bg-card);
  margin-bottom: 1.25rem;
}
.product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: all 0.8s var(--ease-luxe);
}
.product:hover .product-img img { transform: scale(1.05); }

/* ── Skeleton placeholders (top-products.js докато fetch-ва) ── */
.product.product-skeleton {
  pointer-events: none;
  cursor: default;
  opacity: 0.85;
}
.product-skeleton:hover .product-img img { transform: none; }
.product-skeleton .product-img {
  /* shimmer gradient на празния .product-img блок */
  background: linear-gradient(
    90deg,
    var(--color-bg-card) 0%,
    rgba(201, 169, 97, 0.08) 50%,
    var(--color-bg-card) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}
.product-skeleton .product-info {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-skeleton .skel-line {
  display: block;
  height: 14px;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--color-bg-card) 0%,
    rgba(201, 169, 97, 0.08) 50%,
    var(--color-bg-card) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}
.product-skeleton .skel-line-sm { width: 60%; height: 11px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product-skeleton .product-img,
  .product-skeleton .skel-line { animation: none; }
}
/* ============================================================
   LUXURY STATUS BADGES — premium pill style
   Unified for .product-tag (top-products, shop, wishlist) и .rv-badge (recently viewed).
   ============================================================ */
.product-tag,
.product-badge,
.product-status-tag,
.rv-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;

  /* Default — luxury gold/bronze (за "По заявка") */
  background: linear-gradient(135deg, #9c8358 0%, #6b5638 100%);
  color: #ffffff;

  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;

  padding: 7px 14px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  user-select: none;
}

.product:hover .product-tag,
.product-card:hover .product-badge,
.rv-card:hover .rv-badge {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* "ПО ЗАЯВКА" — default gold/brown (explicit modifier) */
.product-tag.tag-order,
.product-badge.badge-on-order,
.rv-badge.onorder {
  background: linear-gradient(135deg, #9c8358 0%, #6b5638 100%);
  color: #ffffff;
}

/* "ЛИМИТИРАН" — dark premium (back-compat: .product-tag.gold) */
.product-tag.tag-limited,
.product-tag.gold,
.product-badge.badge-limited {
  background: linear-gradient(135deg, #2c2520 0%, #1a1612 100%);
  color: #d4b582;
  border-color: rgba(212, 181, 130, 0.25);
}

/* "НОВ" — lighter beige */
.product-tag.tag-new,
.product-badge.badge-new {
  background: linear-gradient(135deg, #c9a961 0%, #a08446 100%);
  color: #ffffff;
}

/* "В НАЛИЧНОСТ" — subtle, almost transparent */
.product-tag.tag-instock,
.product-badge.badge-instock {
  background: rgba(255, 255, 255, 0.92);
  color: #2c2520;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* "Изчерпан" — dark red (rv-badge soldout) */
.rv-badge.soldout {
  background: linear-gradient(135deg, #5a1a1a 0%, #3d0e0e 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Mobile — leko po-malki */
@media (max-width: 768px) {
  .product-tag,
  .product-badge,
  .product-status-tag,
  .rv-badge {
    top: 10px;
    left: 10px;
    font-size: 8.5px;
    padding: 6px 11px;
    letter-spacing: 0.15em;
  }
}
.product-wishlist {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  background: var(--color-wishlist-bg);
  color: var(--color-wishlist-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.4s var(--ease-luxe);
}
.product:hover .product-wishlist { opacity: 1; transform: translateY(0); }
.product-wishlist:hover { background: var(--color-gold); }
.product-wishlist svg { width: 16px; height: 16px; stroke-width: 1.4; }

.product-info { padding: 0 0.25rem; }
.product-brand {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 0.35rem;
}
.product-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-cream);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  font-weight: 400;
}
.product-price {
  font-size: 0.9rem;
  color: var(--color-cream);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}
.product-price .old {
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-right: 0.6rem;
  font-size: 0.8rem;
}
.product-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-dim);
  margin-top: 0.4rem;
}
.product-rating .stars { color: var(--color-gold); letter-spacing: 0.05em; }

/* ========== EDITORIAL BANNER ========== */
.banner {
  position: relative;
  padding: 0;
  background: var(--color-bg);
}
.banner-inner {
  position: relative;
  min-height: 70vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 900px) { .banner-inner { grid-template-columns: 1fr; } }
.banner-img {
  position: relative;
  height: 100%;
  min-height: 500px;
  background-image: url('https://images.unsplash.com/photo-1611652022419-a9419f74343d?q=80&w=1600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
}
.banner-content {
  padding: 5rem 4rem;
  max-width: 600px;
}
@media (max-width: 768px) { .banner-content { padding: 3rem 1.5rem; } }
.banner-content h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin: 1.5rem 0;
  line-height: 1;
}
.banner-content h2 em { font-style: italic; color: var(--color-gold); }
.banner-content p {
  color: var(--color-text-dim);
  margin-bottom: 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.banner-meta {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.banner-meta strong {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-gold);
  font-weight: 400;
  display: block;
  letter-spacing: 0;
  margin-bottom: 0.25rem;
}

/* ========== TESTIMONIALS ========== */
.testimonials {
  background: var(--color-bg);
  position: relative;
}
.testimonials::before {
  content: '"';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 30rem;
  color: var(--color-gold);
  opacity: 0.04;
  pointer-events: none;
  line-height: 1;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card {
  background: var(--color-bg-card);
  padding: 3rem 2.5rem;
  border: 1px solid var(--color-border);
  position: relative;
  transition: all 0.5s var(--ease-luxe);
}
.testi-card:hover {
  border-color: var(--color-gold-dark);
  transform: translateY(-4px);
}
.testi-card .stars {
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}
.testi-card blockquote {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-cream);
  margin-bottom: 2rem;
}
.testi-card .author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.testi-card .author-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bg);
  font-weight: 600;
  font-size: 1.05rem;
  font-family: var(--font-display);
}
.testi-card .author-info strong {
  display: block;
  color: var(--color-cream);
  font-weight: 400;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.testi-card .author-info span {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* ========== BRANDS STRIP ========== */
.brands {
  padding: 4rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
}
.brands-track {
  display: flex;
  align-items: center;
  gap: 5rem;
  animation: scroll 35s linear infinite;
  white-space: nowrap;
}
@keyframes scroll {
  to { transform: translateX(-50%); }
}
.brands-track span {
  font-family: var(--font-italiana);
  font-size: 1.75rem;
  letter-spacing: 0.25em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.3s var(--ease-luxe);
}
.brands-track span:hover { color: var(--color-gold); }
@media (max-width: 768px) {
  .brands-track { animation-duration: 22s; }
}

/* ========== NEWSLETTER / FOOTER ========== */
.newsletter {
  background: var(--color-bg);
  padding: 6rem 0 4rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.newsletter h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin: 1rem 0 1rem;
}
.newsletter h2 em { font-style: italic; color: var(--color-gold); }
.newsletter p {
  color: var(--color-text-dim);
  max-width: 480px;
  margin: 0 auto 2.5rem;
}
.newsletter-form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.newsletter-form input {
  flex: 1;
  min-width: 220px;
  padding: 1.1rem 1.5rem;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-cream);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border-radius: 999px;
  outline: none;
  transition: border-color 0.3s var(--ease-luxe);
}
.newsletter-form input:focus { border-color: var(--color-gold); }
.newsletter-form input::placeholder { color: var(--color-text-muted); }

.footer {
  background: var(--color-bg-soft);
  padding: 5rem 0 2rem;
  border-top: 1px solid var(--color-border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: auto 1fr; gap: 3rem 2rem; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.75rem;
  font-weight: 500;
}
.footer-brand .logo { align-items: flex-start; margin-bottom: 1.5rem; }
.footer-brand p {
  color: var(--color-text-dim);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: 1.5rem;
}
.footer-social { display: flex; gap: 0.75rem; }
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  transition: all 0.3s var(--ease-luxe);
}
.footer-social a:hover {
  background: var(--color-gold);
  color: var(--color-bg);
  border-color: var(--color-gold);
}
.footer-social svg { width: 15px; height: 15px; }

.footer-links { display: flex; flex-direction: column; gap: 0.85rem; }
.footer-links a {
  color: var(--color-text-dim);
  font-size: 0.88rem;
}
.footer-links a:hover { color: var(--color-gold); }

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}
/* ========== FLOATING SOCIAL BUTTONS (Viber + WhatsApp) ========== */
/* Плаващ chat-widget — едно elegant card + 2 икони, едно до друго */
.social-float {
  position: fixed;
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  right: calc(2rem + env(safe-area-inset-right, 0px));
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
/* Hide on legal pages — they already use .back-to-top in the same corner.
   Visitors can still reach contact via header phone or footer links. */
body[data-page="privacy"] .social-float,
body[data-page="terms"] .social-float,
body[data-page="cookies"] .social-float {
  display: none;
}

.social-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

/* Базов стил за двата бутона */
.social-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.3s var(--ease-luxe);
  position: relative;
  flex-shrink: 0;
}
.social-btn svg { width: 30px; height: 30px; }
.social-btn:hover { transform: scale(1.1) rotate(-5deg); }

/* Viber — лилав */
.social-viber {
  background: #665CAC;
  box-shadow: 0 12px 32px rgba(102, 92, 172, 0.4);
  animation: pulseViber 2.5s ease-out infinite;
}
@keyframes pulseViber {
  0%, 100% { box-shadow: 0 12px 32px rgba(102, 92, 172, 0.4); }
  50%       { box-shadow: 0 12px 32px rgba(102, 92, 172, 0.4), 0 0 0 16px rgba(102, 92, 172, 0); }
}

/* WhatsApp — зелен */
.social-whatsapp {
  background: #25D366;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
  animation: pulseWA 2.5s ease-out infinite;
}
@keyframes pulseWA {
  0%, 100% { box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4); }
  50%       { box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4), 0 0 0 16px rgba(37, 211, 102, 0); }
}

/* Единен luxury tooltip card — theme-aware */
.social-tooltip {
  /* Defaults = dark theme */
  --tt-bg-from:    #0d0d0d;
  --tt-bg-to:      #181818;
  --tt-text:       rgba(255, 255, 255, 0.93);
  --tt-arrow-fill: #131313;
  --tt-shadow:     0 18px 50px rgba(0, 0, 0, 0.55);
  --tt-close:      rgba(201, 169, 97, 0.65);
  --tt-close-hover: #fff;

  position: relative;
  padding: 16px 38px 16px 22px;
  min-width: 250px;
  max-width: 280px;
  background: linear-gradient(135deg, var(--tt-bg-from) 0%, var(--tt-bg-to) 100%);
  border: 1px solid rgba(201, 169, 97, 0.55);
  border-radius: 10px;
  box-shadow:
    var(--tt-shadow),
    0 0 0 1px rgba(201, 169, 97, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  text-align: left;
  animation: fadeInTooltip 0.6s ease-out 0.8s both;
  flex-shrink: 1;
}

/* Light theme override */
:root[data-theme="light"] .social-tooltip {
  --tt-bg-from:    #ffffff;
  --tt-bg-to:      #faf7f1;
  --tt-text:       #2a2a2a;
  --tt-arrow-fill: #fcfaf5;
  --tt-shadow:     0 18px 50px rgba(0, 0, 0, 0.18);
  --tt-close:      #8a7340;
  --tt-close-hover: #2a2a2a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .social-tooltip {
    --tt-bg-from:    #ffffff;
    --tt-bg-to:      #faf7f1;
    --tt-text:       #2a2a2a;
    --tt-arrow-fill: #fcfaf5;
    --tt-shadow:     0 18px 50px rgba(0, 0, 0, 0.18);
    --tt-close:      #8a7340;
    --tt-close-hover: #2a2a2a;
  }
}

.social-tooltip-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: #d4b775;
  margin-bottom: 6px;
}
:root[data-theme="light"] .social-tooltip-eyebrow { color: #8a7340; }

.social-tooltip-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--tt-text);
  margin: 0;
}

/* Х бутон — горе вдясно на tooltip-а */
.social-tooltip-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--tt-close);
  font-size: 1.15rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: color 0.2s;
}
.social-tooltip-close:hover { color: var(--tt-close-hover); }

/* Две стрелки на дясната страна — сочат към двата бутона */
.social-tooltip-arrow {
  position: absolute;
  right: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 11px;
  border-color: transparent transparent transparent rgba(201, 169, 97, 0.55);
  filter: drop-shadow(1px 0 0 rgba(0,0,0,0.3));
}
/* Допълнителен fill за да изглежда стрелката като част от card-а */
.social-tooltip-arrow::after {
  content: '';
  position: absolute;
  top: -7px;
  left: -11px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 9px;
  border-color: transparent transparent transparent var(--tt-arrow-fill);
}
.social-tooltip-arrow-top    { top: 22px; }
.social-tooltip-arrow-bottom { bottom: 22px; }

/* Скрит tooltip след натискане на X */
.social-tooltip.hidden { display: none; }

@keyframes fadeInTooltip {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Мобилно: по-малки бутони, без tooltip */
@media (max-width: 768px) {
  .social-float {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right:  calc(1rem + env(safe-area-inset-right, 0px));
    gap: 10px;
  }
  .social-buttons { gap: 12px; }
  .social-btn { width: 52px; height: 52px; }
  .social-btn svg { width: 26px; height: 26px; }
  .social-tooltip { display: none; }
}

/* ========== POPUP ========== */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.5s var(--ease-luxe);
}
.popup-overlay.active { display: flex; opacity: 1; }
.popup {
  background: var(--color-bg-soft);
  max-width: 480px;
  width: 100%;
  padding: 3.5rem 3rem;
  border: 1px solid var(--color-gold-dark);
  position: relative;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.5s var(--ease-luxe);
}
.popup-overlay.active .popup { transform: scale(1); }
.popup-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  font-size: 1.5rem;
  color: var(--color-text-dim);
}
.popup-close:hover { color: var(--color-gold); }
.popup .eyebrow { justify-content: center; margin-bottom: 1rem; }
.popup h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-cream);
}
.popup h3 em { font-style: italic; color: var(--color-gold); }
.popup p {
  color: var(--color-text-dim);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}
.popup-form { display: flex; flex-direction: column; gap: 0.75rem; }
.popup-form input {
  padding: 1rem 1.25rem;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-cream);
  font-size: 0.85rem;
  border-radius: 999px;
  outline: none;
  transition: border-color 0.3s;
}
.popup-form input:focus { border-color: var(--color-gold); }
.popup-form input::placeholder { color: var(--color-text-muted); }
.popup-fineprint {
  margin-top: 1.25rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* ========== COOKIE BANNER ========== */
.cookie {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border-strong);
  padding: 1.25rem 2rem;
  /* iPhone home-indicator safe area — banner content sits above the system gesture bar */
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  padding-left:   calc(2rem    + env(safe-area-inset-left, 0px));
  padding-right:  calc(2rem    + env(safe-area-inset-right, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-luxe);
}
.cookie.show { transform: translateY(0); }
.cookie p { font-size: 0.82rem; color: var(--color-text-dim); flex: 1; }
.cookie p a { color: var(--color-gold); text-decoration: underline; }
.cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cookie .btn { padding: 0.7rem 1.5rem; font-size: 0.65rem; }
@media (max-width: 768px) {
  .cookie {
    flex-direction: column;
    z-index: 9000;                                        /* над content/footer/social-float, под chat (9998) */
    max-height: 60vh;                                     /* да не закрива целия екран */
    overflow-y: auto;
    border-top: 2px solid var(--color-gold);              /* gold accent line за visibility */
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    padding-left:   calc(1rem + env(safe-area-inset-left, 0px));
    padding-right:  calc(1rem + env(safe-area-inset-right, 0px));
    gap: 0.875rem;
  }
  .cookie p { text-align: center; font-size: 0.875rem; line-height: 1.5; }
  /* Buttons stack vertically — пълна ширина, ≥44px tap targets */
  .cookie-actions {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .cookie-actions .btn,
  .cookie-actions .btn-link {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
  }
  .cookie-actions .btn-primary { order: 1; }              /* "Приемам всички" първо */
  .cookie-actions .btn-ghost   { order: 2; }              /* "Само необходимите" */
  .cookie-actions .btn-link    { order: 3; padding: 0.5rem; }  /* "Настройки" текст-линк */

  /* Settings modal — full-screen takeover на mobile */
  .cookie-settings { z-index: 9500; padding: 0; }
  .cookie-settings-panel {
    max-width: 100%;
    width: 100vw;
    max-height: 100vh;
    height: 100dvh;                                       /* dynamic viewport (iOS chrome) */
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .cookie-settings h3 {
    position: sticky;
    top: 0;
    background: var(--color-bg-card);
    padding: 1.25rem 1.25rem 0.75rem;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
    z-index: 1;
  }
  .cookie-settings .intro,
  .cookie-cat { padding-left: 1.25rem; padding-right: 1.25rem; }
  .cookie-settings-actions {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: var(--color-bg-card);
    padding: 0.85rem 1.25rem
             calc(0.85rem + env(safe-area-inset-bottom, 0px))
             1.25rem;
    border-top: 1px solid var(--color-border);
    flex-wrap: nowrap;
  }
  .cookie-settings-actions .btn { min-height: 44px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .cookie { padding: 0.875rem; }
  .cookie-settings h3 { font-size: 1.2rem; }
  .cookie-cat-info h4 { font-size: 0.875rem; }
  .cookie-cat-info p  { font-size: 0.75rem; }
}

/* ========== COOKIE BANNER — GDPR (3-button + granular settings) ========== */
.cookie-actions .btn-link {
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 0.65rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.7rem 0.5rem;
  letter-spacing: 0.08em;
}
.cookie-actions .btn-link:hover { color: var(--color-gold); }

/* Settings modal (granular consent) */
.cookie-settings {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cookie-settings.open { display: flex; }
.cookie-settings-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  max-width: 480px;            /* по-tight panel */
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.cookie-settings h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
  color: var(--color-cream);
  font-weight: 500;
}
.cookie-settings .intro {
  font-size: 0.82rem;
  color: var(--color-text-dim);
  margin: 0 0 1rem;
  line-height: 1.45;
}
.cookie-cat {
  display: flex;
  align-items: center;       /* toggle vertically centered спрямо текста */
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;        /* по-tight — ~1 празен ред м/у тях */
  border-top: 1px solid var(--color-border);
}
.cookie-cat-info {
  flex: 1 1 auto;
  min-width: 0;
}
.cookie-cat-info h4 {
  font-size: 0.92rem;
  margin: 0 0 2px;
  color: var(--color-cream);
  font-weight: 500;
}
.cookie-cat-info p {
  font-size: 0.76rem;
  color: var(--color-text-dim);
  line-height: 1.4;
  margin: 0;
}
.cookie-cat-info .required-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.62rem;
  padding: 1px 8px;
  background: rgba(201,169,97,0.15);
  color: var(--color-gold);
  border-radius: 999px;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

/* ── Toggle switch (gold pill) ── */
.cookie-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 44px;             /* фиксирана ширина — не shrink-ва */
  display: inline-block;
  cursor: pointer;
}
/* Hide native checkbox (multi-vector — opacity + appearance + position) */
.cookie-toggle input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  z-index: 2;
}
.cookie-toggle .slider {
  position: absolute;
  inset: 0;
  background: var(--color-border-strong);
  border-radius: 999px;
  transition: background 0.2s;
  pointer-events: none;       /* кликовете отиват в input-а отгоре */
  display: block;
}
.cookie-toggle .slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cookie-toggle input[type="checkbox"]:checked + .slider { background: var(--color-gold); }
.cookie-toggle input[type="checkbox"]:checked + .slider::before { transform: translateX(20px); }
.cookie-toggle input[type="checkbox"]:disabled { cursor: not-allowed; }
.cookie-toggle input[type="checkbox"]:disabled + .slider { opacity: 0.55; }
.cookie-settings-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.cookie-settings-actions .btn { flex: 1; min-width: 140px; padding: 0.75rem 1rem; font-size: 0.7rem; }

/* ── Newsletter GDPR consent — луксозен gold checkbox ── */
.newsletter-consent {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto 1rem;
  padding: 0;
  font-size: 0.78rem;
  color: var(--color-text-dim);
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
  user-select: none;
}
/* Hide native checkbox completely — replaced by custom .newsletter-consent-box */
.newsletter-consent input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
}
/* Custom checkbox visual — gold-bordered square */
.newsletter-consent-box {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 3px;
  background: transparent;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  display: inline-block;
}
/* Gold checkmark — appears when checked */
.newsletter-consent-box::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--color-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.18s var(--ease-luxe);
}
/* Hover — gold border tint */
.newsletter-consent:hover .newsletter-consent-box {
  border-color: var(--color-gold);
}
/* Checked state — gold fill + white tick */
.newsletter-consent input[type="checkbox"]:checked + .newsletter-consent-box {
  background: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 2px 8px rgba(201, 169, 97, 0.35);
}
.newsletter-consent input[type="checkbox"]:checked + .newsletter-consent-box::after {
  transform: rotate(45deg) scale(1);
}
/* Focus ring (accessibility) */
.newsletter-consent input[type="checkbox"]:focus-visible + .newsletter-consent-box {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.newsletter-consent-text {
  flex: 1 1 auto;
  min-width: 0;
}
.newsletter-consent a {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 97, 0.4);
  transition: border-color 0.2s;
}
.newsletter-consent a:hover { border-bottom-color: var(--color-gold); }

/* Footer legal sub-row */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.72rem;
}
.footer-legal a {
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--color-gold); }

/* ============================================================
   LEGAL DOCUMENTS (privacy / terms / cookies) — premium design
   Two-column ≥1024px (sticky TOC + content), single-col mobile
   ============================================================ */
.legal-doc {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.75rem 0 5rem;
  color: var(--color-text);
}

/* Meta bar — badge + reading time */
.legal-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.75rem;
  font-size: 0.78rem;
  color: var(--color-text-dim);
  flex-wrap: wrap;
  gap: 0.65rem;
}
.legal-meta-bar .badge {
  background: rgba(201,169,97,0.12);
  color: var(--color-gold);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.legal-meta-bar .reading-time {
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

/* Two-column layout */
.legal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 5rem;
}
@media (max-width: 1023px) {
  /* minmax(0,1fr) + min-width:0 позволяват колоната да се свие под min-content
     (иначе дълъг неразбиваем токен разширяваше track-а → overflow на ≤360px). */
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; overflow-wrap: break-word; }
  .legal-layout > * { min-width: 0; }
}

/* Sticky TOC */
.legal-toc {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  padding-right: 1rem;
  border-right: 1px solid var(--color-border);
  scrollbar-width: thin;
  scrollbar-color: rgba(201,169,97,0.4) transparent;
}
.legal-toc::-webkit-scrollbar { width: 4px; }
.legal-toc::-webkit-scrollbar-thumb { background: rgba(201,169,97,0.35); border-radius: 2px; }
@media (max-width: 1023px) {
  .legal-toc {
    position: relative;
    top: 0;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 1.25rem;
    margin-bottom: 1.5rem;
  }
}
.legal-toc h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-gold);
  margin: 0 0 1rem;
  font-weight: 600;
}
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.legal-toc li { counter-increment: toc; margin: 0; }
.legal-toc a {
  display: block;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  font-size: 0.83rem;
  color: var(--color-text-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  position: relative;
  line-height: 1.4;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0.5rem;
  top: 0.55rem;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.legal-toc a:hover {
  color: var(--color-cream);
  border-left-color: rgba(201,169,97,0.5);
  background: rgba(201,169,97,0.04);
}
.legal-toc a.active {
  color: var(--color-cream);
  border-left-color: var(--color-gold);
  background: rgba(201,169,97,0.07);
  font-weight: 500;
}

/* ── Content column ── */
.legal-content {
  font-size: 0.93rem;
  line-height: 1.6;
}

/* Intro with drop cap */
.legal-content .legal-intro {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--color-cream);
  font-weight: 400;
  margin-bottom: 1.75rem;
  letter-spacing: 0.005em;
}
.legal-content .legal-intro::first-letter {
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.85;
  font-weight: 600;
  color: var(--color-gold);
  float: left;
  margin: 0.05em 0.12em 0 -0.02em;
  font-style: italic;
}

/* Sections — ВАЖНО: глобалното `section { padding: clamp(4rem,10vw,8rem) 0 }`
   на ред 753 наслидява огромен padding-bottom (до 128px на широки екрани).
   Затова тук overрайдваме всички 4 страни с shorthand, не само padding-top. */
.legal-content section {
  padding: 0.5rem 0 0 0;
  margin-bottom: 1.5rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.legal-content section + section {
  border-top: 1px solid var(--color-border);
  padding: 1.25rem 0 0 0;
}

/* Section headings */
.legal-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  color: var(--color-cream);
  position: relative;
  padding-left: 1.1rem;
  letter-spacing: -0.01em;
}
.legal-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.3em;
  width: 3px;
  background: var(--color-gold);
  border-radius: 2px;
}
.legal-content h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  margin: 1rem 0 0.4rem;
  color: var(--color-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-content h3:first-of-type { margin-top: 0.5rem; }

/* Body */
.legal-content p {
  margin: 0 0 0.65rem;
  color: var(--color-text);
}
.legal-content p strong,
.legal-content li strong { color: var(--color-cream); font-weight: 600; }

/* Lists with custom gold bullets */
.legal-content ul,
.legal-content ol {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0.85rem;
}
.legal-content ul li,
.legal-content ol li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.35rem;
  line-height: 1.55;
}
.legal-content ul li::before {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0.6rem;
  width: 5px;
  height: 5px;
  background: var(--color-gold);
  border-radius: 50%;
}
.legal-content ol { counter-reset: ol-counter; }
.legal-content ol li { counter-increment: ol-counter; }
.legal-content ol li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4rem;
  text-align: right;
  font-weight: 600;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}

/* Tables */
.legal-content .legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.85rem 0 1.1rem;
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.legal-content .legal-table thead { background: rgba(201,169,97,0.08); }
.legal-content .legal-table th {
  text-align: left;
  padding: 0.55rem 0.85rem;
  font-weight: 600;
  color: var(--color-gold);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--color-border);
}
.legal-content .legal-table td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.5;
}
.legal-content .legal-table tbody tr:last-child td { border-bottom: none; }
.legal-content .legal-table tbody tr:hover { background: rgba(201,169,97,0.03); }
/* Mobile: fixed layout + дума-прелом, за да не разширява таблицата вьюпорта
   (auto-layout таблица не се свива под min-content на съдържанието си → overflow ≤360px). */
@media (max-width: 480px) {
  .legal-content .legal-table { table-layout: fixed; }
  .legal-content .legal-table th,
  .legal-content .legal-table td {
    padding: 0.5rem 0.55rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Callout boxes — gold-tinted highlight */
.legal-content .legal-callout {
  background: rgba(201,169,97,0.08);
  border-left: 3px solid var(--color-gold);
  padding: 0.85rem 1.15rem;
  margin: 1rem 0;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  line-height: 1.55;
}
.legal-content .legal-callout strong:first-child {
  display: block;
  color: var(--color-gold);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

/* Code (rare) */
.legal-content code {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.82em;
  color: var(--color-cream);
}

/* Inline links */
.legal-content a {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,169,97,0.4);
  transition: border-color 0.2s, color 0.2s;
}
.legal-content a:hover { border-bottom-color: var(--color-gold); }

/* Footer note */
.legal-content .legal-footer-note {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-style: italic;
  color: var(--color-text-dim);
  text-align: center;
  font-size: 0.82rem;
}

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-gold);
  width: 0;
  z-index: 1000;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* Back-to-top floating button — sits ABOVE .social-float (Viber/WA, ~60px tall at bottom 1-2rem).
   120px clearance prevents overlap on iPhone notch devices where safe-area-inset adds ~34px. */
.back-to-top {
  position: fixed;
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-bg);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.2s;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  z-index: 90;
  font-family: inherit;
  line-height: 1;
}
.back-to-top.visible {
  opacity: 0.95;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover { opacity: 1; box-shadow: 0 8px 24px rgba(201,169,97,0.4); }

/* Print-friendly */
@media print {
  .legal-toc,
  .back-to-top,
  .reading-progress,
  #site-header,
  #site-footer,
  .cookie,
  .kk-chat-launcher,
  .social-float { display: none !important; }
  .legal-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
  .legal-content { color: #000 !important; }
  .legal-content h2,
  .legal-content h3,
  .legal-content strong { color: #000 !important; }
  body { background: #fff !important; }
}

/* ========== PAGE HEADER (for inner pages) ========== */
.page-head {
  padding: 6rem 0 4rem;
  text-align: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.page-head h1 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  margin: 1rem 0;
}
.page-head h1 em { font-style: italic; color: var(--color-gold); }
.page-head .breadcrumbs {
  display: flex;
  flex-wrap: wrap;                 /* дълги product names wrap-ват на нов ред */
  justify-content: center;
  gap: 0.4rem 0.6rem;              /* row-gap, column-gap */
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 1.5rem;
  word-break: break-word;          /* позволява break на много дълга дума */
  overflow-wrap: anywhere;
}
.page-head .breadcrumbs a { color: var(--color-text-dim); }
.page-head .breadcrumbs a:hover { color: var(--color-gold); }
.page-head .breadcrumbs .sep { color: var(--color-gold); }
@media (max-width: 768px) {
  .page-head .breadcrumbs {
    letter-spacing: 0.16em;        /* по-tight на mobile за да се събира повече */
    gap: 0.35rem 0.45rem;
    font-size: 0.68rem;
  }
  /* Product page: дълги имена → max 2 реда + ellipsis на собствен ред */
  .page-head .breadcrumbs #pd-breadcrumb-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ========== SHOP / FILTERS ========== */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  padding: 4rem 0;
}
/* Large laptop — по-тясна sidebar за повече място на product grid-а */
@media (max-width: 1400px) {
  .shop-layout { grid-template-columns: 240px 1fr; gap: 2.5rem; }
}
/* Tablet landscape — drawer mode за пълна ширина на product grid-а */
@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 1fr; gap: 1.25rem; padding: 2rem 0; }
}

/* ── Filter sidebar — sticky на ВСИЧКИ desktop/tablet sizes ── */
.filters {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  align-self: start;
  /* Internal scroll ако филтрите са по-високи от viewport-а */
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  /* Subtle gold scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 97, 0.4) transparent;
  /* Малък right padding да не залепя scrollbar до контента */
  padding-right: 4px;
}
.filters::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-track { background: transparent; }
.filters::-webkit-scrollbar-thumb { background: rgba(201, 169, 97, 0.35); border-radius: 3px; }
.filters::-webkit-scrollbar-thumb:hover { background: rgba(201, 169, 97, 0.6); }

/* Large laptop — sidebar остава sticky, top по-малък */
@media (max-width: 1400px) {
  .filters { top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 1rem); }
}

/* ── Mobile/Tablet drawer (≤1024px) ── */
.shop-filter-toggle,
.shop-filter-backdrop,
.shop-filter-close { display: none; }   /* hidden на large desktop */

@media (max-width: 1024px) {
  /* Sticky toggle button над products */
  .shop-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    color: var(--color-cream);
    font-family: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    margin-bottom: 1rem;
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--header-h) + 8px);
    z-index: 30;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s, color 0.2s;
  }
  .shop-filter-toggle:hover { border-color: var(--color-gold); color: var(--color-gold); }
  .shop-filter-toggle .filter-count {
    background: var(--color-gold);
    color: var(--color-bg);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
  }
  .shop-filter-toggle .filter-count.hidden { display: none; }
  .shop-filter-toggle .icon { font-size: 1rem; }

  /* Backdrop за drawer */
  .shop-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .shop-filter-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Sidebar default — скрит, при .open става fullscreen panel */
  .filters {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 360px);
    max-height: 100vh;
    z-index: 200;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border-strong);
    padding: 1.5rem 1.25rem 5rem;  /* bottom space за last filter group */
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.32s var(--ease-luxe);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    align-self: initial;
    /* Override desktop max-height */
    margin: 0;
  }
  .filters.open { transform: translateX(0); }

  /* Header вътре в drawer-а — заглавие + close бутон */
  .filters::before {
    content: 'Филтри';
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-cream);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
  }
  .shop-filter-close {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
  }
  .shop-filter-close:hover { color: var(--color-gold); }

  /* Body scroll lock когато drawer е отворен */
  body.shop-filters-open {
    overflow: hidden;
  }
}

.filter-group {
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0;
}
.filter-group:first-child { padding-top: 0; }
.filter-group h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
  font-weight: 500;
}
.filter-group label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  color: var(--color-text-dim);
  cursor: pointer;
  transition: color 0.3s;
}
.filter-group label:hover { color: var(--color-cream); }
.filter-group input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--color-border-strong);
  position: relative;
  cursor: pointer;
  background: transparent;
  transition: all 0.2s;
}
.filter-group input[type="checkbox"]:checked {
  background: var(--color-gold);
  border-color: var(--color-gold);
}
.filter-group input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-bg);
  font-size: 0.7rem;
  font-weight: 700;
}
.filter-group .count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 1rem;
}
.shop-toolbar .results {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
}
.shop-toolbar .results strong { color: var(--color-cream); font-weight: 500; }
.sort-select {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-cream);
  padding: 0.7rem 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9a961' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.sort-select:focus { border-color: var(--color-gold); }
.sort-select option { background: var(--color-bg); color: var(--color-cream); }

/* ========== PRODUCT DETAIL ========== */
.product-detail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  padding: 4rem 0;
}
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; gap: 2rem; } }

.gallery-main {
  aspect-ratio: 1/1;
  background: var(--color-bg-card);
  overflow: hidden;
  margin-bottom: 1rem;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.gallery-thumbs img {
  aspect-ratio: 1/1;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: 0.6;
  transition: all 0.3s var(--ease-luxe);
}
.gallery-thumbs img:hover, .gallery-thumbs img.active {
  border-color: var(--color-gold);
  opacity: 1;
}

.detail-info .product-brand { font-size: 0.75rem; margin-bottom: 0.75rem; }
.detail-info h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
  font-weight: 400;
}
.detail-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.detail-rating .stars { color: var(--color-gold); }
.detail-rating .count { color: var(--color-text-dim); font-size: 0.85rem; }
.detail-price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
  font-weight: 400;
  letter-spacing: 0;
}
.detail-vat {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}
.detail-desc {
  color: var(--color-text-dim);
  line-height: 1.8;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.option-group { margin-bottom: 1.5rem; }
.option-group label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 0.75rem;
}
.swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.swatch {
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-cream);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.3s var(--ease-luxe);
}
.swatch:hover { border-color: var(--color-gold); color: var(--color-gold); }
.swatch.active { background: var(--color-gold); color: var(--color-bg); border-color: var(--color-gold); }

.qty-add {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
  align-items: stretch;
}
.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  overflow: hidden;
}
.qty button {
  width: 44px; height: 44px;
  font-size: 1.1rem;
  color: var(--color-cream);
  transition: color 0.2s;
}
.qty button:hover { color: var(--color-gold); }
.qty input {
  width: 50px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--color-cream);
  font-size: 0.95rem;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.detail-features {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.detail-features .feat {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--color-text-dim);
}
.detail-features .feat svg {
  width: 22px; height: 22px;
  color: var(--color-gold);
  flex-shrink: 0;
  stroke-width: 1.2;
}

/* Product tabs */
.product-tabs {
  background: var(--color-bg-soft);
  padding: 5rem 0;
}
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.tab-nav button {
  padding: 1rem 2rem 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.3s;
}
.tab-nav button.active, .tab-nav button:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}
.tab-content { display: none; max-width: 800px; }
.tab-content.active { display: block; }
.tab-content h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.tab-content p { color: var(--color-text-dim); line-height: 1.8; margin-bottom: 1rem; }
.tab-content table { width: 100%; border-collapse: collapse; }
.tab-content table td { padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.tab-content table td:first-child { color: var(--color-text-dim); width: 35%; }
.tab-content table td:last-child { color: var(--color-cream); }

/* ============================================================
   PRODUCT DETAIL — MOBILE OVERRIDES (≤768px)
   Desktop layout untouched; these rules only apply on phone/tablet.
   ============================================================ */
@media (max-width: 768px) {
  .product-detail { padding: 1.5rem 0 2rem; gap: 1.5rem; }
  /* Gallery mobile rules live AFTER the base gallery block (line ~5351)
     to win the cascade — they were previously shadowed by later base rules. */

  /* Detail info — compact typography */
  .detail-info h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-bottom: 0.75rem;
  }
  .detail-rating {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .detail-rating .count { font-size: 0.78rem; }
  .detail-price {
    font-size: 2rem;
    margin-bottom: 0.4rem;
  }
  .detail-vat { margin-bottom: 1rem; }
  .detail-desc {
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  /* Quantity + Add-to-cart — compact, side-by-side, button shrinks gracefully */
  .qty-add { gap: 0.6rem; margin: 1rem 0 0.75rem; }
  .qty button { width: 38px; height: 38px; font-size: 1rem; }
  .qty input { width: 40px; font-size: 0.9rem; }
  .qty-add .btn {
    padding: 0.85rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }

  /* Trust badges — single column on phone so the icon never collides with wrapped text */
  .detail-features {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }
  .detail-features .feat {
    align-items: center;
    font-size: 0.85rem;
  }

  /* Tabs — keep horizontal, allow horizontal scroll if needed, smaller text */
  .product-tabs { padding: 2rem 0 2.5rem; }
  .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav button {
    padding: 0.85rem 1rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    flex-shrink: 0;
    border-bottom-width: 2px;
  }
  .tab-content h3 { font-size: 1.15rem; margin-bottom: 0.75rem; }
  .tab-content p { font-size: 0.92rem; line-height: 1.7; }
  .tab-content table td { padding: 0.65rem 0; font-size: 0.85rem; }
  .tab-content table td:first-child { width: 42%; padding-right: 0.5rem; }
}

@media (max-width: 480px) {
  .detail-price { font-size: 1.7rem; }
  /* Gallery rules for ≤480px also moved to AFTER the base gallery block. */
}

/* ========== CART ========== */
.cart-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  padding: 4rem 0;
}
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto auto auto;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}
@media (max-width: 768px) {
  .cart-item { grid-template-columns: 80px 1fr; gap: 1rem; }
  .cart-item .cart-qty, .cart-item .cart-price, .cart-item .cart-remove { grid-column: 2; }
}
.cart-item img {
  width: 100px; height: 100px;
  object-fit: cover;
  background: var(--color-bg-card);
}
.cart-item-info h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-cream);
  margin-bottom: 0.4rem;
  font-weight: 400;
}
.cart-item-info .meta {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
}
.cart-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-gold);
  font-weight: 400;
}
.cart-remove {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.cart-remove:hover { color: #d96b6b; }

.cart-summary {
  background: var(--color-bg-card);
  padding: 2.5rem;
  border: 1px solid var(--color-border);
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
/* На mobile/tablet — махаме sticky защото cart-layout се collapse-ва
   до 1 колона и summary стои под cart items. */
@media (max-width: 900px) {
  .cart-summary {
    position: static;
    padding: 1.5rem;
  }
}
.cart-summary h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  font-size: 0.9rem;
  color: var(--color-text-dim);
}
.summary-row.total {
  border-top: 1px solid var(--color-border);
  margin-top: 1rem;
  padding-top: 1.5rem;
  font-size: 1rem;
  color: var(--color-cream);
  font-weight: 500;
}
.summary-row.total .amount {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-gold);
  font-weight: 400;
}
.cart-summary .btn { width: 100%; margin-top: 1.5rem; }
.cart-promo {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0;
}
.cart-promo input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-cream);
  font-size: 0.8rem;
  border-radius: 999px;
  outline: none;
}
.cart-promo button {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.3s;
}
.cart-promo button:hover { background: var(--color-gold); color: var(--color-bg); }

/* ========== CHECKOUT ========== */
.checkout-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  padding: 4rem 0;
}
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-section { margin-bottom: 2.5rem; }
.checkout-section h3 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.checkout-section h3 .step-num {
  display: inline-flex;
  width: 32px; height: 32px;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: var(--font-italiana);
  font-size: 0.85rem;
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.form-row.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 768px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.field input, .field select, .field textarea {
  padding: 0.95rem 1.25rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-cream);
  font-size: 0.9rem;
  outline: none;
  border-radius: 0;
  transition: border-color 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-gold);
}
/* iOS Safari zoom-on-focus prevention: inputs must be ≥16px on touch devices.
   Why: any font-size <16px triggers automatic page zoom on iPhone, breaking layout. */
@media (hover: none) and (pointer: coarse) {
  .field input, .field select, .field textarea,
  .modal-body .field input, .modal-body .field textarea,
  .newsletter-form input[type="email"],
  .footer-newsletter input[type="email"],
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="url"], input[type="date"], textarea, select {
    font-size: 16px;
  }
}

.payment-options { display: flex; flex-direction: column; gap: 0.75rem; }
.payment-option {
  border: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s;
}
.payment-option:hover, .payment-option.active {
  border-color: var(--color-gold);
  background: rgba(201, 169, 97, 0.04);
}
.payment-option input[type="radio"] { accent-color: var(--color-gold); }
.payment-option .label { flex: 1; }
.payment-option .label strong {
  display: block;
  color: var(--color-cream);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.payment-option .label span {
  font-size: 0.78rem;
  color: var(--color-text-dim);
}

/* ========== ACCOUNT (login/register) ========== */
.account-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  padding: 0;
}
@media (max-width: 900px) { .account-layout { grid-template-columns: 1fr; } }
.account-form-wrap {
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 768px) {
  /* min-width:0 позволява grid-айтема да се свие под min-content на формата
     (иначе .account-form-wrap разширяваше вьюпорта → overflow ≤320px). */
  .account-form-wrap { padding: 2rem 1rem; min-width: 0; }
  .account-form { max-width: 100%; }
  .account-form .field input,
  .account-form .field select,
  .account-form .field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
  /* Polish: tabs equal-flex + comfortable, forgot link tap target ≥44px.
     min-width:0 позволява flex бутоните да се свият под min-content (иначе
     разширяваха .account-form-wrap → overflow на ≤320px). */
  .account-tabs button { flex: 1; min-width: 0; padding: 0.95rem 0.5rem; }
  .account-form .forgot {
    font-size: 0.875rem;
    padding: 0.5rem 0;
    min-height: 44px;
    line-height: 28px;
  }
  /* VIP banner — по-малко padding на mobile (има по-малко място) */
  .account-side { padding: 2.5rem 1.25rem; }
  .account-side h2 { font-size: 1.75rem; }
}
.account-tabs { display: flex; border-bottom: 1px solid var(--color-border); margin-bottom: 2.5rem; }
.account-tabs button {
  padding: 1rem 2rem;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.account-tabs button.active { color: var(--color-gold); border-color: var(--color-gold); }
.account-form { display: none; max-width: 420px; }
.account-form.active { display: block; }
.account-form .field { margin-bottom: 1rem; }
.account-form .btn { width: 100%; margin-top: 1rem; }
.account-form .forgot {
  display: block;
  text-align: right;
  font-size: 0.78rem;
  color: var(--color-gold);
  margin-top: 0.5rem;
}
/* Password input wrapper — окото е inside the input box (absolute positioned) */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap input {
  width: 100%;
  padding-right: 2.75rem;
  box-sizing: border-box;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease-luxe);
}
.pw-toggle:hover { color: var(--color-gold); }
.pw-toggle svg { width: 18px; height: 18px; display: block; }
.social-login {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.social-login .divider {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}
.social-buttons { display: flex; gap: 0.75rem; }
.social-btn {
  flex: 1;
  padding: 0.95rem;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--color-cream);
  border-radius: 999px;
  transition: all 0.3s;
}
.social-btn:hover { border-color: var(--color-gold); background: rgba(201, 169, 97, 0.04); }
.social-btn svg { width: 16px; height: 16px; }

.account-side {
  /* Stronger overlay (winner-takes-all over the bg-image) — readability на jewelry photo
     във ВСИЧКИ темите. Текстовете под са винаги светли (виж .account-side-content). */
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.7)),
    url('https://images.unsplash.com/photo-1606760227091-3dd870d97f1d?q=80&w=1600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  text-align: center;
}
.account-side-content {
  max-width: 380px;
  /* VIP banner е "тъмен island" — текстът е винаги светъл независимо от theme. */
  color: #ffffff;
}
.account-side .eyebrow { color: #e3c581; }
.account-side .eyebrow::before,
.account-side .eyebrow.center::after { background: #e3c581; }
.account-side h2 {
  font-size: 2.5rem;
  margin: 1rem 0;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.account-side h2 em { font-style: italic; color: #e3c581; }
.account-side p {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ========== ABOUT ========== */
.about-intro {
  padding: 6rem 0;
  text-align: center;
}
.about-intro p {
  max-width: 700px;
  margin: 1.5rem auto 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--color-cream-dim);
  line-height: 1.6;
  font-weight: 300;
}
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding: 4rem 0;
}
@media (max-width: 900px) { .about-story { grid-template-columns: 1fr; gap: 2rem; } }
.about-story img {
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
}
.about-story-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 1rem 0 1.5rem;
}
.about-story-content h2 em { font-style: italic; color: var(--color-gold); }
.about-story-content p {
  color: var(--color-text-dim);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.about-values {
  background: var(--color-bg-soft);
  padding: 6rem 0;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) { .values-grid { grid-template-columns: 1fr; } }
.value {
  text-align: center;
  padding: 2rem;
}
.value-icon {
  width: 70px; height: 70px;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
}
.value-icon svg { width: 28px; height: 28px; stroke-width: 1.2; }
.value h3 { font-size: 1.6rem; margin-bottom: 0.75rem; }
.value p { color: var(--color-text-dim); font-size: 0.95rem; line-height: 1.7; }

.stats-strip {
  background: var(--color-bg);
  padding: 4rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-gold);
  font-weight: 400;
  display: block;
  line-height: 1;
}
.stat .label {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 0.75rem;
}

/* ========== CONTACT ========== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  padding: 4rem 0;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 3rem; } }
.contact-info h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.contact-info h2 em { font-style: italic; color: var(--color-gold); }
.contact-info > p { color: var(--color-text-dim); margin-bottom: 2.5rem; line-height: 1.7; }
.contact-blocks { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-block {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  transition: border-color 0.3s;
}
.contact-block:hover { border-color: var(--color-gold-dark); }
.contact-block .icon {
  width: 44px; height: 44px;
  background: rgba(201, 169, 97, 0.1);
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-block .icon svg { width: 18px; height: 18px; stroke-width: 1.4; }
.contact-block h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.contact-block p { color: var(--color-cream); font-size: 0.95rem; line-height: 1.5; }
.contact-block a { color: var(--color-cream); }
.contact-block a:hover { color: var(--color-gold); }

.contact-form-wrap {
  background: var(--color-bg-card);
  padding: 3rem;
  border: 1px solid var(--color-border);
}
@media (max-width: 600px) { .contact-form-wrap { padding: 2rem 1.5rem; } }
.contact-form-wrap h3 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.contact-form-wrap > p {
  color: var(--color-text-dim);
  margin-bottom: 2rem;
  font-size: 0.9rem;
}
.contact-form-wrap .field { margin-bottom: 1rem; }
.contact-form-wrap textarea { min-height: 140px; resize: vertical; font-family: inherit; }
.contact-form-wrap .btn { width: 100%; margin-top: 0.5rem; }

/* ========== FAQ ========== */
.faq-layout { padding: 4rem 0; max-width: 900px; margin: 0 auto; }
.faq-cat {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 3rem 0 1.5rem;
  font-weight: 500;
}
.faq-cat:first-child { margin-top: 0; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0;
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-cream);
  transition: color 0.3s;
  padding: 0.5rem 0;
}
.faq-q:hover { color: var(--color-gold); }
.faq-q .plus {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  position: relative;
  margin-left: 2rem;
  transition: all 0.3s;
}
.faq-q .plus::before, .faq-q .plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-gold);
  transition: transform 0.3s;
}
.faq-q .plus::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.faq-q .plus::after { width: 1px; height: 12px; transform: translate(-50%, -50%); }
.faq-item.open .plus { background: var(--color-gold); }
.faq-item.open .plus::before, .faq-item.open .plus::after { background: var(--color-bg); }
.faq-item.open .plus::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-luxe);
  color: var(--color-text-dim);
  line-height: 1.8;
  font-size: 0.95rem;
}
.faq-item.open .faq-a {
  max-height: 500px;
  padding-top: 1rem;
}

/* ========== ANIMATIONS / REVEAL ========== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.delay-5 { transition-delay: 0.5s; }

/* ========== UTILITIES ========== */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }

/* ========== SEARCH OVERLAY ========== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.search-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
body.search-open { overflow: hidden; }

.search-panel {
  width: 100%;
  max-width: 700px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transform: translateY(-18px) scale(0.97);
  transition: transform 0.3s var(--ease-out);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.search-overlay.open .search-panel {
  transform: translateY(0) scale(1);
}

/* Input row */
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-dim);
}
.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text);
  min-width: 0;
}
.search-input::placeholder { color: var(--text-dim); }
.search-shortcut-hint {
  font-size: 0.68rem;
  color: var(--text-dim);
  background: var(--border-dim);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.search-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.2s;
  flex-shrink: 0;
}
.search-close-btn:hover { color: var(--text); }
.search-close-btn svg { width: 18px; height: 18px; }

/* Scrollable results area */
.search-results {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Empty-state sections (history / categories) */
.search-section { padding: 14px 20px; }
.search-section + .search-section { border-top: 1px solid var(--border-dim); }
.search-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.search-clear-hist {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--gold);
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}
.search-clear-hist:hover { text-decoration: underline; }

.search-history-list { display: flex; flex-wrap: wrap; gap: 8px; }
.search-hist-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.search-hist-item:hover { border-color: var(--gold); color: var(--gold); }

.search-cats-list { display: flex; gap: 10px; flex-wrap: wrap; }
.search-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.search-cat-chip:hover { border-color: var(--gold); color: var(--gold); }

/* Loading spinner */
.search-loading {
  display: flex;
  justify-content: center;
  padding: 32px;
}
.search-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-dim);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: searchSpin 0.7s linear infinite;
}
@keyframes searchSpin { to { transform: rotate(360deg); } }

/* No results */
.search-no-results {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-dim);
  font-size: 0.88rem;
}
.search-no-icon { font-size: 2.2rem; margin-bottom: 10px; }

/* Result item cards */
.search-results-inner { padding: 6px 0; }

.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
  animation: srFadeUp 0.3s var(--ease-out) both;
}
.search-result-item:hover,
.search-result-item.active { background: var(--border-dim); }
@keyframes srFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-result-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--border-dim);
  border: 1px solid var(--border-dim);
}
.search-result-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-result-info { flex: 1; min-width: 0; }
.search-result-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.search-result-name mark {
  background: none;
  color: var(--gold);
  font-weight: 700;
}
.search-result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}
.search-result-brand { color: var(--text-dim); }
.search-result-cat {
  background: rgba(201, 169, 97, 0.15);
  color: var(--gold);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}
.search-result-price {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--gold);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Light theme */
[data-theme="light"] .search-overlay { background: rgba(0, 0, 0, 0.45); }
[data-theme="light"] .search-panel { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2); }

/* Mobile */
@media (max-width: 768px) {
  .search-overlay { padding-top: 0; align-items: flex-end; }
  .search-panel {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    transform: translateY(40px) scale(1);
  }
  .search-overlay.open .search-panel { transform: translateY(0) scale(1); }
  .search-shortcut-hint { display: none; }
}

/* ========== REVIEWS SECTION ========== */
.reviews-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .reviews-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Обобщение (лява колона) --- */
.reviews-summary { position: -webkit-sticky; position: sticky; top: 100px; }

.reviews-avg {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 20px;
}
.reviews-avg-number {
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-gold, var(--gold));
  margin-bottom: 8px;
}
.reviews-avg-stars {
  font-size: 1.4rem;
  color: var(--color-gold, var(--gold));
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.reviews-avg-sub {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* Разпределение по звезди */
.reviews-distrib { display: flex; flex-direction: column; gap: 7px; }
.distrib-row {
  display: grid;
  grid-template-columns: 24px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}
.distrib-label { color: var(--text-dim); text-align: right; }
.distrib-track {
  height: 6px;
  background: var(--border-dim);
  border-radius: 3px;
  overflow: hidden;
}
.distrib-fill {
  height: 100%;
  background: var(--color-gold, var(--gold));
  border-radius: 3px;
  transition: width 0.6s var(--ease-out);
}
.distrib-count { color: var(--text-dim); text-align: right; }

/* --- Lista de reviews (дясна колона) --- */
.review-card {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-dim);
  animation: srFadeUp 0.35s var(--ease-out) both;
}
.review-card:last-child { border-bottom: none; }
.review-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-gold, #c9a961) 0%, #8b6914 100%);
  letter-spacing: 0.05em;
}
.review-meta { flex: 1; min-width: 0; }
.review-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 2px;
}
.review-date {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.review-stars {
  color: var(--color-gold, var(--gold));
  font-size: 0.88rem;
  letter-spacing: 2px;
  flex-shrink: 0;
}
.review-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 4px;
}
.review-comment {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.65;
}

/* --- Star picker в модал --- */
.review-star-picker {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 8px 0;
}
.star-pick {
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--border-dim);
  transition: color 0.15s, transform 0.15s;
  line-height: 1;
  padding: 2px 4px;
}
.star-pick.active,
.star-pick.hover { color: var(--color-gold, var(--gold)); transform: scale(1.15); }

/* Пустое состояние */
.reviews-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}
.reviews-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.reviews-empty h4 { font-size: 1rem; color: var(--text); margin-bottom: 6px; }

/* ========================================================
   ИСТОРИЯ — Страница за историята на K&K TIME STUDIO
   ======================================================== */

/* ---- Hero ---- */
.istoriya-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.istoriya-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/istoriya/hero.png');
  background-size: cover;
  background-position: center top;
  transform: scale(1.05);
  transition: transform 8s ease;
  /* Умерено потъмняване — снимката трябва да е видима */
  filter: brightness(0.50) contrast(1.12) saturate(0.90);
}
.istoriya-hero:hover .istoriya-hero-bg { transform: scale(1); }
/* Концентрирано vignette зад текста; периферията остава прозрачна за снимката */
.istoriya-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 650px 420px at center,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.55) 40%,
      rgba(0,0,0,0.20) 75%,
      rgba(0,0,0,0.10) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.45) 100%);
}
.istoriya-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 4rem 2rem;
}
.istoriya-hero-content h1 {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  color: #ffffff;
  margin: 1rem 0 1.5rem;
  line-height: 1.15;
  text-shadow:
    0 4px 30px rgba(0,0,0,0.9),
    0 2px 8px rgba(0,0,0,0.8),
    0 0 40px rgba(0,0,0,0.6);
}
.istoriya-hero-content h1 em {
  color: #d4b775;
  text-shadow:
    0 2px 15px rgba(201,169,97,0.3),
    0 2px 8px rgba(0,0,0,0.7);
}
.istoriya-hero-content .eyebrow {
  color: #d4b775;
  text-shadow:
    0 2px 15px rgba(0,0,0,0.9),
    0 1px 3px rgba(0,0,0,0.8);
}
.istoriya-hero-content p {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,0.97);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
  text-shadow:
    0 2px 20px rgba(0,0,0,0.85),
    0 1px 4px rgba(0,0,0,0.7);
  opacity: 1;
}
.istoriya-hero-content .btn-primary {
  box-shadow:
    0 4px 24px rgba(201,169,97,0.35),
    0 2px 8px rgba(0,0,0,0.4);
}

/* ---- Статистики ---- */
.istoriya-stats {
  padding: 5rem 0;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.istoriya-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (max-width: 640px) {
  .istoriya-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
/* Много малки телефони (≤400px): 2-те колони не се събират → 1 колона.
   Одобрено от Andrey (2026-05-29). Само mobile; десктоп/таблет непроменени. */
@media (max-width: 400px) {
  .istoriya-stats-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
.stat-box { padding: 1.5rem 1rem; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  color: var(--color-gold);
  line-height: 1;
  display: block;
}
.stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 0.5rem;
}

/* ---- Timeline ---- */
.timeline-section { padding: 6rem 0; }
.timeline {
  position: relative;
  max-width: 1100px;
  margin: 4rem auto 0;
  padding: 0 1rem;
}
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--color-gold) 5%, var(--color-gold) 95%, transparent);
  transform: translateX(-50%);
}
@media (max-width: 768px) { .timeline-line { left: 20px; } }

.timeline-item {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-right: calc(50% + 3rem);
  margin-bottom: 3.5rem;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.timeline-item.right {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: calc(50% + 3rem);
  transform: translateX(30px);
}
.timeline-item.visible { opacity: 1; transform: translateX(0); }
@media (max-width: 768px) {
  .timeline-item, .timeline-item.right {
    padding-left: 52px;
    padding-right: 0;
    justify-content: flex-start;
    transform: translateX(-20px);
  }
}
.timeline-dot {
  position: absolute;
  left: 50%;
  top: 1.8rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-gold);
  transform: translateX(-50%);
  box-shadow: 0 0 0 5px var(--color-bg), 0 0 0 7px var(--color-gold);
  transition: box-shadow 0.35s, transform 0.35s;
  z-index: 2;
}
.timeline-item:hover .timeline-dot {
  box-shadow: 0 0 0 5px var(--color-bg), 0 0 0 9px var(--color-gold), 0 0 22px rgba(201,169,97,0.6);
  transform: translateX(-50%) scale(1.1);
}
@media (max-width: 768px) { .timeline-dot { left: 20px; transform: translateX(-50%); } }
.timeline-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1.8rem 2rem;
  max-width: 480px;
  width: 100%;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  position: relative;
}
/* Златен акцент в ляво на всяка карта (симетрично ориентиран) */
.timeline-card::before {
  content: '';
  position: absolute;
  left: 0; top: 1.8rem; bottom: 1.8rem;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--color-gold), transparent);
  opacity: 0.6;
  transition: opacity 0.35s;
}
.timeline-item.right .timeline-card::before {
  left: auto;
  right: 0;
}
.timeline-item:hover .timeline-card {
  border-color: rgba(201,169,97,0.55);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(201,169,97,0.2);
  transform: translateY(-2px);
}
.timeline-item:hover .timeline-card::before { opacity: 1; }
@media (max-width: 768px) {
  .timeline-card { max-width: 100%; padding: 1.5rem 1.25rem; }
  /* На mobile всички cards са от дясно на линията → gold strip винаги ляво */
  .timeline-item.right .timeline-card::before {
    left: 0;
    right: auto;
  }
}
.timeline-year {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}
.timeline-desc {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}
.timeline-desc strong { color: var(--color-gold); font-weight: 600; }
.timeline-badge {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 3px 10px;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(201,169,97,0.12);
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  border-radius: 2px;
}

/* Intro параграф над timeline-а */
.timeline-lead {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}
.timeline-lead-headline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-gold);
  font-style: italic;
  letter-spacing: 0.01em;
  margin: 0 0 0.9rem;
  line-height: 1.35;
}
.timeline-lead p {
  color: var(--color-text);
  font-size: clamp(0.92rem, 1.4vw, 1.02rem);
  line-height: 1.85;
  margin: 0;
}
.timeline-lead p strong { color: var(--color-gold); font-weight: 500; }
.timeline-lead p em { color: var(--color-text); font-style: italic; }

/* Showcase снимка (часовници) между bio-то и timeline-а */
.timeline-showcase {
  max-width: 960px;
  margin: 0 auto 3.5rem;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,169,97,0.18);
}
.timeline-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(10,10,10,0) 50%,
    rgba(10,10,10,0.35) 100%);
  pointer-events: none;
}
.timeline-showcase img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  transition: transform 6s ease;
}
.timeline-showcase:hover img { transform: scale(1.04); }
@media (max-width: 768px) {
  .timeline-showcase { margin-bottom: 2.5rem; }
  .timeline-showcase img { max-height: 260px; }
}

/* Sub-heading преди timeline-а */
.timeline-sub-head { margin-bottom: 3rem !important; }
.timeline-sub-head .eyebrow { opacity: 0.85; }
.timeline-sub-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  color: var(--color-cream);
  margin: 0.9rem 0 0;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.timeline-sub-title em {
  color: var(--color-gold);
  font-style: italic;
  font-weight: 500;
}

/* Списък с много обучения в една година */
.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.98rem;
  color: var(--color-text);
  line-height: 1.65;
}
.timeline-list li {
  padding: 10px 0 10px 18px;
  position: relative;
  border-bottom: 1px dashed rgba(201,169,97,0.18);
}
.timeline-list li:last-child { border-bottom: none; padding-bottom: 2px; }
.timeline-list li:first-child { padding-top: 4px; }
.timeline-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 10px;
  height: 1px;
  background: var(--color-gold);
}
.timeline-list li strong { color: var(--color-gold); font-weight: 600; }

/* Caliber listings — монотон за техническо усещане */
.timeline-calibers {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--color-text-dim);
  letter-spacing: 0.01em;
  line-height: 1.65;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(201,169,97,0.06);
  border-left: 2px solid rgba(201,169,97,0.35);
  border-radius: 0 4px 4px 0;
}

/* ---- Екип ---- */
.team-section { padding: 6rem 0 0; }
.team-img-wrap {
  width: 100%;
  max-height: 600px;
  overflow: hidden;
}
.team-img-wrap img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  object-position: center;
}
.team-text {
  max-width: 760px;
  margin: 3rem auto 0;
  text-align: center;
  padding: 0 1rem 4rem;
}
.team-text p { font-size: 1rem; color: var(--color-text-dim); line-height: 1.9; margin-bottom: 2.5rem; }
.team-quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--color-gold);
  line-height: 1.4;
  font-style: italic;
  position: relative;
  padding: 0 2rem;
}
.team-quote::before {
  content: '"';
  position: absolute;
  left: -0.2rem; top: -0.3rem;
  font-size: 4rem;
  color: var(--color-gold);
  opacity: 0.3;
  line-height: 1;
}

/* ---- Сертификати ---- */
.cert-section { padding: 6rem 0; }
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } }
.cert-card {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s;
  background: var(--color-bg-card);
}
.cert-card:hover { border-color: var(--color-gold); transform: scale(1.03); }
.cert-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.cert-card:hover img { transform: scale(1.06); }

/* ---- Lightbox prev/next buttons (istoriya cert-gallery markup) ----
   Parent .lightbox / .lightbox-img / .lightbox-close / .lightbox-counter
   are defined once below in the LIGHTBOX section (z:10000) — shared with product page. */
.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(201,169,97,0.3);
  color: var(--color-cream);
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  font-size: 1.2rem;
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(201,169,97,0.15);
  border-color: var(--color-gold);
}

/* ---- CTA ---- */
.istoriya-cta {
  padding: 6rem 0;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.istoriya-cta h2 { margin-bottom: 1rem; }
.istoriya-cta p { color: var(--color-text-dim); margin-bottom: 2.5rem; }
.istoriya-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========== BRANDS PAGE ========== */
.brands-intro {
  padding: 3rem 0 4rem;
  text-align: center;
}
.brands-intro p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--color-text-dim);
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 0 0 5rem;
}
@media (max-width: 900px) {
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

.brand-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  transition: border-color 0.3s var(--ease-luxe), transform 0.3s var(--ease-luxe);
  cursor: default;
  overflow: hidden;
}
.brand-card:hover {
  border-color: var(--color-gold);
  transform: scale(1.03);
}
.brand-card img {
  max-height: 70px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0.7) invert(0.85);
  opacity: 0.65;
  transition: filter 0.3s, opacity 0.3s;
}
.brand-card:hover img {
  filter: grayscale(0) brightness(1) invert(0);
  opacity: 1;
}

.trust-strip {
  background: var(--color-bg-soft);
  padding: 5rem 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
}
.trust-strip h2 { margin-bottom: 1rem; }
.trust-strip p {
  max-width: 600px;
  margin: 0 auto 2rem;
  color: var(--color-text-dim);
}

/* ============================================================
   SCROLL PROGRESS BAR — тънка златна линия отгоре
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-gold) 20%,
    var(--color-gold-bright, #e3c581) 50%,
    var(--color-gold) 80%,
    transparent 100%);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.4);
  transition: width 0.08s linear;
}

/* ============================================================
   BUTTON SHIMMER — shine ефект при hover на .btn-primary
   ============================================================ */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 75%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 80%);
  transform: skewX(-15deg);
  transition: left 0.75s var(--ease-luxe);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::after { left: 160%; }
.btn-primary > * { position: relative; z-index: 2; }

/* Лек lift + дълбочина на златна сянка */
.btn-primary {
  transition: transform 0.35s var(--ease-luxe),
              box-shadow 0.35s var(--ease-luxe),
              background 0.35s var(--ease-luxe);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(201, 169, 97, 0.45),
              0 2px 8px -2px rgba(201, 169, 97, 0.3);
}

/* ============================================================
   WISHLIST HEART — pulse при активиране
   ============================================================ */
@keyframes heart-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.product-wishlist.active svg { animation: heart-pulse 0.55s var(--ease-luxe); }

/* ============================================================
   PRODUCT CARDS — фин ken-burns zoom на изображението
   ============================================================ */
.product .product-img img,
.product-img > img {
  transition: transform 1.2s var(--ease-luxe), filter 0.5s ease;
  will-change: transform;
}
.product:hover .product-img img { transform: scale(1.06); }

/* ============================================================
   NAV — златна линия под active/hover
   ============================================================ */
.nav > a,
.nav > button.nav-btn {
  position: relative;
}
.nav > a::after,
.nav > button.nav-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.35s var(--ease-luxe), left 0.35s var(--ease-luxe);
}
.nav > a:hover::after,
.nav > a.active::after,
.nav > button.nav-btn:hover::after,
.nav > button.nav-btn.active::after {
  width: 28px;
  left: calc(50% - 14px);
}

/* ============================================================
   ⛔ LOCKED — HOME PAGE DESIGN (одобрен от Andrey, 2026-04-26)
   ============================================================
   ❗ НЕ ПИПАЙ тези правила без изрично разрешение от Andrey!
   Backup: public/index.html.LOCKED-20260426
           public/css/styles.css.LOCKED-20260426
   Засяга: всичко с body.page-home (само index.html)
   ============================================================ */
.page-home .container {
  padding-left: clamp(2rem, 8vw, 8rem);
  padding-right: clamp(2rem, 8vw, 8rem);
}
/* Header вътре в page-home остава с нормалния си padding —
   override-ва extra padding-а на .container. */
.page-home .header .container {
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
/* ⛔ END LOCKED HOME PAGE DESIGN ⛔ */

/* ============================================================
   ⛔ LOCKED — SHOP PAGE DESIGN (одобрен от Andrey, 2026-04-26)
   ============================================================
   ❗ НЕ ПИПАЙ тези правила без изрично разрешение от Andrey!
   Backup: public/shop.html.LOCKED-20260426
           public/css/styles.css.LOCKED-20260426
   Засяга: всичко с body.page-shop (само shop.html)
   ============================================================ */
.page-shop .container {
  padding-left: clamp(2rem, 8vw, 8rem);
  padding-right: clamp(2rem, 8vw, 8rem);
}
/* Header padding остава нормален. */
.page-shop .header .container {
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
/* ⛔ END LOCKED SHOP PAGE DESIGN ⛔ */

/* ============================================================
   ⛔ LOCKED — PRODUCT PAGE DESIGN (одобрен от Andrey, 2026-04-26)
   ============================================================
   ❗ НЕ ПИПАЙ тези правила без изрично разрешение от Andrey!
   Backup: public/product.html.LOCKED-20260426
           public/css/styles.css.LOCKED-20260426
   Засяга: всичко с body.page-product (само product.html)
   ============================================================ */
.page-product .container {
  padding-left: clamp(2rem, 8vw, 8rem);
  padding-right: clamp(2rem, 8vw, 8rem);
}
/* Header padding остава нормален. */
.page-product .header .container {
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
/* ⛔ END LOCKED PRODUCT PAGE DESIGN ⛔ */

/* ============================================================
   ISTORIYA PAGE — отстъп от ляво/дясно (същия ритъм)
   ============================================================ */
.page-istoriya .container {
  padding-left: clamp(2rem, 8vw, 8rem);
  padding-right: clamp(2rem, 8vw, 8rem);
}
/* Header padding остава нормален. */
.page-istoriya .header .container {
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ============================================================
   MOBILE HEADER FIT — компактен padding само за хедъра на телефон,
   за да съберем hamburger + лого + икони без horizontal overflow.
   Поставено СЛЕД locked .header .container правилата по-горе, за да ги
   override-не по source order (без да пипа самите locked блокове).
   Засяга само хедъра — padding-ът на съдържанието остава непокътнат.
   ============================================================ */
/* !important: brands.css зарежда СЛЕД styles.css и има
   `.page-brands .header .container { var(--container-pad) }` (0,3,0), което
   иначе бие тукашния override по source order. !important го надделява, без да
   пипаме locked brands.css. Засяга само хедъра на телефон (≤480/≤360). */
@media (max-width: 480px) {
  .header .container,
  .page-home .header .container,
  .page-shop .header .container,
  .page-product .header .container,
  .page-istoriya .header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* На 320px смъкваме хедър-падинга до 8px (мирори locked селекторите по
   source order), за да съберем целия header ред без 4px overflow. */
@media (max-width: 360px) {
  .header .container,
  .page-home .header .container,
  .page-shop .header .container,
  .page-product .header .container,
  .page-istoriya .header .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ============================================================
   HEADER — luxury upgrade (glass + gold hairline + refined logo)
   ============================================================ */
.header {
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  /* премахваме плоския border и слагаме градиентна линия */
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-border) 18%,
    var(--color-gold) 50%,
    var(--color-border) 82%,
    transparent 100%
  );
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-luxe);
}
.header.scrolled {
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    0 1px 0 rgba(201, 169, 97, 0.06),
    0 12px 30px -18px rgba(0, 0, 0, 0.55);
}
.header.scrolled::after { opacity: 0.85; }

/* Light theme — по-мек shadow при scroll */
:root[data-theme="light"] .header.scrolled {
  box-shadow:
    0 1px 0 rgba(138, 115, 64, 0.08),
    0 14px 34px -22px rgba(60, 45, 20, 0.18);
}

/* По-висок хедър на desktop — повече въздух */
/* ⛔ HEADER LAYOUT updated 2026-04-27 by Andrey:
   логото в ляв ъгъл, theme toggle в десен ъгъл (с padding от стените) */
@media (min-width: 1025px) {
  :root { --header-h: 84px; }
  .header-inner {
    gap: 0.75rem;
    /* Без max-width — header-inner е пълна ширина на container-а */
  }
  .header-inner > .logo { margin-left: 0; margin-right: 1rem; }
  .header-icons { gap: 0.5rem; }
  /* Nav изместен леко вдясно — search изравнен под „Н" от НАЧАЛО */
  .header-inner > .nav {
    flex: 1;
    justify-content: flex-start;
    margin-left: 30px;
  }
}

/* Header container — пълна ширина (override на .container max-width: 1240px),
   за да отиде логото в ляв край и иконите в десен край с padding от стените */
.header .container {
  max-width: none;
}

/* Theme toggle — черен в светлата тема (за по-висок контраст), в десен ъгъл */
:root[data-theme="light"] .header .theme-toggle {
  color: #000;
}
:root[data-theme="light"] .header .theme-toggle:hover {
  color: var(--color-gold);
}

/* ============================================================
   LOGO — по-голямо, по-елегантно (само в HEADER, не в footer/drawer)
   ============================================================ */
.header .logo {
  font-family: var(--font-italiana);
  font-style: normal;
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  line-height: 1;
  color: var(--color-cream);
  text-shadow: 0 0 24px rgba(201, 169, 97, 0.18);
  transition: color 0.4s var(--ease-luxe), text-shadow 0.4s var(--ease-luxe), letter-spacing 0.4s var(--ease-luxe);
  white-space: nowrap;
}
.header .logo:hover {
  color: var(--color-gold-bright);
  text-shadow: 0 0 28px rgba(227, 197, 129, 0.35);
  letter-spacing: 0.17em;
}
:root[data-theme="light"] .header .logo {
  text-shadow: 0 0 24px rgba(138, 115, 64, 0.12);
}
:root[data-theme="light"] .header .logo:hover {
  text-shadow: 0 0 22px rgba(166, 139, 79, 0.28);
}
@media (min-width: 1025px) {
  .header-inner > .logo { font-size: 1.25rem; }
}
@media (max-width: 768px) {
  .header-inner > .logo { font-size: 1.05rem; letter-spacing: 0.14em; }
}
/* Лого се свива на телефон, за да съберем hamburger + лого + икони
   без horizontal overflow. Тук (след ≤768 правилото) за да печели по
   source order над 1.05rem. */
@media (max-width: 480px) {
  .header-inner > .logo { font-size: 0.86rem; letter-spacing: 0.1em; }
}
@media (max-width: 360px) {
  .header-inner > .logo { font-size: 0.72rem; letter-spacing: 0.06em; }
}

/* ============================================================
   ICON BUTTONS — фин hover circle (по-луксозен hover state)
   ============================================================ */
.header .icon-btn,
.header .theme-toggle {
  position: relative;
  border-radius: 50%;
  transition: color 0.3s var(--ease-luxe), background-color 0.3s var(--ease-luxe), transform 0.4s var(--ease-luxe);
}
.header .icon-btn::before,
.header .theme-toggle::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(201, 169, 97, 0.14), rgba(201, 169, 97, 0));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s var(--ease-luxe), transform 0.35s var(--ease-luxe);
  pointer-events: none;
  z-index: 0;
}
.header .icon-btn:hover::before,
.header .theme-toggle:hover::before {
  opacity: 1;
  transform: scale(1);
}
.header .icon-btn svg,
.header .theme-toggle svg {
  position: relative;
  z-index: 1;
}
.header .icon-btn .badge { z-index: 2; }

:root[data-theme="light"] .header .icon-btn::before,
:root[data-theme="light"] .header .theme-toggle::before {
  background: radial-gradient(circle at center, rgba(138, 115, 64, 0.14), rgba(138, 115, 64, 0));
}

/* ============================================================
   NAV — малко по-голям, по-фин шрифт
   ============================================================ */
@media (min-width: 1025px) {
  .nav { gap: 1.75rem; }
  .nav a, .nav-btn {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    transition: color 0.3s var(--ease-luxe), opacity 0.3s var(--ease-luxe);
    opacity: 0.92;
  }
  .nav a:hover, .nav-btn:hover { opacity: 1; }
  .nav a.active, .nav-btn.active { opacity: 1; }
}

/* ============================================================
   SECTION HEAD — фини разделителни линии до eyebrow-а
   ============================================================ */
.section-head .eyebrow.center::before,
.section-head .eyebrow.center::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-gold);
  vertical-align: middle;
  opacity: 0.5;
  margin: 0 14px 3px;
}

/* ============================================================
   BODY transition (smooth entry)
   ============================================================ */
body {
  animation: body-fade-in 0.45s var(--ease-luxe) both;
}
@keyframes body-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reduce motion — изключва animations/transitions */
@media (prefers-reduced-motion: reduce) {
  body,
  .btn-primary::after,
  .product .product-img img,
  .scroll-progress,
  .product-wishlist.active svg {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PRODUCT STATUS BADGES — върху product карти в shop.html
   ============================================================ */
.badge-soldout,
.badge-onorder,
.badge-instock {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-body);
  z-index: 2;
  pointer-events: none;
}
.badge-soldout {
  background: #8B0000;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.35);
}
.badge-onorder {
  background: #8a7340;        /* по-тъмен gold за добър контраст с белия текст */
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(138, 115, 64, 0.4);
}
.badge-instock {
  background: #2d6b3f;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(45, 107, 63, 0.35);
}

/* ============================================================
   SHOP PAGE — по-видима цена на product-карта (scoped)
   ============================================================ */
.page-shop .product-price {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
}
.page-shop .product-price .old {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ============================================================
   SHOP — RESPONSIVE PRODUCT GRID (scoped — home page is locked)
   - 4 cols на large desktop (≥1500px)
   - 3 cols на laptop / tablet landscape / drawer mode (600-1500px)
   - 2 cols на phone landscape & small phones (<600px)
   ============================================================ */
.page-shop .product-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 1500px) {
  .page-shop .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
@media (max-width: 1024px) {
  /* drawer активен → grid-ът заема пълната ширина → 3 cols остава OK */
  .page-shop .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
@media (max-width: 720px) {
  .page-shop .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
}

/* ============================================================
   SHOP — MOBILE-OPTIMIZED CARD ELEMENTS (scoped)
   По-малки badges, font sizes за phone-size cards
   ============================================================ */
@media (max-width: 720px) {
  .page-shop .badge-soldout,
  .page-shop .badge-onorder,
  .page-shop .badge-instock {
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }
  .page-shop .product-name {
    font-size: 1rem;
    line-height: 1.25;
  }
  .page-shop .product-price {
    font-size: 1rem;
    margin-top: 0.3rem;
  }
  .page-shop .product-brand {
    font-size: 0.6rem;
  }
}

/* Малки phones (≤400px) — още по-компактни цени за читаемост */
@media (max-width: 400px) {
  .page-shop .product-price { font-size: 0.95rem; }
  .page-shop .product-name  { font-size: 0.95rem; }
}

/* Touch-friendly paginator на mobile — min 44px target size */
@media (max-width: 720px) {
  .shop-paginator { gap: 4px; margin-top: 2.5rem; }
  .shop-paginator .page-num,
  .shop-paginator .page-nav {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 0.8rem;
  }
}

/* ============================================================
   SHOP PAGINATOR — numbered страници (1, 2, 3, …)
   ============================================================ */
.shop-paginator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4rem;
  flex-wrap: wrap;
  font-family: var(--font-body);
}
.shop-paginator .page-num,
.shop-paginator .page-nav {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s var(--ease-luxe);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-feature-settings: "tnum";
}
.shop-paginator .page-num:hover:not(.active),
.shop-paginator .page-nav:hover:not(:disabled) {
  border-color: var(--color-gold);
  color: var(--color-cream);
}
.shop-paginator .page-num.active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #0a0a0a;
  font-weight: 600;
  cursor: default;
}
.shop-paginator .page-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.shop-paginator .page-ellipsis {
  color: var(--color-text-muted);
  padding: 0 4px;
  user-select: none;
}

/* Sold out product card — избеледняла снимка + намалена непрозрачност */
.product.sold-out .product-img img {
  opacity: 0.55;
  filter: grayscale(0.25);
  transition: opacity 0.35s var(--ease-luxe), filter 0.35s var(--ease-luxe);
}
.product.sold-out:hover .product-img img {
  opacity: 0.75;
  filter: grayscale(0.1);
}

/* ============================================================
   PRODUCT DETAIL — галерия, статус, lightbox
   ============================================================ */

/* Обвиваме gallery-main + gallery-thumbs в grid (100px странична лента) */
.product-gallery {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .product-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .product-gallery .gallery-thumbs {
    order: 2;
    flex-direction: row !important;
    overflow-x: auto !important;
    max-height: none !important;
  }
  .product-gallery .gallery-main { order: 1; }
}

/* Zoom бутон върху главната снимка */
.gallery-main {
  position: relative;
  cursor: zoom-in;
}
.gallery-zoom-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(10, 10, 10, 0.72);
  color: var(--color-gold);
  border: 1px solid rgba(201, 169, 97, 0.4);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s var(--ease-luxe), background 0.2s, color 0.2s;
  z-index: 3;
}
.gallery-main:hover .gallery-zoom-btn { opacity: 1; }
.gallery-zoom-btn:hover {
  background: var(--color-gold);
  color: #0a0a0a;
}

/* Fade transition при смяна на главна снимка */
.gallery-main img.fading {
  opacity: 0.35;
  transition: opacity 0.18s ease;
}

/* ============================================================
   MOUSE-TRACKING ZOOM — desktop hover ефект на product.html
   Container вече има overflow:hidden + aspect-ratio; при .zoom-active
   транформираме снимката с origin според курсора (задава се от JS).
   ============================================================ */
.gallery-main img {
  transform-origin: center center;
  transition: transform 0.35s var(--ease-luxe);
}
.gallery-main.zoom-active img {
  transform: scale(2.2);
  /* Бързо проследяване на курсора — стойностите на transform-origin
     идват inline от mouseMove handler-а. */
  transition: transform-origin 0.08s linear;
}

/* Touch / non-hover devices — изключваме zoom (tap → lightbox) */
@media (hover: none), (max-width: 768px) {
  .gallery-main { cursor: default; }
  .gallery-main.zoom-active img {
    transform: none;
    transition: transform 0.25s var(--ease-luxe);
  }
}

/* Когато в lightbox сме — не искаме zoom върху главната.
   body.lightbox-open е JS-managed fallback за Firefox <121 (:has()). */
.lightbox.open ~ .gallery-main img,
body:has(.lightbox.open) .gallery-main.zoom-active img,
body.lightbox-open .gallery-main.zoom-active img {
  transform: none;
}

/* Vertical thumbnail column */
.product-gallery .gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 640px;
  overflow-y: auto;
}
.product-gallery .gallery-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.2s var(--ease-luxe);
  display: block;
}
.product-gallery .gallery-thumbs img.active {
  border-color: var(--color-gold);
  opacity: 1;
}
.product-gallery .gallery-thumbs img:hover { opacity: 0.9; }

/* ============================================================
   PRODUCT GALLERY — MOBILE (≤768px) — placed here intentionally
   so cascade order beats the base "vertical column" rules above.
   Layout on phone: ONE big main image at top, thumbnail strip
   horizontally scrollable below. Tap a thumbnail → main swaps.
   ============================================================ */
@media (max-width: 768px) {
  .product-gallery { gap: 10px; }
  .product-gallery .gallery-main {
    aspect-ratio: auto;
    max-height: 70vh;
    margin-bottom: 0;
  }
  .product-gallery .gallery-main img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: var(--color-bg-card);
  }
  /* Thumbnails: short horizontal strip — clearly distinct from main image */
  .product-gallery .gallery-thumbs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .product-gallery .gallery-thumbs::-webkit-scrollbar { display: none; }
  .product-gallery .gallery-thumbs img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
  }
  .product-gallery .gallery-thumbs img.active {
    border-color: var(--color-gold);
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.35);
  }
  /* Zoom button always visible on touch (no hover) */
  .gallery-zoom-btn {
    opacity: 0.85;
    width: 38px;
    height: 38px;
    bottom: 10px;
    right: 10px;
  }
}

@media (max-width: 480px) {
  .product-gallery .gallery-main,
  .product-gallery .gallery-main img { max-height: 60vh; }
  .product-gallery .gallery-thumbs img { width: 56px; height: 56px; }
}

/* ============================================================
   PRODUCT STATUS UI (product.html)
   ============================================================ */
.product-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 18px;
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
  flex-wrap: wrap;
}
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.status-dot.status-green { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22); }
.status-dot.status-gold  { background: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25); }
.status-dot.status-red   { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22); }

.status-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--color-text-dim);
  font-style: italic;
  font-weight: 400;
  margin-left: 6px;
}

/* On-order CTA бутон — по-тъмно злато, различим от in_stock */
.btn-primary.on-order-cta {
  background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold) 100%);
  color: var(--color-bg);
}
.btn-primary.on-order-cta:hover {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-bright) 100%);
}

/* Disabled бутон за sold_out */
.btn-primary:disabled,
.btn-primary.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--color-bg-soft);
  color: var(--color-text-dim);
}

/* Notify me бутон (sold out) */
.btn-notify-me {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  margin-top: 10px;
}
.btn-notify-me:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.sold-out-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-dim);
  margin-top: 6px;
  line-height: 1.5;
}

/* ============================================================
   LIGHTBOX — fullscreen overlay за главната снимка
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.96);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: lightbox-fade 0.2s ease;
}
.lightbox.open { display: flex; }
@keyframes lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transition: opacity 0.18s ease;
}
.lightbox-img.fading { opacity: 0.2; }

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  z-index: 1;
}
.lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.lightbox-arrow.prev { left: 24px; }
.lightbox-arrow.next { right: 24px; }
.lightbox-arrow.hidden { display: none; }

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.84rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
  .lightbox-close { top: 14px; right: 14px; }
  .lightbox-arrow { width: 44px; height: 44px; font-size: 18px; }
  .lightbox-arrow.prev { left: 10px; }
  .lightbox-arrow.next { right: 10px; }
  .lightbox-counter { bottom: 14px; }
}

/* ============================================================
   FILTERS — checkbox чекове за наличност
   ============================================================ */
.filter-availability label {
  cursor: pointer;
}

/* ============================================================
   NOTIFY MODAL — прост модал за sold_out
   ============================================================ */
.notify-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.notify-modal-backdrop.open { display: flex; }
.notify-modal {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 32px 28px;
  width: 420px;
  max-width: 100%;
  text-align: center;
}
.notify-modal h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: 10px;
}
.notify-modal p {
  color: var(--color-text-dim);
  font-size: 0.88rem;
  margin-bottom: 20px;
  line-height: 1.6;
}
.notify-modal input {
  width: 100%;
  padding: 11px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.notify-modal input:focus {
  outline: none;
  border-color: var(--color-gold);
}
.notify-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ============================================================
   RECENTLY VIEWED — секция преди footer на product + index
   ============================================================ */
.recently-viewed {
  padding: 60px 0 80px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.recently-viewed .section-head {
  margin-bottom: 28px;
  text-align: left;
}
.recently-viewed .section-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;
}
.recently-viewed .section-sub {
  font-size: 0.82rem;
  color: var(--color-text-dim);
  letter-spacing: 0.04em;
}

.recently-viewed-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .recently-viewed-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .recently-viewed-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .recently-viewed-grid { grid-template-columns: repeat(2, 1fr); } }

.rv-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-luxe), transform 0.3s var(--ease-luxe);
}
.rv-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.rv-img-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-soft);
}
.rv-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--img-brightness-card, 0.75));
  transition: filter 0.35s, transform 1s var(--ease-luxe);
}
.rv-card:hover .rv-img-wrap img {
  filter: brightness(var(--img-brightness-card-hover, 0.6));
  transform: scale(1.04);
}

/* .rv-badge base + status variants стилизирани в единния LUXURY STATUS BADGES блок по-горе. */
.rv-card.sold-out .rv-img-wrap img { opacity: 0.55; filter: grayscale(0.2); }

.rv-info {
  padding: 12px 14px 14px;
}
.rv-brand {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 4px;
}
.rv-name {
  font-size: 0.88rem;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1.35;
  /* Truncate след 2 реда */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.rv-price {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-gold);
  font-weight: 500;
}

/* ============================================================
   HOME — TOP СЕЛЕКЦИЯ карти в стил "бяла карта" (като recently viewed)
   Scoped под .page-home #topProductsGrid за да не засяга shop/product.
   ============================================================ */
.page-home #topProductsGrid .product {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.page-home #topProductsGrid .product-img {
  margin-bottom: 0;
}
.page-home #topProductsGrid .product-info {
  padding: 12px 14px 14px;
}
.page-home #topProductsGrid .product-price {
  color: var(--color-gold);
}

/* ============================================================
   MODAL (public) — за review-modal и други overlays
   Използва се от product.html review form-а.
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-fade 0.2s ease;
}
.modal-overlay.open { display: flex; }
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-overlay .modal {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  width: 520px;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modal-slide 0.28s var(--ease-luxe);
}
@keyframes modal-slide {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px 14px;
  border-bottom: 1px solid var(--color-border);
  gap: 14px;
}
.modal-head h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--color-gold); }

.modal-body {
  padding: 20px 26px;
  overflow-y: auto;
  flex: 1;
  color: var(--color-text);
}
.modal-foot {
  padding: 14px 26px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--color-bg-card);
}

/* Star picker в review modal */
.review-star-picker {
  display: inline-flex;
  gap: 8px;
  margin: 4px 0 2px;
}
.review-star-picker .star-pick {
  background: none;
  border: none;
  color: var(--color-border-strong);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, transform 0.15s;
}
.review-star-picker .star-pick:hover,
.review-star-picker .star-pick.hover,
.review-star-picker .star-pick.active {
  color: var(--color-gold);
  transform: scale(1.08);
}

/* Form field styling в public modal (fallback ако не е дефиниран) */
.modal-body .field { margin-bottom: 12px; }
.modal-body .field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 6px;
  font-weight: 500;
}
.modal-body .field input,
.modal-body .field textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: 3px;
  outline: none;
  transition: border-color 0.2s;
}
.modal-body .field input:focus,
.modal-body .field textarea:focus {
  border-color: var(--color-gold);
}

/* Disabled бутон в modal-foot */
.modal-foot .btn:disabled,
.modal-foot .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   ACTIVE BRAND FILTER BANNER (shop.html?brand=X)
   ============================================================ */
.active-filter-banner {
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid var(--color-border-strong);
  padding: 12px 20px;
  border-radius: 4px;
  margin: 20px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--color-text);
  font-size: 0.92rem;
}
.active-filter-banner strong {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  margin-left: 4px;
}
.clear-filter-btn {
  color: var(--color-text-dim);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.clear-filter-btn:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* ============================================================
   PHASE B+C — Color polish + Luxury micro-interactions
   Допълва existing effects (shimmer/ken-burns/nav линия/reveal
   са вече на място). Тук само фините финиширащи щрихи.
   ============================================================ */

/* Нови accent colors — добавяме, не заменяме */
:root {
  --color-gold-glow:  #e8c988;  /* по-ярко злато за highlight contexts */
  --shadow-luxe:      0 24px 48px -16px rgba(20, 14, 6, 0.55),
                      0 8px 16px -6px rgba(0, 0, 0, 0.25);
  --shadow-luxe-sm:   0 10px 24px -10px rgba(20, 14, 6, 0.45),
                      0 2px 6px -2px rgba(0, 0, 0, 0.18);
}
:root[data-theme="light"] {
  --color-gold-glow:  #b58d52;
  --shadow-luxe:      0 24px 48px -16px rgba(92, 76, 43, 0.25),
                      0 8px 16px -6px rgba(0, 0, 0, 0.08);
  --shadow-luxe-sm:   0 10px 24px -10px rgba(92, 76, 43, 0.20),
                      0 2px 6px -2px rgba(0, 0, 0, 0.06);
}

/* ─── Product card lift on hover (carta цялата, не само image) ─── */
.product {
  transition: transform 0.45s var(--ease-luxe),
              box-shadow 0.45s var(--ease-luxe);
}
.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-luxe-sm);
}

/* ─── Category cards (index.html) — малко по-изискан hover ─── */
.cat-card {
  transition: transform 0.5s var(--ease-luxe),
              box-shadow 0.5s var(--ease-luxe);
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-luxe);
}

/* ─── Testimonial cards — subtle lift ─── */
.testi-card {
  transition: transform 0.4s var(--ease-luxe),
              border-color 0.4s var(--ease-luxe);
}
.testi-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

/* ─── Reveal animations — по-премерен entrance ─── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-luxe),
              transform 0.8s var(--ease-luxe);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* Cascade delays за reveal в същи parent */
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }

/* ─── Subtle gold underline на inline links в текст ─── */
.detail-desc a,
.about-story-content a:not(.btn),
.faq-a a,
.brands-intro a {
  color: var(--color-gold);
  text-decoration: none;
  position: relative;
  background-image: linear-gradient(var(--color-gold), var(--color-gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.4s var(--ease-luxe);
}
.detail-desc a:hover,
.about-story-content a:not(.btn):hover,
.faq-a a:hover,
.brands-intro a:hover {
  background-size: 100% 1px;
}

/* ─── Selection highlight — не sky-blue a gold ─── */
::selection {
  background: rgba(201, 169, 97, 0.32);
  color: var(--color-text);
}

/* ─── Focus ring на интерактивните elements (accessibility) ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold-glow);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Smooth scroll behavior ─── */
html { scroll-behavior: smooth; }

/* Reduced motion guard — уважаваме user prefs */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .product,
  .cat-card,
  .testi-card {
    transition: none !important;
    transform: none !important;
  }
  .reveal { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   TRENDING HERO — "Най-разглеждан този месец" секция
   Заменя старата promotional банер секция.
   Liquid-glass badge + live stats от product_events.
   ============================================================ */
.trending-hero {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--color-bg);
}

.trending-wrapper {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  transition: opacity 0.5s ease;
}
@media (max-width: 900px) {
  .trending-wrapper { grid-template-columns: 1fr; gap: 40px; }
}

/* --- IMAGE SIDE --- */
.trending-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-bg-soft);
}
.trending-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.trending-image:hover img { transform: scale(1.03); }

/* Liquid-glass badge */
.trending-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(20, 20, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 40px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--font-body);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  z-index: 2;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  background: #ff4444;
  border-radius: 50%;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ff4444;
  animation: pulse-dot 2s ease-out infinite;
}
@keyframes pulse-dot {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* --- INFO SIDE --- */
.trending-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 10px;
}

.trending-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-gold);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--font-body);
  margin-bottom: 6px;
}
.eyebrow-line {
  width: 40px;
  height: 1px;
  background: var(--color-gold);
}

.trending-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.trending-brand {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 16px;
  font-weight: 500;
}
.trending-desc {
  color: var(--color-text-dim);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 10px;
  max-width: 460px;
}
.trending-price {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--color-gold);
  font-weight: 500;
  margin: 8px 0 4px;
  letter-spacing: -0.01em;
}

.trending-status {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  margin-bottom: 22px;
  font-weight: 500;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}
.trending-status.in-stock { color: #4ade80; }
.trending-status.on-order { color: var(--color-gold); }
.trending-status.sold-out { color: #f87171; }

.trending-cta {
  align-self: flex-start;
  margin-bottom: 32px;
}

.trending-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--color-border-strong), transparent);
  margin-bottom: 22px;
}

/* Stats row */
.trending-stats {
  display: flex;
  gap: clamp(24px, 5vw, 48px);
  flex-wrap: wrap;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1;
}
.stat-num.stat-trend { color: var(--color-gold); }
.stat-num.stat-trend.positive::before { content: '+'; }
.stat-num.stat-trend.new-label {
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
  font-weight: 600;
}
.stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 500;
  font-family: var(--font-body);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .trending-image:hover img { transform: none; }
  .pulse-dot::after { animation: none; }
}

/* ============================================================
   NEWSLETTER FEEDBACK — inline success/error под form-а
   ============================================================ */
.newsletter-feedback {
  margin-top: 16px;
  font-size: 0.88rem;
  text-align: center;
  min-height: 24px;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  line-height: 1.5;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.newsletter-feedback.success { color: #4ade80; }
.newsletter-feedback.error   { color: #f87171; }

/* ============================================================
   A11Y — reduced motion + touch-device tweaks (global)
   Phase 3 полировка: respects user preferences за motion и
   disable-ва hover scale/transform-и на touch устройства.
   ============================================================ */

/* Global reduced-motion guard — kill animations/transitions изцяло */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Essential animations остават: модали, dropdown-и */
  .modal, .popup, .shop-menu-overlay, .drawer, .kk-chat-window {
    transition-duration: 0.2s !important;
  }
}

/* Touch devices — премахваме hover scale/transform ефекти които
   "засядат" когато няма cursor (tap-hold, scroll). */
@media (hover: none) and (pointer: coarse) {
  .cat-card:hover img,
  .product-card:hover img,
  .brand-card:hover,
  .serviz-card:hover,
  .serviz-why-item:hover .serviz-why-icon,
  .timeline-item:hover .timeline-card,
  .cert-card:hover img,
  .social-btn:hover,
  .kk-chat-launcher:hover,
  .kk-chat-tooltip:hover {
    transform: none !important;
  }
  /* Pulse animations на social buttons — остават само ако user не е
     request-нал reduced motion (горният блок ги killва). */
}

/* ============================================================
   PROFILE PAGE — luxury account dashboard (.page-profile)
   ============================================================ */

.page-profile .profile-main {
  padding: 40px 0 100px;
  min-height: 60vh;
}

/* Loading */
.page-profile .profile-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--color-text-dim);
}
.page-profile .profile-loading-spinner {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(201, 169, 97, 0.2);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: profile-spin 0.8s linear infinite;
}
@keyframes profile-spin { to { transform: rotate(360deg); } }

/* Greeting header */
.page-profile .profile-header {
  text-align: center;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.page-profile .profile-eyebrow {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  margin-bottom: 16px;
  font-weight: 600;
}
.page-profile .profile-greeting {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--color-text);
}
.page-profile .profile-greeting em {
  font-style: italic;
  color: var(--color-gold);
}
.page-profile .profile-meta {
  font-size: 0.9rem;
  color: var(--color-text-dim);
  margin: 0;
}

/* 2-col layout */
.page-profile .profile-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
}
@media (max-width: 1024px) {
  .page-profile .profile-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Sidebar */
.page-profile .profile-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}
@media (max-width: 1024px) {
  .page-profile .profile-sidebar {
    position: relative;
    top: 0;
  }
}
.page-profile .profile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--color-border);
  padding-right: 16px;
}
@media (max-width: 1024px) {
  .page-profile .profile-nav {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 24px;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.page-profile .profile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--color-text-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.page-profile .profile-nav-link .num {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.page-profile .profile-nav-link:hover {
  color: var(--color-text);
  background: rgba(201, 169, 97, 0.06);
}
.page-profile .profile-nav-link.active {
  color: var(--color-text);
  border-left-color: var(--color-gold);
  background: rgba(201, 169, 97, 0.08);
  font-weight: 600;
}
@media (max-width: 1024px) {
  .page-profile .profile-nav-link {
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .page-profile .profile-nav-link.active {
    border-left-color: transparent;
    border-bottom-color: var(--color-gold);
  }
}

.page-profile .profile-logout-btn {
  margin-top: 24px;
  padding: 12px 14px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  font-family: inherit;
}
.page-profile .profile-logout-btn:hover {
  background: var(--color-text);
  color: var(--color-bg, #fff);
  border-color: var(--color-text);
}

/* Sections */
.page-profile .profile-section {
  margin-bottom: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 100px;
}
.page-profile .profile-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.page-profile .profile-section h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 24px;
  padding-left: 18px;
  position: relative;
  color: var(--color-text);
}
.page-profile .profile-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--color-gold);
  border-radius: 2px;
}

/* Info grid */
.page-profile .profile-info-grid {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.page-profile .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 16px;
}
.page-profile .info-row:last-child { border-bottom: none; }
.page-profile .info-label {
  font-size: 0.78rem;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-profile .info-value {
  font-size: 0.95rem;
  color: var(--color-text);
  text-align: right;
  word-break: break-word;
}

/* Buttons */
.page-profile .profile-section .btn-ghost {
  display: inline-block;
  padding: 10px 22px;
  background: none;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  font-family: inherit;
}
.page-profile .profile-section .btn-ghost:hover:not(:disabled) {
  background: var(--color-gold);
  color: #fff;
}
.page-profile .profile-section .btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Orders list */
.page-profile .orders-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-profile .order-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 18px 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--color-bg-card);
}
.page-profile .order-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.page-profile .order-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.page-profile .order-num {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
}
.page-profile .order-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-profile .order-status.status-pending   { background: rgba(255, 165, 0, 0.15);  color: #b8860b; }
.page-profile .order-status.status-confirmed { background: rgba(70, 130, 180, 0.15); color: #4682b4; }
.page-profile .order-status.status-shipped   { background: rgba(106, 90, 205, 0.15); color: #6a5acd; }
.page-profile .order-status.status-delivered { background: rgba(34, 139, 34, 0.15);  color: #228b22; }
.page-profile .order-status.status-cancelled { background: rgba(220, 20, 60, 0.15);  color: #dc143c; }

.page-profile .order-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-profile .order-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}
.page-profile .order-label { color: var(--color-text-dim); }
.page-profile .order-value { color: var(--color-text); }
.page-profile .order-total { font-weight: 600; color: var(--color-gold); }

/* Wishlist stat */
.page-profile .profile-wishlist-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.page-profile .profile-wishlist-stat .big-number {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 4rem;
  font-weight: 600;
  color: var(--color-gold);
  line-height: 1;
}
.page-profile .profile-wishlist-stat .big-label {
  font-size: 0.92rem;
  color: var(--color-text-dim);
}

/* Empty states */
.page-profile .profile-empty {
  text-align: center;
  padding: 32px 0;
}
.page-profile .profile-empty p,
.page-profile .profile-empty-text {
  color: var(--color-text-dim);
  margin-bottom: 20px;
  font-size: 0.92rem;
  line-height: 1.6;
}
.page-profile .profile-empty .btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--color-gold);
  color: #fff;
  text-decoration: none;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-radius: 3px;
  transition: background 0.2s;
}
.page-profile .profile-empty .btn:hover { background: var(--color-gold-dark, #8a7340); }

/* Not-auth full-page block */
.page-profile #profileNotAuth {
  padding: 80px 20px;
}
.page-profile #profileNotAuth h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 2rem;
  margin-bottom: 12px;
  color: var(--color-text);
}

/* ============================================================
   ACADEMY PAGE — изцяло namespace-нати rules под body[data-page="akademia"]
   и .academy-* класове. Не докосва нищо съществуващо.
   ============================================================ */
body[data-page="akademia"] .academy-page { padding-bottom: 5rem; }

.academy-lead {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--color-cream);
  max-width: 820px;
  margin: 0 auto 3rem;
  text-align: center;
  font-weight: 400;
}

/* 6 reason cards */
.academy-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.academy-reason {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.75rem;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.academy-reason:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}
.academy-reason-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.academy-reason h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-cream);
  margin: 0 0 0.65rem;
  line-height: 1.25;
}
.academy-reason p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-dim);
  margin: 0;
}
.academy-reason p strong { color: var(--color-cream); }

/* Instructor section */
.academy-instructor {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  margin-bottom: 4rem;
}
.academy-instructor-content { max-width: 760px; margin: 0 auto; }
.academy-instructor h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0.5rem 0 1.25rem;
  color: var(--color-cream);
  letter-spacing: -0.01em;
}
.academy-instructor-lead {
  font-size: 1.05rem;
  color: var(--color-text-dim);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.academy-credentials {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.academy-credentials li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}
.academy-credentials li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-gold);
  font-size: 0.7rem;
  line-height: 1.6;
}
.academy-credentials li strong { color: var(--color-cream); }

/* ===== Academy enrollment form ===== */
.academy-form-section {
  margin: 5rem auto 0;
  max-width: 880px;
  padding: 0 1rem;
  display: block;
}
.academy-form-head { text-align: center; margin-bottom: 2.5rem; }
.academy-form-head h2 {
  margin: 0.6rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--color-cream);
}
.academy-form-head h2 em {
  font-style: italic;
  color: var(--color-gold);
}
.academy-form-intro {
  color: var(--color-text-dim);
  font-size: 0.98rem;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.65;
}
.academy-form {
  display: block;
  width: 100%;
}
.academy-form .ac-block {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1.5rem 1.6rem 1.7rem;
  background: var(--color-bg-card);
  margin: 0 0 1.6rem;
  box-sizing: border-box;
}
.academy-form .ac-block legend {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding: 0 0.6rem;
  font-weight: 600;
}
.academy-form .ac-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.2rem;
  width: 100%;
}
@media (max-width: 640px) {
  .academy-form .ac-row { grid-template-columns: 1fr; }
}
.academy-form .ac-field {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.academy-form .ac-field:last-child { margin-bottom: 0; }
.academy-form .ac-field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
  color: var(--color-cream);
  font-family: var(--font-body);
  line-height: 1.4;
}
.academy-form .ac-field input[type="text"],
.academy-form .ac-field input[type="email"],
.academy-form .ac-field input[type="tel"],
.academy-form .ac-field input[type="date"],
.academy-form .ac-field input[type="number"],
.academy-form .ac-field textarea,
.academy-form .ac-field select {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 4px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.academy-form .ac-field input:focus,
.academy-form .ac-field textarea:focus,
.academy-form .ac-field select:focus {
  outline: none;
  border-color: var(--color-gold);
}
.academy-form .ac-field textarea {
  resize: vertical;
  min-height: 88px;
}
.academy-form .ac-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-dim);
  cursor: pointer;
}
.academy-form .ac-check:last-child { margin-bottom: 0; }
.academy-form .ac-check input[type="checkbox"] {
  margin: 3px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-gold);
  flex: 0 0 16px;
}
.academy-form .ac-submit {
  display: block;
  min-width: 260px;
  margin: 1rem auto 0;
}
.academy-form-msg {
  font-size: 0.95rem;
  padding: 0.85rem 1.15rem;
  border-radius: 6px;
  text-align: center;
  display: none;
  line-height: 1.5;
  margin-top: 1.25rem;
}
.academy-form-msg:not(:empty) { display: block; }
.academy-form-msg.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--color-text);
}
.academy-form-msg.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--color-text);
}

.form-message {
  font-size: 0.95rem;
  padding: 0.85rem 1.15rem;
  border-radius: 6px;
  text-align: center;
  display: none;
  line-height: 1.5;
}
.form-message:not(:empty) { display: block; }
.form-message-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--color-text);
}
.form-message-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--color-text);
}

/* ============================================================
   I18N — Phase 1: FOUC prevention + Language Toggle (BG / EN)
   ============================================================ */
html.i18n-loading body { visibility: hidden; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cream);
  user-select: none;
  line-height: 1;
}
.lang-toggle .lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 40px;
  padding: 0 5px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease-luxe, ease), color 0.2s var(--ease-luxe, ease);
  border-radius: 2px;
  font-weight: 500;
}
.lang-toggle .lang-option:hover,
.lang-toggle .lang-option:focus-visible {
  opacity: 1;
  color: var(--color-gold);
}
/* Текущият език е скрит — показваме САМО езика, към който се превключва */
.lang-toggle .lang-option.active {
  display: none;
}
.lang-toggle .lang-option:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 2px;
}

:root[data-theme="light"] .lang-toggle {
  color: var(--color-charcoal, #1a1a1a);
}

@media (max-width: 768px) {
  .lang-toggle {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
  }
  .lang-toggle .lang-option {
    height: 36px;
    min-width: 24px;
    padding: 0 4px;
  }
}
@media (max-width: 480px) {
  .lang-toggle {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    gap: 0.1rem;
  }
  .lang-toggle .lang-option {
    min-width: 22px;
    padding: 0 3px;
  }
}