/* ==========================================================================
   STEADY.UA — стилі магазину (v3, яскравий фіолетово-золотий дизайн)

   Палітра:
     --ink        #1E1230  темний графіт з фіолетовим підтоном
     --ink-soft   #665C7A  другорядний текст
     --paper      #FFFFFF  фон
     --paper-2    #FAF7FF  м'які панелі (легкий лавандовий відтінок)
     --paper-3    #F0EAFB  межі панелей
     --line       #E7DFF6  тонкі лінії
     --signal     #7C3AED  основний акцент — насичений фіолетовий
     --signal-ink #5B21B6  акцент, темніший відтінок (hover)
     --gold       #F0B429  другорядний акцент — золотисто-жовтий
     --gold-dark  #B45309  золотий, темніший відтінок (hover/текст на світлому)
     --brass      #C99A02  дрібні деталі (штрихи іконок)
     --success    #2F8F5B

   Типографіка (на прохання клієнта — Montserrat по всьому сайту):
     display — Montserrat, вага 900 (Black)
     body    — Montserrat, вага 500/600
     mono    — JetBrains Mono (ціни, характеристики, лічильники)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --ink: #1e1230;
  --ink-soft: #665c7a;
  --paper: #ffffff;
  --paper-2: #faf7ff;
  --paper-3: #f0eafb;
  --line: #e7dff6;
  --signal: #7c3aed;
  --signal-ink: #5b21b6;
  --gold: #f0b429;
  --gold-dark: #b45309;
  --brass: #c99a02;
  --success: #2f8f5b;
  --success-bg: #eaf5ee;

  /* Аліаси для admin.css (старі назви змінних → нова палітра) */
  --accent: var(--signal);
  --accent-dark: var(--signal-ink);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --bg: var(--paper);
  --bg-soft: var(--paper-2);
  --bg-soft-2: var(--paper-3);

  --font-display: "Montserrat", sans-serif;
  --font-body: "Montserrat", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --radius: 6px;
  --radius-lg: 14px;
  --container: 1200px;
  --shadow-sm: 0 1px 2px rgba(30,18,48,0.06);
  --shadow-md: 0 8px 24px rgba(30,18,48,0.1);
  --shadow-lg: 0 24px 60px rgba(30,18,48,0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 28px);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.01em;
}

.mono { font-family: var(--font-mono); }

/* ---------- Тік-дивайдер (фірмовий елемент: шкала рівня штатива) ---------- */
.tick-divider {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 14px;
  overflow: hidden;
}
.tick-divider span { flex: 1; height: 5px; background: var(--line); border-radius: 1px; }
.tick-divider span:nth-child(5n) { height: 10px; background: var(--signal); }
.tick-divider span:nth-child(10n) { height: 14px; background: var(--gold); }

/* ---------- Фірмові SVG-ілюстрації штативів ---------- */
.tripod-icon { width: 60%; height: 60%; }
.tripod-icon .ic-line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.tripod-icon .ic-line-thick { stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; fill: none; }
.tripod-icon .ic-line-dash { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: 5 6; }
.tripod-icon .ic-brace { stroke: var(--brass); stroke-width: 3; stroke-linecap: round; }
.tripod-icon .ic-line-fill { fill: var(--ink); }
.tripod-icon .ic-accent { fill: var(--signal); }
.tripod-icon .ic-dot { fill: var(--ink); }
.tripod-icon .ic-ring { fill: none; stroke: var(--signal); stroke-width: 5; }
.tripod-icon .ic-ring-inner { fill: none; stroke: var(--brass); stroke-width: 2.5; stroke-dasharray: 3 5; }

.icon-panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 30% 15%, #ffffff 0%, var(--paper-2) 60%),
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(21,23,26,0.035) 28px);
  position: relative;
}
.icon-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(21,23,26,0.08);
  margin: 14px;
  pointer-events: none;
}

/* ---------- Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  z-index: 50;
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 24px;
}
.header-left { grid-column: 1; justify-self: start; }
.logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 9px;
  grid-column: 1;
  justify-self: start;
}
.logo .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  display: inline-block;
}
.main-nav {
  display: flex;
  gap: 32px;
  font-size: 13.5px;
  font-weight: 500;
  grid-column: 2;
  justify-self: center;
}
.main-nav a { color: var(--ink-soft); transition: color .15s; position: relative; }
.main-nav a:hover { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: clamp(6px, 2vw, 14px); grid-column: 3; justify-self: end; }

.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: clamp(36px, 9vw, 38px); height: clamp(36px, 9vw, 38px);
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 clamp(7px, 2vw, 9px);
  flex-shrink: 0;
}
.burger-btn span { display: block; width: 100%; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding: 8px 0;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 13px 4px; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-nav a:last-child { border-bottom: none; }
/* Перемикач мови всередині випадного меню ☰ — на всю ширину, з великими
   кнопками під палець (на відміну від крихітної версії в шапці). */
.mobile-lang-switch {
  height: auto;
  margin: 4px 4px 12px;
  align-self: stretch;
}
.mobile-lang-switch .lang-btn { flex: 1; padding: 12px 0; font-size: 13.5px; }

.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 9px);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  padding: clamp(8px, 2.4vw, 10px) clamp(10px, 3.2vw, 16px);
  border-radius: var(--radius);
  font-size: clamp(12px, 3.2vw, 13.5px);
  font-weight: 500;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.cart-btn:hover { background: var(--signal); border-color: var(--signal); }
.cart-badge {
  background: var(--gold);
  color: #2a1a00;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ---------- Промо-слайдер (банери) ---------- */
.promo-slider-wrap {
  /* На ПК банер набагато ширший за звичайний .container (1200px) — щоб не
     лишалось величезних порожніх полів обабіч на великих екранах, як у
     решти вузького контенту сторінки. Трохи менший відступ, ніж було. */
  max-width: 1680px;
  padding-left: clamp(12px, 2vw, 22px);
  padding-right: clamp(12px, 2vw, 22px);
  padding-top: clamp(12px, 2vw, 18px);
  padding-bottom: clamp(12px, 2vw, 18px);
}
.promo-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 524;
  overflow: hidden;
  background: var(--ink);
  border-radius: 24px;
}
.promo-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .55s cubic-bezier(0.65, 0, 0.35, 1);
}
.promo-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.promo-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.promo-slide a { display: block; width: 100%; height: 100%; }
.promo-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.promo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none; padding: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.promo-dot.active { background: #fff; transform: scale(1.25); }
.promo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(21,23,26,0.35);
  color: #fff;
  border: none;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background .2s;
}
.promo-arrow:hover { background: rgba(21,23,26,0.6); }
.promo-arrow.prev { left: 14px; }
.promo-arrow.next { right: 14px; }
@media (max-width: 600px) {
  .promo-slider { border-radius: 16px; }
  .promo-slider-wrap { padding-top: 10px; padding-bottom: 10px; padding-left: clamp(16px, 4.5vw, 28px); padding-right: clamp(16px, 4.5vw, 28px); }
  .promo-arrow { width: 30px; height: 30px; font-size: 13px; }
  .promo-dots { bottom: 10px; }
}

/* ---------- Обране (кнопка-сердечко) ---------- */
.fav-btn {
  position: absolute;
  top: clamp(8px, 2vw, 14px);
  right: clamp(8px, 2vw, 14px);
  width: clamp(26px, 6vw, 34px);
  height: clamp(26px, 6vw, 34px);
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.fav-btn:hover { transform: scale(1.08); border-color: var(--signal); }
.fav-btn svg { width: clamp(13px, 3vw, 17px); height: clamp(13px, 3vw, 17px); stroke: var(--ink); fill: none; stroke-width: 2; transition: fill .15s, stroke .15s; }
.fav-btn.active svg { fill: var(--signal); stroke: var(--signal); }

.fav-header-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 9vw, 40px);
  height: clamp(36px, 9vw, 40px);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  transition: border-color .15s;
  flex-shrink: 0;
}
.fav-header-btn:hover { border-color: var(--ink); }
.fav-header-btn svg { width: clamp(14px, 4vw, 18px); height: clamp(14px, 4vw, 18px); stroke: var(--ink); fill: none; stroke-width: 2; }
.fav-header-btn .cart-badge { position: absolute; top: -7px; right: -7px; }

.lang-switch {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  height: clamp(36px, 9vw, 40px);
}
.lang-btn {
  padding: 0 12px;
  border: none;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  transition: background .15s, color .15s;
}
.lang-btn.active { background: var(--ink); color: #fff; }
.lang-btn:hover:not(.active) { background: var(--paper-2); color: var(--ink); }

.account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: clamp(36px, 9vw, 40px);
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  transition: border-color .15s;
  flex-shrink: 0;
}
.account-btn:hover { border-color: var(--ink); }
.account-btn svg { width: 17px; height: 17px; fill: var(--ink-soft); flex-shrink: 0; }

/* ---------- Пошук у шапці ---------- */
.search-header-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 9vw, 40px);
  height: clamp(36px, 9vw, 40px);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  transition: border-color .15s;
  flex-shrink: 0;
}
.search-header-btn:hover { border-color: var(--ink); }
.search-header-btn svg { width: clamp(14px, 4vw, 18px); height: clamp(14px, 4vw, 18px); stroke: var(--ink); fill: none; stroke-width: 2; }

/* Інлайн-пошук у шапці — тільки для мобільних (ховаємо на десктопі).
   Розтягується пропорційно ширині екрана між лого та іконками дій. */
.mobile-search-bar {
  display: none; /* показується лише через медіазапит нижче */
}

.search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 18, 48, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 90;
}
.search-backdrop.open { opacity: 1; pointer-events: auto; }
body.search-open-lock { overflow: hidden; }

.search-overlay {
  position: fixed;
  z-index: 91;
  top: 78px;
  left: 50%;
  width: min(94vw, 480px);
  max-height: min(72vh, 620px);
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -10px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.search-overlay.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.search-overlay-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.search-input-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  height: 44px;
}
.search-input-icon { width: 17px; height: 17px; stroke: var(--ink-soft); fill: none; stroke-width: 2; flex-shrink: 0; }
.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  height: 100%;
}
.search-input::placeholder { color: var(--ink-soft); }
.search-clear-btn, .search-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .15s;
}
.search-clear-btn:hover, .search-close-btn:hover { background: var(--paper-3); }
.search-clear-btn[hidden] { display: none; }
.search-clear-btn svg, .search-close-btn svg { width: 14px; height: 14px; stroke: var(--ink-soft); stroke-width: 2; fill: none; }
.search-close-btn { width: 36px; height: 36px; }
.search-close-btn svg { width: 16px; height: 16px; }

.search-results {
  overflow-y: auto;
  padding: 8px;
}
.search-hint {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
}
.search-results-list { display: flex; flex-direction: column; gap: 2px; }
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius);
  transition: background .15s;
}
.search-result-item:hover { background: var(--paper-2); }
.search-result-media {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-result-media img { width: 100%; height: 100%; object-fit: cover; }
.search-result-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.search-result-icon svg { width: 70%; height: 70%; }
.search-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-result-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-cat { font-size: 11.5px; color: var(--ink-soft); }
.search-result-price { font-size: 13px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
.search-show-all {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--signal);
  font-weight: 600;
  font-size: 13.5px;
  border-radius: 0;
}
.search-show-all:hover { color: var(--signal-ink); }

/* Стан пошуку над фільтрами каталогу на головній */
.search-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.search-status-clear {
  border: none;
  background: none;
  color: var(--signal);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.search-status-clear:hover { color: var(--signal-ink); }

/* На телефоні панель пошуку розгортається на весь екран — так набагато
   зручніше набирати текст і гортати результати пальцем, ніж у вузькому
   випадаючому вікні. */
@media (max-width: 700px) {
  .search-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    transform: translateY(-100%);
  }
  .search-overlay.open { transform: translateY(0); }
  .search-overlay-inner { padding: 14px 12px; }
  .search-input-row { height: 46px; }
  .search-results { flex: 1; padding: 10px; }
  .search-result-media { width: 52px; height: 52px; }
}

.auth-divider {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 18px 0;
  position: relative;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--line);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

.auth-error {
  color: var(--signal);
  font-size: 13px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(124,58,237,0.08);
  border-radius: var(--radius);
}

.product-info .fav-btn { position: static; width: 44px; height: 44px; }
.product-info .fav-btn svg { width: 20px; height: 20px; }

.fav-line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: flex-start; overflow: hidden; }
.fav-line .card-media { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius); border: 1px solid var(--line); }
.fav-line-info { flex: 1; min-width: 0; }
.fav-line-info h4 { font-size: 14px; margin-bottom: 4px; font-weight: 600; word-break: break-word; }
.fav-line-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.fav-line-remove { background: none; border: none; font-size: 12px; color: var(--ink-soft); text-decoration: underline; }
.fav-line-remove:hover { color: var(--signal); }
.fav-empty { text-align: center; padding: 70px 20px; color: var(--ink-soft); font-size: 14px; }

/* ---------- Особистий кабінет ---------- */
.cabinet-modal { width: 560px; }
.cabinet-tab-body {
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 22px;
  /* не даём контенту вылезать за края модала */
  overflow-x: hidden;
}
.cabinet-order-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 14px 4px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  transition: background .15s;
  cursor: pointer;
}
.cabinet-order-row:hover { background: var(--paper-2); }
.cabinet-order-row:last-child { border-bottom: none; }
.cabinet-order-id {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-all;   /* длинные старые номера не ломают верстку */
  line-height: 1.3;
}
.cabinet-order-date { font-size: 12.5px; color: var(--ink-soft); }
.cabinet-order-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.cabinet-order-right .price {
  font-size: 14px;
  white-space: nowrap;
}

.status-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-soft);
  white-space: nowrap;
  display: inline-block;
}
.status-pill.new { background: #FFF1E9; color: #C05A1E; }
.status-pill.confirmed { background: #E7F0FF; color: #2A5FC4; }
.status-pill.done { background: var(--success-bg); color: var(--success); }
.status-pill.cancelled { background: #FCE9E7; color: var(--signal-ink); }

.order-detail-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.order-detail-section h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 12px; font-weight: 700; }
.order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.order-item-row span:first-child {
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
  line-height: 1.4;
}
.order-item-row span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}
.contact-line { font-size: 14px; margin-bottom: 8px; line-height: 1.5; word-break: break-word; }
.contact-line strong { color: var(--ink-soft); font-weight: 500; margin-right: 6px; }

@media (max-width: 600px) {
  .cabinet-modal { width: 100%; }
  .cabinet-tab-body { max-height: 65vh; }

  /* Вкладки кабінету — три кнопки на вузькому екрані */
  #cabinetTabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
  #cabinetTabs .option-btn { font-size: 12px; padding: 7px 4px; text-align: center; }

  /* Рядок замовлення — статус і сума у стовпчик, більше місця для назви */
  .cabinet-order-id { font-size: 13px; }
  .cabinet-order-right { gap: 4px; }
  .cabinet-order-right .price { font-size: 13px; }
  .status-pill { font-size: 11px; padding: 3px 8px; }

  /* Деталі замовлення — товари в рядку перенос при потребі */
  .order-item-row { font-size: 13px; gap: 6px; }

  /* Корзина в кабінеті — фото менше, текст не обрізається */
  .cart-line .card-media { width: 52px; height: 52px; flex-shrink: 0; }
  .cart-line-info h4 { font-size: 13px; }
  .cart-line-info .price { font-size: 13px; }

  /* Кнопка замовити */
  #cabinetCartFoot .btn { font-size: 14px; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 64px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 400px at 92% -10%, rgba(240,180,41,0.16), transparent 70%),
    radial-gradient(500px 380px at -5% 110%, rgba(124,58,237,0.14), transparent 70%);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(240,180,41,0.15);
  border: 1px solid rgba(240,180,41,0.35);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  width: fit-content;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(240,180,41,0.25);
}
.hero h1 {
  font-size: 56px;
  line-height: 1.04;
  margin-bottom: 22px;
  font-weight: 600;
}
.hero p.lead {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 460px;
  margin-bottom: 32px;
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
}
.hero-stats div span {
  font-size: 12px;
  color: var(--ink-soft);
}
.hero-visual {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-visual .tripod-icon { width: 62%; height: 62%; }
.hero-visual .tripod-icon .ic-line,
.hero-visual .tripod-icon .ic-line-thick { stroke-width: 2.5; }
.level-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
.level-badge .bubble {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px var(--success-bg);
}
.spec-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2a1a00;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Trust bar ---------- */
.trust-bar { border-bottom: 1px solid var(--line); padding: clamp(16px, 3.2vw, 26px) 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2.6vw, 20px); }
.trust-item { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 12px); font-size: clamp(11px, 2.4vw, 13.5px); color: var(--ink-soft); }
.trust-item .ti-icon {
  width: clamp(26px, 6vw, 34px); height: clamp(26px, 6vw, 34px); border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(240,180,41,0.18));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: clamp(12px, 2.6vw, 15px);
}
.trust-item strong { color: var(--ink); font-weight: 700; display: block; font-size: clamp(11.5px, 2.5vw, 13.5px); }
.trust-item .ti-desc { display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: clamp(10px, 2.2vw, 14px) clamp(16px, 3.6vw, 26px); border-radius: var(--radius); font-size: clamp(12.5px, 2.6vw, 14px); font-weight: 700;
  border: 1px solid transparent; transition: all .15s ease;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--signal); transform: translateY(-1px); }
.btn-accent { background: var(--signal); color: #fff; }
.btn-accent:hover { background: var(--signal-ink); transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }
.btn-sm { padding: clamp(7px, 1.6vw, 9px) clamp(11px, 2.6vw, 15px); font-size: clamp(11.5px, 2.4vw, 13px); }

/* ---------- Sections ---------- */
.section { padding: clamp(32px, 7vw, 72px) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(20px, 4vw, 36px); gap: 24px; }
.section-head h2 { font-size: clamp(21px, 4.6vw, 32px); }
.section-head p { color: var(--ink-soft); font-size: clamp(12.5px, 2.6vw, 14px); margin-top: 8px; }

/* ---------- Categories filter ---------- */
.filters { display: flex; flex-wrap: wrap; gap: clamp(6px, 1.6vw, 10px); margin-bottom: clamp(20px, 4vw, 36px); }
.filter-chip {
  border: 1px solid var(--line); background: var(--paper); padding: clamp(7px, 1.6vw, 10px) clamp(12px, 3vw, 18px);
  border-radius: 999px; font-size: clamp(12px, 2.6vw, 13px); font-weight: 500; color: var(--ink-soft);
  transition: all .15s;
}
.filter-chip.active { background: var(--signal); border-color: var(--signal); color: #fff; }
.filter-chip:hover:not(.active) { border-color: var(--ink); color: var(--ink); }

/* ---------- Product grid & cards ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2.2vw, 26px); }
.card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper); transition: border-color .2s, box-shadow .2s, transform .2s;
  display: flex; flex-direction: column; position: relative;
}
.card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card-media { aspect-ratio: 1 / 1; position: relative; overflow: hidden; display: block; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card-media .tripod-icon { transition: transform .3s ease; }
.card:hover .card-media .tripod-icon { transform: scale(1.06) translateY(-2px); }
.card:hover .card-media img { transform: scale(1.04); }
/* Тап-анімація для мобільних (де :hover не працює) — картка "натискається"
   й трохи спливає при відпусканні, поки триває перехід на сторінку товару.
   На пристроях без наведення (touch) прибираємо стандартний сірий "спалах"
   при тапі, бо власна анімація вже дає відчутний відгук.

   Навмисно анімуємо ЛИШЕ transform (без box-shadow чи border-color) —
   transform браузер обробляє на GPU й це не навантажує навіть слабкі
   телефони, на відміну від тіні, яку довелось би перемальовувати на
   кожному кадрі. */
.card, .card-media, .card-body h3 a, .card-actions a {
  -webkit-tap-highlight-color: transparent;
}
.card:active,
.card.card-pressed {
  transform: scale(0.96);
  transition: transform .16s cubic-bezier(.4,0,.2,1);
}
.card:active .card-media img,
.card.card-pressed .card-media img {
  transform: scale(1.05);
}
.card:active .card-media .tripod-icon,
.card.card-pressed .card-media .tripod-icon {
  transform: scale(1.08);
}
@media (hover: none) {
  .card.card-releasing {
    transform: scale(1.015);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  }
}
.badge {
  position: absolute; top: clamp(8px, 2vw, 14px); left: clamp(8px, 2vw, 14px); font-family: var(--font-mono);
  font-size: clamp(9.5px, 2vw, 11px); font-weight: 700; padding: clamp(3px, 1vw, 5px) clamp(7px, 1.8vw, 10px); border-radius: 3px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #2a1a00; z-index: 2;
}
.badge-out {
  position: absolute; inset: 0; background: rgba(255,255,255,0.82);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: clamp(11px, 2.2vw, 12.5px); font-weight: 600; color: var(--ink-soft); z-index: 3;
}
.card-body { padding: clamp(8px, 2vw, 14px); display: flex; flex-direction: column; gap: clamp(3px, 0.8vw, 5px); flex: 1; }
.card-cat { font-family: var(--font-mono); font-size: clamp(9px, 1.8vw, 10.5px); text-transform: uppercase; letter-spacing: 0.06em; color: var(--signal); font-weight: 600; }
.card-body h3 { font-size: clamp(12px, 2.6vw, 16px); font-weight: 800; line-height: 1.25; }
.card-desc { font-size: clamp(11px, 2.2vw, 13px); color: var(--ink-soft); flex: 1; line-height: 1.4; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.price-row { display: flex; align-items: baseline; gap: 9px; }
.price { font-family: var(--font-mono); font-weight: 600; font-size: clamp(13px, 2.6vw, 17px); }
.old-price { font-family: var(--font-mono); font-size: clamp(10px, 2vw, 13px); color: var(--ink-soft); text-decoration: line-through; }
.card-actions { display: flex; gap: 8px; margin-top: clamp(6px, 1.4vw, 10px); }

/* ---------- Product detail page ---------- */
.breadcrumbs {
  font-size: 13px; color: var(--ink-soft); margin-bottom: 28px;
  display: flex; gap: 6px; align-items: baseline;
  flex-wrap: wrap;                /* перенос если не влезает */
}
.breadcrumbs a { white-space: nowrap; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span:last-child {   /* последний элемент (название товара) */
  word-break: break-word;
  overflow-wrap: break-word;
}
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-bottom: 72px; }
.product-gallery { position: sticky; top: 100px; min-width: 0; overflow: hidden; }
.product-media {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  aspect-ratio: 1/1; overflow: hidden; position: relative; cursor: zoom-in;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }

/* Трек з слайдами (swipe) */
.pg-track {
  display: flex;
  height: 100%;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
  will-change: transform;
  user-select: none;
  touch-action: pan-y;
}
.pg-slide { flex: 0 0 100%; height: 100%; }
.pg-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Крапки всередині media */
.pg-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.pg-dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55);
  transition: background .2s; cursor: pointer;
}
.pg-dot.active { background: #fff; }

/* Підказка zoom */
.pg-zoom-hint {
  position: absolute; bottom: 10px; right: 12px; font-size: 16px;
  opacity: .55; pointer-events: none; z-index: 2;
}

.product-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; max-width: 100%; }
.product-thumb {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden; padding: 0; cursor: pointer; background: var(--paper-2);
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb.active { border-color: var(--ink); }

/* ── Zoom-оверлей ────────────────────────────────────────────────── */
#pgZoomOverlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.92);
  flex-direction: column; align-items: center; justify-content: center;
}
#pgZoomOverlay.open { display: flex; }
.pgz-track-wrap {
  width: 100%; max-width: 900px; overflow: hidden; flex: 1;
  display: flex; align-items: center;
  touch-action: none; /* передаємо всі жести нашому обробнику */
}
.pgz-track {
  display: flex; width: 100%; transition: transform .3s cubic-bezier(.65,0,.35,1);
  will-change: transform; user-select: none; touch-action: pan-y;
}
.pgz-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
.pgz-img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; pointer-events: none; }
.pgz-close {
  position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,.12);
  border: none; color: #fff; font-size: 22px; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 2;
}
.pgz-close:hover { background: rgba(255,255,255,.25); }
.pgz-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12); border: none; color: #fff;
  font-size: 28px; width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 2;
}
.pgz-arrow:hover { background: rgba(255,255,255,.28); }
.pgz-prev { left: 16px; }
.pgz-next { right: 16px; }
.pgz-dots {
  display: flex; gap: 7px; padding: 14px 0 18px; flex-wrap: wrap; justify-content: center;
}
.pgz-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35);
  cursor: pointer; transition: background .2s;
}
.pgz-dot.active { background: #fff; }
.product-info .card-cat { margin-bottom: 12px; }
.product-info h1 { font-size: clamp(22px, 4.4vw, 36px); margin-bottom: 16px; line-height: 1.1; }
.product-info .price-row { margin: 20px 0; }
.product-info .price { font-size: clamp(20px, 4vw, 32px); }
.stock-line {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px; background: var(--success-bg); color: var(--success); margin-bottom: 22px;
}
.stock-line.out { background: var(--paper-3); color: var(--ink-soft); }
.stock-line .bubble { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.product-desc { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; margin: 0; }
.product-desc-block {
  max-width: 720px;
  margin: 0 auto 72px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.product-desc-block h3 { font-size: 20px; margin-bottom: 16px; }
.product-desc.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-toggle-btn {
  background: none;
  border: none;
  color: var(--signal);
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
  padding: 0;
}
.desc-toggle-btn:hover { color: var(--signal-ink); text-decoration: underline; }
.spec-table { border-top: 1px solid var(--line); margin-top: 26px; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(80px, 35%) 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  align-items: baseline;
}
.spec-row span:first-child { color: var(--ink-soft); }
.spec-row span:last-child { font-family: var(--font-mono); font-weight: 500; word-break: break-word; }
.qty-row { display: flex; align-items: center; gap: 14px; margin: 26px 0; flex-wrap: wrap; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.qty-stepper button { width: 40px; height: 44px; background: none; border: none; font-size: 16px; color: var(--ink); }
.qty-stepper button:hover { background: var(--paper-2); }
.qty-stepper span { width: 40px; text-align: center; font-family: var(--font-mono); font-weight: 600; }

/* ---------- Cart drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(21,23,26,0.4); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s; }
.overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; background: #fff; z-index: 101;
  box-shadow: -12px 0 40px rgba(0,0,0,0.15); transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 24px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.drawer-head h3 { font-size: 19px; }
.drawer-close { background: none; border: none; font-size: 20px; color: var(--ink-soft); line-height: 1; }
.drawer-close:hover { color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 26px; }
.drawer-foot { padding: 22px 26px; border-top: 1px solid var(--line); }
.cart-line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.cart-line .card-media { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius); border: 1px solid var(--line); }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-info h4 { font-size: 14px; margin-bottom: 4px; font-weight: 600; word-break: break-word; }
.cart-line-info .price { font-size: 14px; }
.cart-line-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; gap: 6px; }
.cart-line-remove { background: none; border: none; font-size: 12px; color: var(--ink-soft); text-decoration: underline; }
.cart-line-remove:hover { color: var(--signal); }
.cart-empty { text-align: center; padding: 70px 20px; color: var(--ink-soft); font-size: 14px; }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 15px; font-weight: 600; }
.cart-total-row .price { font-size: 21px; }

/* ---------- Checkout form ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(21,23,26,0.5); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 480px; max-width: 100%; max-height: 90vh; overflow-y: auto; padding: 36px; box-shadow: var(--shadow-lg); }
.modal h3 { font-size: 21px; margin-bottom: 6px; }
.modal p.sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
.field-optional { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font-size: 14px; font-family: inherit; background: var(--paper);
  transition: border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--signal); }
.field textarea { resize: vertical; min-height: 72px; }
.field-error { color: var(--signal); font-size: 12px; margin-top: 5px; display: none; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--signal); }
.field.invalid .field-error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field .checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 400; margin-bottom: 0; cursor: pointer; }
.field .checkbox-row input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--signal); cursor: pointer; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto;
  z-index: 10; display: none; margin-top: 4px;
}
.autocomplete-list.open { display: block; }
.autocomplete-item { padding: 11px 14px; font-size: 13.5px; cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--paper-2); }
.autocomplete-empty { padding: 11px 14px; font-size: 13px; color: var(--ink-soft); }
.field select:disabled { color: var(--ink-soft); background: var(--paper-2); cursor: not-allowed; }
.field.full { grid-column: 1 / -1; }

.option-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.option-btn {
  flex: 1;
  min-width: 120px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 12px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
  transition: all .15s;
}
.option-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.option-btn:hover:not(.active) { border-color: var(--ink); color: var(--ink); }
.prepay-note {
  margin-top: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.prepay-note strong { color: var(--ink); font-family: var(--font-mono); }
.modal-summary { background: var(--paper-2); border-radius: var(--radius); padding: 15px 17px; margin-bottom: 22px; font-size: 13px; }
.modal-summary .row { display: flex; justify-content: space-between; padding: 3px 0; }

.success-box { text-align: center; padding: 24px 0; }
.success-box .check {
  width: 60px; height: 60px; border-radius: 50%; background: var(--success-bg); color: var(--success);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 27px;
}
.success-box h3 { margin-bottom: 10px; }
.success-box p { color: var(--ink-soft); font-size: 14px; margin-bottom: 4px; }

/* ---------- Value props section ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 24px); }
.value-card { padding: clamp(18px, 4vw, 28px); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); background: var(--paper-2); }
.value-card .vc-icon { font-size: clamp(19px, 4vw, 22px); margin-bottom: clamp(10px, 2.4vw, 16px); display: block; }
.value-card h3 { font-size: clamp(15px, 3.4vw, 17px); margin-bottom: 10px; }
.value-card p { font-size: clamp(12.5px, 2.8vw, 13.5px); color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* Блок «Нещодавно переглянуті» на сторінці товару */
.recently-viewed-section {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding-top: clamp(24px, 5vw, 48px);
  padding-bottom: clamp(24px, 5vw, 48px);
}
.recently-viewed-section .section-head {
  padding: 0 clamp(16px, 4.5vw, 28px);
  max-width: var(--container);
  margin: 0 auto clamp(16px, 3vw, 24px);
}
/* Обгортка зі скролом — трохи ширша за container, щоб картки виглядали
   як «нескінченна» горизонтальна стрічка. */
.rv-scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  /* Плавний свайп на тачпад і сенсорному екрані */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;          /* Firefox — ховаємо скролбар */
  padding: 6px clamp(16px, 4.5vw, 28px) 16px;
}
.rv-scroll-wrap::-webkit-scrollbar { display: none; } /* Chrome/Safari */
/* Рядок із карточками */
.rv-track {
  display: flex;
  gap: clamp(12px, 2.5vw, 18px);
  width: max-content;
}
/* Кожна картка — фіксована ширина, прив'язана до снепу */
.rv-track .card {
  width: clamp(160px, 44vw, 220px);
  flex-shrink: 0;
  scroll-snap-align: start;
  background: var(--paper);
  border-radius: var(--radius-lg);
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 56px 0 32px; margin-top: 40px;
  background: linear-gradient(135deg, #1e1230 0%, #341a5e 100%);
  color: #e9e2f7;
}
.site-footer .logo { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.1fr 0.85fr 0.85fr 0.9fr 1.3fr; gap: 32px; padding-bottom: 36px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); margin-bottom: 14px; font-family: var(--font-body); font-weight: 700; }
.footer-col a, .footer-col p { display: block; font-size: 13.5px; color: #c9bfe0; margin-bottom: 9px; line-height: 1.5; }
.footer-col a:hover { color: var(--gold); }

/* ---------- Підписка на розсилку (у підвалі) ---------- */
.subscribe-box {
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 22px);
}
.subscribe-box h4 {
  text-transform: none; letter-spacing: normal; font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 4px; font-family: var(--font-body);
}
.subscribe-box p { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 14px; }
.subscribe-form { display: flex; flex-direction: column; gap: 10px; }
.subscribe-form input[type="email"] {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink); font-size: 13.5px; font-family: var(--font-body);
}
.subscribe-form input[type="email"]::placeholder { color: var(--ink-soft); }
.subscribe-form input[type="email"]:focus { outline: none; border-color: var(--gold); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-dark); color: #fff; transform: translateY(-1px); }
.subscribe-msg { font-size: 12.5px; color: var(--success); margin: 10px 0 0; min-height: 0; display: none; }
.subscribe-msg.show { display: block; }
.subscribe-msg.is-error { color: #c0392b; }

/* Підписка на розсилку окремим блоком між "Чому обирають" і підвалом —
   показуємо лише на мобільній версії (на десктопі підписка й так є
   всередині підвалу, в .footer-subscribe). */
.section-subscribe-mobile { display: none; }
.section-subscribe-mobile .subscribe-box { max-width: 420px; margin: 0 auto; }

.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #a99ac4; }
.footer-inner a { color: #a99ac4; }
.footer-inner a:hover { color: var(--gold); }
.admin-link { font-family: var(--font-mono); font-size: 12px; }

/* ---------- Стрілка "На головну" в шапці ---------- */
.header-left { display: flex; align-items: center; gap: 12px; }
.back-arrow-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); flex-shrink: 0; transition: border-color .15s, background .15s;
}
.back-arrow-btn:hover { border-color: var(--ink); background: var(--paper-2); }
.back-arrow-btn svg { width: 17px; height: 17px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 90px 20px; color: var(--ink-soft); }

/* ---------- Текстова сторінка (правила, політики тощо) ---------- */
.policy-page { padding: 44px 0 80px; }
.policy-page .breadcrumbs { margin-bottom: 26px; }
.policy-page .policy-inner { max-width: 760px; }
.policy-page h1 { font-size: 34px; line-height: 1.15; margin-bottom: 18px; }
.policy-page .lead { font-size: 16px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 36px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.policy-page h2 { font-size: 22px; margin: 40px 0 16px; }
.policy-page h3 { font-size: 15px; font-family: var(--font-body); font-weight: 600; margin: 22px 0 10px; }
.policy-page p { font-size: 15px; color: var(--ink-soft); line-height: 1.75; margin: 0 0 16px; }
.policy-page p strong { color: var(--ink); }
.policy-page ul { margin: 0 0 16px; padding-left: 20px; }
.policy-page li { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 8px; }
.policy-page .policy-note {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 24px 0;
}
.policy-page .policy-note strong { color: var(--ink); }
@media (max-width: 600px) {
  .policy-page h1 { font-size: 26px; }
  .policy-page h2 { font-size: 19px; }
}

/* ---------- Контактна сторінка ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.contact-card {
  display: flex; align-items: center; gap: 14px; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.contact-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.contact-card .cc-icon {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.contact-card .cc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-card .cc-label { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.contact-card .cc-value { font-size: 14.5px; font-weight: 600; color: var(--ink); font-family: var(--font-mono); overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .product-detail { grid-template-columns: 1fr; gap: 36px; }
  .product-gallery { position: static; min-width: 0; overflow: hidden; }
  .main-nav { display: none; }
  .burger-btn { display: flex; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-subscribe { grid-column: 1 / -1; }

  /* Як тільки зникає горизонтальне меню й з'являється ☰ (на цій самій
     позначці 980px) — одразу стискаємо й іконки кошика/кабінету/мови.
     Якщо лишити їх «десктопного» розміру аж до 600px, у проміжку
     600–980px їм банально не вистачає місця й рядок шапки вилазить
     за край екрана. */
  .account-btn { padding: 0; width: clamp(36px, 9vw, 40px); gap: 0; justify-content: center; }
  #accountLabel { display: none; }
  .header-lang-switch { display: none; }
  .cart-btn span:not(.cart-badge) { display: none; }
  .search-overlay { top: 66px; }

  /* На мобільних (коли nav сховане) — замість маленької кнопки-лупи
     показуємо широку рядок пошуку, як у конкурентів.
     Шапка перебудовується: лого + [рядок пошуку, що розтягується] + іконки */
  .search-header-btn { display: none; }
  .mobile-search-bar {
    display: flex;
    align-items: center;
    gap: clamp(5px, 2vw, 9px);
    flex: 1 1 0;
    min-width: 0;
    height: clamp(32px, 8vw, 40px);
    padding: 0 clamp(8px, 2.5vw, 14px);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: text;
    color: var(--ink-soft);
    transition: border-color .15s;
    overflow: hidden;
  }
  .mobile-search-bar:hover,
  .mobile-search-bar:focus { border-color: var(--ink); outline: none; }
  .mobile-search-icon {
    width: clamp(13px, 3.5vw, 17px);
    height: clamp(13px, 3.5vw, 17px);
    stroke: var(--ink-soft);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
  }
  .mobile-search-placeholder {
    font-size: clamp(12px, 3.2vw, 14px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Перебудовуємо grid шапки: лого + рядок пошуку + іконки */
  .header-inner {
    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
    gap: clamp(6px, 2vw, 12px);
  }
  .logo { grid-column: 1; white-space: nowrap; }
  .mobile-search-bar { grid-column: 2; }
  .main-nav { display: none; }
  .header-actions { grid-column: 3; }
}
@media (max-width: 600px) {
  .header-left { gap: 8px; }
  .back-arrow-btn { width: 32px; height: 32px; }
  .back-arrow-btn svg { width: 15px; height: 15px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 36px 0 28px; }
  .header-inner { padding-top: 10px; padding-bottom: 10px; gap: clamp(4px, 1.5vw, 8px); }
  .header-actions { gap: 4px; }
  .logo { font-size: 15px; gap: 5px; }

  .hero-stats { flex-wrap: wrap; padding-top: 20px; margin-top: 28px; }

  /* Блок довіри ("Доставка в день замовлення" тощо) — на мобільних
     робимо компактний горизонтальний ряд (іконка зверху, короткий
     заголовок під нею, довгий опис ховаємо), як у конкурентів — це
     займає набагато менше місця по висоті, ніж список в один стовпчик. */
  .trust-bar { padding: 12px 0; }
  .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .trust-item {
    flex-direction: column; align-items: center; text-align: center;
    gap: 5px; padding-bottom: 0; border-bottom: none; font-size: 9.5px; line-height: 1.2;
  }
  .trust-item .ti-icon { width: 30px; height: 30px; font-size: 14px; }
  .trust-item strong { font-size: 9.5px; line-height: 1.2; font-weight: 600; }
  .trust-item .ti-desc { display: none; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .drawer { width: 100%; }
  .drawer-body, .drawer-head, .drawer-foot { padding-left: 18px; padding-right: 18px; }
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
  /* Підписку ховаємо всередині підвалу і показуємо окремим блоком вище,
     між секцією "Чому обирають" і підвалом — див. .section-subscribe-mobile */
  .footer-subscribe { display: none; }
  .section-subscribe-mobile {
    display: block;
    padding: 32px 0;
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .modal { padding: 24px 20px; border-radius: 10px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }

  /* Каталог — компактні картки, по 2 в ряд (розміри тексту й відступів
     всередині картки вже плавно масштабуються через clamp() у базових
     правилах вище — тут лишаємо тільки те, що змінює саму розкладку) */
  .card-body h3 a { display: block; }
  .card-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card-footer { margin-top: 2px; }
  .price-row { flex-wrap: wrap; gap: 6px; }
  .card-actions { flex-direction: column; gap: 6px; margin-top: 10px; }
  .card-actions .btn { width: 100%; }

  /* Сторінка товару — фото не на весь екран */
  .product-media { aspect-ratio: auto; height: 320px; }

  .qty-row { gap: 10px; }
  .qty-row .btn { flex: 1; min-width: 130px; }
}
@media (max-width: 380px) {
  .trust-item .ti-icon { width: 26px; height: 26px; font-size: 12px; }
  .trust-item strong { font-size: 8.5px; }
}

/* ---------- Дуже вузькі телефони: рядок іконок шапки не влазить
   у ширину екрана на floor-значеннях з базових clamp() — тут додатково
   стискаємо логотип, відступи й самі кнопки, щоб нічого не вилазило
   за край і сторінка не отримувала горизонтальний скрол. ---------- */
@media (max-width: 400px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .header-inner { gap: 6px; }
  .logo { font-size: 14px; gap: 5px; }
  .logo .dot { width: 6px; height: 6px; }
  .header-actions { gap: 4px; }
  .account-btn, .fav-header-btn, .search-header-btn, .burger-btn {
    width: 32px; height: 32px; min-width: 32px;
  }
  .account-btn svg, .fav-header-btn svg, .search-header-btn svg { width: 14px; height: 14px; }
  .cart-btn { padding: 7px 9px; gap: 4px; font-size: 11px; }
  .cart-badge { min-width: 16px; height: 16px; font-size: 10px; }
}
@media (max-width: 330px) {
  .container { padding-left: 8px; padding-right: 8px; }
  .logo { font-size: 12.5px; gap: 4px; }
  .header-inner { gap: 4px; }
  .header-actions { gap: 3px; }
  .account-btn, .fav-header-btn, .search-header-btn, .burger-btn { width: 28px; height: 28px; min-width: 28px; }
  .account-btn svg, .fav-header-btn svg, .search-header-btn svg { width: 13px; height: 13px; }
  .cart-btn { padding: 6px 7px; }
}

/* ==========================================================================
   Нижня панель навігації (тільки телефон) — Головна / Каталог / Кошик /
   Обране / Кабінет. Яскравіша й "соковитіша" версія: активна вкладка
   отримує заливку градієнтом фіолетовий→золотий, бейджі кошика й
   обраного — золоті з тінню, легка "пружна" анімація натискання.
   ========================================================================== */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(30,18,48,0.10);
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 6px 2px 5px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 14px;
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item .bn-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  transition: background .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.bottom-nav-item .bn-icon-wrap svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
/* "Каталог" — сітка квадратів виглядає краще залитою, ніж обведеною */
.bottom-nav-item[data-bn-page="catalog"] .bn-icon-wrap svg { stroke: none; fill: currentColor; }

.bottom-nav-item .bn-badge {
  position: absolute;
  top: -3px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #2a1a00;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(240,180,41,0.55), 0 0 0 2px #fff;
}
.bottom-nav-item .bn-badge:empty,
.bottom-nav-item .bn-badge[data-cart-count="0"],
.bottom-nav-item .bn-badge[data-fav-count="0"] { display: none; }

.bottom-nav-item:active .bn-icon-wrap { transform: scale(0.86); }
.bottom-nav-item:active .bn-icon-wrap svg { transform: scale(0.9); }

.bottom-nav-item.active {
  color: var(--ink);
}
.bottom-nav-item.active .bn-icon-wrap {
  background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(240,180,41,0.20));
}
.bottom-nav-item.active .bn-icon-wrap svg {
  stroke: var(--signal);
  fill: none;
}
.bottom-nav-item.active[data-bn-page="catalog"] .bn-icon-wrap svg {
  fill: var(--signal);
}
.bottom-nav-item.active .bn-label {
  background: linear-gradient(135deg, var(--signal), var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 760px) {
  .bottom-nav { display: flex; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  /* Кошик/обране/кабінет уже доступні знизу — прибираємо дублікати зі шапки на телефоні */
  .header-actions .cart-btn span:not(.cart-badge),
  .header-actions .account-btn,
  .header-actions .fav-header-btn { display: none; }
  .header-actions .cart-btn { display: none; }
}
@media (max-width: 380px) {
  .bottom-nav-item { font-size: 9.5px; }
  .bottom-nav-item .bn-icon-wrap { width: 27px; height: 27px; }
  .bottom-nav-item .bn-icon-wrap svg { width: 18px; height: 18px; }
}