/* =====================================================================
   NEO QUIET — тихий регистр дизайн-системы (фаза 1, главная)
   Та же ДНК, что у громких нео-блоков (чёрный контур, жёсткая тень,
   Montserrat 900 в заголовках), но убавленная громкость:
   контур 2px, тень 4px, только белый/чёрный/синий, без жёлтого и движения.
   Грузится ПОСЛЕ homepage-v3.css — переопределяет его !important-правила.
   ===================================================================== */

/* ── Фон: чистый белый (нео = «бумага и чернила») ─────────────────── */
body.home,
body.home .nt-homepage {
    background: #fff !important;
}

/* ── Ритм: секция ↔ секция 96px (моб 56), заголовок → контент 28 (моб 20) ── */
.nt-homepage .nt-section {
    margin-bottom: 96px !important;
    padding-top: 0 !important;
}

.nt-homepage .nt-section-subtitle {
    margin-bottom: 28px !important;
}

.nt-homepage .nt-section-title:last-child {
    margin-bottom: 28px !important;
}

@media (max-width: 768px) {
    .nt-homepage .nt-section {
        margin-bottom: 56px !important;
    }
    .nt-homepage .nt-section-subtitle,
    .nt-homepage .nt-section-title:last-child {
        margin-bottom: 20px !important;
    }
}

/* ── Типографика секций: 900 uppercase чёрным ─────────────────────── */
.nt-homepage .nt-section-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    color: #000 !important;
    line-height: 1.05 !important;
}

.nt-homepage .nt-section-subtitle {
    font-weight: 600 !important;
    color: rgba(33, 55, 119, 0.6) !important;
}

.nt-homepage .nt-section-link {
    display: inline-block !important;
    float: right !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #000 !important;
    border-bottom: none !important;
    padding-bottom: 2px !important;
    margin-top: 24px !important;
}

.nt-homepage .nt-section-link:hover {
    opacity: 1 !important;
    color: #2C3DF5 !important;
}

/* ── Преимущества: нео-карточки — белый фон, чёрный контур 3px, жёсткая офсет-тень,
   острые углы (как карточки брендов). Ушли от конфетной пастельной палитры. ── */
.nt-homepage .nt-advantages-bar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    gap: 16px !important;
}

.nt-homepage .nt-advantage-item {
    background: #fff !important;
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 0 #000 !important;
    padding: 22px 12px !important;
    height: auto !important;
    cursor: default;
    transition: transform .18s cubic-bezier(.175,.885,.32,1.275), box-shadow .18s cubic-bezier(.175,.885,.32,1.275), background .18s ease !important;
}

.nt-homepage .nt-advantage-item:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 9px 9px 0 0 #000 !important;
    background: #2C3DF5 !important;
}

/* Селектор с .nt-advantages-bar — выигрывает специфичностью у глобальных
   плиток в header-new.css (там 30px под длинные значения подстраниц) */
.nt-homepage .nt-advantages-bar .nt-advantage-number {
    /* Unbounded = голос цифр (правило типографики 16.07) */
    font-family: 'Unbounded', 'Montserrat', sans-serif !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    color: #000 !important;
    transition: color .18s ease !important;
}

.nt-homepage .nt-advantage-text {
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(33, 55, 119, 0.65) !important;
    transition: color .18s ease !important;
}

/* Hover: карточка синеет — текст и цифра белыми (как у брендов) */
.nt-homepage .nt-advantage-item:hover .nt-advantage-number,
.nt-homepage .nt-advantage-item:hover .nt-advantage-text {
    color: #fff !important;
}

@media (max-width: 768px) {
    .nt-homepage .nt-advantages-bar {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    /* нео-карточки и на мобильном: контур 2px + тень 4px, острые углы */
    .nt-homepage .nt-advantage-item {
        border: 2px solid #000 !important;
        box-shadow: 4px 4px 0 0 #000 !important;
        padding: 14px 6px !important;
        flex: 1 1 calc(50% - 12px) !important;
    }
    .nt-homepage .nt-advantages-bar .nt-advantage-number {
        font-size: 23px !important;
    }
    .nt-homepage .nt-advantage-text {
        font-size: 9px !important;
    }
}

/* ── Карточки товаров (Хиты продаж) ───────────────────────────────── */
.nt-homepage .nt-product-card {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 0 #000 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.nt-homepage .nt-product-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 0 #000 !important;
}

.nt-homepage .nt-product-name {
    color: #000 !important;
    font-weight: 800 !important;
}

.nt-homepage .nt-product-price {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: #000 !important;
    letter-spacing: -0.01em !important;
}

/* ── Хиты продаж «одним прибором» (как TE-грид запчастей, 15.07):
   общая рамка 2px на обёртке, карточки-строки через делители 1px,
   без отдельных коробок/граней/теней. Скоуп .nt-homepage —
   каталог/категории не затрагиваются. ── */
.nt-homepage .nt-bestsellers-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border: 2px solid #000 !important;
    background: #fff !important;
}

.nt-homepage .product-card {
    position: relative !important;
    border: none !important;
    border-top: 1px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: #fff !important;
    transition: none !important;
}

.nt-homepage .product-card:first-child {
    border-top: none !important;
}

.nt-homepage .product-card:hover {
    border-color: #000 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Подвал внутри рамки — как у грида запчастей */
.nt-homepage .nt-bs-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border-top: 1px solid #000 !important;
    padding: 13px 16px !important;
    text-decoration: none !important;
    color: #000 !important;
    background: #fff !important;
}

.nt-homepage .nt-bs-foot-l {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgba(33, 55, 119, 0.55) !important;
}

.nt-homepage .nt-bs-foot-r {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #000 !important;
    white-space: nowrap !important;
    transition: color 0.15s ease !important;
}

.nt-homepage .nt-bs-foot:hover .nt-bs-foot-r { color: #2C3DF5 !important; }

@media (max-width: 520px) {
    .nt-homepage .nt-bs-foot { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
    .nt-homepage .nt-bs-foot-l, .nt-homepage .nt-bs-foot-r { font-size: 9px !important; }
}

/* ── Плитки запчастей (инлайн-стили переписаны в spare-parts.php) ── */

/* ── Карточки статей ──────────────────────────────────────────────── */
.nt-homepage .nt-articles-section .nt-article-card {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 0 #000 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.nt-homepage .nt-articles-section .nt-article-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 0 #000 !important;
}

/* Стрелки скролла статей/отзывов — в тихом регистре */
.nt-homepage .nt-scroll-nav {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 0 #000 !important;
}

@media (prefers-reduced-motion: reduce) {
    .nt-homepage .nt-product-card,
    .nt-homepage .nt-articles-section .nt-article-card {
        transition: none !important;
    }
}

/* ── HERO: изометрическая коробка + табы-навигация слайдера ─────────
   Единственная изокоробка на странице («изделие в коробке»).
   Табы = переключатели слайдов вместо точек; активный красится
   в пастель своего слайда (--tab-bg из hero.php). ── */
.nt-homepage .nt-hero-tabs {
    /* Табы-ярлыки убраны по решению владельца (18.07): hero чище без них,
       слайды продолжают крутиться автоплеем. Разметка/JS сохранены. */
    display: none !important;
}

.nt-homepage .nt-hero-tabs::-webkit-scrollbar { display: none; }

.nt-homepage .nt-hero-tab {
    /* высота уменьшена ~20% (12→9px верт. падинг), низ закрыт чёрной линией 2px —
       она ложится ровно на верхнюю грань коробки (margin-bottom:-2px у контейнера),
       ярлыки стоят на общей чёрной базе, а не парят с открытым низом */
    padding: 9px 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    /* все табы цветные ПОСТОЯННО (референс TE); неактив — приглушён к белому */
    background: color-mix(in srgb, var(--tab-bg, #F5A3C7) 35%, #fff);
    border: 2px solid #000;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.nt-homepage .nt-hero-tab + .nt-hero-tab { margin-left: -2px; }

.nt-homepage .nt-hero-tab.active,
.nt-homepage .nt-hero-tab:hover {
    background: var(--tab-bg, #F5A3C7);
    color: var(--tab-fg, #000);
}

.nt-homepage .nt-hero-box {
    position: relative;
    /* грань выступает на 14px вниз — воздух до преимуществ считаем от неё */
    margin-bottom: 64px;
}

.nt-homepage .nt-hero-box::after { /* нижняя грань: box без рамки → оффсет ровно = высоте грани */
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 12px;
    background: #E9E9E9;
    border: 2px solid #000;
    border-top: none;
    border-right: none;
    transform: skewX(45deg);
    transform-origin: top left;
}

.nt-homepage .nt-hero-box::before { /* правая грань */
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: #F4F4F4;
    border: 2px solid #000;
    border-left: none;
    transform: skewY(45deg);
    transform-origin: top left;
}

.nt-homepage .nt-hero-slider {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Точки заменены табами */
.nt-homepage .nt-slider-dots { display: none !important; }

@media (max-width: 768px) {
    .nt-homepage .nt-hero-tab { padding: 7px 12px; font-size: 10px; }
    .nt-homepage .nt-hero-box::after { bottom: -8px; height: 8px; }
    .nt-homepage .nt-hero-box::before { right: -8px; width: 8px; }
    .nt-homepage .nt-hero-box { margin-bottom: 40px; }
}