/* ============================================================
   KMSHOP — фирменная тема Kerama Marazzi
   Подключается ПОСЛЕДНИМ после styles.css и переопределяет
   базовую тему РусКерамики (жёлтый акцент) на фирменный
   красный #e30613, тёмный header, белый фон.
   ============================================================ */

:root {
    /* Фирменная палитра Kerama Marazzi */
    --km-red:        #e30613;
    --km-red-dark:   #b20510;
    --km-red-soft:   #fdecec;
    --km-ink:        #1d2126;
    --km-ink-soft:   #2a2f35;
    --km-on-dark:    #ffffff;
    --km-muted-dark: #b7bec6;

    /* Переопределяем акцент базовой темы (бывший жёлтый) */
    --c-yellow:      var(--km-red);

    /* Типографика — Inter, как у референса shop.kerama-marazzi.ru */
    --ff-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --ff-text:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

body { background: var(--c-bg-main); }

/* ------------------------------------------------------------
   Текстовый логотип «KERAMA MARAZZI»
   ------------------------------------------------------------ */
.km-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
}
.km-logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--km-red);
    color: var(--km-on-dark);
    font-family: var(--ff-heading);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.02em;
}
.km-logo__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.km-logo__brand {
    font-family: var(--ff-heading);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-anthracite-dark);
    white-space: nowrap;
}
.km-logo__sub {
    font-family: var(--ff-text);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-second);
    white-space: nowrap;
}
/* Логотип на тёмном фоне (header / scroll-header) */
.site-header .km-logo__brand { color: var(--km-on-dark); }
.site-header .km-logo__sub   { color: var(--km-muted-dark); }
/* Логотип в футере */
.site-footer .km-logo__brand { color: var(--km-on-dark); }
.site-footer .km-logo__sub   { color: var(--km-muted-dark); }

/* ------------------------------------------------------------
   Header — тёмный, как у официального магазина
   ------------------------------------------------------------ */
.site-header {
    background: var(--km-ink);
    border-bottom: none;
}
.site-header .utility-nav__link,
.site-header .catalog-nav__link {
    color: var(--km-on-dark);
}
.site-header .utility-nav__link:hover,
.site-header .catalog-nav__link:hover {
    color: var(--km-red);
}
.site-header .header-icon-btn {
    color: var(--km-on-dark);
    border-color: var(--km-ink-soft);
}
.site-header .header-icon-btn:hover {
    color: var(--km-red);
    border-color: var(--km-red);
}
.site-header .phone-pill__num   { color: var(--km-on-dark); }
.site-header .phone-pill__hours { color: var(--km-muted-dark); }
.site-header .phone-pill__icon  { background: var(--km-red); box-shadow: none; }
.site-header .phone-pill__icon svg path { stroke: var(--km-on-dark); }

/* Компактная шапка при скролле — тоже тёмная */
.site-header--scrolled { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }

/* Кнопка «Наш каталог» в шапке — красная */
.site-header .catalog-nav__link--catalog {
    background: var(--km-red);
    color: var(--km-on-dark);
}
.site-header .catalog-nav__link--catalog:hover {
    background: var(--km-red-dark);
    color: var(--km-on-dark);
}

/* Поиск в тёмной шапке: поле белое, кнопка красная */
.site-header .site-search__submit { background: var(--km-red); }
.site-header .site-search__submit:hover { background: var(--km-red-dark); }
.site-header .site-search__submit svg circle,
.site-header .site-search__submit svg path { stroke: var(--km-on-dark); }

/* Мегаменю остаётся светлым — тёмная шапка его не касается */
.catalog-dropdown { color: var(--c-text-main); }
.catalog-dropdown a { color: inherit; }
.catalog-dropdown__sidebar-head { color: var(--c-text-second); }

/* ------------------------------------------------------------
   Кнопки — фирменный красный
   ------------------------------------------------------------ */
.btn--primary {
    background: var(--km-red);
    color: var(--km-on-dark);
}
.btn--primary:hover {
    background: var(--km-red-dark);
    color: var(--km-on-dark);
}

.btn--secondary {
    background: var(--km-red);
    color: var(--km-on-dark);
}
.btn--secondary:hover {
    background: var(--km-red-dark);
    color: var(--km-on-dark);
}

.btn--ghost {
    background: var(--c-bg-main);
    color: var(--km-red);
    border-color: var(--km-red);
}
.btn--ghost:hover {
    background: var(--km-red);
    color: var(--km-on-dark);
}

.btn--soft:hover {
    border-color: var(--km-red);
    color: var(--km-red);
}

/* ------------------------------------------------------------
   Акцентные элементы (в базовой теме были жёлтыми)
   ------------------------------------------------------------ */
.tag {
    background: var(--km-red);
    color: var(--km-on-dark);
}
.tag--accent {
    background: var(--c-bg-main);
    color: var(--km-red);
}

.hero__mark {
    background: var(--km-red);
    color: var(--km-on-dark);
    padding: 0 8px;
}

.cart-btn__badge {
    background: var(--km-red);
    color: var(--km-on-dark);
}

.feature-card__icon,
.feature-tile__icon {
    background: var(--km-red-soft);
}
.feature-card__icon svg *,
.feature-tile__icon svg * {
    stroke: var(--km-red);
}

.product-card__badge {
    background: var(--km-red);
    color: var(--km-on-dark);
}

.range-slider__progress { background: var(--km-red); }

.pagination__btn--active,
.pagination__btn[aria-current="page"] {
    background: var(--km-red);
    border-color: var(--km-red);
    color: var(--km-on-dark);
}
.pagination__btn--active:hover {
    background: var(--km-red-dark);
    border-color: var(--km-red-dark);
    color: var(--km-on-dark);
}

.recent-slider__arrow:hover {
    background: var(--km-red);
    color: var(--km-on-dark);
}

/* Акцентная ссылка в меню каталога */
.catalog-nav__link--accent { color: var(--km-red); }
.site-header .catalog-nav__link--accent { color: var(--km-red); }
.site-header .catalog-nav__link--accent:hover { color: var(--km-on-dark); }

/* ------------------------------------------------------------
   Карточки товаров — плитка, белый фон
   ------------------------------------------------------------ */
.product-card {
    background: var(--c-bg-main);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card, 4px);
    overflow: hidden;
    transition: box-shadow var(--tr), border-color var(--tr), transform var(--tr);
}
.product-card:hover {
    border-color: var(--km-red);
    box-shadow: 0 8px 24px rgba(227, 6, 19, 0.08);
}
.product-card__title a:hover { color: var(--km-red); }
.product-card__price-now { color: var(--c-text-base); }

/* ------------------------------------------------------------
   Футер — тёмный, ховеры красные
   ------------------------------------------------------------ */
.site-footer { background: var(--km-ink); }
.footer-col__list a:hover,
.footer-contacts a:hover,
.site-footer__bottom a:hover {
    color: var(--km-red);
}
.footer-contacts__icon svg path,
.footer-contacts__icon svg circle,
.footer-contacts__icon svg rect {
    stroke: var(--km-on-dark);
}

/* ------------------------------------------------------------
   Hero — светлый фон, красные акценты
   ------------------------------------------------------------ */
.hero__slide { background: var(--c-bg-second); }
.slider-arrow--dark { background: var(--km-red); }
.slider-arrow--dark:hover { background: var(--km-red-dark); }
.slider-arrow--dark svg path { stroke: var(--km-on-dark); }

/* ------------------------------------------------------------
   Корзина / оформление
   ------------------------------------------------------------ */
.cart-card { background: var(--c-bg-main); }
.cart-summary__row--total dd { color: var(--km-red); }

/* ------------------------------------------------------------
   Мобильная нижняя навигация — тёмная
   ------------------------------------------------------------ */
.mobile-bottom-nav {
    background: var(--km-ink);
    border-top: 1px solid var(--km-ink-soft);
}
.mobile-bottom-nav__btn { color: var(--km-on-dark); }

/* ------------------------------------------------------------
   Адаптивность: мелкие правки под мобильные
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .km-logo__mark { width: 34px; height: 34px; font-size: 15px; }
    .km-logo__brand { font-size: 14px; }
    .km-logo__sub { font-size: 9px; }
}