/* Start:/bitrix/templates/modern_market/template_styles.css?1771305511245808*/
:root {
  /* Primitive Color Tokens - обновленные контрастные цвета */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  
  /* Заменяем кремовые оттенки на более контрастные */
  --color-cream-50: rgba(240, 244, 248, 1); /* Светло-голубой вместо кремового */
  --color-cream-100: rgba(255, 255, 255, 1); /* Белый */
  
  --color-gray-200: rgb(26, 26, 26); /* Более темный серый */
  --color-gray-300: rgba(156, 163, 175, 1); /* Контрастный серый */
  --color-gray-400: rgba(107, 114, 128, 1); /* Темнее */
  --color-slate-500: rgba(71, 85, 105, 1); /* Более темный slate */
  --color-brown-600: rgba(75, 63, 47, 1); /* Темнее коричневый */
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(15, 23, 42, 1); /* Очень темный для текста */
  
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(194, 31, 57, 1); /* Более яркий голубой */
  --color-teal-600: rgba(165, 26, 48, 1);
  --color-teal-700: rgba(135, 21, 39, 1);
  --color-teal-800: rgba(7, 89, 133, 1);
  
  --color-red-400: rgba(248, 113, 113, 1);
  --color-red-500: rgba(239, 68, 68, 1); /* Яркий красный */
  --color-orange-400: rgba(251, 146, 60, 1);
  --color-orange-500: rgba(249, 115, 22, 1); /* Яркий оранжевый */

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 75, 63, 47;
  --color-teal-500-rgb: 14, 165, 233;
  --color-slate-900-rgb: 15, 23, 42;
  --color-slate-500-rgb: 71, 85, 105;
  --color-red-500-rgb: 239, 68, 68;
  --color-red-400-rgb: 248, 113, 113;
  --color-orange-500-rgb: 249, 115, 22;
  --color-orange-400-rgb: 251, 146, 60;

  /* Background color tokens (Light Mode) - более насыщенные */
  --color-bg-1: rgba(194, 31, 57, 0.15); /* Ярче синий */
  --color-bg-2: rgba(245, 158, 11, 0.15); /* Ярче желтый */
  --color-bg-3: rgba(34, 197, 94, 0.15); /* Ярче зеленый */
  --color-bg-4: rgba(239, 68, 68, 0.15); /* Ярче красный */
  --color-bg-5: rgba(147, 51, 234, 0.15); /* Ярче фиолетовый */
  --color-bg-6: rgba(249, 115, 22, 0.15); /* Ярче оранжевый */
  --color-bg-7: rgba(236, 72, 153, 0.15); /* Ярче розовый */
  --color-bg-8: rgba(6, 182, 212, 0.15); /* Ярче голубой */

  /* Semantic Color Tokens (Light Mode) - контрастные */
  --color-background: rgba(249, 250, 251, 1); /* Очень светлый серый вместо кремового */
  --color-surface: rgba(255, 255, 255, 1); /* Чистый белый */
  --color-text: rgba(17, 24, 39, 1); /* Почти черный для текста */
  --color-text-secondary: rgba(75, 85, 99, 1); /* Темно-серый */
  --color-primary: rgba(194, 31, 57, 1); /* Корпоративный ZETA красный */
  --color-primary-hover: rgba(165, 26, 48, 1);
  --color-primary-active: rgba(135, 21, 39, 1);
  --color-secondary: rgba(229, 231, 235, 1); /* Контрастный серый */
  --color-secondary-hover: rgba(209, 213, 219, 1);
  --color-secondary-active: rgba(156, 163, 175, 1);
  --color-border: rgba(209, 213, 219, 1); /* Видимая граница */
  --color-btn-primary-text: rgba(255, 255, 255, 1);
  --color-card-border: rgba(229, 231, 235, 1); /* Видимая граница карточек */
  --color-card-border-inner: rgba(243, 244, 246, 1);
  --color-error: rgba(239, 68, 68, 1);
  --color-success: rgba(34, 197, 94, 1); /* Яркий зеленый */
  --color-warning: rgba(249, 115, 22, 1);
  --color-info: rgba(194, 31, 57, 1); /* Яркий синий */
  --color-focus-ring: rgba(194, 31, 57, 0.5);
  --color-select-caret: rgba(17, 24, 39, 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.35;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 34, 197, 94;
  --color-error-rgb: 239, 68, 68;
  --color-warning-rgb: 249, 115, 22;
  --color-info-rgb: 59, 130, 246;

  /* Typography */
  --font-family-base: "Montserrat", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Montserrat", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Light mode colors - explicit override */
@media (prefers-color-scheme: light) {
  :root {
    --color-text: rgba(17, 24, 39, 1);
  }
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 28, 28, 28;
    --color-gray-200-rgb: 26, 26, 26;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */

    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */

  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 75, 63, 47;
  --color-teal-500-rgb: 14, 165, 233;
  --color-slate-900-rgb: 15, 23, 42;
  --color-slate-500-rgb: 71, 85, 105;
  --color-red-500-rgb: 239, 68, 68;
  --color-red-400-rgb: 248, 113, 113;
  --color-orange-500-rgb: 249, 115, 22;
  --color-orange-400-rgb: 251, 146, 60;

  /* Semantic Color Tokens (Light Mode) */
  --color-background: rgba(249, 250, 251, 1);
  --color-surface: rgba(255, 255, 255, 1);
  --color-text: rgba(17, 24, 39, 1);
  --color-text-secondary: rgba(75, 85, 99, 1);
  --color-primary: rgba(194, 31, 57, 1);
  --color-primary-hover: rgba(165, 26, 48, 1);
  --color-primary-active: rgba(135, 21, 39, 1);
  --color-secondary: rgba(229, 231, 235, 1);
  --color-secondary-hover: rgba(209, 213, 219, 1);
  --color-secondary-active: rgba(156, 163, 175, 1);
  --color-border: rgba(209, 213, 219, 1);
  --color-btn-primary-text: rgba(255, 255, 255, 1);
  --color-card-border: rgba(229, 231, 235, 1);
  --color-card-border-inner: rgba(243, 244, 246, 1);
  --color-error: rgba(239, 68, 68, 1);
  --color-success: rgba(34, 197, 94, 1);
  --color-warning: rgba(249, 115, 22, 1);
  --color-info: rgba(194, 31, 57, 1);
  --color-focus-ring: rgba(194, 31, 57, 0.5);
  --color-select-caret: rgba(17, 24, 39, 0.8);

  /* RGB versions for light mode */
  --color-success-rgb: 34, 197, 94;
  --color-error-rgb: 239, 68, 68;
  --color-warning-rgb: 249, 115, 22;
  --color-info-rgb: 59, 130, 246;
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}
.hidden {
  display: none;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/montserrat/v26/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR8pQ.woff2')
    format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('https://fonts.gstatic.com/s/montserrat/v26/JTURjIg1_i6t8kCHKm45_bZF3gnD-wxs.woff2')
    format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('https://fonts.gstatic.com/s/montserrat/v26/JTURjIg1_i6t8kCHKm45_7ZF3gnD-wxs.woff2')
    format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('https://fonts.gstatic.com/s/montserrat/v26/JTURjIg1_i6t8kCHKm45_zpF3gnD-wxs.woff2')
    format('woff2');
  font-display: swap;
}

/* END PERPLEXITY DESIGN SYSTEM */
/* ============================================
   БАЗОВЫЕ СТИЛИ
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
    background-color: #ffffff;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   HEADER - Фиксированная шапка
   ============================================ */

/* Обёртка для баннера и шапки */
.sticky-header-wrapper {
    position: relative;
    z-index: 999;
}

/* Фиксированная шапка при скролле */
.sticky-header-wrapper.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/* Плейсхолдер для компенсации высоты при фиксации */
.header-placeholder {
    display: none;
}

.header-placeholder.is-active {
    display: block;
}

.site-header {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.sticky-header-wrapper.is-fixed .site-header {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ========================================
   СТРУКТУРА ШАПКИ: header-top + header-search-row
   ======================================== */

.header-top {
    background: #ffffff;
}

.header-search-row {
    background: #ffffff;
}

.header-search-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.header-search-content .search-box {
    flex: 1;
    max-width: 600px;
}

.header-search-content .catalog-dropdown {
    flex-shrink: 0;
}

/* Плейсхолдер для строки поиска на мобильных */
.search-row-placeholder {
    display: none;
}

.search-row-placeholder.is-active {
    display: block;
}

/* Десктопные header-actions */
.header-actions-desktop {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* ========================================
   ДЕСКТОП: Всё в одной строке (min-width: 768px)
   ======================================== */
@media (min-width: 768px) {
    /* Шапка - flex-контейнер для центрирования */
    .site-header {
        display: flex;
        justify-content: center;
    }
    
    /* Внутренний контейнер с содержимым */
    .site-header::before {
        display: none;
    }
    
    /* Скрываем разделение на header-top и header-search-row */
    .header-top,
    .header-search-row {
        display: contents;
    }
    
    .header-top .header-content,
    .header-search-content {
        display: contents;
    }
    
    /* Создаём единый flex-контейнер внутри шапки */
    .site-header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 20px;
        padding: 16px 40px;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    /* Порядок элементов: Логотип | Каталог | Поиск | Действия */
    .header-logo-city {
        order: 1;
        flex-shrink: 0;
    }
    
    .catalog-dropdown {
        order: 2;
        flex-shrink: 0;
    }
    
    .search-box {
        order: 3;
        flex: 1;
        max-width: 500px;
    }
    
    .header-actions-desktop {
        order: 4;
        flex-shrink: 0;
    }
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 20px;
    background: #ffffff;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Логотип */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
}

/* ========================================
   СЕЛЕКТОР ГОРОДА - Стиль карточек
   ======================================== */
/* Обёртка логотипа и города */
.header-logo-city {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Вертикальный разделитель */
.header-divider {
    width: 1px;
    height: 32px;
    background: #e5e7eb;
    margin: 0 16px;
}

.city-selector {
    position: relative;
}

/* Кнопка-триггер */
.city-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.city-trigger:hover {
    background: rgba(0, 0, 0, 0.04);
}

.city-trigger-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.city-buildings-icon {
    width: 28px;
    height: 28px;
    color: #1f2937;
}

.city-trigger-name {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.city-trigger-arrow {
    display: none;
}

.city-selector.open .city-trigger {
    background: rgba(0, 0, 0, 0.04);
}

/* Выпадающий список с карточками */
.city-cards-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 340px;
    background: white;
    border-radius: 20px;
    padding: 16px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.city-selector.open .city-cards-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.city-cards-header {
    font-size: 12px;
    font-weight: 600;
    color: #C21F39;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-left: 4px;
}

.city-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Карточка города */
.city-card {
    position: relative;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #f3f4f6;
    text-decoration: none;
    transition: all 0.2s ease;
    overflow: hidden;
    cursor: pointer;
    background: white;
}

.city-card:hover {
    border-color: #d1d5db;
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.city-card.active {
    border-color: #C21F39;
    background: linear-gradient(135deg, rgba(194, 31, 57, 0.05), rgba(194, 31, 57, 0.02));
}

.city-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.city-card.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: #f3f4f6;
}

/* Галочка выбранного города */
.city-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #C21F39;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
}

/* Иконка города */
.city-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-bottom: 10px;
}

.city-card-icon-shymkent {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.city-card-icon-taraz {
    background: linear-gradient(135deg, #10b981, #059669);
}

.city-card-icon-turkestan {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.city-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

@media (max-width: 991px) {
    .city-selector {
        order: -1;
    }
    
    .city-cards-dropdown {
        left: auto;
        right: 0;
        width: 300px;
    }
}

@media (max-width: 767px) {
    .city-selector {
        display: none;
    }
    
    .header-divider {
        display: none;
    }
}

/* Мобильный переключатель города */
.mobile-city-bar {
    display: none;
    background: #f8fafc;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-city-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    text-align: left;
}

.mobile-city-btn span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-city-btn:hover,
.mobile-city-btn:active {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.mobile-city-btn i {
    font-size: 13px;
}

.mobile-city-btn i:first-child {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

@media (max-width: 767px) {
    .mobile-city-bar {
        display: block;
    }
}

/* Мобильное модальное окно выбора города */
.mobile-city-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-city-modal.open {
    opacity: 1;
    visibility: visible;
}

/* Скрываем навбар когда модалка города открыта */
.mobile-city-modal.open ~ .mobile-navbar,
body:has(.mobile-city-modal.open) .mobile-navbar {
    display: none !important;
}

.mobile-city-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 14, 20, 0.56);
}

.mobile-city-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.32s ease;
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 -12px 34px rgba(16, 24, 40, 0.24);
}

.mobile-city-modal-content::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: #d1d5db;
    margin: 10px auto 0;
}

.mobile-city-modal.open .mobile-city-modal-content {
    transform: translateY(0);
}

.mobile-city-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 16px;
    border-bottom: 1px solid #edf0f3;
}

.mobile-city-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.2px;
}

.mobile-city-modal-close {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    color: #4b5563;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-city-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.mobile-city-modal-body {
    padding: 12px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 20px));
}

.mobile-city-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid #edf0f3;
    color: #1f2937;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    background: #fff;
}

.mobile-city-item:hover,
.mobile-city-item:active {
    background: #f9fafb;
    border-color: #d8dee6;
}

.mobile-city-item.active {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.mobile-city-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-city-item-info > i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #374151;
    background: #f3f4f6;
}

.mobile-city-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.25;
}

.mobile-city-address {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
    line-height: 1.35;
}

.mobile-city-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #374151;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: none;
}

/* Кнопка каталога */
.catalog-dropdown {
    position: relative;
}

.btn-catalog {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-catalog span {
    display: inline-block;
}

.btn-catalog::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    transition: left 0.3s ease;
}

.btn-catalog:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: #333333;
}

.btn-catalog:hover::before {
    left: 0;
}

.btn-catalog:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-catalog svg,
.btn-catalog i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

/* Стили для Flaticon иконки каталога */
.btn-catalog i.catalog-icon {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Анимация вращения при переключении иконок */
.btn-catalog i.icon-rotate {
    animation: iconRotate 0.3s ease;
}

@keyframes iconRotate {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

.btn-catalog:hover svg,
.btn-catalog:hover i {
    transform: scale(1.1);
}

/* Выпадающее меню каталога */
.catalog-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 24px;
    min-width: 600px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.catalog-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Заголовок меню - скрыт на десктопе */
.catalog-menu-header {
    display: none;
}

.catalog-menu-overlay {
    display: none;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.catalog-column h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333333;
}

.catalog-column ul {
    list-style: none;
}

.catalog-column ul li {
    margin-bottom: 8px;
}

.catalog-column ul li a {
    font-size: 14px;
    color: #4a5568;
}

.catalog-column ul li a:hover {
    color: #007bff;
}

/* Поисковая строка */
.search-box {
    flex: 1;
    max-width: 500px;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 12px 50px 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 25px; /* Pill-shape - закругленные края */
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background: #ffffff;
}

.search-input:focus {
    border-color: #333333;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #4a5568;
    padding: 5px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.search-btn:hover {
    color: #000000;
}

/* Форма поиска */
.search-form {
    position: relative;
    width: 100%;
}

.search-title-form {
    position: relative;
    width: 100%;
}

/* Подсказки поиска (автодополнение) */
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-white, #ffffff);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.search-suggestions.active {
    display: block;
}

.search-suggestion-item {
    border-bottom: 1px solid var(--color-border, #e5e5e5);
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--color-text, #333333);
    transition: background-color 0.2s ease;
}

.search-suggestion-link:hover {
    background-color: var(--color-secondary, rgba(229, 231, 235, 1));
}

.search-suggestion-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.search-suggestion-info {
    flex: 1;
    min-width: 0;
}

.search-suggestion-title {
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text, #333333);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-suggestion-price {
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary, rgba(194, 31, 57, 1));
}

/* Страница результатов поиска */
.search-results-page {
    padding: 40px 0 60px;
    background-color: var(--color-white, #ffffff);
    min-height: 60vh;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Сетка товаров в поиске — 3 колонки как в каталоге */
.search-results-page .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.search-results-page .product-card {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.search-results-page .product-card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px;
}

.search-results-page .product-name {
    flex-grow: 1;
    min-height: 48px;
    margin-bottom: 12px;
}

.search-results-page .product-price {
    margin-bottom: 12px;
}

.search-results-page .btn-cart {
    margin-top: auto;
    width: 100%;
}

@media (max-width: 1024px) {
    .search-results-page .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .search-results-page .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.search-no-results {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.search-no-results p {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.6;
}

.search-no-results a {
    color: var(--primary-color, #C21F39);
    text-decoration: underline;
}

.search-no-results a:hover {
    color: var(--primary-hover, #a51a30);
}

.search-results-page .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.search-results-page .page-title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 32px;
    letter-spacing: -0.8px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Стили для компонента bitrix:search.page */
.search-results-page .search-page {
    margin-top: 32px;
}

.search-results-page .search-item {
    padding: 20px;
    border-bottom: 1px solid var(--color-border, #e5e5e5);
    transition: background-color 0.2s ease;
}

.search-results-page .search-item:hover {
    background-color: var(--color-secondary, rgba(229, 231, 235, 1));
}

.search-results-page .search-item-title {
    font-size: var(--font-size-lg, 16px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #333333);
    margin-bottom: 8px;
}

.search-results-page .search-item-title a {
    color: var(--color-primary, rgba(194, 31, 57, 1));
    text-decoration: none;
    transition: color 0.2s ease;
}

.search-results-page .search-item-title a:hover {
    color: var(--color-primary-hover, rgba(165, 26, 48, 1));
    text-decoration: underline;
}

.search-results-page .search-item-text {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-secondary, rgba(75, 85, 99, 1));
    line-height: 1.6;
    margin-bottom: 8px;
}

.search-results-page .search-item-path {
    font-size: var(--font-size-sm, 12px);
    color: var(--color-text-secondary, rgba(75, 85, 99, 1));
}

.search-results-page .search-item-path a {
    color: var(--color-text-secondary, rgba(75, 85, 99, 1));
    text-decoration: none;
}

.search-results-page .search-item-path a:hover {
    color: var(--color-primary, rgba(194, 31, 57, 1));
    text-decoration: underline;
}

/* Блок действий справа */
.header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.action-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.action-link:hover {
    color: #333333;
}

.action-link svg,
.action-link i {
    width: 24px;
    height: 24px;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    line-height: 1;
}

/* Дополнительные стили для Flaticon иконок */
.action-link i.fi {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.action-link:hover svg,
.action-link:hover i {
    transform: scale(1.1);
}

.action-text {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

.action-link .underline {
    text-decoration: underline;
    text-decoration-color: rgba(0, 123, 255, 0.6);
    text-underline-offset: 3px;
}

.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff5757;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    transition: transform 0.3s ease;
}

/* Анимация бейджа при добавлении товара */
@keyframes badgePulse {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.4);
        background: #22c55e;
    }
    60% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        background: #ff5757;
    }
}

.badge.badge-pulse {
    animation: badgePulse 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Анимация ссылки корзины при добавлении товара */
@keyframes cartAddedShake {
    0%, 100% {
        transform: translateX(0) rotate(0);
    }
    20% {
        transform: translateX(-3px) rotate(-5deg);
    }
    40% {
        transform: translateX(3px) rotate(5deg);
    }
    60% {
        transform: translateX(-2px) rotate(-3deg);
    }
    80% {
        transform: translateX(2px) rotate(3deg);
    }
}

.action-link.cart-added {
    animation: cartAddedShake 0.5s ease-in-out;
}

.action-link.cart-added i,
.action-link.cart-added svg {
    color: #22c55e;
}

.cart-sum {
    font-size: 14px;
    font-weight: 600;
    color: #007bff;
}

/* ============================================
   СЛАЙДЕР
   ============================================ */

.slider-section {
    margin-top: 0;
    margin-bottom: 0px; /* ОSAтступ снизу */
}

/* Скрытие баннеров в зависимости от устройства */
.slider-desktop {
    display: block; /* Показываем на десктопе по умолчанию */
    padding: 20px 0px 0px 0px;
    background: #f8f9fa;
}

.slider-mobile {
    display: none; /* Скрываем на десктопе по умолчанию */
}

/* На мобильных устройствах показываем мобильные баннеры, скрываем десктопные */
@media (max-width: 767px) {
    .slider-desktop {
        display: none; /* Скрываем десктопные баннеры на мобильных */
    }
    
    .slider-mobile {
        display: block; /* Показываем мобильные баннеры на мобильных */
    }
}

.slider-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 400px; /* Изменено с 600px на 400px */
    margin: 0 auto; /* Центрирование */
    overflow: hidden;
    border-radius: 12px; /* Скругление краев */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Легкая тень для глубины */
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex; /* Для правильного позиционирования слайдов */
    align-items: center;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.slide.active {
    opacity: 1;
}

.slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px; /* Скругление для изображений */
}

/* Навигация слайдера */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: #333333;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.slider-nav:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.slider-nav.prev {
    left: 30px;
}

.slider-nav.next {
    right: 30px;
}

/* Точки навигации */
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active,
.dot:hover {
    background: #ffffff;
    transform: scale(1.2);
}

/* ============================================
   ПОПУЛЯРНЫЕ КАТЕГОРИИ
   ============================================ */

.categories-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: #333333;
}

.categories-scroller {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 12px 4px 6px;
    margin-top: 24px;
    scroll-snap-type: x mandatory;
}

.categories-scroller::-webkit-scrollbar {
    height: 6px;
}

.categories-scroller::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 3px;
}

.category-chip {
    min-width: 120px;
    max-width: 140px;
    background: #ffffff;
    border-radius: 24px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: #0f172a;
    font-weight: 600;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    scroll-snap-align: start;
}

.category-chip:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(30, 64, 175, 0.18);
    border-color: rgba(37, 99, 235, 0.35);
}

.category-chip__icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
    color: #a51a30;
    font-size: 32px;
    font-weight: 700;
}

.category-chip__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.category-chip__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.category-chip--all {
    min-width: 140px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 1) 0%, rgba(220, 38, 38, 1) 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 18px 35px rgba(248, 113, 113, 0.35);
}

.category-chip--all:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px rgba(220, 38, 38, 0.45);
}

.category-chip--all .category-chip__icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 36px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.category-chip--all .category-chip__title {
    font-weight: 700;
}

@media (max-width: 768px) {
    .categories-scroller {
        gap: 12px;
        padding: 10px 0 4px;
    }

    .category-chip {
        min-width: 110px;
        padding: 16px 14px;
    }

    .category-chip__icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        font-size: 28px;
    }

    .category-chip__title {
        font-size: 14px;
    }
}

/* ============================================
   ХИТЫ ПРОДАЖ
   ============================================ */

.products-section {
    padding: 80px 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.product-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06),
                0 1px 3px rgba(15, 23, 42, 0.04);
    position: relative;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    box-shadow: 0 20px 50px rgba(194, 31, 57, 0.12),
                0 8px 16px rgba(194, 31, 57, 0.08);
    transform: translateY(-6px);
    border-color: rgba(194, 31, 57, 0.2);
}

/* Ссылки на товар */
.product-card a {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    z-index: 1;
}

.product-card a:hover {
    text-decoration: none;
}

/* Кнопка избранного */
.favorite-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #64748b;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.favorite-btn:hover {
    background: #ffffff;
    color: #ef4444;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.favorite-btn.active {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.favorite-btn.active svg path {
    fill: currentColor;
}

.favorite-btn.active:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.product-image {
    width: 100%;
    padding-top: 100%; /* Создает квадрат (aspect-ratio 1:1) */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: bicubic;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

/* Градиент убран для прозрачного фона и полного отображения товара */

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-info {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    flex-grow: 1;
}

.product-name {
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.5;
    transition: color 0.25s ease;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 51px;
    letter-spacing: -0.01em;
}

.product-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.product-name a:hover {
    color: var(--color-primary, rgba(194, 31, 57, 1));
}

.product-card a .product-name {
    text-decoration: none;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 36px;
    flex-wrap: wrap;
}

.price-current {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary, rgba(194, 31, 57, 1));
    white-space: nowrap;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.price-old {
    font-size: 15px;
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 500;
    line-height: 1.2;
}

.price-request {
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.btn-cart {
    width: 100%;
    padding: 15px 20px;
    background: white;
    color: rgba(194, 31, 57, 1);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(194, 31, 57, 1);
    cursor: pointer;
    z-index: 2;
    position: relative;
    letter-spacing: 0.01em;
    box-shadow: none;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.btn-cart:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(194, 31, 57, 0.25);
    background: linear-gradient(135deg, rgba(194, 31, 57, 1), rgba(165, 26, 48, 1));
    color: white;
    border-color: rgba(194, 31, 57, 1);
}

.btn-cart:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(194, 31, 57, 0.2);
}

.btn-cart:disabled:not(.btn-cart--in-basket) {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    border: 1px solid #e2e8f0;
}

.btn-cart--disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
}

.btn-cart--in-basket {
    background: linear-gradient(135deg, rgba(34, 197, 94, 1) 0%, rgba(16, 185, 129, 1) 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
    cursor: default;
    pointer-events: none;
    color: white !important;
    border-color: rgba(34, 197, 94, 1) !important;
}

.product-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    margin-top: auto;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-status--out {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

/* Обработка пустых результатов */
.products-grid:empty::before,
.categories-grid:empty::before {
    content: "Товары не найдены";
    display: block;
    text-align: center;
    padding: 40px 20px;
    color: #4a5568;
    font-size: 16px;
}

/* Улучшение доступности */
button:focus,
a:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Скрытие декоративных элементов от скринридеров */
.aria-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background: #1a1a1a;
    color: #ffffff;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #ffffff;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: #cccccc;
    font-size: 14px;
}

.footer-column ul li a:hover {
    color: #007bff;
}

/* Стили для колонки "О компании" без заголовка */
.footer-column-about ul {
    margin-top: 0;
}

.footer-column-about ul li {
    background: transparent !important;
    padding: 0 !important;
}

.footer-column-about ul li a {
    color: #ffffff !important;
    background: transparent !important;
    display: block;
    padding: 0 !important;
}

.footer-column-about ul li a:hover {
    color: #007bff !important;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social a {
    color: #cccccc;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: #007bff;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
}

.footer-bottom p {
    color: #718096;
    font-size: 14px;
}

.whatsapp-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(18, 140, 126, 0.35);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1100;
}

.whatsapp-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(18, 140, 126, 0.4);
}

.whatsapp-fab:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(18, 140, 126, 0.35);
}

.whatsapp-fab svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 767px) {
    /* Скрываем WhatsApp-кнопку на мобильных, так как она теперь в навигационной панели */
    .whatsapp-fab {
        display: none !important;
    }
}

/* ============================================
   LAZY LOADING
   ============================================ */

.lazy-load {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease;
}

.lazy-load.animate {
    opacity: 0;
    transform: translateY(20px);
}

.lazy-load.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

/* Планшеты (768px - 991px) */
@media (max-width: 991px) {
    .header-content {
        flex-wrap: wrap;
    }
    
    .search-box {
        order: 3;
        max-width: 100%;
        width: 100%;
    }
    
    .catalog-menu {
        min-width: 400px;
    }
    
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .slider-container {
        height: 350px; /* Пропорционально уменьшено */
        border-radius: 10px; /* Скругление для планшетов */
    }
    
    .slide-image {
        border-radius: 10px;
    }
    
    .slide-title {
        font-size: 36px;
    }
    
    .slide-subtitle {
        font-size: 18px;
    }
    
    .categories-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .product-image {
        padding-top: 100%; /* Квадратный формат */
    }
    
    .product-info {
        padding: 18px 20px 20px;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобильные устройства (320px - 767px) */
@media (max-width: 767px) {
    /* Отступ снизу для мобильной навигации */
    body {
        padding-bottom: 96px;
    }
    
    .main-content {
        padding-bottom: 24px;
    }
    
    /* ========================================
       МОБИЛЬНАЯ ШАПКА: Компактная версия - всё в одной строке
       ======================================== */
    
    /* На мобильных НЕ фиксируем всю шапку */
    .sticky-header-wrapper.is-fixed {
        position: relative;
    }
    
    .header-placeholder.is-active {
        display: none;
    }
    
    /* Скрываем десктопные actions на мобильных */
    .header-actions-desktop {
        display: none;
    }
    
    /* Скрываем разделитель и селектор города на мобильных */
    .header-divider,
    .city-selector {
        display: none;
    }
    
    /* Шапка становится единым flex-контейнером */
    .site-header {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        gap: 10px;
    }
    
    /* Разворачиваем вложенные контейнеры */
    .header-top,
    .header-top .header-content,
    .header-search-row,
    .header-search-content {
        display: contents;
    }
    
    /* Логотип компактный */
    .header-logo-city {
        flex-shrink: 0;
        order: 1;
    }
    
    .logo {
        max-width: 80px;
    }
    
    .logo img,
    .logo svg {
        max-height: 28px;
        width: auto;
    }
    
    /* Кнопка каталога - только иконка */
    .catalog-dropdown {
        order: 2;
        flex-shrink: 0;
    }
    
    .btn-catalog span {
        display: none;
    }
    
    .btn-catalog {
        padding: 10px 12px;
        min-width: auto;
    }
    
    /* Поиск занимает оставшееся место */
    .search-box {
        order: 3;
        flex: 1;
        min-width: 0;
    }
    
    /* Фиксированная шапка при скролле */
    .header-search-row.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 999;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: #fff;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .search-row-placeholder.is-active {
        display: block;
    }
    
    .logo-text {
        display: none;
    }
    
    .action-text {
        display: none;
    }
    
    .cart-sum {
        display: none;
    }
    
    .header-actions {
        gap: 16px;
    }
    
    /* Overlay для затемнения фона - показываем только на мобильных */
    .catalog-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1000; /* Между мобильной навигацией и меню каталога */
    }
    
    /* Скрываем мобильную навигацию при открытом меню каталога */
    body.catalog-menu-open .mobile-navbar {
        display: none !important;
    }
    
    .catalog-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Боковое меню каталога для мобильных */
    .catalog-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh; /* Динамическая высота viewport для мобильных браузеров */
        background: #ffffff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001; /* Выше мобильной навигации */
        overflow-y: auto;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0); /* Учитываем безопасную зону на устройствах с вырезом */
        border-radius: 0;
        box-sizing: border-box;
        min-width: auto;
    }
    
    .catalog-menu.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
    
    /* Заголовок меню с кнопкой закрытия - показываем только на мобильных */
    .catalog-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
        background: #ffffff;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .catalog-menu-title {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0;
    }
    
    .catalog-menu-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #6b7280;
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: background-color 0.2s ease;
    }
    
    .catalog-menu-close:hover {
        background-color: #f3f4f6;
    }
    
    .catalog-menu-close i {
        font-size: 20px;
    }
    
    /* Контент меню */
    .catalog-menu-content {
        padding: 20px;
        padding-bottom: 120px; /* Отступ снизу, чтобы не перекрывалось интерфейсом браузера */
    }
    
    /* Предотвращаем прокрутку страницы при открытом меню */
    body.catalog-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .catalog-column {
        border-bottom: 1px solid #f3f4f6;
        padding: 16px 0;
    }
    
    .catalog-column:last-child {
        border-bottom: none;
    }
    
    .catalog-column h4 {
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 600;
    }
    
    .catalog-column h4 a {
        color: #1a1a1a;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .catalog-column h4 a::after {
        content: '\203A';
        font-size: 20px;
        color: #9ca3af;
        margin-left: 8px;
    }
    
    .catalog-column ul {
        margin: 0;
        padding-left: 16px;
    }
    
    .catalog-column ul li {
        margin-bottom: 10px;
    }
    
    .catalog-column ul li a {
        font-size: 14px;
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    .catalog-column ul li a:hover {
        color: #E31E24;
    }
    
    .slider-container {
        height: 300px; /* Фиксированная высота для мобильных */
        border-radius: 8px; /* Меньше скругление на мобильных */
    }
    
    .slider-section {
        padding: 0px 5px; /* Отступы на мобильных */
        margin-bottom: 0;
    }
    
    .slide-image {
        border-radius: 8px;
    }
    
    .slide-title {
        font-size: 28px;
    }
    
    .slide-subtitle {
        font-size: 16px;
    }
    
    .slider-nav {
        width: 40px;
        height: 40px;
    }
    
    .slider-nav.prev {
        left: 15px;
    }
    
    .slider-nav.next {
        right: 15px;
    }
    
    .categories-section,
    .products-section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 28px;
        margin-bottom: 32px;
    }
    
    .categories-grid,
    .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .product-card {
        max-width: 100%;
    }
    
    .product-image {
        padding-top: 100%; /* Квадратный формат */
    }
    
    .product-info {
        padding: 20px 22px 22px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Малые мобильные устройства (до 375px) */
@media (max-width: 375px) {
    .btn-catalog {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .btn-catalog:hover {
        transform: translateY(-1px);
    }
    
    .search-input {
        padding: 10px 40px 10px 12px;
        font-size: 13px;
    }
    
    .slide-title {
        font-size: 24px;
    }
    
    .slide-subtitle {
        font-size: 14px;
    }
    
    .btn-cart,
    .product-status {
        padding: 11px 8px;
        font-size: 11px; /* Уменьшен размер шрифта для маленьких экранов */
        min-height: 42px;
    }
    
    .product-info {
        padding: 12px 14px 14px;
        gap: 8px;
    }
    
    .product-name {
        font-size: 13px;
        min-height: 38px;
    }
    
    .price-current {
        font-size: 17px;
    }
    
    .price-old {
        font-size: 12px;
    }
    
    .product-image {
        padding-top: 100%; /* Квадратный формат */
    }
}


/* ============================================
   СТРАНИЦА КОРЗИНЫ (sale.basket.basket)
   ============================================ */

/* ============================================
   ОФОРМЛЕНИЕ ЗАКАЗА
   ============================================ */
.checkout-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px 60px;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 32px;
}

.checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.checkout-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    margin: 0;
}

.checkout-summary-card {
    background: var(--color-white, #ffffff);
    border-radius: 20px;
    border: 1px solid rgba(209, 213, 219, 0.7);
    box-shadow: 0 32px 60px rgba(15, 23, 42, 0.08);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checkout-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
    margin: 0 0 16px;
}

.checkout-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(248, 250, 252, 0.9);
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.7);
}

.checkout-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.checkout-item-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #111827);
    line-height: 1.4;
}

.checkout-item-qty {
    font-size: 13px;
    font-weight: 500;
    color: rgba(107, 114, 128, 0.9);
}

.checkout-item-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text, #111827);
}

.checkout-summary-footer {
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    padding-top: 16px;
    display: grid;
    gap: 12px;
}

.checkout-summary-footer > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: rgba(107, 114, 128, 0.95);
}

.checkout-summary-footer strong {
    color: var(--color-text, #111827);
    font-weight: 700;
}

.checkout-summary-total span {
    font-size: 18px;
    font-weight: 600;
}

.checkout-summary-total strong {
    font-size: 22px;
    color: var(--color-primary, rgba(194, 31, 57, 1));
}

.checkout-alert {
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1px solid transparent;
    font-size: 15px;
    line-height: 1.5;
}

.checkout-alert--error {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(239, 68, 68, 0.4);
    color: rgba(185, 28, 28, 1);
}

.checkout-alert--success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.35);
    color: rgba(14, 116, 144, 1);
}

.checkout-form-wrapper {
    background: var(--color-white, #ffffff);
    border-radius: 20px;
    border: 1px solid rgba(209, 213, 219, 0.7);
    box-shadow: 0 32px 60px rgba(15, 23, 42, 0.08);
    padding: 32px;
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.checkout-segment {
    display: flex;
    flex-direction: column;
}

.checkout-radio-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-radio-group--inline {
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
}

.checkout-radio {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #111827);
    cursor: pointer;
}

.checkout-radio input[type="radio"] {
    width: 18px;
    height: 18px;
}

.checkout-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(209, 213, 219, 0.6);
    background: rgba(248, 250, 252, 0.6);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.checkout-card input[type="radio"] {
    transform: translateY(4px);
}

.checkout-card strong {
    display: block;
    font-size: 16px;
    color: var(--color-text, #111827);
}

.checkout-card small {
    display: block;
    font-size: 13px;
    color: rgba(107, 114, 128, 0.95);
    margin-top: 4px;
}

.checkout-card:hover {
    border-color: var(--color-primary, rgba(194, 31, 57, 1));
    box-shadow: 0 16px 35px rgba(194, 31, 57, 0.15);
    background: rgba(236, 253, 245, 0.6);
}

.checkout-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.checkout-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: rgba(75, 85, 99, 0.95);
}

.checkout-field--full {
    grid-column: 1 / -1;
}

.checkout-field input,
.checkout-field textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text, #111827);
    background: var(--color-white, #ffffff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-field input:focus,
.checkout-field textarea:focus {
    outline: none;
    border-color: var(--color-primary, rgba(194, 31, 57, 1));
    box-shadow: 0 0 0 3px rgba(194, 31, 57, 0.2);
}

.checkout-field textarea {
    resize: vertical;
    min-height: 110px;
}

.checkout-submit {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-submit .btn {
    width: 100%;
    padding: 16px 22px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
}

.checkout-note {
    font-size: 13px;
    color: rgba(107, 114, 128, 0.9);
    margin: 0;
}

.checkout-hidden {
    display: none !important;
}

.checkout-segment[data-delivery-fields="city"] .checkout-field span {
    font-weight: 600;
}

/* Мобильная кнопка скрыта по умолчанию */
.checkout-submit--mobile {
    display: none;
}

@media (max-width: 1024px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    .checkout-form-wrapper {
        order: 1;
    }

    .checkout-summary {
        order: 2;
    }

    .checkout-submit--mobile {
        display: block;
        order: 3;
    }

    .checkout-submit--desktop {
        display: none;
    }
}

@media (max-width: 768px) {
    .checkout-page {
        padding: 24px 12px 48px;
    }

    .checkout-title {
        font-size: 28px;
    }

    .checkout-form-wrapper,
    .checkout-summary-card {
        padding: 20px;
        border-radius: 16px;
    }

    .checkout-field-grid {
        grid-template-columns: 1fr;
    }

    .checkout-radio-group--inline {
        flex-direction: column;
    }
}


.basket-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.basket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-border, rgba(209, 213, 219, 1));
}

.basket-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    margin: 0;
    line-height: 1.2;
}

.basket-summary {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-secondary, #4a5568);
}

.basket-items-count {
    font-weight: 500;
}

.basket-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.basket-items {
    background: var(--color-white, #ffffff);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border, rgba(209, 213, 219, 1));
}

.basket-items-list {
    margin-bottom: 24px;
}

.basket-item {
    display: grid;
    grid-template-columns: 120px 1fr 150px 120px;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border, rgba(209, 213, 219, 1));
    position: relative;
}

.basket-item:last-child {
    border-bottom: none;
}

.basket-item-image {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface, #f9fafb);
    border: 1px solid var(--color-border, rgba(209, 213, 219, 1));
    flex-shrink: 0;
}

.basket-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.basket-item-info {
    min-width: 0;
}

.basket-item-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.basket-item-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.basket-item-name a:hover {
    color: var(--color-primary, rgba(194, 31, 57, 1));
}

.basket-item-props {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.basket-item-prop {
    font-size: var(--font-size-sm, 12px);
    color: var(--color-text-secondary, #4a5568);
    background: var(--color-secondary, rgba(229, 231, 235, 1));
    padding: 4px 10px;
    border-radius: 6px;
}

.basket-item-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.basket-item-price-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
}

.basket-item-price-label {
    font-size: var(--font-size-sm, 12px);
    color: var(--color-text-secondary, #4a5568);
}

.basket-item-quantity {
    display: flex;
    justify-content: center;
}

.basket-item-sum {
    text-align: right;
}

.basket-item-sum-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary, rgba(194, 31, 57, 1));
}

.basket-item-actions {
    position: absolute;
    top: 24px;
    right: 0;
    z-index: 10;
}

.basket-item-remove {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.basket-item-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

.basket-item-remove:active {
    transform: scale(0.95);
}

.basket-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, rgba(209, 213, 219, 1));
}

.basket-sidebar {
    position: sticky;
    top: 20px;
}

.basket-order-summary {
    background: var(--color-white, #ffffff);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border, rgba(209, 213, 219, 1));
}

.basket-order-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-border, rgba(209, 213, 219, 1));
}

.basket-order-details {
    margin-bottom: 20px;
}

.basket-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: var(--font-size-base, 14px);
}

.basket-order-label {
    color: var(--color-text-secondary, #4a5568);
}

.basket-order-value {
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
}

.basket-order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-top: 20px;
    border-top: 2px solid var(--color-border, rgba(209, 213, 219, 1));
}

.basket-order-total-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
}

.basket-order-total-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary, rgba(194, 31, 57, 1));
}

.btn-block {
    width: 100%;
    display: block;
}

/* Пустая корзина */
.basket-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 60px 20px;
}

.basket-empty-content {
    text-align: center;
    max-width: 500px;
}

.basket-empty-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
    color: var(--color-text-secondary, #4a5568);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.basket-empty-icon svg {
    width: 100%;
    height: 100%;
}

.basket-empty-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    margin: 0 0 16px 0;
}

.basket-empty-text {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-secondary, #4a5568);
    margin: 0 0 32px 0;
    line-height: 1.6;
}

/* Адаптивность для корзины */
@media (max-width: 1024px) {
    .basket-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .basket-sidebar {
        position: static;
    }
    
    .basket-item {
        grid-template-columns: 100px 1fr;
        gap: 16px;
    }
    
    .basket-item-image {
        width: 100px;
        height: 100px;
    }
    
    .basket-item-quantity,
    .basket-item-sum {
        grid-column: 1 / -1;
        margin-top: 12px;
    }
    
    .basket-item-quantity {
        justify-content: flex-start;
    }
    
    .basket-item-sum {
        text-align: left;
    }
    
    .basket-item-actions {
        position: absolute;
        top: 16px;
        right: 0;
    }
}

@media (max-width: 768px) {
    .basket-page {
        padding: 20px 16px;
    }
    
    .basket-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .basket-title {
        font-size: 28px;
    }
    
    .basket-items {
        padding: 16px;
    }
    
    .basket-item {
        grid-template-columns: 80px 1fr;
        padding: 16px 0;
        position: relative;
    }
    
    .basket-item-image {
        width: 80px;
        height: 80px;
    }
    
    .basket-item-name {
        font-size: 16px;
    }
    
    .basket-item-actions {
        top: 12px;
        right: 0;
    }
    
    .basket-item-remove {
        width: 36px;
        height: 36px;
    }
    
    .basket-order-summary {
        padding: 20px;
    }
    
    .basket-order-title {
        font-size: 20px;
    }
    
    .basket-order-total-value {
        font-size: 24px;
    }
    
    .basket-empty {
        min-height: 400px;
        padding: 40px 20px;
    }
    
    .basket-empty-icon {
        width: 80px;
        height: 80px;
    }
    
    .basket-empty-title {
        font-size: 24px;
    }
}

/* Кнопка удаления/отмены (Danger) */
.personal-profile-page button.btn-danger,
.personal-profile-page .btn-danger,
.personal-profile-page input[type="button"].btn-danger,
.personal-profile-page .bx-button.bx-btn-danger,
.personal-profile-page .bx-btn-danger {
    background: linear-gradient(135deg, var(--color-error, rgba(239, 68, 68, 1)) 0%, rgba(220, 38, 38, 1) 100%);
    color: var(--color-white, #ffffff);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.personal-profile-page button.btn-danger:hover,
.personal-profile-page .btn-danger:hover,
.personal-profile-page input[type="button"].btn-danger:hover,
.personal-profile-page .bx-button.bx-btn-danger:hover,
.personal-profile-page .bx-btn-danger:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 1) 0%, rgba(185, 28, 28, 1) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

/* Кнопка успеха (Success) */
.personal-profile-page button.btn-success,
.personal-profile-page .btn-success,
.personal-profile-page input[type="submit"].btn-success,
.personal-profile-page .bx-button.bx-btn-success,
.personal-profile-page .bx-btn-success {
    background: linear-gradient(135deg, var(--color-success, rgba(34, 197, 94, 1)) 0%, rgba(22, 163, 74, 1) 100%);
    color: var(--color-white, #ffffff);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.personal-profile-page button.btn-success:hover,
.personal-profile-page .btn-success:hover,
.personal-profile-page input[type="submit"].btn-success:hover,
.personal-profile-page .bx-button.bx-btn-success:hover,
.personal-profile-page .bx-btn-success:hover {
    background: linear-gradient(135deg, rgba(22, 163, 74, 1) 0%, rgba(21, 128, 61, 1) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}

/* Маленькая кнопка */
.personal-profile-page button.btn-sm,
.personal-profile-page .btn-sm,
.personal-profile-page input[type="submit"].btn-sm,
.personal-profile-page .bx-button.bx-btn-sm,
.personal-profile-page .bx-btn-sm {
    padding: 10px 20px;
    font-size: var(--font-size-sm, 12px);
    border-radius: 8px;
}

/* Большая кнопка */
.personal-profile-page button.btn-lg,
.personal-profile-page .btn-lg,
.personal-profile-page input[type="submit"].btn-lg,
.personal-profile-page .bx-button.bx-btn-lg,
.personal-profile-page .bx-btn-lg {
    padding: 18px 36px;
    font-size: var(--font-size-lg, 16px);
    border-radius: 16px;
}

/* Полная ширина */
.personal-profile-page button.btn-block,
.personal-profile-page .btn-block,
.personal-profile-page input[type="submit"].btn-block,
.personal-profile-page .bx-button.bx-btn-block,
.personal-profile-page .bx-btn-block {
    width: 100%;
}

/* Отключенная кнопка */
.personal-profile-page button:disabled,
.personal-profile-page .btn:disabled,
.personal-profile-page input[type="submit"]:disabled,
.personal-profile-page input[type="button"]:disabled,
.personal-profile-page .bx-button:disabled,
.personal-profile-page .bx-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Фокус для доступности */
.personal-profile-page button:focus-visible,
.personal-profile-page .btn:focus-visible,
.personal-profile-page input[type="submit"]:focus-visible,
.personal-profile-page input[type="button"]:focus-visible,
.personal-profile-page .bx-button:focus-visible,
.personal-profile-page .bx-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(194, 31, 57, 0.3), 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Специфичные стили для компонентов Bitrix на странице профиля */
.personal-profile-page .bx-button,
.personal-profile-page .bx-btn {
    min-width: 120px;
}

/* Кнопки в формах профиля */
.personal-profile-page form button,
.personal-profile-page form input[type="submit"],
.personal-profile-page form .bx-button {
    margin-top: 16px;
    margin-right: 12px;
}

.personal-profile-page form button:last-child,
.personal-profile-page form input[type="submit"]:last-child,
.personal-profile-page form .bx-button:last-child {
    margin-right: 0;
}

/* Группа кнопок */
.personal-profile-page .btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.personal-profile-page .btn-group button,
.personal-profile-page .btn-group .btn,
.personal-profile-page .btn-group input[type="submit"],
.personal-profile-page .btn-group .bx-button {
    margin: 0;
    flex: 1;
    min-width: 120px;
}

/* Универсальные стили для кнопок Bitrix на страницах профиля (без класса .personal-profile-page) */
.personal-area button,
.personal-area .btn,
.personal-area input[type="submit"],
.personal-area input[type="button"],
.personal-area .bx-button,
.personal-area .bx-btn,
.personal-area a.bx-button,
.personal-area a.bx-btn,
.sale-personal-section button,
.sale-personal-section .btn,
.sale-personal-section input[type="submit"],
.sale-personal-section input[type="button"],
.sale-personal-section .bx-button,
.sale-personal-section .bx-btn,
.sale-personal-section a.bx-button,
.sale-personal-section a.bx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.5;
    text-decoration: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 120px;
}

.personal-area button:hover,
.personal-area .btn:hover,
.personal-area input[type="submit"]:hover,
.personal-area input[type="button"]:hover,
.personal-area .bx-button:hover,
.personal-area .bx-btn:hover,
.personal-area a.bx-button:hover,
.personal-area a.bx-btn:hover,
.sale-personal-section button:hover,
.sale-personal-section .btn:hover,
.sale-personal-section input[type="submit"]:hover,
.sale-personal-section input[type="button"]:hover,
.sale-personal-section .bx-button:hover,
.sale-personal-section .bx-btn:hover,
.sale-personal-section a.bx-button:hover,
.sale-personal-section a.bx-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.personal-area button:active,
.personal-area .btn:active,
.personal-area input[type="submit"]:active,
.personal-area input[type="button"]:active,
.personal-area .bx-button:active,
.personal-area .bx-btn:active,
.personal-area a.bx-button:active,
.personal-area a.bx-btn:active,
.sale-personal-section button:active,
.sale-personal-section .btn:active,
.sale-personal-section input[type="submit"]:active,
.sale-personal-section input[type="button"]:active,
.sale-personal-section .bx-button:active,
.sale-personal-section .bx-btn:active,
.sale-personal-section a.bx-button:active,
.sale-personal-section a.bx-btn:active {
    transform: translateY(0);
}

/* Основные кнопки Bitrix (по умолчанию) */
.personal-area .bx-button,
.personal-area .bx-btn,
.sale-personal-section .bx-button,
.sale-personal-section .bx-btn {
    background: linear-gradient(135deg, var(--color-primary, rgba(194, 31, 57, 1)) 0%, var(--color-primary-hover, rgba(165, 26, 48, 1)) 100%);
    color: var(--color-white, #ffffff);
    box-shadow: 0 4px 16px rgba(194, 31, 57, 0.3);
}

.personal-area .bx-button:hover,
.personal-area .bx-btn:hover,
.sale-personal-section .bx-button:hover,
.sale-personal-section .bx-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-hover, rgba(165, 26, 48, 1)) 0%, var(--color-primary-active, rgba(135, 21, 39, 1)) 100%);
    box-shadow: 0 8px 24px rgba(194, 31, 57, 0.4);
}

/* Универсальные стили для всех кнопок Bitrix на страницах личного кабинета */
body.personal button,
body.personal .btn,
body.personal input[type="submit"],
body.personal input[type="button"],
body.personal .bx-button,
body.personal .bx-btn,
body.personal a.bx-button,
body.personal a.bx-btn,
.personal button,
.personal .btn,
.personal input[type="submit"],
.personal input[type="button"],
.personal .bx-button,
.personal .bx-btn,
.personal a.bx-button,
.personal a.bx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.5;
    text-decoration: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 120px;
}

body.personal button:hover,
body.personal .btn:hover,
body.personal input[type="submit"]:hover,
body.personal input[type="button"]:hover,
body.personal .bx-button:hover,
body.personal .bx-btn:hover,
body.personal a.bx-button:hover,
body.personal a.bx-btn:hover,
.personal button:hover,
.personal .btn:hover,
.personal input[type="submit"]:hover,
.personal input[type="button"]:hover,
.personal .bx-button:hover,
.personal .bx-btn:hover,
.personal a.bx-button:hover,
.personal a.bx-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body.personal .bx-button,
body.personal .bx-btn,
.personal .bx-button,
.personal .bx-btn {
    background: linear-gradient(135deg, var(--color-primary, rgba(194, 31, 57, 1)) 0%, var(--color-primary-hover, rgba(165, 26, 48, 1)) 100%);
    color: var(--color-white, #ffffff);
    box-shadow: 0 4px 16px rgba(194, 31, 57, 0.3);
}

body.personal .bx-button:hover,
body.personal .bx-btn:hover,
.personal .bx-button:hover,
.personal .bx-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-hover, rgba(165, 26, 48, 1)) 0%, var(--color-primary-active, rgba(135, 21, 39, 1)) 100%);
    box-shadow: 0 8px 24px rgba(194, 31, 57, 0.4);
}

/* ============================================
   МЕНЮ ЛИЧНОГО КАБИНЕТА (sale.personal.section)
   ============================================ */

.personal-section-menu {
    margin-bottom: 40px;
    background: var(--color-white, #ffffff);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border, rgba(209, 213, 219, 1));
}

.personal-nav {
    width: 100%;
}

.personal-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.personal-nav-item {
    flex: 1;
    min-width: 0;
}

.personal-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    text-decoration: none;
    color: var(--color-text, #1a1a1a);
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-medium, 500);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
    border: 2px solid transparent;
}

.personal-nav-link:hover {
    background: var(--color-secondary, rgba(229, 231, 235, 1));
    color: var(--color-primary, rgba(194, 31, 57, 1));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.personal-nav-item.active .personal-nav-link {
    background: linear-gradient(135deg, var(--color-primary, rgba(194, 31, 57, 1)) 0%, var(--color-primary-hover, rgba(165, 26, 48, 1)) 100%);
    color: var(--color-white, #ffffff);
    font-weight: var(--font-weight-semibold, 600);
    box-shadow: 0 4px 16px rgba(194, 31, 57, 0.3);
    border-color: transparent;
}

.personal-nav-item.active .personal-nav-link:hover {
    background: linear-gradient(135deg, var(--color-primary-hover, rgba(165, 26, 48, 1)) 0%, var(--color-primary-active, rgba(135, 21, 39, 1)) 100%);
    box-shadow: 0 6px 20px rgba(194, 31, 57, 0.4);
    transform: translateY(-2px);
}

.personal-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.personal-nav-link:hover .personal-nav-icon {
    transform: scale(1.1);
}

.personal-nav-item.active .personal-nav-icon {
    color: var(--color-white, #ffffff);
}

.personal-nav-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.personal-nav-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--color-white, #ffffff);
    border-radius: 50%;
    opacity: 0.8;
}

/* Адаптивность для меню личного кабинета */
@media (max-width: 1024px) {
    .personal-nav-list {
        flex-direction: column;
        gap: 4px;
    }
    
    .personal-nav-item {
        width: 100%;
    }
    
    .personal-nav-link {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .personal-section-menu {
        padding: 4px;
        border-radius: 12px;
    }
    
    .personal-nav-link {
        padding: 14px 16px;
        font-size: var(--font-size-sm, 12px);
    }
    
    .personal-nav-icon {
        width: 20px;
        height: 20px;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .personal-profile-page button,
    .personal-profile-page .btn,
    .personal-profile-page input[type="submit"],
    .personal-profile-page input[type="button"],
    .personal-profile-page .bx-button,
    .personal-profile-page .bx-btn,
    .personal-area button,
    .personal-area .btn,
    .personal-area input[type="submit"],
    .personal-area input[type="button"],
    .personal-area .bx-button,
    .personal-area .bx-btn,
    .sale-personal-section button,
    .sale-personal-section .btn,
    .sale-personal-section input[type="submit"],
    .sale-personal-section input[type="button"],
    .sale-personal-section .bx-button,
    .sale-personal-section .bx-btn {
        width: 100%;
        margin-bottom: 12px;
    }
    
    .personal-profile-page .btn-group,
    .personal-area .btn-group,
    .sale-personal-section .btn-group {
        flex-direction: column;
    }
    
    .personal-profile-page .btn-group button,
    .personal-profile-page .btn-group .btn,
    .personal-profile-page .btn-group input[type="submit"],
    .personal-profile-page .btn-group .bx-button,
    .personal-area .btn-group button,
    .personal-area .btn-group .btn,
    .personal-area .btn-group input[type="submit"],
    .personal-area .btn-group .bx-button,
    .sale-personal-section .btn-group button,
    .sale-personal-section .btn-group .btn,
    .sale-personal-section .btn-group input[type="submit"],
    .sale-personal-section .btn-group .bx-button {
        width: 100%;
    }
}


/* ===================================================================================
   BREADCRUMB (Хлебные крошки)
   =================================================================================== */

.breadcrumb-nav {
    margin-bottom: 16px;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: var(--font-size-sm, 12px);
    line-height: 1.5;
}

.breadcrumb-list li {
    list-style: none !important;
    list-style-type: none !important;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    color: #4a5568;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
    color: var(--color-primary, var(--color-teal-500));
    text-decoration: underline;
}

.breadcrumb-link:focus {
    outline: 2px solid var(--color-primary, var(--color-teal-500));
    outline-offset: 2px;
    border-radius: 2px;
}

.breadcrumb-separator {
    display: flex;
    align-items: center;
    color: #718096;
    margin: 0 4px;
}

.breadcrumb-separator svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.breadcrumb-item--current {
    color: var(--color-text, #1a1a1a);
}

.breadcrumb-current {
    color: var(--color-text, #1a1a1a);
    font-weight: var(--font-weight-medium, 500);
}

.breadcrumb-item--ellipsis,
.breadcrumb-separator--ellipsis {
    display: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    .breadcrumb-list {
        font-size: var(--font-size-xs, 11px);
        gap: 6px;
    }
    
    .breadcrumb-separator {
        margin: 0 2px;
    }
    
    .breadcrumb-separator svg {
        width: 10px;
        height: 10px;
    }

    /* На мобильных скрываем 3-й уровень цепочки разделов и показываем "...". */
    .breadcrumb-item--third-level,
    .breadcrumb-separator--third-level {
        display: none;
    }

    .breadcrumb-item--ellipsis,
    .breadcrumb-separator--ellipsis {
        display: flex;
        align-items: center;
        color: #718096;
    }
}

/* ============================================
   СТРАНИЦА КАТАЛОГА
   ============================================ */

.catalog-page {
    padding: 40px 0 60px;
    background-color: var(--color-white, #ffffff);
    min-height: 60vh;
}

.catalog-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Если фильтры отключены, используем одну колонку */
.catalog-container:has(.catalog-sidebar:empty),
.catalog-container:not(:has(.catalog-sidebar)) {
    grid-template-columns: 1fr;
}

/* =================================================================
   ФИЛЬТР КАТАЛОГА — Clean & Modern Design for ZETA
   ================================================================= */

/* Основной контейнер фильтра */
.catalog-filters {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* МАКСИМАЛЬНЫЙ СБРОС ВСЕХ СТИЛЕЙ BITRIX */
.catalog-filters,
.catalog-filters *,
.catalog-filters::before,
.catalog-filters::after,
.catalog-filters *::before,
.catalog-filters *::after {
    box-sizing: border-box !important;
}

/* Убираем ВСЕ фоны */
.catalog-filters .bx-filter-section,
.catalog-filters .bx-filter-parameters-box,
.catalog-filters .bx-filter-parameters-box-container,
.catalog-filters .bx-filter-container-modef,
.catalog-filters .bx-filter .bx-filter-section,
.catalog-filters .bx-filter .bx-filter-parameters-box {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* КРИТИЧНО: Убираем синий цвет у ВСЕХ ссылок */
.catalog-filters a[href],
.catalog-filters .bx-filter a[href],
.catalog-filters .bx-filter-parameters-box-title > a[href],
.catalog-filters .bx-filter-section a[href],
.catalog-filters .bx-filter .bx-filter-parameters-box-title a[href],
div.catalog-filters a,
div.catalog-filters div.bx-filter a {
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.catalog-filters a[href]:hover,
.catalog-filters .bx-filter a[href]:hover {
    color: #c21f39 !important;
}

/* Сайдбар с фильтрами */
.catalog-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
    height: fit-content;
}

.filters-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 20px 20px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

/* Обёртка фильтра */
.catalog-filters .bx-filter,
.catalog-filters form {
    padding: 0 20px 20px !important;
}

/* Скрыть лишний заголовок "Подбор параметров" */
.catalog-filters .bx-filter-title,
.catalog-filters .bx-filter > .bx-filter-title {
    display: none !important;
}

/* ===== ФИЛЬТР: Секции и аккордеоны ===== */
div.catalog-filters div.bx-filter div.bx-filter-section,
div.catalog-filters div.bx-filter div.bx-filter-parameters-box,
.catalog-filters .bx-filter .bx-filter-section,
.catalog-filters .bx-filter .bx-filter-parameters-box,
.catalog-filters .bx-filter > .bx-filter-section,
.catalog-filters .bx-filter > .bx-filter-parameters-box {
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

div.catalog-filters div.bx-filter div.bx-filter-section:last-child,
div.catalog-filters div.bx-filter div.bx-filter-parameters-box:last-of-type,
.catalog-filters .bx-filter .bx-filter-section:last-child,
.catalog-filters .bx-filter .bx-filter-parameters-box:last-of-type {
    border-bottom: none !important;
}

div.catalog-filters div.bx-filter div.bx-filter-section:first-child,
div.catalog-filters div.bx-filter div.bx-filter-parameters-box:first-child,
.catalog-filters .bx-filter .bx-filter-section:first-child,
.catalog-filters .bx-filter .bx-filter-parameters-box:first-child {
    border-top: none !important;
}

/* Заголовок секции (аккордеон) */
div.catalog-filters div.bx-filter div.bx-filter-parameters-box div.bx-filter-parameters-box-title,
div.catalog-filters div.bx-filter div.bx-filter-parameters-box div.bx-filter-parameters-box-title a,
div.catalog-filters div.bx-filter div.bx-filter-parameters-box div.bx-filter-parameters-box-title > a,
div.catalog-filters div.bx-filter div.bx-filter-section div.bx-filter-parameters-box-title,
.catalog-filters .bx-filter .bx-filter-parameters-box-title,
.catalog-filters .bx-filter .bx-filter-parameters-box-title a,
.catalog-filters .bx-filter .bx-filter-parameters-box-title > a,
.catalog-filters .bx-filter .bx-filter-parameters-box > .bx-filter-parameters-box-title,
.catalog-filters .bx-filter .bx-filter-parameters-box .bx-filter-parameters-box-title,
.catalog-filters .bx-filter-section .bx-filter-parameters-box-title {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color 0.2s !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
}

div.catalog-filters div.bx-filter div.bx-filter-parameters-box-title:hover,
div.catalog-filters div.bx-filter div.bx-filter-parameters-box-title a:hover,
.catalog-filters .bx-filter .bx-filter-parameters-box-title:hover,
.catalog-filters .bx-filter .bx-filter-parameters-box-title a:hover,
.catalog-filters .bx-filter .bx-filter-parameters-box-title > a:hover {
    color: #c21f39 !important;
}

/* Стрелка для аккордеона */
div.catalog-filters div.bx-filter div.bx-filter-parameters-box div.bx-filter-parameters-box-title::after,
div.catalog-filters div.bx-filter div.bx-filter-section div.bx-filter-parameters-box-title::after,
.catalog-filters .bx-filter .bx-filter-parameters-box-title::after,
.catalog-filters .bx-filter .bx-filter-parameters-box > .bx-filter-parameters-box-title::after,
.catalog-filters .bx-filter-section .bx-filter-parameters-box-title::after {
    content: '▼' !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    color: #9ca3af !important;
    font-size: 10px !important;
    transition: transform 0.25s ease !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
}

/* Открытый аккордеон */
div.catalog-filters div.bx-filter div.bx-filter-parameters-box-title.bx-active::after,
.catalog-filters .bx-filter .bx-filter-parameters-box-title.bx-active::after,
.catalog-filters .bx-filter .bx-filter-parameters-box > .bx-filter-parameters-box-title.bx-active::after {
    transform: rotate(180deg) !important;
}

/* Контейнер значений фильтра */
.catalog-filters .bx-filter .bx-filter-parameters-box-container,
.catalog-filters .bx-filter .bx-filter-parameters-box > .bx-filter-parameters-box-container {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.catalog-filters .bx-filter .bx-filter-parameters-box-title.bx-active + .bx-filter-parameters-box-container,
.catalog-filters .bx-filter .bx-filter-parameters-box > .bx-filter-parameters-box-title.bx-active + .bx-filter-parameters-box-container {
    max-height: 800px !important;
    opacity: 1 !important;
    padding-bottom: 12px !important;
    background: transparent !important;
}

/* Открыть первые 3 секции по умолчанию */
.catalog-filters .bx-filter .bx-filter-parameters-box:nth-child(-n+3) .bx-filter-parameters-box-title::after {
    transform: rotate(180deg) !important;
}

.catalog-filters .bx-filter .bx-filter-parameters-box:nth-child(-n+3) .bx-filter-parameters-box-container {
    max-height: 800px !important;
    opacity: 1 !important;
    padding-bottom: 12px !important;
}

/* ===== ФИЛЬТР: Чекбоксы и значения ===== */
.catalog-filters .bx-filter .bx-filter-input-checkbox,
.catalog-filters .bx-filter .bx-filter-input-radio,
.catalog-filters .bx-filter .bx-filter-param-label,
.catalog-filters .bx-filter-parameters-box-container .bx-filter-input-checkbox,
.catalog-filters .bx-filter-parameters-box-container .bx-filter-input-radio,
.catalog-filters .bx-filter-parameters-box-container label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    width: 100% !important;
}

.catalog-filters .bx-filter .bx-filter-input-checkbox:hover,
.catalog-filters .bx-filter .bx-filter-input-radio:hover,
.catalog-filters .bx-filter .bx-filter-param-label:hover {
    background: #f9fafb !important;
}

.catalog-filters .bx-filter input[type="checkbox"],
.catalog-filters .bx-filter input[type="radio"],
.catalog-filters .bx-filter-input-checkbox input[type="checkbox"],
.catalog-filters .bx-filter-input-radio input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: #c21f39 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    opacity: 1 !important;
}

.catalog-filters .bx-filter .bx-filter-param-text,
.catalog-filters .bx-filter-input-checkbox .bx-filter-param-text,
.catalog-filters .bx-filter-input-radio .bx-filter-param-text {
    flex: 1 !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.catalog-filters .bx-filter .bx-filter-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    background: #f3f4f6 !important;
    border-radius: 10px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* ===== ФИЛЬТР: Ползунок цены ===== */
.catalog-filters .bx-filter .bx-ui-slider-track-container {
    padding: 20px 0 16px !important;
    margin-bottom: 12px !important;
}

.catalog-filters .bx-filter .bx-ui-slider-track {
    position: relative !important;
    height: 4px !important;
    background: #e5e7eb !important;
    border-radius: 2px !important;
}

.catalog-filters .bx-filter .bx-ui-slider-range {
    position: absolute !important;
    height: 100% !important;
    background: #c21f39 !important;
    border-radius: 2px !important;
}

.catalog-filters .bx-filter .bx-ui-slider-handle {
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #fff !important;
    border: 3px solid #c21f39 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(194, 31, 57, 0.25) !important;
    cursor: pointer !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}

.catalog-filters .bx-filter .bx-ui-slider-handle:hover {
    transform: translate(-50%, -50%) scale(1.15) !important;
    box-shadow: 0 3px 12px rgba(194, 31, 57, 0.35) !important;
}

/* Поля ввода цены */
.catalog-filters .bx-filter .bx-filter-input-container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.catalog-filters .bx-filter .bx-filter-input-container input[type="text"],
.catalog-filters .bx-filter .bx-filter-input-container input[type="number"] {
    flex: 1 !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #111827 !important;
    background: #fff !important;
    text-align: center !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.catalog-filters .bx-filter .bx-filter-input-container input:focus {
    outline: none !important;
    border-color: #c21f39 !important;
    box-shadow: 0 0 0 3px rgba(194, 31, 57, 0.1) !important;
}

.catalog-filters .bx-filter .bx-filter-input-label {
    font-size: 13px !important;
    color: #9ca3af !important;
    white-space: nowrap !important;
}

/* ===== ФИЛЬТР: Кнопки применения и сброса ===== */
.catalog-filters .bx-filter .bx-filter-button-box {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f3f4f6 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.catalog-filters .bx-filter .bx-filter-button-box button[type="submit"],
.catalog-filters .bx-filter .bx-filter-button-box .btn-themes {
    width: 100% !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: none !important;
    border-radius: 10px !important;
    background: #c21f39 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
}

.catalog-filters .bx-filter .bx-filter-button-box button[type="submit"]:hover,
.catalog-filters .bx-filter .bx-filter-button-box .btn-themes:hover {
    background: #a51a30 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(194, 31, 57, 0.25) !important;
}

.catalog-filters .bx-filter .bx-filter-button-box a,
.catalog-filters .bx-filter .bx-filter-button-box [type="reset"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}

.catalog-filters .bx-filter .bx-filter-button-box a:hover,
.catalog-filters .bx-filter .bx-filter-button-box [type="reset"]:hover {
    border-color: #c21f39 !important;
    color: #c21f39 !important;
    background: #fef2f2 !important;
}

/* ===== ФИЛЬТР: Попап "Показать" ===== */
.catalog-filters .bx-filter .bx-filter-popup-result,
.catalog-filters .bx-filter #modef,
.catalog-filters #modef {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 10 !important;
    display: block !important;
}


.catalog-filters .bx-filter .bx-filter-popup-result .popup-result,
.catalog-filters .bx-filter #modef .popup-result,
.catalog-filters #modef a,
.catalog-filters .bx-filter-popup-result a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 24px !important;
    background: #c21f39 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(194, 31, 57, 0.45) !important;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
    border: none !important;
}

.catalog-filters .bx-filter .bx-filter-popup-result .popup-result:hover,
.catalog-filters #modef a:hover {
    background: #a51a30 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(194, 31, 57, 0.4) !important;
    color: #fff !important;
}

/* ===== ФИЛЬТР: Блок с количеством элементов ===== */
.catalog-filters .bx-filter-container-modef,
.catalog-filters .bx-filter .bx-filter-container-modef {
    padding: 16px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.catalog-filters .bx-filter-container-modef .bx-filter-block,
.catalog-filters .bx-filter .bx-filter-container-modef .bx-filter-block {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
}

.catalog-filters .bx-filter-container-modef .bx-filter-block strong,
.catalog-filters .bx-filter-container-modef strong {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* ===== ФИЛЬТР: Кнопка сброса ===== */
.catalog-filters .filter-reset-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important;
    margin-top: 12px !important;
    padding: 0 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}

.catalog-filters .filter-reset-btn:hover {
    border-color: #c21f39 !important;
    color: #c21f39 !important;
    background: #fef2f2 !important;
}

/* ===== ФИЛЬТР: Скрытие лишних таблиц Bitrix ===== */
.catalog-filters .bx-filter form > table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.catalog-filters .bx-filter form > table td {
    padding: 0 !important;
    border: none !important;
    vertical-align: top !important;
}

/* Убираем фон у секций старого фильтра */
.catalog-filters .bx-filter .bx-filter-block {
    background: transparent !important;
    border: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Кнопка "Установить фильтр" в старом компоненте */
.catalog-filters .bx-filter .bx-filter-button-box button,
.catalog-filters .bx-filter input[type="submit"],
.catalog-filters .bx-filter button[type="submit"] {
    width: 100% !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: none !important;
    border-radius: 10px !important;
    background: #c21f39 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
    margin-top: 20px !important;
}

.catalog-filters .bx-filter input[type="submit"]:hover,
.catalog-filters .bx-filter button[type="submit"]:hover {
    background: #a51a30 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(194, 31, 57, 0.25) !important;
}

/* Ссылки-заголовки делаем обычными заголовками */
.catalog-filters .bx-filter a.bx-filter-param-label,
.catalog-filters .bx-filter .bx-filter-block a {
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Перекрываем синий цвет из style.css Bitrix (.bx-filter .bx-filter-parameters-box-title span) */
.catalog-filters .bx-filter .bx-filter-parameters-box-title span,
.catalog-filters .bx-filter .bx-filter-parameters-box-title a span,
.catalog-filters .bx-filter .bx-filter-parameters-box-title > span {
    color: #111827 !important;
}
.catalog-filters .bx-filter .bx-filter-parameters-box-title span:hover,
.catalog-filters .bx-filter .bx-filter-parameters-box-title:hover span {
    color: #c21f39 !important;
}

/* Перекрываем синий у текста чекбоксов */
.catalog-filters .bx-filter .bx-filter-param-text,
.catalog-filters .bx-filter .bx-filter-param-text span,
.catalog-filters .bx-filter .bx-filter-input-checkbox .bx-filter-param-text,
.catalog-filters .bx-filter .bx-filter-input-radio .bx-filter-param-text {
    color: #374151 !important;
}

/* Перекрываем синий у ссылки "Показать N товаров" */
.catalog-filters .bx-filter .bx-filter-popup-result a {
    color: #fff !important;
}

/* Основной контент */
.catalog-content {
    min-width: 0;
}

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.catalog-title-section {
    flex: 1;
    min-width: 200px;
}

.catalog-title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.8px;
}

/* Сортировка */
.catalog-sort {
    display: flex;
    align-items: center;
    gap: 12px;
}

.catalog-sort .bx-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.catalog-sort select,
.catalog-sort .bx-sort-select,
.catalog-sort-select {
    padding: 12px 40px 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    min-width: 200px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    color: #374151;
    background-color: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.catalog-sort select:hover,
.catalog-sort .bx-sort-select:hover,
.catalog-sort-select:hover {
    border-color: #C21F39;
    background-color: #f9fafb;
}

.catalog-sort select:focus,
.catalog-sort .bx-sort-select:focus,
.catalog-sort-select:focus {
    outline: none;
    border-color: #C21F39;
    box-shadow: 0 0 0 3px rgba(194, 31, 57, 0.15);
}

/* Секция товаров (используется компонент catalog.section) */
.catalog-content .products-section {
    margin-top: 0;
    width: 100%;
}

/* Обертка для сетки товаров - переопределяем стили из основного шаблона */
.catalog-content .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    margin-top: 0;
    width: 100%;
}

@media (max-width: 991px) {
    .catalog-content .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .catalog-content .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* Пагинация */
/* =============================================
   MODERN ROUNDED PAGINATION
   ============================================= */

/* Обёртка пагинации */
.catalog-pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f8fafc;
    border-radius: 16px;
}

/* Контейнер навигации */
.pagination-modern {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Кнопки страниц - круглые */
.pagination-modern .pagination-page,
.pagination-modern .pagination-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    color: #64748b;
    background-color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Эффект наведения */
.pagination-modern .pagination-page:hover,
.pagination-modern .pagination-arrow:hover {
    transform: translateY(-2px);
    color: #C21F39;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

/* Активная страница */
.pagination-modern .pagination-page.active {
    background-color: #C21F39;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(194, 31, 57, 0.3);
    cursor: default;
}

.pagination-modern .pagination-page.active:hover {
    transform: none;
    color: #ffffff;
}

/* Стрелки */
.pagination-modern .pagination-arrow svg {
    width: 18px;
    height: 18px;
}

/* Многоточие */
.pagination-modern .pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    color: #94a3b8;
    font-weight: 600;
    font-size: 16px;
    user-select: none;
    letter-spacing: 1px;
}

/* Мобильная адаптация пагинации */
@media (max-width: 480px) {
    .catalog-pagination-wrapper {
        padding: 16px 12px;
        margin-top: 24px;
    }
    
    .pagination-modern {
        gap: 6px;
    }
    
    .pagination-modern .pagination-page,
    .pagination-modern .pagination-arrow {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }
    
    .pagination-modern .pagination-arrow svg {
        width: 18px;
        height: 18px;
    }
    
    .pagination-modern .pagination-dots {
        width: 24px;
    }
}

/* Скрываем старую пагинацию Bitrix */
.bx-pagination,
.bx-pagination-container,
.modern-page-navigation {
    display: none !important;
}

/* Стили для навигационных кнопок */
.bx-pagination li {
    list-style: none;
}

/* Контейнер пагинации (ul) */
.bx-pagination ul {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Кнопки Начало/Конец - делаем компактнее */
.bx-pagination a[href*="PAGEN_1=1"],
.bx-pagination a[href*="SHOWALL"] {
    padding: 0 12px;
    font-size: 13px;
    color: #6b7280;
    border-color: #e5e7eb;
}

.bx-pagination a[href*="PAGEN_1=1"]:hover,
.bx-pagination a[href*="SHOWALL"]:hover {
    color: #C21F39;
    border-color: #C21F39;
}

/* Активная страница выделение */
.bx-pagination span b,
.bx-pagination .bx-pagination-selected {
    background: linear-gradient(135deg, #C21F39 0%, #a51a30 100%) !important;
    color: #fff !important;
    border-color: #C21F39 !important;
    border-radius: 6px !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(194, 31, 57, 0.35);
}

/* Разделители */
.bx-pagination span:not(.bx-active):not([class]) {
    border: none;
    background: transparent;
    min-width: auto;
    padding: 0 4px;
    color: #9ca3af;
}

/* Похожие товары на странице товара */
.related-products-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border, #e5e5e5);
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    clear: both;
}

.related-products-section .section-title {
    font-size: var(--font-size-2xl, 22px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text, #333333);
    margin-bottom: 24px;
    text-align: left !important;
    padding: 0;
}

.related-products-section .products-grid {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .related-products-section .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .related-products-section .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Скрываем пагинацию в блоке похожих товаров */
.related-products-section .catalog-pagination-wrapper,
.related-products-section .bx-pagination,
.related-products-section .modern-pagination,
.related-products-section nav[aria-label*="навигация"],
.related-products-section .pagination {
    display: none !important;
}


/* Обработка ошибок компонентов */
.catalog-content .bx-errortext {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radius-base, 8px);
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #856404;
    font-size: var(--font-size-sm, 13px);
}

/* Адаптивность для страницы каталога */
@media (max-width: 991px) {
    .catalog-container {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    
    .catalog-sidebar {
        position: static;
        order: 2;
    }
    
    .catalog-content {
        order: 1;
    }
    
    .catalog-filters {
        position: relative;
    }
    
    .catalog-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .catalog-sort {
        width: 100%;
    }
    
    .catalog-sort select,
    .catalog-sort .bx-sort-select {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .catalog-page {
        padding: 20px 0 40px;
    }
    
    .catalog-container {
        padding: 0 16px;
        gap: 20px;
    }
    
    .catalog-title {
        font-size: var(--font-size-2xl, 20px);
    }
    
    .catalog-filters {
        padding: 16px;
    }
    
    .filters-title {
        font-size: var(--font-size-lg, 16px);
        margin-bottom: 16px;
    }
    
    .catalog-content .bx-pagination,
    .products-section .bx-pagination,
    .bx-pagination,
    .modern-page-navigation,
    .bx-pagination-container,
    .catalog-pagination-wrapper {
        margin-top: 24px;
        gap: 4px;
        padding: 16px 0;
    }
    
    .catalog-content .bx-pagination a,
    .catalog-content .bx-pagination span,
    .products-section .bx-pagination a,
    .products-section .bx-pagination span,
    .bx-pagination a,
    .bx-pagination span,
    .modern-page-navigation .nums a,
    .modern-page-navigation .nums span,
    .bx-pagination-container .nums a,
    .bx-pagination-container .nums span {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
        font-size: 14px;
        border-radius: 8px;
    }
    
    /* Компактные кнопки Пред/След на мобильных */
    .modern-page-navigation a,
    .bx-pagination-container a {
        padding: 0 12px;
        font-size: 13px;
    }
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.category-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.category-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
}

.category-info {
    padding: 20px;
    text-align: center;
}

.category-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333333;
}

.category-count {
    font-size: 14px;
    color: #4a5568;
}

.categories-more {
    margin-top: 24px;
    text-align: center;
}

.categories-more__link {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 8px;
    background: #007bff;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.categories-more__link:hover {
    background: #0056b3;
}

@media (max-width: 767px) {
    .slider-section {
        padding: 0px 5px 0px 5px; /* Отступы по бокам */
    }
    
    .slider-section .slider-container {
        width: 100%;
        height: 100%; /* Заполняет родительский контейнер */
    }

    .slider-container img,
    .slide-image {
        width: 100%;
        height: 100%; /* Заполняет контейнер полностью */
        object-fit: cover; /* Сохраняет пропорции изображения */
    }

    .categories-grid,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        justify-items: stretch;
    }

    .product-card,
    .category-card {
        width: 100%;
        max-width: none;
    }
    
    .product-image {
        padding-top: 100%; /* Квадратный формат */
    }
    
    .product-info {
        padding: 16px 18px 18px;
        gap: 12px;
    }
    
    .product-name {
        font-size: 15px;
        min-height: 45px;
    }
    
    .price-current {
        font-size: 20px;
    }
    
    .price-old {
        font-size: 14px;
    }
    
    .btn-cart,
    .product-status {
        padding: 12px 10px;
        font-size: 12px; /* Уменьшен размер шрифта для мобильных */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 44px;
        box-sizing: border-box;
    }
    
    .favorite-btn {
        width: 36px;
        height: 36px;
        top: 12px;
        right: 12px;
    }
    
    .product-card {
        min-width: 0;
    }
    
    .product-info {
        padding: 14px 16px 16px;
        gap: 10px;
        min-width: 0;
    }
    
    .product-name {
        font-size: 14px;
        min-height: 42px;
        word-break: break-word;
    }
    
    .price-current {
        font-size: 18px;
    }
    
    .price-old {
        font-size: 13px;
    }
    
    .product-price {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.test-mode-banner {
    width: 100%;
    background: #c52f41;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    box-sizing: border-box;
}

.basket-checkout-button {
    margin-top: 24px;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, rgba(0, 150, 199, 1) 0%, rgba(0, 204, 255, 1) 100%);
    box-shadow: 0 12px 24px rgba(0, 150, 199, 0.35);
    border-radius: 14px;
    color: #ffffff;
}

.basket-checkout-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 150, 199, 0.45);
}

.basket-checkout-button:active {
    transform: translateY(1px);
    box-shadow: 0 8px 18px rgba(0, 150, 199, 0.3);
}

.checkout-submit-button {
    margin-top: 8px;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, rgba(0, 150, 199, 1) 0%, rgba(0, 204, 255, 1) 100%);
    box-shadow: 0 12px 24px rgba(0, 150, 199, 0.35);
    border-radius: 14px;
    color: #ffffff;
}

.checkout-submit-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 150, 199, 0.45);
}

.checkout-submit-button:active {
    transform: translateY(1px);
    box-shadow: 0 8px 18px rgba(0, 150, 199, 0.3);
}

/* ============================================
   RESTORED CUSTOM STYLES
   ============================================ */


/* Fix for Catalog Mobile Grid - Force 2 columns */
@media (max-width: 767px) {
    .catalog-content .products-grid,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
    
    .product-card {
        width: 100% !important;
    }
}

/* Fix for Catalog Add to Cart Button Visibility */
.btn-cart {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .btn-cart {
        display: flex !important; 
        min-height: 44px;
    }
}


/* Checkout Card Icons */
.checkout-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(194, 31, 57, 0.1);
    border-radius: 10px;
    color: var(--color-primary, #C21F39);
    flex-shrink: 0;
}

.checkout-card-icon svg {
    width: 24px;
    height: 24px;
}

.checkout-card:hover .checkout-card-icon {
    background: var(--color-primary, #C21F39);
    color: #fff;
}


/* Checkout Page Icons */
.checkout-card .checkout-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 12px;
    color: var(--color-primary, rgba(194, 31, 57, 1));
    transition: color 0.2s ease;
}

.checkout-card {
    display: flex;
    align-items: flex-start;
}

.checkout-card span {
    display: flex;
    align-items: flex-start;
    flex: 1;
}

.checkout-card span strong {
    display: block;
    margin-bottom: 4px;
}

.checkout-card span small {
    display: block;
    color: var(--color-text-secondary, #666);
    font-size: 13px;
}

.checkout-card input[type='radio']:checked + span .checkout-icon {
    color: var(--color-primary, rgba(194, 31, 57, 1));
}

.checkout-card:hover .checkout-icon {
    color: var(--color-primary-hover, rgba(165, 26, 48, 1));
}


/* Updated Checkout Card Text Layout */
.checkout-card-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.checkout-card-text strong {
    display: block;
    margin-bottom: 4px;
}

.checkout-card-text small {
    display: block;
    color: var(--color-text-secondary, #666);
    font-size: 13px;
    line-height: 1.4;
    margin-top: 2px;
}


/* Hide slider navigation buttons on mobile - swipe only, but keep dots */
@media (max-width: 767px) {
    .slider-nav {
        display: none !important;
    }
    
    /* Ensure dots are visible on mobile */
    .slider-dots {
        display: flex !important;
    }
}


/* Improve dots visibility on mobile */
@media (max-width: 767px) {
    .slider-dots {
        bottom: 15px !important;
        gap: 10px !important;
    }
    
    .dot {
        width: 10px !important;
        height: 10px !important;
        background: rgba(255, 255, 255, 0.7) !important;
    }
    
    .dot.active {
        background: #ffffff !important;
        transform: scale(1.3) !important;
    }
}


/* ============================================
   MOBILE OVERFLOW PREVENTION
   ============================================ */

/* Prevent horizontal scrolling */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure images never overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile-specific overflow fixes */
@media (max-width: 767px) {
    /* Ensure containers don't overflow */
    .container,
    .catalog-container,
    .checkout-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Prevent text overflow */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Ensure inputs and selects don't overflow */
    input, select, textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Fix for flex containers */
    .d-flex, .flex-row {
        flex-wrap: wrap;
    }
    
    /* Ensure tables are scrollable if needed */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix catalog menu width on mobile (gentle approach) */
    .catalog-menu {
        max-width: calc(100vw - 20px) !important;
    }
}

/* ============================================
   ������� ��������
   ============================================ */

.slider-section {
    margin-top: 0;
    margin-bottom: 0px;
}

/* ������� �������� � ����������� �� ���������� */
.slider-desktop {
    display: block;
    padding: 20px 0px 0px 0px;
    background: #f8f9fa;
}

.slider-mobile {
    display: none;
}

/* На мобильных устройствах показываем мобильные баннеры, скрываем десктопные */
@media (max-width: 767px) {
    .slider-desktop {
        display: none;
    }

    .slider-mobile {
        display: block;
    }
}

.slider-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    touch-action: pan-y pinch-zoom;
}

/* ���������� ������ - fade �������� */
.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.slide.active {
    opacity: 1;
    pointer-events: auto;
}

.slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    user-select: none;
    -webkit-user-drag: none;
}

/* ��������� �������� */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: #333333;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slider-nav:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.slider-nav.prev {
    left: 30px;
}

.slider-nav.next {
    right: 30px;
}

/* ����� ��������� */
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active,
.dot:hover {
    background: #ffffff;
    transform: scale(1.2);
}

/* ============================================
   ��������� SWIPE-��������
   ============================================ */

@media (max-width: 767px) {
    .slider-container {
        height: 300px;
        border-radius: 8px;
    }

    /* Swipe-�������� ��� ��������� */
    .slider-wrapper {
        display: flex;
        flex-direction: row;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .slider-wrapper.no-transition {
        transition: none;
    }

    .slide {
        position: relative;
        flex-shrink: 0;
        width: 100%;
        opacity: 1;
        transition: none;
        pointer-events: auto;
    }

    .slide.active {
        opacity: 1;
    }

    .slide-image {
        border-radius: 8px;
    }

    /* �������� ������ ��������� �� ��������� */
    .slider-nav {
        display: none;
    }

    /* ����� ��������� �� ��������� */
    .slider-dots {
        bottom: 20px;
        gap: 8px;
    }

    .dot {
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.6);
    }

    .dot.active {
        background: #ffffff;
        width: 24px;
        border-radius: 4px;
    }
}
/* ============================================
   ����������� �������� ������
   ============================================ */

.products-section {
    padding: 80px 0;
    background: #ffffff;
}

.section-title {
    font-size: 42px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 56px;
    color: #1a1a1a;
    letter-spacing: -1px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
}

.product-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 64px rgba(194, 31, 57, 0.15),
                0 12px 32px rgba(194, 31, 57, 0.08);
    border-color: rgba(194, 31, 57, 0.3);
}

/* ������ ���������� */
.favorite-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #6b7280;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.favorite-btn:hover {
    background: #ffffff;
    color: #ef4444;
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25);
}

.favorite-btn.active {
    color: #ef4444;
    background: rgba(254, 226, 226, 0.95);
    border-color: rgba(239, 68, 68, 0.3);
}

.favorite-btn svg {
    width: 22px;
    height: 22px;
}

/* ����������� ������ */
.product-image {
    width: 100%;
    padding-top: 100%; /* Создает квадрат (aspect-ratio 1:1) */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
    border-radius: 10px;
}

/* Градиент убран для прозрачного фона и полного отображения товара */

.product-card:hover .product-image {
    transform: scale(1.08);
}

/* ���������� � ������ */
.product-info {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.product-name {
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
    transition: color 0.3s ease;
}

.product-name a {
    color: inherit;
    text-decoration: none;
}

.product-name a:hover {
    color: #C21F39;
}

/* ���� */
.product-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 36px;
}

.price-current {
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(135deg, #C21F39 0%, #C21F39 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.price-old {
    font-size: 16px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 500;
}

.price-request {
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
}

/* Стили кнопки корзины определены выше в основном блоке .btn-cart */

.product-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid #e5e7eb;
}

.product-status--out {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* ������������ */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .product-image {
        padding-top: 100%; /* Квадратный формат */
    }
}

@media (max-width: 767px) {
    .products-section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 32px;
        margin-bottom: 32px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .product-card {
        border-radius: 16px;
    }

    .product-image {
        padding-top: 100%; /* Квадратный формат */
    }

    .product-info {
        padding: 16px;
        gap: 12px;
    }

    .product-name {
        font-size: 15px;
        min-height: 42px;
    }

    .price-current {
        font-size: 22px;
    }

    .btn-cart {
        padding: 14px 20px;
        font-size: 13px;
    }

    .favorite-btn {
        width: 38px;
        height: 38px;
        top: 12px;
        right: 12px;
    }

    .favorite-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-image {
        padding-top: 100%; /* Квадратный формат */
    }
}
/* ============================================
   ����������� �������
   ============================================ */

/* Адаптивные размеры кнопок корзины убраны - используются стили из основного блока .btn-cart */

/* ============================================
   СТРАНИЦА КОНТАКТОВ
   ============================================ */

.contacts-page {
    min-height: 100vh;
    background: #f9fafb;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.contacts-hero {
    background: #1a1a1a;
    color: #ffffff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.contacts-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: 
        radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.1) 2px, transparent 0);
    background-size: 40px 40px;
    background-repeat: repeat;
}

.contacts-hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.contacts-hero-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #ffffff;
}

.contacts-hero-description {
    font-size: 18px;
    color: #cccccc;
    max-width: 700px;
    margin: 0 auto;
}

.contacts-main {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 32px;
    padding: 40px 0 60px;
}

.contacts-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: fit-content;
    position: sticky;
    top: 80px;
}

.contacts-store-list {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contacts-store-list-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a1a;
}

.contacts-store-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

.custom-scrollbar::-webkit-scrollbar,
.contacts-store-items::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.contacts-store-items::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.contacts-store-items::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
    transition: background 0.2s;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.contacts-store-items::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

.contacts-store-item {
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid transparent;
    background: #ffffff;
}

.contacts-store-item:hover {
    background: #f9fafb;
    border-left-color: #d1d5db;
    transform: translateX(2px);
}

.contacts-store-item.active {
    background: #ffffff;
    border-left-color: #ef4444;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateX(8px);
}

.contacts-store-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.contacts-store-item-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.contacts-store-item-indicator {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.5; 
        transform: scale(0.95);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.contacts-store-item-status {
    margin-bottom: 12px;
}

.contacts-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contacts-status-badge.status-open {
    background: #dcfce7;
    color: #166534;
}

.contacts-status-badge.status-closed {
    background: #f3f4f6;
    color: #6b7280;
}

.contacts-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.contacts-store-item-address,
.contacts-store-item-hours {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.contacts-store-item-hours {
    font-size: 12px;
    color: #9ca3af;
}

.contacts-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.contacts-common-phone {
    background: #fef2f2;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #fecaca;
}

.contacts-common-phone-title {
    font-size: 16px;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contacts-common-phone-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.contacts-common-phone-number {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
}

.contacts-common-phone-number {
    transition: color 0.2s ease;
}

.contacts-common-phone-number:hover {
    color: #ef4444;
}

.contacts-copy-btn {
    background: none;
    border: none;
    color: #d1d5db;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.contacts-copy-btn:hover {
    color: #6b7280;
}

.contacts-copy-btn.copied {
    color: #10b981;
}

.contacts-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contacts-map {
    background: #f1f5f9;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    height: 450px;
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.3s ease;
}

.contacts-map:hover {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

.contacts-map-background {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    pointer-events: none;
}

.contacts-map-label {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    border: 1px solid #e2e8f0;
    z-index: 20;
}

.contacts-map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.contacts-map-pin:not(.active) {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.9);
}

.contacts-map:hover .contacts-map-pin:not(.active) {
    transform: translate(-50%, -50%) scale(1);
}

.contacts-map-pin:hover:not(.active) {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1) !important;
    z-index: 12;
}

.contacts-map-pin.active {
    z-index: 15;
    transform: translate(-50%, -50%) scale(1.25);
}

.contacts-map-pin-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid;
    transition: all 0.3s;
}

.contacts-map-pin.active .contacts-map-pin-icon {
    background: #ef4444;
    border-color: #ffffff;
    color: #ffffff;
}

.contacts-map-pin:not(.active) .contacts-map-pin-icon {
    background: #ffffff;
    border-color: #fecaca;
    color: #ef4444;
}

.contacts-map-pin-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ef4444;
    opacity: 0.2;
    animation: ping 2s infinite;
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.contacts-map-pin-label {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.contacts-map-pin.active .contacts-map-pin-label {
    opacity: 1;
}

.contacts-store-detail {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    position: relative;
    overflow: hidden;
}

.contacts-store-detail::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    background: #fef2f2;
    border-radius: 0 0 0 100%;
    z-index: 0;
}

.contacts-store-detail-badge {
    position: relative;
    z-index: 1;
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.contacts-store-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.contacts-store-detail-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.contacts-store-detail-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

.contacts-store-detail-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px;
    border-radius: 8px;
    margin: -8px;
}

.contacts-store-detail-info-item:has(.contacts-store-detail-info-value[data-copy]) {
    cursor: pointer;
}

.contacts-store-detail-info-item:hover {
    background: #f9fafb;
}

.contacts-store-detail-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.contacts-store-detail-info-item:hover .contacts-store-detail-info-icon {
    color: #ef4444;
    background: #fef2f2;
    transform: scale(1.05);
}

.contacts-store-detail-info-content {
    flex: 1;
}

.contacts-store-detail-info-label {
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 4px 0;
}

.contacts-store-detail-info-value {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0;
}

.contacts-store-detail-info-helper {
    font-size: 12px;
    margin-top: 4px;
}

.contacts-store-detail-info-helper.status-open-text {
    color: #166534;
}

.contacts-store-detail-info-helper.status-closed-text {
    color: #dc2626;
}

.contacts-store-detail-description {
    color: #6b7280;
    margin: 0 0 24px 0;
    position: relative;
    z-index: 1;
}

.contacts-store-detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
    position: relative;
    z-index: 1;
}

.contacts-btn {
    flex: 1;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
}

.contacts-btn-primary {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.25);
}

.contacts-btn-primary:hover {
    background: #dc2626;
    box-shadow: 0 6px 8px rgba(239, 68, 68, 0.35);
}

.contacts-btn-secondary {
    background: #ffffff;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.contacts-btn-secondary:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #ef4444;
}

/* Адаптивность */
@media (max-width: 1024px) {
    .contacts-main {
        grid-template-columns: 350px 1fr;
        gap: 24px;
    }
    
    .contacts-map {
        height: 350px;
    }
}

@media (max-width: 768px) {
    .contacts-hero-title {
        font-size: 28px;
    }
    
    .contacts-hero-description {
        font-size: 16px;
    }
    
    .contacts-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .contacts-sidebar {
        position: static;
    }
    
    .contacts-store-items {
        max-height: none;
    }
    
    .contacts-map {
        height: 300px;
    }
    
    .contacts-store-detail {
        padding: 24px;
    }
    
    .contacts-store-detail-title {
        font-size: 24px;
    }
    
    .contacts-store-detail-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .contacts-hero {
        padding: 40px 0;
    }
    
    .contacts-hero-title {
        font-size: 24px;
    }
    
    .contacts-store-detail {
        padding: 20px;
    }
    
    .contacts-store-detail-title {
        font-size: 20px;
    }
}

/* Дополнительные эффекты группового hover */
.contacts-store-detail-info-item.group {
    cursor: pointer;
}

.contacts-store-detail-info-item.group:hover .contacts-store-detail-info-icon {
    color: #ef4444;
}

/* Эффект выделения текста */
.contacts-page ::selection {
    background: #fecaca;
    color: #991b1b;
}

.contacts-page ::-moz-selection {
    background: #fecaca;
    color: #991b1b;
}

/* ============================================
   МОБИЛЬНАЯ НАВИГАЦИЯ
   ============================================ */

/* Скрываем мобильную навигацию на десктопе */
@media (min-width: 768px) {
    .mobile-navbar {
        display: none !important;
    }
}

/* Контейнер мобильной навигации */
.mobile-navbar {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 1000;
    display: block;
}

.mobile-navbar-container {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 4px;
}

.mobile-navbar-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Обычные пункты навигации */
.mobile-nav-item {
    flex: 1;
    position: relative;
}

.mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 4px;
    text-decoration: none;
    color: #9ca3af;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-link:active {
    transform: scale(0.95);
}

.mobile-nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-icon i {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Активное состояние */
.mobile-nav-link.active {
    color: #E31E24;
}

.mobile-nav-link.active .mobile-nav-icon {
    color: #E31E24;
}


/* Центральная кнопка корзины */
.mobile-nav-cart {
    flex: 1;
    display: flex;
    justify-content: center;
    margin-top: -32px;
}

.mobile-nav-cart-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-cart-button:active {
    transform: scale(0.95);
}

.mobile-nav-cart-icon {
    width: 56px;
    height: 56px;
    background: #1a1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(26, 26, 26, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 4px solid #f5f5f7;
    position: relative;
}

.mobile-nav-cart-button.active .mobile-nav-cart-icon {
    background: #E31E24;
}

.mobile-nav-cart-icon i {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    line-height: 1;
}

/* Бейдж на кнопке корзины */
.mobile-nav-cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #E31E24;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #ffffff;
    transition: all 0.3s ease;
}

.mobile-nav-cart-button.active .mobile-nav-cart-badge {
    background: #ffffff;
    color: #E31E24;
}

/* Эффект волны при клике */
@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.2);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(227, 30, 36, 0);
    }
}

.mobile-nav-link.ripple-effect,
.mobile-nav-cart-button.ripple-effect {
    animation: ripple 0.6s linear;
}

/* Анимация для иконки корзины при добавлении товара */
@keyframes cartBounce {
    0% {
        transform: scale(1) rotate(0deg);
    }
    15% {
        transform: scale(1.3) rotate(-8deg);
    }
    30% {
        transform: scale(1.3) rotate(8deg);
    }
    45% {
        transform: scale(1.2) rotate(-5deg);
    }
    60% {
        transform: scale(1.1) rotate(3deg);
    }
    75% {
        transform: scale(1.05) rotate(-2deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes cartPulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(26, 26, 26, 0.3);
    }
    30% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.3), 0 4px 20px rgba(34, 197, 94, 0.6);
    }
    60% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(34, 197, 94, 0.4);
    }
}

.mobile-nav-cart-icon.cart-animate {
    animation: cartBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), cartPulse 0.8s ease-in-out !important;
    background: #22c55e !important; /* Зелёный фон при анимации */
}

/* Анимация для бейджа при обновлении */
@keyframes badgePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mobile-nav-cart-badge.badge-update {
    animation: badgePop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Бейдж избранного в мобильном меню */
.mobile-nav-favorite-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    background: #E31E24;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.mobile-nav-link.active .mobile-nav-favorite-badge {
    background: #ffffff;
    color: #E31E24;
}

/* ============================================
   404 Error Page Styles
   ============================================ */

.error-404-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-color: #F9F5F0;
    color: #1a202c;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.error-404-dark .error-404-page,
body.error-404-dark .error-404-page {
    background-color: #1A202C;
    color: #e2e8f0;
}

/* Лампа и шнур */
.error-404-lamp-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    transform-origin: top center;
}

.error-404-lamp-wire {
    width: 2px;
    height: 80px;
    background: #2d3748;
    margin: 0 auto;
}

.error-404-dark .error-404-lamp-wire,
body.error-404-dark .error-404-lamp-wire {
    background: #4a5568;
}

.error-404-lamp-shade {
    width: 140px;
    height: 70px;
    background: #F6E05E;
    border-radius: 80px 80px 0 0;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}

.error-404-dark .error-404-lamp-shade,
body.error-404-dark .error-404-lamp-shade {
    background: #D69E2E;
    box-shadow: 0 10px 30px rgba(214, 158, 46, 0.4);
}

.error-404-lamp-string {
    height: 100px;
    width: 2px;
    background: #2d3748;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    transition: height 0.2s;
}

.error-404-dark .error-404-lamp-string,
body.error-404-dark .error-404-lamp-string {
    background: #4a5568;
}

.error-404-lamp-string:active {
    height: 110px;
}

.error-404-lamp-knob {
    width: 12px;
    height: 12px;
    background: #C53030;
    border-radius: 50%;
    position: absolute;
    bottom: -10px;
    left: -5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Эффект света */
.error-404-light-cone {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 800px solid rgba(255, 253, 208, 0.2);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.error-404-dark .error-404-light-cone,
body.error-404-dark .error-404-light-cone {
    opacity: 1;
}

/* Анимация покачивания лампы */
@keyframes swing {
    0%, 100% { 
        transform: translateX(-50%) rotate(-3deg); 
    }
    50% { 
        transform: translateX(-50%) rotate(3deg); 
    }
}

.animate-swing {
    animation: swing 3s ease-in-out infinite;
}

/* Анимация плавания */
@keyframes float {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-10px); 
    }
}

.error-404-sofa-wrapper {
    animation: float 6s ease-in-out infinite;
}

/* Мебель (рисуем CSS-ом) */
.error-404-sofa {
    position: relative;
    width: 280px;
    height: 100px;
    background: #718096;
    border-radius: 10px 10px 40px 40px;
    margin: 0 auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.error-404-sofa-back {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 60px;
    background: #4A5568;
    border-radius: 20px 20px 0 0;
    z-index: -1;
}

.error-404-sofa-cushion {
    position: absolute;
    top: -10px;
    width: 80px;
    height: 80px;
    background: #A0AEC0;
    border-radius: 10px;
}

.error-404-cushion-left { 
    left: 20px; 
    transform: rotate(-5deg); 
}

.error-404-cushion-right { 
    right: 20px; 
    transform: rotate(5deg); 
}

.error-404-sofa-legs {
    position: absolute;
    bottom: -15px;
    width: 20px;
    height: 25px;
    background: #5D4037;
}

.error-404-leg-l { 
    left: 20px; 
}

.error-404-leg-r { 
    right: 20px; 
}

/* Глаза в темноте */
.error-404-spooky-eyes {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.5s;
}

.error-404-dark .error-404-spooky-eyes,
body.error-404-dark .error-404-spooky-eyes {
    opacity: 1;
}

.error-404-eye {
    width: 8px;
    height: 8px;
    background: #FCD34D;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

/* Основной контент */
.error-404-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 16px 40px;
    position: relative;
    z-index: 10;
}

.error-404-content {
    text-align: center;
    max-width: 800px;
    position: relative;
    width: 100%;
}

/* Большие цифры 404 */
.error-404-big-number {
    font-size: 144px;
    font-weight: 800;
    color: #8B5E3C;
    opacity: 0.2;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -10;
    scale: 1.5;
    transition: all 0.5s ease;
}

.error-404-dark .error-404-big-number,
body.error-404-dark .error-404-big-number {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    color: #fff;
    opacity: 0.3;
}

/* Заголовок */
.error-404-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    margin-top: 40px;
    transition: color 0.3s ease;
}

.error-404-dark .error-404-title,
body.error-404-dark .error-404-title {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    color: #fff;
}

@media (max-width: 767px) {
    .error-404-title {
        font-size: 24px;
    }
    
    .error-404-big-number {
        font-size: 96px;
        scale: 1.2;
    }
}

/* Описание */
.error-404-description {
    font-size: 18px;
    color: #4a5568;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: color 0.3s ease;
}

.error-404-dark .error-404-description,
body.error-404-dark .error-404-description {
    color: #a0aec0;
}

@media (max-width: 767px) {
    .error-404-description {
        font-size: 16px;
    }
}

/* Кнопки действий */
.error-404-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-bottom: 48px;
}

@media (min-width: 640px) {
    .error-404-actions {
        flex-direction: row;
    }
}

.error-404-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.error-404-btn:hover {
    transform: scale(1.05);
}

.error-404-btn-primary {
    background: #8B5E3C;
    color: #fff;
}

.error-404-btn-primary:hover {
    background: rgba(139, 94, 60, 0.9);
}

.error-404-btn-secondary {
    border: 2px solid #8B5E3C;
    color: #8B5E3C;
    background: transparent;
}

.error-404-dark .error-404-btn-secondary,
body.error-404-dark .error-404-btn-secondary {
    border-color: #fff;
    color: #fff;
}

.error-404-dark .error-404-btn-secondary:hover,
body.error-404-dark .error-404-btn-secondary:hover {
    background: #8B5E3C;
    color: #fff;
    border-color: #8B5E3C;
}

/* Поисковая строка */
.error-404-search {
    margin-top: 48px;
    width: 100%;
    max-width: 448px;
    margin-left: auto;
    margin-right: auto;
}

.error-404-search-label {
    font-size: 14px;
    color: #718096;
    margin-bottom: 8px;
}

.error-404-dark .error-404-search-label,
body.error-404-dark .error-404-search-label {
    color: #718096;
}

.error-404-search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.error-404-search-input {
    width: 100%;
    padding: 12px 24px;
    padding-right: 48px;
    border-radius: 9999px;
    border: 2px solid #e2e8f0;
    background: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.error-404-search-input:focus {
    outline: none;
    border-color: #8B5E3C;
}

.error-404-dark .error-404-search-input,
body.error-404-dark .error-404-search-input {
    background: #2d3748;
    border-color: #4a5568;
    color: #fff;
}

.error-404-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px;
    background: #f3f4f6;
    border-radius: 50%;
    border: none;
    color: #718096;
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-404-search-btn:hover {
    color: #8B5E3C;
}

.error-404-dark .error-404-search-btn,
body.error-404-dark .error-404-search-btn {
    background: #4a5568;
    color: #a0aec0;
}

.error-404-dark .error-404-search-btn:hover,
body.error-404-dark .error-404-search-btn:hover {
    color: #FCD34D;
}

/* Подсказка */
.error-404-hint {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%) rotate(12deg);
    opacity: 0.5;
    font-size: 14px;
    display: none;
    transition: transform 0.5s ease;
}

@media (min-width: 768px) {
    .error-404-hint {
        display: block;
    }
}

.error-404-hint i {
    font-size: 32px;
    color: #8B5E3C;
    display: block;
}

.error-404-dark .error-404-hint i,
body.error-404-dark .error-404-hint i {
    color: #FCD34D;
}

.error-404-hint span {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

/* Свечение текста */
.glow-text {
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

.error-404-dark .glow-text,
body.error-404-dark .glow-text {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* ============================================
   Profile Page Styles - Современная страница профиля
   ============================================ */

.profile-page {
    padding: 24px 0 60px;
    min-height: 100vh;
    background-color: #f9fafb;
    /* Переопределяем переменные для светлой темы */
    --color-background: #f9fafb;
    --color-surface: #ffffff;
    --color-text: #111827;
    --color-text-secondary: #6b7280;
    --color-primary: #C21F39;
    --color-primary-hover: #a51a30;
    --color-primary-active: #871527;
    --color-secondary: #e5e7eb;
}

.profile-page .container {
    background-color: transparent;
}

/* Блок авторизации - всегда светлый */
.personal-auth-required {
    background-color: #f9fafb;
    --color-background: #f9fafb;
    --color-surface: #ffffff;
    --color-text: #111827;
    --color-text-secondary: #6b7280;
    --color-primary: #C21F39;
    --color-secondary: #e5e7eb;
}

/* Шапка профиля */
.profile-header {
    position: relative;
    margin-bottom: 32px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.profile-header-bg {
    display: none;
}

.profile-header-bg::before {
    display: none;
}

.profile-header-content {
    position: relative;
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Аватар */
.profile-avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-surface, #fff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.profile-avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary, #C21F39) 0%, var(--color-primary-active, #871527) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    border: 4px solid var(--color-surface, #fff);
    box-shadow: 0 4px 20px rgba(194, 31, 57, 0.25);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.profile-avatar-status {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #22c55e;
    border-radius: 50%;
    border: 3px solid var(--color-surface, #fff);
}

/* Информация о пользователе */
.profile-user-info {
    flex: 1;
    min-width: 200px;
}

.profile-user-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text, #111827);
    margin: 0 0 8px;
    line-height: 1.2;
}

.profile-user-email,
.profile-user-phone,
.profile-user-since {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary, #6b7280);
    margin: 4px 0;
}

.profile-user-email i,
.profile-user-phone i,
.profile-user-since i {
    font-size: 14px;
    color: var(--color-primary, #C21F39);
}

/* Кнопки в шапке */
.profile-header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-edit-btn,
.profile-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.profile-edit-btn {
    background: var(--color-primary, #C21F39);
    color: #fff;
    box-shadow: 0 4px 12px rgba(194, 31, 57, 0.3);
}

.profile-edit-btn:hover {
    background: var(--color-primary-hover, #a51a30);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(194, 31, 57, 0.4);
}

.profile-logout-btn {
    background: var(--color-secondary, #e5e7eb);
    color: var(--color-text, #111827);
}

.profile-logout-btn:hover {
    background: #d1d5db;
    transform: translateY(-2px);
}

/* Статистика */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.profile-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--color-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.profile-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.profile-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.profile-stat-icon.blue {
    background: rgba(194, 31, 57, 0.1);
    color: #C21F39;
}

.profile-stat-icon.green {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.profile-stat-icon.orange {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.profile-stat-content {
    display: flex;
    flex-direction: column;
}

.profile-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #111827);
    line-height: 1.2;
}

.profile-stat-label {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    margin-top: 2px;
}

/* Заголовок секции */
.profile-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text, #111827);
    margin: 0 0 16px;
}

/* Меню разделов */
.profile-menu {
    margin-bottom: 32px;
}

.profile-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.profile-menu-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--color-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.profile-menu-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: transparent;
    transition: background 0.3s ease;
}

.profile-menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.profile-menu-card:hover::before {
    background: var(--color-primary, #C21F39);
}

.profile-menu-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.profile-menu-card:hover .profile-menu-icon {
    transform: scale(1.1);
}

.profile-menu-icon.blue {
    background: rgba(194, 31, 57, 0.1);
    color: #C21F39;
}

.profile-menu-icon.green {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.profile-menu-icon.red {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.profile-menu-icon.purple {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.profile-menu-icon.orange {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.profile-menu-icon.teal {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}

.profile-menu-content {
    flex: 1;
    min-width: 0;
}

.profile-menu-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #111827);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--color-primary, #C21F39);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 11px;
}

.profile-menu-badge.badge-soon {
    background: #9ca3af;
    font-size: 11px;
    padding: 0 8px;
}

/* Disabled карточки меню */
.profile-menu-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.profile-menu-card.disabled:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.profile-menu-card.disabled::before {
    display: none;
}

.profile-menu-card.disabled .profile-menu-icon {
    filter: grayscale(50%);
}

.profile-menu-card.disabled .profile-menu-arrow {
    opacity: 0.3;
}

.profile-menu-description {
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu-arrow {
    color: var(--color-text-secondary, #6b7280);
    font-size: 16px;
    transition: transform 0.3s ease;
}

.profile-menu-card:hover .profile-menu-arrow {
    transform: translateX(4px);
    color: var(--color-primary, #C21F39);
}

/* Быстрые действия */
.profile-quick-actions {
    margin-bottom: 32px;
}

.profile-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--color-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #111827);
    text-decoration: none;
    transition: all 0.3s ease;
}

.profile-action-btn i {
    font-size: 18px;
    color: var(--color-primary, #C21F39);
}

.profile-action-btn:hover {
    background: var(--color-primary, #C21F39);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(194, 31, 57, 0.3);
}

.profile-action-btn:hover i {
    color: #fff;
}

/* Адаптивность для планшетов */
@media (max-width: 991px) {
    .profile-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .profile-menu-grid {
        grid-template-columns: 1fr;
    }
}

/* Адаптивность для мобильных */
@media (max-width: 767px) {
    .profile-page {
        padding: 16px 0 100px;
    }
    
    .profile-header {
        border-radius: 0;
        margin-bottom: 20px;
    }
    
    .profile-header-content {
        padding: 20px 16px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .profile-avatar-wrapper {
        width: 80px;
        height: 80px;
    }
    
    .profile-avatar-initials {
        font-size: 28px;
    }
    
    .profile-user-info {
        width: 100%;
        text-align: center;
    }
    
    .profile-user-name {
        font-size: 22px;
    }
    
    .profile-user-email,
    .profile-user-phone,
    .profile-user-since {
        justify-content: center;
    }
    
    .profile-header-actions {
        width: 100%;
        justify-content: center;
    }
    
    .profile-stats {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }
    
    .profile-stat-card {
        padding: 16px;
    }
    
    .profile-stat-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    
    .profile-stat-value {
        font-size: 18px;
    }
    
    .profile-section-title {
        font-size: 18px;
        padding: 0 16px;
    }
    
    .profile-menu {
        margin-bottom: 24px;
    }
    
    .profile-menu-grid {
        gap: 12px;
    }
    
    .profile-menu-card {
        padding: 16px;
        margin: 0 16px;
    }
    
    .profile-menu-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .profile-menu-title {
        font-size: 15px;
    }
    
    .profile-menu-description {
        font-size: 12px;
    }
    
    .profile-actions-grid {
        flex-direction: column;
        padding: 0 16px;
    }
    
    .profile-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Skeleton loading состояние */
.profile-skeleton {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Страница авторизации - чистая без шапки/подвала */
.auth-main-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 20px;
}

/* Блок требования авторизации */
.personal-auth-required {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: var(--color-background, #f9fafb);
}

.auth-card {
    max-width: 420px;
    width: 100%;
    background: var(--color-surface, #fff);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.auth-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: rgba(194, 31, 57, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-icon i {
    font-size: 36px;
    color: var(--color-primary, #C21F39);
}

.auth-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text, #111827);
    margin: 0 0 12px;
}

.auth-description {
    font-size: 15px;
    color: var(--color-text-secondary, #6b7280);
    margin: 0 0 32px;
    line-height: 1.5;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.auth-btn-primary {
    background: var(--color-primary, #C21F39);
    color: #fff;
    box-shadow: 0 4px 16px rgba(194, 31, 57, 0.3);
}

.auth-btn-primary:active {
    background: var(--color-primary-active, #871527);
}

.auth-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(194, 31, 57, 0.4);
}

.auth-btn-secondary {
    background: var(--color-secondary, #e5e7eb);
    color: var(--color-text, #111827);
}

.auth-btn-secondary:hover {
    background: #d1d5db;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .auth-card {
        padding: 32px 24px;
        border-radius: 20px;
    }
    
    .auth-icon {
        width: 64px;
        height: 64px;
    }
    
    .auth-icon i {
        font-size: 28px;
    }
    
    .auth-title {
        font-size: 20px;
    }
    
    .auth-description {
        font-size: 14px;
    }
}

/* ============================================
   Orders Page Styles - Страница заказов
   ============================================ */

.orders-page {
    padding: 24px 0 60px;
    min-height: 100vh;
    background-color: #f9fafb;
    --color-background: #f9fafb;
    --color-surface: #ffffff;
    --color-text: #111827;
    --color-text-secondary: #6b7280;
    --color-primary: #C21F39;
}

/* Хлебные крошки */
.orders-breadcrumb {
    margin-bottom: 16px;
}

.orders-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.orders-breadcrumb-link:hover {
    color: #C21F39;
}

.orders-breadcrumb-link i {
    font-size: 12px;
}

/* Заголовок */
.orders-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.orders-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.orders-count {
    font-size: 14px;
    color: #6b7280;
    background: #e5e7eb;
    padding: 4px 12px;
    border-radius: 20px;
}

/* Список заказов */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Карточка заказа */
.order-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.order-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-number {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.order-date {
    font-size: 13px;
    color: #6b7280;
}

/* Статусы заказа */
.order-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.order-status.new {
    background: rgba(194, 31, 57, 0.1);
    color: #C21F39;
}

.order-status.processing {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.order-status.paid {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.order-status.completed {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.order-status.canceled {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Тело карточки */
.order-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 20px;
}

/* Превью товаров */
.order-items-preview {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-item-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.order-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-item-qty {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #111827;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    min-width: 16px;
    text-align: center;
}

.order-items-more {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

/* Сводка заказа */
.order-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.order-summary-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    font-size: 13px;
}

.order-summary-label {
    color: #6b7280;
}

.order-summary-value {
    color: #111827;
    font-weight: 500;
}

.order-summary-row.order-total .order-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* Футер карточки */
.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

.order-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #C21F39;
    text-decoration: none;
    transition: color 0.2s ease;
}

.order-details-btn:hover {
    color: #a51a30;
}

.order-details-btn i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.order-details-btn:hover i {
    transform: translateX(3px);
}

.order-pay-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #22c55e;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.order-pay-btn:hover {
    background: #16a34a;
    transform: translateY(-1px);
}

/* Пустой список заказов */
.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.orders-empty-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    background: rgba(194, 31, 57, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orders-empty-icon i {
    font-size: 36px;
    color: #C21F39;
}

.orders-empty-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.orders-empty-text {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 24px;
}

.orders-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #C21F39;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.orders-empty-btn:hover {
    background: #a51a30;
    transform: translateY(-2px);
}

/* Адаптивность для мобильных */
@media (max-width: 767px) {
    .orders-page {
        padding: 16px 0 100px;
    }
    
    .orders-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .orders-title {
        font-size: 24px;
    }
    
    .order-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
    
    .order-card-body {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        gap: 16px;
    }
    
    .order-items-preview {
        width: 100%;
    }
    
    .order-item-thumb {
        width: 48px;
        height: 48px;
    }
    
    .order-items-more {
        width: 48px;
        height: 48px;
    }
    
    .order-summary {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding-top: 12px;
        border-top: 1px solid #f3f4f6;
    }
    
    .order-summary-row {
        flex-direction: column;
        gap: 2px;
    }
    
    .order-summary-row.order-total .order-summary-value {
        font-size: 16px;
    }
    
    .order-card-footer {
        padding: 12px 16px;
    }
    
    .orders-empty {
        padding: 60px 20px;
    }
    
    .orders-empty-icon {
        width: 64px;
        height: 64px;
    }
    
    .orders-empty-icon i {
        font-size: 28px;
    }
    
    .orders-empty-title {
        font-size: 20px;
    }
}

/* ============================================
   Subcategories Grid - Подкатегории на странице раздела
   ============================================ */

.section-subcategories {
    margin-bottom: 24px;
}

.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.subcategory-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

.subcategory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.subcategory-image {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subcategory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subcategory-image--placeholder {
    background: linear-gradient(135deg, rgba(194, 31, 57, 0.1) 0%, rgba(194, 31, 57, 0.1) 100%);
}

.subcategory-image--placeholder i {
    font-size: 28px;
    color: #C21F39;
}

.subcategory-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subcategory-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

.subcategory-count {
    font-size: 12px;
    color: #6b7280;
}

/* Сортировка */
.catalog-sort-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.catalog-sort-row::before {
    content: 'Сортировка:';
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

@media (max-width: 767px) {
    .catalog-sort-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }
    
    .catalog-sort-row::before {
        display: none;
    }
    
    .catalog-sort-row .catalog-sort {
        width: 100%;
    }
    
    .catalog-sort-row .catalog-sort select,
    .catalog-sort-row .catalog-sort-select {
        width: 100%;
        min-width: auto;
    }
}

/* Адаптивность */
@media (max-width: 767px) {
    .subcategories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .subcategory-card {
        padding: 12px 8px;
    }
    
    .subcategory-image {
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
    }
    
    .subcategory-image--placeholder i {
        font-size: 20px;
    }
    
    .subcategory-name {
        font-size: 12px;
    }
    
    .subcategory-count {
        font-size: 10px;
    }
}

/* ============================================
   ТОВАР НЕДЕЛИ - Premium Banner
   ============================================ */
.product-week-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Фоновые декоративные элементы */
.product-week-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.product-week-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 50%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.product-week-section .section-title {
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.product-week-section .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    margin: 16px auto 0;
    border-radius: 2px;
}

/* Контейнер баннера */
.product-week-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Карточка с товаром */
.product-week-card-container {
    position: relative;
    width: 380px;
    height: 500px;
    perspective: 1000px;
    flex-shrink: 0;
}

/* Огромный текст на фоне */
.product-week-bg-text {
    position: absolute;
    top: 15%;
    left: -30%;
    font-size: 140px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -5px;
}

.product-week-card-container:hover .product-week-bg-text {
    transform: translateX(30px) scale(1.08);
    color: rgba(255, 255, 255, 0.07);
}

/* Летающие элементы */
.product-week-floating {
    position: absolute;
    border-radius: 50%;
    z-index: 11;
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.9;
}

.product-week-floating--1 {
    width: 50px;
    height: 50px;
    top: 5%;
    left: -40px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
}

.product-week-floating--2 {
    width: 24px;
    height: 24px;
    bottom: 25%;
    right: -25px;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
}

.product-week-floating--3 {
    width: 16px;
    height: 16px;
    top: 35%;
    right: -15px;
    background: linear-gradient(135deg, #C21F39 0%, #C21F39 100%);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}

.product-week-card-container:hover .product-week-floating--1 {
    transform: translate(-25px, -40px) scale(1.3) rotate(45deg);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.6);
}

.product-week-card-container:hover .product-week-floating--2 {
    transform: translate(35px, 15px) scale(1.6);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.6);
}

.product-week-card-container:hover .product-week-floating--3 {
    transform: translate(20px, -30px) scale(1.8);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.6);
}

/* Изображение товара - выходит за границы */
.product-week-image {
    position: absolute;
    top: -70px;
    right: -50px;
    width: 320px;
    height: 320px;
    z-index: 10;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
}

.product-week-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-week-card-container:hover .product-week-image {
    transform: translate(-25px, -25px) scale(1.12) rotate(-8deg);
    filter: drop-shadow(0 40px 60px rgba(99, 102, 241, 0.35));
}

/* Сама карточка */
.product-week-card {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    backdrop-filter: blur(12px);
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: visible;
    z-index: 2;
}

.product-week-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: rotateX(5deg) rotateY(-5deg);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Лейбл */
.product-week-label {
    display: inline-block;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 16px;
    border-radius: 30px;
    margin-bottom: 16px;
    width: fit-content;
}

/* Название товара */
.product-week-title {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Описание */
.product-week-desc {
    color: rgba(148, 163, 184, 1);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 24px 0;
}

/* Цена */
.product-week-price-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 24px;
}

.product-week-price {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
}

.product-week-price-old {
    font-size: 18px;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.6);
    text-decoration: line-through;
}

.product-week-discount {
    display: inline-block;
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

/* Кнопка */
.product-week-btn {
    display: block;
    background: #fff;
    color: #0f172a;
    padding: 18px 32px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    z-index: 12;
}

.product-week-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.product-week-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
}

.product-week-btn:hover::before {
    left: 100%;
}

/* Правая часть - информация */
.product-week-info {
    flex: 1;
    max-width: 420px;
}

.product-week-info-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a855f7;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.product-week-info-label i {
    font-size: 18px;
}

.product-week-info-title {
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 24px 0;
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-week-info-desc {
    color: rgba(148, 163, 184, 1);
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 32px 0;
}

/* Таймер обратного отсчета */
.product-week-timer {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.product-week-timer-item {
    text-align: center;
}

.product-week-timer-value {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.product-week-timer-item:hover .product-week-timer-value {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-5px);
}

.product-week-timer-label {
    color: rgba(148, 163, 184, 0.8);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Преимущества */
.product-week-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.product-week-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 10px 18px;
    color: rgba(203, 213, 225, 1);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.product-week-feature:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: #fff;
}

.product-week-feature i {
    color: #a855f7;
    font-size: 16px;
}

/* Адаптивность */
@media (max-width: 1100px) {
    .product-week-banner {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }
    
    .product-week-card-container {
        width: 340px;
        height: 460px;
    }
    
    .product-week-image {
        width: 280px;
        height: 280px;
        top: -50px;
        right: -30px;
    }
    
    .product-week-info {
        text-align: center;
        max-width: 100%;
    }
    
    .product-week-info-label {
        justify-content: center;
    }
    
    .product-week-info-title {
        font-size: 36px;
    }
    
    .product-week-timer {
        justify-content: center;
    }
    
    .product-week-features {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .product-week-section {
        padding: 50px 0;
    }
    
    .product-week-card-container {
        width: 300px;
        height: 420px;
    }
    
    .product-week-bg-text {
        font-size: 80px;
        left: -20%;
    }
    
    .product-week-image {
        width: 220px;
        height: 220px;
        top: -40px;
        right: -20px;
    }
    
    .product-week-card {
        padding: 30px 25px;
        border-radius: 30px;
    }
    
    .product-week-title {
        font-size: 24px;
    }
    
    .product-week-price {
        font-size: 28px;
    }
    
    .product-week-info-title {
        font-size: 28px;
    }
    
    .product-week-timer-value {
        width: 55px;
        height: 55px;
        font-size: 22px;
    }
    
    .product-week-floating--1 {
        width: 35px;
        height: 35px;
        left: -20px;
    }
    
    .product-week-floating--2,
    .product-week-floating--3 {
        display: none;
    }
}


/* ============================================
   MODERN CHECKOUT RADIO OPTIONS
   ============================================ */

.checkout-radio-group--modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkout-option {
    display: block;
    cursor: pointer;
}

.checkout-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-option-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.checkout-option:hover .checkout-option-content {
    border-color: #93c5fd;
    background: #fafbfc;
}

.checkout-option input[type="radio"]:checked + .checkout-option-content {
    border-color: #93c5fd;
    background: #eff6ff;
}

/* Custom radio button */
.checkout-option-radio {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: #fff;
}

.checkout-option-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #C21F39;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
}

.checkout-option:hover .checkout-option-radio {
    border-color: #93c5fd;
}

.checkout-option input[type="radio"]:checked + .checkout-option-content .checkout-option-radio {
    border-color: #C21F39;
}

.checkout-option input[type="radio"]:checked + .checkout-option-content .checkout-option-radio::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Icon container */
.checkout-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
}

.checkout-option-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Text content */
.checkout-option-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.checkout-option-text strong {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.checkout-option-text small {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .checkout-option-content {
        padding: 14px 16px;
        gap: 12px;
    }
    
    .checkout-option-icon {
        width: 40px;
        height: 40px;
    }
    
    .checkout-option-text strong {
        font-size: 15px;
    }
    
    .checkout-option-text small {
        font-size: 12px;
    }
}


/* ============================================
   TOAST-УВЕДОМЛЕНИЯ
   ============================================ */

/* Контейнер для всех Toast */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* Отдельное Toast-уведомление */
.toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #e7e5e4;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 12px 24px -8px rgba(0, 0, 0, 0.1);
    max-width: 380px;
    min-width: 320px;
    pointer-events: auto;
    
    /* Начальное состояние для анимации */
    opacity: 0;
    transform: translateX(50px);
    animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Анимация появления */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Анимация исчезновения */
.toast.toast-hiding {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(50px);
    }
}

/* Иконка успеха (галочка) */
.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.toast-icon svg {
    width: 18px;
    height: 18px;
    color: #ffffff;
}

/* Изображение товара */
.toast-image {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f5f4;
    border: 1px solid #e7e5e4;
}

/* Контент Toast */
.toast-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast-title {
    font-size: 14px;
    font-weight: 600;
    color: #1c1917;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.toast-subtitle {
    font-size: 12px;
    color: #78716c;
    font-weight: 400;
}

.toast-price {
    font-size: 15px;
    font-weight: 700;
    color: #1c1917;
}

/* Кнопка закрытия */
.toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #a8a29e;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin-left: auto;
}

.toast-close:hover {
    background: #f5f5f4;
    color: #57534e;
}

.toast-close svg {
    width: 16px;
    height: 16px;
}

/* Прогресс-бар автоскрытия */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 0 0 16px 16px;
    animation: toastProgress 3s linear forwards;
}

@keyframes toastProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Позиционирование для отображения прогресса */
.toast {
    position: relative;
    overflow: hidden;
}

/* ============================================
   TOAST - Мобильная адаптация
   ============================================ */

@media (max-width: 767px) {
    .toast-container {
        bottom: 100px; /* Выше мобильной навигации */
        right: 12px;
        left: 12px;
    }
    
    .toast {
        max-width: 100%;
        min-width: auto;
        padding: 12px 14px;
        border-radius: 14px;
        gap: 12px;
    }
    
    .toast-image {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }
    
    .toast-icon {
        width: 32px;
        height: 32px;
    }
    
    .toast-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .toast-title {
        font-size: 13px;
    }
    
    .toast-price {
        font-size: 14px;
    }
    
    .toast-close {
        width: 26px;
        height: 26px;
    }
}

/* ============================================
   СТРАНИЦА ИЗБРАННОГО
   ============================================ */

.favorites-page {
    padding: 24px 0 60px;
    min-height: 60vh;
}

.favorites-breadcrumb {
    margin-bottom: 20px;
}

.favorites-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.favorites-breadcrumb-link:hover {
    color: #C21F39;
}

.favorites-breadcrumb-link i {
    font-size: 12px;
}

.favorites-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 24px;
}

.favorites-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.favorites-count {
    font-size: 16px;
    color: #64748b;
    font-weight: 400;
}

/* Сетка товаров избранного */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.favorite-card {
    transition: opacity 0.3s, transform 0.3s;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.favorite-card .product-image-link {
    display: block;
    position: relative;
    z-index: 1;
}

.favorite-card .product-image {
    cursor: pointer;
}

.favorite-card .favorite-btn {
    opacity: 1;
}

/* Карточка в избранном - без кнопки корзины */
.favorite-card .product-card-info {
    padding: 12px 14px 16px;
}

.favorite-card .product-name {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.favorite-card .product-name a {
    color: #1e293b;
    text-decoration: none;
}

.favorite-card .product-price {
    margin-bottom: 0;
}

.favorite-card .price-current {
    font-size: 16px;
    font-weight: 600;
    color: #C21F39;
}

.favorite-card .price-old {
    font-size: 13px;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: 6px;
}

/* Надпись "Нет в наличии" */
.favorite-unavailable {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    background: #fef2f2;
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

/* Кнопки действий */
.favorites-actions {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.favorites-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.favorites-clear-btn:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #ef4444;
}

.favorites-clear-btn i {
    font-size: 16px;
}

/* Пустое избранное */
.favorites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.favorites-empty-icon {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.favorites-empty-icon svg {
    color: #f87171;
}

.favorites-empty-title {
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px;
}

.favorites-empty-text {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 24px;
    max-width: 300px;
}

.favorites-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: linear-gradient(135deg, #C21F39 0%, #a51a30 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(194, 31, 57, 0.3);
}

.favorites-empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(194, 31, 57, 0.4);
}

/* ============================================
   УВЕДОМЛЕНИЯ (NOTIFICATIONS)
   ============================================ */

.zeta-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 14px 20px;
    background: #1e293b;
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    max-width: calc(100vw - 40px);
}

.zeta-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.zeta-notification--success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.zeta-notification--error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.zeta-notification--info {
    background: linear-gradient(135deg, #C21F39 0%, #a51a30 100%);
}

.zeta-notification-text {
    flex: 1;
}

.zeta-notification-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.zeta-notification-close:hover {
    color: #fff;
}

/* Мобильная адаптация избранного */
@media (max-width: 768px) {
    .favorites-page {
        padding: 16px 0 80px;
    }
    
    .favorites-header {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 20px;
    }
    
    .favorites-title {
        font-size: 24px;
    }
    
    .favorites-count {
        font-size: 14px;
    }
    
    .favorites-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .favorite-card .product-card-info {
        padding: 10px 12px 14px;
    }
    
    .favorite-card .product-name {
        font-size: 13px;
    }
    
    .favorite-card .price-current {
        font-size: 15px;
    }
    
    .favorites-empty {
        padding: 40px 20px;
    }
    
    .favorites-empty-icon {
        width: 100px;
        height: 100px;
    }
    
    .favorites-empty-icon svg {
        width: 60px;
        height: 60px;
    }
    
    .favorites-empty-title {
        font-size: 20px;
    }
    
    .favorites-empty-text {
        font-size: 14px;
    }
    
    .zeta-notification {
        bottom: 80px;
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(20px);
        max-width: none;
    }

    .zeta-notification.show {
        transform: translateX(0) translateY(0);
    }
}

/* ===========================================
   ТЕМНАЯ ТЕМА (ТЕСТОВАЯ ВЕРСИЯ)
   =========================================== */

.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    display: none; /* Временно скрыто */
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    color: var(--color-text);
    margin-right: 8px;
}

.theme-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.theme-toggle-btn i {
    font-size: 20px;
}

/* Dark theme variables */
[data-theme="dark"] {
    --color-background: rgba(18, 18, 18, 1);
    --color-surface: rgba(28, 28, 28, 1);
    --color-text: rgba(240, 240, 240, 1);
    --color-text-secondary: rgba(170, 170, 170, 1);
    --color-primary: rgba(45, 166, 178, 1);
    --color-primary-hover: rgba(50, 184, 198, 1);
    --color-primary-active: rgba(40, 150, 160, 1);
    --color-secondary: rgba(48, 48, 48, 1);
    --color-secondary-hover: rgba(60, 60, 60, 1);
    --color-secondary-active: rgba(70, 70, 70, 1);
    --color-border: rgba(60, 60, 60, 1);
    --color-card-border: rgba(48, 48, 48, 1);
    --color-card-border-inner: rgba(40, 40, 40, 1);
    --color-btn-primary-text: rgba(255, 255, 255, 1);
    --color-white: rgba(28, 28, 28, 1);
    --color-gray-200: rgba(200, 200, 200, 1);
    --color-slate-900: rgba(240, 240, 240, 1);
    --color-charcoal-700: rgba(220, 220, 220, 1);
    --color-charcoal-800: rgba(200, 200, 200, 1);
    --select-caret-light: var(--select-caret-dark);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .test-mode-banner {
    background: rgba(249, 115, 22, 0.2);
    color: rgba(251, 146, 60, 1);
    border-bottom: 1px solid rgba(249, 115, 22, 0.3);
}

[data-theme="dark"] .site-header {
    background: var(--color-surface);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .city-trigger {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .city-trigger:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .btn-catalog {
    background: var(--color-primary);
    color: white;
}

[data-theme="dark"] .btn-catalog:hover {
    background: var(--color-primary-hover);
}

[data-theme="dark"] .search-box input {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .search-box input::placeholder {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .product-card {
    background: var(--color-surface);
    border-color: var(--color-card-border);
}

[data-theme="dark"] .product-card:hover {
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .product-name {
    color: var(--color-text);
}


[data-theme="dark"] .price-current {
    color: var(--color-primary);
}

[data-theme="dark"] .price-old {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .catalog-menu {
    background: var(--color-surface);
}

[data-theme="dark"] .catalog-column h4 a,
[data-theme="dark"] .catalog-column ul li a {
    color: var(--color-text);
}

[data-theme="dark"] .catalog-column ul li a:hover {
    color: var(--color-primary);
}

[data-theme="dark"] .city-cards-dropdown {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .city-card {
    background: var(--color-background);
    border-color: var(--color-border);
}

[data-theme="dark"] .city-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .city-card-name {
    color: var(--color-text);
}

[data-theme="dark"] .section-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    color: var(--color-text);
}

[data-theme="dark"] .btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--color-secondary-hover);
}


[data-theme="dark"] .mobile-city-modal-content {
    background: var(--color-surface);
}

[data-theme="dark"] .mobile-city-modal-content::before {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .mobile-city-bar {
    background: var(--color-surface);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .mobile-city-btn {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .mobile-city-btn:hover,
[data-theme="dark"] .mobile-city-btn:active {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .mobile-city-btn i:first-child {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-city-modal-header {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .mobile-city-modal-header h3 {
    color: var(--color-text);
}

[data-theme="dark"] .mobile-city-modal-close {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}

[data-theme="dark"] .mobile-city-modal-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .mobile-city-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border);
}

[data-theme="dark"] .mobile-city-item:hover,
[data-theme="dark"] .mobile-city-item:active {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mobile-city-item.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
}

[data-theme="dark"] .mobile-city-item-info > i {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-city-name,
[data-theme="dark"] .mobile-city-address {
    color: var(--color-text);
}

/* Dark mode: фильтр каталога */
/* Стили темной темы для фильтра перенесены в filter_styles.css */

@media (max-width: 1024px) {
    .theme-toggle-btn {
        margin-right: 0;
    }
}

/* End */


/* Start:/bitrix/components/bitrix/advertising.banner.view/templates/bootstrap_v4/style.min.css?17624888893697*/
.bx-advertisingbanner-pattern{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background-size:cover}.bx-advertisingbanner-content{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;transition:250ms linear all}.bx-advertisingbanner-text-title{color:#000;white-space:nowrap}.bx-advertisingbanner-text-block{font-size:12px;line-height:1.5em;transition:250ms linear all}.bx-advertisingbanner-btn-container{z-index:50 !important;color:#fff;transition:250ms linear all}.bx-advertisingbanner-text-title,.bx-advertisingbanner-text-block,.bx-advertisingbanner-btn-container{padding:10px 24px}@media(max-width:767px){.bx-advertisingbanner-text-title,.bx-advertisingbanner-text-block,.bx-advertisingbanner-btn-container{padding:7px 10px}}.bx-advertisingbanner-btn:hover{color:#fff;opacity:.9}.bx-slider-preset-1 .bx-advertisingbanner-content{position:absolute;top:auto;right:auto;bottom:80px;left:0;flex-direction:column;width:70%}.bx-slider-preset-1 .bx-advertisingbanner-text-title{width:100%}.bx-slider-preset-1 .bx-advertisingbanner-text-block{color:#000}.bx-slider-preset-1 .bx-advertisingbanner-btn{background:#e6a323}.bx-slider-preset-1 .bx-advertisingbanner-btn:hover{opacity:.9}.bx-slider-preset-1 .bx-advertisingbanner-text-title,.bx-slider-preset-1 .bx-advertisingbanner-text-block,.bx-slider-preset-1 .bx-advertisingbanner-btn-container{padding:15px 24px}@media(max-width:767px){.bx-slider-preset-1 .bx-advertisingbanner-text-title{margin:0;padding:10px;font-size:20px}.bx-slider-preset-1 .bx-advertisingbanner-content{bottom:40px;width:100%}.bx-slider-preset-1 .bx-advertisingbanner-text-block{font-size:12px}}.bx-slider-preset-2 .bx-advertisingbanner-content{top:auto;bottom:45px;padding:0 15%;width:100%;flex-wrap:wrap}.bx-slider-preset-2 .bx-advertisingbanner-text-title{width:100%}.bx-slider-preset-2 .bx-advertisingbanner-text-block{flex:1}.bx-slider-preset-2 .bx-advertisingbanner-btn{background:#e6a323}@media(max-width:767px){.bx-slider-preset-2 .bx-advertisingbanner-content{justify-content:center}.bx-slider-preset-2 .bx-advertisingbanner-text-title{padding:10px 0;font-size:20px}.bx-slider-preset-2 .bx-advertisingbanner-content{top:auto;right:auto;left:auto;padding:5% 15% 0;width:100%}.bx-slider-preset-2 .bx-advertisingbanner-text-block{padding-left:0;font-size:12px}.bx-slider-preset-2 .bx-advertisingbanner-btn-container{padding-right:0;padding-left:0}}.bx-slider-preset-3 .bx-advertisingbanner-content{top:auto;right:15%;bottom:50px;left:15%;flex-direction:column;padding:20px 30px}.bx-slider-preset-3 .bx-advertisingbanner-text-title{box-sizing:border-box;width:100%;line-height:normal}.bx-slider-preset-3 .bx-advertisingbanner-text-block{padding:20px 0}.bx-slider-preset-3 .bx-advertisingbanner-btn{background:#e6a323}@media(max-width:767px){.bx-slider-preset-3 .bx-advertisingbanner-content{top:auto;right:auto;bottom:45px;left:auto;padding:5% 15% 0;width:100%}.bx-slider-preset-3 .bx-advertisingbanner-text-title{font-size:20px}.bx-slider-preset-3 .bx-advertisingbanner-text-block{font-size:12px}}.bx-slider-preset-4 .bx-advertisingbanner-content{position:absolute;top:auto;right:15%;bottom:50px;left:15%;flex-direction:column;padding:20px 30px;text-align:center}.bx-slider-preset-4 .bx-advertisingbanner-text-title{box-sizing:border-box;width:100%;line-height:normal}.bx-slider-preset-4 .bx-advertisingbanner-text-block{padding:20px 0;font-size:13px}.bx-slider-preset-4 .bx-advertisingbanner-btn{background:#e6a323}@media(max-width:767px){.bx-slider-preset-4 .bx-advertisingbanner-text-title{font-size:20px}.bx-slider-preset-4 .bx-advertisingbanner-content{padding:5% 10% 0}.bx-slider-preset-4 .bx-advertisingbanner-text-block{padding:10px 0}}
/* End */


/* Start:/bitrix/components/bitrix/menu/templates/.default/style.min.css?1762488768490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/bitrix/components/bitrix/menu/templates/.default/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/bitrix/components/bitrix/menu/templates/horizontal_multilevel/style.min.css?17624887673715*/
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul{margin:0;padding:0;background:#bc262c url(/bitrix/components/bitrix/menu/templates/horizontal_multilevel/images/header_menu_bg.gif) repeat-x;min-height:27px;width:100%;list-style:none;font-size:11px;float:left}#horizontal-multilevel-menu a{display:block;padding:5px 10px;text-decoration:none;text-align:center}#horizontal-multilevel-menu li{float:left}#horizontal-multilevel-menu li a.root-item{color:#fff;font-weight:bold;padding:7px 12px}#horizontal-multilevel-menu li a.root-item-selected{background:#fc8d3d;color:#fff;font-weight:bold;padding:7px 12px}#horizontal-multilevel-menu li:hover a.root-item,#horizontal-multilevel-menu li.jshover a.root-item{background:#e26336;color:#fff}#horizontal-multilevel-menu a.parent{background:url(/bitrix/components/bitrix/menu/templates/horizontal_multilevel/images/arrow.gif) center right no-repeat}#horizontal-multilevel-menu a.denied{background:url(/bitrix/components/bitrix/menu/templates/horizontal_multilevel/images/lock.gif) center right no-repeat}#horizontal-multilevel-menu li:hover,#horizontal-multilevel-menu li.jshover{background:#d6d6d6;color:#fff}#horizontal-multilevel-menu li.item-selected{background:#d6d6d6;color:#fff}#horizontal-multilevel-menu li ul{position:absolute;top:auto;display:none;z-index:500;height:auto;width:135px;background:#f5f5f5;border:1px solid #c1c1c1}#horizontal-multilevel-menu li li{width:100%;border-bottom:1px solid #dedede}#horizontal-multilevel-menu li ul a{text-align:left}#horizontal-multilevel-menu li a,#horizontal-multilevel-menu li:hover li a,#horizontal-multilevel-menu li.jshover li a,#horizontal-multilevel-menu li:hover li:hover li a,#horizontal-multilevel-menu li.jshover li.jshover li a,#horizontal-multilevel-menu li:hover li:hover li:hover li a,#horizontal-multilevel-menu li.jshover li.jshover li.jshover li a,#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a,#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a,#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a,#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a{color:#4f4f4f;font-weight:bold}#horizontal-multilevel-menu li:hover li:hover a,#horizontal-multilevel-menu li.jshover li.jshover a,#horizontal-multilevel-menu li:hover li:hover li:hover a,#horizontal-multilevel-menu li.jshover li.jshover li.jshover a,#horizontal-multilevel-menu li:hover li:hover li:hover li:hover a,#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a,#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a,#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a{color:#4f4f4f}#horizontal-multilevel-menu li ul ul{margin:-27px 0 0 132px}#horizontal-multilevel-menu li:hover ul ul,#horizontal-multilevel-menu li.jshover ul ul,#horizontal-multilevel-menu li:hover ul ul ul,#horizontal-multilevel-menu li.jshover ul ul ul,#horizontal-multilevel-menu li:hover ul ul ul ul,#horizontal-multilevel-menu li.jshover ul ul ul ul,#horizontal-multilevel-menu li:hover ul ul ul ul ul,#horizontal-multilevel-menu li.jshover ul ul ul ul ul{display:none}#horizontal-multilevel-menu li:hover ul,#horizontal-multilevel-menu li.jshover ul,#horizontal-multilevel-menu li li:hover ul,#horizontal-multilevel-menu li li.jshover ul,#horizontal-multilevel-menu li li li:hover ul,#horizontal-multilevel-menu li li li.jshover ul,#horizontal-multilevel-menu li li li li:hover ul,#horizontal-multilevel-menu li li li li.jshover ul,#horizontal-multilevel-menu li li li li li:hover ul,#horizontal-multilevel-menu li li li li li.jshover ul{display:block}div.menu-clear-left{clear:left}
/* End */
/* /bitrix/templates/modern_market/template_styles.css?1771305511245808 */
/* /bitrix/components/bitrix/advertising.banner.view/templates/bootstrap_v4/style.min.css?17624888893697 */
/* /bitrix/components/bitrix/menu/templates/.default/style.min.css?1762488768490 */
/* /bitrix/components/bitrix/menu/templates/horizontal_multilevel/style.min.css?17624887673715 */