/* ==========================================================================
   VVK Dealer Platform - Warm Editorial Theme (DESIGN 1.md / ElevenLabs Style)
   Warm cream editorial with whispered headlines:
   - Eggshell paper canvas (#fdfcfc)
   - Warm taupe surfaces (#f5f3f1)
   - Stone hairline borders 1px (#ebe8e4)
   - Pure black ink typography & actions (#000000)
   - Whisper-weight headlines (Inter 300, tracking -0.02em)
   - Pill 9999px buttons and chips
   ========================================================================== */

body.theme-editorial {
  --color-eggshell: #fdfcfc;
  --color-warm-taupe: #f5f3f1;
  --color-stone: #ebe8e4;
  --color-ink: #000000;
  --color-graphite: #44403b;
  --color-smoke: #777169;
  --color-ash: #a59f97;
  --color-violet-spark: #0447ff;
  --color-ember-orange: #ff4704;

  /* Overwrite VVK design tokens */
  --vvk-black: #000000;
  --vvk-white: #fdfcfc;
  --vvk-surface: #f5f3f1;
  --vvk-surface-subtle: #fbf9f7;
  --vvk-border: #ebe8e4;
  --vvk-border-subtle: #ebe8e4;
  --vvk-text-dark: #000000;
  --vvk-text-body: #44403b;
  --vvk-text-muted: #777169;
  --vvk-text-light: #a59f97;

  --vvk-accent: #000000;
  --vvk-accent-hover: #222222;
  --vvk-btn-radius: 9999px;
  --vvk-card-radius: 20px;
  --vvk-modal-radius: 24px;

  background-color: var(--color-eggshell) !important;
  color: var(--color-graphite) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Smooth anchor offsets under sticky header */
body.theme-editorial section,
body.theme-editorial [id] {
  scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   Typography: Whisper-weight display headlines (Waldenburg / Inter 300)
   -------------------------------------------------------------------------- */
body.theme-editorial h1,
body.theme-editorial .vvk-h1,
body.theme-editorial .vvk-hero-title {
  font-size: 48px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-weight: 300 !important;
  color: var(--color-ink) !important;
}

body.theme-editorial h2,
body.theme-editorial .vvk-h2,
body.theme-editorial .vvk-section-header h2,
body.theme-editorial .vvk-section-title {
  font-size: 36px !important;
  line-height: 1.17 !important;
  letter-spacing: -0.02em !important;
  font-weight: 300 !important;
  color: var(--color-ink) !important;
}

body.theme-editorial h3,
body.theme-editorial .vvk-h3,
body.theme-editorial .vvk-card-title,
body.theme-editorial .vvk-modal-title,
body.theme-editorial #vvk-modal-title {
  font-size: 24px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  font-weight: 400 !important;
  color: var(--color-ink) !important;
}

body.theme-editorial .vvk-hero-desc {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--color-smoke) !important;
  font-weight: 400 !important;
}

body.theme-editorial .vvk-hero-badges-row {
  margin-top: 18px !important;
}

body.theme-editorial .vvk-hero-badge-item {
  background: var(--color-eggshell) !important;
  color: var(--color-graphite) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 6px 16px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

/* --------------------------------------------------------------------------
   Header: Transparent-blur over eggshell with hairline border
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-header {
  background: rgba(253, 252, 252, 0.90) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--color-stone) !important;
}

@media (max-width: 768px) {
  body.theme-editorial .vvk-header .vvk-header-inner {
    padding: 10px 16px !important;
    gap: 8px !important;
  }
}

body.theme-editorial .vvk-logo-text {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-ink) !important;
}

body.theme-editorial .vvk-nav a {
  color: var(--color-smoke) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: color 0.15s ease;
}

body.theme-editorial .vvk-nav a:hover {
  color: var(--color-ink) !important;
}

body.theme-editorial .vvk-header-phone {
  color: var(--color-ink) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

body.theme-editorial .vvk-header-email {
  color: var(--color-smoke) !important;
  font-size: 12px !important;
}

body.theme-editorial .vvk-cart-btn {
  background: var(--color-ink) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  border: 1px solid var(--color-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  transition: background 0.15s ease, transform 0.15s ease;
}

body.theme-editorial .vvk-cart-btn:hover {
  background: #222222 !important;
  transform: translateY(-1px);
}

body.theme-editorial .vvk-cart-badge {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Hero Section: Editorial container banner
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-hero-banner-wrap {
  border-radius: 20px !important;
  border: 1px solid var(--color-stone) !important;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Catalog: Category Tabs & Subcollections Chips
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-categories-nav {
  gap: 10px !important;
  margin-bottom: 20px !important;
}

body.theme-editorial .vvk-category-tab {
  background: var(--color-warm-taupe) !important;
  color: var(--color-graphite) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 9px 20px !important;
  transition: all 0.15s ease !important;
}

body.theme-editorial .vvk-category-tab:hover {
  background: #ece8e4 !important;
  color: var(--color-ink) !important;
}

body.theme-editorial .vvk-category-tab.active {
  background: var(--color-ink) !important;
  color: #ffffff !important;
  border-color: var(--color-ink) !important;
  font-weight: 500 !important;
}

body.theme-editorial .vvk-subcollections-wrap {
  gap: 8px !important;
  margin-bottom: 24px !important;
}

body.theme-editorial .vvk-filter-chip {
  background: var(--color-eggshell) !important;
  color: var(--color-graphite) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 6px 16px !important;
  transition: all 0.15s ease !important;
}

body.theme-editorial .vvk-filter-chip:hover {
  background: var(--color-warm-taupe) !important;
  border-color: var(--color-graphite) !important;
}

body.theme-editorial .vvk-filter-chip.active {
  background: var(--color-ink) !important;
  color: #ffffff !important;
  border-color: var(--color-ink) !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   8-Filter Panel
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-filters-mobile-toggle {
  background: var(--color-warm-taupe) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 9999px !important;
  color: var(--color-ink) !important;
}

body.theme-editorial .vvk-catalog-filters-wrap {
  background: var(--color-warm-taupe) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 20px !important;
  padding: 24px 28px !important;
}

body.theme-editorial .vvk-filter-select {
  background-color: var(--color-eggshell) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 8px !important;
  color: var(--color-ink) !important;
  font-size: 14px !important;
}

body.theme-editorial .vvk-filter-select:focus {
  border-color: var(--color-ink) !important;
  outline: none;
}

body.theme-editorial .vvk-filter-label {
  color: var(--color-smoke) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

body.theme-editorial .vvk-filters-reset-btn {
  background: var(--color-eggshell) !important;
  border: 1px solid var(--color-stone) !important;
  color: var(--color-smoke) !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
}

body.theme-editorial .vvk-filters-reset-btn:hover {
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}

/* --------------------------------------------------------------------------
   Product Cards: Warm Editorial Taupe / Eggshell with hairline borders
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-product-card {
  background: var(--color-eggshell) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

body.theme-editorial .vvk-product-card:hover {
  border-color: #cfcac3 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
}

body.theme-editorial .vvk-card-thumb-wrap {
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--color-warm-taupe) !important;
}

body.theme-editorial .vvk-card-title {
  color: var(--color-ink) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

body.theme-editorial .vvk-spec-pill {
  background: var(--color-warm-taupe) !important;
  color: var(--color-smoke) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
}

body.theme-editorial .vvk-card-price {
  color: var(--color-ink) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* Buttons in card */
body.theme-editorial .vvk-card-btn-add {
  background: var(--color-ink) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-ink) !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

body.theme-editorial .vvk-card-btn-add:hover {
  background: #222222 !important;
  transform: translateY(-1px);
}

body.theme-editorial .vvk-card-btn-details,
body.theme-editorial .vvk-card-btn-more {
  background: var(--color-eggshell) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

body.theme-editorial .vvk-card-btn-details:hover,
body.theme-editorial .vvk-card-btn-more:hover {
  background: var(--color-warm-taupe) !important;
  border-color: var(--color-graphite) !important;
}

/* --------------------------------------------------------------------------
   About Section & Benefit Cards
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-about-text-lead {
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--color-graphite) !important;
  font-weight: 400 !important;
}

body.theme-editorial .vvk-benefit-card,
body.theme-editorial .vvk-about-benefit-card {
  background: var(--color-warm-taupe) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: none !important;
}

body.theme-editorial .vvk-benefit-title,
body.theme-editorial .vvk-about-benefit-title {
  color: var(--color-ink) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

body.theme-editorial .vvk-benefit-desc,
body.theme-editorial .vvk-about-benefit-desc {
  color: var(--color-smoke) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* --------------------------------------------------------------------------
   Contacts Section & Form
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-contact-card,
body.theme-editorial .vvk-contacts-card {
  background: var(--color-warm-taupe) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 20px !important;
  padding: 32px !important;
}

body.theme-editorial .vvk-contact-item-label,
body.theme-editorial .vvk-contact-label {
  color: var(--color-smoke) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

body.theme-editorial .vvk-contact-item-value,
body.theme-editorial .vvk-contact-val {
  color: var(--color-ink) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body.theme-editorial .vvk-contact-form-wrap,
body.theme-editorial .vvk-form-card {
  background: var(--color-warm-taupe) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 20px !important;
  padding: 36px 40px !important;
}

body.theme-editorial .vvk-form-input,
body.theme-editorial .vvk-form-textarea,
body.theme-editorial .vvk-input,
body.theme-editorial .vvk-textarea {
  background: var(--color-eggshell) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 8px !important;
  color: var(--color-ink) !important;
}

body.theme-editorial .vvk-form-input:focus,
body.theme-editorial .vvk-form-textarea:focus,
body.theme-editorial .vvk-input:focus,
body.theme-editorial .vvk-textarea:focus {
  border-color: var(--color-ink) !important;
  outline: none;
}

body.theme-editorial .vvk-contact-submit-btn,
body.theme-editorial .vvk-btn-submit {
  background: var(--color-ink) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-ink) !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

body.theme-editorial .vvk-contact-submit-btn:hover:not(:disabled),
body.theme-editorial .vvk-btn-submit:hover:not(:disabled) {
  background: #222222 !important;
}

/* --------------------------------------------------------------------------
   Footer: Hairline border on warm taupe
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-footer {
  background: var(--color-warm-taupe) !important;
  border-top: 1px solid var(--color-stone) !important;
}

body.theme-editorial .vvk-footer a {
  color: var(--color-smoke) !important;
  font-size: 13px !important;
  transition: color 0.15s ease;
}

body.theme-editorial .vvk-footer a:hover {
  color: var(--color-ink) !important;
}

body.theme-editorial .vvk-footer-top-btn {
  background: var(--color-eggshell) !important;
  border: 1px solid var(--color-stone) !important;
  color: var(--color-graphite) !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
}

body.theme-editorial .vvk-footer-top-btn:hover {
  border-color: var(--color-ink) !important;
  color: var(--color-ink) !important;
}

/* --------------------------------------------------------------------------
   Modal Window & Order Cart Drawer
   -------------------------------------------------------------------------- */
body.theme-editorial .vvk-modal-container {
  background: var(--color-eggshell) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.08) !important;
}

body.theme-editorial .vvk-modal-close {
  background: var(--color-warm-taupe) !important;
  border: 1px solid var(--color-stone) !important;
  color: var(--color-ink) !important;
  border-radius: 50% !important;
}

body.theme-editorial .vvk-modal-img-wrap,
body.theme-editorial .vvk-modal-img {
  border-radius: 16px !important;
}

body.theme-editorial #vvk-modal-price {
  color: var(--color-ink) !important;
  font-weight: 600 !important;
}

body.theme-editorial #vvk-modal-add-btn {
  background: var(--color-ink) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  border: 1px solid var(--color-ink) !important;
}

body.theme-editorial #vvk-modal-add-btn:hover {
  background: #222222 !important;
}

body.theme-editorial .vvk-specs-table {
  border: 1px solid var(--color-stone) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

body.theme-editorial .vvk-specs-table tr {
  border-bottom: 1px solid var(--color-stone) !important;
}

body.theme-editorial .vvk-specs-table td.vvk-spec-label,
body.theme-editorial .vvk-specs-table td:first-child {
  background: var(--color-warm-taupe) !important;
  color: var(--color-smoke) !important;
}

body.theme-editorial .vvk-specs-table td.vvk-spec-value,
body.theme-editorial .vvk-specs-table td:last-child {
  color: var(--color-ink) !important;
}

body.theme-editorial .vvk-drawer {
  background: var(--color-eggshell) !important;
  border-left: 1px solid var(--color-stone) !important;
}

body.theme-editorial .vvk-drawer-header {
  border-bottom: 1px solid var(--color-stone) !important;
}

body.theme-editorial .vvk-cart-item {
  background: var(--color-warm-taupe) !important;
  border: 1px solid var(--color-stone) !important;
  border-radius: 16px !important;
}

body.theme-editorial .vvk-drawer-form-wrap {
  border-top: 1px solid var(--color-stone) !important;
}

body.theme-editorial #vvk-submit-order-btn {
  background: var(--color-ink) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-ink) !important;
  border-radius: 9999px !important;
}

body.theme-editorial #vvk-submit-order-btn:hover:not(:disabled) {
  background: #222222 !important;
}