/* ==========================================================================
   Фирменная тема в цветах IQOS.

   Подключается поверх front.css, когда в настройках выбрана тема «Фирменная
   IQOS». Классическое оформление при этом не меняется ни на строку - файл
   front.css общий для обеих тем, здесь только переопределения.

   Палитра снята с официального сайта iqos.com.ua (их же таблицы стилей,
   отсортировано по частоте использования):
     #34303D  основной тёмный - текст, кнопки, шапка
     #FFFDFB  тёплый белый - фон страницы
     #00D1D2  бирюзовый - акценты, плашки, подчёркивания
     #F6F4F0  тёплый светло-серый - фон блоков
     #E1E0E2  линии, #7B7881 приглушённый текст
     #C73636  красный для ошибок

   Бирюза используется только заливками: на белом фоне как цвет текста
   она даёт контраст 1.9:1 и не читается. Для наведения взят затемнённый
   тон #008C8D - он проходит по контрасту.
   ========================================================================== */

:root {
    --bg: #FFFDFB;
    --bg-soft: #F6F4F0;
    --text: #34303D;
    --text-muted: #7B7881;
    --line: #E1E0E2;

    /* Основной интерактивный цвет - сланец, как кнопки на официальном сайте */
    --accent: #34303D;
    --accent-dark: #1C1A20;

    --ok: #1F7A5C;
    --warn: #B07A2B;

    /* Собственные токены темы */
    --brand: #00D1D2;
    --brand-dark: #00B4B5;
    --brand-ink: #008C8D;
    --danger: #C73636;

    --radius: 16px;
}

/* --- Кнопки: пилюли, как на официальном сайте ---------------------------- */
/* Надписи набраны так же, как «Каталог устройств» на главном экране:
   прописные, кегль мельче обычного, буквы вразрядку */
.btn {
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
}
/* Кнопка действия - бирюзовая заливка с тёмной надписью. Белый текст
   на бирюзе не читается (контраст 1.9:1), тёмный даёт 6.6:1 */
.btn--primary { background: var(--brand); color: var(--accent); }
.btn--primary:hover { background: var(--brand-dark); color: var(--accent); }
.btn--primary:disabled { background: var(--line); color: var(--text-muted); }

.btn--ghost { border-color: var(--text); color: var(--text); }
.btn--ghost:hover { border-color: var(--brand-ink); color: var(--brand-ink); background: var(--bg-soft); }

/* --- Наведение на ссылки ------------------------------------------------- */
a:hover,
.nav__link:hover,
.nav__submenu a:hover,
.subcategories__item:hover,
.region-switch__button:hover,
.ctree__rootlink:hover .ctree__rootname { color: var(--brand-ink); }

.nav__link:hover, .nav__submenu a:hover { background: var(--bg-soft); }
.subcategories__item:hover, .category-tile:hover { border-color: var(--brand); }
:focus-visible { outline-color: var(--brand-ink); }

/* --- Бирюза заливками ---------------------------------------------------- */
.promo-bar { background: var(--brand); color: var(--text); }
.promo-bar a { color: var(--text); }
.badge--new { background: var(--brand); color: var(--text); }
.badge--hit { background: var(--accent); color: #FFFDFB; }
.faq__question::after { color: var(--brand-ink); }
.nav__grouptitle:hover { color: var(--brand-ink); border-bottom-color: var(--brand); }

/* --- Красное остаётся красным -------------------------------------------- */
.badge--sale { background: var(--danger); }
.alert--error { background: rgba(199, 54, 54, .1); color: var(--danger); }
.required, .cart__discount, .cart-item__remove:hover,
.product__stock.is-out, .quick-view__stock.is-out { color: var(--danger); }
.price--old { color: var(--text-muted); }

/* Выбранный способ доставки: рамка сланцем, подсветка бирюзой */
.delivery-option:has(input:checked), .payment-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(0, 209, 210, .08);
}

/* --- Главный экран -------------------------------------------------------- */
/* Чёрный прямоугольник заменён на фирменный сланец, кнопка на нём -
   тёплый белый; бирюзовая черта отделяет кнопки от текста */
.hero__box { background: var(--accent); }
.hero__actions { border-top-color: rgba(0, 209, 210, .45); }
/* Кнопки на тёмном главном экране: первая бирюзовая, вторая контурная */
.btn--light { background: var(--brand); color: var(--accent); }
.btn--light:hover { background: var(--brand-dark); color: var(--accent); }
.btn--outline { border-color: rgba(0, 209, 210, .5); color: #FFFDFB; }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }

/* --- Знак логотипа: градиент и медленное вращение ------------------------- */
/* Как на баннерах официального сайта: контур переливается и не спеша
   поворачивается. Вращение вокруг центра описанной окружности (32 32) -
   углы кольца при этом не выходят за границы viewBox и не срезаются.
   Один оборот - 20 секунд: в шапке движение должно читаться боковым
   зрением, а не перетягивать внимание с меню */
.logo__mark path { fill: url(#logo-mark-gradient); }

.logo__mark {
    animation: logo-mark-spin 20s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes logo-mark-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    .logo__mark { animation: none; }
}

/* --- Шапка и подвал ------------------------------------------------------ */
.header { background: var(--bg); }
.footer { background: var(--bg-soft); }
.logo__name { color: var(--text); }
.logo__tagline { color: var(--brand-ink); }

/* Счётчики в шапке: тёмные кружки вместо красных */
.cart-link__count { background: var(--accent); color: #FFFDFB; }
.nav__personal-count { background: var(--accent); color: #FFFDFB; }

/* --- Мелочи -------------------------------------------------------------- */
.pagination__item.is-active { background: var(--accent); border-color: var(--accent); color: #FFFDFB; }
.qty-stepper:focus-within { border-color: var(--brand); }
.contacts-step__num { background: var(--accent); }
.contact-chip--max { background: var(--accent); }

/* Полоса «Постоянным покупателям»: сразу в выделенном виде, как при
   наведении - бирюзовый заголовок и подчёркнутая ссылка */
.loyalty-bar__title { color: var(--brand-ink); }
.loyalty-bar__link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }