@import url('fonts.css');
:root {
    /* Единое скругление для всех карточек, картинок, инпутов и панелей */
    /* Меняешь здесь одну цифру — меняется весь сайт */
    --main-radius: 32px;
}

/* Сброс стилей браузера по умолчанию */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ====================================================
   🔥 БАЗА: СКРОЛЛ И МАГНИТЫ (ФИНАЛЬНО И НАДЕЖНО) 🔥
   ==================================================== */
/* Нативные магниты браузера работают только на HTML */
html {
    margin: 0;
    padding: 0;
    scroll-snap-type: none !important;
    scroll-behavior: smooth !important;
    overflow-y: scroll !important;
}

/* Убираем конфликт со скроллом в body */
/* ====================================================
   ТОКЕНЫ ОФОРМЛЕНИЯ
   Три радиуса, три уровня текста, ноль цветных акцентов.
   До этого по шаблонам было двенадцать радиусов, двенадцать оттенков
   серого и девять «фирменных» синих — глаз читал это не как разнообразие,
   а как «собрано разными руками».

   Главное действие — белая заливка, второстепенное — тонкая обводка.
   Цвет остаётся только там, где он что-то значит: ошибка и успех.
   ==================================================== */
:root {
    --r-pill: 999px;   /* кнопки, значки, чипы */
    --r-card: 24px;    /* карточки, панели, модальные окна */
    --r-sm: 12px;      /* поля ввода, мелкие плитки */

    --t-1: #f5f5f7;                     /* основной текст */
    --t-2: rgba(255, 255, 255, .62);    /* второстепенный */
    --t-3: rgba(255, 255, 255, .38);    /* подписи и приглушённое */

    --line: rgba(255, 255, 255, .1);    /* волосяная линия */
}

/* Утилиты. Специфичность одинарная — hover:-варианты Tailwind
   (класс + псевдокласс) перебивают их при любом порядке подключения. */
.nt-t1 { color: var(--t-1); }
.nt-t2 { color: var(--t-2); }
.nt-t3 { color: var(--t-3); }

.nt-r-pill { border-radius: var(--r-pill); }
.nt-r-card { border-radius: var(--r-card); }
.nt-r-sm { border-radius: var(--r-sm); }

body {
    margin: 0;
    padding: 0;
    background-color: #000 !important;
    scroll-snap-type: none !important;
    overflow-y: visible !important;
}

body::before {
    display: none;
}

/* ЗАГОЛОВКИ
   Раньше здесь на все h1–h6 висел градиент в серый: ни один заголовок на сайте
   не был чисто белым, всё выглядело выцветшим. Теперь заголовок — максимальный
   контраст, а приглушение делается точечно там, где оно осмысленно. */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff;
    letter-spacing: -0.02em;
    font-family: var(--nt-display, 'Unbounded'), var(--nt-font, 'Inter'), system-ui, -apple-system, sans-serif;
}

/* ====================================================
   УНИВЕРСАЛЬНЫЙ КЛАСС СТЕКЛА (ЧЕРНОЕ СТЕКЛО)
   ==================================================== */
.glass-panel {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: var(--main-radius) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ====================================================
   МОБИЛЬНОЕ МЕНЮ (бургер в шапке)
   Классы своими руками, а не через Tailwind: tailwind.build.css —
   статическая сборка, а npm/node недоступны в момент правки, чтобы
   пересобрать её с новыми утилитами (md:hidden, top-[72px] и т.п.).
   ==================================================== */
.nt-mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    padding: 8px;
    margin-right: -8px;
    cursor: pointer;
}

.nt-mobile-menu-panel {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 72px;
    z-index: 40;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nt-mobile-menu-panel.is-open {
    display: block;
}

@media (min-width: 768px) {

    .nt-mobile-menu-btn,
    .nt-mobile-menu-panel {
        display: none !important;
    }
}

/* Убираем все старые глухие фоны у секций */
section:not(.snap-layer):not(#service-maintenance),
.service-gallery,
#computer-services,
#advantages-section,
#cases-section,
#about-section,
#contacts-section {
    background-color: transparent !important;
}

header {
    height: 80px;
    display: flex;
    align-items: center;
    /* Прозрачная в самом верху страницы, затемняется при скролле (класс .scrolled из header.js) */
    background-color: transparent;
    border: none !important;
    box-shadow: none;
    transition: height .3s ease, background-color .3s ease, backdrop-filter .3s ease;
}

header.scrolled {
    height: 60px;
    padding: 0;
    background-color: rgba(8, 9, 12, .82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

header.scrolled .container,
header.scrolled .nt-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

header nav {
    gap: 2rem !important;
}

/* Страницы, где сверху нет затемнения: шапка с фоном сразу, не по скроллу */
header.nt-header--solid {
    background-color: rgba(8, 9, 12, .82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Навигация приглушена: белым горит только текущий раздел, за счёт этого
   шапка перестаёт быть сплошной строкой одинаково громких слов.
   Контраст приглушённого: 8.9:1 на #0a0a0a — читается уверенно. */
header nav a {
    color: rgba(255, 255, 255, .62);
    transition: color .25s ease, text-shadow .35s ease, opacity .25s ease;
}

header nav a:hover {
    color: #fff;
}

/* Текущий раздел (класс ставит header.js) */
header nav a.is-active {
    color: #fff !important;
    text-shadow:
        0 0 8px rgba(255, 255, 255, .55),
        0 0 20px rgba(255, 255, 255, .22);
}

header nav a.is-active:hover {
    text-shadow:
        0 0 10px rgba(255, 255, 255, .7),
        0 0 24px rgba(255, 255, 255, .3);
}

/* ---- Утилиты справа: корзина и язык, отделены от навигации ---- */
.nt-utils {
    display: flex;
    align-items: center;
}

/* Круглые кнопки выезжают из-под первой при наведении: под корзиной —
   сравнение и избранное, под кодом языка — остальные языки.
   Столбик начинается вплотную к иконке (зазор закрыт внутренним padding),
   иначе курсор проваливается между ними и блок закрывается на полпути. */
.nt-drop {
    position: relative;
}

.nt-drop__list {
    position: absolute;
    top: 100%;
    /* Корзина прижата к правому краю обёртки — круги встают ровно под ней */
    right: 0;
    width: 44px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s;
}

.nt-drop:hover .nt-drop__list,
.nt-drop:focus-within .nt-drop__list {
    opacity: 1;
    visibility: visible;
}

/* Кнопки выезжают из-под корзины друг за другом, а не появляются разом */
.nt-drop__list .nt-round-btn {
    transform: translateY(-14px);
    transition: transform .26s cubic-bezier(.2, .8, .3, 1),
        color .2s ease, border-color .2s ease, background-color .2s ease;
}

.nt-drop__list .nt-round-btn:nth-child(2) {
    transition-delay: .05s;
}

.nt-drop:hover .nt-drop__list .nt-round-btn,
.nt-drop:focus-within .nt-drop__list .nt-round-btn {
    transform: translateY(0);
}

/* На телефоне наведения нет — избранное и сравнение лежат в бургер-меню */
@media (max-width: 767px) {
    .nt-drop__list {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .nt-drop__list,
    .nt-drop__list .nt-round-btn {
        transition: none;
    }
}

.nt-lang {
    display: none;
    position: relative;
    /* Корзина и язык — разные по смыслу вещи: между ними воздух вместо черты */
    margin-left: 20px;
}

@media (min-width: 768px) {
    .nt-lang {
        display: block;
    }
}

/* Главный баннер (Hero) */
.hero-section {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
    scroll-snap-align: start !important;
}

.hero-glass {
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-metrics {
    margin-top: 64px !important;
    margin-bottom: 96px !important;
}

/* ====================================================
   СТАНДАРТИЗИРОВАННЫЕ КНОПКИ
   ==================================================== */
.catalog-btn,
.slide-content button,
.nt-btn-add,
.admin-btn-primary,
.btn-primary {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: 1px solid #ffffff !important;
    border-radius: 9999px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    width: max-content;
}

.catalog-btn:hover,
.slide-content button:hover,
.nt-btn-add:hover,
.admin-btn-primary:hover,
.btn-primary:hover {
    background: #e5e7eb !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

.btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ====================================================
   ГАЛЕРЕЯ СЛАЙДОВ
   ==================================================== */
.service-gallery {
    position: relative !important;
    padding-top: 24px !important;
    margin-bottom: 96px !important;
}

.gallery-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.gallery-slides {
    display: flex;
    transition: transform 0.5s ease;
}

.gallery-slide {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
}

.gallery-slide .slide-content {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(16px);
    border-radius: var(--main-radius) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 48px;
    max-width: 1400px;
    width: 90%;
    min-height: 504px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    padding-bottom: 96px !important;
}

.gallery-slide .slide-content .text-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.gallery-slide .slide-content .image-column img {
    width: 100%;
    max-width: 552px;
    border-radius: var(--main-radius) !important;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

#printing-services h2 {
    display: none;
}

.gallery-controls {
    position: absolute !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    display: flex;
    align-items: center;
    gap: 16px;
}

.gallery-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 40px !important;
    padding: 0 24px !important;
    border-radius: 40px;
}

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

.gallery-dot.active {
    width: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
}

.gallery-arrows {
    display: flex;
    gap: 16px;
}

.nav-button {
    position: relative;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
}

.nav-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.nav-button svg {
    width: 24px !important;
    height: 24px !important;
}

/* ====================================================
   ОБЩИЕ СЕКЦИИ
   ==================================================== */
#advantages-section h2,
#cases-section h2 {
    margin-bottom: 32px !important;
}

/* Слайдер партнеров */
.partners-slider {
    overflow: hidden;
    padding: 32px 0;
}

.partners-slider>div {
    animation: scroll 20s linear infinite;
    width: 200%;
    display: flex;
    align-items: center;
}

.partner-logo {
    width: 160px;
    padding: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(60%) brightness(120%) opacity(0.7);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-logo img:hover {
    filter: grayscale(0%) brightness(100%) opacity(1);
    transform: scale(1.05);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Адаптив галереи */
@media (max-width: 768px) {
    .gallery-slide .slide-content {
        grid-template-columns: 1fr;
        padding: 32px !important;
        gap: 32px !important;
        padding-bottom: 96px !important;
    }

    .gallery-controls {
        bottom: 32px !important;
    }
}

section .container,
#Partners-Section .container,
header .container {
    max-width: 1400px !important;
    width: 90% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#about-section .glass-panel {
    max-width: 100% !important;
}

/* Бесконечная карусель (Кейсы) */
.cases-infinite-track {
    animation: scroll-cases 40s linear infinite;
}

.group:hover .cases-infinite-track {
    animation-play-state: paused;
}

@keyframes scroll-cases {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* ==========================================
   АДМИН-ПАНЕЛЬ И ТАБЛИЦЫ
   ========================================== */
.nt-input {
    width: 100%;
    background-color: #000000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--main-radius);
    padding: 16px 24px;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.nt-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: #0a0a0a;
}

.nt-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

.nt-panel {
    background-color: #18181b;
    padding: 32px;
    border-radius: var(--main-radius);
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 32px;
    position: relative;
}

.nt-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nt-card {
    background-color: #000000;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: var(--main-radius);
    position: relative;
    transition: border-color 0.3s ease;
}

.nt-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.nt-delete-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #4b5563;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 8px;
}

.nt-delete-btn:hover {
    color: #ef4444;
}

.admin-body {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
}

.admin-sidebar {
    background-color: #0a0a0a !important;
    border-right: 1px solid #1a1a1a;
}

.admin-card {
    background-color: #111111 !important;
    border: 1px solid #1a1a1a !important;
    border-radius: var(--main-radius) !important;
    padding: 24px;
}

.admin-input {
    background-color: #000000 !important;
    border: 1px solid #333 !important;
    color: #ffffff !important;
    border-radius: var(--main-radius) !important;
    padding: 8px 16px;
}

.admin-tab-active {
    border-bottom: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.dashboard-body {
    background-color: #000000;
    color: #ffffff;
    margin: 0;
    overflow: hidden;
}

.dashboard-layout {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 280px;
    background-color: #09090b;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.sidebar-logo {
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
}

.sidebar-nav a {
    color: #9ca3af;
    padding: 16px 32px;
    transition: 0.2s;
    border-left: 2px solid transparent;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    color: #ffffff;
    background-color: #111111;
    border-left-color: #ffffff;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.topbar {
    height: 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
}

.profile-badge {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.content-area {
    padding: 48px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ====================================================
   🔥 ЛИПКИЕ СЛОИ (APPLE EFFECT) ДЛЯ КАТАЛОГА 🔥
   ==================================================== */

/* Блоки 1, 2, 3: Прилипают к экрану и наезжают друг на друга */
.snap-layer {
    position: sticky !important;
    top: 0 !important;
    min-height: 100vh !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    /* Усиливаем магнит */
    background-color: #000 !important;
    opacity: 1 !important;
    /* Всегда видимые, никаких черных дыр! */
    visibility: visible !important;
    overflow: hidden !important;
}

/* Строгая иерархия, чтобы блок 2 перекрывал блок 1, а блок 3 - второй */
#printing-equipment {
    z-index: 10 !important;
}

#post-printing-equipment {
    z-index: 20 !important;
}

#consumables {
    z-index: 30 !important;
}

/* Блок 4 (Сервис): Обычный блок, но накрывает все остальные при скролле */
#service-maintenance {
    position: relative !important;
    min-height: 100vh !important;
    z-index: 40 !important;
    scroll-snap-align: start !important;
    background-color: #000 !important;
}

/* Остальные секции сайта, чтобы они тоже магнитились и не ломались */
section:not(.snap-layer):not(#service-maintenance) {
    scroll-snap-align: start !important;
}

/* =========================================
   АНИМАЦИИ ВНУТРИ СЕКЦИЙ (ПРИ СРАБАТЫВАНИИ .active)
   ========================================= */

/* Текст (выезжает слева) */
.print-text-side,
.post-print-text-side,
.consumables-text-side,
.service-maintenance-text-side,
.text-side {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease;
}

/* Картинки (выезжают справа и слева) */
.print-image-side,
.consumables-image-side,
.image-side {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-print-image-side,
.service-maintenance-image-side {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Карточки товаров (прячутся внизу) */
.fade-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* КОГДА БЛОК ПОЛУЧАЕТ КЛАСС .active ОТ JS -> ВСЁ ПРОЯВЛЯЕТСЯ */
section.active .print-text-side,
section.active .post-print-text-side,
section.active .consumables-text-side,
section.active .service-maintenance-text-side,
section.active .text-side {
    opacity: 1;
    transform: translateX(0);
}

section.active .print-image-side,
section.active .consumables-image-side,
section.active .post-print-image-side,
section.active .service-maintenance-image-side,
section.active .image-side {
    opacity: 1;
    transform: translateX(0);
}

section.active .fade-card {
    opacity: 1;
    transform: translateY(0);
}

/* Каскадная задержка для карточек */
section.active .fade-card:nth-child(1) {
    transition-delay: 0.1s;
}

section.active .fade-card:nth-child(2) {
    transition-delay: 0.2s;
}

section.active .fade-card:nth-child(3) {
    transition-delay: 0.3s;
}

section.active .fade-card:nth-child(4) {
    transition-delay: 0.4s;
}

section.active .fade-card:nth-child(5) {
    transition-delay: 0.5s;
}

section.active .fade-card:nth-child(6) {
    transition-delay: 0.6s;
}

section.active .fade-card:nth-child(7) {
    transition-delay: 0.7s;
}

section.active .fade-card:nth-child(8) {
    transition-delay: 0.8s;
}

/* ==========================================================================
   ✦ LUX — ПРЕМИАЛЬНЫЙ СЛОЙ v2 (scope: .lux)
   Matte black · графит · белая типографика · один фиолетовый акцент из лого.
   Инженерный каркас (индексы, рулетки, скобки), металлические блики, глубина.
   Аддитивно и изолированно: admin и старую разметку не затрагивает.
   ========================================================================== */

/* Отключаем принудительный scroll-snap на страницах со слоем .lux — плавный кинематографичный скролл */
html:has(.lux) {
    scroll-snap-type: none !important;
}

.lux {
    --bg: #060607;
    --bg-2: #0b0b0d;
    --surface: #101013;
    --surface-2: #16161a;
    --text: #f6f6f8;
    --dim: #9a9aa2;
    --faint: #62626b;
    --hair: rgba(255, 255, 255, 0.08);
    --hair-2: rgba(255, 255, 255, 0.16);
    --accent: #8f7dff;
    --accent-2: #b4a6ff;
    --accent-soft: rgba(143, 125, 255, 0.14);
    --metal: linear-gradient(180deg, #ffffff 0%, #e8e8ee 42%, #9d9da6 100%);
    --r: 20px;
    --r-lg: 28px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    color: var(--text);
    letter-spacing: -0.014em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

.lux ::selection {
    background: var(--accent-soft);
}

/* ===================== АНИМИРОВАННЫЙ ФОН ===================== */
.lux-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% -10%, #0e0e12 0%, var(--bg) 55%);
}

.lux-bg-grid {
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 80%);
    animation: lux-grid-drift 24s linear infinite;
}

@keyframes lux-grid-drift {
    to {
        transform: translateY(88px);
    }
}

.lux-bg-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    left: 50%;
    top: -20vw;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(143, 125, 255, 0.10), transparent 70%);
    filter: blur(30px);
    animation: lux-glow-float 18s ease-in-out infinite;
}

@keyframes lux-glow-float {

    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: .8;
    }

    50% {
        transform: translate(-42%, 4vw);
        opacity: 1;
    }
}

.lux-bg-noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Контент над фоном */
.lux>*:not(.lux-bg) {
    position: relative;
    z-index: 1;
}

/* ===================== ТИПОГРАФИКА ===================== */
.lux h1,
.lux h2,
.lux h3,
.lux h4 {
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    display: block;
    width: auto;
    letter-spacing: -0.035em;
    line-height: 1.03;
    font-weight: 600;
    text-wrap: balance;
}

.lux .display {
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

/* Металлический заголовок (серебро, не цвет) */
.lux .metal {
    background: var(--metal) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.lux-lead {
    font-size: clamp(18px, 1.9vw, 23px);
    line-height: 1.5;
    color: var(--dim);
    font-weight: 400;
}

.lux-mono {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.lux-dim {
    color: var(--dim);
}

.lux-faint {
    color: var(--faint);
}

.lux-accent {
    color: var(--accent);
}

/* ===================== ИНЖЕНЕРНЫЙ КАРКАС ===================== */
/* Спина секции: индекс + подпись + рулетка */
.lux-sechead {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 48px;
}

.lux-idx {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.1em;
}

.lux-sechead .lux-mono {
    white-space: nowrap;
}

.lux-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--hair-2), var(--hair) 30%, transparent);
    position: relative;
}

.lux-rule::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 1px;
    height: 7px;
    background: var(--hair-2);
}

/* Рамка-viewport с угловыми скобками */
.lux-frame {
    position: relative;
}

.lux-bracket {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid var(--hair-2);
    z-index: 3;
    pointer-events: none;
}

.lux-bracket.tl {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}

.lux-bracket.tr {
    top: -1px;
    right: -1px;
    border-left: 0;
    border-bottom: 0;
}

.lux-bracket.bl {
    bottom: -1px;
    left: -1px;
    border-right: 0;
    border-top: 0;
}

.lux-bracket.br {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}

/* Тех-метка (плавающая подпись у объектов) */
.lux-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.lux-tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

/* Вертикальная рулетка-рейл */
.lux-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--hair);
    background-image: repeating-linear-gradient(180deg, var(--hair-2) 0 1px, transparent 1px 40px);
}

/* ===================== КАРТОЧКИ / ГЛУБИНА ===================== */
.lux-card {
    position: relative;
    background: linear-gradient(180deg, #161619 0%, #0d0d10 100%);
    border: 1px solid var(--hair);
    border-radius: var(--r-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 80px -40px #000;
    transform-style: preserve-3d;
    transition: border-color 0.5s var(--ease), transform 0.4s var(--ease);
    will-change: transform;
}

.lux-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 45%);
}

.lux-card:hover {
    border-color: var(--hair-2);
}

.lux-card:hover::after {
    opacity: 1;
}

.lux-glass {
    background: rgba(20, 20, 24, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--hair);
    border-radius: var(--r-lg);
}

.lux-ic {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-2);
    flex-shrink: 0;
    border: 1px solid rgba(143, 125, 255, 0.2);
}

/* ===================== СПИСКИ / КОЛОНКИ ===================== */
.lux-rows>* {
    padding: 32px 0;
    border-top: 1px solid var(--hair);
}

.lux-rows>*:first-child {
    border-top: 0;
}

.lux-cols {
    display: grid;
    gap: 0;
}

@media (min-width: 768px) {
    .lux-cols.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .lux-cols>*+* {
        border-left: 1px solid var(--hair);
    }
}

.lux-num {
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ===================== МЕДИА ===================== */
.lux-media {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--hair);
    position: relative;
    background: #0a0a0b;
}

.lux-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lux-media .cap {
    position: absolute;
    left: 20px;
    bottom: 16px;
    z-index: 2;
}

.lux-media .scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent 48%);
    pointer-events: none;
}

/* ===================== КНОПКИ ===================== */
.lux-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #fff;
    color: #000;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    padding: 15px 30px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.12);
    transition: box-shadow 0.35s var(--ease);
    will-change: transform;
}

.lux-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s var(--ease);
}

.lux-btn:hover::before {
    left: 130%;
}

.lux-btn:hover {
    box-shadow: 0 14px 40px rgba(255, 255, 255, 0.22);
}

.lux-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 500;
    font-size: 15px;
    padding: 15px 26px;
    border-radius: 999px;
    border: 1px solid var(--hair-2);
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
    will-change: transform;
}

.lux-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.lux-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-2);
    font-weight: 500;
    font-size: 14px;
    transition: gap 0.25s var(--ease);
}

.lux-link:hover {
    gap: 11px;
}

/* ===================== ФОРМА ===================== */
.lux .nt-input {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hair);
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 15px;
    color: var(--text);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.lux .nt-input:focus {
    border-color: var(--accent);
    background: rgba(143, 125, 255, 0.04);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.lux .nt-label {
    color: var(--faint);
    letter-spacing: 0.14em;
}

/* ===================== MOTION / REVEAL ===================== */
.lux .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
    will-change: transform, opacity;
}

.lux .reveal.in {
    opacity: 1;
    transform: none;
}

.lux .reveal.blur {
    filter: blur(14px);
    transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}

.lux .reveal.blur.in {
    filter: blur(0);
}

.lux .reveal.mask {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--ease);
}

.lux .reveal.mask.in {
    clip-path: inset(0 0 0 0);
}

.lux .reveal.d1 {
    transition-delay: 0.09s;
}

.lux .reveal.d2 {
    transition-delay: 0.18s;
}

.lux .reveal.d3 {
    transition-delay: 0.27s;
}

.lux .reveal.d4 {
    transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {

    .lux .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }

    .lux-bg-grid,
    .lux-bg-glow {
        animation: none !important;
    }
}

/* ==========================================================================
   ✦ LUX · CINEMA — сцены, тишина, дыхание, камера (scope .lux)
   Каждый экран — кадр. Ритм: пустота → напряжение → пустота.
   ========================================================================== */

.lux .scene {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 14vh 0;
}

.lux .scene.center {
    text-align: center;
    align-items: center;
}

/* Виньетка — кинематографичное обрамление кадра */
.lux .vignette {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(125% 105% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.6) 100%);
}

/* Шёпот — тихая техническая подпись */
.lux .whisper {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Кино-строка */
.lux .line {
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.0;
    font-size: clamp(40px, 7.4vw, 108px);
    text-wrap: balance;
}

.lux .line.sm {
    font-size: clamp(30px, 4.8vw, 66px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

/* Медленное проявление из тьмы */
.lux .reveal-slow {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(7px);
    transition: opacity 1.6s var(--ease), transform 1.6s var(--ease), filter 1.6s var(--ease);
    will-change: opacity, transform, filter;
}

.lux .reveal-slow.in {
    opacity: 1;
    transform: none;
    filter: none;
}

.lux .dly1 {
    transition-delay: 0.15s;
}

.lux .dly2 {
    transition-delay: 0.35s;
}

.lux .dly3 {
    transition-delay: 0.55s;
}

.lux .dly4 {
    transition-delay: 0.8s;
}

.lux .dly5 {
    transition-delay: 1.05s;
}

/* Дыхание машины */
.lux .breathe {
    animation: lux-breathe 7s ease-in-out infinite;
    transform-origin: center;
}

@keyframes lux-breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.014);
    }
}

/* Скользящий свет по поверхности */
.lux .sweep {
    position: relative;
    overflow: hidden;
}

.lux .sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
    transform: translateX(-130%);
    animation: lux-sweep 10s ease-in-out 2.5s infinite;
    pointer-events: none;
}

@keyframes lux-sweep {
    0% {
        transform: translateX(-130%);
    }

    35%,
    100% {
        transform: translateX(130%);
    }
}

/* Живой пульс-индикатор */
.lux .beat {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px var(--accent);
    display: inline-block;
    animation: lux-beat 2.6s ease-in-out infinite;
}

@keyframes lux-beat {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.65);
    }
}

/* Гигантская цифра */
.lux .cine-num {
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 0.86;
    font-variant-numeric: tabular-nums;
    font-size: clamp(84px, 17vw, 260px);
}

/* Прочерчиваемая линия */
.lux .draw {
    height: 1px;
    background: var(--hair-2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.5s var(--ease);
}

.lux .draw.in {
    transform: scaleX(1);
}

/* Подсказка скролла */
.lux .cue {
    width: 1px;
    height: 54px;
    background: linear-gradient(180deg, var(--hair-2), transparent);
    position: relative;
    overflow: hidden;
}

.lux .cue::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--accent);
    animation: lux-cue 2.4s var(--ease) infinite;
}

@keyframes lux-cue {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translateY(260%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lux .breathe,
    .lux .sweep::after,
    .lux .beat,
    .lux .cue::after {
        animation: none !important;
    }

    .lux .reveal-slow {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .lux .draw {
        transform: none !important;
    }
}

/* ==========================================================================
   СЕРВИС · Кинематографичные скролл-секции (блоки 1–3) — 3 слайда
   Универсальный механизм на классах .mac-* (общий для всех блоков).
   Ритм: уход старого 0.4s → вход нового через 0.4s. Каскад плиток 0.5→1.2s.
   ========================================================================== */
.mac-step-1 .text-layer { opacity: 0; transform: translateX(-50px); transition: all 0.4s ease 0s; }
.mac-step-1 .img-layer  { opacity: 0; transform: translateX(100px); transition: all 0.4s ease 0s; }

.mac-flying-title { top: 35vh; opacity: 0; transform: translateX(-50px);
    transition: top 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0s, all 0.4s ease 0s; }

/* Ряд плиток: единый габарит для всех блоков — ширина ряда и высота плиток одинаковые,
   меняется только количество плиток в ряду (блок 1 — 4, блок 2 — 3, блок 3 — 2). */
.mac-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
    width: min(1400px, 100%); margin: 0 auto; }

/* Плитка = карточка товара из каталога: те же пропорции, радиус, фон и бордер */
.flip-card { flex: 1 1 0; min-width: 0; height: 512px; opacity: 0;
    transform: translateX(100px); transition: all 0.4s ease 0s; }

@media (max-height: 860px) { .flip-card { height: 440px; } }

@media (max-width: 1023px) {
    .mac-tiles { gap: 16px; }
    .flip-card { flex: 1 1 calc(50% - 8px); height: 340px; }
}
@media (max-width: 639px) {
    .flip-card { flex-basis: 100%; height: 300px; }
}
.step-3 .flip-card { transform: translateY(30px); }

.mac-step-3 { opacity: 0; transform: translateX(-50px); transition: all 0.4s ease 0s; }

/* Активные состояния — вход с задержкой 0.4s (ждём ухода прошлого слайда) */
.step-1 .mac-step-1 .text-layer { opacity: 1; transform: translateX(0); transition: all 1s ease 0.4s; }
.step-1 .mac-step-1 .img-layer  { opacity: 1; transform: translateX(0); transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; }

.step-1 .mac-flying-title { top: 35vh; opacity: 1; transform: translateX(0);
    transition: top 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, all 1s ease 0.4s; }
.step-2 .mac-flying-title { top: calc(50vh - 340px); opacity: 1; transform: translateX(0);
    transition: top 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, all 1s ease 0.4s; }

.step-2 .flip-card { opacity: 1; transform: translate(0); transition: all 0.6s ease; }
.step-2 .flip-card:nth-child(1) { transition-delay: 0.5s; }
.step-2 .flip-card:nth-child(2) { transition-delay: 0.6s; }
.step-2 .flip-card:nth-child(3) { transition-delay: 0.7s; }
.step-2 .flip-card:nth-child(4) { transition-delay: 0.8s; }
.step-2 .flip-card:nth-child(5) { transition-delay: 0.9s; }
.step-2 .flip-card:nth-child(6) { transition-delay: 1.0s; }
.step-2 .flip-card:nth-child(7) { transition-delay: 1.1s; }
.step-2 .flip-card:nth-child(8) { transition-delay: 1.2s; }

.step-3 .mac-step-3 { opacity: 1; transform: translateX(0); transition: all 1s ease 0.4s; }

/* Инфо-заливка: по наведению поверх картинки проявляется тёмный слой с текстом.
   position/inset задаём с повышенной специфичностью — иначе Tailwind-класс .relative
   на лицевой стороне перебивает absolute и слои разъезжаются. */
.flip-card .flip-card-inner { position: relative; width: 100%; height: 100%; }
.flip-card .flip-card-front,
.flip-card .flip-card-back { position: absolute; inset: 0; border-radius: var(--main-radius); overflow: hidden; }
.flip-card .flip-card-front { background: #0a0a0a; border: 1px solid #2d2d2d; transition: border-color 0.5s ease; }
.flip-card:hover .flip-card-front { border-color: #555; }

/* Название плитки уходит, чтобы не просвечивать сквозь заливку */
.flip-card .flip-card-front > div { transition: opacity 0.4s ease; }
.flip-card:hover .flip-card-front > div,
.flip-card.is-flipped .flip-card-front > div { opacity: 0; }

.flip-card .flip-card-back { background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid #555; opacity: 0; transition: opacity 0.4s ease;
    display: flex; flex-direction: column; justify-content: center; padding: 28px; overflow-y: auto; }
.flip-card:hover .flip-card-back,
.flip-card.is-flipped .flip-card-back { opacity: 1; }

@media (max-width: 1023px) { .flip-card .flip-card-back { padding: 20px; } }

/* Плавная смена контента каталога при переключении типа оборудования */
.catalog-anim { transition: opacity .28s ease, transform .28s ease; }
.catalog-anim.fade-out { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* ====================================================
   ПАНЕЛЬ ПОДБОРА ОБОРУДОВАНИЯ (фильтры каталога)
   ==================================================== */
.nt-filter-panel {
    background: #0d0d0d;
    border: 1px solid #2d2d2d;
    border-radius: var(--main-radius);
    padding: 22px 28px;
}

.nt-filter-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 16px;
}

.nt-filter-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.nt-filter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

/* --- Пилюля-дропдаун --- */
.nt-select { position: relative; }

.nt-select__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #111111;
    border: 1px solid #2d2d2d;
    border-radius: 16px;
    padding: 9px 16px;
    min-width: 150px;
    cursor: pointer;
    text-align: left;
    transition: border-color .25s ease, background .25s ease;
}
.nt-select__btn:hover { border-color: #4b4b4b; }
.nt-select.open .nt-select__btn { border-color: #ffffff; background: #161616; }

.nt-select__icon { color: #9ca3af; flex-shrink: 0; display: flex; }
.nt-select__icon svg { width: 18px; height: 18px; }

.nt-select__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nt-select__title { font-size: 11px; color: #8b8b90; letter-spacing: .02em; }
.nt-select__value {
    font-size: 14px; color: #f5f5f7; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}

.nt-select__chevron { color: #6b7280; margin-left: auto; padding-left: 8px; transition: transform .25s ease; display: flex; }
.nt-select__chevron svg { width: 16px; height: 16px; }
.nt-select.open .nt-select__chevron { transform: rotate(180deg); }

/* Кнопка "Ещё фильтры" — одна строка, без пары title/value */
.nt-select__btn--simple { min-width: auto; }
.nt-select__btn--simple .nt-select__value { font-size: 14px; color: #f5f5f7; }

/* --- Выпадающее меню --- */
.nt-select__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 240px;
    max-height: 340px;
    overflow-y: auto;
    background: #0f0f0f;
    border: 1px solid #2d2d2d;
    border-radius: 22px;
    padding: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
    display: none;
}
.nt-select.open .nt-select__menu { display: block; }
.nt-select__menu--wide { min-width: 320px; }
.nt-select__menu--right { left: auto; right: 0; }

.nt-select__group-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: #6b7280; font-weight: 600; padding: 10px 12px 6px;
}

.nt-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 12px; cursor: pointer;
    transition: background .2s ease;
    user-select: none;
}
.nt-opt:hover { background: rgba(255, 255, 255, .05); }
.nt-opt span { font-size: 14px; color: #d1d5db; }
.nt-opt input { width: 16px; height: 16px; accent-color: #0071e3; cursor: pointer; }

/* --- Правая мета-часть: счётчики + сортировка --- */
.nt-filter-meta {
    display: flex; align-items: center; gap: 26px;
    flex-shrink: 0; margin-left: auto;
}
.nt-count { text-align: right; line-height: 1.1; }
.nt-count b { display: block; font-size: 26px; font-weight: 700; color: #ffffff; }
.nt-count span { font-size: 12px; color: #6b7280; }

.nt-shown { font-size: 13px; color: #6b7280; text-align: right; line-height: 1.4; }
.nt-shown b { color: #f5f5f7; font-weight: 700; }

@media (max-width: 900px) {
    .nt-filter-meta { margin-left: 0; width: 100%; justify-content: space-between; gap: 16px; }
}

/* ====================================================
   ЕДИНЫЙ КОНТЕЙНЕР СТРАНИЦЫ
   Один отступ от края и одна максимальная ширина на всех
   страницах — вместо разнобоя 1200/1300/1400/1536/7xl и px-4/6/8.
   ==================================================== */
.nt-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 1024px) {
    .nt-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 640px) {
    .nt-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* Цифра-счётчик не должна дёргать вёрстку, пока набегает */
.nt-num {
    font-variant-numeric: tabular-nums;
}

/* ====================================================
   ФОТО ТОВАРА: свет за предметом и тень под ним, чтобы он стоял
   в пространстве, а не висел вырезкой на плоском чёрном
   ==================================================== */
.nt-photo {
    position: relative;
}

.nt-photo::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 78%;
    height: 78%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side,
            rgba(120, 170, 255, .20),
            rgba(120, 170, 255, .06) 55%,
            transparent 72%);
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;
}

.nt-photo::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5%;
    width: 54%;
    height: 26px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0, 0, 0, .8), transparent 78%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

.nt-photo img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55));
}


/* ====================================================
   ЖИВОСТЬ КАРТОЧЕК
   Карточка реагирует на курсор: приподнимается, светлеет рамка,
   фото внутри чуть наезжает. Раньше менялся только цвет рамки.
   ==================================================== */
.nt-lift,
.group>.bg-black,
.nt-filter-panel {
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                border-color .35s ease,
                box-shadow .45s ease,
                background-color .35s ease;
}

.group:hover>.bg-black,
.nt-lift:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .28) !important;
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95),
                0 0 0 1px rgba(255, 255, 255, .06);
}

.group>.bg-black img {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.group:hover>.bg-black img {
    transform: scale(1.06);
}

/* Кнопка внутри карточки подтягивается вместе с ней */
.group>.bg-black a[href^="/product/"] {
    transition: background-color .3s ease, transform .3s ease;
}

/* ====================================================
   ПАРАЛЛАКС: фон первого экрана едет медленнее страницы
   ==================================================== */
[data-parallax] {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {

    .nt-lift,
    .group>.bg-black,
    [data-parallax] {
        transition: none !important;
        transform: none !important;
    }
}

/* ====================================================
   ФОРМА ЗАЯВКИ: подсветка поля с ошибкой и спиннер кнопки
   (см. static/js/quote-form.js)
   ==================================================== */
.nt-field-error {
    border-color: rgba(239, 68, 68, .6) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.nt-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    vertical-align: -.125em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: nt-spin .7s linear infinite;
}

@keyframes nt-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nt-spinner {
        animation-duration: 2s;
    }
}

/* ====================================================
   СРАВНЕНИЕ
   Не таблица, а сетка из полос: полоса = подпись слева и значения по
   колонкам. Так подпись липнет к левому краю при горизонтальной прокрутке,
   а шапка с карточками — к верху при вертикальной, без вложенных скроллов.
   ==================================================== */
.cmp-title {
    font-family: var(--nt-display, 'Unbounded'), 'Inter', sans-serif;
    font-size: clamp(30px, 6vw, 46px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 12px 0 10px;
}

.cmp-lead {
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    line-height: 1.6;
    max-width: 620px;
    margin-bottom: 28px;
}

.cmp-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 22px;
}

@media (min-width: 768px) {
    .cmp-toolbar__end {
        margin-left: auto;
    }
}

/* Переключатель — таблетка, а не системный чекбокс: тот же язык, что у
   фильтров каталога. Точка слева заполняется, когда режим включён. */
.cmp-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px 9px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.cmp-pill:hover {
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
}

.cmp-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    transition: background-color .2s ease;
}

.cmp-pill.is-on {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.cmp-pill.is-on .cmp-pill__dot {
    background: #000;
}

.cmp-summary {
    color: rgba(255, 255, 255, .38);
    font-size: 13px;
}

.cmp-clear {
    background: none;
    border: 0;
    padding: 4px;
    color: rgba(255, 255, 255, .38);
    font-size: 13px;
    cursor: pointer;
    transition: color .2s ease;
}

.cmp-clear:hover {
    color: #ff6b6b;
}

/* На широком экране четыре колонки помещаются целиком, поэтому здесь
   прокрутки нет — и шапка с карточками может липнуть к окну (внутри
   горизонтального скроллера sticky top не работает: браузер считает
   такой блок собственным скроллпортом). Прокрутку включаем ниже 1024px,
   и там же выключаем липкую шапку. */
.cmp-scroll {
    padding: 0 max(16px, calc((100vw - 1280px) / 2));
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

@media (max-width: 1023px) {
    .cmp-scroll {
        overflow-x: auto;
    }
}

.cmp-scroll::-webkit-scrollbar {
    height: 8px;
}

.cmp-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

.cmp-grid {
    --cmp-label: 168px;
    --cmp-col: 250px;
    min-width: min-content;
}

.cmp-band {
    display: grid;
    grid-template-columns: var(--cmp-label) repeat(var(--cmp-cols, 2), minmax(var(--cmp-col), 1fr));
}

.cmp-row {
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.cmp-row:hover .cmp-value {
    background: rgba(255, 255, 255, .02);
}

.cmp-cell {
    padding: 18px 20px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cmp-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #000;
    color: rgba(255, 255, 255, .42);
    font-size: 13px;
    line-height: 1.4;
    padding-left: 0;
    /* подписи переносим по словам: рвать «безопасности» пополам незачем */
    overflow-wrap: break-word;
}

.cmp-value {
    color: #f5f5f7;
    font-size: 14.5px;
    line-height: 1.45;
    transition: color .2s ease, background-color .2s ease;
}

/* Совпало у всех — гасим всю полосу: читать её незачем */
.cmp-row.is-same .cmp-label,
.cmp-row.is-same .cmp-value {
    color: rgba(255, 255, 255, .26);
}

.cmp-grid.hide-same .cmp-row.is-same {
    display: none;
}

/* Отличие: без цветной заливки — хватает веса и полной яркости */
.cmp-value.is-diff {
    color: #fff;
    font-weight: 600;
}

/* Шапка с карточками */
.cmp-band--head {
    z-index: 5;
    background: #000;
    align-items: end;
    padding-bottom: 4px;
}

/* Липнет под фиксированной шапкой сайта — но только там, где нет
   горизонтальной прокрутки. Внутри скроллера sticky отсчитывается от него
   самого: полоса просто уехала бы на 60px вниз и легла поверх строк.

   60px — высота шапки после скролла (без скролла она 72px, но к моменту
   залипания класс .scrolled уже стоит). */
@media (min-width: 1024px) {
    .cmp-band--head {
        position: sticky;
        top: 60px;
        box-shadow: 0 14px 22px -14px #000;
    }

    /* Залипла — сворачиваемся до бренда и названия: фото и кнопки
       в этот момент не нужны, а треть экрана освобождается. */
    .cmp-grid.is-stuck .cmp-head__photo {
        height: 0;
        margin-bottom: 0;
        opacity: 0;
    }

    .cmp-grid.is-stuck .cmp-head__extra {
        max-height: 0;
        opacity: 0;
    }

    .cmp-grid.is-stuck .cmp-head {
        padding-bottom: 14px;
    }

    /* В свёрнутом виде резерв под вторую строку названия ни к чему */
    .cmp-grid.is-stuck .cmp-head__name {
        min-height: 0;
        margin-bottom: 0;
    }
}

.cmp-head__extra {
    max-height: 220px;
    overflow: hidden;
    transition: max-height .3s ease, opacity .2s ease;
}

.cmp-label--head {
    background: #000;
    z-index: 6;
}

.cmp-head {
    position: relative;
    padding: 4px 20px 24px;
}

.cmp-head__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: height .3s ease, margin-bottom .3s ease, opacity .2s ease;
}

.cmp-head__photo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}

.cmp-head:hover .cmp-head__photo img {
    transform: scale(1.04);
}

.cmp-head__brand {
    color: rgba(255, 255, 255, .38);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Место под две строки названия резервируем всегда: иначе карточки выходят
   разной высоты и над короткими зияет пустота (кнопки-то выровнены по низу). */
.cmp-head__name {
    display: block;
    font-family: var(--nt-display, 'Unbounded'), 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.6em;
    color: #fff;
    margin-bottom: 8px;
    transition: opacity .2s ease;
}

.cmp-head__name:hover {
    opacity: .7;
}

.cmp-head__price {
    font-size: 14px;
    color: #fff;
    margin-bottom: 16px;
}

.cmp-head__price.is-muted {
    color: rgba(255, 255, 255, .42);
    font-size: 13px;
}

/* Кнопки стопкой: в колонку шириной 250px «Открыть» и «Запросить КП»
   рядом не помещаются, а сокращать до «КП» — жаргон. */
.cmp-head__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cmp-btn--solid {
    flex: 1;
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}

.cmp-btn--solid:hover {
    background: #d9d9d9;
    border-color: #d9d9d9;
}

.cmp-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
}

.cmp-btn--ghost:hover {
    border-color: rgba(255, 255, 255, .45);
}

/* Крестик появляется по наведению — на тач-экранах наведения нет,
   поэтому там он виден всегда (см. медиазапрос ниже). */
.cmp-head__remove {
    position: absolute;
    top: 0;
    right: 12px;
    z-index: 3;
}

.cmp-head__remove button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, color .2s ease, background-color .2s ease;
}

.cmp-head:hover .cmp-head__remove button,
.cmp-head__remove button:focus-visible {
    opacity: 1;
}

.cmp-head__remove button:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.cmp-head__remove svg {
    width: 14px;
    height: 14px;
}

@media (hover: none) {
    .cmp-head__remove button {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .cmp-grid {
        --cmp-label: 122px;
        --cmp-col: 172px;
    }

    .cmp-cell {
        padding: 14px 14px;
    }

    .cmp-head {
        padding: 4px 14px 20px;
    }

    .cmp-head__photo {
        height: 104px;
    }

    .cmp-head__actions {
        flex-direction: column;
    }

    .cmp-value {
        font-size: 13.5px;
    }
}


/* Сертификаты нельзя выделить и «перетащить» — мелкое препятствие,
   от скриншота не спасает (и не может). */
.nt-cert-stack img,
#cert-lightbox img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

/* ====================================================
   КАЛЬКУЛЯТОР СТОИМОСТИ ПЕЧАТИ
   Монохром: секция стоит между чёрными блоками, поэтому ни карточек со
   своим фоном, ни цветного акцента — только белый, как в кнопках сайта.
   ==================================================== */
.nt-tco-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #98989e;
    margin-bottom: 10px;
}

/* Вариант со значением справа (например «Доля цветных — 30%»).
   Нужен отдельным классом: .nt-tco-label задаёт display:block и в каскаде
   перебивает утилиту .flex из Tailwind. */
.nt-tco-label--row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

/* Поля-подчёркивания вместо серых плашек */
.nt-tco-input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    padding: 8px 0;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .25s ease;
    -moz-appearance: textfield;
}

.nt-tco-input::-webkit-outer-spin-button,
.nt-tco-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.nt-tco-input:focus {
    border-bottom-color: #ffffff;
}

/* Узкое поле для строк с узлами. Отдельным классом, а не утилитой w-[…]:
   базовое правило идёт в этом же файле и в каскаде утилиту перебивает. */
.nt-tco-input--sm {
    width: 150px;
    flex: 0 0 auto;
    text-align: right;
}

.nt-tco-input::placeholder {
    color: #48484a;
}

/* Вкладки режимов */
.nt-tco-tab {
    position: relative;
    padding: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #98989e;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .25s ease;
}

.nt-tco-tab:hover:not(:disabled) {
    color: #ffffff;
}

.nt-tco-tab:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.nt-tco-tab.is-active {
    color: #ffffff;
}

.nt-tco-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: #ffffff;
}

/* Выбор ёмкости */
.nt-tco-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: #a1a1a6;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s ease;
}

.nt-tco-chip:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .4);
}

.nt-tco-chip.is-active {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
    font-weight: 600;
}

/* Ползунок: у нативного в тёмной теме не видно дорожки */
.nt-tco-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: transparent;
    cursor: pointer;
    outline: none;
}

.nt-tco-range::-webkit-slider-runnable-track {
    height: 2px;
    background: rgba(255, 255, 255, .18);
    border-radius: 2px;
}

.nt-tco-range::-moz-range-track {
    height: 2px;
    background: rgba(255, 255, 255, .18);
    border-radius: 2px;
}

.nt-tco-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -8px;
    border-radius: 50%;
    background: #ffffff;
    border: 0;
    transition: transform .2s ease;
}

.nt-tco-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 0;
}

.nt-tco-range:active::-webkit-slider-thumb {
    transform: scale(1.15);
}

.nt-tco-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .2);
}


/* ====================================================
   СЕРТИФИКАТЫ: стопка сканов и полноэкранный просмотр
   Листать все несколько десятков никто не станет, поэтому в секции нет ни
   сетки, ни фильтров: стопка показывает объём, просмотр — для проверяющих.
   ==================================================== */
.nt-cert-stack {
    position: relative;
    width: 300px;
    height: 380px;
    flex: 0 0 auto;
    margin-inline: auto;
}

.nt-cert-stack__item {
    position: absolute;
    top: 0;
    left: 50%;
    width: 240px;
    height: 330px;
    margin-left: -120px;
    padding: 0;
    border: 1px solid #2d2d2d;
    border-radius: 14px;
    overflow: hidden;
    background: #111111;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    /* Каждый следующий скан чуть повёрнут и сдвинут — получается живая стопка */
    transform: rotate(calc((var(--i) - 2) * 5deg)) translateX(calc((var(--i) - 2) * 14px));
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .3s ease;
    z-index: calc(5 - var(--i));
}

.nt-cert-stack__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.nt-cert-stack:hover .nt-cert-stack__item {
    transform: rotate(calc((var(--i) - 2) * 8deg)) translateX(calc((var(--i) - 2) * 26px));
}

.nt-cert-stack__item:hover,
.nt-cert-stack__item:focus-visible {
    border-color: #6b6b70;
    z-index: 10;
}

.nt-cert-stack__badge {
    position: absolute;
    right: -6px;
    bottom: 4px;
    z-index: 20;
    background: #ffffff;
    color: #000000;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .nt-cert-stack__item {
        transition: none;
    }
}

@media (max-width: 640px) {
    .nt-cert-stack {
        width: 260px;
        height: 320px;
    }

    .nt-cert-stack__item {
        width: 200px;
        height: 275px;
        margin-left: -100px;
    }
}

/* --- Полноэкранный просмотр --- */
.nt-cert-viewer {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .96);
    color: #ffffff;
    display: none;
}

.nt-cert-viewer[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nt-cert-viewer::backdrop {
    background: rgba(0, 0, 0, .96);
}

.nt-cert-viewer__image {
    max-width: min(88vw, 900px);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 10px;
}

.nt-cert-viewer__bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.nt-cert-viewer__meta {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #a1a1a6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nt-cert-viewer__count {
    font-size: 14px;
    color: #98989e;
    font-variant-numeric: tabular-nums;
}

.nt-cert-viewer__close,
.nt-cert-viewer__nav {
    background: rgba(255, 255, 255, .08);
    border: 0;
    color: #ffffff;
    cursor: pointer;
    border-radius: 999px;
    transition: background-color .25s ease;
}

.nt-cert-viewer__close {
    width: 40px;
    height: 40px;
    font-size: 16px;
    flex: 0 0 auto;
}

.nt-cert-viewer__nav {
    position: absolute;
    top: 50%;
    margin-top: -28px;
    width: 56px;
    height: 56px;
    font-size: 30px;
    line-height: 1;
}

.nt-cert-viewer__nav--prev {
    left: 16px;
}

.nt-cert-viewer__nav--next {
    right: 16px;
}

.nt-cert-viewer__close:hover,
.nt-cert-viewer__nav:hover {
    background: rgba(255, 255, 255, .18);
}

@media (max-width: 640px) {
    .nt-cert-viewer__nav {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
}

/* ====================================================
   ВЫХОД ЗАГОЛОВКА (первый экран «О нас» и «Решения»)
   Только CSS: анимация отрабатывает при загрузке стилей и не зависит от JS.
   Reveal через скрипт в этом проекте намеренно убран — он прятал контент
   через opacity:0, и при сбое JS страница оставалась пустой.
   ==================================================== */
.nt-rise {
    animation: nt-rise .9s cubic-bezier(.22, 1, .36, 1) both;
}

.nt-rise--d1 {
    animation-delay: .08s;
}

.nt-rise--d2 {
    animation-delay: .16s;
}

.nt-rise--d3 {
    animation-delay: .24s;
}

@keyframes nt-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nt-rise {
        animation: none;
    }
}


/* ====================================================
   КОРЗИНА: значок в шапке и кнопки под ней
   Корзина, сравнение и избранное — один и тот же круг,
   чтобы выехавшие кнопки читались как продолжение первой.
   ==================================================== */
.nt-cart-link,
.nt-round-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    /* Рамка есть всегда, но прозрачная: круг проявляется под курсором,
       а размер кнопки при этом не скачет */
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    background: transparent;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.nt-cart-link {
    margin-left: 12px;
}

.nt-round-btn svg {
    width: 20px;
    height: 20px;
}

/* Код языка вместо значка */
.nt-lang__btn,
.nt-lang__opt {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
}

.nt-cart-link:hover,
.nt-cart-link:focus-visible,
.nt-round-btn:hover,
.nt-round-btn:focus-visible {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .06);
}

/* Счётчик в бургер-меню: скрывается тем же классом, что ставит catalog.js */
.nt-menu-num {
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.nt-menu-num.is-empty,
.nt-cart-badge.is-empty {
    display: none;
}

.nt-cart-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Кнопка «в корзину» в карточке каталога */
.nt-cart-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease;
}

.nt-cart-add:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .4);
}

.nt-cart-add.is-added {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
}

/* ====================================================
   КАТАЛОГ: панель поиска и три списка
   ==================================================== */
.nt-catalog-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.nt-catalog-search {
    position: relative;
    flex: 1 1 320px;
    max-width: 520px;
}

.nt-catalog-search i,
.nt-catalog-search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #8b8b90;
    pointer-events: none;
}

.nt-catalog-search input {
    width: 100%;
    background: #111;
    border: 1px solid #2d2d2d;
    border-radius: 14px;
    color: #f5f5f7;
    padding: 12px 16px 12px 44px;
    font-size: 14px;
    outline: none;
    transition: border-color .25s ease;
}

.nt-catalog-search input:focus {
    border-color: #6b6b70;
}

.nt-lists {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nt-list-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #2d2d2d;
    border-radius: 14px;
    background: #111;
    color: #cfcfd4;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.nt-list-link svg {
    width: 20px;
    height: 20px;
}

.nt-list-link:hover {
    color: #ffffff;
    border-color: #6b6b70;
    background: #171717;
}

.nt-list-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.nt-list-badge.is-empty {
    display: none;
}

/* Подсказка при наведении: что в списке или что он пуст */
.nt-list-tip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    white-space: nowrap;
    background: #1c1c1e;
    color: #e5e5ea;
    border: 1px solid #3a3a3c;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}

.nt-list-link:hover .nt-list-tip,
.nt-list-link:focus-visible .nt-list-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* В подсказке либо количество, либо слово «пусто». Переключает тот же класс
   .is-empty, что catalog.js ставит счётчику, — отдельной логики не нужно. */
.nt-tip-num {
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.nt-tip-num.is-empty {
    display: none;
}

.nt-tip-empty {
    display: none;
    color: #8b8b90;
}

.nt-tip-num.is-empty+.nt-tip-empty {
    display: inline;
}

/* ====================================================
   КАРТОЧКА КАТАЛОГА: действия иконками
   Появляются при наведении; уже отмеченные видны всегда,
   иначе непонятно, что товар уже в списке.
   ==================================================== */
.nt-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    color: #cfcfd4;
    cursor: pointer;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .25s ease, transform .25s ease, color .2s ease,
        background-color .2s ease, border-color .2s ease;
}

.nt-icon-btn svg {
    width: 16px;
    height: 16px;
}

.group:hover .nt-icon-btn,
.nt-icon-btn:focus-visible {
    opacity: 1;
    transform: none;
}

.nt-icon-btn:hover {
    color: #ffffff;
    border-color: #ffffff;
    background: rgba(0, 0, 0, .85);
}

.nt-icon-btn.is-active {
    opacity: 1;
    transform: none;
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
}

/* На тач-устройствах ховера нет — показываем сразу */
@media (hover: none) {
    .nt-icon-btn {
        opacity: 1;
        transform: none;
    }
}

/* Кнопка в карточке каталога. На узких экранах карточка вдвое уже, и кнопка
   фиксированной ширины выдавливалась за её край вместе с ценой. Теперь ряд
   переносится, а кнопка при нехватке места занимает всю ширину карточки. */
.nt-card-more {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .nt-card-more {
        flex: 1 0 100%;
    }
}

/* Фильтры каталога на узком экране. У кнопки выбора была min-width: 150px,
   и на 360px строка фильтров вылезала за край страницы. */
@media (max-width: 480px) {

    .nt-select,
    .nt-select__btn {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .nt-select__menu {
        min-width: 0;
        width: 100%;
    }

    .nt-filter-controls {
        flex-wrap: wrap;
    }

    /* Сортировка лежала в одной строке со счётчиком: места ей не хватало,
       а сжаться она не могла (min-width: auto у флекс-элемента) и вылезала
       за край. Переносим на свою строку во всю ширину. */
    .nt-filter-meta {
        flex-wrap: wrap;
    }

    .nt-sort-host {
        width: 100%;
        min-width: 0;
    }
}

/* ====================================================
   ПОЛЕ КОЛИЧЕСТВА
   Системные стрелки у input[type=number] выглядят чужеродно и на тёмном
   фоне почти не видны — прячем их и ставим свои кнопки «−» и «+».
   ==================================================== */
.nt-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
}

.nt-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.nt-qty__btn svg {
    width: 16px;
    height: 16px;
}

.nt-qty__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.nt-qty__btn:disabled {
    opacity: .3;
    cursor: default;
}

.nt-qty__input {
    width: 44px;
    padding: 0;
    border: none !important;
    background: transparent !important;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.nt-qty__input::-webkit-outer-spin-button,
.nt-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Числовые поля калькулятора: стрелки тоже лишние, там значения вводят руками */
.nt-tco-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.nt-tco-input[type="number"]::-webkit-outer-spin-button,
.nt-tco-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ====================================================
   WHATSAPP В ШАПКЕ
   Не виджет и не цветная кнопка — такой же значок, как корзина.
   Приглушён наравне с навигацией; зелёный проявляется только под
   курсором: постоянное цветное пятно перебивало бы разделы меню.
   ==================================================== */
.nt-wa-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(255, 255, 255, .62);
    transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.nt-wa-link:hover {
    color: #25D366;
    border-color: rgba(37, 211, 102, .35);
    background: rgba(37, 211, 102, .08);
}

.nt-wa-link:focus-visible {
    outline: 2px solid rgba(37, 211, 102, .6);
    outline-offset: 2px;
}

/* ====================================================
   БЕЙДЖ НА КАРТОЧКЕ («Хит», «Новинка»)
   Раньше это была цветная заливка на выбор из админки — на чёрном фоне
   она перекрикивала и фото, и название. Оставили саму возможность
   пометить товар, но в языке сайта: волосяная обводка, без заливки.
   ==================================================== */
.nt-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .8);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Смысловые подписи: «Проблема» и «Решение» на странице поддержки.
   Цвет здесь работает — по нему сканируют карточку. Но насыщенные
   red-400/green-400 на чёрном светились как индикаторы; берём
   приглушённые тона, чтобы подпись помогала, а не отвлекала. */
.nt-label-bad { color: #d98b8b; }
.nt-label-good { color: #8fbf9f; }

/* ====================================================
   ВЫПАДАЮЩИЕ СПИСКИ И ЧЕКБОКСЫ В ФОРМАХ
   Браузер рисует <select> и <input type=checkbox> по-своему: серая
   градиентная плашка с крошечными стрелками. На чёрном фоне это выглядело
   вставкой из чужого интерфейса.

   Полностью переписать раскрытый список нельзя — его рисует система.
   Но закрытое состояние (то, что видно всегда) приводим к остальным полям,
   а color-scheme: dark заставляет систему открывать тёмный список,
   а не белый.
   ==================================================== */
select.nt-tco-input {
    -webkit-appearance: none;
    appearance: none;
    color-scheme: dark;
    cursor: pointer;
    /* место под свою стрелку справа */
    padding-right: 26px;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 15px 15px;
}

select.nt-tco-input:hover {
    border-bottom-color: rgba(255, 255, 255, .4);
}

select.nt-tco-input:focus {
    border-bottom-color: #ffffff;
}

/* Список открывается системным — задаём хотя бы читаемые цвета пунктов */
select.nt-tco-input option {
    background: #141414;
    color: #f5f5f7;
}

/* Свой чекбокс: системный на чёрном фоне выглядит белым пятном,
   а его размер и скругление не совпадают с остальной формой */
.nt-check {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, background-color .2s ease;
}

.nt-check:hover {
    border-color: rgba(255, 255, 255, .55);
}

.nt-check:checked {
    background: #ffffff;
    border-color: #ffffff;
}

/* Галочка — псевдоэлемент, чтобы не тащить картинку */
.nt-check:checked::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-45deg) translate(1px, -1px);
}

.nt-check:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .6);
    outline-offset: 2px;
}

/* Список в «боксовом» оформлении (страница срочной печати): рамка и фон
   приходят из разметки, отсюда — только замена системной стрелки. */
.nt-select-plain {
    -webkit-appearance: none;
    appearance: none;
    color-scheme: dark;
    cursor: pointer;
    padding-right: 42px;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}

.nt-select-plain option {
    background: #141414;
    color: #f5f5f7;
}

/* ====================================================
   СВОЙ ВЫПАДАЮЩИЙ СПИСОК
   Надстройка над <select> (см. static/js/select.js). Настоящее поле
   остаётся в форме и хранит значение — прячем его от глаз, но не от
   формы: без JS посетитель увидит обычный системный список.
   ==================================================== */
.nt-sel {
    position: relative;
}

/* Прячем, но оставляем в потоке событий формы: display:none у select
   в некоторых браузерах ломает восстановление значения при возврате назад */
.nt-sel select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.nt-sel__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: #ffffff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .25s ease;
}

/* Стрелка. Поворачивается, когда список раскрыт — видно состояние */
.nt-sel__btn::after {
    content: '';
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .22s ease;
}

.nt-sel__btn:hover {
    border-bottom-color: rgba(255, 255, 255, .4);
}

.nt-sel.is-open .nt-sel__btn {
    border-bottom-color: #ffffff;
}

.nt-sel.is-open .nt-sel__btn::after {
    transform: rotate(180deg);
}

.nt-sel__btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .5);
    outline-offset: 3px;
}

/* Вариант «в рамке» — для форм, где поля не подчёркнутые, а боксовые */
.nt-sel--boxed .nt-sel__btn {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-sm);
    padding: 12px 18px;
}

.nt-sel__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    display: none;
    /* Самый длинный список на сайте — девять пунктов по 42px: влезают
       целиком. Прокрутка ради одного последнего пункта только мешала бы. */
    max-height: 400px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-sm);
    background: #111111;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .65);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.nt-sel.is-open .nt-sel__list {
    display: block;
}

/* Снизу не хватило места — раскрываемся вверх */
.nt-sel.is-up .nt-sel__list {
    top: auto;
    bottom: calc(100% + 6px);
}

.nt-sel__opt {
    padding: 9px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.nt-sel__opt:hover {
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
}

/* Выбранный отмечен яркостью, а не галочкой: галочка добавляла бы
   в строку элемент, которого нет больше нигде на сайте */
.nt-sel__opt.is-on {
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
}

/* Согласие на обработку персональных данных под формой */
.nt-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .62);
}

.nt-consent a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.nt-consent a:hover {
    border-bottom-color: #ffffff;
}

.nt-consent .nt-check {
    margin-top: 1px;
}

/* Юридический текст: политика обработки персональных данных.
   Узкая колонка и крупный интерлиньяж — такое читают целиком, а не сканируют. */
.nt-legal h2 {
    margin: 34px 0 10px;
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
}

.nt-legal h2:first-child {
    margin-top: 0;
}

.nt-legal p {
    color: rgba(255, 255, 255, .62);
    font-size: 15.5px;
    line-height: 1.75;
}

/* ====================================================
   ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ
   Добавление в сравнение раньше происходило молча: менялся только счётчик
   в шапке, и человек не понимал, сработало ли действие.
   ==================================================== */
#nt-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 14px 22px;
    border-radius: 9999px;
    background: rgba(28, 28, 30, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9);
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}

#nt-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

#nt-toast a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    #nt-toast { transition: opacity .25s ease; transform: translate(-50%, 0); }
}

/* ====================================================
   СЧЁТЧИК СВЁРНУТОЙ ГРУППЫ ИКОНОК
   В сложенном виде видна только корзина, значки сравнения и избранного
   спрятаны внутри. Поэтому на корзине дублируется общее число по трём
   разделам — обычный значок, без подсветки. При наведении группа
   раскрывается, и на каждой кнопке остаётся своё число.
   ==================================================== */
.nt-drop--stack[data-has-items] > .nt-cart-link > .nt-cart-badge--own {
    display: none;
}

.nt-drop--stack:hover > .nt-cart-link > .nt-cart-badge--total,
.nt-drop--stack:focus-within > .nt-cart-link > .nt-cart-badge--total {
    display: none;
}

.nt-drop--stack:hover > .nt-cart-link > .nt-cart-badge--own:not(.is-empty),
.nt-drop--stack:focus-within > .nt-cart-link > .nt-cart-badge--own:not(.is-empty) {
    display: block;
}