/* ============================================================================
   ФОН САЙТА — ПРОБА (30.08.2026, просьба Михаила)

   Подключается ТОЛЬКО по куке `bg_test`: включить — `?bg_test=1`, выключить —
   `?bg_test=0`. Обычные покупатели этих правок не видят.

   Что меняется:
     • полотно сайта становится #F9F9F9 вместо белого;
     • верхняя полоса (город, адрес, меню, почта) — чуть темнее полотна,
       чтобы отделяться от него;
     • блоки, которые были прозрачными и на сером «растворились» бы,
       получают белую подложку: плитки товаров, плитки подкатегорий,
       карточка товара, фильтры.
   ========================================================================= */

html,
body {
    background-color: #F9F9F9;
}

/* Верхняя полоса — белая (правка Михаила 30.08.2026). Сначала её сделали
   темнее полотна, чтобы отделялась, но со светлой шапкой и тенью под ней
   разделение и так читается, а тёмная полоса выглядела лишней. */
.header-top {
    background-color: #fff;
}

/* ---- что остаётся белым --------------------------------------------------
   Правило простое (сформулировал Михаил 30.08.2026): серым может быть только
   ПОЛОТНО, а смысловой блок — белым. Ниже два разных случая.

   1. Блоки БЕЗ своего фона: держались на белом полотне, на сером
      растворяются. */
.product:not(.home-product),
.catalog-slider-second .catalog-item,
.filters-block,
.mse2-ac-list,
.cvg-prices,
.advantages-item {
    background-color: #fff;
}

/* Карточка товара разобрана на блоки (правка Михаила 30.08.2026): сама
   обёртка лежит на полотне, а белыми становятся её части — галерея,
   середина с выбором и правая колонка покупки. Раньше вся карточка была
   одним белым полем во всю ширину. */
.product-page-inner {
    background-color: transparent;
}
.product-img,
.product-info,
.product-cart,
.product-right .shares,
.product-right .product-buy {
    background-color: #fff;
    border-radius: 18px;
}
.product-img,
.product-info {
    padding: 16px;
}
.product-right .shares,
.product-right .product-buy {
    padding: 12px 14px;
}

/* 2. Блоки, у которых фон был РОВНО #F9F9F9 — то есть теперь ровно цвет
      полотна. Их сливание и было тем, что Михаил показал на скриншоте
      «как не должно быть»: плитки разделов на главной, товар дня, блок
      покупки на карточке. Шапка тоже белая: её кнопки (корзина, избранное,
      сравнение) серые, на сером полотне они пропадали. */
/* ⚠ Селекторы намеренно «тяжёлые»: у темы товар дня покрашен правилом
   `.home .product`, и простого `.home-product` не хватало — серый побеждал
   по весу (поймано живьём 30.08.2026). */
.header,
.catalog-item,
.home .product.home-product,
.product-cart {
    background-color: #fff;
}

/* ---- шапка на сером полотне (правка Михаила 30.08.2026) ------------------
   Шапка остаётся белой, но отделяется от полотна ТЕНЬЮ, а не полосой цвета:
   при прокрутке сразу видно, что она лежит поверх страницы.
   Кнопки шапки были залиты серым — на сером полотне это читалось как
   «дырки». Теперь у них белая заливка и серый контур.
   ⚠ Класс `.headers_icon` носят и КРАСНЫЕ кнопки — «Трейд ин» и телефон на
   телефоне, — поэтому они исключены поимённо. Перечислять нужные кнопки
   вместо этого нельзя: у кнопки геолокации в мобильной шапке своего класса
   нет вовсе (проверено живьём 30.08.2026), и она осталась бы серой. */
/* ⚠ Тень нужна ДВУМ элементам. При прокрутке шапка уезжает вверх, а сверху
   залипает отдельная полоса `.header-bottom.sticky` — своя, без тени. Пока
   тень висела только на `.header`, при прилипании она пропадала (заметил
   Михаил 30.08.2026). */
.header,
.header-bottom.sticky {
    box-shadow: 0 1px 2px #0000001a;
}

.header .headers_icon:not(.tradein_icon):not(.f-phone) {
    background-color: #fff;
    border: 1px solid #E3E4E8;
}

/* 3. Страницы без карточек (доставка, контакты, пустая корзина): текст
      лежал прямо на полотне, без блока. Подкладываем белым — как у
      карточек. Каталог, избранное и сравнение сюда НЕ входят: там на
      полотне лежат белые плитки товаров, и подложка была бы лишней. */
.text-page > .container,
.cart-page > .container {
    background-color: #fff;
    border-radius: 16px;
    padding-top: 20px;
    padding-bottom: 24px;
}


/* ---- добор по обходу глазами (30.08.2026, замечания Михаила) -------------- */

/* Баннер на главной начинался вплотную под шапкой: две белые полосы
   склеивались в одну. Отступ отделяет их друг от друга; товар дня рядом
   получает такой же, иначе колонки разъедутся по высоте. */
.home-slider,
.home .product.home-product {
    margin-top: 18px;
}

/* Панель «Все фильтры / Сортировать» лежала прямо на полотне. Это такой же
   смысловой блок, как карточка, — белый фон и скругление. */
.category-filter-sort {
    background-color: #fff;
    border-radius: 14px;
    padding: 8px 16px;
}

/* Характеристики на карточке товара: рамка у блока была, а фона нет. */
.tabs-body {
    background-color: #fff;
}

/* ---- рамка у белых блоков (правка Михаила 30.08.2026) --------------------
   На сером полотне белый блок без рамки выглядит «вырезанным»: у плиток
   товаров, подкатегорий, товара дня, блока покупки и характеристик рамка
   была изначально, а у остальных нет. Добираем — тем же цветом, что у
   существующих (#E9ECEE), чтобы блоки не отличались друг от друга.
   ⚠ Перечислены только те, у кого рамки НЕ было: проверено живьём на
   каталоге, карточке товара и главной. Задавать её всем подряд нельзя —
   у блока выбора цвета своя рамка чуть светлее (#EDEFF1), и она сделана
   такой намеренно. */
.catalog-item,
.category-filter-sort,
.filters-block,
.product-img,
.product-info,
.product-right .shares,
.text-page > .container,
.cart-page > .container,
.mse2-ac-list,
.cvg-prices,
.advantages-item {
    border: 1px solid #E9ECEE;
}