/*
 * Main stylesheet for Zivert theme
 * Импортируем файлы в строгом порядке: переменные -> шрифты -> сброс -> типографика
 */



@import url('vars.css');
@import url('fonts.css');
@import url('reset.css');
@import url('typography.css');
@import url('icons.css');
@import url('blocks/breadcrumbs.css');
@import url('blocks/buttons.css?ver=1.0.2');
@import url('blocks/forms.css');
@import url('blocks/scrollbar.css');
@import url('blocks/header.css');
@import url('blocks/footer.css');
@import url('blocks/single-product.css');
@import url('blocks/cookie-banner.css');
@import url('blocks/home.css');
@import url('blocks/modal.css');

main {
    display: flex;
    /* Создаем гибкую структуру */
    flex-direction: column;
    /* Располагаем элементы вертикально */
    min-height: 100vh;
    /* Минимальная высота равна высоте вьюпорта */
}

/* ===== КНОПКА «НАВЕРХ» ===== */
.scroll-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 950;
    width: 48px;
    height: 48px;
    padding: 12px;
    background: var(--surface-general-accent-secondary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--surface-general-secondary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 300ms var(--easing-gentle),
        transform 300ms var(--easing-gentle),
        visibility 0s linear 300ms,
        background-color 300ms var(--easing-gentle),
        color 300ms var(--easing-gentle);
}

.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 300ms var(--easing-gentle),
        transform 300ms var(--easing-gentle),
        visibility 0s,
        background-color 300ms var(--easing-gentle),
        color 300ms var(--easing-gentle);
}

.scroll-top:hover {
    background: var(--surface-general-accent-primary);
}

.scroll-top svg {
    width: 24px;
    height: 24px;
}

/*
ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ КНОПОК
<!-- Primary кнопка с иконкой -->
<button type="button" class="button button--primary">
    <span class="button__label">Подробнее</span>
    <span class="button__icon-wrapper">
        <?php zivert_icon('arrow-forward', 'lg'); ?>
    </span>
</button>

<!-- Secondary кнопка с иконкой -->
<button type="button" class="button button--secondary">
    <span class="button__label">Скачать</span>
    <span class="button__icon-wrapper">
        <?php zivert_icon('download', 'lg'); ?>
    </span>
</button>

<!-- Flat кнопка (текстовая ссылка) -->
<button type="button" class="button button--flat">
    <span class="button__label">Смотреть все</span>
    <?php zivert_icon('arrow-forward', 'lg'); ?>
</button>

<!-- Ссылка как кнопка -->
<a href="/catalog" class="button button--primary">
    <span class="button__label">В каталог</span>
    <span class="button__icon-wrapper">
        <?php zivert_icon('arrow-forward', 'lg'); ?>
    </span>
</a>

<!-- Disabled -->
<button type="button" class="button button--primary" disabled>
    <span class="button__label">Недоступно</span>
    <span class="button__icon-wrapper">
        <?php zivert_icon('arrow-forward', 'lg'); ?>
    </span>
</button>
*/

/*
ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ Input,Radio,Checkbox,Textarea
Текстовое поле (Default)
<div class="input-field">
    <label class="form-label">
        Email <span class="form-label__asterisk">*</span>
    </label>
    <div class="input-field__wrapper">
        <input type="email" class="input-field__input" placeholder="example@mail.com">
    </div>
</div>
Текстовое поле с ошибкой
<div class="input-field input-field--error">
    <label class="form-label">
        Email <span class="form-label__asterisk">*</span>
    </label>
    <div class="input-field__wrapper">
        <input type="email" class="input-field__input" placeholder="example@mail.com">
    </div>
    <div class="form-hint form-hint--error">Введите корректный email</div>
</div>
Текстовое поле с иконкой
<div class="input-field">
    <label class="form-label">Поиск</label>
    <div class="input-field__wrapper">
        <input type="text" class="input-field__input" placeholder="Введите запрос">
        <span class="input-field__icon">
            <?php zivert_icon('search', 'lg'); ?>
        </span>
    </div>
</div>
Range (мин/макс цена)
<div class="input-range">
    <div class="input-field">
        <label class="form-label">Мин. цена</label>
        <div class="input-field__wrapper">
            <input type="number" class="input-field__input" placeholder="0">
        </div>
    </div>
    <div class="input-range__separator">—</div>
    <div class="input-field">
        <label class="form-label">Макс. цена</label>
        <div class="input-field__wrapper">
            <input type="number" class="input-field__input" placeholder="4 200 000">
        </div>
    </div>
</div>
Radio
<label class="radio">
    <input type="radio" name="delivery" class="radio__input" value="courier">
    <span class="radio__indicator"></span>
    <span class="radio__label">Курьером</span>
</label>

<label class="radio">
    <input type="radio" name="delivery" class="radio__input" value="pickup" checked>
    <span class="radio__indicator"></span>
    <span class="radio__label">Самовывоз</span>
</label>

<label class="radio radio--disabled">
    <input type="radio" name="delivery" class="radio__input" value="post" disabled>
    <span class="radio__indicator"></span>
    <span class="radio__label">Почтой (недоступно)</span>
</label>
Checkbox
<label class="checkbox">
    <input type="checkbox" class="checkbox__input" name="agree">
    <span class="checkbox__indicator">
        <span class="checkbox__icon"><?php zivert_icon('check', 'sm'); ?></span>
    </span>
    <span class="checkbox__label">Согласен с условиями</span>
</label>

<label class="checkbox">
    <input type="checkbox" class="checkbox__input" name="newsletter" checked>
    <span class="checkbox__indicator">
        <span class="checkbox__icon"><?php zivert_icon('check', 'sm'); ?></span>
    </span>
    <span class="checkbox__label">Подписаться на рассылку</span>
</label>
*/


.content_page {
    max-width: 1480px;
    margin: 0 auto;
    padding: 20px 20px;

}

.f152-banner__message{
    flex: none !important;
}

.smart-captcha{
    margin-top: 20px;
}