/**
 * White Theme Overrides - Landmann
 * Elegant Warm Brutalism - Light Variant
 * Based on CSS_STYLE_GUIDE.md
 */

/* ==========================================================================
   CSS ПЕРЕМЕННЫЕ — Брутализм
   ========================================================================== */
.white_fon {
  /* Основные цвета из брендбука */
  --color-bg-main: #EBE6DD;
  --color-bg-card: #FAF8F7;
  --color-bg-elevated: #FAF8F7;
  --color-bg-input: #EBE6DD;
  
  /* Текст */
  --color-text-primary: #241C1A;
  --color-text-secondary: #3C434A;
  --color-text-tertiary: #556270; /* WCAG AA 5.02:1 on #EBE6DD, 5.89:1 on #FAF8F7 */
  --color-text-muted: #CDC3B7;
  
  /* Границы — чёткие, как в брутализме */
  --color-border: #DCD3C7;
  --color-border-strong: #CDC3B7;
  --color-border-subtle: rgba(36, 28, 26, 0.08);
  
  /* Тени — жёсткие, без размытия (Brutalism) */
  --shadow-brutal-sm: 4px 4px 0 #C78C47;
  --shadow-brutal-md: 6px 6px 0 #C78C47;
  --shadow-brutal-lg: 10px 10px 0 #C78C47;
  --shadow-brutal-dark: 4px 4px 0 #241C1A;
  
  /* Паттерн — более заметный на светлом */
  --field-pattern-card: 
    conic-gradient(from -45deg at 75% 12.5%, rgba(199,140,71,0.08) 25%, transparent 0),
    conic-gradient(from 135deg at 25% 87.5%, rgba(199,140,71,0.08) 25%, transparent 0) 
     0 calc(var(--field-size)/2),
    conic-gradient(from 180deg at 50% 75%, transparent 62.5%, rgba(199,140,71,0.08) 0),
    conic-gradient(at 50% 25%, transparent 62.5%, rgba(199,140,71,0.08) 0) 
     0 calc(var(--field-size)/2);
}

html.white_fon body {
  background-color: var(--color-bg-main);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   ТИПОГРАФИКА — Иерархия
   ========================================================================== */
html.white_fon h1,
html.white_fon h2,
html.white_fon .catalogTitle,
.white_fon h1,
.white_fon h2,
.white_fon .catalogTitle {
  color: var(--color-text-primary);
  font-weight: 900;
}

html.white_fon h3,
html.white_fon h4,
html.white_fon .catalogName,
.white_fon h3,
.white_fon h4,
.white_fon .catalogName {
  color: var(--color-text-primary);
}

.white_fon p,
.white_fon li {
  color: var(--color-text-secondary);
}

.white_fon .text-muted,
.white_fon small {
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */
.white_fon .breadcrumbs {
  color: var(--color-text-tertiary);
}

.white_fon .breadcrumbs a,
.white_fon .woocommerce-breadcrumb a {
  color: var(--color-text-secondary);
}

.white_fon .breadcrumbs a:hover {
  color: var(--color-accent);
}

.white_fon .breadcrumbs ul li::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.81628 3.21208L11.1042 6.5L7.81628 9.78791' stroke='%23CDC3B7' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.89587 6.5H11.0121' stroke='%23CDC3B7' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   ШАПКА — чёткие границы брутализма
   ========================================================================== */
.white_fon .header {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.white_fon .headerTop {
  border-bottom: 1px solid var(--color-border);
}

.white_fon .headerContacts,
.white_fon .headerContacts a {
  color: var(--color-text-secondary);
}

.white_fon .headerLogo svg path {
  fill: var(--color-text-primary);
  stroke: var(--color-text-primary);
}

/* Каталог кнопка — с тенью брутализма */
.white_fon .headerCatalog {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.white_fon .headerCatalog:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  box-shadow: var(--shadow-brutal-dark);
  transform: translate(-2px, -2px);
}

/* Корзина */
.white_fon .headerCart {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
}

.white_fon .headerCart span {
  background: var(--color-accent);
  color: #ffffff;
}

/* Поиск */
.white_fon .headerMenuSearch input {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.white_fon .headerMenuSearch input::placeholder {
  color: var(--color-text-muted);
}

/* ==========================================================================
   МЕГА-МЕНЮ
   ========================================================================== */
.white_fon .catalogMegaMenu {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-brutal-md);
}

.white_fon .catalogMegaMenu__header {
  border-bottom: 1px solid var(--color-border);
}

.white_fon .catalogMegaMenu__item {
  color: var(--color-text-secondary);
  border: 1px solid transparent;
}

.white_fon .catalogMegaMenu__item:hover {
  background: rgba(199, 140, 71, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.white_fon .catalogMegaMenu__count {
  background: var(--color-bg-main);
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   КАРТОЧКИ ТОВАРОВ — Brutalist Cards
   ========================================================================== */
.white_fon .catalogItem {
  background: var(--color-bg-card) !important;
  background-image: var(--field-pattern-card) !important;
  background-size: var(--field-pattern-size) !important;
  border: 1px solid var(--color-border);
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.white_fon .catalogItem:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}

.white_fon .catalogName a {
  color: var(--color-text-primary) !important;
}

.white_fon .catalogCat a {
  color: var(--color-text-tertiary) !important;
}

.white_fon .catalogPrice {
  color: var(--color-text-primary);
  font-weight: 900;
}

.white_fon .catalogPriceOld {
  color: var(--color-text-muted);
}

/* Бейджи */
.white_fon .catalogQuality.green {
  background: rgba(84, 182, 39, 0.1);
  border: 1px solid rgba(84, 182, 39, 0.4);
  color: #3a9d27;
}

.white_fon .catalogQuality.yellow {
  background: rgba(199, 140, 71, 0.1);
  border: 1px solid rgba(199, 140, 71, 0.4);
  color: var(--color-accent);
}

.white_fon .catalogSale {
  background: var(--color-sale);
  color: #ffffff;
}

/* ==========================================================================
   КАТЕГОРИИ
   ========================================================================== */
.white_fon .categories .categoriesSlider .swiper-slide {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.white_fon .categoriesSlider .swiper-slide:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}

.white_fon .categoriesInfo h3 {
  color: var(--color-text-primary);
}

.white_fon .categoriesInfo p {
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   ФИЛЬТРЫ — чипы и инпуты
   ========================================================================== */
.white_fon .catalogFilter,
.white_fon .catalogPluginFilter {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
}

.white_fon .catalogFilterTitle {
  color: var(--color-text-primary) !important;
}

/* Чипы — бруталистские */
html.white_fon .checkbox-item label,
html.white_fon #fe-filters-root .wpc-checkbox-item label,
html.white_fon #fe-filters-root .wpc-term-item label,
.white_fon .checkbox-item label,
.white_fon #fe-filters-root .wpc-checkbox-item label,
.white_fon #fe-filters-root .wpc-term-item label {
  background: var(--color-bg-main) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
}

.white_fon .checkbox-item label:hover {
  border-color: var(--color-accent) !important;
}

.white_fon .checkbox-item input:checked + .checkmark,
.white_fon #fe-filters-root .wpc-checkbox-item input:checked + label {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border-color: var(--color-accent) !important;
  box-shadow: 2px 2px 0 #241C1A;
}

/* Инпуты цены */
.white_fon .custom-price-slider #amount,
.white_fon .wpc-filters-range-wrapper input[type="number"] {
  background: var(--color-bg-card) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
}

/* ==========================================================================
   КНОПКИ — Brutalist Buttons
   ========================================================================== */
.white_fon button {
  background: var(--color-accent);
  color: #ffffff;
  border: 1px solid var(--color-accent);
  transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.white_fon button:hover:not(.showcase-prev):not(.showcase-next):not(.ai-search-close):not(.ai-search-new-chat) {
  background: #ffffff;
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: none;
  transform: none;
}

.white_fon .catalogCart a.button {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-accent) !important;
}

.white_fon .catalogCart a.button:hover {
  background: #ffffff !important;
  color: var(--color-accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Свайпер навигация */
.white_fon [class^="swiper-button-"] {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.white_fon [class^="swiper-button-"]:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  box-shadow: var(--shadow-brutal-dark);
  transform: translate(-2px, -2px);
}

.white_fon .swiper-button-disabled {
  background: var(--color-bg-main) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  opacity: 0.6;
  box-shadow: none !important;
  transform: none !important;
}

/* ==========================================================================
   БЛОГ
   ========================================================================== */
.white_fon .blogCard {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.white_fon .blogCard:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}

.white_fon .blogName a {
  color: var(--color-text-primary);
}

/* ==========================================================================
   ФИЛЬТР КАТАЛОГА — раскрытие при наведении (как карточка товара)
   ========================================================================== */

/* При наведении на фильтр — эффект подъёма как у карточки */
.white_fon .catalogFilter:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
  z-index: 10;
}

/* Контейнер для плавного раскрытия через grid */
.white_fon .catalogFilter .catalogFilterItem {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* При наведении на фильтр — раскрываем содержимое */
.white_fon .catalogFilter:hover .catalogFilterItem {
  grid-template-rows: auto 1fr;
}

/* Внутренний контейнер catalogFilterContext */
.white_fon .catalogFilter .catalogFilterContext {
  min-height: 0;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  padding: 0;
  margin: 0;
}

/* При наведении — показываем содержимое */
.white_fon .catalogFilter:hover .catalogFilterContext {
  opacity: 1;
  height: auto;
  overflow: visible;
  padding: 16px 0;
  margin-top: 16px;
}

/* Заголовок фильтра — стили при наведении */
.white_fon .catalogFilter:hover .catalogFilterTitle {
  color: var(--color-accent);
}

/* Иконка стрелки — поворот при раскрытии */
.white_fon .catalogFilter:hover .catalogFilterTitle::after {
  transform: rotate(180deg);
}

/* Чекбоксы — плавное появление снизу */
.white_fon .catalogFilter .checkbox-item {
  transform: translateY(-10px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.white_fon .catalogFilter:hover .checkbox-item {
  transform: translateY(0);
  opacity: 1;
}

/* Пошаговое появление чекбоксов с задержкой */
.white_fon .catalogFilter:hover .checkbox-item:nth-child(1) { transition-delay: 0.05s; }

.white_fon .catalogFilter:hover .checkbox-item:nth-child(2) { transition-delay: 0.1s; }

.white_fon .catalogFilter:hover .checkbox-item:nth-child(3) { transition-delay: 0.15s; }

.white_fon .catalogFilter:hover .checkbox-item:nth-child(4) { transition-delay: 0.2s; }

.white_fon .catalogFilter:hover .checkbox-item:nth-child(5) { transition-delay: 0.25s; }

.white_fon .catalogFilter:hover .checkbox-item:nth-child(6) { transition-delay: 0.3s; }

.white_fon .catalogFilter:hover .checkbox-item:nth-child(7) { transition-delay: 0.35s; }

.white_fon .catalogFilter:hover .checkbox-item:nth-child(8) { transition-delay: 0.4s; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.white_fon .faqItem {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.white_fon .faqName {
  color: var(--color-text-primary);
}

.white_fon .faqContent {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   ПАРТНЁРЫ
   ========================================================================== */
.white_fon .partnersItem {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.white_fon .partnersItem:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}

.white_fon .bestItem {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   ФУТЕР — отделён границей
   ========================================================================== */
.white_fon .footer {
  background: var(--color-bg-main);
  border-top: 2px solid var(--color-border);
}

.white_fon .footerLogo svg path {
  fill: var(--color-text-primary);
}

.white_fon .footerContacts,
.white_fon .footerContacts a {
  color: var(--color-text-secondary);
}

.white_fon .footerMenu h5 {
  color: var(--color-text-primary);
}

.white_fon .footerSocials div {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.white_fon .footerSocials div:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-brutal-dark);
  transform: translate(-2px, -2px);
}

.white_fon .footerCopyright {
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   HERO — бруталистские табы + ФИКСЫ
   ========================================================================== */

/* 1. ФИКС: Табы брендов — явный цвет текста для всех состояний */
.white_fon .showcase-cat-link,
.white_fon .showcase-cat-link[data-preset-idx] {
  color: var(--color-text-tertiary) !important;
  border: 1px solid var(--color-border);
  background: rgba(250, 248, 247, 0.9);
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.white_fon .showcase-cat-link:hover,
.white_fon .showcase-cat-link[data-preset-idx]:hover {
  background: #ffffff;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-accent);
}

/* Активный таб — белый текст на золотом */
.white_fon .showcase-cat-link.is-active,
.white_fon .showcase-cat-link[data-preset-idx].is-active {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border-color: var(--color-accent) !important;
  box-shadow: 2px 2px 0 #241C1A;
}

/* 2. ФИКС: Ghost-текст продукта — тёмный вместо белого */
.white_fon .hero-hover-info,
.white_fon .showcase-hero-content .hero-hover-info {
  color: rgba(36, 28, 26, 0.06) !important;
  -webkit-text-stroke: 1px rgba(199, 140, 71, 0.15);
}

/* 3. ФИКС: Градиент hero через переменные */
.white_fon .heroSlider,
.white_fon .showcase-hero {
  background: linear-gradient(var(--color-bg-main, #EBE6DD) 0%, var(--color-border, #DCD3C7) 100%) !important;
}

/* 4. ФИКС: Подзаголовок — лучший контраст */
.white_fon .showcase-subtitle {
  color: var(--color-text-secondary, #4a4540) !important;
}

/* 5. ФИКС: Промо-панель — тёмный текст для контраста (5.79:1 на #C78C47) */
.white_fon .heroAdsTop p,
.white_fon .hero-ads-text {
  color: #241C1A !important;
  text-shadow: none;
}

/* 6. ФИКС: Кнопка "Каталог" — стиль кнопки */
.white_fon .heroAdsTop button,
.white_fon .heroAdsTop a.button {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--color-accent);
  color: var(--color-text-primary);
  padding: 12px 24px;
  font-weight: 700;
  text-transform: uppercase;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.white_fon .heroAdsTop button:hover,
.white_fon .heroAdsTop a.button:hover {
  background: var(--color-accent);
  color: #ffffff;
  box-shadow: none;
  transform: none;
}

/* 7. ФИКС: Стрелки навигации — видимые */
.white_fon .showcase-prev,
.white_fon .showcase-next {
  background: rgba(250, 248, 247, 0.9);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.white_fon .showcase-prev:hover,
.white_fon .showcase-next:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

/* ==========================================================================
   МОДАЛКА «ПІДБІР ШИН»
   ========================================================================== */
.white_fon .tire-selector-content {
  background: var(--color-bg-card) !important;
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-brutal-lg);
}

.white_fon .tire-selector-header h2 {
  color: var(--color-text-primary);
}

.white_fon .tire-selector-header p {
  color: var(--color-text-tertiary);
}

/* Progress */
.white_fon .progress-bar {
  background: var(--color-border);
}

.white_fon .progress-steps .step {
  background: var(--color-bg-main);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
}

.white_fon .progress-steps .step.active,
.white_fon .progress-steps .step.completed {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

/* Option cards */
.white_fon .option-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.white_fon .option-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}

.white_fon .option-card.selected {
  background: rgba(199, 140, 71, 0.1);
  border-color: var(--color-accent);
  box-shadow: inset 2px 2px 0 rgba(199, 140, 71, 0.2);
}

.white_fon .option-card .option-label {
  color: var(--color-text-secondary);
}

.white_fon .option-card .option-desc {
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   AI-ПОШУК
   ========================================================================== */
.white_fon .ai-search-panel {
  background: var(--color-bg-card) !important;
  border-left: 2px solid var(--color-accent);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.white_fon .ai-search-header {
  background: var(--color-bg-main) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.white_fon .ai-search-header h3 {
  color: var(--color-text-primary);
}

.white_fon .ai-search-header p {
  color: var(--color-text-tertiary);
}

/* Сообщения */
.white_fon .ai-search-messages {
  background: var(--color-bg-card) !important;
}

.white_fon .message-avatar {
  background: var(--color-bg-main) !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--color-border);
}

.white_fon .message-avatar .avatar-initial {
  color: var(--color-text-secondary) !important;
}

.white_fon .ai-message.user .message-avatar {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border-color: var(--color-accent);
}

/* Пузыри сообщений */
.white_fon .message-content {
  background: var(--color-bg-main) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
}

.white_fon .ai-message.assistant .message-content {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
}

.white_fon .ai-message.user .message-content {
  background: rgba(199, 140, 71, 0.15) !important;
  border: 1px solid rgba(199, 140, 71, 0.3) !important;
}

/* Input */
.white_fon .ai-search-input-wrap {
  background: var(--color-bg-main) !important;
  border-top: 1px solid var(--color-border) !important;
}

.white_fon .ai-search-input-wrap input {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

.white_fon .quick-prompts li {
  background: var(--color-bg-main);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.white_fon .quick-prompts li:hover {
  background: rgba(199, 140, 71, 0.1);
  border-color: var(--color-accent);
}

/* ==========================================================================
   QUICK ORDER
   ========================================================================== */
.white_fon .quick-order-content {
  background: var(--color-bg-card);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-brutal-lg);
}

.white_fon .quick-order-header h3 {
  color: var(--color-text-primary);
}

.white_fon .quick-order-subtitle {
  color: var(--color-text-tertiary);
}

.white_fon .quick-order-form label {
  color: var(--color-text-secondary);
}

.white_fon .quick-order-input {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.white_fon .quick-order-input:focus {
  background: var(--color-bg-card);
  border-color: var(--color-accent);
  box-shadow: none;
}

/* ==========================================================================
   МОБИЛЬНАЯ НАВИГАЦИЯ
   ========================================================================== */
.white_fon .mobile-bottom-nav {
  background: var(--color-bg-card);
  border-top: 2px solid var(--color-accent);
}

.white_fon .mobile-bottom-nav__item {
  color: var(--color-text-tertiary);
}

.white_fon .mobile-bottom-nav__item.is-active {
  color: var(--color-accent);
}

/* ==========================================================================
   МОБИЛЬНАЯ ШАПКА
   ========================================================================== */
.white_fon .headerMobile {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.white_fon .headerMobileSearch {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
}

.white_fon .headerMobileSearchBar input[type="search"] {
  background: var(--color-bg-main);
  border-color: var(--color-border);
}

.white_fon .headerMobileSearchBar .search-form button {
  background: var(--color-bg-main);
  border-color: var(--color-border);
}

html.white_fon .headerMobile .headerBtnFilter,
html.white_fon .headerMobile .headerBtnReg,
html.white_fon .headerMobile .headerCart,
.white_fon .headerMobile .headerBtnFilter,
.white_fon .headerMobile .headerBtnReg,
.white_fon .headerMobile .headerCart {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   ПАГИНАЦИЯ
   ========================================================================== */
.white_fon .custom-pagination a {
  color: var(--color-text-secondary);
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
}

.white_fon .custom-pagination a:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.white_fon .custom-pagination a.pagination-page.active {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
  box-shadow: 2px 2px 0 #241C1A;
}

/* ==========================================================================
   СТРАНИЦА ТОВАРА
   ========================================================================== */
.white_fon .productShorts a {
  color: var(--color-accent);
}

html.white_fon .productShorts div,
html.white_fon .productDelivery,
html.white_fon .productSubbuy,
html.white_fon .productTable,
.white_fon .productShorts div,
.white_fon .productDelivery,
.white_fon .productSubbuy,
.white_fon .productTable {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   РАЗНОЕ
   ========================================================================== */
.white_fon ::-webkit-scrollbar-track {
  background: var(--color-bg-main);
}

.white_fon ::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

.white_fon ::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* ==========================================================================
   REDUCED MOTION — отключаем анимации для пользователей с настройкой
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .white_fon .catalogItem,
  .white_fon .categoriesSlider .swiper-slide,
  .white_fon .partnersItem,
  .white_fon .blogCard,
  .white_fon .option-card,
  .white_fon .catalogFilter,
  .white_fon .checkbox-item {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   MOBILE — фильтры раскрыты по умолчанию (hover недоступен на touch)
   ========================================================================== */
@media (pointer: coarse) {
  .white_fon .catalogFilter .catalogFilterContext {
    opacity: 1;
    height: auto;
    overflow: visible;
    padding: 16px 0;
    margin-top: 16px;
  }
  .white_fon .catalogFilter .checkbox-item {
    transform: none;
    opacity: 1;
    transition-delay: 0s !important;
  }
}

@media (max-width: 768px) {
  /* Brutalist shadows слишком тяжёлые на маленьких экранах */
  .white_fon .catalogMegaMenu,
  .white_fon .tire-selector-content,
  .white_fon .quick-order-content {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
  /* Фильтры раскрыты */
  .white_fon .catalogFilter .catalogFilterContext {
    opacity: 1;
    height: auto;
    overflow: visible;
    padding: 16px 0;
    margin-top: 16px;
  }
  .white_fon .catalogFilter .checkbox-item {
    transform: none;
    opacity: 1;
  }

  /* Filter drawer — light bg instead of dark */
  .white_fon #fe-filters-root {
    background: var(--color-bg-card) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  }
  .white_fon #fe-filters-root .filter-drawer-close {
    color: var(--color-text-primary);
  }
  .white_fon .mobile-filter-trigger {
    color: var(--color-text-primary);
    border-color: var(--color-accent);
  }

  /* Sticky cart on product page — fix white-on-light */
  .white_fon .single-product .product .cart {
    background: var(--color-bg-card);
    box-shadow: 0 -2px 0 var(--color-accent);
  }
  .white_fon .single-product .product .cart .single_add_to_cart_button {
    background: var(--color-accent);
    color: #ffffff;
  }
}

/* ==========================================================================
   TABLET — 992px
   ========================================================================== */
@media (max-width: 992px) {
  /* Filter overlay — light instead of #10111e */
  .white_fon .headerFilter {
    background: var(--color-bg-card) !important;
    color: var(--color-text-primary);
  }
  .white_fon .headerFilter select {
    background: var(--color-bg-main);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
  }
  .white_fon .headerFilterSub span {
    color: var(--color-text-secondary);
  }
  .white_fon .headerFilter.active button {
    background: var(--color-accent);
    color: #ffffff;
  }

  /* Mobile header buttons — light bg */
  .white_fon .headerBtnFilter,
  .white_fon .headerBtnReg {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
  }
}

/* ==========================================================================
   SMALL MOBILE — 480px
   ========================================================================== */
@media (max-width: 480px) {
  .white_fon .catalogItem {
    border-width: 1px;
  }
  /* Reduce brutalist shadows further */
  .white_fon .catalogItem:hover,
  .white_fon .categoriesSlider .swiper-slide:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
}