@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import 'variables.css';

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-accent-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
    max-width: none;
    margin: 0 auto;
    padding: 0 max(24px, 5vw);
}

.section {
    padding: var(--spacing-3xl) 0;
}

.section--sm {
    padding: var(--spacing-2xl) 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-white);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

@media (max-width: 767px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
}

.section__title {
    font-size: 24px;
    color: var(--color-white);
    margin-bottom: var(--spacing-xl);
}

.section__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-2xl);
    max-width: 640px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 24px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn:active {
    transform: translateY(1px);
}

.btn--primary {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.btn--primary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-white);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-border);
}

.btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-light);
}

.btn--ghost {
    background-color: rgba(255,255,255,0.07);
    color: var(--color-white);
}

.btn--ghost:hover {
    background-color: rgba(255,255,255,0.12);
    color: var(--color-white);
}

.btn--sm {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
}

/* Компактная кнопка "+" (добавить в спецификацию) в таблице товаров —
   вместо длинного "В спецификацию", чтобы остальные колонки не сжимались */
.btn--spec-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-dark);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.btn--spec-add:hover {
    background: #06304f;
}

.btn--spec-add--added {
    background: var(--color-success);
    cursor: default;
}

.btn--spec-add--added:hover {
    background: var(--color-success);
}

.btn--lg {
    padding: 16px 32px;
    font-size: var(--font-size-lg);
}

.btn--disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.btn--loading .btn__spinner {
    display: block;
}

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

/* ============================================================
   BADGE
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    background-color: var(--color-accent);
    color: var(--color-white);
}

.badge--hidden {
    display: none;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

/* Фото карточек (товар, категория, проект, документ) показываем ЦЕЛИКОМ:
   object-fit: contain вместо cover — изделие не обрезается рамкой карточки,
   свободное место закрывает фон. */
.card__image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: contain;
    background-color: var(--color-white);
}

.card__body {
    padding: var(--spacing-lg);
}

.card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Фото товара в сеточном виде листинга (template-parts/catalog/products-grid.php):
   одинаковый квадрат у всех карточек, изделие видно целиком. */
.product-card__img-link {
    display: block;
}

.product-card__img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background-color: var(--color-white);
    display: block;
}

/* ============================================================
   GRID
   ============================================================ */

.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1199px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   FORMS
   ============================================================ */

.form__group {
    margin-bottom: var(--spacing-md);
}

.form__label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.form__label--required::after {
    content: ' *';
    color: var(--color-error);
}

.form__input,
.form__textarea,
.form__select {
    width: 100%;
    padding: 10px 14px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-white);
    font-size: var(--font-size-md);
    transition: border-color var(--transition-fast);
    outline: none;
}

.form__input::placeholder,
.form__textarea::placeholder {
    color: var(--color-text-muted);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
    border-color: var(--color-accent);
}

.form__input--error,
.form__textarea--error {
    border-color: var(--color-error);
}

.form__error {
    display: none;
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin-top: var(--spacing-xs);
}

.form__error--visible {
    display: block;
}

.form__textarea {
    resize: vertical;
    min-height: 100px;
}

.form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.form__select option {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumbs {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.breadcrumbs a {
    color: var(--color-text-muted);
}

.breadcrumbs a:hover {
    color: var(--color-accent-light);
}

/* ============================================================
   TAGS / BADGES
   ============================================================ */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
    background-color: rgba(37,99,235,0.15);
    color: var(--color-accent-light);
    border: 1px solid rgba(37,99,235,0.3);
}

.tag--success {
    background-color: rgba(34,197,94,0.12);
    color: var(--color-success);
    border-color: rgba(34,197,94,0.3);
}

.tag--warning {
    background-color: rgba(245,158,11,0.12);
    color: var(--color-warning);
    border-color: rgba(245,158,11,0.3);
}

.tag--error {
    background-color: rgba(239,68,68,0.12);
    color: var(--color-error);
    border-color: rgba(239,68,68,0.3);
}

.tag--violet {
    background-color: rgba(124,58,237,0.12);
    color: #7c3aed;
    border-color: rgba(124,58,237,0.3);
}

.tag--cyan {
    background-color: rgba(8,145,178,0.12);
    color: #0891b2;
    border-color: rgba(8,145,178,0.3);
}

/* ============================================================
   AVAILABILITY STATUS
   ============================================================ */

.availability {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.availability::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.availability--in-stock { color: var(--color-success); }
.availability--in-stock::before { background-color: var(--color-success); }

.availability--on-order { color: var(--color-warning); }
.availability--on-order::before { background-color: var(--color-warning); }

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xl) 0;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.pagination__item:hover,
.pagination__item--active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* ============================================================
   CTA BLOCK
   ============================================================ */

.cta-block {
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-card) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
}

.cta-block__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.cta-block__text {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
}

.cta-block__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

/* Variant with leading icon + feature list (e.g. catalog page) —
   accent = var(--color-accent), everything stays on one row, left-aligned.
   Строка держится за счёт одного гибкого элемента: сжимается и переносится
   только текстовая колонка, преимущества и кнопки остаются как есть. */
.cta-block--features {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    padding: 12px 14px;
    background: rgba(37, 99, 235, 0.06);
}

.cta-block--features .cta-block__actions {
    margin-left: auto;
    flex-shrink: 0;
}

.cta-block--features .cta-block__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 0 1 auto;
    min-width: 0;
}

/* Ниже 160px колонку не жмём: заголовок и подзаголовок должны оставаться
   читаемыми, а не превращаться в столбик из одного слова. */
.cta-block--features .cta-block__copy { min-width: 160px; }

.cta-block__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    color: var(--color-accent);
}

.cta-block__features {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    flex: 0 0 auto;
}

.cta-block__feature {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.cta-block__feature-icon {
    display: flex;
    color: var(--color-accent);
    flex-shrink: 0;
}


/* Ни заголовок, ни подзаголовок не nowrap: при нехватке места они переносятся
   на вторую строку внутри своей колонки. С nowrap длинная подпись (страница
   марки стали) вылезала из колонки поверх списка преимуществ. */
.cta-block--features .cta-block__title {
    font-size: 14px;
    margin-bottom: 2px;
}

.cta-block--features .cta-block__text {
    font-size: 11px;
}

.cta-block--features .btn--primary {
    background-color: var(--color-bg-dark);
}

.cta-block--features .btn--primary:hover {
    background-color: #06304f;
}

.cta-block--features .btn--outline {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.cta-block--features .btn--outline:hover {
    background-color: rgba(37, 99, 235, 0.08);
}

.cta-block--features .cta-block__actions {
    gap: 10px;
}

.cta-block--features .cta-block__actions .btn {
    padding: 10px 16px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* Compact variant — small "не нашли позицию" card next to the direction switcher */
.cta-block--compact {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 14px 16px;
    margin: 0;
    background: rgba(37, 99, 235, 0.06);
}

.cta-block--compact .cta-block__title {
    font-size: 16px;
    color: var(--color-bg-dark);
    margin-bottom: 0;
}

.cta-block--compact .cta-block__text {
    font-size: 14px;
    color: var(--color-text-muted);
}

.cta-block--compact .cta-block__actions {
    margin-top: 8px;
}

.cta-block--compact .btn--outline {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.cta-block--compact .btn--outline:hover {
    background-color: rgba(37, 99, 235, 0.08);
}

/* До 1600 px список преимуществ в полном размере не помещается рядом с текстом
   и кнопками — ужимаем сам список (шрифт, иконки, промежутки), чтобы полоса
   осталась одной строкой. */
@media (max-width: 1599px) {
    .cta-block--features { gap: 12px; }
    .cta-block--features .cta-block__features { gap: 8px; }
    .cta-block--features .cta-block__feature { font-size: 11px; gap: 3px; }
    .cta-block--features .cta-block__feature-icon,
    .cta-block--features .cta-block__feature-icon img { width: 24px; height: 24px; }
    /* Ведущая иконка блока — 80px даже в компактном варианте; на этих ширинах
       именно её ширины не хватало, чтобы третий пункт остался в строке. */
    .cta-block--features .cta-block__icon,
    .cta-block--features .cta-block__icon img { width: 52px; height: 52px; }
}

/* 1200–1399 px — самый тесный десктоп: сжимаем ещё на шаг, иначе третий пункт
   уходит на второй ряд. Ниже 12px опускаемся только у служебных подписей. */
@media (max-width: 1399px) {
    .cta-block--features .cta-block__title { font-size: 13px; }
    .cta-block--features .cta-block__text { font-size: 10px; }
    .cta-block--features .cta-block__features { gap: 6px; }
    .cta-block--features .cta-block__feature { font-size: 10px; }
    .cta-block--features .cta-block__feature-icon,
    .cta-block--features .cta-block__feature-icon img { width: 20px; height: 20px; }
    .cta-block--features .cta-block__icon,
    .cta-block--features .cta-block__icon img { width: 44px; height: 44px; }
}

/* Планшет: в одну строку уже не помещается — преимущества уходят на свою. */
@media (max-width: 1199px) {
    .cta-block--features {
        flex-wrap: wrap;
    }

    .cta-block--features .cta-block__features {
        order: 3;
        flex: 0 0 100%;
        flex-wrap: nowrap;
    }
}

@media (max-width: 767px) {
    .cta-block {
        flex-direction: column;
        /* stretch, а не flex-start: при flex-start дети получают ширину
           max-content, абзац вытягивается в строку и уводит страницу
           в горизонтальный скролл. */
        align-items: stretch;
    }

    .cta-block__content,
    .cta-block__copy {
        min-width: 0;
    }

    .cta-block--features .cta-block__content {
        flex: 1 1 auto;
    }

    .cta-block__features {
        gap: var(--spacing-md);
    }

    /* На телефоне пункты с иконками переносятся: строки для них уже нет. */
    .cta-block--features .cta-block__features {
        flex-wrap: wrap;
    }

    .cta-block__actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-block__actions .btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }
}

/* ============================================================
   OVERLAY
   ============================================================ */

.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.overlay--visible {
    opacity: 1;
    pointer-events: all;
}

/* ============================================================
   PAGE TITLES
   ============================================================ */

.page-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    padding-top: var(--spacing-lg);
}

.page-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xl);
    max-width: 680px;
}

.text-muted {
    color: var(--color-text-muted);
}

.richtext h2, .richtext h3 {
    color: var(--color-white);
    margin: var(--spacing-xl) 0 var(--spacing-md);
}

.richtext p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.richtext ul, .richtext ol {
    list-style: disc;
    padding-left: 24px;
    margin-bottom: var(--spacing-md);
}

.richtext table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
}

.richtext th, .richtext td {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    text-align: left;
    font-size: var(--font-size-sm);
}

.richtext th {
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ============================================================
   BADGE COLORS
   ============================================================ */

.badge--green {
    background-color: rgba(34,197,94,0.15);
    color: var(--color-success);
    border: 1px solid rgba(34,197,94,0.3);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;              /* было: var(--font-size-xs) = 12px */
    font-weight: 600;
    white-space: nowrap;          /* было: не задано — переносилось на 2 строки в узкой колонке */
}

.badge--yellow {
    background-color: rgba(245,158,11,0.12);
    color: var(--color-warning);
    border: 1px solid rgba(245,158,11,0.3);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;              /* было: var(--font-size-xs) = 12px */
    font-weight: 600;
    white-space: nowrap;
}

.tag--sm {
    font-size: 11px;
    padding: 2px 8px;
}

/* ============================================================
   TABLE WRAP (scrollable on mobile)
   ============================================================ */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   LISTING LAYOUT (sidebar + main)
   ============================================================ */

.listing-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-3xl);
}

/* Сайдбар тянется на всю высоту строки грида. Без этого align-items: start
   ужимал его по содержимому, и у липкой панели фильтров внутри не оставалось
   хода: её ограничивал не экран, а высота собственного родителя — панель
   уезжала вместе со страницей, хотя position: sticky был проставлен. */
.listing-sidebar {
    align-self: stretch;
}

/* min-width: 0 — у элемента грида он по умолчанию auto, и широкая таблица
   товаров растягивала колонку, а за ней и всю страницу: на телефоне листинг
   уезжал вбок на 114 px. Сама таблица прокручивается внутри своей обёртки. */
.listing-layout > * { min-width: 0; }

@media (max-width: 1199px) {
    .listing-layout {
        grid-template-columns: 240px 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 767px) {
    .listing-layout {
        grid-template-columns: 1fr;
    }
    /* Листинг выше фильтра на мобильных */
    .listing-layout aside    { order: 2; }
    .listing-layout .listing { order: 1; }
    /* Мобильный сброс самой .filter-form — ниже, в секции FILTER FORM:
       здесь он стоял ДО объявления .filter-form и проигрывал ему по порядку
       в каскаде (одинаковая специфичность), поэтому не работал. */
}

.listing-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

.listing-header__controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.listing-count-wrap {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.view-toggle {
    display: flex;
    gap: var(--spacing-xs);
}

.btn--icon {
    padding: 8px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
}

.btn--icon:hover,
.btn--icon.active {
    color: var(--color-accent-light);
    border-color: var(--color-accent);
}

/* ============================================================
   FILTER FORM
   ============================================================ */

/* Панель фильтров закреплена всегда. Одного position: sticky для этого мало:
   в категориях панель вырастает до 1400–1700px (марки, стандарты, диапазоны),
   это выше экрана — липкий блок «отпускает» верх и уезжает вместе со страницей.
   Поэтому ограничиваем высоту экраном и прокручиваем содержимое внутри панели. */
.filter-form {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    position: sticky;
    top: calc(var(--header-height) + var(--header-offset) + var(--spacing-md));
    max-height: calc(100vh - var(--header-height) - var(--header-offset) - var(--spacing-md) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* На мобильном фильтры уходят под листинг (order: 2) и ведут себя как обычный
   блок в потоке: ни закрепления, ни своей прокрутки. Правило должно идти
   после объявления .filter-form выше — специфичность у них одинаковая. */
@media (max-width: 767px) {
    .filter-form {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

.filter-form__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.filter-form__title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-white);
}

.filter-group {
    border: none;
    padding: 0;
    margin-bottom: var(--spacing-lg);
}

.filter-group__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.filter-group__items--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.filter-group__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
}

.filter-group__item[hidden] {
    display: none;
}

/* Первые 10 пунктов видны сразу, остальные — за кнопкой "Показать ещё" */
.filter-group__items:not(.is-expanded) .filter-group__item--extra {
    display: none;
}

.filter-group__show-more {
    display: block;
    margin-top: var(--spacing-xs);
    padding: 0;
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    cursor: pointer;
}

.filter-group__show-more:hover {
    text-decoration: underline;
}

.filter-group__item input[type="checkbox"],
.filter-group__item input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.filter-group__range {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form__input--sm {
    width: 80px;
    padding: 6px 10px;
    font-size: var(--font-size-sm);
}

/* ============================================================
   LISTING AREA
   ============================================================ */

.listing {
    min-height: 200px;
    position: relative;
}

.listing--loading {
    opacity: 0.5;
    pointer-events: none;
}

.listing--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    border-radius: var(--border-radius-md);
}

.listing__empty,
.listing__no-results-cta {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
    background: var(--color-bg-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-md);
}

.listing__empty p,
.listing__no-results-cta p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

/* ============================================================
   PRODUCTS TABLE
   ============================================================ */

.products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;              /* было: var(--font-size-sm) = 14px */
}

.products-table th {
    text-align: left;
    padding: 8px 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;        /* letter-spacing 0.05em был подобран под uppercase, для обычного регистра многовато */
    line-height: 1.3;
    color: var(--color-white);
    background: var(--color-bg-dark);
    border-bottom: 1px solid var(--color-border);
    white-space: normal;
}

.products-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
}

.products-table__row:hover td {
    background: rgba(255,255,255,0.03);
}

/* Марка стали всегда в одну строку: «AISI 2205» — это одно обозначение, и
   разрывать его по пробелу нельзя. Колонку от длинных значений («Нержавеющая
   сталь AISI 304») спасает не перенос марки, а ограничение колонки
   «Наименование» ниже — место забирала именно она. */
.products-table .tag { white-space: nowrap; }
.products-table__col--name { width: 34%; }

/* Наименование — не больше трёх строк: у сеток и арматуры подписи длинные и
   растягивали строку таблицы по высоте. Полное название видно в подсказке
   и на странице товара. */
.products-table__name-link {
    color: var(--color-white);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.products-table__name-link:hover {
    color: var(--color-accent-light);
}

/* ============================================================
   PAGINATION ELLIPSIS
   ============================================================ */

.pagination__ellipsis {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

/* ============================================================
   PRODUCT GALLERY + LIGHTBOX
   ============================================================ */

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.product-gallery__main {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-white);
    cursor: zoom-in;
}

.product-gallery__main-img {
    width: 100%;
    height: 400px;
    object-fit: contain;   /* товар виден целиком, кадр не режется по краям */
    background-color: var(--color-white);
    display: block;
    transition: transform 0.3s ease;
}

.product-gallery__main:hover .product-gallery__main-img {
    transform: scale(1.02);
}

.product-gallery__zoom {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    background: rgba(0, 0, 0, .55);
    color: var(--color-white);
    border-radius: var(--border-radius-sm);
    padding: 6px 8px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s;
}

.product-gallery__main:hover .product-gallery__zoom {
    opacity: 1;
}

.product-gallery__thumbs {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.product-gallery__thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: var(--color-white);
    display: block;
}

.product-gallery__thumb--active,
.product-gallery__thumb:hover {
    border-color: var(--color-accent);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] { display: none; }

.lightbox__img-wrap {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    user-select: none;
    pointer-events: none;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, .14);
    color: var(--color-white);
    border-radius: var(--border-radius-sm);
    line-height: 1;
    transition: background 0.2s;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(255, 255, 255, .28);
}

.lightbox__close {
    top: 16px;
    right: 16px;
    padding: 8px;
}

.lightbox__prev,
.lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 18px;
    font-size: 28px;
}

.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }

@media (max-width: 767px) {
    .product-gallery__main-img { height: 260px; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */

.product-page__layout {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
    padding: var(--spacing-2xl) 0 var(--spacing-3xl);
}

@media (max-width: 1199px) {
    .product-page__layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2xl);
    }
}

@media (max-width: 767px) {
    .product-page__layout {
        grid-template-columns: 1fr;
    }
}

.product-page__img {
    width: 100%;
    border-radius: var(--border-radius-md);
    object-fit: contain;
    background-color: var(--color-white);
}

.product-page__grade-link {
    margin-bottom: var(--spacing-sm);
}

.product-page__title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-lg);
}

.product-page__price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.product-page__price-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.product-page__price-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-white);
}

.product-page__price-value--request {
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
}

.product-page__badge {
    margin-bottom: var(--spacing-md);
    display: inline-block;
}

.product-page__specs {
    width: 100%;
    margin: var(--spacing-lg) 0;
    border-collapse: collapse;
}

.product-page__specs th {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    padding: 8px 0;
    width: 180px;
    vertical-align: top;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.product-page__specs td {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.product-page__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-xl);
}

.product-tabs {
    border-top: 1px solid var(--color-border);
}

/* ============================================================
   TABS
   ============================================================ */

.tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-xl);
    overflow-x: auto;
}

.tabs__btn {
    padding: 12px 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    margin-bottom: -1px;
}

.tabs__btn:hover {
    color: var(--color-white);
}

.tabs__btn--active {
    color: var(--color-accent-light);
    border-bottom-color: var(--color-accent);
}

.tabs__panel {
    display: none;
}

.tabs__panel--active {
    display: block;
}

/* ============================================================
   PROJECTS — JS FILTER TABS
   ============================================================ */

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.filter-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-card);
    font-size: 14px;
    color: var(--color-bg-dark);
    transition: all var(--transition-fast);
}

.filter-tabs__btn:hover,
.filter-tabs__btn--active {
    border-color: var(--color-bg-dark);
    background: var(--color-bg-dark);
    color: var(--color-white);
}
.filter-tabs__count {
    font-size: 11px;
    opacity: 0.7;
}

/* Project cards — same bottom-anchored footer technique as the grade cards */
.project-card { display: flex; flex-direction: column; }
.project-card .card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md) 8px 8px;
}
.project-card__media { position: relative; }
.project-card__media .card__image { aspect-ratio: 16 / 9; }
.project-card__date {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--color-white);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
}
.project-card__title {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 8px;
}
.project-card__title a { color: inherit; }
.project-card__title a:hover { color: var(--color-accent); }
.project-card__field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.project-card__field-icon { flex-shrink: 0; display: flex; color: var(--color-text-muted); }
.project-card__link {
    margin-top: auto;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.project-card__link:hover { text-decoration: underline; }

/* Bottom CTA — same .cta-block/.cta-block--features component as page-catalog.php,
   scoped overrides here only (title/text copy + no features list is set via args
   in archive-project.php; catalog page's own call/markup is untouched).
   No features passed here → no .cta-block--features modifier class → several of
   its effects are missing and restored explicitly below:
   - base .cta-block padding is var(--spacing-2xl) = 48px; --features overrides it
     to 12px 16px, which is what this compact instance actually wants.
   - .cta-block__content has no flex rule outside --features, so the icon (a
     block-level flex container) and copy stacked vertically instead of sitting
     side by side.
   - btn--primary's dark-navy color is set by --features too; without it the
     button fell back to the base accent blue. */
.post-type-archive-project .cta-block { padding: 12px 16px; background: rgba(37, 99, 235, 0.06); }
.post-type-archive-project .cta-block .cta-block__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.post-type-archive-project .cta-block .cta-block__icon { width: 48px; height: 48px; }
.post-type-archive-project .cta-block .cta-block__icon img { width: 48px; height: 48px; }
.post-type-archive-project .cta-block .cta-block__title { font-size: 16px; margin-bottom: 0; }
.post-type-archive-project .cta-block .cta-block__text { font-size: 14px; }
.post-type-archive-project .cta-block .cta-block__actions .btn { font-size: 14px; padding: 12px 32px; }
.post-type-archive-project .cta-block .cta-block__actions .btn--primary { background-color: var(--color-bg-dark); }
.post-type-archive-project .cta-block .cta-block__actions .btn--primary:hover { background-color: #06304f; }

/* ============================================================
   PROJECT PAGE
   ============================================================ */

.project-page__layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--spacing-2xl);
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

@media (max-width: 1199px) {
    .project-page__layout {
        grid-template-columns: 1fr;
    }
}

.project-page__img {
    width: 100%;
    border-radius: var(--border-radius-md);
    object-fit: contain;
    background-color: var(--color-bg-secondary);
    max-height: 500px;
}

.project-page__meta-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
}

.project-page__meta-table th {
    width: 140px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: top;
}

.project-page__meta-table td {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   GRADE PAGE
   ============================================================ */

.grade-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.grade-page__analogs {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
}

.grade-card__name {
    font-size: var(--font-size-xl);
}

.grade-card__count {
    font-size: var(--font-size-sm);
    color: var(--color-accent-light);
    margin-top: var(--spacing-sm);
}

/* ============================================================
   CONTACTS
   ============================================================ */

.contacts-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--spacing-3xl);
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

@media (max-width: 1199px) {
    .contacts-layout {
        grid-template-columns: 1fr;
    }
}

.contacts-info__item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.contacts-info__item svg {
    flex-shrink: 0;
    color: var(--color-accent-light);
    margin-top: 2px;
}

.contacts-info__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contacts-info__value {
    font-size: var(--font-size-md);
    color: var(--color-white);
    font-weight: 500;
}

a.contacts-info__value:hover {
    color: var(--color-accent-light);
}

/* ============================================================
   DOCUMENTS
   ============================================================ */

.doc-section {
    margin-bottom: var(--spacing-2xl);
}

.doc-section__title {
    font-size: var(--font-size-xl);
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.doc-list__item {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.doc-list__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-accent-light);
    font-size: var(--font-size-sm);
}

.doc-list__link:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.doc-list__name {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.doc-list__date {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: var(--spacing-sm);
}

/* ============================================================
   SERVICE PAGE
   ============================================================ */

.service-page__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
}

.service-page__icon {
    flex-shrink: 0;
}

.service-card__icon {
    display: block;
    margin: var(--spacing-lg) var(--spacing-lg) 0;
}

.advantage-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.advantage-list__item {
    display: flex;
    gap: var(--spacing-sm);
    font-size: var(--font-size-md);
    color: var(--color-text);
    padding-left: 24px;
    position: relative;
}

.advantage-list__item::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 700;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Общий фрейм на весь ряд показателей, с вертикальными разделителями между
   карточками (border-left на всех кроме первой — уже начинается/заканчивается
   на 16px от горизонтальных границ фрейма благодаря padding самого фрейма) */
.about-stats {
    background: rgba(37, 99, 235, 0.06);
    border-radius: var(--border-radius-md);
    padding: 12px 16px;
}
.stat-card {
    text-align: center;
    padding: 0 var(--spacing-md);
}
.stat-card:not(:first-child) {
    border-left: 1px solid var(--color-border);
}

.stat-card__number {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.stat-card__label {
    font-size: 13px;
    color: var(--color-text-muted);
}

.team-card {
    text-align: center;
}

.team-card__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--spacing-md);
}

.team-card__name {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--spacing-xs);
}

.team-card__pos {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.cert-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cert-list__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-accent-light);
    font-size: var(--font-size-sm);
}

.cert-list__item:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* --- About page: hero (copy + highlights left, photo right) --- */
.about-hero {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
}
.about-hero__copy { flex: 1 1 65%; min-width: 0; }
.about-hero__photo { flex: 1 1 30%; min-width: 0; }
.about-hero__photo img {
    display: block;
    width: 90%;
    margin-left: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
}
@media (max-width: 1199px) {
    .about-hero { flex-direction: column; }
}

.about-highlights {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 6px;
    width: 700px;
    max-width: 100%;
}
.about-highlights__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}
.about-highlights__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}
.about-highlights__icon svg { width: 28px; height: 28px; }
.about-highlights__icon img { width: 28px; height: 28px; object-fit: contain; }
.about-highlights__value {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}
.about-highlights__label {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* --- About page: "О нас" section — text left, photo right. Заголовок теперь
   внутри текстовой колонки (не над всем рядом), а выравнивание — по верхнему
   краю, поэтому фото начинается на уровне заголовка и заканчивается на уровне
   конца текста. --- */
.about-us {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2xl);
}
.about-us__text { flex: 1 1 65%; min-width: 0; }
.about-us__text p { font-size: 14px; }
.about-us__photo {
    flex: 1 1 55%;
    min-width: 0;
    aspect-ratio: 45 / 19;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
}
@media (max-width: 1199px) {
    .about-us { flex-direction: column; }
}

/* --- About page: Миссия+Ценности (ряд 2:1), Как мы работаем (во всю ширину под ними) --- */
.about-mission-values {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
@media (max-width: 1199px) {
    .about-mission-values { grid-template-columns: 1fr; }
}
.about-column {
    position: relative; /* готово под декоративную полупрозрачную иконку на фоне */
    background: rgba(37, 99, 235, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
}
.about-column--full {
    padding: 12px;
}
.about-column__title {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}
.about-column .richtext p,
.about-column .advantage-list__item {
    font-size: 13px;
}

/* Как мы работаем — грид с явными строками (иконки / заголовки / подписи), чтобы
   все иконки лежали на одной линии, все заголовки — на одной, все подписи — на
   одной, независимо от разной длины текста у соседних пунктов. Стрелки — в той
   же строке грида, что и иконки. Колонки: заголовок блока, шаг1, стрелка1, шаг2,
   стрелка2, шаг3, стрелка3, шаг4. */
.about-steps--row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
}
.about-steps__title-col {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 16px;
}
.about-steps__col--1 { grid-column: 2; }
.about-steps__col--2 { grid-column: 4; }
.about-steps__col--3 { grid-column: 6; }
.about-steps__col--4 { grid-column: 8; }
.about-steps__arrow--1 { grid-column: 3; }
.about-steps__arrow--2 { grid-column: 5; }
.about-steps__arrow--3 { grid-column: 7; }

.about-steps__icon {
    grid-row: 1;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-accent);
}
.about-steps__icon svg { width: 26px; height: 26px; }
.about-steps__title {
    grid-row: 2;
    justify-self: center;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
}
.about-steps__desc {
    grid-row: 3;
    align-self: start;
    justify-self: center;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.about-steps__arrow {
    grid-row: 1;
    justify-self: center;
    color: var(--color-text-muted);
    font-size: 16px;
}

/* --- About page: sidebar "Сертификаты и документы" --- */
.about-certs {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
}
.about-certs__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}
.about-certs__grid {
    display: flex;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}
.about-certs__thumb {
    flex: 1;
    aspect-ratio: 3/4;
    object-fit: contain;
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
}
.about-certs__btn { width: 100%; justify-content: center; }

/* ============================================================
   HEADER
   ============================================================ */

/* Шапка закреплена на всех страницах без исключений.
   top считается от --header-offset: у гостя это 0, у залогиненного —
   высота админ-бара WordPress (он position: fixed и перекрывал шапку). */
.header {
    position: sticky;
    top: var(--header-offset);
    z-index: 800;
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
}

/* Админ-бар WP: 32px на десктопе, 46px на планшете; на телефоне он
   position: absolute и уезжает вместе со страницей — смещение не нужно. */
body.admin-bar { --header-offset: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar { --header-offset: 46px; }
}
@media screen and (max-width: 600px) {
    body.admin-bar { --header-offset: 0px; }
}

.header__inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--spacing-xl);
}

.header__logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    flex-shrink: 0;
}

.header__logo-text {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-white);
    letter-spacing: 0.04em;
}

.header__logo-sub {
    font-size: 10px;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.header__nav {
    flex: 1;
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.header__nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.header__nav-link:hover,
.header__nav-item--mega:hover .header__nav-link,
.header__nav-item--dropdown:hover .header__nav-link,
.header__nav-item--mega.is-open .header__nav-link,
.header__nav-item--dropdown.is-open .header__nav-link {
    color: var(--color-white);
    background: rgba(255,255,255,0.07);
}

.header__nav-arrow {
    transition: transform var(--transition-fast);
}

.header__nav-item--mega.is-open .header__nav-arrow,
.header__nav-item--dropdown.is-open .header__nav-arrow {
    transform: rotate(180deg);
}

.header__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.header__phone {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.header__phone-number {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-white);
}

.header__phone-sub {
    font-size: 10px;
    color: var(--color-text-muted);
}

.header__spec-btn {
    position: relative;
    padding: 8px;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
    border-radius: var(--border-radius-sm);
}

.header__spec-btn:hover {
    color: var(--color-white);
}

.header__spec-btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -30%);
}

.header__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

.header__burger-line {
    width: 22px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: all var(--transition-fast);
    display: block;
}

/* Шапка не должна выходить за экран: содержимое (логотип + меню + телефон +
   кнопка КП + иконка спецификации) шире 1280–1366 px, и страница «ездила»
   вбок на всём сайте. Ужимаем по шагам — сначала промежутки, потом подпись
   логотипа, — чтобы не убирать с экрана ни один элемент. */
@media (max-width: 1439px) {
    .header__inner { gap: var(--spacing-md); }
    .header__nav-list { gap: 0; }
    .header__nav-link { padding-left: 8px; padding-right: 8px; }
}

/* «Нержавеющий прокат и арматура» под логотипом занимает 217 px — на узких
   ноутбуках и телефонах это и есть та ширина, из-за которой шапка не влезала.
   Само название компании остаётся. */
@media (max-width: 1339px) {
    .header__logo-sub { display: none; }
}

@media (max-width: 1199px) {
    .header__nav { display: none; }
    .header__phone { display: none; }
    .header__burger { display: flex; }
}

/* Узкий телефон (≤400 px): логотип, кнопка КП, иконка спецификации и бургер
   в сумме на 3 px шире экрана. Ужимаем промежутки и саму кнопку, ничего не
   убирая: КП — главное действие шапки. */
@media (max-width: 400px) {
    .header__inner { gap: var(--spacing-sm); }
    .header__right { gap: var(--spacing-sm); }
    .header__right .btn { padding: 8px 12px; font-size: 13px; }
}

/* ============================================================
   MEGA MENU
   ============================================================ */

.megamenu {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-accent);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 700;
}

.header__nav-item--mega {
    position: static;
}

.header__nav-item--mega.is-open .megamenu {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.megamenu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
}
.megamenu__footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-md) 0 var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}
.megamenu__all { background-color: #041e37; }
.megamenu__all:hover { background-color: #06304f; }

.megamenu__col-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.megamenu__sub-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.megamenu__sub-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: 4px 0;
    display: block;
    transition: color var(--transition-fast);
}

.megamenu__sub-link:hover {
    color: var(--color-accent-light);
}

/* ============================================================
   DROPDOWN (services)
   ============================================================ */

.header__nav-item--dropdown {
    position: relative;
}

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-sm) 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 700;
}

.header__nav-item--dropdown.is-open .dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.dropdown__link {
    display: block;
    padding: 8px var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.dropdown__link:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.06);
}

/* ============================================================
   MOBILE MENU
   ============================================================ */

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 100vw;
    height: 100%;
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border);
    z-index: 950;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mobile-menu--open {
    transform: translateX(0);
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
    z-index: 1;
}

.mobile-menu__logo {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-white);
    text-decoration: none;
}

.mobile-menu__close {
    padding: 8px;
    color: var(--color-text-muted);
}

.mobile-menu__search {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu__list {
    padding: var(--spacing-sm) 0;
}

.mobile-menu__item {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px var(--spacing-lg);
    font-size: var(--font-size-md);
    color: var(--color-text);
    font-weight: 500;
    text-align: left;
}

.mobile-menu__link:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.04);
}

.mobile-menu__arrow {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.mobile-menu__link--accordion[aria-expanded="true"] .mobile-menu__arrow {
    transform: rotate(180deg);
}

.mobile-menu__accordion-content {
    transition: max-height var(--transition-normal);
}

.mobile-menu__sub-title {
    display: block;
    padding: 10px var(--spacing-lg) 6px calc(var(--spacing-lg) + 12px);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-menu__sub-link {
    display: block;
    padding: 8px var(--spacing-lg) 8px calc(var(--spacing-lg) + 24px);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.mobile-menu__sub-link:hover {
    color: var(--color-accent-light);
}

.mobile-menu__footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.mobile-menu__phone {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    text-align: center;
}

/* ============================================================
   MODAL КП
   ============================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.modal--open {
    opacity: 1;
    pointer-events: all;
}

.modal__inner {
    position: relative;
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    padding: var(--spacing-xl);
    z-index: 1001;
}

@media (max-width: 767px) {
    .modal__inner {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
}

.modal__close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    padding: 8px;
    color: var(--color-text-muted);
    border-radius: var(--border-radius-sm);
    z-index: 1;
}

.modal__close:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.08);
}

/* Progress bar */
.progress {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    gap: var(--spacing-sm);
}

.progress__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}

.progress__item--active {
    opacity: 1;
}

.progress__item--completed {
    opacity: 0.7;
}

.progress__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.progress__item--active .progress__num {
    border-color: #041e37;
    background: #041e37;
    color: var(--color-white);
}

.progress__item--completed .progress__num {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--color-white);
}

.progress__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.progress__item--active .progress__label {
    color: var(--color-white);
}

.progress__divider {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    max-width: 60px;
}

/* Modal steps */
.modal__step {
    display: none;
}

.modal__step--active {
    display: block;
}

.modal__step-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--spacing-2xl);
    align-items: start;
}

@media (max-width: 767px) {
    .modal__step-layout {
        grid-template-columns: 1fr;
    }
}

.modal__step-title {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
}

/* Подсказка под заголовком шага (напр. «позиции не обязательны»).
   Цвет задаётся в светлой секции модалки ниже — сама модалка на белом фоне. */
.modal__step-note {
    margin: calc(-1 * var(--spacing-md)) 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.modal__aside-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.modal__aside-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    list-style: none;
}

.modal__aside-list li {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding-left: 16px;
    position: relative;
}

.modal__aside-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-accent-light);
}

.modal__step-aside--summary {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
}

.modal__summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* Правки формы «Запросить КП» */
.modal__step-layout--full { grid-template-columns: 1fr; }
.js-modal-kp .modal__step-title { font-size: 16px; }
.js-modal-kp .file-drop__hint { font-size: 12px; }
.js-modal-kp .form__input::placeholder,
.js-modal-kp .form__textarea::placeholder { font-size: 12px; }
.js-modal-kp .btn--primary { background-color: #041e37; }
.js-modal-kp .btn--primary:hover { background-color: #06304f; }
.js-modal-kp .modal__form .btn { font-size: 14px; padding: 12px 24px; }

.modal__step-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* Modal product table */
.modal__product-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

.modal__product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.modal__product-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modal__product-table td {
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.modal__product-table .form__input {
    padding: 6px 8px;
    font-size: var(--font-size-sm);
}

.form__input--qty {
    width: 64px;
}

.modal__spec-prompt {
    background: rgba(37,99,235,0.1);
    border: 1px solid rgba(37,99,235,0.3);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.modal__spec-prompt p {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    flex: 1;
    min-width: 200px;
}

/* File drop area */
.file-drop {
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    position: relative;
}

.file-drop:hover {
    border-color: var(--color-accent);
}

.file-drop__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.file-drop__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    pointer-events: none;
}

.file-drop__hint {
    font-size: 11px;
}

.file-drop--active {
    border-color: var(--color-accent);
    background: rgba(41, 98, 255, 0.07);
}

.file-drop__name {
    color: var(--color-accent-light);
    font-weight: 500;
    word-break: break-all;
}

.file-drop__error {
    color: var(--color-error, #e53e3e);
    font-size: var(--font-size-sm);
}

.filter-group__no-results {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--spacing-xs) 0;
}

/* Form radio group */
.form__radio-group {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.form__radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
}

.form__radio input[type="radio"] {
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-3xl);
}

.footer__inner {
    display: grid;
    grid-template-columns: 280px repeat(3, 1fr) 220px;
    gap: var(--spacing-2xl);
    padding-bottom: var(--spacing-3xl);
}

@media (max-width: 1199px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

.footer__logo {
    display: inline-block;
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-white);
    text-decoration: none;
    margin-bottom: var(--spacing-md);
}

.footer__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.footer__col-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-md);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer__links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: var(--color-accent-light);
}

.footer__phone {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    margin-bottom: 4px;
}

.footer__phone-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.footer__email {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-accent-light);
    margin-bottom: var(--spacing-sm);
}

.footer__hours {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.footer__bottom {
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md) 0;
}

/* Слева — реквизиты продавца, справа — правовые ссылки, оговорка об оферте
   и копирайт. По ширине не делим поровну: реквизиты короткие и фиксированные,
   правовой столбец забирает остаток. */
.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.footer__requisites {
    flex: 0 1 340px;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--color-text-muted);
}
.footer__requisites p { margin: 0; }
.footer__requisites-name { font-weight: 700; color: var(--color-text); margin-bottom: 2px !important; }
.footer__requisites a { color: inherit; }
.footer__requisites a:hover { color: var(--color-accent-light); }

.footer__legal-wrap {
    flex: 1 1 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    text-align: right;
}

.footer__copyright {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px var(--spacing-md);
}

.footer__legal a,
.footer__legal-btn {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.footer__legal a:hover,
.footer__legal-btn:hover {
    color: var(--color-accent-light);
}

/* Кнопка вызова баннера выглядит как соседние ссылки: для пользователя это
   такой же пункт списка, а не действие формы. */
.footer__legal-btn {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer__note {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 62ch;
}

/* ============================================================
   HERO (front-page)
   ============================================================ */

.hero {
    position: relative;
    background: linear-gradient(135deg, var(--color-bg) 0%, #041E37 50%, var(--color-bg-secondary) 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.hero__title {
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 800;
    color: var(--color-white);
    max-width: 780px;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
}

.hero__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    max-width: 560px;
    margin-bottom: var(--spacing-2xl);
}

/* .hero — флекс-контейнер, а у флекс-элемента min-width по умолчанию auto:
   контейнер не мог сжаться уже своего содержимого и задавал минимальную ширину
   всей странице (766 px при экране 390 px), отчего сайт «ездил» вбок. */
.hero > .container { min-width: 0; }

.hero__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xl);
}

.hero__stats {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    margin-top: var(--spacing-xl);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hero__stats::-webkit-scrollbar { display: none; }

.hero__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--border-radius-md);
    padding: 10px 14px;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}
.hero__stat:hover { background: rgba(255,255,255,0.16); }

.hero__stat-icon {
    display: flex;
    align-items: center;
    color: var(--color-white);
    flex-shrink: 0;
}
.hero__stat-icon svg { display: block; }

.hero__stat-text {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    font-weight: 500;
    white-space: nowrap;
}

/* ============================================================
   DIRECTION CARD (front / catalog)
   ============================================================ */

/* Фото направления — квадрат, изображение целиком (не обрезается), а кнопка
   «Перейти в каталог» лежит поверх фото: карточка не становится выше от того,
   что картинка стала квадратной. */
.direction-card__media {
    position: relative;
    display: block;
}

/* Здесь наоборот cover: фото должно заполнять карточку по ширине без просветов
   по бокам, лёгкая обрезка сверху/снизу допустима (кадр по центру). */
.direction-card .card__image {
    display: block;
    aspect-ratio: 5/4;
    object-fit: cover;
    object-position: center;
    background-color: var(--color-white);
}

.direction-card__cta {
    position: absolute;
    left: var(--spacing-md);
    bottom: var(--spacing-sm);
    padding: 6px 14px;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    background-color: var(--color-bg-dark);
    color: var(--color-white);
    border: 1px solid var(--color-bg-dark);
    box-shadow: var(--shadow-sm);
}

.direction-card__cta:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.direction-card .card__body {
    padding: var(--spacing-md);
}

.direction-card .card__title {
    font-size: var(--font-size-md);
    margin-bottom: 6px;
}

.direction-card__sub-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0;   /* список теперь последний в карточке — хвостовой отступ не нужен */
}

.direction-card__sub-list a {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.direction-card__sub-list a:hover {
    color: var(--color-accent-light);
}

/* ============================================================
   SUBCATEGORY CARD (уровень 1 категорий, taxonomy-product_category.php)
   Прямоугольная карточка: фото слева, название + количество справа.
   ============================================================ */

.subcategory-card {
    display: flex;
    align-items: stretch;
}

/* Фото уже и ниже, фон белый — без серых полей сверху/снизу и по бокам:
   высоту карточки задаёт текстовая часть, а не картинка. */
.subcategory-card .card__image {
    width: 110px;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: contain;
    background-color: var(--color-white);
    flex-shrink: 0;
}

.subcategory-card .card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-md);
}

.subcategory-card .card__title {
    margin-bottom: 4px;
}

@media (max-width: 480px) {
    .subcategory-card .card__image {
        width: 100px;
    }
}

/* ============================================================
   CATEGORY SWITCHER (уровень 2 — над хлебными крошками):
   4 карточки направлений + компактный CTA-блок справа.
   CTA вынесен из грида и растянут по высоте (top:0/bottom:0)
   на всю .category-top — карточки + хлебные крошки, через
   зарезервированный padding-right на обёртке.
   ============================================================ */

.category-top {
    position: relative;
    margin-top: 40px;      /* было: 0 (вплотную к хедеру) → стало: 40px */
    padding-right: 336px;  /* 320px ширина CTA + 16px гэп */
}

.category-switcher {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;             /* было: 12px → стало: 16px (карточки чуть уже) */
    margin-bottom: 20px;
}

.category-switcher__cta {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;          /* было: 280px (колонка в гриде) → стало: 320px, отдельно от грида */
}

.category-switcher__cta .cta-block--compact {
    width: 100%;
    height: 100%;          /* растягиваем на всю высоту .category-top */
}

.direction-nav-card {
    display: flex;
    align-items: center;
    gap: 8px;              /* было: 10px → стало: 8px */
    padding: 5px;           /* было: 8px → стало: 5px (карточка компактнее) */
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: border-color var(--transition-fast);
}

.direction-nav-card:hover {
    border-color: var(--color-accent);
}

.direction-nav-card.is-active {
    border-color: var(--color-accent);
    border-width: 2px;
}

.direction-nav-card__image {
    width: 52px;            /* было: 48px → стало: 52px (картинка крупнее) */
    height: 52px;
    border-radius: var(--border-radius-sm);
    object-fit: contain;
    background-color: var(--color-bg-secondary);
    flex-shrink: 0;
}

.direction-nav-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

@media (max-width: 1199px) {
    .category-top {
        padding-right: 0;
    }
    .category-switcher {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-switcher__cta {
        position: static;
        width: auto;
        margin-top: 12px;
    }
}

@media (max-width: 767px) {
    .category-switcher {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CATEGORY INTRO (уровень 2): заголовок + описание слева,
   3 пункта с иконками справа
   ============================================================ */

.category-intro {
    display: flex;
    align-items: center;   /* было: flex-start → стало: center (по высоте заголовка+описания) */
    gap: var(--spacing-xl);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.category-intro__copy {
    flex: 0 0 50%;         /* было: 1 1 auto, max-width:640px → стало: ровно половина блока */
    max-width: 50%;
}

.category-intro__title {
    font-size: 24px;
    color: var(--color-bg-dark);
    padding-top: 0;
    margin-bottom: 8px;
}

.category-intro__desc {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
}

.category-intro__features {
    display: grid;                    /* было: flex → стало: grid, 3 равные колонки */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    flex: 0 0 50%;                     /* вторая половина блока */
    max-width: 50%;
}

.category-intro__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;            /* было: 150px (фикс.) → стало: auto, тянется на свою колонку grid */
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-text);
}

.category-intro__feature img {
    flex-shrink: 0;
}

@media (max-width: 1199px) {
    .category-intro {
        flex-direction: column;
        align-items: stretch;
    }
    .category-intro__copy,
    .category-intro__features {
        flex-basis: auto;
        max-width: 100%;
    }
}

/* Три преимущества в ряд не помещаются на телефоне: строка не переносилась и
   уводила страницу вбок на 114 px. Складываем в одну колонку. */
.category-intro__features > * { min-width: 0; }

@media (max-width: 575px) {
    .category-intro__features { grid-template-columns: 1fr; gap: 12px; }
}

/* Grades scroll row */
.grades__scroll {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.grades__tag {
    cursor: pointer;
}

/* Find block */
.find-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2xl);
}

@media (max-width: 767px) {
    .find-block {
        grid-template-columns: 1fr;
    }
}

.find-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.project-mini {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--color-text);
    text-decoration: none;
}

.project-mini:hover {
    color: var(--color-accent-light);
}

.project-mini__img {
    width: 60px;
    height: 45px;
    object-fit: contain;
    background-color: var(--color-bg-secondary);
    border-radius: 4px;
    flex-shrink: 0;
}

/* ============================================================
   SEARCH RESULTS PAGE (page-catalog.php с ?s=)
   ============================================================ */

.search-results-group {
    margin-bottom: var(--spacing-3xl);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.search-results-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.search-results-group__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
}

.search-results-group__title a {
    color: inherit;
    text-decoration: none;
}

.search-results-group__title a:hover {
    color: var(--color-accent-light);
}

.search-results-group__count {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-muted);
    background: rgba(255,255,255,0.07);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.search-results-group .table-wrap {
    overflow-x: auto;
    padding: 0;
}

.search-results-group .products-table {
    border-radius: 0;
}

/* ============================================================
   CATALOG SEARCH WRAP
   ============================================================ */

.catalog-search-wrap {
    max-width: 720px;
}

/* ============================================================
   LISTING COUNT LINE
   ============================================================ */

.listing-count-wrap {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.listing-count-wrap strong {
    color: var(--color-white);
}

/* ============================================================
   RESPONSIVE: search results
   ============================================================ */

@media (max-width: 767px) {
    .search-results-group__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .search-results-group__title {
        flex-wrap: wrap;
        font-size: var(--font-size-base);
    }
}

/* ============================================================
   CONTACTS PAGE
   ============================================================ */

.contacts-page-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-3xl);
    align-items: start;
}

@media (max-width: 1199px) {
    .contacts-page-layout {
        grid-template-columns: 1fr 340px;
        gap: var(--spacing-2xl);
    }
}

@media (max-width: 767px) {
    .contacts-page-layout {
        grid-template-columns: 1fr;
    }
}

/* 4 блока реквизитов в сетке 2x2 */
.contacts-blocks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

@media (max-width: 767px) {
    .contacts-blocks-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

.contacts-block {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.contacts-block__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(37, 99, 235, 0.12);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-light);
}

.contacts-block__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contacts-block__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin: 0 0 4px;
}

.contacts-block__value {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    line-height: 1.3;
}

a.contacts-block__value:hover {
    color: var(--color-accent-light);
}

.contacts-block__sublabel {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Карта */
.contacts-map {
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.contacts-map iframe {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
}

/* Как добраться */
.contacts-directions__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
}

.contacts-directions__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contacts-directions__item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
}

.contacts-directions__transport {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-accent-light);
    display: block;
    margin-bottom: 4px;
}

.contacts-directions__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

/* Форма «Напишите нам» */
.contacts-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--header-offset) + var(--spacing-lg));
}

@media (max-width: 767px) {
    .contacts-sidebar {
        position: static;
    }
}

.contacts-form-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
}

.contacts-form-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 4px;
}

.contacts-form-card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-form__hp {
    display: none;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

.contact-form__error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: #fca5a5;
    line-height: 1.5;
}

/* Чекбокс согласия */
.form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.form__checkbox-input {
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.form__checkbox-text a {
    color: var(--color-accent-light);
}

.form__checkbox-text a:hover {
    text-decoration: underline;
}

/* Пометка обязательных полей */
.form__required {
    color: #f87171;
}

/* Textarea */
.form__textarea {
    resize: vertical;
    min-height: 100px;
}

/* Блок btn--block */
.btn--block {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   CONTACTS CTA SECTION
   ============================================================ */

.section--accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, #1e40af 100%);
    padding: var(--spacing-3xl) 0;
}

.contacts-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.contacts-cta__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--spacing-xs);
}

.contacts-cta__desc {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.8);
}

.contacts-cta__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.btn--white {
    background: var(--color-white);
    color: var(--color-accent);
    border-color: var(--color-white);
}

.btn--white:hover {
    background: rgba(255,255,255,0.9);
}

.btn--outline-white {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255,255,255,0.6);
}

.btn--outline-white:hover {
    border-color: var(--color-white);
    background: rgba(255,255,255,0.1);
}

@media (max-width: 767px) {
    .contacts-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-lg);
    }

    .contacts-cta__actions {
        flex-direction: column;
        width: 100%;
    }

    .contacts-cta__actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   COMPREHENSIVE MOBILE PASS (≤767px)
   Системный проход по всем компонентам без существующих стилей.
   ============================================================ */

/* --- Layout & Section --- */
@media (max-width: 767px) {
    .section     { padding: var(--spacing-2xl) 0; }
    .section--sm { padding: var(--spacing-xl) 0; }

    .page-title {
        font-size: 24px;
        padding-top: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    .page-desc { font-size: var(--font-size-base); }

    .section__title { font-size: 22px; }
}

/* --- Hero --- */
@media (max-width: 767px) {
    .hero { min-height: 55vh; }

    .hero__subtitle { font-size: var(--font-size-base); }

    .hero__actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__stats { gap: var(--spacing-md); }
}

/* --- Listing header & filter --- */
@media (max-width: 767px) {
    .listing-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    .listing-header__controls {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    /* Catalog search bar — full width */
    .catalog-search-wrap { max-width: 100%; }
}

/* --- Product page --- */
@media (max-width: 767px) {
    .product-page__title { font-size: var(--font-size-2xl); }

    /* Уменьшаем фиксированную ширину колонки характеристик */
    .product-page__specs th { width: 110px; }
    .product-page__specs td,
    .product-page__specs th {
        padding: 6px 0;
        font-size: var(--font-size-xs);
    }

    .product-page__actions {
        flex-direction: column;
    }
    .product-page__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Tabs --- */
@media (max-width: 767px) {
    .tabs__btn {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* --- Modal --- */
@media (max-width: 767px) {
    .modal__inner {
        padding: var(--spacing-md);
    }

    /* Прогресс: скрываем текстовые метки, оставляем только цифры */
    .progress__label { display: none; }
    .progress__divider { max-width: 24px; }

    /* Навигация шагов — кнопки на всю ширину */
    .modal__step-nav {
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
    }
    .modal__step-nav .btn {
        width: 100%;
        justify-content: center;
    }

    .modal__step-title { font-size: var(--font-size-xl); }
}

/* --- Forms --- */
@media (max-width: 767px) {
    .form__radio-group {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* --- Footer --- */
@media (max-width: 767px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }
    /* Бренд-блок — на всю ширину */
    .footer__brand { grid-column: 1 / -1; }

    .footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    /* На узких экранах правовой столбец выравнивается по левому краю,
       как и реквизиты над ним. */
    .footer__legal-wrap {
        align-items: flex-start;
        text-align: left;
    }
    .footer__legal {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px var(--spacing-md);
    }
}

/* При 480px и ниже — однаколонка для footer */
@media (max-width: 480px) {
    .footer__inner {
        grid-template-columns: 1fr;
    }
}

/* --- Service page --- */
@media (max-width: 767px) {
    .service-page__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
}

/* --- Grade page --- */
@media (max-width: 767px) {
    .grade-page__header {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .stat-card__number { font-size: 36px; }
}

/* --- Contacts map --- */
@media (max-width: 767px) {
    .contacts-map iframe { height: 220px; }
    .contacts-form-card  { padding: var(--spacing-lg); }
}

/* --- Project cards --- */
@media (max-width: 767px) {
    .project-card__meta {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    /* Direction card sub-list: show only first 3 items */
    /* sub-list: показываем все пункты — их не более 5 (query number:5) */
}

/* --- Pagination: more compact on mobile --- */
@media (max-width: 767px) {
    .pagination .btn--icon { width: 36px; height: 36px; }
}

/* --- Products table: уменьшаем плотность на узких экранах --- */
@media (max-width: 767px) {
    .products-table th { padding: 6px 6px; font-size: 8px; }
    .products-table td { padding: 8px 6px; font-size: 11px; }
}

/* --- SVG-плейсхолдеры: contain вместо cover чтобы не обрезать иконку --- */
.card__image[src$=".svg"] {
    object-fit: contain;
    background-color: #041E37;
    padding: 12px;
}

/* --- Hero: dvh для iOS dynamic toolbar --- */
@media (max-width: 767px) {
    .hero {
        min-height: 55vh;
        min-height: 55dvh; /* перекрывает vh там где поддерживается */
    }
}

/* ============================================================
   PHASE 8 — TABLET REFINEMENTS (768px – 1199px)
   ============================================================ */

/* Products table: slightly reduced density on tablet (sidebar steals space) */
@media (min-width: 768px) and (max-width: 1199px) {
    .listing-layout .products-table th,
    .listing-layout .products-table td {
        padding: 10px 8px;
        font-size: var(--font-size-sm);
    }
    /* Hide "Вн. диам." (col 5) and "Длина" (col 6) on tablet — least critical for B2B scan */
    .listing-layout .products-table th:nth-child(5),
    .listing-layout .products-table td:nth-child(5),
    .listing-layout .products-table th:nth-child(6),
    .listing-layout .products-table td:nth-child(6) { display: none; }
}

/* Filter sidebar compact on tablet: tighter padding, smaller checkboxes */
@media (min-width: 768px) and (max-width: 1199px) {
    .filter-form { padding: var(--spacing-md); }
    .filter-group { margin-bottom: var(--spacing-md); }
    .filter-group__title { font-size: 10px; }
    .filter-group__item { font-size: 12px; }
}

/* Modal product table: tighter on tablet viewport */
@media (min-width: 768px) and (max-width: 1199px) {
    .modal__inner { padding: var(--spacing-lg); }
    .modal__product-table th,
    .modal__product-table td { padding: 8px 6px; font-size: var(--font-size-sm); }
}

/* Hero: moderate height on tablet landscape */
@media (min-width: 768px) and (max-width: 1199px) {
    .hero { min-height: 60vh; }
}

/* Direction cards: 2-column on portrait tablet (768-900px) stays at grid--4→2col already;
   direction-card sub-list: all items visible (query already limits to 5) */

/* Footer on 768-900px: already handled by max-1199px rule (3 cols + brand spanning all).
   No override needed — existing layout is fine at this width. */

/* Breadcrumbs: ellipsis on long paths on tablet */
@media (max-width: 1199px) {
    .breadcrumbs { font-size: 12px; }
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */

/* Hero — height driven by content, equal padding top/bottom */
.hero {
    background: linear-gradient(135deg, #031629 0%, #041E37 50%, #052845 100%);
    min-height: 0;
    padding: 40px 0;
    align-items: flex-start;
}
/* Hero container — flush to left edge on wide screens */
.hero .container {
    max-width: none;
    padding-left: max(24px, 5vw);
    padding-right: max(24px, 40vw);
}
/* Hero element sizes — compact */
.hero__title {
    font-size: clamp(24px, 3.8vw, 48px);
    margin-bottom: 12px;
    max-width: 100%;
}
.hero__subtitle {
    font-size: 15px;
    color: var(--color-white) !important;
    opacity: 0.82;
    margin-bottom: 28px;
    max-width: 480px;
}
.hero__actions {
    margin-bottom: 28px;
    gap: 10px;
}
.hero__actions .btn--lg {
    padding: 12px 22px;
    font-size: var(--font-size-md);
}
/* Stats — one row, text wraps inside each card */
.hero__stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0;
}
.hero__stat {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 8px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
    transition: background var(--transition-fast);
}
.hero__stat:hover { background: rgba(255,255,255,0.16); }
.hero__stat-icon {
    display: flex;
    align-items: center;
    color: var(--color-white);
    flex-shrink: 0;
    margin-top: 2px;
}
.hero__stat-icon svg { display: block; }
.hero__stat-text {
    font-size: 13px;
    color: var(--color-white);
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
}

/* Structural dark elements */
.header {
    background-color: var(--color-bg-dark);
    border-bottom-color: rgba(255,255,255,0.08);
}
.footer {
    background: var(--color-bg-dark);
    border-top-color: rgba(255,255,255,0.08);
}
.mobile-menu,
.mobile-menu__header {
    background: var(--color-bg-dark);
    border-color: rgba(255,255,255,0.08);
}

/* Header nav links — readable on dark bg */
.header__nav-link           { color: rgba(255,255,255,0.75); }
.header__nav-link:hover,
.header__nav-item--mega:hover .header__nav-link,
.header__nav-item--dropdown:hover .header__nav-link,
.header__nav-item--mega.is-open .header__nav-link,
.header__nav-item--dropdown.is-open .header__nav-link { color: var(--color-white); background: rgba(255,255,255,0.08); }
.header__logo-sub           { color: rgba(255,255,255,0.5); }
.header__phone-sub          { color: rgba(255,255,255,0.5); }
.header__spec-btn           { color: rgba(255,255,255,0.7); }
.header__spec-btn:hover     { color: var(--color-white); }

/* Megamenu & dropdown — light */
.megamenu  { background: var(--color-white); }
.megamenu__col-title { color: var(--color-text); border-color: var(--color-border); }
.megamenu__sub-link  { color: var(--color-text-muted); }
.megamenu__sub-link:hover { color: var(--color-accent); }

.dropdown  { background: var(--color-white); border-color: var(--color-border); }
.dropdown__link       { color: var(--color-text-muted); }
.dropdown__link:hover { color: var(--color-text); background: var(--color-bg-secondary); }

/* Mobile menu — dark bg, light text */
.mobile-menu__close     { color: rgba(255,255,255,0.6); }
.mobile-menu__logo      { color: var(--color-white); }
.mobile-menu__item      { border-color: rgba(255,255,255,0.06); }
.mobile-menu__link      { color: rgba(255,255,255,0.9); }
.mobile-menu__link:hover { color: var(--color-white); background: rgba(255,255,255,0.06); }
.mobile-menu__sub-title { color: rgba(255,255,255,0.5); }
.mobile-menu__sub-link  { color: rgba(255,255,255,0.6); }
.mobile-menu__sub-link:hover { color: var(--color-accent-light); }
.mobile-menu__phone     { color: var(--color-white); }

/* Footer — dark bg, light text */
.footer__logo        { color: var(--color-white); }
.footer__description { color: rgba(255,255,255,0.6); }
.footer__col-title   { color: rgba(255,255,255,0.9); }
.footer__links a     { color: rgba(255,255,255,0.6); }
.footer__links a:hover { color: var(--color-white); }
.footer__phone       { color: var(--color-white); }
.footer__phone-sub   { color: rgba(255,255,255,0.5); }
.footer__hours       { color: rgba(255,255,255,0.5); }
.footer__copyright   { color: rgba(255,255,255,0.5); }
.footer__legal a,
.footer__legal-btn   { color: rgba(255,255,255,0.5); }
.footer__legal a:hover,
.footer__legal-btn:hover { color: var(--color-white); }
.footer__note        { color: rgba(255,255,255,0.45); }
.footer__requisites  { color: rgba(255,255,255,0.6); }
.footer__requisites-name { color: var(--color-white); }
.footer__bottom      { border-color: rgba(255,255,255,0.08); }

/* Modal — light */
.modal__inner       { background: var(--color-white); }
.modal__step-title  { color: var(--color-text); }
.modal__step-note   { color: var(--color-text-secondary); }
.modal__aside-title { color: var(--color-text); }
.modal__close:hover { color: var(--color-text); background: var(--color-bg-secondary); }
.modal__product-table td { border-color: var(--color-border); }

/* Content headings — dark on white */
h1, h2, h3, h4, h5, h6 { color: var(--color-text); }
.section__title     { color: var(--color-text); }
.card__title        { color: var(--color-text); }
.page-title         { color: var(--color-text); }
.filter-form__title { color: var(--color-text); }
.cta-block__title   { color: var(--color-text); }
.richtext h2,
.richtext h3        { color: var(--color-text); }
.search-results-group__title { color: var(--color-text); }
.doc-section__title          { color: var(--color-text); }
.contacts-directions__title  { color: var(--color-text); }
.contacts-form-card__title   { color: var(--color-text); }
.team-card__name             { color: var(--color-text); }
.contacts-info__value        { color: var(--color-text); }
.contacts-block__value       { color: var(--color-text); }
.product-page__price-value   { color: var(--color-text); }
.listing-count-wrap strong   { color: var(--color-text); }

/* Links on light bg */
a         { color: var(--color-accent); }
a:hover   { color: var(--color-accent-hover); }

/* Tabs hover on light bg */
.tabs__btn:hover { color: var(--color-text); }
.tabs__btn--active { color: var(--color-accent); }

/* Form inputs — dark text on white */
.form__input,
.form__textarea,
.form__select {
    color: var(--color-text);
    background-color: var(--color-white);
}

/* Buttons — outline/ghost for light bg (content sections) */
.btn--outline {
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.btn--ghost {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
}
.btn--ghost:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}

/* Buttons on dark backgrounds — revert to white */
.hero .btn--outline,
.section--accent .btn--outline {
    color: var(--color-white);
    border-color: rgba(255,255,255,0.5);
}
.hero .btn--outline:hover,
.section--accent .btn--outline:hover {
    border-color: var(--color-white);
    color: var(--color-white);
}
.hero .btn--ghost,
.section--accent .btn--ghost {
    background-color: rgba(255,255,255,0.1);
    color: var(--color-white);
}
.hero .btn--ghost:hover,
.section--accent .btn--ghost:hover {
    background-color: rgba(255,255,255,0.18);
    color: var(--color-white);
}

/* Tables — light separators */
.products-table td               { border-bottom: 1px solid var(--color-border); }
.products-table__row:hover td    { background: var(--color-bg-secondary); }
.products-table__name-link       { color: var(--color-text); }
.products-table__name-link:hover { color: var(--color-accent); }

.product-page__specs th,
.product-page__specs td { border-bottom: 1px solid var(--color-border); }
.product-page__specs td { color: var(--color-text); }

.project-page__meta-table th,
.project-page__meta-table td { border-bottom: 1px solid var(--color-border); }
.project-page__meta-table td { color: var(--color-text); }

.doc-list__item  { border-bottom: 1px solid var(--color-border); }
.project-mini    { border-bottom: 1px solid var(--color-border); }

/* Search count badge */
.search-results-group__count { background: var(--color-bg-secondary); color: var(--color-text-muted); }

/* SVG card placeholder */
.card__image[src$=".svg"] { background-color: var(--color-white); }

/* ============================================================
   FRONT PAGE BLOCKS
   ============================================================ */

/* Section header — title left, link right */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Заголовок и ссылка «Смотреть все» на телефоне в одну строку не влезают
       (ссылка nowrap, 160–175 px) и уводили страницу вбок. Даём переносить. */
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 20px;
}
.section-header .section__title { margin-bottom: 0; }
/* Перебиваем body.home .section__title {margin-bottom:20px}: внутри шапки-строки
   заголовок не должен иметь нижнего отступа, иначе шапка «раздувается» по высоте,
   кнопка центрируется по большой строке и появляется лишнее расстояние. */
body.home .section-header .section__title { margin-bottom: 0; }

/* Quick search — light section, dark rounded card */
.fp-search-section {
    background: var(--color-bg);
    padding: 0 0 32px;
}
.fp-search-card {
    background: var(--color-bg-dark);
    border-radius: var(--border-radius-lg);
    padding: 24px 28px 20px;
}
.fp-search-card__row {
    display: flex;
    align-items: center;
    gap: 32px;
}
.fp-search-section__label {
    flex-shrink: 0;
    color: var(--color-white);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    min-width: 160px;
}
.fp-search-card__right {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.fp-search-section .search-bar { width: 100%; }
.fp-search-section .search-bar__form {
    display: flex;
    gap: 10px;
}
.fp-search-section .search-bar__input-wrap { flex: 1; }
.fp-search-section .search-bar__input {
    background: var(--color-white) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--color-text) !important;
    border-radius: var(--border-radius-md);
    padding: 12px 18px;
    font-size: var(--font-size-md);
    width: 100%;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.fp-search-section .search-bar__input::placeholder { color: var(--color-text-muted); }
.fp-search-section .search-bar__input:focus { outline: none; border-color: var(--color-accent) !important; background: var(--color-white) !important; }
.fp-search-section .search-bar__btn { white-space: nowrap; padding: 12px 28px; }
.fp-search-section__hint {
    color: rgba(255,255,255,0.35);
    font-size: var(--font-size-xs);
    margin: 8px 0 0;
}

/* Steel grade cards */
.fp-grades { background: var(--color-bg); }
.fp-grades__row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.fp-grades__row::-webkit-scrollbar { display: none; }
.fp-grades__all-link {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: #2563EB;
    text-decoration: none;
    font-weight: 500;
    align-self: center;
}
.fp-grades__all-link:hover { color: #1d4ed8; text-decoration: underline; }
.grade-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 130px;
    min-height: 80px;
    border-radius: var(--border-radius-md);
    background: var(--color-bg-dark) center/cover no-repeat;
    padding: 12px 14px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.grade-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
    border-radius: inherit;
}
.grade-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.grade-card__name {
    position: relative;
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-white);
    letter-spacing: 0.02em;
}
.grade-card__desc {
    position: relative;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
}

/* Sectors & Why — shared horizontal row */
.fp-sectors { background: var(--color-bg); }
.fp-why     { background: var(--color-bg); }

.fp-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.fp-row::-webkit-scrollbar { display: none; }

.fp-row-card {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: 190px;
    padding: 8px;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.fp-row-card:hover { box-shadow: var(--shadow-sm); border-color: #c5d3e8; }

.fp-row-card__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-row-card__icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.fp-row-card__body { flex: 1; min-width: 0; }

.fp-row-card__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
}
.fp-row-card__desc {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 5px;
    line-height: 1.45;
}

/* Карточки с описанием («Почему выбирают нас»): иконка в левом верхнем углу,
   заголовок напротив иконки (по центру её высоты, текст влево), описание —
   под ними, чуть сдвинуто вправо, чтобы стоять под видимой иконкой. */
.fp-row-card:has(.fp-row-card__desc) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
    align-content: start;
    text-align: left;
}
.fp-row-card:has(.fp-row-card__desc) .fp-row-card__body { display: contents; }
.fp-row-card:has(.fp-row-card__desc) .fp-row-card__icon { grid-column: 1; grid-row: 1; }
.fp-row-card:has(.fp-row-card__desc) .fp-row-card__title { grid-column: 2; grid-row: 1; align-self: center; }
.fp-row-card:has(.fp-row-card__desc) .fp-row-card__desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    padding-left: 10px;
    font-size: 12px;
}

/* ── Find row: form card + projects panel ── */
/* auto-fit + minmax вместо жёстких «1fr 1fr»: на телефоне две колонки по
   351 px не помещались в 390 px и уводили страницу вбок на 292 px. Теперь
   при нехватке места панели встают друг под друга. */
.fp-find-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}
.fp-find-row > * { min-width: 0; }
/* Dark form card */
.fp-find-card {
    background: var(--color-bg-dark);
    border-radius: var(--border-radius-lg);
    padding: 28px;
}
.fp-find-card__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 8px;
}
.fp-find-card__sub {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 20px;
    line-height: 1.5;
}
.fp-find-card__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.fp-find-card__col { display: flex; flex-direction: column; gap: 10px; }
.fp-find-card .form__input {
    background: var(--color-white) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: var(--color-text) !important;
}
.fp-find-card .form__input::placeholder { color: var(--color-text-muted); }
.find-form__upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed rgba(255,255,255,0.22);
    border-radius: var(--border-radius-md);
    padding: 20px 12px;
    cursor: pointer;
    text-align: center;
    color: rgba(255,255,255,0.55);
    transition: border-color var(--transition-fast);
    height: 100%;
    box-sizing: border-box;
}
.find-form__upload:hover { border-color: var(--color-accent); color: rgba(255,255,255,0.85); }
.find-form__upload svg { stroke: currentColor; }
.find-form__upload span { font-size: 13px; line-height: 1.4; }
.find-form__upload small { font-size: 11px; opacity: .55; }

/* White projects panel */
.fp-projects-panel { background: var(--color-bg); }
.fp-projects-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Заголовок и ссылка «Смотреть все» на телефоне в одну строку не влезают
       (ссылка nowrap, 160–175 px) и уводили страницу вбок. Даём переносить. */
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 20px;
}
.fp-projects-panel__header .section__title { margin-bottom: 0; }
body.home .fp-projects-panel__header .section__title { margin-bottom: 0; }
.fp-projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
/* Карточка проекта в рамке; фото заполняет её по ширине (cover — допустима
   лёгкая обрезка сверху/снизу), под фото — название, отрасль и объём, как на
   странице «Проекты». */
.fp-project-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background-color: var(--color-bg-card);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.fp-project-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}
.fp-project-card__img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}
.fp-project-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    flex: 1;   /* тянется на всю высоту карточки — блок отраслей прижимается к низу */
}
/* Отрасль/объём — под разделительной линией, прижаты к низу: у всех карточек
   ряда линия и отрасли оказываются на одном уровне при любой длине названия. */
.fp-project-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}
/* Заголовок занимает фиксированные 4 строки — тогда разделительная линия и
   отрасль у всех карточек ряда оказываются ровно на одном уровне независимо
   от длины названия и от того, в сколько строк лёг текст отрасли. */
.fp-project-card__title {
    font-size: 12px;
    color: var(--color-text);
    line-height: 1.4;
    min-height: calc(4 * 1.4 * 12px);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fp-project-card__field {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.35;
}
.fp-project-card__field .project-card__field-icon { margin-top: 1px; }
.fp-project-card:hover .fp-project-card__title { color: var(--color-accent); }

/* Bottom CTA — row-cards + contact card */
.fp-bottom-cta {
    background: var(--color-bg);
    padding: 20px 0;
}
/* Полоса «преимущества + телефон» на главной. Ниже 1200 px четыре блока в один
   ряд не помещаются: строка не переносилась и распирала страницу вбок
   (на 390 px — на 669 px вправо). Разрешаем перенос и даём блокам сжиматься. */
.fp-cta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}
.fp-cta-grid > * { min-width: 0; }
/* 3 feat cards occupy 2/3, contact 1/3 */
.fp-cta-feats {
    flex: 2 1 420px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* Базис переноса. Специфичность выше, чем у `body.home .fp-row-card` ниже по
   файлу (0,3,1 против 0,2,1), иначе тот перебивал бы `flex`. Ширину карточки
   он всё равно снизу держит (min-width: 140px) — и это правильно: секция
   перестала выносить страницу не потому, что карточка сжимается, а потому,
   что при 200px в ряд помещаются две, а третья переносится. */
body.home .fp-cta-feats .fp-row-card {
    flex: 1 1 200px;
}
.fp-cta-feats .fp-row-card {
    width: auto;
    padding: 8px;
    gap: 8px;
    text-align: left;
    align-items: center;
}
.fp-cta-contact {
    flex: 1 1 280px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--color-bg-dark);
    border-radius: var(--border-radius-md);
}

/* Перенос нужен только там, где строка не помещается. На широких экранах
   возвращаем ровно 2/3 и 1/3, как было до правки: с базисами 420/280
   выходило 63/36 %. Блок стоит ПОСЛЕ базовых правил намеренно — специфичность
   у них одинаковая, и решает порядок в файле, а не наличие медиазапроса.
   1024px — единственный min-width-порог в файле (остальные идут по max-width):
   это замеренная ширина, ниже которой полоса в один ряд не помещается. */
@media (min-width: 1024px) {
    .fp-cta-feats { flex: 2 1 0; flex-wrap: nowrap; }
    .fp-cta-contact { flex: 1 1 0; flex-wrap: nowrap; }
    /* Без body.home: сброс должен работать и если полосу переиспользуют
       на другой странице — иначе при nowrap у родителя карточки вылезут. */
    .fp-cta-feats .fp-row-card,
    body.home .fp-cta-feats .fp-row-card { flex: 1; }
}
.fp-cta-contact__info { display: flex; flex-direction: column; }
.fp-cta-contact__phone {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
}
.fp-cta-contact__phone:hover { color: var(--color-accent-light); }
.fp-cta-contact__sub {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin: 2px 0 0;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .fp-bottom-cta__inner { flex-direction: column; text-align: center; }
    .fp-bottom-cta__features { flex-direction: column; gap: 20px; }
    .fp-bottom-cta__feature { max-width: none; }
    .fp-grades__row { gap: 8px; }
    .fp-search-section .search-bar__form { flex-direction: column; }
}

/* ── HOMEPAGE: hero flush to left edge, room for right-side art ── */
body.home .hero .container {
    padding-right: max(24px, 40vw);
}

/* ── HOMEPAGE + CATALOG: section spacing — padding on both sides,
   same as the homepage, so it adds up between two sections (20+20=40px) ── */
body.home .section,
body.home .section--sm,
body.home .fp-sectors,
body.home .fp-why,
body.home .fp-grades,
body.home .fp-search-section,
body.home .directions,
body.home .fp-bottom-cta,
body.home .section--find,
.page-template-page-catalog-php .section,
.page-template-page-catalog-php .fp-search-section,
.tax-product-category-hub .section,
.post-type-archive-service .section,
.post-type-archive-service .section--sm,
.post-type-archive-steel_grade .section,
.post-type-archive-steel_grade .section--sm,
.single-steel_grade .section,
.single-steel_grade .section--sm,
.post-type-archive-project .section,
.post-type-archive-project .section--sm,
.page-template-page-about-php .section,
.page-template-page-about-php .section--sm {
    padding-top: 20px;
    padding-bottom: 20px;
}
body.home .section__title {
    margin-bottom: 20px;
}
/* Каталог + страницы направлений (уровень 1) + архивы «Услуги»/«Марки стали»/«Проекты»/«О компании»:
   заголовок того же размера, что "Направления поставок" на главной — единый масштаб на всех разделах */
.page-template-page-catalog-php .page-title,
.tax-product-category-hub .page-title,
.post-type-archive-service .page-title,
.post-type-archive-steel_grade .page-title,
.post-type-archive-project .page-title,
.page-template-page-about-php .page-title,
.page-template-page-documents-php .page-title {
    font-size: 24px;
    padding-top: 0;
    margin-bottom: 20px;
}
.post-type-archive-service .page-desc,
.post-type-archive-steel_grade .page-desc,
.post-type-archive-project .page-desc,
.page-template-page-about-php .page-desc,
.page-template-page-documents-php .page-desc {
    color: var(--color-text);
    font-size: 14px;
    margin-bottom: 20px;
}
/* «О нас» — заголовок секции ближе к описанию под ним (обычные 32px были избыточны) */
.page-template-page-about-php .section__title {
    margin-bottom: 12px;
}
/* Разделительная линия breadcrumbs → заголовок, ровно 20px (без секции с обеих сторон) */
.page-template-page-catalog-php .breadcrumbs,
.tax-product-category-hub .breadcrumbs,
.post-type-archive-service .breadcrumbs,
.post-type-archive-steel_grade .breadcrumbs,
.post-type-archive-project .breadcrumbs,
.page-template-page-about-php .breadcrumbs {
    margin-bottom: 20px;
}
/* Каталог: карточки → блок "Не нашли нужный размер" — те же 20+20=40px, что и между секциями выше */
.page-template-page-catalog-php .cta-block,
.post-type-archive-project .cta-block {
    margin-top: 20px;
    margin-bottom: 20px;
}
/* «О компании»: нижний CTA — тёмно-синий бар (не светлый tint, как на других страницах) */
.page-template-page-about-php .cta-block {
    background: var(--color-bg-dark);
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 12px 16px;
    justify-content: flex-start;
    gap: var(--spacing-xl);
}
/* Без --features (features=>[] в page-about.php) .cta-block__content не получает
   свой flex-рендеринг, и иконка (блочный flex-контейнер) встаёт НАД текстом
   вместо «слева от текста» — тот же баг, что уже чинили на странице проектов. */
.page-template-page-about-php .cta-block .cta-block__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.page-template-page-about-php .cta-block .cta-block__icon { color: var(--color-white); width: 64px; height: 64px; }
.page-template-page-about-php .cta-block .cta-block__icon img { width: 64px; height: 64px; }
.page-template-page-about-php .cta-block .cta-block__title { color: var(--color-white); font-size: 16px; margin-bottom: 0; }
.page-template-page-about-php .cta-block .cta-block__text { color: rgba(255,255,255,0.7); font-size: 14px; }
.page-template-page-about-php .cta-block .btn--primary { background-color: var(--color-accent); }
.page-template-page-about-php .cta-block .btn--primary:hover { background-color: var(--color-accent-hover); }
.page-template-page-about-php .cta-block .cta-block__actions .btn { font-size: 14px; padding: 12px 32px; }
.page-template-page-about-php .cta-block .btn--outline {
    color: var(--color-white);
    border-color: rgba(255,255,255,0.4);
}
.page-template-page-about-php .cta-block .btn--outline:hover {
    border-color: var(--color-white);
    background-color: rgba(255,255,255,0.1);
}
/* Клип с этих секций снят намеренно. Ряды внутри (.fp-row, .fp-grades__row)
   прокручиваются сами (overflow-x: auto), и замер на 17 ширинах со снятым
   клипом показал нулевое расширение. Пока он стоял, любое переполнение здесь
   не попадало в scrollWidth страницы — то есть проверка «прокрутки нет»
   этих трёх секций просто не видела. */

/* ── HOMEPAGE: fp-row-card fill full width (no fixed px) ── */
body.home .fp-row-card {
    flex: 1;
    width: auto;
    min-width: 140px;
}

/* ── ГЛАВНАЯ: карточка формы «Не нашли нужную позицию?» (только на главной,
   чтобы не задеть сайдбар-форму на страницах «Услуги»/«Проекты») ── */
body.home .fp-find-card { padding: 16px; }
body.home .fp-find-card__title { font-size: 16px; }
body.home .fp-find-card__sub { font-size: 14px; }
body.home .fp-find-card .btn { font-size: 14px; }
body.home .fp-find-card .find-form__upload span { font-size: 12px; }

/* ============================================================
   SERVICES ARCHIVE PAGE (/services/)
   Reuses existing tokens/components (.card, .fp-find-card,
   .fp-grades__all-link, .file-drop) — no new colors introduced.
   ============================================================ */

/* Feature row under the intro text — one shared frame (not one border per item),
   all 5 items on a single line; same border as .fp-row-card (homepage) / .services-why. */
.services-features {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 14px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-lg);
}
.services-features__item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.services-features__icon {
    flex-shrink: 0;
    display: flex;
    color: var(--color-accent);
}
.services-features__text {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.3;
}

/* Main grid + sidebar form — sidebar starts level with the H1, so both
   columns live inside the same grid instead of the sidebar trailing the
   card grid in a separate section. */
.services-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
    margin-bottom: 20px;
}
.services-grid { margin: 0; }

.service-card { position: relative; }
.service-card__num {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: var(--border-radius-sm);
    background: rgba(4, 30, 55, 0.75);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
}
/* Фото услуги — репортажный кадр, а не изделие на белом: заполняем рамку
   целиком (cover), чтобы не было полос сверху/снизу. */
.service-card__image {
    object-fit: cover;
    background-color: var(--color-white);
}
.service-card .card__body { padding: var(--spacing-md); }
.service-card .card__title { font-size: var(--font-size-md); margin-bottom: var(--spacing-sm); }
.service-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--spacing-md);
}
.service-card__list li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.service-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}
.service-card__desc { margin-bottom: var(--spacing-md); }
/* Описание услуги из WYSIWYG: маркированный список выглядит как .service-card__list
   (точки акцентного цвета), обычный текст — приглушённый. */
.service-card__desc ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.service-card__desc li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.service-card__desc li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}
.service-card__desc p {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted);
    margin: 0 0 6px;
}
.service-card__desc p:last-child { margin-bottom: 0; }
.service-card__link { font-weight: 600; }

/* Sidebar quick-request form — dark card, same visual family as .fp-find-card
   on the homepage, but single column + wired to a real submit handler. */
.services-layout__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--header-offset) + var(--spacing-md));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
/* «О компании»: этот блок не должен «прилипать» при скролле вообще — он ведёт
   себя как обычный контент, как «О нас»/«Наша миссия». Поэтому на этой странице
   отключаем sticky у aside целиком (в отличие от Услуг/Проектов, где сайдбар
   с формой заявки действительно должен оставаться на месте). */
.page-template-page-about-php .services-layout__aside {
    position: static;
}
/* «Услуги» и «Проекты»: сайдбар с формой не «прилипает» — статичен при скролле */
.post-type-archive-service .services-layout__aside,
.post-type-archive-project .services-layout__aside {
    position: static;
}
.services-sidebar-form .fp-find-card__title { font-size: 16px; margin-bottom: 6px; }
.services-sidebar-form .fp-find-card__sub { font-size: 14px; margin-bottom: 14px; }
.services-sidebar-form__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.services-sidebar-form .form__input { font-size: 14px; }
.services-sidebar-form .find-form__upload {
    position: relative;
    padding: 14px 12px;
}
.services-sidebar-form .find-form__upload span { font-size: 12px; }
.services-sidebar-form .file-drop__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.services-sidebar-form__error {
    margin-top: -4px;
}
.services-sidebar-form__submit { width: 100%; justify-content: center; font-size: 14px; }

/* "Почему выбирают нас" — sits directly under the request-form card in the sidebar */
.services-why {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
}
.services-why__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}
.services-why__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.services-why__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.services-why__icon {
    flex-shrink: 0;
    display: flex;
    color: var(--color-accent);
    margin-top: 1px;
}
.services-why__text {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.services-why__text strong {
    display: block;
    color: var(--color-text);
    font-weight: 700;
}

@media (max-width: 1199px) {
    .services-layout { grid-template-columns: 1fr; }
    .services-layout__aside { position: static; }
}

/* How it works — 5-step process, same card treatment as .cta-block--features
   ("Не нашли нужный размер или марку?" на странице каталога): light accent-tint
   background, bordered rounded card. Title + all 5 steps sit on ONE row (matches
   the reference screenshot) — text inside a step may wrap to 2 lines, the row itself
   does not wrap on desktop. Icons are placeholders pending final artwork. */
.how-it-works__card {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 16px 20px;
}
.how-it-works__row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}
.how-it-works__title {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 14px 0 0;
    white-space: nowrap;
}
.how-it-works__step {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 8px;
    min-width: 0;
}
.how-it-works__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.how-it-works__num {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
}
.how-it-works__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-accent);
}
.how-it-works__icon svg { width: 28px; height: 28px; }
.how-it-works__text {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.35;
}
.how-it-works__arrow {
    flex-shrink: 0;
    color: var(--color-accent);
    opacity: 0.45;
    font-size: 16px;
}

@media (max-width: 1199px) {
    .how-it-works__row { flex-wrap: wrap; row-gap: 16px; }
    .how-it-works__title { width: 100%; margin: 0 0 4px; }
    .how-it-works__step { flex: 1 1 45%; min-width: 200px; }
    .how-it-works__arrow { display: none; }
}
@media (max-width: 767px) {
    .services-features { flex-wrap: wrap; gap: 14px 20px; }
    .services-features__item { flex: 1 1 auto; }
    .how-it-works__step { flex: 1 1 100%; }
}

/* ============================================================
   STEEL GRADES ARCHIVE PAGE (/steel-grades/)
   Filters + CTA sit on the left (reuses .filter-form/.filter-group from the
   catalog listing sidebar and .cta-block--compact, already tokenized to
   #041e37 / #64748b / #2563eb), the grade grid on the right.
   ============================================================ */

/* Title/subtitle left, feature icons right, on one row — no frame around the
   icon items here (unlike the services archive's bordered strip) */
.grades-intro {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}
.grades-intro__copy { flex: 1 1 40%; min-width: 260px; }
.grades-intro__copy .page-title,
.grades-intro__copy .page-desc { margin-bottom: 8px; }
.grades-intro__features {
    flex: 1 1 55%;
    margin-bottom: 0;
    border: none;
    padding: 0;
}

@media (max-width: 1199px) {
    .grades-intro { flex-direction: column; }
}

/* Pill tabs — live inside .grades-layout__main (not above the whole grid) so
   their top edge lines up with the sidebar's top edge (both are top-aligned
   children of the same grid row). Same ?type= filter as the checkboxes. */
.grade-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--spacing-lg);
}
.grade-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-bg-dark);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.grade-tabs__btn:hover { border-color: var(--color-bg-dark); }
.grade-tabs__btn--active {
    background: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-white);
}
.grade-tabs__count {
    font-size: 11px;
    opacity: 0.7;
}

.grades-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.grades-layout__aside {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: sticky;
    top: calc(var(--header-height) + var(--header-offset) + var(--spacing-md));
}
/* .filter-form is sticky by default (catalog listing sidebar) — that's nested
   inside our already-sticky .grades-layout__aside and made the CTA box below
   it disappear behind it on scroll. It only needs to be a normal flow child here. */
.grades-filter { position: static; max-height: none; overflow-y: visible; }
.grades-filter .js-grade-search { width: 100%; margin-bottom: var(--spacing-md); font-size: 13px; }
.grades-filter .filter-group__items { display: flex; flex-direction: column; gap: 10px; }
.grades-filter .filter-group__item { font-size: 13px; }
.grades-filter .filter-group__title {
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text);
}
.filter-group__count { color: var(--color-text-muted); font-weight: 400; }

/* "Не нашли нужную марку?" CTA — smaller subtitle, more room under the title */
.grades-layout__aside .cta-block--compact .cta-block__title { margin-bottom: 8px; }
.grades-layout__aside .cta-block--compact .cta-block__text { font-size: 13px; }

@media (max-width: 1199px) {
    .grades-layout { grid-template-columns: 1fr; }
    .grades-layout__aside { position: static; }
}

/* Grade cards — white background (default .card), border unchanged, denser
   spacing than the default .card__body so text starts/ends closer to the edges.
   Card is a flex column so the footer (счётчик позиций) always sticks 8px from
   the bottom edge, even when a shorter card sits next to taller neighbours. */
.grades-grid { gap: var(--spacing-md); }
/* Карточка целиком — ссылка на страницу марки, поэтому гасим цвет/подчёркивание
   ссылки и красим заголовок по ховеру всей карточки, а не только текста. */
.grade-listing-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.grade-listing-card:hover { color: inherit; }
/* Клиентский поиск по маркам (grades-search.js) прячет карточки через [hidden];
   без этого правила display: flex перебивал бы его — карточки оставались видны. */
.grade-listing-card[hidden] { display: none; }
.grade-listing-card .card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-md) 8px 8px;
}
.grade-listing-card .card__body > * { width: 100%; }
.grade-listing-card .tag--sm { width: auto; border-radius: 6px; }
.grade-listing-card__name {
    font-size: var(--font-size-lg);
    margin-top: 0;
    margin-bottom: 10px;
}
.grade-listing-card:hover .grade-listing-card__name { color: var(--color-accent); }
.grade-listing-card .tag--sm { margin-bottom: 10px; }
.grade-listing-card__analogs {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 10px;
    min-height: 1.4em; /* reserves the line even before analogue data exists */
}
.grade-listing-card__analogs-label {
    color: var(--color-text);
    font-weight: 600;
    margin-right: 4px;
}
.grade-listing-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    margin-top: auto;
}
.grade-listing-card__count {
    font-size: 12px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ============================================================
   DOCUMENTS PAGE (/documents/)
   Раскладка .services-layout + .services-features + .services-why
   переиспользованы; ниже — только специфика витрины категорий и сайдбара.
   ============================================================ */

/* Категория документов = заголовок + сетка всех её документов (без модалки).
   margin-top опускает первую секцию так, чтобы её верх совпал с блоком «Что
   включаем в комплект» в сайдбаре (он идёт под высокой карточкой-заявкой). */
.doc-section {
    margin-top: 48px;
}
.doc-section + .doc-section {
    margin-top: 32px;
}
.doc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.doc-grid__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
}
.doc-grid__thumb img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-secondary);
    transition: border-color var(--transition-fast);
}
.doc-grid__item:hover .doc-grid__thumb img { border-color: rgba(37, 99, 235, 0.4); }
.doc-grid__name {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    transition: color var(--transition-fast);
}
.doc-grid__item:hover .doc-grid__name { color: var(--color-accent); }

.doc-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 20px;
    margin-top: 48px;
}
.doc-cat {
    display: flex;
    flex-direction: column;
}
.doc-cat__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.doc-cat__icon {
    flex-shrink: 0;
    display: flex;
    color: var(--color-accent);
}
.doc-cat__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0;
}
.doc-cat__count {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
}
.doc-cat__thumbs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.doc-cat__thumb {
    flex: 1;
    min-width: 0;
}
.doc-cat__thumb img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-secondary);
    transition: border-color var(--transition-fast);
}
.doc-cat:hover .doc-cat__thumb img {
    border-color: rgba(37, 99, 235, 0.35);
}
.doc-cat__all {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin-top: auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.doc-cat__all:hover { color: var(--color-accent-hover); }

/* Сайдбар: карточка заявки (светлая, акцентный тинт) */
.doc-cta {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 12px;
}
.doc-cta__icon {
    display: flex;
    color: var(--color-accent);
    margin-bottom: 12px;
}
.doc-cta__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 8px;
}
.doc-cta__text {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}
.doc-cta__btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
}

/* «Что включаем в комплект» — заголовок 14, пункты 12 */
.doc-kit .services-why__title { font-size: 14px; }
.doc-kit .advantage-list__item {
    font-size: 12px;
    line-height: 1.4;
}

/* «Дополнительно предоставим» — заголовок 14, пункты 12, кнопка 12 */
.doc-extra .services-why__title { font-size: 14px; }
.doc-extra__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.doc-extra__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.doc-extra__icon {
    flex-shrink: 0;
    display: flex;
    color: var(--color-accent);
    margin-top: 1px;
}
.doc-extra__text {
    font-size: 12px;
    color: var(--color-text);
    line-height: 1.4;
}
.doc-extra__all {
    font-size: 12px;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-accent);
    font-family: inherit;
}
.doc-extra__all:hover { color: var(--color-accent-hover); }

/* Строка преимуществ на этой странице — без рамки/паддинга, иконки крупнее, текст 12 */
.page-template-page-documents-php .services-features {
    border: none;
    padding: 0;
}
.page-template-page-documents-php .services-features__icon svg {
    width: 30px;
    height: 30px;
}
.page-template-page-documents-php .services-features__text {
    font-size: 12px;
}

/* Нижний CTA («Не нашли нужный документ?») — иконка слева от текста.
   features=>[] снимает класс .cta-block--features, который в норме делает
   .cta-block__content флексом; возвращаем это поведение только на этой странице. */
.page-template-page-documents-php .cta-block {
    padding: 12px 16px;
}
.page-template-page-documents-php .cta-block__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.page-template-page-documents-php .cta-block__icon {
    width: 48px;
    height: 48px;
}
.page-template-page-documents-php .cta-block__icon svg {
    width: 48px;
    height: 48px;
}
.page-template-page-documents-php .cta-block__title { font-size: 16px; margin-bottom: 0; }
.page-template-page-documents-php .cta-block__text { font-size: 14px; }
.page-template-page-documents-php .cta-block__actions .btn { font-size: 14px; padding: 12px 32px; }

@media (max-width: 1199px) {
    .doc-cats { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
    .doc-section { margin-top: 0; }
    .doc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .doc-cats { grid-template-columns: 1fr; }
    .doc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CONTACTS PAGE (/contacts/) — переработка под макет
   Раскладка «основная колонка + сайдбар», карточки реквизитов,
   тёмная карточка формы, «Как добраться», светлый нижний CTA.
   Объявлено в конце файла, чтобы перекрыть старые contacts-* правила.
   ============================================================ */

.contacts-hero { margin-top: 4px; }
.contacts-hero .page-title { font-size: 24px; padding-top: 0; margin-bottom: 8px; }
.contacts-hero__desc {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    max-width: 620px;
}

/* Сетка: основная колонка + сайдбар 360px */
.page-template-page-contacts-php .contacts-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}
.page-template-page-contacts-php .contacts-sidebar {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 2 карточки реквизитов в ряд (телефон / режим работы). Карточки «Адрес»
   больше нет — головной офис убран, адреса живут в блоке складов ниже.
   E-mail вынесен ниже отдельной панелью — пять ящиков с подписями отделов
   в узкую колонку ряда не помещаются. */
.contacts-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.contacts-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
}
/* Реквизиты (телефон / режим работы): иконка слева, текст справа — тот же
   приём, что в шапке панели E-mail ниже (gap 14px), поэтому иконки всех
   трёх блоков стоят на одной вертикали. Селектор намеренно ограничен рядом
   .contacts-cards: класс .contacts-card носит ещё и панель E-mail, которой
   нужна колоночная раскладка. */
.contacts-cards .contacts-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}
.contacts-cards .contacts-card__icon { margin-bottom: 0; }
.contacts-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* длинные значения переносятся, а не распирают карточку */
}
.contacts-card__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-accent);
    margin-bottom: 16px;
}
.contacts-card__label {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 8px;
}
.contacts-card__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.contacts-card__value--lg { font-size: 18px; }
.contacts-card__value--md { font-size: 15px; font-weight: 600; }
.contacts-card__value--sm { font-size: 14px; font-weight: 600; }
a.contacts-card__value:hover { color: var(--color-accent); }
.contacts-card__note {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.contacts-card__note--sep { margin-top: 12px; }
.contacts-card__value--sep { margin-top: 12px; }

/* ── Панель E-mail ──────────────────────────────────────────────────────
   Занимает всю ширину ряда карточек реквизитов. Плитки внутри — жёсткая
   сетка 3 в ряд, чтобы ряд из пяти ящиков читался как 3 + 2, а не как
   «съехавший» auto-fit. */
.contacts-emails { margin-bottom: 24px; }
.contacts-emails__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.contacts-emails__head .contacts-card__icon { margin-bottom: 0; }
.contacts-emails__title { margin: 0 0 2px; font-size: 13px; font-weight: 400; }
.contacts-emails__hint {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.contacts-emails__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    list-style: none;
}
/* Плитка — обычный текст, не ссылка: адреса копируют, а не кликают,
   а mailto-ссылка мешала выделять текст мышью. Поэтому здесь нет ни
   hover-состояний, ни курсора-руки — ничто не обещает клик. */
.contacts-emails__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text);
}
.contacts-emails__addr {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    word-break: break-word;
}
.contacts-emails__note {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
/* Основной ящик — акцентная плитка: подсказка, куда писать, если отдел неизвестен.
   Выделяется только фоном и рамкой: синий текст читался бы как ссылка. */
.contacts-emails__item--main {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
}

/* Адреса и карта — список точек слева, одна общая карта справа.
   Блок последний в основной колонке, поэтому без нижнего отступа. */
.contacts-pickup { margin-bottom: 0; }
.contacts-pickup__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
}
.contacts-geo__layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 16px;
    align-items: start;
}
/* Список ограничен высотой карты и скроллится сам — так при шести точках
   карта остаётся на виду и не уезжает вниз. */
.contacts-geo__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
}
.contacts-geo__item {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-white, #fff);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.contacts-geo__item:hover { border-color: var(--color-accent); }
.contacts-geo__item--active {
    border-color: var(--color-accent);
    background: rgba(37, 99, 235, 0.05);
}
.contacts-geo__pick {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.contacts-geo__icon { margin-bottom: 0; flex-shrink: 0; }
.contacts-geo__item--active .contacts-geo__icon { color: var(--color-accent); }
.contacts-geo__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contacts-geo__name { font-size: 14px; font-weight: 700; color: var(--color-text); }
.contacts-geo__addr { font-size: 13px; color: var(--color-text-secondary); line-height: 1.45; }
.contacts-geo__hours {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.contacts-geo__open {
    display: block;
    padding: 0 12px 10px 44px;   /* 44px — под иконкой, вровень с текстом адреса */
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
}
.contacts-geo__map { margin-bottom: 0; }

/* Карта */
.page-template-page-contacts-php .contacts-map {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.page-template-page-contacts-php .contacts-map iframe { display: block; width: 100%; height: 380px; border: 0; }

/* Тёмная карточка формы «Напишите нам» */
.page-template-page-contacts-php .contacts-form-card {
    background: var(--color-bg-dark);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 20px 12px 12px;
}
.page-template-page-contacts-php .contacts-form-card__title { color: var(--color-white); font-size: 16px; margin-bottom: 6px; }
.page-template-page-contacts-php .contacts-form-card__subtitle { color: rgba(255,255,255,0.65); font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.page-template-page-contacts-php .contacts-form-card .contact-form { gap: 8px; }
/* Всё расстояние между полями задаётся единым gap формы; убираем margin у групп,
   иначе отступы складываются (16px margin + gap) и получаются неровными. */
.page-template-page-contacts-php .contacts-form-card .form__group { margin-bottom: 0; }
.page-template-page-contacts-php .contacts-form-card .form__input {
    background: var(--color-white);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--color-text);
    font-size: 14px;
}
.page-template-page-contacts-php .contacts-form-card .form__checkbox-label { color: rgba(255,255,255,0.6); font-size: 12px; }
.page-template-page-contacts-php .contacts-form-card .form__checkbox-text a { color: var(--color-accent-light); }
.page-template-page-contacts-php .contacts-form-card .btn--block { font-size: 15px; margin-top: 0; }

/* Нижний CTA — иконка слева + перекрас кнопок под макет.
   features=>[] снимает .cta-block--features (флекс контента); возвращаем. */
.page-template-page-contacts-php .cta-block {
    background: rgba(37, 99, 235, 0.06);
    padding: 12px 16px;
}
.page-template-page-contacts-php .cta-block__content { display: flex; align-items: center; gap: var(--spacing-md); }
.page-template-page-contacts-php .cta-block__icon { width: 48px; height: 48px; }
.page-template-page-contacts-php .cta-block__icon svg { width: 48px; height: 48px; }
.page-template-page-contacts-php .cta-block__title { font-size: 16px; margin-bottom: 0; }
.page-template-page-contacts-php .cta-block__text { font-size: 14px; }
.page-template-page-contacts-php .cta-block__actions .btn { font-size: 14px; padding: 12px 32px; }
/* btn1 «Загрузить спецификацию» (в шаблоне — primary) → аутлайн-вид */
.page-template-page-contacts-php .cta-block__actions .btn--primary {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-border);
}
.page-template-page-contacts-php .cta-block__actions .btn--primary:hover {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}
/* btn2 «Запросить КП» (в шаблоне — outline) → тёмно-синяя заливка */
.page-template-page-contacts-php .cta-block__actions .btn--outline {
    background: var(--color-bg-dark);
    color: var(--color-white);
    border: 2px solid var(--color-bg-dark);
}
.page-template-page-contacts-php .cta-block__actions .btn--outline:hover {
    background: #06304f;
    color: var(--color-white);
    border-color: #06304f;
}

@media (max-width: 1199px) {
    .page-template-page-contacts-php .contacts-page-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .contacts-cards { grid-template-columns: 1fr; }
    .contacts-emails__grid { grid-template-columns: 1fr; }
    /* На узком экране карта идёт первой, список адресов — под ней:
       карту видно сразу, а список листается целиком, без внутреннего скролла. */
    .contacts-geo__layout { grid-template-columns: 1fr; }
    .contacts-geo__map { order: -1; }
    .contacts-geo__list { max-height: none; overflow: visible; }
}

/* ============================================================
   SINGLE SERVICE PAGE (одиночная услуга)
   Переиспованы .services-layout, .richtext, вид карточки-CTA (как doc-cta),
   нижний cta-block. Ниже — только специфика этой страницы.
   ============================================================ */
.single-service .page-title { font-size: 24px; padding-top: 0; margin-bottom: 20px; }
/* Сайдбар не «прилипает» — карточка «Нужна эта услуга?» статична */
.single-service .services-layout__aside { position: static; }

/* Фото-герой с названием услуги в нижнем левом углу (светлый текст) */
.service-single__hero {
    position: relative;
    margin-bottom: 20px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.service-single__hero-img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    display: block;
}
.service-single__hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55%;
    background: linear-gradient(to bottom, rgba(4, 30, 55, 0.8), rgba(4, 30, 55, 0));
    pointer-events: none;
}
/* .single-service в селекторе — чтобы перебить .single-service .page-title{24px} */
.single-service .service-single__hero-title {
    position: absolute;
    left: 20px;
    top: 20px;
    right: 20px;
    margin: 0;
    padding: 0;
    z-index: 1;
    color: var(--color-white);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
}
@media (max-width: 767px) {
    .single-service .service-single__hero-title { font-size: 30px; }
}

/* Блок пунктов услуги в сайдбаре — акцентный тинт, маркеры-точки, 1 колонка */
.service-single__points {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
}
.service-single__points-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; }
.service-single__points-list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.service-single__points-list li {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text);
}
.service-single__points-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Описание услуги (SEO-текст в теле записи) */
.service-single__desc { font-size: 15px; color: var(--color-text); }
.service-single__desc > *:first-child { margin-top: 0; }
.service-single__desc h2 { font-size: 20px; margin: 24px 0 10px; }
.service-single__desc h3 { font-size: 17px; margin: 18px 0 8px; }
.service-single__desc p { margin-bottom: 12px; line-height: 1.7; }
.service-single__desc ul { margin: 0 0 12px; padding-left: 0; list-style: none; }
.service-single__desc ul li { position: relative; padding-left: 16px; margin-bottom: 6px; line-height: 1.6; }
.service-single__desc ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Сайдбар: карточка-CTA справа сверху (тот же вид, что doc-cta) */
.service-aside-cta {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
}
.service-aside-cta__icon { display: flex; color: var(--color-accent); margin-bottom: 12px; }
.service-aside-cta__title { font-size: 16px; font-weight: 700; color: var(--color-text); line-height: 1.3; margin-bottom: 8px; }
.service-aside-cta__text { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 16px; }
.service-aside-cta__btn { width: 100%; justify-content: center; font-size: 14px; background-color: #041E37; }
.service-aside-cta__btn:hover { background-color: #06304f; }

/* Нижний CTA — иконка слева от текста (features=>[] снимает флекс-модификатор),
   компактнее и кнопка «Запросить КП» тёмно-синяя */
.single-service .cta-block { padding: 12px 16px; background: rgba(37, 99, 235, 0.06); }
.single-service .cta-block__content { display: flex; align-items: center; gap: var(--spacing-md); }
.single-service .cta-block__icon { width: 48px; height: 48px; }
.single-service .cta-block__icon svg { width: 48px; height: 48px; }
.single-service .cta-block__title { font-size: 16px; margin-bottom: 0; }
.single-service .cta-block__text { font-size: 14px; }
.single-service .cta-block__actions .btn { font-size: 14px; padding: 12px 32px; }
.single-service .cta-block__actions .btn--primary { background-color: #041E37; }
.single-service .cta-block__actions .btn--primary:hover { background-color: #06304f; }

@media (max-width: 767px) {
    .service-single__points-list ul { grid-template-columns: 1fr; }
}

/* ============================================================
   PRODUCT PAGE (одиночный товар) — .pp
   ============================================================ */
.pp {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
    margin: 4px 0 24px;
}
.pp__gallery { position: sticky; top: calc(var(--header-height) + var(--header-offset) + var(--spacing-md)); }

/* Основная колонка */
.pp__title { font-size: 24px; font-weight: 700; color: var(--color-text); line-height: 1.25; margin-bottom: 12px; }
.pp__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pp__tags .tag {
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.06);
    color: #041e37;
    border: none;
}

.pp__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    margin-bottom: 20px;
}
.pp__feature { display: flex; align-items: center; gap: 10px; }
.pp__feature-icon { flex-shrink: 0; display: flex; color: var(--color-accent); }
.pp__feature-text { font-size: 13px; color: var(--color-text-muted); line-height: 1.3; }
.pp__feature-text strong { display: block; color: var(--color-text); font-weight: 600; }

/* В карточке остался единственный блок — «Основные характеристики»: таблица
   занимает всю ширину колонки (так же, как раньше вели себя категории без
   химсостава — арматура и фитинги). Химсостав переехал целиком в секцию
   «Свойства марки стали» ниже по странице. */
.pp__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.pp__block-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; }

.pp__specs { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp__specs th, .pp__specs td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.pp__specs th { font-weight: 400; color: var(--color-text-muted); width: 52%; }
.pp__specs td { color: var(--color-text); font-weight: 600; }

.pp__more {
    margin-top: 12px;
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--color-accent);
}
.pp__more:hover { color: var(--color-accent-hover); }

/* Сайдбар */
.pp__aside { position: sticky; top: calc(var(--header-height) + var(--header-offset) + var(--spacing-md)); display: flex; flex-direction: column; gap: 16px; }
.pp__buy { border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: 16px; }
.pp__stock { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.pp__stock--in { color: var(--color-success); }
.pp__stock--order { color: var(--color-warning); }
.pp__buy-meta { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--color-text-muted); margin-bottom: 14px; }
.pp__buy-meta strong { color: var(--color-text); font-weight: 600; }
.pp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin-bottom: 14px; }
.pp__price-value { font-size: 26px; font-weight: 800; color: var(--color-text); }
.pp__price-value--req { font-size: 18px; font-weight: 700; }
.pp__price-unit { font-size: 15px; color: var(--color-text-muted); }
.pp__price-vat { width: 100%; font-size: 11px; color: var(--color-text-muted); }
.pp__buy-btn { width: 100%; justify-content: center; font-size: 14px; background-color: #041e37; }
.pp__buy-btn:hover { background-color: #06304f; }
.pp__buy-row { margin-top: 8px; }
.pp__spec-btn { width: 100%; justify-content: center; font-size: 14px; }

.pp__ask { background: rgba(37, 99, 235, 0.06); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: 16px; }
.pp__ask-title { font-size: 14px; font-weight: 700; color: #041e37; margin-bottom: 4px; }
.pp__ask-text { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 12px; }
.pp__ask-btn { width: 100%; justify-content: center; font-size: 13px; color: #041e37; }

.pp__side-block { border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: 16px; }
.pp__side-title { font-size: 14px; font-weight: 700; color: #041e37; margin-bottom: 12px; }
.pp__doc-list, .pp__delivery-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pp__doc-link { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); }
.pp__doc-link > svg:first-child { flex-shrink: 0; color: var(--color-accent); }
.pp__doc-link span { flex: 1; min-width: 0; }
.pp__doc-dl { flex-shrink: 0; color: var(--color-text-muted); }
.pp__doc-link:hover span { color: var(--color-accent); }
.pp__doc-link:hover .pp__doc-dl { color: var(--color-accent); }
.pp__delivery-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--color-text-muted); line-height: 1.4; }
.pp__delivery-icon { flex-shrink: 0; display: flex; color: var(--color-accent); margin-top: 2px; }

/* Вкладки */
.pp-tabs { margin: 8px 0 24px; }
.pp-tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
.pp-tabs__btn {
    background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 10px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-text-muted);
}
.pp-tabs__btn:hover { color: var(--color-text); }
.pp-tabs__btn--active { color: #041e37; border-bottom-color: #041e37; }
.pp-tabs__panel { display: none; font-size: 15px; max-width: 900px; }
.pp-tabs__panel--active { display: block; }
.pp-tabs__panel p { margin-bottom: 12px; line-height: 1.7; }

/* Нижний CTA на странице товара — компактный, иконка слева, кнопка тёмно-синяя */
.single-product .cta-block { padding: 12px 16px; }
.single-product .cta-block__content { display: flex; align-items: center; gap: var(--spacing-md); }
.single-product .cta-block__icon { width: 48px; height: 48px; }
.single-product .cta-block__icon svg { width: 48px; height: 48px; }
.single-product .cta-block__title { font-size: 16px; margin-bottom: 0; }
.single-product .cta-block__text { font-size: 14px; }
.single-product .cta-block__actions .btn { font-size: 14px; padding: 12px 32px; }
.single-product .cta-block__actions .btn--primary { background-color: #041e37; }
.single-product .cta-block__actions .btn--primary:hover { background-color: #06304f; }

@media (max-width: 1199px) {
    .pp { grid-template-columns: 320px minmax(0, 1fr); }
    .pp__aside { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; }
    .pp__aside > * { flex: 1 1 260px; }
    .pp__gallery { position: static; }
}
@media (max-width: 767px) {
    .pp { grid-template-columns: 1fr; }
    .pp__features { grid-template-columns: 1fr; }
    .pp__cols { grid-template-columns: 1fr; gap: 24px; }
    .pp__price-value { font-size: 22px; }
}