/* ==========================================================================
   custom.css — наши правки поверх темы ipgrussia
   Подключается на всех страницах последним (inc/enqueue.php).
   Используем только переменные темы из :root.
   ========================================================================== */


/* === Главная: плашка «Каталог» в секциях рынков (.section-products) === */

.section-products .section-products__item--catalog {
    flex-direction: column;
    justify-content: center;
    min-height: 160px;
    padding: var(--base-margin) var(--base-gap);
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition);
}

.section-products .section-products__item--catalog:hover,
.section-products .section-products__item--catalog:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text);
    transform: translateY(-2px);
}

.section-products .section-products__item--catalog:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
}

.section-products__catalog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--base-margin);
}

.section-products__catalog-title {
    font-family: var(--font-family-semi);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.section-products__catalog-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-circle);
    background: var(--color-white);
    color: var(--color-text);
    transition: var(--transition);
}

.section-products .section-products__item--catalog:hover .section-products__catalog-arrow {
    transform: translateX(6px);
}

/* Тема глобально заливает SVG в ссылках при наведении (a:hover path { fill }),
   у нашей стрелки только обводка — отключаем заливку */
.section-products .section-products__item--catalog .section-products__catalog-arrow path,
.section-products .section-products__item--catalog:hover .section-products__catalog-arrow path {
    fill: none;
}

@media (max-width: 1440px) {
    .section-products__catalog-title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .section-products .section-products__item--catalog {
        min-height: 120px;
        padding: var(--base-margin) var(--base-margin) var(--base-margin) 24px;
    }

    .section-products__catalog-title {
        font-size: 28px;
    }

    .section-products__catalog-arrow {
        width: 48px;
        height: 48px;
    }
}


/* === Главная: кабельный рынок — кнопки «Каталог» и «Сайт кабельной продукции» в шапке (#section-products--4) === */

.section-products__cable-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: var(--base-gap);
}

.section-products .section-products__cable-btn {
    display: inline-flex;
    align-items: center;
    height: 56px;
    box-sizing: border-box;
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition);
}

.section-products .section-products__cable-btn:hover,
.section-products .section-products__cable-btn:focus-visible {
    color: var(--color-text);
}

.section-products .section-products__cable-btn:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
}

/* Тема заливает SVG в ссылках при наведении — у наших иконок только обводка */
.section-products .section-products__cable-btn path,
.section-products .section-products__cable-btn:hover path {
    fill: none;
}

/* Кнопка «Каталог» */
.section-products .section-products__cable-btn--catalog {
    gap: 20px;
    padding: 0 10px 0 28px;
    background: var(--color-primary);
}

.section-products .section-products__cable-btn--catalog:hover {
    background: var(--color-primary-hover);
}

.section-products__cable-btn-text {
    font-family: var(--font-family-semi);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.section-products__cable-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-circle);
    background: var(--color-white);
    color: var(--color-text);
    transition: var(--transition);
}

.section-products .section-products__cable-btn--catalog:hover .section-products__cable-btn-arrow {
    transform: translateX(4px);
}

/* Кнопка «Сайт кабельной продукции» */
.section-products .section-products__cable-btn--site {
    gap: 10px;
    padding: 0 24px;
    background: var(--color-text);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: 17px;
    font-weight: 700;
}

.section-products .section-products__cable-btn--site svg {
    color: var(--color-primary);
}

.section-products .section-products__cable-btn--site:hover,
.section-products .section-products__cable-btn--site:focus-visible {
    background: var(--color-unactive);
    color: var(--color-white);
}

@media (max-width: 768px) {
    /* Две кнопки во всю ширину: сначала «Каталог», под ней «Сайт кабельной продукции» */
    .section-products__cable-links {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: var(--base-margin);
    }

    .section-products .section-products__cable-btn--catalog {
        justify-content: space-between;
        height: 48px;
        padding: 0 8px 0 20px;
    }

    .section-products__cable-btn-text {
        font-size: 16px;
    }

    .section-products__cable-btn-arrow {
        width: 34px;
        height: 34px;
    }

    .section-products .section-products__cable-btn--site {
        justify-content: center;
        height: 48px;
        font-size: 16px;
    }
}