/* Дублирующий импорт шрифта Inter (на случай, если <link> в head не загрузился) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   VOKUSAP — БАЗОВЫЕ СТИЛИ (поверх Tailwind CDN)
   ------------------------------------------------------------
   • Акцентный цвет: живой оранжево-красный #FF6B35
   • Шрифт: Inter (подключён в <head> каждой страницы)
   • Подход: mobile-first, адаптивность на брейкпоинтах
     sm (640) / md (768) / lg (1024) / xl (1280)
   ============================================================ */

:root {
  /* Палитра VOKUSAP: живой оранжево-красный градиент для ритейла */
  --brand: #FF6B35;
  --brand-dark: #C0392B;
  --brand-50: #FFF0EB;
  --brand-100: #FFD5C4;
  --brand-200: #FFA98A;
  --brand-300: #FF7A4D;
  --brand-400: #FF5A1F;
  --brand-500: #FF6B35;
  --brand-600: #E5512A;
  --brand-700: #C0392B;
  --brand-800: #9B2F22;
  --brand-900: #6E1F18;
  --ink: #0B1C30;                  /* on-surface */
  --ink-soft: #565E74;             /* secondary */
  --line: #D9E0F0;                 /* светлая рамка на фоне #F8F9FF */
  --canvas: #F8F9FF;               /* surface */
  --card: #FFFFFF;                 /* surface-container-lowest */
  --surface-low: #EFF4FF;          /* surface-container-low */
  --surface-cont: #E5EEFF;         /* surface-container */
  --surface-hi: #DCE9FF;           /* surface-container-high */
  --inverse-surface: #213145;      /* тёмные баннеры */
  --radius: 0.75rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif !important;
  background-color: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body, body * { font-family: inherit; }

img { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

main { flex: 1 0 auto; }

/* Убираем стандартный скроллбар (соответствует макетам Stitch) */
::-webkit-scrollbar { display: none; }

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.65rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  user-select: none;
}

.btn:active { transform: translateY(1px); }

.btn-brand {
  background-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 3px rgba(255, 107, 53, 0.35);
}
.btn-brand:hover { background-color: var(--brand-dark); }

.btn-ghost {
  background-color: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* Кнопка «Позвонить» в шапке: заметная оранжевая кнопка с номером */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border-radius: 0.65rem;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.6rem 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(255, 107, 53, 0.6);
  transition: filter 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-call:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 20px -6px rgba(255, 107, 53, 0.7);
}
.btn-call:active { transform: translateY(1px); }

/* Универсальная карточка: чётко отделена от светло-серого фона */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.16);
}

/* ============================================================
   КНОПКИ МЕССЕНДЖЕРОВ (Telegram / WhatsApp / Viber)
   ============================================================ */
.msg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 10px -3px rgba(15, 23, 42, 0.3);
  transition: transform 0.15s, filter 0.2s;
}
.msg-link:hover { transform: translateY(-2px); filter: brightness(1.1); }
.msg-link svg { width: 1.15rem; height: 1.15rem; }

.msg-link-lg {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
}
.msg-link-lg svg { width: 1.4rem; height: 1.4rem; }

.msg-tg { background: #229ED9; }
.msg-wa { background: #25D366; }
.msg-vi { background: #7360F2; }

/* ============================================================
   ХЛЕБНЫЕ КРОШКИ
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem; /* 13px */
  color: var(--ink-soft);
}
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: #94A3B8; }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

/* ============================================================
   НАВИГАЦИЯ: десктопное меню и мобильное меню
   Меню ПК показывается с 1024px, бургер скрывается.
   Классы написаны на чистом CSS — не зависят от генерации
   Tailwind-утилит для JS-контента.
   ============================================================ */
.nav-desktop { display: none; }
.nav-burger { display: flex; align-items: center; justify-content: center; }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: 0.25rem; }
  .nav-burger { display: none; }
}

/* Мобильное меню */
  .mobile-menu { display: none; }
  .mobile-menu.open { display: block; }

  /* Убираем блок скидки из мобильного меню — оставляем только в десктопной версии */
  .mobile-menu .discount-banner { display: none !important; }

  @media (min-width: 1024px) {
    .mobile-menu { display: none !important; }
  }

/* ============================================================
   ПЛИТКИ (категории и подкатегории)
   ============================================================ */
.category-tile {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.16);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.category-tile:hover {
  box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.26);
  border-color: var(--brand-200);
  transform: translateY(-2px);
}

/* Бейдж-чипы характеристик */
.chip {
  background: var(--canvas);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛИ ВАРИАНТОВ (динамическая цена)
   Тумблеры сделаны заметными: контрастная рамка, иконка
   галочки у активного варианта, тень и выделение.
   ============================================================ */
.variant-box {
  background: #F1F5F9;                 /* светло-серый фон блока */
  border: 2px solid #E2E8F0;
  border-radius: 0.75rem;
  padding: 0.5rem;
  transition: border-color 0.2s;
}
.variant-box:focus-within { border-color: var(--brand-200); }

.variant-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;                /* 11px */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
  padding: 0 0.25rem;
}

.variant-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.variant-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 2px solid #CBD5E1;
  background: #fff;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.55rem 0.6rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.variant-pill:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.variant-pill:active { transform: translateY(1px); }

/* Активный вариант: заливка, галочка via ::before */
.variant-pill.active {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(255, 107, 53, 0.55);
}
.variant-pill.active::before {
  content: 'check';
  font-family: 'Material Symbols Outlined';
  font-size: 15px;
  line-height: 1;
}

/* ============================================================
   БЛОК СКИДКИ (заметный, оранжевый)
   ============================================================ */
.discount-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 12px 28px -10px rgba(255, 107, 53, 0.55);
}
.discount-banner.compact {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px -8px rgba(255, 107, 53, 0.5);
}
.discount-banner-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1rem;
}
.discount-banner-text { flex: 1 1 auto; min-width: 0; }
.discount-banner-title {
  font-size: 1.375rem; /* 22px */
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Плашка скидки в подвале */
.discount-badge {
  background: var(--brand);
  color: #fff;
  font-size: 0.8125rem;
  border-radius: 0.65rem;
  padding: 0.5rem 0.85rem;
  gap: 0.35rem;
}

/* ============================================================
   МОДАЛЬНОЕ ОКНО ЗАКАЗА
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.modal-card {
  width: 100%;
  max-width: 34rem; /* 544px */
  margin: auto;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.35);
  padding: 1.5rem;
}
@media (max-width: 480px) {
  .modal-card { padding: 1.1rem; }
}

/* Поля формы */
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.field-input {
  width: 100%;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-input::placeholder { color: #94A3B8; }
.field-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}

/* Скрытый класс (Tailwind-дубликат для надёжности) */
.hidden { display: none !important; }

/* ============================================================
   СТРАНИЦЫ: кнопки перехода и прочее
   ============================================================ */
.section-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
@media (max-width: 767px) {
  .section-title { font-size: 1.25rem; }
  body[data-page="index"] .discount-banner { display: none !important; }
}