/* Generated by npm run build. Edit src/styles/foundation/tokens.css, src/styles/foundation/theme.css, src/styles/components/header.css, src/styles/components/catalog.css, src/styles/components/footer.css. */
/* Hallmark · component: shared theme roles · modes: graphite+daylight.
   Critique: off-white paper, charcoal type, saturated actions and neutral depth. */
:root {
  --font-operations: Inter, system-ui, sans-serif;
}
:root {
  /* Shared communication surfaces: AI messenger, expert dossier and staff CRM. */
  --cm-comms-glass: rgba(17, 21, 30, 0.9);
  --cm-warning: #f5c66b;
  --cm-info: #8bb9ff;
  --cm-overlay: rgba(5, 8, 15, 0.64);
  --text-on-accent: #ffffff;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;
  --bg-deep: #0b0d12;
  --bg-surface: #141821;
  --bg-card: rgba(27, 32, 44, 0.88);
  --bg-glass: rgba(30, 35, 48, 0.72);
  --bg-glass-card: rgba(27, 32, 44, 0.88);
  --bg-glass-light: rgba(42, 48, 64, 0.8);
  --surface-sunken: #10141c;
  --surface-soft: #1b202c;
  --border-glass: rgba(207, 218, 245, 0.16);
  --border-strong: rgba(220, 230, 255, 0.26);
  --border-hover: rgba(174, 143, 255, 0.72);
  --text-primary: #f5f7ff;
  --text-secondary: #bdc7dc;
  --text-muted: #9caac2;
  --ink: #16141c;
  --ink-soft: #2a2733;
  --accent: #7040db;
  --accent-hover: #5d2cbe;
  --accent-bright: #c6a6ff;
  --accent-cyan: #67dfef;
  --focus-ring: var(--accent-cyan);
  --focus-on-media: #eefaff;
  --accent-tint: rgba(160, 117, 255, 0.13);
  --star: #f5c66b;
  --success: #54d6a3;
  --danger: #ff8da0;
  --glow: rgba(142, 91, 255, 0.24);
  --glow-strong: rgba(142, 91, 255, 0.4);
  --glow-cyan: rgba(67, 213, 234, 0.18);
  --glass-highlight: rgba(235, 242, 255, 0.14);
  --field-border: var(--border-glass);
  --text-on-success: var(--ink);
  --shadow-ink: rgba(0, 0, 0, 0.32);
  --neutral-tint: rgba(218, 230, 251, 0.06);
  --shadow-card: inset 0 1px 0 var(--glass-highlight), 0 12px 30px -12px rgba(0, 0, 0, 0.65);
  --shadow-hover:
    inset 0 1px 0 var(--glass-highlight), 0 24px 50px -18px rgba(0, 0, 0, 0.8),
    0 0 28px -12px var(--glow-strong);
  --shadow-elevated: inset 0 1px 0 var(--glass-highlight), 0 30px 70px -20px rgba(0, 0, 0, 0.8);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-smooth: transform 0.3s var(--ease);
  --transition: var(--transition-smooth);
  --burger-panel-bg: rgba(20, 24, 33, 0.94);
  --drawer-bg: rgba(20, 24, 33, 0.96);
  color-scheme: dark;
}
html[data-theme='light'] .cma-root {
  --cma-panel-bg: var(--cm-comms-glass);
  --cma-bot-bubble: var(--bg-surface);
  --cma-input-bg: var(--bg-surface);
  --cma-chip-bg: var(--bg-surface);
}
:root,
html[data-theme='dark'],
html[data-theme='dark'] body {
  --pc-preview-bg: #191d27;
  --pc-preview-media: #11151e;
  --pc-preview-text: #f5f7ff;
  --pc-preview-muted: #bdc7dc;
  --pc-preview-border: rgba(171, 133, 255, 0.28);
  --pc-preview-light: rgba(132, 82, 234, 0.12);
  --pc-preview-cyan: rgba(67, 213, 234, 0.06);
}
html[data-theme='light'],
html[data-theme='light'] body {
  --pc-preview-bg: var(--bg-glass);
  --pc-preview-media: var(--surface-sunken);
  --pc-preview-text: var(--text-primary);
  --pc-preview-muted: var(--text-secondary);
  --pc-preview-border: var(--border-glass);
  --pc-preview-light: var(--neutral-tint);
  --pc-preview-cyan: var(--neutral-tint);
}
:root {
  --scrollbar-size: 6px;
  --scrollbar-track: rgba(133, 119, 164, 0.06);
  --scrollbar-thumb: #655e77;
  --scrollbar-thumb-hover: #8c80aa;
  --scrollbar-thumb-active: #b3a1ce;
}
html[data-theme='light'],
html[data-theme='light'] body,
body[data-theme='light'] {
  --scrollbar-track: rgba(45, 63, 86, 0.035);
  --scrollbar-thumb: #a6afbc;
  --scrollbar-thumb-hover: #8592a4;
  --scrollbar-thumb-active: #65758d;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --motion-fast: 180ms;
  --motion-ui: 300ms;
  --catalog-divider: rgba(255, 255, 255, 0.05);
  --footer-divider: rgba(255, 255, 255, 0.05);
}
html[data-theme='light'] {
  --catalog-divider: var(--border-glass);
  --footer-divider: var(--border-glass);
}
html[data-theme='light'],
html[data-theme='light'] body,
body[data-theme='light'] {
  --cm-comms-glass: rgba(250, 252, 255, 0.92);
  --cm-warning: #885a0b;
  --cm-info: #315caf;
  --cm-overlay: rgba(36, 50, 70, 0.22);
  --bg-deep: #f6f7f9;
  --bg-surface: #fcfdff;
  --bg-card: rgba(255, 255, 255, 0.72);
  --bg-glass: rgba(255, 255, 255, 0.65);
  --bg-glass-card: var(--bg-card);
  --bg-glass-light: rgba(255, 255, 255, 0.86);
  --surface-sunken: #edf1f6;
  --surface-soft: #f8fafd;

  --border-glass: rgba(30, 48, 71, 0.09);
  --border-strong: rgba(30, 48, 71, 0.18);
  --border-hover: rgba(30, 48, 71, 0.3);
  --field-border: #78889c;
  --pagination-active-border: rgba(0, 0, 0, 0.2);

  --ink: #18181b;
  --ink-soft: #303b4c;
  --text-primary: var(--ink);
  --text-secondary: #4c586a;
  --text-muted: #626f82;

  --accent: #6035d6;
  --accent-bright: var(--accent);
  --accent-hover: #4c28b5;
  --accent-cyan: #08788e;
  --accent-tint: rgba(96, 53, 214, 0.065);
  --star: #8d5e0d;
  --success: #147b55;
  --danger: #b83b4c;
  --text-on-success: var(--text-on-accent);
  --glass-highlight: rgba(255, 255, 255, 0.92);
  --shadow-ink: rgba(35, 55, 76, 0.15);
  --neutral-tint: rgba(44, 63, 89, 0.035);

  --glow: rgba(44, 63, 89, 0.025);
  --glow-strong: rgba(35, 55, 76, 0.12);
  --glow-cyan: rgba(44, 63, 89, 0.035);

  --daylight-glass-edge: rgba(255, 255, 255, 0.8);
  --daylight-glass-blur: 24px;
  --daylight-secondary-edge: rgba(24, 24, 27, 0.12);
  --daylight-secondary-hover: rgba(24, 24, 27, 0.04);
  --daylight-sheen: rgba(255, 255, 255, 0.55);
  --daylight-lift: -2px;
  --daylight-card-lift: -4px;
  --daylight-transition:
    transform 300ms ease-out, background-color 300ms ease-out, border-color 300ms ease-out,
    color 300ms ease-out, box-shadow 300ms ease-out;
  --shadow-card:
    inset 0 1px 0 var(--daylight-glass-edge), 0 1px 2px rgba(0, 0, 0, 0.025), 0 4px 6px rgba(0, 0, 0, 0.02),
    0 24px 48px rgba(0, 0, 0, 0.06);
  --shadow-hover:
    inset 0 1px 0 var(--daylight-glass-edge), 0 2px 4px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.035),
    0 28px 56px rgba(0, 0, 0, 0.09);
  --shadow-elevated:
    inset 0 1px 0 var(--daylight-glass-edge), 0 2px 4px rgba(0, 0, 0, 0.03), 0 10px 20px rgba(0, 0, 0, 0.04),
    0 32px 72px rgba(0, 0, 0, 0.12);
  --shadow-field: inset 0 1px 2px rgba(0, 0, 0, 0.025), 0 1px 2px rgba(0, 0, 0, 0.015);
  --shadow-toast: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-dossier: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-header:
    inset 0 1px 0 var(--daylight-glass-edge), 0 2px 4px rgba(0, 0, 0, 0.02), 0 12px 32px rgba(0, 0, 0, 0.045);
  --shadow-primary:
    inset 0 1px 0 var(--daylight-sheen), 0 2px 4px color-mix(in srgb, var(--accent) 8%, transparent),
    0 8px 16px color-mix(in srgb, var(--accent) 20%, transparent);
  --shadow-primary-hover:
    inset 0 1px 0 var(--daylight-sheen), 0 4px 8px color-mix(in srgb, var(--accent) 12%, transparent),
    0 12px 24px color-mix(in srgb, var(--accent) 24%, transparent);

  --burger-panel-bg: rgba(250, 252, 255, 0.94);
  --drawer-bg: var(--cm-comms-glass);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme='light'],
  html[data-theme='light'] body,
  body[data-theme='light'] {
    --daylight-lift: 0px;
    --daylight-card-lift: 0px;
  }
}

/* Hallmark · project: Comp Master · scope: existing UI polish · 2026-11-13
   Critique: hierarchy and legibility before decorative surfaces; locked brand retained. */

/* ===================================================
   COMP MASTER — Design Layer (theme.css)
   Підключається ОСТАННІМ на всіх сторінках.

   1. Єдине джерело токенів Dark Graphite / Light Porcelain; Montserrat / Roboto.
   2. Світла тема «Daylight Porcelain»: прохолодний світло-сірий фон,
      графітовий текст, матове світле скло та нейтральні об'ємні тіні,
      насичені фіолетові й ціанові акценти для дій та технічних ліній.

   Токени також задаються на body для сумісності зі старими сторінковими CSS.
   Компоненти успадковують одну палітру без паралельних тем.
   =================================================== */

/* ===================================================
   1. TYPOGRAPHY (обидві теми)
   =================================================== */

body,
button,
input,
select,
textarea,
.btn-sound-toggle,
.cma-root {
  font-family: var(--font-body);
}

.main-content h1,
.welcome-inner h2,
.menu h2,
.showcase-content h2,
.collect-title-block h1,
.cart-title-block h1,
.product-detail-info h1,
.request-header h1,
.extra-section-header h2,
.legal-modal-body h2,
.modal-glass-card h2,
.request-success-box h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.main-content h1 {
  font-size: clamp(32px, 4.1vw, 54px);
}

.welcome-inner h2,
.menu h2 {
  font-size: clamp(28px, 3.3vw, 44px);
}

.collect-title-block h1,
.cart-title-block h1,
.request-header h1 {
  font-size: clamp(28px, 3.6vw, 44px);
}

.product-detail-info h1 {
  font-size: clamp(26px, 3vw, 40px);
}

.showcase-content h2 {
  font-size: clamp(24px, 3vw, 38px);
}

/* Компактні заголовки секцій товару */

.extra-section-header h2 {
  font-size: clamp(20px, 2.4vw, 30px);
}

/* Кнопка «Зібрати свій сетап» у шоукейсі: клас .main-btn не мав базових стилів */

.showcase-actions .main-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: 1px solid transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px var(--glow-strong);
  transition: transform 0.35s var(--ease);
}

.showcase-actions .main-btn:hover {
  transform: translateY(-2px);
}

/* Підзаголовки карток — Montserrat */

.why-us-card h3,
.step-header h3,
.cart-item-info h3,
.cart-summary-card h3,
.footer-col h4,
.spec-modal-details h3,
.collect-summary-card h2,
.fps-game-title h4,
.box-item-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Цифри — табличні, щоб ціни не «стрибали» */

.collect-total-price,
.total-amount,
.product-detail-price,
.cart-item-subtotal,
.metric-num,
.fps-num,
.cm-drawer-handle__price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ===================================================
   2. LIGHT THEME — «PORCELAIN»
   =================================================== */

html[data-theme='light'],
html[data-theme='light'] body {
  background-color: var(--bg-deep);
  background-image: none;
  background-attachment: fixed;
  color: var(--text-primary);
}

html[data-theme='light'] ::selection {
  background: rgba(91, 52, 230, 0.18);
  color: var(--ink);
}

/* Загальні тексти, що старі правила фарбували в slate */

html[data-theme='light'] h1,
html[data-theme='light'] h2,
html[data-theme='light'] h3,
html[data-theme='light'] h4 {
  color: var(--text-primary);
}

html[data-theme='light'] .section-kicker,
html[data-theme='light'] .menu-kicker,
html[data-theme='light'] .cart-kicker,
html[data-theme='light'] .product-series-kicker {
  color: var(--accent);
  letter-spacing: normal;
  font-weight: 700;
}

html[data-theme='light'] .section-subtitle,
html[data-theme='light'] .cart-subtitle {
  color: var(--text-secondary);
}

/* ---------------------------------------------------
   Кнопки: насичена основна, прозора графітова вторинна
   --------------------------------------------------- */

html[data-theme='light'] .main-content__buttons a:first-of-type,
html[data-theme='light'] .welcome-inner a.main-btn,
html[data-theme='light'] .welcome-inner a:not(.outline-btn),
html[data-theme='light'] .showcase-actions .main-btn,
html[data-theme='light'] .btn-collect-order,
html[data-theme='light'] .checkout-btn,
html[data-theme='light'] .btn-confirm-order,
html[data-theme='light'] .btn-goto-catalog,
html[data-theme='light'] .btn-order-large,
html[data-theme='light'] .modal-btn,
html[data-theme='light'] .btn-submit-request,
html[data-theme='light'] .request-success-box .main-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-primary);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: var(--daylight-transition);
}

html[data-theme='light'] .main-content__buttons a:first-of-type:hover,
html[data-theme='light'] .welcome-inner a.main-btn:hover,
html[data-theme='light'] .welcome-inner a:not(.outline-btn):hover,
html[data-theme='light'] .showcase-actions .main-btn:hover,
html[data-theme='light'] .btn-collect-order:hover,
html[data-theme='light'] .checkout-btn:hover:not(:disabled),
html[data-theme='light'] .btn-confirm-order:hover,
html[data-theme='light'] .btn-goto-catalog:hover,
html[data-theme='light'] .btn-order-large:hover,
html[data-theme='light'] .modal-btn:hover,
html[data-theme='light'] .btn-submit-request:hover,
html[data-theme='light'] .request-success-box .main-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-primary-hover);
  transform: translate3d(0, var(--daylight-lift), 0);
}

html[data-theme='light'] .btn-order-large.added {
  background: var(--success) !important;
  border-color: var(--success) !important;
  box-shadow: none !important;
}

html[data-theme='light'] .main-content__buttons a:last-of-type,
html[data-theme='light'] .btn-collect-consult,
html[data-theme='light'] .btn-back-outline,
html[data-theme='light'] .nav-back-link {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--daylight-secondary-edge);
  box-shadow: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: var(--daylight-transition);
}

html[data-theme='light'] .main-content__buttons a:last-of-type:hover,
html[data-theme='light'] .btn-collect-consult:hover,
html[data-theme='light'] .btn-back-outline:hover,
html[data-theme='light'] .nav-back-link:hover {
  background: var(--daylight-secondary-hover);
  color: var(--ink);
  border-color: var(--daylight-secondary-edge);
  box-shadow: none;
}

/* ---------------------------------------------------
   HEADER
   --------------------------------------------------- */

html[data-theme='light'] body > header,
html[data-theme='light'] .cart-header {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--daylight-glass-blur));
  -webkit-backdrop-filter: blur(var(--daylight-glass-blur));
  border-bottom: 1px solid var(--daylight-glass-edge);
  box-shadow: var(--shadow-header);
}

html[data-theme='light'] nav a,
html[data-theme='light'] .cart-header-nav a {
  color: var(--text-secondary);
  font-weight: 600;
}

html[data-theme='light'] nav a:hover,
html[data-theme='light'] .cart-header-nav a:hover {
  color: var(--ink);
  background: rgba(22, 20, 28, 0.05);
}

html[data-theme='light'] nav a.cheked {
  color: var(--ink);
  background: var(--daylight-secondary-hover);
  box-shadow: none;
}

html[data-theme='light'] .theme-toggle,
html[data-theme='light'] .cm-burger,
html[data-theme='light'] .cart-header .cart-link {
  background: transparent;
  border: 1px solid var(--daylight-secondary-edge);
  color: var(--ink);
  box-shadow: none;
  transition: var(--daylight-transition);
}

html[data-theme='light'] .theme-toggle:hover,
html[data-theme='light'] .cm-burger:hover {
  background: var(--daylight-secondary-hover);
  border-color: var(--daylight-secondary-edge);
  box-shadow: none;
}

html[data-theme='light'] .cart-link:hover {
  background: rgba(22, 20, 28, 0.05);
}

html[data-theme='light'] .cart-link:hover .cart-icon {
  filter: brightness(0);
  transform: scale(1.06);
}

html[data-theme='light'] :is(.header_content_logo, .header-logo, .cart-icon) {
  filter: brightness(0);
}

html[data-theme='light'] .theme-toggle .fa-sun {
  display: inline-block;
}

html[data-theme='light'] .theme-toggle .fa-moon {
  display: none;
}

html[data-theme='light'] .cart-badge {
  background: var(--accent);
  border: 2px solid var(--bg-deep);
  box-shadow: none;
}

/* Мобільне меню */

html[data-theme='light'] .cm-mobile-nav__backdrop {
  background: rgba(22, 20, 28, 0.28);
}

html[data-theme='light'] .cm-mobile-nav__panel {
  background: var(--bg-glass);
  border-color: var(--daylight-glass-edge);
  backdrop-filter: blur(var(--daylight-glass-blur));
  -webkit-backdrop-filter: blur(var(--daylight-glass-blur));
  box-shadow: var(--shadow-elevated);
}

html[data-theme='light'] .cm-mobile-nav__list a {
  background: transparent;
  color: var(--ink);
}

html[data-theme='light'] .cm-mobile-nav__list a i {
  color: var(--accent);
}

html[data-theme='light'] .cm-mobile-nav__list a:hover,
html[data-theme='light'] .cm-mobile-nav__list a.cheked {
  background: var(--daylight-secondary-hover);
  border-color: rgba(91, 52, 230, 0.3);
}

/* ---------------------------------------------------
   HERO
   --------------------------------------------------- */

html[data-theme='light'] .main-content_about {
  background: var(--bg-surface);
  color: var(--accent);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .main-content p {
  color: var(--text-secondary);
}

html[data-theme='light'] .main-content > div:last-child img {
  filter: drop-shadow(0 40px 50px rgba(22, 20, 28, 0.22));
}

/* ---------------------------------------------------
   WHY US
   --------------------------------------------------- */

html[data-theme='light'] .why-us-card {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--daylight-glass-blur));
  -webkit-backdrop-filter: blur(var(--daylight-glass-blur));
  border: 1px solid var(--daylight-glass-edge);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .why-us-card:hover {
  background: var(--bg-glass);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
  transform: translate3d(0, var(--daylight-card-lift), 0);
}

html[data-theme='light'] .why-us-badge {
  background: var(--accent-tint);
  color: var(--accent);
}

html[data-theme='light'] .why-us-icon-dark {
  color: var(--text-muted);
  opacity: 1;
}

/* ---------------------------------------------------
   WELCOME
   --------------------------------------------------- */

html[data-theme='light'] .welcome-inner h2 span {
  color: var(--accent);
}

html[data-theme='light'] .welcome-inner p {
  color: var(--text-secondary);
}

/* drop-shadow, а не box-shadow: PNG кругле з прозорими кутами */

html[data-theme='light'] .image-container img {
  box-shadow: none;
  filter: drop-shadow(0 30px 40px rgba(22, 20, 28, 0.22));
}

/* ---------------------------------------------------
   CINEMATIC SHOWCASE — лишається темним «кінозалом»
   --------------------------------------------------- */

html[data-theme='light'] .showcase-card {
  border: 1px solid rgba(22, 20, 28, 0.2);
  box-shadow: var(--shadow-card);
  background: #0e0c14;
}

/* !important: перебиває старе gotovo.css «[data-theme=light] h2 { color … !important }» */

html[data-theme='light'] .showcase-content h2 {
  color: var(--text-on-accent) !important;
}

html[data-theme='light'] .showcase-content p {
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme='light'] .showcase-kicker {
  color: #7fe3f5;
  background: rgba(6, 182, 212, 0.14);
  border-color: rgba(127, 227, 245, 0.35);
}

html[data-theme='light'] .showcase-metrics .metric-item {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

html[data-theme='light'] .metric-num {
  color: var(--text-on-accent);
}

html[data-theme='light'] .metric-label {
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme='light'] .showcase-actions .main-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-primary);
}

html[data-theme='light'] .showcase-actions .main-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-primary-hover);
}

html[data-theme='light'] .showcase-actions .outline-btn,
html[data-theme='light'] .btn-sound-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--text-on-accent);
}

html[data-theme='light'] .btn-sound-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: var(--text-on-accent);
}

html[data-theme='light'] .btn-sound-toggle.is-active {
  background: rgba(91, 52, 230, 0.35);
  border-color: #7fe3f5;
  color: var(--text-on-accent);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------
   КАТАЛОГ
   --------------------------------------------------- */

html[data-theme='light'] .menu-buttons a,
html[data-theme='light'] .menu-buttons button,
html[data-theme='light'] .menu-pag a,
html[data-theme='light'] .menu-pag button {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .menu-buttons a:hover,
html[data-theme='light'] .menu-buttons button:hover,
html[data-theme='light'] .menu-pag a:hover:not(.disabled),
html[data-theme='light'] .menu-pag button:hover:not(.disabled) {
  background: var(--bg-surface);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-hover);
}

html[data-theme='light'] .menu-buttons .checked,
html[data-theme='light'] .menu-buttons button.checked {
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme='light'] .menu-pag :is(.is-active, .checked, [aria-current='page']),
html[data-theme='light'] .menu-pag :is(.is-active, .checked, [aria-current='page']):hover {
  background: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--pagination-active-border) !important;
  box-shadow: var(--shadow-field) !important;
  font-weight: 600;
}

/* Подіум для фото ПК */

html[data-theme='light'] .product-detail-stars {
  color: var(--star);
}

html[data-theme='light'] .catalog-empty {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}

/* ---------------------------------------------------
   СПЕЦІАЛІСТИ
   --------------------------------------------------- */

html[data-theme='light'] .spec-modal-photo-wrap {
  background: linear-gradient(180deg, var(--surface-soft), var(--surface-sunken));
  box-shadow: none;
}

html[data-theme='light'] .status-dot {
  background: var(--success);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .spec-modal-role {
  color: var(--accent) !important;
}

/* Модалка спеціаліста */

html[data-theme='light'] .spec-modal-overlay,
html[data-theme='light'] .legal-modal-overlay,
html[data-theme='light'] .modal-backdrop {
  background: rgba(22, 20, 28, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme='light'] .legal-modal,
html[data-theme='light'] .modal-glass-card {
  background: var(--bg-glass);
  border: 1px solid var(--daylight-glass-edge);
  box-shadow: var(--shadow-elevated);
}

html[data-theme='light'] .legal-modal-close {
  background: var(--surface-soft);
  border: 1px solid var(--border-glass);
  color: var(--ink);
}

html[data-theme='light'] .legal-modal-close:hover {
  background: var(--daylight-secondary-hover);
  border-color: var(--daylight-secondary-edge);
  color: var(--text-primary);
}

html[data-theme='light'] .spec-modal-bio,
html[data-theme='light'] .legal-modal-content {
  color: var(--text-secondary);
}

html[data-theme='light'] .spec-skills-label {
  color: var(--text-muted);
}

html[data-theme='light'] .spec-skill-tag {
  background: var(--accent-tint);
  border: 1px solid rgba(91, 52, 230, 0.18);
  color: var(--accent);
}

html[data-theme='light'] .spec-modal-chat {
  background: var(--surface-soft);
  border: 1px solid var(--border-glass);
  box-shadow: none;
}

html[data-theme='light'] .spec-chat-header {
  border-bottom-color: var(--border-glass);
}

html[data-theme='light'] .spec-chat-icon {
  background: var(--accent-tint);
  border-color: rgba(91, 52, 230, 0.2);
  color: var(--accent);
  box-shadow: none;
}

html[data-theme='light'] .chat-msg.specialist {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .chat-msg.user {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent) !important;
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .chat-typing-bubble {
  background: var(--bg-surface);
  border-color: var(--border-glass);
  color: var(--text-secondary);
  box-shadow: none;
}

html[data-theme='light'] .typing-dots span {
  background: var(--text-muted);
}

html[data-theme='light'] .spec-chat-form input,
html[data-theme='light'] .footer-vip-form input {
  background: var(--bg-surface);
  border: 1px solid var(--field-border);
  color: var(--ink);
}

html[data-theme='light'] .spec-chat-form input:focus {
  border-color: var(--accent);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

html[data-theme='light'] .spec-chat-form button,
html[data-theme='light'] .footer-vip-form button {
  background: var(--ink);
  color: var(--text-on-accent);
  box-shadow: none;
}

html[data-theme='light'] .spec-chat-form button:hover:not(:disabled),
html[data-theme='light'] .footer-vip-form button:hover {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: none;
}

/* ---------------------------------------------------
   ТОСТ — світла поверхня, графітовий текст і семантична іконка
   --------------------------------------------------- */

html[data-theme='light'] .toast-notification {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-toast);
}

html[data-theme='light'] .toast-icon {
  color: var(--success);
  filter: none;
}

/* ---------------------------------------------------
   КОНФІГУРАТОР
   --------------------------------------------------- */

html[data-theme='light'] .collect-step-card,
html[data-theme='light'] .collect-summary-card,
html[data-theme='light'] .request-card {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--daylight-glass-blur));
  -webkit-backdrop-filter: blur(var(--daylight-glass-blur));
  border: 1px solid var(--daylight-glass-edge);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .collect-step-card:hover {
  border-color: var(--border-strong);
}

html[data-theme='light'] .step-num {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-on-accent);
}

html[data-theme='light'] .step-header p {
  color: var(--text-muted);
}

html[data-theme='light'] .opt-content {
  background: var(--surface-soft);
  border: 1px solid var(--border-glass);
}

html[data-theme='light'] .collect-opt-label:hover .opt-content {
  background: var(--bg-surface);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .collect-opt-label.is-checked .opt-content,
html[data-theme='light'] .collect-opt-label input:checked + .opt-content {
  background: var(--bg-surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

html[data-theme='light'] .opt-desc {
  color: var(--text-muted);
}

html[data-theme='light'] .opt-price,
html[data-theme='light'] .collect-total-price {
  color: var(--accent);
}

html[data-theme='light'] .collect-preview-badge {
  background: var(--ink);
}

html[data-theme='light'] .collect-preview-img-wrap {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 50% at 50% 92%, rgba(22, 20, 28, 0.12), transparent 70%),
    linear-gradient(180deg, var(--surface-soft), var(--surface-sunken));
}

html[data-theme='light'] .collect-guarantee {
  color: var(--success);
}

html[data-theme='light'] .collect-specs-list {
  background: var(--surface-soft);
  border-color: var(--border-glass);
}

html[data-theme='light'] .collect-specs-list div {
  border-bottom-color: var(--border-glass);
}

html[data-theme='light'] .collect-telemetry {
  background: var(--accent-tint);
  border-color: rgba(91, 52, 230, 0.16);
}

html[data-theme='light'] .telemetry-val.highlight {
  color: var(--accent-cyan);
}

html[data-theme='light'] .compat-row {
  background: var(--surface-soft);
  color: var(--text-secondary);
}

html[data-theme='light'] .compat-ok > i {
  color: var(--success);
}

html[data-theme='light'] .compat-warn {
  background: #fff7e8;
  border-color: rgba(201, 133, 22, 0.35);
  color: var(--ink);
}

html[data-theme='light'] .compat-warn > i {
  color: var(--star);
}

html[data-theme='light'] .compat-fix-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

html[data-theme='light'] .compat-fix-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

html[data-theme='light'] .collect-tool-btn {
  border: 1px solid var(--border-glass);
  background: var(--bg-surface);
  color: var(--text-secondary);
}

html[data-theme='light'] .collect-tool-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-surface);
}

/* ---------------------------------------------------
   ФОРМА ЗАПИТУ
   --------------------------------------------------- */

html[data-theme='light'] .req-field label {
  color: var(--text-secondary);
}

html[data-theme='light'] .req-field label i {
  color: var(--accent);
}

html[data-theme='light'] .req-field input,
html[data-theme='light'] .req-field select,
html[data-theme='light'] .req-field textarea,
html[data-theme='light'] .form-group input,
html[data-theme='light'] .form-group textarea,
html[data-theme='light'] .promo-input-group input {
  background: var(--bg-surface);
  border: 1px solid var(--field-border);
  color: var(--ink);
  box-shadow: var(--shadow-field);
}

html[data-theme='light'] .req-field input:focus,
html[data-theme='light'] .req-field select:focus,
html[data-theme='light'] .req-field textarea:focus,
html[data-theme='light'] .form-group input:focus,
html[data-theme='light'] .form-group textarea:focus,
html[data-theme='light'] .promo-input-group input:focus {
  border-color: var(--accent);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px var(--accent-tint);
  outline: none;
}

html[data-theme='light'] .req-field input::placeholder,
html[data-theme='light'] .req-field textarea::placeholder,
html[data-theme='light'] .form-group input::placeholder,
html[data-theme='light'] .form-group textarea::placeholder,
html[data-theme='light'] .promo-input-group input::placeholder,
html[data-theme='light'] .spec-chat-form input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

html[data-theme='light'] .req-config-banner {
  background: var(--accent-tint);
  border-color: rgba(91, 52, 230, 0.2);
}

html[data-theme='light'] .request-success-box i {
  color: var(--success);
}

/* ---------------------------------------------------
   КОШИК
   --------------------------------------------------- */

html[data-theme='light'] .cart-item-card,
html[data-theme='light'] .cart-summary-card,
html[data-theme='light'] .guest-checkout-card,
html[data-theme='light'] .cart-empty-state {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--daylight-glass-blur));
  -webkit-backdrop-filter: blur(var(--daylight-glass-blur));
  border: 1px solid var(--daylight-glass-edge);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .cart-item-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}

html[data-theme='light'] .cart-item-media {
  background:
    radial-gradient(70% 50% at 50% 92%, rgba(22, 20, 28, 0.12), transparent 70%),
    linear-gradient(180deg, var(--surface-soft), var(--surface-sunken));
  border: 1px solid var(--border-glass);
}

html[data-theme='light'] .product-detail-badge {
  background: var(--ink);
  color: var(--text-on-accent);
  border: none;
  box-shadow: none;
}

html[data-theme='light'] .cart-item-specs,
html[data-theme='light'] .summary-label,
html[data-theme='light'] .guarantee-item {
  color: var(--text-secondary);
}

html[data-theme='light'] .cart-item-unit-price {
  color: var(--accent);
}

html[data-theme='light'] .cart-item-qty {
  background: var(--surface-soft);
  border: 1px solid var(--border-glass);
}

html[data-theme='light'] .qty-btn:hover {
  background: var(--ink);
  color: var(--text-on-accent);
  box-shadow: none;
}

html[data-theme='light'] .guarantee-item i,
html[data-theme='light'] .checkout-icon-wrap,
html[data-theme='light'] .form-group label i {
  color: var(--accent);
}

html[data-theme='light'] .checkout-icon-wrap,
html[data-theme='light'] .empty-icon-wrap {
  background: var(--accent-tint);
  border: 1px solid rgba(91, 52, 230, 0.16);
  box-shadow: none;
  color: var(--accent);
}

html[data-theme='light'] .promo-input-group button {
  background: transparent;
  border-color: var(--daylight-secondary-edge);
  color: var(--text-primary);
  box-shadow: none;
  transition: var(--daylight-transition);
}

html[data-theme='light'] .promo-input-group button:hover {
  background: var(--daylight-secondary-hover);
  border-color: var(--daylight-secondary-edge);
  color: var(--text-primary);
}

html[data-theme='light'] .summary-free,
html[data-theme='light'] .discount-row,
html[data-theme='light'] .discount-val,
html[data-theme='light'] .promo-message.success {
  color: var(--success);
}

html[data-theme='light'] .modal-order-number,
html[data-theme='light'] .modal-countdown span {
  color: var(--accent);
}

html[data-theme='light'] .modal-countdown {
  background: var(--accent-tint);
  border-color: rgba(91, 52, 230, 0.16);
  color: var(--text-secondary);
}

/* ---------------------------------------------------
   СТОРІНКА ТОВАРУ
   --------------------------------------------------- */

html[data-theme='light'] .product-detail-section::before,
html[data-theme='light'] .product-detail-section::after {
  opacity: 0.35;
}

html[data-theme='light'] .product-detail-card,
html[data-theme='light'] .product-extra-section,
html[data-theme='light'] .product-not-found {
  background: var(--bg-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .product-detail-gallery {
  background:
    radial-gradient(60% 45% at 50% 90%, rgba(22, 20, 28, 0.14), transparent 70%),
    linear-gradient(180deg, var(--surface-soft), var(--surface-sunken));
  border: 1px solid var(--border-glass);
}

html[data-theme='light'] .product-breadcrumbs span.current,
html[data-theme='light'] .config-selector-label,
html[data-theme='light'] .config-option-price,
html[data-theme='light'] .full-spec-title,
html[data-theme='light'] .fps-num {
  color: var(--accent);
}

html[data-theme='light'] .product-stock-badge,
html[data-theme='light'] .product-stock-pill {
  background: rgba(17, 134, 90, 0.08);
  border-color: rgba(17, 134, 90, 0.25);
  color: var(--success);
}

html[data-theme='light'] .config-option-btn,
html[data-theme='light'] .angle-btn {
  background: var(--surface-soft);
  border: 1px solid var(--border-glass);
}

html[data-theme='light'] .config-option-btn:hover,
html[data-theme='light'] .angle-btn:hover {
  background: var(--bg-surface);
  border-color: var(--border-hover);
}

html[data-theme='light'] .config-option-btn.active {
  background: var(--bg-surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

html[data-theme='light'] .angle-btn.active,
html[data-theme='light'] .res-pill.active {
  background: var(--ink);
  color: var(--text-on-accent);
  box-shadow: none;
}

html[data-theme='light'] .angle-btn.active i {
  color: var(--text-on-accent);
}

html[data-theme='light'] .config-option-badge {
  background: var(--accent-tint);
  color: var(--accent);
}

html[data-theme='light'] .product-spec-card,
html[data-theme='light'] .product-specs-grid .spec-card,
html[data-theme='light'] .fps-game-card,
html[data-theme='light'] .full-spec-card,
html[data-theme='light'] .box-item-card {
  background: var(--surface-soft);
  border: 1px solid var(--border-glass);
  box-shadow: none;
}

html[data-theme='light'] .fps-game-card:hover,
html[data-theme='light'] .full-spec-card:hover,
html[data-theme='light'] .box-item-card:hover,
html[data-theme='light'] .product-specs-grid .spec-card:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .spec-icon,
html[data-theme='light'] .full-spec-icon {
  background: var(--accent-tint);
  border-color: rgba(91, 52, 230, 0.16);
  color: var(--accent);
}

html[data-theme='light'] .product-perks {
  background: var(--surface-soft);
  border: 1px solid var(--border-glass);
}

html[data-theme='light'] .perk-item i,
html[data-theme='light'] .fps-game-title i {
  color: var(--accent);
}

html[data-theme='light'] .fps-resolution-pills {
  background: var(--surface-sunken);
  border: 1px solid var(--border-glass);
}

html[data-theme='light'] .fps-bar-track {
  background: rgba(22, 20, 28, 0.08);
}

html[data-theme='light'] .fps-bar-fill {
  background: linear-gradient(90deg, var(--ink), var(--accent));
  box-shadow: none;
}

html[data-theme='light'] .box-icon {
  background: rgba(17, 134, 90, 0.08);
  border-color: rgba(17, 134, 90, 0.22);
  color: var(--success);
  box-shadow: none;
}

/* ---------------------------------------------------
   AI-АСИСТЕНТ (світла тема)
   --------------------------------------------------- */

html[data-theme='light'] .cma-launcher {
  background: transparent;
  border-color: var(--daylight-secondary-edge);
  color: var(--text-primary);
  box-shadow: none;
}

html[data-theme='light'] .cma-launcher::before {
  border-color: rgba(91, 52, 230, 0.45);
}

html[data-theme='light'] .cma-panel {
  box-shadow: var(--shadow-elevated);
}

html[data-theme='light'] .cma-avatar {
  background: var(--accent);
  box-shadow: none;
}

html[data-theme='light'] .cma-msg--bot,
html[data-theme='light'] .cma-typing,
html[data-theme='light'] .cma-rec {
  box-shadow: var(--shadow-field);
}

html[data-theme='light'] .cma-msg--user {
  background: var(--accent);
  box-shadow: var(--shadow-field);
}

html[data-theme='light'] .cma-chip {
  border-color: var(--border-strong);
  color: var(--ink);
}

html[data-theme='light'] .cma-chip:hover {
  background: var(--daylight-secondary-hover);
  border-color: var(--daylight-secondary-edge);
  color: var(--text-primary);
}

html[data-theme='light'] .cma-send {
  background: var(--accent);
  box-shadow: var(--shadow-primary);
}

html[data-theme='light'] .cma-input:focus {
  border-color: var(--accent);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

html[data-theme='light'] .cma-rec__price {
  color: var(--accent);
}

html[data-theme='light'] .cm-drawer-handle__cta {
  background: var(--accent);
  box-shadow: var(--shadow-primary);
}

/* ---------------------------------------------------
   Плавне перемикання теми
   --------------------------------------------------- */

/* PC preview surfaces: explicit dark/light attributes and the default dark mode.
   Scope the surface and its text together; page styles cannot leave a white
   preview inside a dark card, including the configurator's mobile drawer. */

html[data-theme] body :is(.collect-preview-img-wrap),
html:not([data-theme]) body :is(.collect-preview-img-wrap) {
  background:
    radial-gradient(ellipse at 50% 80%, var(--pc-preview-light), transparent 65%),
    linear-gradient(150deg, var(--pc-preview-cyan), transparent), var(--pc-preview-media);
}

html[data-theme] body :is(.collect-summary-card h2, .collect-total-price),
html:not([data-theme]) body :is(.collect-summary-card h2, .collect-total-price) {
  color: var(--pc-preview-text);
}

html[data-theme] body :is(.preview-caption),
html:not([data-theme]) body :is(.preview-caption) {
  color: var(--pc-preview-muted);
}

/* Dark surfaces: an upper glass reflection and localized ambient light.
   Backgrounds preserve the carousel's inline positioning and 3D transforms. */

html:not([data-theme='light']) body {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(900px 650px at 15% 0%, rgba(119, 71, 220, 0.13), transparent 70%),
    radial-gradient(900px 700px at 100% 45%, rgba(39, 164, 190, 0.07), transparent 70%);
}

html:not([data-theme='light']) .why-us-card {
  background:
    linear-gradient(155deg, rgba(231, 239, 255, 0.07), transparent 36%),
    radial-gradient(ellipse at 100% 0%, rgba(126, 77, 225, 0.08), transparent 65%), var(--bg-card);
  border-color: var(--border-glass);
  box-shadow: var(--shadow-card);
}

html:not([data-theme='light']) .why-us-card:hover {
  border-color: var(--border-hover);
  box-shadow:
    var(--shadow-hover),
    0 0 24px -12px var(--glow-strong);
}

html:not([data-theme='light']) :is(.cma-msg--user, .cma-send, .cm-drawer-handle__cta) {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
}

/* The global storefront header selector must not style the assistant header. */

.cma-panel .cma-header {
  position: static;
  height: auto;
  min-height: 70px;
  transform: none;
  opacity: 1;
  animation: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: auto;
}

:is(.filter-btn, .pag-btn, .add-to-cart-btn, .theme-toggle):focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 4px;
}

html[data-theme='light'] body :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

/* The atelier is authored dark video even when the surrounding page is light. */

html[data-theme='light'] body .cinematic-showcase :is(a, button):focus-visible {
  outline-color: var(--focus-on-media);
}

html:not([data-theme='light']) .menu-buttons .checked,
html:not([data-theme='light']) .menu-pag .page.is-active {
  box-shadow:
    0 0 0 2px rgba(198, 166, 255, 0.25),
    0 0 26px var(--glow) !important;
}

/* Shared CRM surfaces also need the light palette when the theme changes. */

html[data-theme='light'] :is(.admin-modal-card, .admin-header, .admin-tabs-nav) {
  background: var(--bg-glass-light);
  color: var(--text-primary);
  border-color: var(--border-glass);
}

html[data-theme='light'] .transcript-chat-container {
  background: var(--surface-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* A nonzero duration with the default transition-property would synthesize
       a one-frame color transition on otherwise static surfaces during a theme switch. */
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition: none;
  }
}

/* Catalog cards: align legacy page rules with the shared neon graphite system. */

/* Global scroll surfaces: pages, glass dialogs, navigation strips and select popups. */

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

:root,
:root * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chromium prioritizes non-auto standards properties over WebKit geometry.
   Use its pseudo-elements for exact 6px rails; Firefox keeps the standards path. */

@supports selector(::-webkit-scrollbar) {
  :root,
  :root * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}

::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 0;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Shared authored select. Native controls remain the value/change-event owners. */

.cm-select {
  position: relative;
  min-width: 0;
}

.cm-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--text-primary);
  text-align: left;
  font: 500 14px/1.5 var(--font-body);
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}

.cm-select-trigger .cm-select-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cm-select-trigger::after {
  content: '';
  width: 7px;
  height: 7px;
  border: solid var(--accent-cyan);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-2px);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
  margin: 0 3px;
}

.cm-select-trigger > i {
  display: none;
}

.cm-select-trigger[aria-expanded='true']::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.cm-select-trigger:hover,
.cm-select.is-open .cm-select-trigger {
  border-color: var(--border-hover);
}

.cm-select-trigger:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

.cm-select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cm-select-trigger[aria-invalid='true'] {
  border-color: var(--danger);
}

.cm-select-list {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 1200;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  border: 1px solid var(--border-strong);
  padding: 6px;
  border-radius: 14px;
  background: var(--cm-comms-glass);
  color: var(--text-primary);
  box-shadow: var(--shadow-elevated);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: cm-select-reveal 0.18s var(--ease);
  box-sizing: border-box;
}

.cm-select-list[hidden] {
  display: none;
}

html[data-theme='light'] .cm-select-list {
  background: var(--bg-glass);
  border-color: var(--daylight-glass-edge);
  box-shadow: var(--shadow-elevated);
}

.cm-select-option {
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-primary);
  cursor: pointer;
  font: 400 14px/1.6 var(--font-body);
  overflow-wrap: anywhere;
  touch-action: pan-y;
}

.cm-select-option span {
  display: block;
}

.cm-select-option small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
}

.cm-select-option:hover,
.cm-select-option.is-highlighted {
  background: var(--accent-tint);
}

.cm-select-option.is-highlighted {
  border-color: var(--border-hover);
}

.cm-select-option[aria-selected='true'] {
  color: var(--accent-bright);
  background: var(--accent-tint);
  font-weight: 600;
}

.cm-select-option[aria-disabled='true'] {
  color: var(--text-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.cm-select-option[aria-disabled='true']:hover {
  background: transparent;
}

.req-field .cm-select-trigger {
  min-height: 50px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
}

@keyframes cm-select-reveal {
  from {
    opacity: 0.2;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .cm-select-trigger {
    font-size: 16px;
  }
  .cm-select-option {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  :root * {
    scroll-behavior: auto !important;
  }
  .cm-select-list,
  .cm-select-trigger,
  .cm-select-trigger::after {
    animation: none;
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cm-select-list {
    background: var(--bg-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .cm-select-list {
    background: var(--bg-surface);
  }
}

@media (forced-colors: active) {
  :root,
  :root * {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }
  ::-webkit-scrollbar {
    width: auto;
    height: auto;
  }
  ::-webkit-scrollbar-thumb {
    background: ButtonText;
  }
  ::-webkit-scrollbar-track {
    background: Canvas;
  }
  .cm-select-trigger,
  .cm-select-list,
  .cm-select-option.is-highlighted {
    border-color: ButtonText;
  }
  .cm-select-trigger::after {
    border-color: ButtonText;
  }
}

/* Wish/comment fields: one glass material and focus treatment for both forms. */

.cm-textarea-shell {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-md);
}

.cm-textarea-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent-cyan);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-cyan) 14%, transparent),
    0 12px 40px -20px var(--glow-strong),
    0 0 30px -13px var(--accent-cyan);
  transition: opacity 0.24s var(--ease);
}

.cm-textarea-shell:focus-within::after {
  opacity: 1;
}

html body .cm-textarea-shell textarea.cm-textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 136px;
  max-height: none;
  padding: 16px 18px;
  border: 1px solid var(--field-border);
  border-radius: inherit;
  background:
    linear-gradient(140deg, var(--glass-highlight), transparent 58%),
    color-mix(in srgb, var(--bg-surface) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  font: 400 16px/1.75 var(--font-body);
  letter-spacing: 0.005em;
  color: var(--text-primary);
  caret-color: var(--accent-cyan);
  resize: none;
  overflow: hidden;
  overflow-wrap: break-word;
  outline: none;
  transition: none;
}

html body .cm-textarea-shell textarea.cm-textarea[data-grow-ready] {
  transition: height 0.18s var(--ease);
}

html body .cm-textarea-shell textarea.cm-textarea:focus {
  border-color: var(--accent-cyan);
  outline: none;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

html body .cm-textarea-shell textarea.cm-textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
  font: inherit;
  letter-spacing: inherit;
}

html body .cm-textarea-shell textarea.cm-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  html body .cm-textarea-shell textarea.cm-textarea[data-grow-ready],
  .cm-textarea-shell::after {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html body .cm-textarea-shell textarea.cm-textarea {
    background: var(--bg-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  html body .cm-textarea-shell textarea.cm-textarea {
    background: var(--bg-surface);
  }
}

@media (forced-colors: active) {
  html body .cm-textarea-shell textarea.cm-textarea {
    border-color: ButtonText;
    background: Canvas;
    color: CanvasText;
  }
  html body .cm-textarea-shell textarea.cm-textarea:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .cm-textarea-shell::after {
    display: none;
  }
}

/* Phase 2: footer navigation has one purpose per column; no fake proof or empty social links. */

.footer-compact .footer-vip-form {
  flex-wrap: wrap;
}

.footer-compact .footer-vip-form button {
  width: auto;
  min-height: 44px;
  font: 500 14px/1.5 var(--font-body);
  padding: 10px 14px;
}

.footer-compact #vipDemoStatus {
  min-height: 3em;
  color: var(--text-secondary);
  font: 400 14px/1.6 var(--font-body);
}

.reviews-heading .reviews-demo-note {
  font: 400 16px/1.6 var(--font-body);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* Shared single-row public header; assistant dialog stays outside this container. */

body.has-cma > header :is(.header-content, .cart-header-content) {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  min-height: 72px;
}

body.has-cma > header .header-logo-link {
  flex: 1 0 0;
}

body.has-cma > header :is(.header_content_last, .cart-header-actions) {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: 0;
}

body.has-cma > header nav {
  flex: 0 0 auto;
  margin: 0;
}

body.has-cma > header .theme-toggle {
  margin: 0;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

body.has-cma > header .cart-link {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  box-sizing: border-box;
}

body.has-cma > header .cma-header-control {
  flex: 0 0 auto;
}

body.has-cma > header .cm-burger {
  margin: 0;
}

body.has-cma > header .cma-header-control .cma-launcher {
  white-space: nowrap;
}

body.has-cma > header .cma-header-control .cma-launcher:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

body.has-cma > header .cma-header-control .cma-launcher__badge:not(.is-visible) {
  display: none;
}

@media (max-width: 1180px) {
  body.has-cma > header .header-logo-link {
    margin-right: auto;
  }
  body.has-cma > header :is(.header_content_last, .cart-header-actions) {
    flex: 0 0 auto;
  }
}

@media (max-width: 700px) {
  body.has-cma > header :is(.header-content, .cart-header-content) {
    min-height: 64px;
    gap: 8px;
  }
  body.has-cma > header :is(.header_content_last, .cart-header-actions) {
    gap: 8px;
  }
  body.has-cma > header .cma-header-control .cma-launcher {
    width: 44px;
    min-width: 44px;
    box-sizing: border-box;
    padding: 0;
    justify-content: center;
  }
  body.has-cma > header .cma-header-control .cma-launcher-label {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  body.has-cma > header .cma-header-control .cma-launcher__badge {
    display: none;
  }
  body.has-cma > header :is(.header_content_logo, .header-logo) {
    width: auto;
    max-width: 72px;
    height: auto;
  }
}

/* Catalog cards: one surface, explicit specification tracks and independent actions. */

#catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
  grid-auto-rows: 1fr;
}

#catalog-grid .menu-item {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  box-sizing: border-box;
}

#catalog-grid .menu-item__media {
  height: 220px;
  border: 0;
  background: none;
}

#catalog-grid .menu-item__media img {
  padding: 0;
  box-sizing: border-box;
}

#catalog-grid .menu-item__body {
  padding: var(--space-6) 0;
  min-width: 0;
}

#catalog-grid .menu-item__category {
  display: block;
  color: var(--text-secondary);
  font: 400 12px/1.5 var(--font-body);
  margin-bottom: 8px;
}

#catalog-grid h3 {
  margin: 0 0 16px;
  min-height: 2.7em;
  font-size: 20px;
  line-height: 1.35;
}

#catalog-grid .menu-item__raiting {
  margin: 0 0 20px;
}

#catalog-grid .menu-item__specs {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

#catalog-grid .menu-item__specs > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  min-height: 0;
  border: 0;
}

#catalog-grid .menu-item__specs dt {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font: 500 14px/1.5 var(--font-body);
  letter-spacing: normal;
  color: var(--text-secondary);
}

#catalog-grid .menu-item__specs dt i {
  width: 16px;
  font-size: 14px;
  text-align: center;
}

#catalog-grid .menu-item__specs dd {
  margin: 0;
  font: 400 14px/1.5 var(--font-body);
  overflow-wrap: anywhere;
}

#catalog-grid .menu-item-last {
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--catalog-divider);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-top: auto;
}

#catalog-grid .menu-item-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

#catalog-grid .menu-price-label {
  font: 400 14px/1.5 var(--font-body);
}

#catalog-grid .menu__item-last-price {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

#catalog-grid .menu-item-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-3);
}

#catalog-grid .menu-item-actions :is(a, button) {
  min-width: 0;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 500 14px/1.5 var(--font-body);
  white-space: normal;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  border-radius: var(--radius-sm);
}

#catalog-grid .menu-item-actions .add-to-cart-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
}

#catalog-grid .menu-item-actions .details-btn {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-glass);
}

#catalog-grid .menu-item-actions :is(a, button):hover {
  transform: none;
}

#catalog-grid .menu-item-actions :is(a, button):focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

@container (max-width:280px) {
  #catalog-grid .menu-item-actions {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  #catalog-grid .add-to-cart-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

@media (max-width: 1099px) {
  #catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#catalog-grid .menu-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-ui) var(--ease);
}

#catalog-grid .menu-item:hover,
#catalog-grid .menu-item:focus-within {
  transform: translateY(-4px);
}

#catalog-grid .menu-item__media {
  display: block;
  min-width: 0;
}

#catalog-grid .menu-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--motion-ui) var(--ease);
}

#catalog-grid .menu-item:hover .menu-item__media img {
  transform: scale(1.035);
}

#catalog-grid .menu-item__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#catalog-grid h3 {
  font-family: var(--font-display);
  color: var(--text-primary);
}

#catalog-grid h3 a {
  color: inherit;
  text-decoration: none;
}

#catalog-grid .menu-item__raiting {
  display: flex;
  gap: 4px;
  align-items: center;
}

#catalog-grid .menu-item__specs dd {
  color: var(--text-secondary);
}

#catalog-grid .catalog-star {
  width: 16px;
  height: 16px;
  color: var(--star);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transform-origin: center;
}

#catalog-grid .catalog-star.is-filled {
  fill: currentColor;
}

#catalog-grid .menu-item:hover .catalog-star,
#catalog-grid .menu-item:focus-within .catalog-star {
  animation: catalog-star-lift 0.45s var(--ease) both;
  animation-delay: calc(var(--star-index) * 35ms);
}

#catalog-grid .menu-item-actions svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

#catalog-grid a:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

#catalog-grid .menu-item-actions .added {
  background: var(--success);
  color: var(--text-on-success);
  border-color: var(--success);
}

html[data-theme='light'] #catalog-grid .menu-item {
  background: var(--bg-glass);
  border-color: var(--daylight-glass-edge);
  backdrop-filter: blur(var(--daylight-glass-blur));
  -webkit-backdrop-filter: blur(var(--daylight-glass-blur));
  box-shadow: var(--shadow-card);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    transform 300ms ease-out,
    box-shadow 300ms ease-out;
}

html[data-theme='light'] #catalog-grid .menu-item:where(:hover, :focus-within) {
  box-shadow: var(--shadow-hover);
  transform: translate3d(0, var(--daylight-card-lift), 0);
}

html[data-theme='light'] #catalog-grid .menu-item-actions :is(a, button) {
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: var(--daylight-transition);
}

html[data-theme='light'] #catalog-grid .menu-item-actions .add-to-cart-btn:not(.added) {
  box-shadow: var(--shadow-primary);
}

html[data-theme='light'] #catalog-grid .menu-item-actions .add-to-cart-btn:hover:not(.added):not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-primary-hover);
  transform: translate3d(0, var(--daylight-lift), 0);
}

html[data-theme='light'] #catalog-grid .menu-item-actions .details-btn {
  border-color: var(--daylight-secondary-edge);
}

html[data-theme='light'] #catalog-grid .menu-item-actions .details-btn:hover {
  background: var(--daylight-secondary-hover);
}

html[data-theme='light'] #catalog-grid .menu-item__media img {
  filter: drop-shadow(0 14px 16px var(--shadow-ink));
}

@keyframes catalog-star-lift {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  #catalog-grid .menu-item,
  #catalog-grid .menu-item__media img {
    transition: none;
    transform: none;
  }
  #catalog-grid .catalog-star {
    animation: none !important;
  }
  html[data-theme='light'] #catalog-grid .menu-item,
  html[data-theme='light'] #catalog-grid .menu-item-actions :is(a, button) {
    transform: none;
    transition: none;
  }
}

/* Shared four-column footer. Contact destinations are intentionally pending. */

html body .footer.footer-balanced {
  padding: 64px 0 40px;
}

html body .footer.footer-balanced .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
  margin: 0;
}

html body .footer.footer-balanced .footer-col {
  min-width: 0;
}

html body .footer.footer-balanced .footer-logo {
  width: 112px;
  height: auto;
  margin: 0 0 20px;
  display: block;
}

html body .footer.footer-balanced .footer-col h4 {
  margin: 0 0 20px;
  color: var(--text-primary);
  font: 500 16px/1.5 var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}

html body .footer.footer-balanced .footer-col p {
  color: var(--text-secondary);
  font: 400 14px/1.7 var(--font-body);
  margin: 0 0 20px;
  max-width: 32ch;
}

html body .footer.footer-balanced .footer-col ul {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

html body .footer.footer-balanced .footer-col li {
  margin: 0;
  padding: 0;
}

html body .footer.footer-balanced .footer-col a {
  color: var(--text-secondary);
  font: 400 14px/1.6 var(--font-body);
  text-decoration: none;
  transition: color 0.3s ease;
  overflow-wrap: anywhere;
}

html body .footer.footer-balanced .footer-col a:hover {
  color: var(--text-primary);
}

html body .footer.footer-balanced a:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

html body .footer.footer-balanced .footer-consult-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-primary);
}

html body .footer.footer-balanced .footer-contact-pending {
  font: 400 14px/1.6 var(--font-body);
  color: var(--text-secondary);
}

html body .footer.footer-balanced .footer-col .footer-contact-note {
  margin: 20px 0 0;
}

html body .footer.footer-balanced .footer-col-vip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding-top: 32px;
  margin-top: 40px;
  border-top: 1px solid var(--footer-divider);
}

html body .footer.footer-balanced .footer-col-vip h4,
html body .footer.footer-balanced .footer-col-vip p {
  margin: 0;
}

html body .footer.footer-balanced .footer-col-vip #vipDemoStatus {
  min-height: 0;
  flex-basis: 100%;
}

html body .footer.footer-balanced .footer-bottom {
  border-top: 1px solid var(--footer-divider);
  margin-top: 40px;
  padding: 24px 0 0;
  text-align: left;
}

html body .footer.footer-balanced .footer-bottom p {
  margin: 0;
  color: var(--text-secondary);
  font: 400 14px/1.6 var(--font-body);
}

@media (max-width: 1050px) {
  html body .footer.footer-balanced .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

@media (max-width: 600px) {
  html body .footer.footer-balanced .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .footer.footer-balanced .footer-col a {
    transition: none;
  }
}

html[data-theme='light'] .footer-vip-form button {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-primary);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: var(--daylight-transition);
}

html[data-theme='light'] .footer-vip-form button:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-primary-hover);
  transform: translate3d(0, var(--daylight-lift), 0);
}