/*
Theme Name: LapkaHelp Pro Theme
Author: LapkaHelp
Description: Современный, красивый шаблон для электронных NFC-адресников.
Version: 1.2
*/

/* ГЛОБАЛЬНОЕ ИСПРАВЛЕНИЕ ВЫЛЕТА ПОЛЕЙ */
* {
    box-sizing: border-box; /* Чтобы padding не увеличивал ширину блоков и полей */
}

:root {
    --bg-light: #FAF3E0;    /* Бежевый фон */
    --main-orange: #FF8C42; /* Акцентный оранжевый */
    --text-brown: #6D4C41; /* Теплый коричневый для текста */
    --text-light: #8D6E63; /* Светло-коричневый */
    --white: #FFFFFF;
    --green-call: #4CAF50;  /* Зеленый для кнопок связи */
    --transition: all 0.3s ease;
    --shadow: 0 10px 30px rgba(0,0,0,0.05);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-brown);
    margin: 0;
    line-height: 1.7;
    overflow-x: hidden; /* Запрещаем горизонтальный скролл на уровне всей страницы */
}

h1, h2, h3, h4 { font-weight: 800; }
a { text-decoration: none; color: inherit; transition: var(--transition); }

/* ИСПРАВЛЕНИЕ ДЛЯ ВСЕХ ПОЛЕЙ (ТЕКСТОВЫЕ И ФАЙЛ) */
input[type="text"], input[type="tel"], input[type="email"], textarea, select {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    border: 1px solid #ddd !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
    display: block;
}

input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px dashed var(--main-orange) !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: #fff !important;
    cursor: pointer;
}

/* --- HEADER --- */
/* --- ФИКС ТОНКОЙ ШАПКИ ДЛЯ ПК --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    
    /* Убираем все высоты и ставим минимальный паддинг */
    height: auto !important;
    min-height: 0 !important;
    padding: 15px 0 !important; /* Управляй толщиной здесь (8px - золотая середина) */
    
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}

/* Очищаем контейнер внутри шапки */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: auto !important; /* Убираем фиксированную высоту контейнера */
}

/* Убираем отступы у логотипа */
.logo-wrapper, .logo-wrapper a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
}

/* Убираем отступы у навигации */
.nav-menu ul {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    list-style: none;
}

.nav-menu li {
    margin: 0 15px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Принудительно уменьшаем высоту кнопки "Войти" */
.button-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.btn-3d {
    margin: 0 !important;
    padding: 6px 16px !important; /* Уменьшили вертикальный паддинг кнопки */
    line-height: 1 !important;
    font-size: 14px !important;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 80px;
}

.logo-wrapper { 
    font-size: 1.5rem; 
    font-weight: 800; 
    color: var(--main-orange); 
    display: flex; 
    align-items: center;
    flex-shrink: 0;
}
.logo-wrapper i { margin-right: 10px; }

.nav-menu {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-list li a {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-brown);
    white-space: nowrap;
}

.nav-list li a:hover {
    color: var(--main-orange);
}

.auth-btns {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.btn-login {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-brown);
}

.btn-reg, .btn-account {
    background: var(--main-orange);
    color: var(--white) !important;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(255,140,66,0.2);
}

.btn-account {
    background: var(--bg-light);
    color: var(--text-brown) !important;
    border: 1px solid rgba(109,76,65,0.1);
    box-shadow: none;
}

/* --- SECTION GENERAL --- */
.section-padding { padding: 100px 10%; text-align: center; }
.section-title h2 { font-size: 2.8rem; margin-bottom: 20px; color: var(--text-brown); }
.section-title p { max-width: 700px; margin: 0 auto 60px; font-size: 1.2rem; color: var(--text-light); }

/* --- Адаптация сетки преимуществ --- */


@media screen and (max-width: 600px) {
    
    /* 1. Секция Преимущества (benefits-grid) */
    .benefits-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 10px !important;
    }

    .benefit-card {
        padding: 10px 5px !important;
        min-height: 160px !important; /* Выравнивает все карточки по высоте */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: auto !important;
    }

    .benefit-visual {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 8px !important;
    }

    .benefit-card h4 {
        font-size: 13px !important;
        margin-bottom: 5px !important;
        line-height: 1.1;
    }

    .benefit-card p {
        font-size: 10px !important;
        line-height: 1.2 !important;
        display: -webkit-box;
        -webkit-line-clamp: 4; /* Не дает тексту "разрывать" блок */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* 2. Секция Как работает (grid-3) */
    .grid-3 {
        display: grid !important;
        /* Создаем 2 колонки */
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important;
        padding: 0 10px !important;
        /* Центрируем сами колонки, если будет свободное место */
        justify-content: center !important; 
    }

    .how-card {
        padding: 15px 10px !important;
        width: 100% !important; /* Занимает всю свою колонку */
        max-width: 100% !important;
    }

    /* Магия для третьей карточки: ставим её по центру под первыми двумя */
    .how-card:nth-child(3) {
        /* Размещаем её во второй строке, но заставляем занять 
           пространство "между" колонками или центрируем через margin */
        grid-column: 1 / span 2 !important; 
        width: calc(50% - 6px) !important; /* Ровно половина ширины минус половина gap */
        margin: 0 auto !important; /* Центрирует её */
    }

    /* Уменьшаем внутренние элементы для компактности */
    .how-visual {
        width: 45px !important;
        height: 45px !important;
        margin: 0 auto 10px !important;
    }

    .step-num {
        font-size: 18px !important;
        margin-bottom: 3px !important;
    }

    .how-card h3 {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    .how-card p {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
/* 3. Секция Отзывы (reviews-grid) */
    .reviews-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }

    .review-card {
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Прижимает автора к низу */
        min-height: 220px !important; /* Выравниваем высоту для красоты */
    }

    /* Третий отзыв — такой же ширины, но по центру */
    .review-card:nth-child(3) {
        grid-column: 1 / span 2 !important;
        width: calc(50% - 5px) !important;
        margin: 0 auto !important;
    }

    .stars {
        font-size: 10px !important; /* Чуть меньше звезды */
        margin-bottom: 5px !important;
    }

    .review-text {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        font-style: italic;
    }

    .review-author {
        margin-top: auto !important;
        border-top: 1px solid rgba(0,0,0,0.05);
        padding-top: 8px !important;
    }

    .author-info strong {
        font-size: 12px !important;
        display: block !important;
    }

    .author-info span {
        font-size: 10px !important;
        opacity: 0.7;
    }
}
    /* --- Адаптация страницы HOW (Сетка 2х2) --- */
@media screen and (max-width: 600px) {
    .steps-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
        align-items: stretch !important;
    }

    .step-row {
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        padding: 8px !important; 
        border-radius: 15px !important;
        box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important;
        margin: 0 !important;
    }

    /* ФОТО: Увеличиваем высоту и убираем нижний отступ до минимума */
    .step-img {
        height: 120px !important; /* Увеличил, чтобы фото выглядело лучше */
        width: 100% !important;
        border-radius: 10px !important;
        margin: 0 0 6px 0 !important; /* Минимальный зазор под фото */
        order: -2 !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* БЕЙДЖ: Вплотную к фото */
    .s-badge {
        order: -1 !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        background: #FF8C42 !important;
        color: #fff !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        margin-bottom: 4px !important; /* Прижимаем заголовок */
        align-self: flex-start !important;
        display: inline-block !important;
    }

    /* ИНФО И ЗАГОЛОВОК */
    .step-info {
        display: block !important;
        padding: 0 !important;
    }

    .step-info h2 {
        font-size: 13px !important;
        line-height: 1.1 !important;
        margin: 0 0 6px 0 !important;
        /* Резервируем место под 2 строки, чтобы ТЕКСТ ниже был на одном уровне */
        min-height: 28px !important; 
        color: #222 !important;
    }

    /* ТЕКСТ ОПИСАНИЯ: Начинается симметрично */
    .step-info p {
        font-size: 10px !important;
        line-height: 1.3 !important;
        color: #555 !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Удаляем всё лишнее */
    .step-point, .curvy-line, .step-info br {
        display: none !important;
    }
}
/* --- 1. ОБНОВЛЕННЫЙ HERO (С ЭФФЕКТАМИ) --- */
.hero {
    height: 100vh;
    /* Твой оригинальный фон */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                url('img/hero-dog.jpg?v=2') center/cover;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: white; 
    text-align: center; 
    padding: 0 5%;
    position: relative; /* Обязательно для плавающих элементов */
    overflow: hidden;   /* Чтобы иконки не вылетали за экран */
}

/* --- ПУНКТ 5: ЛЕВИТИРУЮЩИЕ ИКОНКИ --- */
.floating-objects {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

.f-obj {
    position: absolute;
    color: rgba(255, 255, 255, 0.3); /* Белые полупрозрачные, чтобы читались на фото */
    font-size: 28px;
    animation: floatAnim 8s infinite ease-in-out;
}

/* Расставляем иконки по краям, чтобы не закрывать морду собаки */
.f-paw-1 { top: 20%; left: 8%; animation-delay: 0s; }
.f-bone  { top: 15%; right: 10%; animation-delay: 1s; font-size: 35px; }
.f-loc   { bottom: 25%; left: 12%; animation-delay: 2s; color: var(--pop-accent); opacity: 0.6; }
.f-heart { bottom: 20%; right: 15%; animation-delay: 3s; }

@keyframes floatAnim {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(15deg); }
}

/* --- ПУНКТ 2: NFC ИМПУЛЬС (ЗА ТЕКСТОМ) --- */
.nfc-signal-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 200px; height: 200px;
    z-index: 0;
}
.nfc-ring {
    position: absolute;
    width: 100%; height: 100%;
    border: 2px solid var(--pop-accent);
    border-radius: 50%;
    opacity: 0;
    animation: nfcWave 4s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32);
}
.delay-1 { animation-delay: 1.3s; }
.delay-2 { animation-delay: 2.6s; }

@keyframes nfcWave {
    0% { transform: scale(0.5); opacity: 0; }
    50% { opacity: 0.4; }
    100% { transform: scale(3); opacity: 0; }
}

/* --- ПУНКТ 4: КНОПКА С МЯГКИМ СВЕЧЕНИЕМ --- */
.btn-reg {
    position: relative;
    z-index: 10;
    transition: all 0.4s ease !important;
    
    /* Основное статичное свечение, чтобы кнопка сразу выделялась */
    box-shadow: 0 0 15px rgba(255, 140, 66, 0.4);
    
    /* Запуск анимации свечения и дыхания */
    animation: btnGlowBreath 4s infinite ease-in-out;
    
    /* Немного сгладим края для эффекта неона */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes btnGlowBreath {
    0%, 100% { 
        transform: scale(1);
        /* Мягкая тень в покое */
        box-shadow: 0 0 20px rgba(255, 140, 66, 0.4), 
                    0 0 40px rgba(255, 140, 66, 0.1);
    }
    50% { 
        transform: scale(1.05);
        /* Интенсивное свечение в пике "вдоха" */
        box-shadow: 0 0 35px rgba(255, 140, 66, 0.7), 
                    0 0 60px rgba(255, 140, 66, 0.3),
                    inset 0 0 15px rgba(255, 255, 255, 0.3); /* Внутренний блик */
    }
}
/* --- КНОПКА: СВЕЧЕНИЕ + ЖИВОЕ ПОДЕРГИВАНИЕ --- */
.btn-reg {
    position: relative;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    
    /* Совмещаем две анимации: свечение и подергивание */
    /* wiggle срабатывает раз в 5 секунд, breath идет постоянно */
    animation: 
        btnGlowBreath 4s infinite ease-in-out,
        btnWiggle 5s infinite ease-in-out;
    
    box-shadow: 0 0 15px rgba(255, 140, 66, 0.4);
    display: inline-block;
}

/* Анимация "Дыхания" и Свечения */
@keyframes btnGlowBreath {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 140, 66, 0.4);
    }
    50% { 
        transform: scale(1.03);
        box-shadow: 0 0 35px rgba(255, 140, 66, 0.7), 0 0 50px rgba(255, 140, 66, 0.2);
    }
}

/* Анимация "Подергивания" (Wiggle) */
@keyframes btnWiggle {
    0%, 85% { transform: rotate(0deg); } /* 85% времени кнопка спокойна */
    87% { transform: rotate(3deg) scale(1.05); }
    89% { transform: rotate(-3deg) scale(1.05); }
    91% { transform: rotate(2deg) scale(1.05); }
    93% { transform: rotate(-2deg) scale(1.05); }
    95% { transform: rotate(0deg) scale(1.05); }
    100% { transform: rotate(0deg); }
}

/* Эффект при наведении */
.btn-reg:hover {
    animation-play-state: paused; /* Замирает при наведении */
    background-color: #ff9d5c; /* Чуть светлее при наведении */
    box-shadow: 0 0 40px rgba(255, 140, 66, 0.9);
    transform: scale(1.1) translateY(-3px) !important;
}

/* --- 2. HOW IT WORKS --- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-top: 50px; }
.how-card {
    background: var(--white);
    padding: 50px;
    border-radius: 40px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.how-card:hover { transform: translateY(-10px); }
.how-card i { font-size: 4rem; color: var(--main-orange); margin-bottom: 30px; display: block; }
.how-card .step-num {
    position: absolute; top: 20px; right: 20px; font-size: 4rem;
    font-weight: 800; color: rgba(255,140,66,0.1); line-height: 1;
}

/* --- 3. BENEFITS (FULL LIST) --- */
.benefits-section { background: var(--white); border-radius: 60px 60px 0 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }
.benefit-item { display: flex; align-items: flex-start; gap: 20px; text-align: left; background: var(--bg-light); padding: 30px; border-radius: 20px; }
.benefit-item i { font-size: 2rem; color: var(--main-orange); margin-top: 5px; }
.benefit-item h4 { margin: 0 0 5px; font-size: 1.2rem; }
.benefit-item p { margin: 0; color: var(--text-light); font-size: 0.95rem; }

/* --- 4. PET PROFILE DEMO --- */
.pet-profile-demo { max-width: 600px; margin: 0 auto; background: white; border-radius: 50px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.1); text-align: left; }
.pet-demo-photo { 
    height: 400px; 
    background: url('img/baron.jpg?v=2') center/cover;
    position: relative; 
}
.pet-demo-info { padding: 50px; }
.pet-demo-info h3 { font-size: 2.2rem; color: var(--text-brown); margin: 0 0 10px; }
.pet-tag-breed { background: var(--bg-light); padding: 6px 18px; border-radius: 20px; font-weight: 700; color: var(--main-orange); font-size: 0.9rem; }

.pet-meta { margin-top: 30px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 20px; display: grid; gap: 15px; }
.meta-row { display: flex; gap: 10px; align-items: center; font-size: 1.1rem; }
.meta-row i { color: var(--main-orange); width: 25px; text-align: center; }

.btn-call { background: var(--green-call); color: white; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 20px; border-radius: 15px; margin-top: 40px; font-size: 1.3rem; font-weight: 700; }
.btn-gps { background: var(--main-orange); color: white; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 15px; border-radius: 15px; margin-top: 15px; font-weight: 600; opacity: 0.9; }

/* --- FOOTER --- */
.site-footer { background: var(--text-brown); color: rgba(255,255,255,0.8); padding: 80px 10% 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 50px; }
.footer-col h4 { color: white; margin-bottom: 25px; font-size: 1.3rem; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a:hover { color: var(--main-orange); padding-left: 5px; }

.footer-bottom { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.05); }

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .section-title h2 { font-size: 2.2rem; }
    .site-header { padding: 10px 5%; }
    .nav-menu { display: none; }
}

/* --- АДАПТИВНОСТЬ КАРТИНОК И БЛОКОВ --- */

/* 1. Главный экран (Hero) */
.hero {
    max-width: 1200px;
    height: 450px !important; 
    margin: 110px auto 40px !important; 
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url('img/hero-dog.jpg?v=2') center center / cover no-repeat !important;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: white; 
    text-align: center;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.hero-content {
    max-width: 700px;
    padding: 0 30px;
}

.hero-content h1 { 
    font-size: 2.5rem !important; 
    margin-bottom: 15px; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ */
@media (max-width: 1240px) {
    .hero {
        margin-left: 15px !important;
        margin-right: 15px !important;
        width: calc(100% - 30px) !important; /* Четкий расчет ширины с отступами */
    }
}

@media (max-width: 768px) {
    .hero {
        height: 320px !important;
        margin-top: 90px !important;
        border-radius: 30px;
        width: calc(100% - 30px) !important;
    }
    .hero-content h1 { font-size: 1.8rem !important; }
}

/* 2. Фото питомца в демо-карточке */
.pet-demo-photo {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid var(--bg-light);
}

@media (max-width: 768px) {
    .pet-demo-photo {
        height: 250px;
    }
}

.pet-profile-demo {
    max-width: 550px;
    margin: 0 auto;
    width: calc(100% - 30px); /* Чтобы карточка тоже не вылетала */
}

/* --- 3D КНОПКА АВТОРИЗАЦИИ --- */
.btn-3d {
    display: inline-block;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    color: white !important;
    background-color: var(--main-orange);
    border-radius: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    box-shadow: 0 5px 0 #d35400; 
    transition: all 0.1s ease-in-out;
    position: relative;
    top: 0;
    cursor: pointer;
}

.btn-3d:hover {
    background-color: #ff9f5a;
    box-shadow: 0 4px 0 #d35400;
    top: 2px;
}

.btn-3d:active {
    box-shadow: 0 0 0 #d35400;
    top: 5px;
}


/* --- Секция Преимуществ LapkaHelp --- */
.benefits-section {
    background: #fdfaf7; 
    padding: 80px 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    color: #2D241E;
    font-weight: 800;
    margin-bottom: 15px;
}

.section-title p {
    color: #6D5B52;
    font-size: 1.1rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.benefit-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 30px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 140, 66, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    user-select: none; 
}

.benefit-card:hover {
    transform: translateY(-10px);
    /* Мягкая оранжевая тень всей карточки */
    box-shadow: 0 20px 40px rgba(255, 140, 66, 0.15);
    border-color: #FF8C42;
}

/* 1. Настройки визуального блока иконок с НЕОНОМ */
.benefit-visual {
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 25px auto !important;
    display: block !important;
    
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none;
    -webkit-user-drag: none;
    
    /* Добавляем круг-подложку для свечения */
    background-color: #fff;
    border-radius: 50%;
    
    /* БАЗОВЫЙ НЕОН (мягкий) */
    box-shadow: 0 0 20px rgba(255, 140, 66, 0.2);
    border: 1px solid rgba(255, 140, 66, 0.1);
    
    transition: all 0.5s ease;
}

/* Эффект свечения при наведении */
.benefit-card:hover .benefit-visual {
    transform: scale(1.1) rotate(3deg);
    /* ЯРКИЙ НЕОН */
    box-shadow: 0 0 35px rgba(255, 140, 66, 0.5), 
                0 0 10px rgba(255, 140, 66, 0.3);
}

/* Используем полный путь от корня сайта, чтобы избежать проблем с папками */
.bv-nfc { background-image: url('/wp-content/themes/lapkahelp/img/icon-nfc.png') !important; }
.bv-battery { background-image: url('/wp-content/themes/lapkahelp/img/icon-battery.png') !important; }
.bv-gps { background-image: url('/wp-content/themes/lapkahelp/img/icon-gps.png') !important; }
.bv-shield { background-image: url('/wp-content/themes/lapkahelp/img/icon-shield.png') !important; }
.bv-eco { background-image: url('/wp-content/themes/lapkahelp/img/icon-eco.png') !important; }
.bv-paw { background-image: url('/wp-content/themes/lapkahelp/img/icon-paw.png') !important; }

.benefit-card h4 {
    font-size: 1.3rem;
    color: #2D241E;
    margin-bottom: 12px;
    font-weight: 700;
}

.benefit-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6D5B52;
    margin: 0;
}

@media (max-width: 768px) {
    .section-title h2 { font-size: 2rem; }
    .benefit-visual { width: 100px !important; height: 100px !important; }
}

/* Декоративная лапка для Шагов */
.how-card {
    position: relative;
    overflow: hidden;
}

.how-card::before {
    content: '🐾';
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 90px;
    opacity: 0.03;
    transform: rotate(20deg);
    transition: all 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.how-card:hover::before {
    opacity: 0.08;
    transform: rotate(5deg) scale(1.1);
    color: #FF8C42;
}

/* --- Секция "Как это работает" LapkaHelp --- */
.section-padding {
    padding: 100px 20px;
    background: #ffffff;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.how-card {
    position: relative;
    padding: 40px 30px;
    background: #fdfaf7;
    border-radius: 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.how-card:hover {
    background: #ffffff;
    border-color: #FF8C42;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 140, 66, 0.1);
}

/* Номер шага */
.step-num {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 140, 66, 0.1); /* Очень бледный номер на фоне */
    line-height: 1;
}

/* Стили для иконок (аналогично предыдущему блоку) */
.how-visual {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Пути к иконкам шагов (Абсолютные для WP) */
.hw-step1 { background-image: url('/wp-content/themes/lapkahelp/img/step-tag.png') !important; }
.hw-step2 { background-image: url('/wp-content/themes/lapkahelp/img/step-mobile.png') !important; }
.hw-step3 { background-image: url('/wp-content/themes/lapkahelp/img/step-profile.png') !important; }

.how-card h3 {
    font-size: 1.4rem;
    color: #2D241E;
    margin-bottom: 15px;
    font-weight: 700;
}

.how-card p {
    color: #6D5B52;
    line-height: 1.6;
    font-size: 1rem;
}
/* Декоративная лапка для Бенефитов (Справа Внизу) */
.benefit-card {
    position: relative;
    overflow: hidden;
}

.benefit-card::after {
    content: '🐾';
    position: absolute;
    bottom: -15px;
    right: -15px;
    font-size: 80px;
    opacity: 0.03; /* Почти прозрачная в покое */
    transform: rotate(-15deg);
    transition: all 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

/* Анимация при наведении */
.benefit-card:hover::after {
    opacity: 0.08; /* Становится ярче */
    transform: rotate(0deg) scale(1.1); /* Выравнивается и увеличивается */
    color: #FF8C42; /* Приобретает оранжевый оттенок */
}

/* --- Исправленный Компактный Footer LapkaHelp (со всеми эффектами) --- */
.site-footer {
    background: #1a1614;
    color: #ffffff;
    padding: 25px 20px 15px; /* Компактно, но с воздухом */
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

/* Наша призрачная лапка */
.footer-bg-paws::before {
    content: '🐾';
    position: absolute;
    top: -5px;
    left: -10px;
    font-size: 80px; 
    opacity: 0.03;
    transform: rotate(-20deg);
    pointer-events: none;
    color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Возвращаем правильный цвет заголовков и НЕОН */
.footer-col h4 {
    color: #FF8C42; 
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-shadow: 0 0 15px rgba(255, 140, 66, 0.4); /* Вернули свечение */
}

/* Белый цвет для части логотипа */
.footer-logo-text span {
    color: #ffffff !important;
    text-shadow: none;
}

.footer-col p {
    color: #b5ada8;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Навигация: ПЛОТНО, но с сохранением стиля */
.footer-col ul li {
    margin-bottom: 4px; /* Уменьшили расстояние между пунктами */
}

.footer-col ul li a {
    color: #b5ada8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-col ul li a:hover {
    color: #FF8C42;
    transform: translateX(5px); /* Вернули анимацию сдвига */
}

/* Контакты */
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    color: #b5ada8;
    font-size: 0.9rem;
}

.footer-contact-item i {
    color: #FF8C42; /* Иконки снова оранжевые */
}

/* ВОЗВРАЩАЕМ АНИМАЦИЮ СОЦСЕТЕЙ */
.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.footer-socials a {
    color: #ffffff;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Плавная анимация */
}

.footer-socials a:hover {
    color: #FF8C42;
    background: rgba(255, 140, 66, 0.15);
    transform: translateY(-5px); /* Вернули прыжок вверх */
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.4); /* Вернули неон при наведении */
}

/* Нижняя панель */
.footer-bottom {
    max-width: 1200px;
    margin: 20px auto 0;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    font-size: 0.75rem;
    color: #6d5b52;
}

@media (max-width: 768px) {
    .footer-grid { text-align: center; gap: 20px; }
    .footer-contact-item, .footer-socials { justify-content: center; }
}
/*how*/
/* --- HOW PAGE: CLEAN, COMPACT & FIXED --- */
:root {
    --img-step-1: url('/wp-content/themes/lapkahelp/img/how1.png');
    --img-step-2: url('/wp-content/themes/lapkahelp/img/how2.png');
    --img-step-3: url('/wp-content/themes/lapkahelp/img/how3.png');
    --img-step-4: url('/wp-content/themes/lapkahelp/img/how4.png');
    --main-orange: #FF8C42;
    --text-dark: #4A3B33;
    --soft-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.how-page-wrapper {
    padding-top: 60px;
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    max-width: 1100px;
    margin: 0 auto;
}

/* Шапка */
.how-header {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), var(--img-step-1);
    background-size: cover;
    background-position: center;
    padding: 80px 20px;
    text-align: center;
    border-radius: 30px;
    margin: 0 15px 60px;
    box-shadow: var(--soft-shadow);
    color: #fff;
}
.how-header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 15px; border: none !important; }

/* Линия для ПК */
.steps-container { position: relative; padding: 20px 15px; }

@media (min-width: 901px) {
    .curvy-line {
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: 2px; height: 85%;
        border-left: 2px dashed var(--main-orange);
        opacity: 0.2;
    }
    .step-point {
        position: absolute;
        left: 50%; transform: translateX(-50%);
        background: #fff; color: var(--main-orange);
        padding: 5px; border-radius: 50%;
        z-index: 5; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
}

/* Ряды шагов */
.step-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}
.step-row.rev { flex-direction: row-reverse; }

.step-info { flex: 1; }
.step-row:not(.rev) .step-info { text-align: right; }

.step-info h2 { font-size: 2rem; margin-bottom: 15px; font-weight: 700; }
.step-info p { font-size: 1.1rem; line-height: 1.6; color: #666; }

/* КАРТИНКИ */
.step-img {
    flex: 1;
    height: 380px;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
    border: 6px solid #fff;
    box-shadow: var(--soft-shadow);
    transition: transform 0.4s ease;
}
.step-img:hover { transform: translateY(-10px); }

.img-1 { background-image: var(--img-step-1); }
.img-2 { background-image: var(--img-step-2); }
.img-3 { background-image: var(--img-step-3); }
.img-4 { background-image: var(--img-step-4); }

.s-badge {
    background: var(--main-orange);
    color: #fff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 15px;
    display: inline-block;
}

/* Финал */
.how-footer {
    text-align: center;
    padding: 20px 20px 80px;
}
/* ОРАНЖЕВАЯ ЛАПКА ТУТ */
.how-footer .footer-paw {
    color: var(--main-orange) !important;
    font-size: 30px;
    margin-bottom: 15px;
}
.how-footer h2 { font-size: 2.5rem; font-weight: 900; border: none !important; margin-bottom: 10px; }

/* --- МОБИЛЬНАЯ ВЕРСИЯ (КОМПАКТНАЯ) --- */
@media (max-width: 900px) {
    .curvy-line, .step-point { display: none !important; }
    
    .step-row, .step-row.rev {
        flex-direction: column !important;
        text-align: center !important;
        margin-bottom: 35px; /* Уменьшили расстояние между пунктами */
        gap: 15px; /* Уменьшили зазор между текстом и картинкой */
    }

    .step-info { text-align: center !important; }
    .step-info h2 { font-size: 1.6rem; margin-bottom: 8px; }
    .step-info p { font-size: 1rem; }
    
    .step-img {
        width: 100%;
        height: 220px; /* Сделали картинки чуть меньше для компактности */
        min-height: 220px;
        display: block !important;
        border: 4px solid #fff;
    }

    .how-header { padding: 50px 15px; margin-bottom: 30px; }
    .how-header h1 { font-size: 1.8rem; }
    .how-footer { padding-top: 0; }
    .how-footer h2 { font-size: 2rem; }
}

 /*магаз*/

/* ==========================================================================
   1. ОБЩИЙ СТИЛЬ МОДУЛЕЙ
   ========================================================================== */
.woocommerce-shop .site-main, 
.woocommerce-cart .entry-content, 
.woocommerce-checkout .entry-content,
.post-type-archive-product .site-main,
.wp-block-woocommerce-cart, 
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wc-block-checkout,
.single-product div.product {
    max-width: 1000px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    border-radius: 35px !important;
    padding: 35px !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.05) !important;
    border: 1px solid #f0f0f0 !important;
}

/* Скрываем мусор внизу сайта */
.woocommerce-page aside, .woocommerce-page h2:has(+ ul), .woocommerce-page .site-main > ul:not(.products) {
    display: none !important;
}

/* ==========================================================================
   2 ФИНАЛЬНАЯ СЕТКА МАГАЗИНА (БЕЗ ПУСТОТ И С ЦЕНТРИРОВАНИЕМ)
   ========================================================================== */

/* 1. Сбрасываем лишние элементы WooCommerce, которые создают пустые места */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

.woocommerce ul.products {
    display: grid !important;
    /* Устанавливаем 5 колонок по 170px */
    grid-template-columns: repeat(5, 170px) !important;
    gap: 20px !important;
    justify-content: center !important; /* Центрируем всю сетку на странице */
    margin: 40px auto !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 2. Сама карточка товара */
.woocommerce ul.products li.product {
    width: 170px !important;
    background: #fdfaf7 !important;
    border-radius: 25px !important;
    padding: 15px !important;
    margin: 0 !important; /* Обнуляем маржины, чтобы не было смещений */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Центрирует всё содержимое по горизонтали */
    float: none !important; /* Убираем стандартный float */
}

/* 3. Центрируем фотографию */
.woocommerce ul.products li.product img {
    width: 110px !important;
    height: 110px !important;
    object-fit: contain !important;
    margin: 0 auto 15px !important; /* auto слева и справа выравнивает по центру */
    display: block !important;
    border-radius: 18px !important;
}

/* 4. Заголовок */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    min-height: 3.6em !important; 
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5. Цена */
.woocommerce ul.products li.product .price {
    text-align: center !important;
    width: 100%;
    margin-bottom: 15px !important;
    color: #ff8c42 !important;
    display: block !important;
}

/* 6. Кнопка (всегда снизу и ровно) */
.woocommerce ul.products li.product .button {
    margin: auto 0 0 0 !important; /* auto сверху прижимает к низу */
    width: 100% !important;
    text-align: center !important;
    background-color: #ff8c42 !important;
    border-radius: 12px !important;
}

/* 7. Адаптивность для мобильных (чтобы не ехало) */
@media (max-width: 950px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fit, 170px) !important;
        gap: 15px !important;
    }
}
/* Скрываем счетчик результатов и сортировку только для десктопов */
@media (min-width: 769px) {
    .woocommerce-result-count, 
    .woocommerce-ordering {
        display: none !important;
    }
}
/* ==========================================================================
   3. ОФОРМЛЕНИЕ ЗАКАЗА (ТОЛЬКО КАРТИНКА, ИМЯ, ЦЕНА + СКРЫТИЕ СТРАНЫ)
   ========================================================================= */

/* СКРЫВАЕМ ВЫБОР СТРАНЫ */
.wc-block-components-address-form__country,
.wc-block-components-country-input,
.wc-block-checkout__address-container [field="country"],
.wc-block-components-combobox:has(input#components-checkout-billing-country),
.wc-block-components-combobox:has(input#components-checkout-shipping-country) {
    display: none !important;
}

/* Поля ввода */
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-address-form input {
    padding-top: 25px !important;
    padding-bottom: 10px !important;
    background: #fdfaf7 !important;
    border-radius: 12px !important;
    border: 1px solid #eee !important;
}

.wc-block-components-text-input label,
.wc-block-components-combobox label {
    transform: translateY(-4px) scale(0.75) !important;
    color: #f28b66 !important;
    font-weight: 600 !important;
}

/* УБИРАЕМ ВСЁ ЛИШНЕЕ ИЗ ДЕТАЛЕЙ ЗАКАЗА */
.wc-block-components-product-summary__description, 
.wc-block-components-product-metadata,
.wc-block-components-product-details__description,
.wc-block-components-order-summary-item__description {
    display: none !important; 
}

/* Исправляем Название: запрещаем перенос по буквам */
.wc-block-components-product-name {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    display: block !important;
    word-break: normal !important; 
    overflow-wrap: break-word !important;
}

/* Сайдбар */
.wc-block-checkout__sidebar {
    background: #fdfaf7 !important;
    border-radius: 25px !important;
    padding: 20px !important;
}

/* Собираем картинку и текст компактно */
.wc-block-components-order-summary-item {
    padding: 10px 0 !important;
    align-items: center !important;
}
.wc-block-components-product-image {
    width: 50px !important;
    margin-right: 15px !important;
}

/* ==========================================================================
   ФИНАЛЬНЫЙ ТЮНИНГ СТРАНИЦЫ ОПЛАТЫ (ПК)
   ========================================================================== */

@media (min-width: 992px) {
    /* Центрируем основной заголовок */
    .woocommerce-order-pay h1 {
        text-align: center !important;
        margin-top: 50px !important;
        margin-bottom: 30px !important;
    }

    /* Собираем детали заказа (Номер, Дата, Итого) в центральный блок */
    ul.order_details {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 40px !important;
        background: #fff !important;
        padding: 30px !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
        max-width: 900px !important;
        margin: 0 auto 40px !important; /* Центрирует сам блок на странице */
        border: 1px solid #eee5dd !important;
        list-style: none !important;
    }

    /* Выравниваем текст внутри деталей */
    ul.order_details li {
        text-align: center !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Делаем саму кнопку и выбор метода оплаты тоже по центру */
    #payment {
        max-width: 600px !important;
        margin: 0 auto !important;
        background: transparent !important;
        border: none !important;
    }

    .woocommerce-pay-buttons {
        text-align: center !important;
        margin-bottom: 100px !important; /* Чтобы футер не прилипал */
    }
}

/* Дополнительно: фиксим оформление "Способ оплаты" на фоне */
.method strong {
    display: block;
    color: #2d241e;
    font-size: 1.1rem;
}

/* Кнопка оформления заказа */
.checkout-button {
    background: #ff8c42 !important;
    padding: 20px !important;
    border-radius: 15px !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(255, 140, 66, 0.3) !important;
    display: block;
    text-align: center;
}

.checkout-button:hover {
    background: #2d241e !important;
    transform: translateY(-3px);
}
/* ==========================================================================
   СТИЛИЗАЦИЯ ПОХОЖИХ ТОВАРОВ (4 В РЯД НА ПК)
   ========================================================================== */

/* Общий контейнер блока */
.single-product .related.products {
    margin-top: 60px !important;
    padding-top: 40px !important;
    border-top: 1px solid #fdfaf7 !important;
    max-width: 1200px !important; /* Немного расширим общий контейнер для 4-х штук */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Заголовок */
.single-product .related.products h2 {
    text-align: center !important;
    font-size: 1.5rem !important;
    color: #2d241e !important;
    font-weight: 800 !important;
    margin-bottom: 40px !important;
}

/* Сетка товаров */
.single-product .related.products ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Карточка товара (Изменено на 4 в ряд для ПК) */
.single-product .related.products ul.products li.product {
    /* Формула для 4-х в ряд с учетом gap 20px */
    flex: 0 0 calc(25% - 15px) !important; 
    min-width: 200px !important; /* Чтобы не сжимались слишком сильно */
    background-color: #fff !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    position: relative;
    border: none !important;
    box-sizing: border-box !important;
}

/* Эффект наведения */
.single-product .related.products ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(255, 140, 66, 0.1) !important;
}

/* Ссылка, Картинка, Название, Цена и Кнопка — оставляем твой стиль без изменений */
.single-product .related.products ul.products li.product .woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    width: 100% !important;
}

.single-product .related.products ul.products li.product img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    border-radius: 15px !important;
    margin-bottom: 15px !important;
}

.single-product .related.products ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 0.9rem !important;
    color: #2d241e !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
    height: 3.9em !important; 
    overflow: hidden !important;
}

.single-product .related.products ul.products li.product .price {
    font-size: 1.2rem !important;
    color: #ff8c42 !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

.single-product .related.products ul.products li.product .button.add_to_cart_button {
    background: #ff8c42 !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    width: 100% !important;
    text-align: center !important;
    margin-top: auto !important;
}

.single-product .related.products ul.products li.product .button.add_to_cart_button:hover {
    background: #2d241e !important;
}

/* Адаптив: на планшетах (3 в ряд) */
@media (max-width: 1024px) and (min-width: 769px) {
    .single-product .related.products ul.products li.product {
        flex: 0 0 calc(33.333% - 14px) !important;
    }
}

/* Твой адаптив для мобилок (2 карточки в ряд) */
@media (max-width: 768px) {
    .single-product .related.products ul.products {
        gap: 15px !important;
    }
    .single-product .related.products ul.products li.product {
        flex: 0 0 calc(50% - 10px) !important;
        padding: 15px !important;
    }
    .single-product .related.products ul.products li.product img {
        width: 80px !important;
        height: 80px !important;
    }
    .single-product .related.products ul.products li.product h2.woocommerce-loop-product__title {
        font-size: 0.8rem !important;
    }
}
/* ==========================================================================
   4. АНИМАЦИЯ И СТИЛЬ КНОПОК
   ========================================================================== */
/* Базовый стиль для ВСЕХ кнопок (магазин, корзина, карточка) */
.button, 
.checkout-button, 
#place_order, 
.wc-block-cart__submit-button, 
.wc-block-components-checkout-button,
.wc-block-checkout__actions .wc-block-components-button,
.single_add_to_cart_button,
.wc-block-components-button {
    background-color: #f28b66 !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    
    /* Идеальная центровка текста */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important; 
    
    /* Размер кнопки (сделали меньше) */
    padding: 8px 20px !important; 
    font-size: 0.8rem !important;
    min-height: 40px !important;
    
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 15px rgba(242, 139, 102, 0.2) !important;
    cursor: pointer !important;
}

/* Убираем любые псевдоэлементы, которые косят текст */
.button::after, .button::before, 
.wc-block-components-button::after {
    display: none !important;
    content: none !important;
}

/* Эффект при наведении */
.button:hover, .wc-block-components-button:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
}

/* --- АНИМАЦИЯ ПУЛЬСАЦИИ --- */
@keyframes buttonPulseAction {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 139, 102, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(242, 139, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 139, 102, 0); }
}

/* Применяем пульсацию именно к кнопке "ОФОРМИТЬ ЗАКАЗ" */
.wc-block-checkout__actions .wc-block-components-button,
.wc-block-components-checkout-button,
#place_order {
    animation: buttonPulseAction 2s infinite ease-in-out !important;
}
/* ==========================================================================
   ОБНОВЛЕННАЯ КАРТОЧКА ТОВАРА 4 (LapkaHelp)
   ========================================================================== */

/* 1. Выравниваем сетку (Фото слева, инфо справа) */
.single-product .product {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* 2. Блок изображения */
.single-product .woocommerce-product-gallery {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

.single-product .woocommerce-product-gallery img {
    border-radius: 30px !important; /* Делаем лапку мягче */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
}

/* 3. Блок информации (справа) */
.single-product .summary {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Заголовок */
.single-product .product_title {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #2d241e !important;
    margin-bottom: 10px !important;
    line-height: 1.2;
}

/* Цена */
.single-product .price {
    font-size: 2rem !important;
    color: #ff8c42 !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
}

/* Старая цена (если есть скидка) */
.single-product .price del {
    font-size: 1.2rem;
    opacity: 0.5;
    margin-right: 10px;
}

/* 4. Кнопка и количество */
.single-product form.cart {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

/* Поле количества */
.quantity input {
    height: 54px !important;
    border-radius: 12px !important;
    border: 2px solid #eee5dd !important;
    font-weight: 700 !important;
    padding: 0 10px !important;
}

/* Кнопка "В корзину" — делаем её как в футере */
.single_add_to_cart_button {
    background: #ff8c42 !important;
    height: 54px;
    padding: 0 40px !important;
    border-radius: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 14px !important;
    box-shadow: 0 10px 20px rgba(255, 140, 66, 0.2) !important;
}

.single_add_to_cart_button:hover {
    background: #2d241e !important;
    transform: translateY(-2px);
}
/* Скрываем ненужные ярлыки "Распродажа", если они мешают */
.onsale {
    background-color: #ff8c42 !important;
    border-radius: 50px !important;
    padding: 5px 15px !important;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .single-product .product {
        flex-direction: column;
        text-align: center;
    }
    .single-product form.cart {
        justify-content: center;
    }
    .single-product .woocommerce-product-gallery {
        margin: 0 auto;
    }
}
/* ==========================================================================
   6. ФИКСЫ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (ТОТАЛЬНАЯ ЗАЧИСТКА ДУБЛЕЙ)
   ========================================================================== */
@media (max-width: 768px) {
    /* Скрываем заголовок, рамки и любые остатки сводки в основной части */
    .wc-block-checkout__main .wc-block-checkout__order-summary,
    .wc-block-checkout__main .wc-block-components-order-summary,
    .wc-block-checkout__main .wc-block-checkout__order-summary-title,
    .wc-block-checkout__main .wc-block-checkout__sidebar-wrapper,
    .wc-block-checkout__main [class*="order-summary"],
    .wc-block-checkout__main header,
    .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Исправляем перенос названия товара в оставшемся (нижнем) блоке */
    .wc-block-components-product-name {
        display: block !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }
/* Поправляем "Экономию" в корзине */
    .wc-block-components-product-sale-badge {
        position: relative !important;
        left: 0 !important;
        display: inline-block !important;
        margin-top: 5px !important;
        width: fit-content !important;
    }
}
/* ==========================================================================
   7. СЕКЦИЯ ПАРТНЕРОВ (ГДЕ КУПИТЬ)
   ========================================================================== */
/* ==========================================================================
   ФИНАЛЬНЫЙ СТИЛЬ ПЕРЕКЛЮЧАТЕЛЯ
   ========================================================================== */

/* Контейнер кнопок */
.shop-tabs-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 40px auto !important;
    width: 100% !important;
}

/* Общий стиль кнопок */
.tab-btn {
    padding: 15px 35px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Плавная анимация */
    border: 2px solid #f28b66 !important;
    background-color: #ffffff !important;
    color: #f28b66 !important;
    outline: none !important;
}

/* Эффект при наведении на любую кнопку */
.tab-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 15px rgba(242, 139, 102, 0.2) !important;
    background-color: #fdfaf7 !important;
}

/* Стиль АКТИВНОЙ кнопки (заливка) */
.tab-btn.active {
    background-color: #f28b66 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(242, 139, 102, 0.4) !important;
}

/* Центровка блока партнеров */
#view-partners-shop {
    display: none; /* Управляется скриптом */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 300px !important;
}

.partners-grid-new {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Центрирует карточки в ряду */
    align-items: center !important;
    gap: 30px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* ==========================================================================
   ВОЗВРАЩАЕМ НЕОНОВУЮ ОБВОДКУ И ВЫРАВНИВАЕМ ВЫСОТУ
   ========================================================================== */
.partner-card-new {
    width: 220px !important; /* Чуть шире для текста */
    background: #ffffff !important;
    border-radius: 35px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    
    /* 1. ВОЗВРАЩАЕМ НЕОНОВЫЙ ЭФФЕКТ (ТЕНЬ И ОБВОДКУ) */
    border: 2px solid rgba(242, 139, 102, 0.2) !important; /* Мягкая оранжевая рамка */
    box-shadow: 0 0 15px rgba(242, 139, 102, 0.1), /* Внутреннее свечение */
                0 10px 30px rgba(0,0,0,0.05) !important; /* Основная тень */
    
    /* 2. МАГИЯ ВЫРАВНИВАНИЯ (ФЛЕКСБОКС) */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Контент начинается сверху */
    
    /* 3. ФИКСИРОВАННАЯ МИНИМАЛЬНАЯ ВЫСОТА */
    min-height: 400px !important; /* Установи высоту, при которой влезет весь текст Ozon */
    
    /* АНИМАЦИЯ */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ (УСИЛИВАЕМ НЕОН) */
.partner-card-new:hover {
    transform: translateY(-5px) scale(1.02) !important;
    border-color: #f28b66 !important; /* Яркая рамка */
    box-shadow: 0 0 25px rgba(242, 139, 102, 0.5), /* Мощное свечение */
                0 15px 40px rgba(242, 139, 102, 0.2) !important;
}

/* 4. ВЫРАВНИВАЕМ КНОПКИ ПО НИЖНЕМУ КРАЮ */
.p-btn {
    margin-top: auto !important; /* Выталкивает кнопку вниз */
    display: inline-block !important;
    padding: 10px 25px !important;
    border-radius: 20px !important;
    background: #f28b66 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
}

/* Отступы для текста */
.p-title {
    margin-bottom: 15px !important;
    min-height: 50px !important; /* Резервирует место под заголовок */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Базовый стиль для блока логотипа */
.p-logo {
    width: 100% !important; /* На всю ширину карточки */
    height: 120px !important; /* Увеличим высоту, чтобы лого поместилось */
    margin-bottom: 20px !important;
    
    /* МАГИЧЕСКИЕ СТРОКИ ДЛЯ ИСПРАВЛЕНИЯ */
    background-size: contain !important; /* Картинка впишется целиком */
    background-position: center !important; /* По центру */
    background-repeat: no-repeat !important; /* Не дублировать */
}

/* Конкретные логотипы — ЗАМЕНИ ССЫЛКИ НА СВОИ */
.p-logo.emall {
    background-image: url('https://api-preprod.emall.by/storage/admin/images/2Ndf4o1cG2umQSgVOpE1wAKtgvtiAhCdjNre291A.svg') !important;
}

.p-logo.zoomarket {
    background-image: url('/wp-content/themes/lapkahelp/img/partners/OZON.svg') !important;
}

.p-logo.wb {
    background-image: url('/wp-content/themes/lapkahelp/img/partners/wb.svg') !important;
}

/* Также подправим саму карточку для лучшего вида */
.partner-card-new {
    width: 200px !important; /* Чуть увеличим ширину */
    min-height: 250px !important; /* И минимальную высоту */
    background: #ffffff !important;
    border-radius: 35px !important;
    padding: 30px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease !important;
}

.partner-card-new:hover {
    transform: translateY(-5px) !important;
}

/* Эффект при наведении на всю карточку */
.partner-card-new:hover .p-logo {
    transform: scale(1.1) !important; /* Логотип чуть увеличится */
}

/* Убираем подчеркивание ссылок, если появилось */
.partner-card-new {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
/* Специальные стили для мобильных устройств (экран меньше 600px) */
@media (max-width: 600px) {
    /* 1. Сетка: принудительно ставим по 2 в ряд */
    .partners-grid-new {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
        padding: 5px !important;
    }

    .partner-card-new {
        /* Ширина 47%, чтобы точно влезло 2 штуки с учетом зазоров */
        width: 47% !important; 
        
        /* КРИТИЧНО: Уменьшаем минимальную высоту до предела */
        min-height: 220px !important; 
        
        padding: 15px 10px !important; /* Ужимаем внутренние поля */
        border-radius: 20px !important;
    }

    /* 2. Уменьшаем картинку (логотип) */
    .p-logo {
        height: 50px !important; /* Было 120, ставим 50 */
        margin-bottom: 5px !important;
    }

    /* 3. Убираем лишние отступы у текста */
    .p-title {
        font-size: 0.8rem !important;
        min-height: auto !important; /* Убираем резервацию места */
        margin-bottom: 10px !important;
        line-height: 1.1 !important;
    }

    /* 4. Кнопка "Купить там" */
    .p-btn {
        margin-top: 5px !important; /* Убираем 'auto', чтобы кнопка прилипла к тексту */
        padding: 8px 5px !important;
        font-size: 0.7rem !important;
        width: 100% !important;
    }
}
/* ==========================================================================
   СТИЛИЗАЦИЯ УВЕДОМЛЕНИЙ (Messages/Errors)
   ========================================================================== */

/* Общий контейнер для уведомлений */
.woocommerce-error, 
.woocommerce-message, 
.woocommerce-info {
    max-width: 900px !important; /* Ограничиваем ширину, чтобы не растягивалось */
    margin: 20px auto 30px !important; /* Центрируем и добавляем отступы */
    padding: 20px 25px !important;
    border-radius: 15px !important; /* Скругляем углы под стиль сайта */
    border: none !important; /* Убираем стандартные рамки */
    background-color: #fff !important; /* Белый фон */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; /* Мягкая тень */
    list-style: none !important;
    font-size: 1rem !important;
    color: #2d241e !important;
    position: relative !important;
}

/* Красная полоска сбоку для ошибок (вместо рамки) */
.woocommerce-error {
    border-left: 5px solid #ff4242 !important;
}

/* Синяя или оранжевая полоска для инфо/сообщений */
.woocommerce-message, .woocommerce-info {
    border-left: 5px solid #ff8c42 !important;
}

/* Иконка уведомления (если есть) */
.woocommerce-error::before, 
.woocommerce-message::before, 
.woocommerce-info::before {
    color: inherit !important;
    top: 20px !important;
    left: 20px !important;
}

/* Кнопка "Просмотр корзины" внутри уведомления */
.woocommerce-message .button {
    background: #ff8c42 !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 8px 15px !important;
    float: right !important;
    margin-top: -5px !important;
}

/* Адаптив для мобилок */
@media (max-width: 768px) {
    .woocommerce-error, .woocommerce-message, .woocommerce-info {
        margin: 15px !important;
        font-size: 0.9rem !important;
    }
}
.side-surf-cart {
    position: fixed !important;
    right: 0 !important; /* Прижимаем к самому краю */
    top: 50% !important; /* Ставим по центру высоты */
    transform: translateY(-50%) !important; /* Идеальное центрирование */
    background: #ff8c42 !important; /* Твой оранжевый */
    color: #fff !important;
    padding: 12px 15px !important;
    border-radius: 20px 0 0 20px !important; /* Закругляем только левые углы */
    display: flex !important;
    flex-direction: column !important; /* Иконка над текстом */
    align-items: center !important;
    z-index: 999999 !important;
    text-decoration: none !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.side-surf-cart:hover {
    padding-right: 25px !important; /* Немного выезжает при наведении */
    background: #2d241e !important;
}

.side-cart-icon {
    font-size: 20px !important;
    margin-bottom: 5px !important;
}

.side-cart-text {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    writing-mode: vertical-rl !important; /* Если хочешь текст вертикально, как на серф-борде */
    transform: rotate(180deg);
}

.side-cart-count {
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    background: #2d241e !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    border: 2px solid #fff !important;
}

/* На мобилках делаем её чуть меньше, чтобы не мешала контенту */
@media (max-width: 768px) {
    .side-surf-cart {
        padding: 8px 10px !important;
    }
}
/* Анимация */
.fade-in-up { opacity: 0; transform: translateY(20px); transition: 0.6s ease-out; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) {
    /* Находим 4-ю колонку в сетке футера */
    .footer-grid .footer-col:last-child {
        display: flex;
        justify-content: center; /* Центровка по горизонтали */
        width: 100%;            /* Растягиваем на всю ширину мобильного экрана */
        margin-top: 20px;       /* Дополнительный отступ сверху для красоты */
    }

    /* Дополнительно убеждаемся, что сам блок внутри колонки имеет автоматические отступы */
    .lapka-promo-box-mini {
        margin: 0 auto !important;
    }
}