@tailwind base;
@tailwind components;
@tailwind utilities;
@import './icomoon/style.css'

/* ============================================
   SPACING UTILITIES — margin / padding / gap
   ============================================ */

/* margin-bottom */
.mb-0  { margin-bottom: 0 }
.mb-1  { margin-bottom: 0.25rem }   /* 4px */
.mb-2  { margin-bottom: 0.5rem }    /* 8px */
.mb-3  { margin-bottom: 0.75rem }   /* 12px */
.mb-4  { margin-bottom: 1rem }      /* 16px */
.mb-5  { margin-bottom: 1.25rem }   /* 20px */
.mb-6  { margin-bottom: 1.5rem }    /* 24px */
.mb-7  { margin-bottom: 1.75rem }   /* 28px */
.mb-8  { margin-bottom: 2rem }      /* 32px */
.mb-10 { margin-bottom: 2.5rem }    /* 40px */
.mb-12 { margin-bottom: 3rem }      /* 48px */

/* margin-top */
.mt-0  { margin-top: 0 }
.mt-1  { margin-top: 0.25rem }
.mt-2  { margin-top: 0.5rem }
.mt-3  { margin-top: 0.75rem }
.mt-4  { margin-top: 1rem }
.mt-5  { margin-top: 1.25rem }
.mt-6  { margin-top: 1.5rem }
.mt-7  { margin-top: 1.75rem }
.mt-8  { margin-top: 2rem }
.mt-10 { margin-top: 2.5rem }
.mt-12 { margin-top: 3rem }
.mt-auto { margin-top: auto }

/* margin-left / right */
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.ml-1  { margin-left: 0.25rem }
.ml-2  { margin-left: 0.5rem }
.ml-3  { margin-left: 0.75rem }
.ml-4  { margin-left: 1rem }
.mr-1  { margin-right: 0.25rem }
.mr-2  { margin-right: 0.5rem }
.mr-3  { margin-right: 0.75rem }
.mr-4  { margin-right: 1rem }

/* margin-x / margin-y */
.mx-auto { margin-left: auto; margin-right: auto }
.mx-1  { margin-left: 0.25rem; margin-right: 0.25rem }
.mx-2  { margin-left: 0.5rem;  margin-right: 0.5rem }
.mx-3  { margin-left: 0.75rem; margin-right: 0.75rem }
.mx-4  { margin-left: 1rem;    margin-right: 1rem }
.my-1  { margin-top: 0.25rem;  margin-bottom: 0.25rem }
.my-2  { margin-top: 0.5rem;   margin-bottom: 0.5rem }
.my-3  { margin-top: 0.75rem;  margin-bottom: 0.75rem }
.my-4  { margin-top: 1rem;     margin-bottom: 1rem }
.my-6  { margin-top: 1.5rem;   margin-bottom: 1.5rem }
.my-8  { margin-top: 2rem;     margin-bottom: 2rem }

/* padding-bottom */
.pb-0  { padding-bottom: 0 }
.pb-1  { padding-bottom: 0.25rem }
.pb-2  { padding-bottom: 0.5rem }
.pb-3  { padding-bottom: 0.75rem }
.pb-4  { padding-bottom: 1rem }
.pb-5  { padding-bottom: 1.25rem }
.pb-6  { padding-bottom: 1.5rem }
.pb-8  { padding-bottom: 2rem }
.pb-10 { padding-bottom: 2.5rem }
.pb-12 { padding-bottom: 3rem }

/* padding-top */
.pt-0  { padding-top: 0 }
.pt-1  { padding-top: 0.25rem }
.pt-2  { padding-top: 0.5rem }
.pt-3  { padding-top: 0.75rem }
.pt-4  { padding-top: 1rem }
.pt-5  { padding-top: 1.25rem }
.pt-6  { padding-top: 1.5rem }
.pt-8  { padding-top: 2rem }
.pt-10 { padding-top: 2.5rem }
.pt-12 { padding-top: 3rem }

/* padding-left / right */
.pl-1  { padding-left: 0.25rem }
.pl-2  { padding-left: 0.5rem }
.pl-3  { padding-left: 0.75rem }
.pl-4  { padding-left: 1rem }
.pl-5  { padding-left: 1.25rem }
.pl-6  { padding-left: 1.5rem }
.pr-1  { padding-right: 0.25rem }
.pr-2  { padding-right: 0.5rem }
.pr-3  { padding-right: 0.75rem }
.pr-4  { padding-right: 1rem }
.pr-5  { padding-right: 1.25rem }
.pr-6  { padding-right: 1.5rem }

/* padding-x / padding-y */
.px-1  { padding-left: 0.25rem; padding-right: 0.25rem }
.px-2  { padding-left: 0.5rem;  padding-right: 0.5rem }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem }
.px-4  { padding-left: 1rem;    padding-right: 1rem }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem }
.px-8  { padding-left: 2rem;    padding-right: 2rem }
.py-1  { padding-top: 0.25rem;  padding-bottom: 0.25rem }
.py-2  { padding-top: 0.5rem;   padding-bottom: 0.5rem }
.py-3  { padding-top: 0.75rem;  padding-bottom: 0.75rem }
.py-4  { padding-top: 1rem;     padding-bottom: 1rem }
.py-5  { padding-top: 1.25rem;  padding-bottom: 1.25rem }
.py-6  { padding-top: 1.5rem;   padding-bottom: 1.5rem }
.py-8  { padding-top: 2rem;     padding-bottom: 2rem }
.py-10 { padding-top: 2.5rem;   padding-bottom: 2.5rem }

/* gap */
.gap-1  { gap: 0.25rem }
.gap-2  { gap: 0.5rem }
.gap-3  { gap: 0.75rem }
.gap-4  { gap: 1rem }
.gap-5  { gap: 1.25rem }
.gap-6  { gap: 1.5rem }
.gap-8  { gap: 2rem }
.gap-10 { gap: 2.5rem }
.gap-12 { gap: 3rem }

/* ============================================
   RESPONSIVE SPACING — @media mobile (<768px)
   ============================================ */
@media (max-width: 767px) {
    /* Крестик закрытия модала корзины на мобильном */
    .cart-modal-close-mobile { display: flex !important; }

    /* Модал корзины: скрываем правую колонку "Добавлен сейчас" */
    .modal-cart-main .right.cart-block { display: none !important; }
    .modal-cart-main .left { width: 100% !important; border-right: none !important; }

    /* Отступы футера на мобильном */
    #footer { padding-left: 15px; padding-right: 15px; }

    /* Логотип в мобильном бургер-меню */
    #menu-mobile .heading { padding-top: 20px; }
    #menu-mobile .header-logo { height: 80px; }

    /* Увеличенный отступ между карточками товаров */
    .list-product { gap: 28px 16px !important; }

    /* Фильтры: 2 колонки на мобильном */
    #cuisine-filter-tags,
    #health-filter-tags {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: unset !important;
        gap: 8px 12px;
    }
    #cuisine-filter-tags .brand-item,
    #health-filter-tags .brand-item {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .mb-6  { margin-bottom: 1rem }
    .mb-8  { margin-bottom: 1.5rem }
    .mb-10 { margin-bottom: 2rem }
    .mb-12 { margin-bottom: 2rem }
    .mt-6  { margin-top: 1rem }
    .mt-8  { margin-top: 1.5rem }
    .mt-10 { margin-top: 2rem }
    .mt-12 { margin-top: 2rem }
    .py-6  { padding-top: 1rem;  padding-bottom: 1rem }
    .py-8  { padding-top: 1.5rem; padding-bottom: 1.5rem }
    .py-10 { padding-top: 2rem;  padding-bottom: 2rem }
    .px-6  { padding-left: 1rem; padding-right: 1rem }
    .px-8  { padding-left: 1.5rem; padding-right: 1.5rem }
    .gap-6  { gap: 1rem }
    .gap-8  { gap: 1.5rem }
    .gap-10 { gap: 2rem }
    .gap-12 { gap: 2rem }
}
@media (min-width: 1024px) {
    .lg\:pt-\[134px\] {
        padding-top: 85px;
    }
}

.heading2,
.text-title {
    text-transform: none;
}

.text-title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
}

/* ===== Green Power brand colors ===== */
:root {
    --gp-green: #84cc28;
    --gp-dark:  #1d2f25;
}

.bg-gp-green  { background-color: var(--gp-green); }
.text-gp-dark { color: var(--gp-dark); }
.hover\:bg-gp-green:hover { background-color: var(--gp-green); }
.hover\:text-gp-dark:hover { color: var(--gp-dark); }

/* Кнопка "Подробнее" на карточке товара */
.product-item .list-action .add-cart-btn,
.product-item .list-action .add-cart-btn:hover {
    background-color: var(--gp-green) !important;
    color: var(--gp-dark) !important;
    display: block;
}

/* Изображение товара в корзине */
.basket-item-img {
    width: 120px;
    min-width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.basket-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Убираем стрелки у number-инпута в корзине */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-input[type=number] {
    -moz-appearance: textfield;
}

/* Button Green */
.button-green {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gp-dark);
    background-color: var(--gp-green);
    padding: 16px 40px;
    border-radius: 12px;
    display: inline-block;
    cursor: pointer;
    transition: all ease 0.4s;
}
.button-green:hover {
    background-color: var(--gp-dark);
    color: var(--white);
}

/* ============================================
   ХЕДЕР — трёхколоночная раскладка
   [nav/burger] [logo] [icons]
   ============================================ */

/* Логотип в хедере */
.header-menu .header-logo {
    height: 130px;
    width: auto;
    max-width: 100px;
    transition: height 0.4s ease;
}

/* Трёхколоночный грид хедера */
.header-menu .header-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 0;
}

/* Колонки */
.header-col-left {
    display: flex;
    align-items: center;
}
.header-col-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-col-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* ── ДЕСКТОП >1200px ────────────────────────────── */

/* Лого + дескриптор в левой колонке */
.header-logo-desktop {
    display: flex;
    align-items: center;
    gap: 34px;
}

/* Дескриптор */
.header-descriptor {
    font-size: 14px;
    color: var(--secondary);
    max-width: 200px;
    line-height: 1.4;
    transition: opacity 0.4s ease;
}

/* Навигация по центру */
.header-nav-desktop {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 100%;
}

/* Мобильный лого — скрыт на десктопе */
.header-logo-mobile {
    display: none;
}

/* Бургер — скрыт на десктопе */
.header-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.header-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* Фиксированный хедер */
.header-menu.fixed .header-logo {
    height: 46px;
}
.header-menu.fixed .header-main {
    padding: 8px 0;
}
.header-menu.fixed .header-descriptor {
    display: block;
}

/* ── МОБИЛЬНЫЙ ≤1200px ──────────────────────────── */
@media (max-width: 1200px) {
    /* Левая колонка: бургер вместо лого */
    .header-logo-desktop { display: none; }
    .header-burger       { display: flex; }

    /* Центральная колонка: лого вместо навигации */
    .header-nav-desktop  { display: none; }
    .header-logo-mobile  { display: flex; }
}

/* ≤480px: уменьшаем лого */
@media (max-width: 480px) {
    .header-menu .header-logo {
        height: 70px;
    }
}

/* Чекбоксы фильтра «Польза для здоровья» и «Кулинария» */
.filter-health .list-brand {
    display: flex !important;
    flex-direction: column !important;
}
.filter-health .brand-item {
    display: flex !important;
    width: 100% !important;
    margin-top: 10px;
}
.filter-health .brand-item:first-child {
    margin-top: 0;
}

.filter-health .brand-name {
    font-size: 14px;
}

.filter-health .block-input input:checked + .icon-checkbox {
    opacity: 0;
}
.filter-health .block-input:has(input:checked) {
    background-color: #000000;
    border-color: #84cc28;
}
.filter-health .block-input:has(input:checked)::after {
    content: "\ea34";
    font-family: "Phosphor-Fill" !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #84cc28;
    font-size: 22px;
    line-height: 1;
}

/* Прогресс-бар корзины — цвет бренда */
.cart-block .heading.banner .tow-bar-block {
    height: 4px;
    background-color: var(--outline);
    position: relative;
    border-radius: 10px;
}
.cart-block .heading.banner .tow-bar-block .progress-line,
.cart-block .heading.banner .tow-bar-block .progress-line::before {
    background-color: var(--gp-green);
    border-radius: 10px;
}

/* Фон страницы */
body {
    background: linear-gradient(238deg, #FAF8F1 0%, #F6F3EF 99.66%);
}

/* Фон фиксированного хедера */
.header-menu.fixed {
    background: linear-gradient(238deg, #FAF8F1 0%, #F6F3EF 99.66%);
}




/* Карточки: равное выравнивание вариантов по нижнему краю */
.list-product .product-item {
    display: flex;
    flex-direction: column;
}
.list-product .product-item .product-main {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.list-product .product-item .product-infor {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.list-product .product-item .variant-list {
    margin-top: auto;
    padding-top: 12px;
}
.product-infor > a .caption1.text-secondary {
    max-height: 4.5em;
    overflow: hidden;
}

/* ===== Новый футер Green Power ===== */
.footer-gp {
    background: #e1dcce;
}

/* Верхняя строка */
.footer-gp-top {
    border-bottom: none;
    padding: 40px 0 20px 0;
}
.footer-gp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.footer-gp-logo img {
    height: 90px;
    width: auto;
}
.footer-gp-nav {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}
.footer-gp-nav a {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d2f25;
    text-decoration: none;
    transition: opacity 0.2s;
}
.footer-gp-nav a:hover { opacity: 0.6; }
.footer-gp-social-top {
    display: flex;
    gap: 10px;
}
.footer-gp-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d2f25;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.2s;
}
.footer-gp-social-icon:hover { background: #84cc28; }

/* Телефон */
.footer-gp-phone-block {
    text-align: center;
    padding: 10px 0 32px;
}
.footer-gp-phone {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d2f25;
    text-decoration: none;
    line-height: 1;
}
.footer-gp-phone:hover { opacity: 0.75; }

/* Адреса */
.footer-gp-addresses {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding-bottom: 36px;
}
.footer-gp-address {
    text-align: center;
}
.footer-gp-address-label {
    font-size: 13px;
    color: #888;
    margin-bottom: 6px;
}
.footer-gp-address-city {
    font-size: 15px;
    color: #1d2f25;
    font-weight: 500;
    margin-bottom: 6px;
}
.footer-gp-address-map {
    font-size: 13px;
    color: #1d2f25;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer-gp-address-sep {
    width: 1px;
    height: 60px;
    background: #c8c4be;
    transform: rotate(15deg);
    flex-shrink: 0;
}

/* Мессенджеры */
.footer-gp-messengers {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-bottom: 36px;
}
.footer-gp-messenger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    background: #ffffff;
    color: #1d2f25;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}
.footer-gp-messenger-btn i { font-size: 18px; }
.footer-gp-messenger-icon { width: 18px; height: 18px; object-fit: contain; display: block; }
.footer-gp-messenger-btn:hover { background: #d0cdc8; }

/* Реквизиты */
.footer-gp-legal {
    text-align: center;
    padding-bottom: 36px;
    font-size: 12px;
    color: #888;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

/* Нижняя строка */
.footer-gp-bottom {
    padding: 32px 0 64px 0;
}
.footer-gp-bottombar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #888;
}
.footer-gp-bottombar a {
    color: #888;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer-gp-bottombar a:hover { color: #1d2f25; }

@media (max-width: 767px) {
    .footer-gp-topbar { flex-wrap: wrap; justify-content: center; text-align: center; }
    .footer-gp-nav { gap: 16px; justify-content: center; }
    .footer-gp-social-top { justify-content: center; }
    .footer-gp-phone { font-size: 36px; }
    .footer-gp-addresses { flex-direction: column; gap: 24px; }
    .footer-gp-address-sep { width: 60px; height: 1px; transform: none; }
    .footer-gp-messengers { flex-wrap: wrap; }
    .footer-gp-bottombar { justify-content: center; text-align: center; }
}

/* Контакты в мобильном меню */
.mobile-menu-contacts {
    margin-top: 8px;
    padding: 20px 0 24px;
}
.mobile-menu-phone {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--gp-dark);
    text-decoration: none;
    margin-bottom: 16px;
}
.mobile-menu-addresses {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.mobile-menu-address-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gp-green);
    margin-bottom: 2px;
}
.mobile-menu-address-city {
    font-size: 13px;
    color: #555;
}
.mobile-menu-messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mobile-menu-messenger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f3f1ec;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gp-dark);
    text-decoration: none;
}
.mobile-menu-messenger-btn i { font-size: 16px; }

/* Не скрываем заголовок товара при наведении */
.product-item:hover.grid-type .product-main .product-infor .product-name {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ===== Промо-блок каталога ===== */
.catalogue-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 0 0 52px;
    border-bottom: 1px solid #e8e4dc;
    margin-bottom: 25px;
}
.catalogue-promo-left {
    flex: 0 0 55%;
    max-width: 55%;
}
.catalogue-promo-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.catalogue-promo-line1 {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300;
    line-height: 1.15;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}
.catalogue-promo-line2 {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300;
    line-height: 1.15;
    color: #84cc28;
    letter-spacing: -0.02em;
}
.catalogue-promo-right {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.catalogue-promo-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}
.catalogue-promo-author {
    display: flex;
    align-items: center;
    gap: 14px;
}
.catalogue-promo-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}
.catalogue-promo-author-name {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}
@media (max-width: 767px) {
    .catalogue-promo {
        flex-direction: column;
        gap: 24px;
        padding: 32px 0 36px;
        margin-bottom: 32px;
        border-bottom: none;
    }
    .catalogue-promo-left,
    .catalogue-promo-right {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

/* Вес шрифта для всех заголовков */
.heading1, .heading2, .heading3, .heading4, .heading5, .heading6 {
    font-weight: 500;
}

/* ===== Страница товара: третья колонка (форма заказа) ===== */
.product-order {
    align-self: flex-start;
    position: sticky;
    top: 100px;
}
.product-order-inner {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
}
.detail-variant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e8;
}
.detail-variant-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.detail-variant-volume {
    font-size: 13px;
    color: #777;
}
.detail-variant-price {
    font-size: 16px;
    font-weight: 600;
    color: #1d2f25;
}
.detail-variant-qty {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 14px;
}
.detail-variant-qty .qty-minus,
.detail-variant-qty .qty-plus {
    cursor: pointer;
    font-size: 14px;
    color: #555;
    user-select: none;
}
.detail-variant-qty .qty-minus { color: #ccc; }
.detail-variant-qty .quantity {
    width: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.detail-order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

/* Fix: overflow-x: hidden на body ломает position:sticky.
   overflow-x: clip обрезает горизонтальный скролл
   без создания scroll-контейнера */
html, body {
    overflow-x: clip;
}

/* Отступ перед блоком "Другие наши товары" */
.related-products {
    margin-top: 85px;
}

/* Цвет фона атрибутов (польза для здоровья, кулинария) */
.health-tag {
    background-color: #e2dcce;
}

/* Заголовки фильтров в каталоге */
.filter-heading-label {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    color: #84cc28;
}

/* Прогресс-бар фильтра цены */
.filter-price .tow-bar-block .progress {
    position: absolute;
    height: 5px;
    border-radius: 10px;
    background: #84cc28;
}

/* Шрифт с кириллицей — Golos Text */
body, html,
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, select, textarea, label {
    font-family: 'Golos Text', 'Instrument Sans', sans-serif;
}

/* Сохраняем иконочный шрифт для чекбоксов и иконок */
[class*="ph-"], [class*="ph "],
.filter-health .block-input:has(input:checked)::after {
    font-family: inherit;
}
.filter-health .block-input:has(input:checked)::after {
    font-family: "Phosphor-Fill" !important;
}

/* Фон модального окна поиска */
.modal-search-main {
    background: linear-gradient(238deg, #FAF8F1 0%, #F6F3EF 99.66%);
}

/* Навигация в хедере */
.header-nav {
    display: flex;
    align-items: center;
    gap: 60px;
}
.header-nav-link {
    transition: color 0.4s;
    font-size: 13px;
    letter-spacing: 0.08em;
}

/* Подчёркивание-палочка при наведении на пункт меню хедера */
.header-nav-link {
    position: relative;
}
.header-nav-link::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #000000;
    transition: width ease 0.3s;
}
.header-nav-link:hover::before,
.header-nav-link.active::before {
    width: 100%;
}

/* ===== Панель оформления заказа ===== */
.checkout-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.checkout-panel-overlay.open {
    display: block;
}
.checkout-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100vw;
    background: #fff;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    padding: 56px 40px 40px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.checkout-panel.open {
    transform: translateX(0);
}
.checkout-panel-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--gp-dark);
    line-height: 1;
}
.checkout-panel-close:hover {
    color: var(--gp-green);
}
.checkout-panel-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gp-dark);
    line-height: 1.25;
    margin-bottom: 20px;
}
.checkout-panel-text {
    font-size: 15px;
    line-height: 1.65;
    color: #666;
    margin-bottom: 40px;
}
.checkout-panel-text--error {
    color: #c0392b;
    margin-bottom: 20px;
}
.checkout-panel-btn {
    display: block;
    width: 100%;
    padding: 18px 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--gp-dark);
    color: #fff;
    border: 2px solid var(--gp-dark);
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.3s, color 0.3s;
    text-decoration: none;
    border-radius: 12px;
}
.checkout-panel-btn:hover {
    background: var(--gp-green);
    border-color: var(--gp-green);
    color: var(--gp-dark);
}
.checkout-panel-btn--ghost {
    background: transparent;
    color: var(--gp-dark);
}
.checkout-panel-btn--ghost:hover {
    background: var(--gp-dark);
    color: #fff;
    border-color: var(--gp-dark);
}

.checkout-panel-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s;
    margin-top: 4px;
}
.checkout-panel-input:focus {
    border-color: var(--gp-green);
}
.checkout-panel-back {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    transition: color 0.2s;
}
.checkout-panel-back:hover {
    color: var(--gp-dark);
}

/* ===== Сетки товаров (замена нескомпилированных Tailwind md:/lg: классов) ===== */

/* Каталог с сайдбаром — 3 колонки */
.list-product-block .list-product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .list-product-block .list-product {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Поиск (без сайдбара) — 4 колонки */
.shop-product > .container > .list-product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .shop-product > .container > .list-product {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .shop-product > .container > .list-product {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Другие наши товары на детальной странице — 4 колонки */
.related-products .list-product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .related-products .list-product {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .related-products .list-product {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ===== Второе фото товара в карточке (hover) ===== */
.product-thumb .product-img-secondary {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.product-thumb:hover .product-img-secondary {
    opacity: 1;
}
.product-thumb .product-img-primary {
    transition: opacity 0.6s ease;
}
.product-thumb:hover .product-img-primary {
    opacity: 0;
}

/* ===== Карточка товара: строка варианта (объём + цена + кнопка) ===== */
.variant-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f0f0f0; }
.variant-row:last-child { border-bottom:none; }
.variant-volume { font-size:13px; color:#666; width:56px; flex-shrink:0; }
.variant-price { font-size:14px; font-weight:600; color:#1d2f25; flex:1; }
.variant-add-btn { position:relative; width:30px; height:30px; background:#1d2f25; border:none; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.2s; }
.product-item .variant-add-btn:hover .tag-action { transform:translateX(0); opacity:1; z-index:1; }
.variant-add-btn:hover { background:var(--gp-green); }
.variant-add-btn i { font-size:16px; color:#fff; }
.variant-add-btn:hover i { color:#1d2f25; }

/* ===== Переключатель вида каталога (сетка / список) ===== */
.layout-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    color: #bbb;
    padding: 0;
}
.layout-btn span {
    background: #1f1f1f;
}
.layout-btn-grid span {
    background: #1f1f1f;
    height: 10px;
}
.layout-btn-grid .flex {
    gap: 2px;
}
.layout-btn-list span {
    background: #1f1f1f;
    width: 10px;
}
.layout-btn-list .flex {
    gap: 2px;
}
.layout-btn.active,
.layout-btn:hover {
    border-color: var(--gp-dark);
    color: var(--gp-dark);
}

/* Список-вид: один товар в строку */
.list-product-block .list-product.layout-list {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    align-content: start;
}
.list-product-block .list-product.layout-list .product-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 0;
}
.list-product-block .list-product.layout-list .product-item .product-main {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}
.list-product-block .list-product.layout-list .product-item .product-thumb {
    width: 140px;
    min-width: 140px;
    height: 140px;
    border-radius: 12px;
    flex-shrink: 0;
}
.list-product-block .list-product.layout-list .product-item .product-thumb .product-img {
    aspect-ratio: unset !important;
    height: 100%;
}
.list-product-block .list-product.layout-list .product-item .product-infor {
    flex: 1;
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 50px;
}
.list-product-block .list-product.layout-list .product-item .product-infor > a {
    flex: 1;
    min-width: 0;
}
.list-product-block .list-product.layout-list .product-item .product-infor .variant-list {
    flex-shrink: 0;
    width: 220px;
    margin-top: 0;
    border-radius: 12px;
    background: #fff;
    padding: 10px 20px;
}
.list-product-block .list-product.layout-list .product-item .list-action-right {
    display: none !important;
}

/* ── СДЭК: автодополнение городов ── */
.cdek-city-drop {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 999;
    max-height: 220px;
    overflow-y: auto;
}
.cdek-city-drop.show { display: block; }
.cdek-city-item {
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}
.cdek-city-item:hover { background: #f5f5f0; }


/* ===== Панель дистрибьютора ===== */
.distrib-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.distrib-panel-overlay.open {
    display: block;
}
.distrib-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: #fff;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    padding: 56px 40px 40px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.distrib-panel.open {
    transform: translateX(0);
}
.distrib-panel-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--gp-dark);
    line-height: 1;
}
.distrib-panel-close:hover {
    color: var(--gp-green);
}
.distrib-panel-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gp-dark);
    margin-bottom: 12px;
}
.distrib-panel-sub {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 28px;
}
.distrib-panel-quote {
    border-left: 3px solid var(--gp-green);
    padding: 16px 20px;
    background: #f9f8f5;
    border-radius: 0 10px 10px 0;
    margin-bottom: 24px;
}
.distrib-panel-quote-text {
    font-size: 13px;
    line-height: 1.7;
    color: #444;
    font-style: italic;
    margin: 0;
}
.distrib-panel-founder {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}
.distrib-panel-avatar {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.distrib-panel-founder-info {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}
.distrib-panel-founder-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--gp-dark);
    margin-bottom: 2px;
}
.distrib-panel-founder-role {
    color: #888;
    font-size: 12px;
}
.distrib-panel-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gp-dark);
    margin-bottom: 8px;
    letter-spacing: 0.03em;
}
.distrib-panel-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 12px;
    font-family: inherit;
}
.distrib-panel-input:focus {
    border-color: var(--gp-green);
}
.distrib-panel-btn {
    display: block;
    width: 100%;
    padding: 18px 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--gp-dark);
    color: #fff;
    border: 2px solid var(--gp-dark);
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    text-decoration: none;
    border-radius: 12px;
    font-family: inherit;
}
.distrib-panel-btn:hover {
    background: var(--gp-green);
    border-color: var(--gp-green);
    color: var(--gp-dark);
}
.distrib-panel-privacy {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}
.distrib-panel-success {
    display: none;
    text-align: center;
    padding: 40px 0;
}
.distrib-panel-success-icon {
    font-size: 52px;
    color: var(--gp-green);
    margin-bottom: 16px;
    line-height: 1;
}
.distrib-panel-success-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--gp-dark);
    margin-bottom: 10px;
}
.distrib-panel-success-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
@media (max-width: 520px) {
    .distrib-panel {
        padding: 52px 24px 32px;
    }
    .distrib-panel-title {
        font-size: 18px;
    }
}



/* ===== Панель дистрибьютора ===== */
.distrib-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.distrib-panel-overlay.open {
    display: block;
}
.distrib-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: #fff;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    padding: 56px 40px 40px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.distrib-panel.open {
    transform: translateX(0);
}
.distrib-panel-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--gp-dark);
    line-height: 1;
}
.distrib-panel-close:hover {
    color: var(--gp-green);
}
.distrib-panel-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gp-dark);
    margin-bottom: 12px;
}
.distrib-panel-sub {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 28px;
}
.distrib-panel-quote {
    border-left: 3px solid var(--gp-green);
    padding: 16px 20px;
    background: #f9f8f5;
    border-radius: 0 10px 10px 0;
    margin-bottom: 24px;
}
.distrib-panel-quote-text {
    font-size: 13px;
    line-height: 1.7;
    color: #444;
    font-style: italic;
    margin: 0;
}
.distrib-panel-founder {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}
.distrib-panel-avatar {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.distrib-panel-founder-info {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}
.distrib-panel-founder-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--gp-dark);
    margin-bottom: 2px;
}
.distrib-panel-founder-role {
    color: #888;
    font-size: 12px;
}
.distrib-panel-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gp-dark);
    margin-bottom: 8px;
    letter-spacing: 0.03em;
}
.distrib-panel-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 12px;
    font-family: inherit;
}
.distrib-panel-input:focus {
    border-color: var(--gp-green);
}
.distrib-panel-btn {
    display: block;
    width: 100%;
    padding: 18px 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--gp-dark);
    color: #fff;
    border: 2px solid var(--gp-dark);
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    text-decoration: none;
    border-radius: 12px;
    font-family: inherit;
}
.distrib-panel-btn:hover {
    background: var(--gp-green);
    border-color: var(--gp-green);
    color: var(--gp-dark);
}
.distrib-panel-privacy {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}
.distrib-panel-success {
    display: none;
    text-align: center;
    padding: 40px 0;
}
.distrib-panel-success-icon {
    font-size: 52px;
    color: var(--gp-green);
    margin-bottom: 16px;
    line-height: 1;
}
.distrib-panel-success-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--gp-dark);
    margin-bottom: 10px;
}
.distrib-panel-success-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
@media (max-width: 520px) {
    .distrib-panel {
        padding: 52px 24px 32px;
    }
    .distrib-panel-title {
        font-size: 18px;
    }
}

.distrib-panel-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}
.distrib-panel-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
}
.distrib-panel-consent-check {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #000;
    cursor: pointer;
}
.distrib-panel-consent-text {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}
.distrib-panel-consent-text a {
    color: #1d2f25;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.distrib-panel-consent-text a:hover {
    text-decoration: none;
}

/* Счётчик корзины в хедере — всегда виден */
.cart-icon {
    position: relative;
}
.cart-quantity {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: #1d2f25;
    border-radius: 99px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ============================================
   КАТАЛОГ — мобильные фильтры
   ============================================ */

/* Кнопка "Фильтры" — видна только на мобильных */
.filter-toggle-btn {
    display: none;
}

/* Тело фильтров — на десктопе всегда видно */
.filter-body {
    display: block;
}

@media (max-width: 767px) {
    /* Кнопка появляется на мобильных */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 16px;
        background: #f5f5f5;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 0;
        transition: background 0.2s;
    }
    .filter-toggle-btn:hover {
        background: #ebebeb;
    }
    .filter-toggle-label {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .filter-toggle-caret {
        transition: transform 0.25s ease;
        font-size: 16px;
    }
    .filter-toggle-btn--open .filter-toggle-caret {
        transform: rotate(180deg);
    }

    /* Тело фильтров скрыто по умолчанию */
    .filter-body {
        display: none;
        padding-top: 16px;
    }
    .filter-body--open {
        display: block;
    }
}

/* "Польза для здоровья" — 2 колонки */
.health-tags-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}
.health-tags-grid .brand-item {
    min-width: 0;
    margin-top: 0 !important;  /* сбрасываем margin из .list-brand .brand-item:not(:nth-child(1)) */
}
.health-tags-grid .brand-name {
    font-size: 13px;
    white-space: normal;
    line-height: 1.3;
}

/* ============================================
   БЛОК "ТЕХНОЛОГИЯ ПРОИЗВОДСТВА"
   ============================================ */
.production-section {
    background-color: #f9f8f5;
    padding: 80px 0;
}

.production-inner {
    display: flex;
    align-items: center;
    gap: 64px;
}

/* Текстовая колонка */
.production-text {
    flex: 1 1 50%;
    min-width: 0;
}

.production-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gp-dark);
    margin-bottom: 28px;
}

.production-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-green);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Нумерованные шаги */
.production-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.production-step {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.production-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--gp-green);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.production-step-text {
    font-size: 15px;
    line-height: 1.55;
    color: #444;
}

/* Разделитель "→ отжим" */
.production-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    padding: 12px 18px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e8e4dc;
}

.production-divider-icon {
    font-size: 18px;
    color: var(--gp-green);
    flex-shrink: 0;
}

.production-divider-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--gp-dark);
}

/* Блок "без нагрева / без металла / ..." */
.production-clean {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.production-clean-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
}

.production-clean-icon {
    font-size: 18px;
    color: var(--gp-green);
    flex-shrink: 0;
}

/* Видео-колонка */
.production-video-wrap {
    flex: 0 0 400px;
    width: 400px;
}

.production-video-inner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.production-video {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    display: block;
}

.production-video-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255,255,255,0.92);
    border-radius: 40px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-dark);
    backdrop-filter: blur(4px);
}

.production-video-badge i {
    font-size: 16px;
    color: var(--gp-green);
}

/* Адаптив */
@media (max-width: 900px) {
    .production-inner {
        flex-direction: column;
        gap: 40px;
    }
    .production-video-wrap {
        flex: none;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
    .production-section {
        padding: 48px 0;
    }
}

/* Layout switcher (grid/list view) */
.layout-switcher {
    display: flex;
    gap: 6px;
}
@media (max-width: 767px) {
    .layout-switcher {
        display: none;
    }
}

/* Убрать обводку при клике/фокусе на любых ссылках и кнопках */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
a:active,
button:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Founders photo — home page */
.home-founders-photo {
    aspect-ratio: 4 / 3;
    display: block;
}
.home-founders-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
}
.home-founders-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--gp-dark);
}
.home-founders-role {
    font-size: 13px;
    color: #888;
}

/* Founders block in hero section */
.home-hero-founder {
    margin-top: 32px;
}

/* Payment auto-redirect spinner */
.payment-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e5e5;
    border-top-color: var(--gp-green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ===== Поля формы оформления заказа ===== */
.checkout-fields-row {
    display: flex;
    gap: 16px;
}
.checkout-field {
    flex: 1;
}
.cdek-fields-row {
    display: flex;
    gap: 16px;
}
.cdek-field {
    flex: 1;
    min-width: 200px;
}
@media (max-width: 639px) {
    .checkout-fields-row {
        flex-direction: column;
    }
    .checkout-field {
        width: 100%;
    }
    .cdek-fields-row {
        flex-direction: column;
    }
    .cdek-field {
        min-width: 0;
        width: 100%;
    }
}