/* ПЕРЕМЕННЫЕ */
:root {
    --bg-pearl: #FAFCFB;
    --text-dark: #0A2E1F;
    --text-muted: #334e43;
    --emerald: #006A4E;
    --bright-green: #4CBB17;
    --gold: #D4AF37; 
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 16px 40px rgba(0, 106, 78, 0.08);
    --font-head: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
}

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

/* Добавлен scroll-padding-top для корректной работы якорных ссылок с фиксированной шапкой */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; 
}

body {
    background-color: var(--bg-pearl);
    color: var(--text-dark);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.loading { overflow: hidden; }

/* Утилиты Layout */
.flex-col { display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 15px; }

/* ПРЕЛОАДЕР */
#preloader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #051A11; z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.6s ease-out, visibility 0.6s;
}
.preloader-content {
    display: flex; flex-direction: column; align-items: center; gap: 25px;
}
.pulse-seed {
    width: 50px; height: 75px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--gold), #8B6508);
    box-shadow: 0 0 40px var(--gold), inset -5px -5px 15px rgba(0,0,0,0.5);
    animation: heartbeat 1.5s infinite ease-in-out;
}
.loading-text {
    color: var(--gold); font-family: var(--font-head);
    font-size: 1.4rem; letter-spacing: 2px; text-transform: uppercase;
}
.loading-text span { animation: dots 1.5s infinite; opacity: 0; }
.loading-text span:nth-child(2) { animation-delay: 0.5s; }
.loading-text span:nth-child(3) { animation-delay: 1s; }

@keyframes heartbeat {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(212, 175, 55, 0.5); }
    50% { transform: scale(1.15); box-shadow: 0 0 50px rgba(212, 175, 55, 1); }
}
@keyframes dots { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ТУРКМЕНСКИЙ ОРНАМЕНТ */
.bg-turkmen-pattern {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    opacity: 0.025; z-index: -4; pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 0 L60 20 L80 20 L80 40 L100 50 L80 60 L80 80 L60 80 L50 100 L40 80 L20 80 L20 60 L0 50 L20 40 L20 20 L40 20 Z" fill="%23006A4E"/></svg>');
    background-size: 120px;
}

/* ФИКСИРОВАННЫЙ РЕНДЕР (СЕМЯ + СТЕБЕЛЬ) */
#plant-system { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; }
#magic-plant { width: 100%; height: 100%; overflow: visible; }
.leaf-group { transform-origin: 0 0; transform: scale(0); opacity: 0; transition: opacity 1.2s, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.leaf-group.active { transform: scale(1); opacity: 1; }
#svg-seed { transition: transform 0.1s linear; }
#svg-seed-left, #svg-seed-right { transform-origin: 0px 45px; transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
#svg-seed-core { transition: opacity 1s; }
#ground-glow {
    position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);
    width: 700px; height: 180px; background: radial-gradient(ellipse at center, rgba(76, 187, 23, 0.25) 0%, rgba(0,0,0,0) 70%);
    opacity: 0; transition: opacity 1s; filter: blur(25px);
}

/* ПЫЛЬЦА */
#particles-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -3; pointer-events: none; }

/* СТЕКЛО */
    .glass {
    background: var(--glass-bg); 
    backdrop-filter: blur(12px); /* Уменьшили с 24px */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.6), var(--glass-shadow);
    border-radius: 28px; overflow: hidden; position: relative;
}

/* === ОБНОВЛЕННАЯ ШАПКА === */
header {
    position: fixed; top: 0; left: 0; right: 0; padding: 20px 5%;
    display: flex; justify-content: space-between; align-items: center; 
    z-index: 1000; transition: all 0.4s ease;
}
header.scrolled { 
    background: rgba(250, 252, 251, 0.9); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    padding: 10px 5%; border-bottom: 1px solid rgba(0,0,0,0.05); 
    box-shadow: 0 5px 20px rgba(0, 106, 78, 0.05);
}

/* Логотип */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { 
    height: 65px; /* Идеальный размер для вашего горизонтального логотипа */
    width: auto; object-fit: contain; 
    transition: 0.4s ease; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
header.scrolled .logo img { height: 50px; } /* Уменьшаем при скролле */

/* Навигация ПК */
nav.desktop-nav { display: flex; gap: 35px; }
nav a { text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 15px; transition: 0.3s; }
nav a:hover { color: var(--bright-green); }

/* Правый блок (Языки + Кнопка/Бургер) */
.header-actions { display: flex; align-items: center; gap: 20px; }

/* Капсула языков */
.lang-switcher {
    display: flex; padding: 4px; border-radius: 40px;
    background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05), 0 4px 10px rgba(0, 106, 78, 0.05);
    backdrop-filter: blur(10px);
}
.lang-btn {
    background: transparent; border: none; padding: 6px 14px; border-radius: 30px;
    color: var(--text-dark); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
    cursor: pointer; transition: all 0.3s ease;
}
.lang-btn:hover { color: var(--emerald); }
.lang-btn.active {
    background: var(--emerald); color: white;
    box-shadow: 0 4px 10px rgba(0, 106, 78, 0.25);
}

/* Кнопки */
.btn {
    padding: 14px 28px; border-radius: 50px; font-family: var(--font-body); font-weight: 600; font-size: 15px;
    transition: all 0.3s ease; text-decoration: none; border: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
}
.btn-emerald { background: linear-gradient(135deg, var(--emerald), #004d38); color: white; box-shadow: 0 8px 25px rgba(0, 106, 78, 0.3); }
.btn-emerald:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 106, 78, 0.4); }

/* Бургер меню */
.mobile-menu-btn {
    display: none; background: transparent; border: none;
    font-size: 1.8rem; color: var(--emerald); cursor: pointer; transition: 0.3s;
}

/* Выезжающее мобильное меню */
.mobile-nav {
    position: fixed; top: 0; right: -100%; width: 100vw; height: 100vh;
    background: rgba(250, 252, 251, 0.98); backdrop-filter: blur(15px);
    z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 30px; transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-nav.active { right: 0; }
.mobile-nav a.mob-link {
    font-family: var(--font-head); font-size: 2rem; color: var(--emerald);
    text-decoration: none; font-weight: 600;
}
.mobile-nav a.btn { font-family: var(--font-body); font-size: 1.2rem; }

/* === АДАПТИВ ШАПКИ === */
@media (max-width: 1024px) {
    .desktop-nav { display: none; } /* Прячем меню */
    .desktop-only { display: none; } /* Прячем кнопку ПК */
    .mobile-menu-btn { display: block; } /* Показываем бургер */
    .logo img { height: 50px; }
}
/* ГЛАВНЫЙ ЭКРАН */
.hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; }
.motto { font-family: var(--font-head); font-style: italic; color: var(--gold); font-size: 1.3rem; margin-bottom: 20px; letter-spacing: 2px; }
.hero-title { font-family: var(--font-head); font-size: 5.5rem; line-height: 1.1; margin-bottom: 25px; text-shadow: 0 10px 30px white; color: #052216;}
.hero-subtitle { max-width: 650px; font-size: 1.15rem; line-height: 1.7; margin-bottom: 40px; font-weight: 500; color: var(--text-muted);}

/* СЕКЦИИ И СЕТКИ */
section { padding: 100px 5%; max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.spacer-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.section-title { font-family: var(--font-head); font-size: 3.5rem; text-align: center; margin-bottom: 60px; color: var(--emerald); }
.reveal { opacity: 0; transform: translateY(40px); transition: 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* О НАС (ИСПРАВЛЕННАЯ СЕТКА) */
.about-bento { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* Строго 3 одинаковые колонки */
    gap: 30px; 
}
.bento-card { 
    padding: 50px; 
    position: relative; 
    z-index: 2; 
    min-width: 0; /* КРИТИЧЕСКИ ВАЖНО: не дает длинному тексту разрывать и ломать сетку */
}
.about-wide { 
    grid-column: span 2; /* Первая карточка занимает 2/3 ширины */
}
/* Вторая карточка автоматически займет оставшуюся 1/3 ширины */

.about-full { 
    grid-column: span 3; /* Нижняя карточка занимает всю ширину (3/3) */
    background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(212,175,55,0.1)); 
}
.bento-title { 
    font-family: var(--font-head); 
    font-size: 2.2rem; 
    color: var(--emerald); 
    line-height: 1.2;
}
.bento-card p { 
    font-size: 1.1rem; 
    line-height: 1.8; 
    color: var(--text-muted); 
}
/* ПОЧЕМУ МЫ */
.why-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.why-card { padding: 40px 30px; }
.why-icon { font-size: 3.2rem; color: var(--gold); filter: drop-shadow(0 5px 10px rgba(212,175,55,0.3)); transition: transform 0.3s;}
.why-card:hover .why-icon { transform: scale(1.1); }
.bento-title-small { font-size: 1.4rem; color: var(--emerald); font-family: var(--font-head); }

/* КАТАЛОГ И ГАЛЕРЕЯ (Изображения через тег img) */
.catalog-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px;}
.product-card {
    grid-column: span 2; height: 420px; padding: 35px;
    display: flex; align-items: flex-end; position: relative; transition: transform 0.4s; overflow: hidden;
}
.wide-card { grid-column: span 3; }

/* Стили для SEO-изображений, которые работают как фон */
.product-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.product-card:hover .product-bg, .gal-item:hover .product-bg { transform: scale(1.05); }

.product-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
    background: linear-gradient(to top, rgba(10, 46, 31, 0.95) 0%, rgba(0,0,0,0) 60%); transition: 0.4s;
}
.shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%; z-index: 2;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg); transition: 0.6s;
}
.product-card:hover .shine { left: 150%; }
.product-card:hover::before { background: linear-gradient(to top, rgba(10, 46, 31, 0.95) 0%, rgba(0,106,78,0.4) 100%); }

.product-info { position: relative; z-index: 3; color: white; transform: translateY(15px); transition: 0.4s; }
.product-card:hover .product-info { transform: translateY(0); }
.badge { display: inline-block; padding: 5px 12px; background: rgba(212,175,55,0.9); color: #fff; font-size: 0.8rem; font-weight: 600; border-radius: 20px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;}
.product-info h3 { font-family: var(--font-head); font-size: 1.8rem; margin-bottom: 8px; }
.product-info p { font-size: 1.05rem; opacity: 0.9; line-height: 1.5;}

/* ГАЛЕРЕЯ */
.gallery-bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 320px 320px; gap: 25px; }
.gal-item { border-radius: 30px; position: relative; overflow: hidden; transition: transform 0.4s ease; box-shadow: var(--glass-shadow);}
.gal-item:hover { transform: translateY(-5px); z-index: 10;}
.gal-1 { grid-column: 1 / 2; grid-row: 1 / 3; }
.gal-2 { grid-column: 2 / 4; grid-row: 1 / 2; }

/* ПАРТНЕРЫ */
.partners-wrap { overflow: hidden; padding: 50px 0; white-space: nowrap; position: relative; }
.partners-wrap::before, .partners-wrap::after { content: ''; position: absolute; top: 0; width: 250px; height: 100%; z-index: 2; }
.partners-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-pearl), transparent); }
.partners-wrap::after { right: 0; background: linear-gradient(to left, var(--bg-pearl), transparent); }
.partners-track { display: inline-block; animation: scrollMarquee 30s linear infinite; }
.partner-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 240px; height: 100px; margin: 0 25px; font-family: var(--font-head);
    font-size: 1.4rem; color: #888; filter: grayscale(100%); transition: 0.4s; letter-spacing: 1px;
}
.partner-logo:hover { filter: grayscale(0); color: var(--emerald); transform: translateY(-5px); box-shadow: var(--glass-shadow);}

/* ФУТЕР И ФОРМА */
.footer-bento { padding: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border: 1px solid var(--gold); margin: 60px 5%; background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(212,175,55,0.05)); }
.contact-info h2 { font-family: var(--font-head); font-size: 3.2rem; color: var(--emerald); margin-bottom: 25px; line-height: 1.1;}
.contact-info p { margin-bottom: 35px; font-size: 1.15rem; color: var(--text-muted); }
.contact-row { margin-bottom: 20px; font-size: 1.15rem; display: flex; align-items: center; gap: 15px;}
.contact-row i { color: var(--gold); font-size: 1.4rem;}

.form-container { background: white; padding: 40px; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); }
.form-container h3 { font-family: var(--font-head); font-size: 2rem; color: var(--text-dark); margin-bottom: 25px;}
.input-group { position: relative; width: 100%; margin-bottom: 25px; }
.input-group input, .input-group select {
    width: 100%; padding: 20px 15px 10px; border-radius: 12px; border: 2px solid transparent;
    background: rgba(0,106,78,0.05); font-size: 1.1rem; font-family: var(--font-body); outline: none; transition: 0.3s;
}
.input-group label {
    position: absolute; top: 18px; left: 15px; font-size: 1rem; color: #888; pointer-events: none; transition: 0.3s ease;
}
.input-group input:focus, .input-group select:focus, .input-group input:valid, .input-group select:valid {
    border-color: var(--emerald); background: white; box-shadow: 0 0 20px rgba(76,187,23,0.15);
}
.input-group input:focus ~ label, .input-group select:focus ~ label, .input-group input:valid ~ label, .input-group select:valid ~ label {
    top: 5px; font-size: 0.75rem; color: var(--emerald); font-weight: 600;
}

/* Состояние успеха формы */
.form-success {
    display: none; height: 100%; padding: 20px 0;
    animation: fadeIn 0.5s ease forwards;
}
.form-success i { font-size: 4rem; color: var(--bright-green); margin-bottom: 10px;}
.form-success h4 { font-family: var(--font-head); font-size: 1.8rem; color: var(--emerald); }
.form-success p { color: var(--text-muted); font-size: 1.1rem;}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.socials { margin-top: 35px; display: flex; gap: 20px; }
.socials a { width: 50px; height: 50px; border-radius: 50%; background: var(--emerald); color: white; display: flex; align-items: center; justify-content: center; transition: 0.3s; font-size: 1.3rem;}
.socials a:hover { background: var(--gold); transform: translateY(-5px) rotate(10deg); }
.copyright { text-align: center; margin-bottom: 40px; font-size: 1rem; color: var(--text-muted); opacity: 0.7; }

@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* === МОБИЛЬНАЯ АДАПТАЦИЯ === */
@media (max-width: 1024px) {
    .about-bento { grid-template-columns: 1fr; }
    .about-wide, .about-full { grid-column: span 1; }
    .why-bento, .footer-bento { grid-template-columns: repeat(2, 1fr); }
    .product-card, .wide-card { grid-column: span 6; }
    .hero-title { font-size: 4rem; }
    .gallery-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
    .gal-1, .gal-2 { grid-column: 1 / -1; grid-row: auto; height: 350px; }
    .footer-bento { grid-template-columns: 1fr; padding: 40px; }
}

@media (max-width: 768px) {
    nav.desktop-nav { display: none; }
    .hero-title { font-size: 2.5rem; }
    .section-title { font-size: 2.4rem; margin-bottom: 40px; }
    .why-bento { grid-template-columns: 1fr; }
    .bento-card { padding: 35px 25px; }
    .form-container { padding: 25px; }
}

/* === ПК КУРСОР === */
@media (pointer: fine) {
    * { cursor: none !important; }
    .custom-cursor {
        position: fixed; top: 0; left: 0; width: 10px; height: 10px;
        background: var(--gold); border-radius: 50%; transform: translate(-50%, -50%);
        pointer-events: none; z-index: 9999; box-shadow: 0 0 10px var(--gold);
    }
    .cursor-trail {
        position: fixed; top: 0; left: 0; width: 45px; height: 45px;
        border: 1px solid var(--emerald); border-radius: 50%; transform: translate(-50%, -50%);
        pointer-events: none; z-index: 9998; transition: width 0.3s, height 0.3s;
    }
    a:hover ~ .custom-cursor, button:hover ~ .custom-cursor, input:hover ~ .custom-cursor, select:hover ~ .custom-cursor { transform: translate(-50%, -50%) scale(1.5); }
    a:hover ~ .cursor-trail, button:hover ~ .cursor-trail, input:hover ~ .cursor-trail, select:hover ~ .cursor-trail { width: 65px; height: 65px; background: rgba(0, 106, 78, 0.1); }
}
@media (pointer: coarse) {
    .custom-cursor, .cursor-trail { display: none; }
    * { cursor: auto !important; }
}
/* === UI ПЕРЕКЛЮЧАТЕЛЯ ЯЗЫКОВ === */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-switcher {
    display: flex;
    padding: 5px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.lang-btn {
    background: transparent;
    border: none;
    padding: 8px 14px;
    border-radius: 40px;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    color: var(--emerald);
}

.lang-btn.active {
    background: var(--emerald);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 106, 78, 0.2);
}

/* Скрытие кнопки заказа на совсем узких экранах, чтобы влез языковой переключатель */
@media (max-width: 768px) {
    .desktop-only { display: none; }
}

/* Убираем стандартный сдвиг вверх для магнитной кнопки, так как им управляет JS */
.magnetic-btn:hover {
    transform: none; 
}

/* === СКЕЛЕТОНЫ И LAZY LOAD === */
.skeleton {
    position: relative;
    background: rgba(0, 106, 78, 0.1); /* Легкий зеленый фон загрузки */
    overflow: hidden;
}
.skeleton::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
    z-index: 10; pointer-events: none;
}
@keyframes shimmer {
    100% { left: 100%; }
}
.skeleton.loaded::after { display: none; } /* Прячем анимацию, когда загрузилось */

.lazy-img {
    opacity: 0; 
    transition: opacity 0.6s ease; /* Плавное появление самой картинки */
}
.lazy-img.loaded {
    opacity: 1;
}

/* ==================================================== */
/* === СТИЛИ СТРАНИЦЫ КАТАЛОГА (catalog.html) === */
/* ==================================================== */

/* Хлебные крошки */
.breadcrumbs {
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}
.breadcrumbs a {
    color: var(--emerald);
    text-decoration: none;
    transition: 0.3s;
}
.breadcrumbs a:hover {
    color: var(--gold);
}
.breadcrumbs .separator {
    margin: 0 10px;
    color: #888;
}

/* Строка поиска */
.search-container {
    max-width: 600px;
    margin: 0 auto 40px auto;
    position: relative;
}
.search-container input {
    width: 100%;
    padding: 16px 20px 16px 50px;
    border-radius: 30px;
    border: 1px solid var(--emerald);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-dark);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.search-container input:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 106, 78, 0.15);
}
.search-container i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--emerald);
    font-size: 1.2rem;
}

/* Адаптивные табы (Горизонтальный скролл для мобилок) */
.category-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none; /* Прячем скролл в Firefox */
    -ms-overflow-style: none; /* Прячем скролл в IE */
}
.category-tabs::-webkit-scrollbar {
    display: none; /* Прячем скролл в Chrome/Safari */
}
.tab-btn {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--emerald);
    color: var(--emerald);
    padding: 10px 22px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-body);
    white-space: nowrap; /* Чтобы текст не переносился */
    flex-shrink: 0; /* Чтобы кнопки не сжимались */
    transition: all 0.3s ease;
}
.tab-btn:hover, .tab-btn.active {
    background: var(--emerald);
    color: white;
    box-shadow: 0 4px 15px rgba(0,106,78,0.2);
}

/* Сетка и карточки для каталога */
.catalog-grid {
    display: none; /* Скрыты по умолчанию */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 30px;
    animation: fadeIn 0.5s ease;
}
.catalog-grid.active, .catalog-grid.active-search {
    display: grid;
}

/* Переопределение стеклянных карточек (чтобы они были одинакового размера в каталоге) */
.catalog-grid .product-card {
    grid-column: span 1; /* Отменяем span 2 с главной страницы */
    height: 400px;
}
.catalog-grid .product-info p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    /* Обрезаем текст до 3 строк, если он слишком длинный */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.catalog-grid .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}
@media (max-width: 768px) {
    .leaf, #magic-stem, #svg-seed-left, #svg-seed-right {
        filter: none !important;
    }
}

/* ==================================================== */
/* === СТИЛИ МОДАЛЬНОГО ОКНА ДЕТАЛЕЙ ТОВАРА === */
/* ==================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 26, 17, 0.7); /* Темный изумрудный фон оверлея */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-wrapper {
    width: 90%;
    max-width: 950px;
    transform: translateY(40px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-wrapper {
    transform: translateY(0) scale(1);
}

.modal-content.glass {
    background: rgba(250, 252, 251, 0.88); /* Плотный светлый жемчужный стеклянный фон */
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 30px 70px rgba(0, 106, 78, 0.2), inset 0 2px 5px rgba(255,255,255,0.8);
    padding: 50px 40px;
    border-radius: 36px;
    position: relative;
    overflow: hidden;
}

/* Кнопка закрытия */
.modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(0, 106, 78, 0.06);
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 26px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.modal-close:hover {
    background: var(--emerald);
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 106, 78, 0.2);
}

/* Сетка контента */
.modal-body-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 45px;
    align-items: center;
}

.modal-img-container {
    width: 100%;
    height: 420px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 106, 78, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
    position: relative;
    background: rgba(0, 106, 78, 0.05);
}

.modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.modal-img-container:hover .modal-img {
    transform: scale(1.04);
}

.modal-info-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.modal-title {
    font-family: var(--font-head);
    font-size: 2.8rem;
    color: var(--emerald);
    line-height: 1.15;
    margin-bottom: 2px;
}

.modal-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.modal-description-wrapper {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 15px;
    width: 100%;
}

/* Стилизация скроллбара */
.modal-description-wrapper::-webkit-scrollbar {
    width: 6px;
}
.modal-description-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 106, 78, 0.03);
    border-radius: 10px;
}
.modal-description-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 106, 78, 0.15);
    border-radius: 10px;
    transition: background 0.3s;
}
.modal-description-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--emerald);
}

.modal-action-btn {
    align-self: stretch;
    justify-content: center;
    padding: 16px;
    font-size: 1.05rem;
    margin-top: 10px;
}

/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
    .modal-body-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .modal-content.glass {
        padding: 40px 24px 24px;
        border-radius: 28px;
    }
    
    .modal-img-container {
        height: 280px;
        border-radius: 18px;
    }
    
    .modal-title {
        font-size: 2rem;
    }
    
    .modal-desc {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .modal-close {
        top: 15px;
        right: 15px;
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
    
    .modal-wrapper {
        margin: 10px;
    }
}