/* ==========================================================================
   MASTER STYLE ARCHITECTURE FOR BRAND: SVYAZALA LEYLA
   PREMIUM ULTIMATE LOGIC VERSION 11.0 — VOLUMETRIC UNCOMPRESSED DESIGN SYSTEM
   DEVELOPED, ENGINEERED & ROBUSTLY CODED BY MUHAMMAD (2017-2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ТОТАЛЬНЫЙ И БЕЗКОМПРОМИССНЫЙ СБРОС СИСТЕМНЫХ ОТСТУПОВ ВСЕХ БРАУЗЕРОВ
   -------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* Настройки корректного отображения современных блочных элементов */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* Глобальные параметры скролла, сглаживания и подготовки фона */
html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    height: 100%;
    background-color: #fbf9f6;
}

/* --------------------------------------------------------------------------
   2. НАМЕРТВО ЗАШИВАЕМ ПУТЬ К ТВОЕМУ ОРИГИНАЛЬНОМУ ГЕОМЕТРИЧЕСКОМУ ФОНУ
   -------------------------------------------------------------------------- */
body.site-body {
    /* Подключаем мамин премиум-шрифт Geologica со всеми системными бэкапами */
    font-family: 'Geologica', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Нежная молочная основа на случай медленной прогрузки картинки текстуры */
    background-color: #fbf9f6; 
    
    /* Точный путь к маминому ломаному узору Да Винчи, который ты закинул в images */
    background-image: url('images/fon-pattern.jpg'); 
    
    background-repeat: repeat; /* Рисунок бесконечно и бесшовно дублируется */
    background-attachment: fixed; /* Паттерн застывает намертво на заднем плане при скролле */
    background-size: 400px 400px; /* Крупный и сочный журнальный размер блоков геометрии */
    
    color: #4a3e3d; /* Наш благородный кофейный оттенок для основного текста */
    padding-top: 155px; /* Воздушный отступ сверху под нашу новую высокую шапку хедера */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* --------------------------------------------------------------------------
   3. ОБЩИЕ ПРЕМИАЛЬНЫЕ НАСТРОЙКИ КЛАССОВ И ТЕКСТОВЫХ ССЫЛОК
   -------------------------------------------------------------------------- */
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    transition: color 0.35s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.35s ease;
}

a:active, a:hover {
    outline: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-style: none;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    border: none;
    background: none;
}

button, input {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button, html [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. НАМЕРТВО ЗАКРЕПЛЕННАЯ ОРАНЖЕВАЯ (МАМИНА) ЛЕНТА В САМОМ ВЕРХУ ЭКРАНА
   -------------------------------------------------------------------------- */
.top-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background-color: #cc6d52; /* Оранжевый цвет в точный тон линий маминого логотипа */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1005; /* Высочайший приоритет над всеми элементами */
    box-shadow: 0 2px 10px rgba(204, 109, 82, 0.15);
}

.announcement-inner-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.announcement-text-main {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* --------------------------------------------------------------------------
   5. УЛЬТРА-ПЛОТНЫЕ МОЛОЧНЫЕ ПОДЛОЖКИ ДЛЯ СОВЕРШЕННОЙ ЧИТАЕМОСТИ БУКВ
   -------------------------------------------------------------------------- */
/* Этот класс укутывает все текстовые узлы, защищая их от геометрии заднего фона */
.milk-text-plate,
.hero-content-wrapper,
.page-inner-container, 
.section-container,
.catalog-viewport-content,
.sidebar-menu-wrapper,
.wholesale-text-card,
.qr-placeholder-card,
.copy-link-card,
.cart-items-list,
.cart-total-card,
.product-premium-card-wrapper,
.set-premium-card,
.delivery-card-premium,
.about-rich-text-story-card,
.about-value-item-card {
    background-color: rgba(255, 255, 255, 0.96) !important; /* Плотный молочный щит поверх узора */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #f0e6df;
    border-radius: 24px; /* Красивые дорогие закругления углов */
    box-shadow: 0 20px 50px rgba(56, 45, 39, 0.04);
}

/* Индивидуальный внутренний воздух для подложки баннера на главной */
.hero-content-wrapper {
    padding: 60px 50px;
}

/* --------------------------------------------------------------------------
   6. СИСТЕМА ИЗОЛЯЦИИ ЭКРАНОВ ДЛЯ JAVASCRIPT-ТЕЛЕПОРТАЦИИ
   -------------------------------------------------------------------------- */
.independent-page-view {
    display: none;
    width: 100%;
    flex: 1;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: fadeAndRiseTeleportIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.catalog-category-block {
    display: none;
    width: 100%;
}

.active-category-block {
    display: block !important;
}

@keyframes fadeAndRiseTeleportIn {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
   7. ПРЕМИАЛЬНАЯ ФИКСИРОВАННАЯ ШАПКА САЙТА (ВЕРХНИЙ СТРУКТУРНЫЙ ХЕДЕР)
   ========================================================================== */
.site-header {
    position: fixed;
    top: 35px; /* Сдвигаем строго под верхнюю терракотовую ленту доставки */
    left: 0;
    width: 100%;
    height: 110px; /* Увеличили высоту хедера, чтобы увеличенный логотип дышал свободно */
    background-color: rgba(255, 255, 255, 0.92); /* Полупрозрачный глянец для просвечивания фона */
    backdrop-filter: blur(15px); /* Эффект матового стекла Apple над твоим узором Да Винчи */
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid #f0e6df;
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем внутренний флекс-контейнер шапки */
    padding: 0 50px; /* Воздушные отступы по краям экрана, никакого сжатия к стенкам */
    z-index: 1000;
    box-shadow: 0 4px 30px rgba(56, 45, 39, 0.02);
    transition: background-color 0.4s ease, height 0.4s ease, box-shadow 0.4s ease;
}

/* Общий флекс-распределитель для трех главных зон шапки */
.header-main-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1440px; /* Ограничиваем максимальный разнос на ультрашироких мониторах */
    margin: 0 auto;
    height: 100%;
}

/* --------------------------------------------------------------------------
   8. ЛЕВАЯ ЗОНА: ВЕРХНИЕ ВКЛАДКИ НАВИГАЦИИ С ПЛАВАЮЩИМ ПОДЧЕРКИВАНИЕМ
   -------------------------------------------------------------------------- */
.main-nav {
    display: flex;
    gap: 30px; /* Комфортное расстояние между шестью вкладками в левом крыле */
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    flex: 1;
}

.nav-item-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
}

.main-nav .nav-link-teleport {
    text-decoration: none;
    color: #8a766c; /* Мягкий кофейный оттенок для неактивных пунктов */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px; /* Дорогой межбуквенный интервал */
    position: relative;
    padding: 12px 0;
    display: inline-block;
    transition: color 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.main-nav .nav-link-teleport:hover,
.main-nav .nav-link-teleport.active-nav {
    color: #cc6d52; /* Точный терракотовый цвет маминого логотипа */
}

/* Премиальная плавающая линия подчеркивания под активными вкладками */
.main-nav .nav-link-teleport::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #cc6d52;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.main-nav .nav-link-teleport:hover::after,
.main-nav .nav-link-teleport.active-nav::after {
    width: 100%;
}

/* --------------------------------------------------------------------------
   9. ЦЕНТРАЛЬНАЯ ЗОНА: УВЕЛИЧЕННЫЙ ОРИГИНАЛЬНЫЙ КРУГЛЫЙ ЛОГОТИП СТРОГО ПО ЦЕНТРУ СТРАНИЦЫ
   -------------------------------------------------------------------------- */
/* ВЫРАВНИВАНИЕ И УВЕЛИЧЕНИЕ ЛОГОТИПА В ЛЕВЫЙ УГОЛ ПОЛОСКИ */
.header-center-logo-zone {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    flex: 0 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 100px;
}
.logo-link-element {
    display: block;
    width: 100%;
    height: 100%;
}

.logo-image-file-element {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: 50%; /* Запечатываем картинку в идеальный премиальный круг */
    box-shadow: 0 6px 20px rgba(56, 45, 39, 0.04);
    /* Твой любимый мягкий взлет и аккуратный наклон логотипа при наведении */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease, box-shadow 0.4s ease;
}

.logo-link-element:hover .logo-image-file-element {
    transform: scale(1.07) rotate(3deg); /* Легкий живой наклон сферы */
    filter: brightness(1.03);
    box-shadow: 0 10px 25px rgba(204, 109, 82, 0.15);
}

/* --------------------------------------------------------------------------
   10. ПРАВАЯ ЗОНА: ВСЕ ТРИ ЭЛЕМЕНТА ВЫРОВНЕНЫ СТРОГО В ОДНУ ЛИНИЮ
   -------------------------------------------------------------------------- */
.header-right-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px; /* Одинаковые ровные интервалы между кнопками */
    flex: 1;
}

.phone-display-box {
    display: flex;
    align-items: center;
}

.header-phone {
    font-size: 14px;
    font-weight: 600;
    color: #382d27;
    background-color: #fcfbfa;
    border: 1px solid #e9e4e0;
    padding: 10px 20px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    display: inline-block;
    transition: all 0.3s ease;
    white-space: nowrap; /* Тот самый мамин запрет переноса */
    word-break: keep-all;
}


.cart-btn-wrapper {
    display: flex;
    align-items: center;
}

/* ИНТЕРАКТИВНЫЙ ДИЗАЙН ПУХЛОЙ КНОПКИ КОРЗИНЫ */
.cart-btn-nav {
    text-decoration: none;
    color: #382d27;
    font-size: 12px;
    font-weight: 700;
    background-color: #f2eae4; /* Мягкая уютная подложка */
    padding: 13px 26px;
    border-radius: 30px; /* Идеально округлая пухлая форма */
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.3s ease, 
                color 0.3s ease;
}

.cart-btn-nav:hover {
    background-color: #cc6d52; /* Терракотовая вспышка при наведении */
    color: #ffffff;
    transform: translateY(-4px); /* Мягкий взлет */
    box-shadow: 0 8px 20px rgba(204, 109, 82, 0.25);
}

.qr-badge-wrapper {
    display: flex;
    align-items: center;
}

/* КНОПКА КВАРКОДА БИРКИ */
.qr-link-badge {
    background-color: transparent;
    color: #cc6d52;
    border: 2px solid #cc6d52;
    text-decoration: none;
    padding: 11px 22px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.3s ease, 
                color 0.3s ease;
}

.qr-link-badge:hover {
    background-color: #cc6d52;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(204, 109, 82, 0.22);
}
/* ==========================================================================
   11. ДВУХКОЛОНОЧНЫЙ КАРКАС КАТАЛОГА (ЛЕВАЯ ВЕРТИКАЛЬНАЯ СТРУКТУРНАЯ ПАНЕЛЬ)
   ========================================================================== */
.catalog-layout-container {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    gap: 60px; /* Гигантское свободное расстояние, контент полностью расправлен и дышит */
    padding: 60px 45px;
    background: transparent !important;
    background-color: transparent !important;
    position: relative;
}

/* ЛЕВАЯ STICKY-КОЛОНКА МЕНЮ КАТЕГОРИЙ ИЗДЕЛИЙ */
.sidebar-menu-wrapper {
    width: 340px;
    min-width: 340px;
    padding: 50px 40px;
    height: fit-content;
    position: sticky;
    top: 175px; /* Надежно и жестко фиксируем боковое меню при скролле правой витрины люлек */
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-sticky-scroll-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.sidebar-title-header-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-title-text-content {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.2px; /* Дорогой межбуквенный интервал заголовка меню */
    color: #382d27;
    font-weight: 800;
}

.sidebar-title-underline-line {
    width: 45px;
    height: 2px;
    background-color: #cc6d52; /* Фирменный оранжевый акцент мамы */
}

/* ВЕРТИКАЛЬНЫЙ СПИСОК КАТЕГОРИЙ БРЕНДА SVYAZALA LEYLA */
.cat-menu-list-container {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 22px; /* Просторные вертикальные интервалы между шестью категориями */
    width: 100%;
}

.cat-menu-single-item {
    display: block;
    width: 100%;
    position: relative;
}

/* ИНТЕРАКТИВНЫЕ ССЫЛКИ СВЯЗИ С JAVASCRIPT-ПЕРЕКЛЮЧАТЕЛЕМ */
.cat-menu-list-container a.cat-anchor-link {
    text-decoration: none;
    color: #8a766c; /* Мягкий кофейный цвет для пассивных категорий */
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Расталкиваем текст и стрелочку по краям плашки */
    padding: 6px 0;
    width: 100%;
    /* Мгновенная кинематографичная реакция строки на мышку без рывков */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                color 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                padding-left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cat-link-text-label {
    position: relative;
}

.cat-link-arrow-indicator {
    font-size: 13px;
    opacity: 0; /* Скрываем стрелочку по умолчанию */
    transform: translateX(-10px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.35s ease;
}

/* МАГИЯ ВЗАИМОДЕЙСТВИЯ: ГЛУБОКИЙ ЭЛЕГАНТНЫЙ СДВИГ СТРОКИ ВПРАВО */
.cat-menu-list-container a.cat-anchor-link:hover, 
.cat-menu-list-container a.cat-anchor-link.active-cat {
    color: #cc6d52; /* Смена на мамин оранжевый цвет */
    font-weight: 800;
    padding-left: 14px; /* Плавный сочный сдвиг текста вправо */
}

/* Появление и вылет стрелочки-индикатора при наведении */
.cat-menu-list-container a.cat-anchor-link:hover .cat-link-arrow-indicator,
.cat-menu-list-container a.cat-anchor-link.active-cat .cat-link-arrow-indicator {
    opacity: 1;
    transform: translateX(0);
    color: #cc6d52;
}

/* ==========================================================================
   12. ПРАВАЯ КОЛОНКА КАТАЛОГА: ОБЪЕМНАЯ ПРЕМИАЛЬНАЯ ВИТРИНА ТОВАРОВ
   ========================================================================== */
.catalog-viewport-content {
    flex: 1;
    padding: 65px; /* Огромные воздушные отступы внутри блока витрины */
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* ТЕКСТОВЫЕ БЛОКИ ШАПОК ВНУТРИ КАТЕГОРИЙ ВИТРИНЫ */
.cat-header-title-container-box {
    margin-bottom: 50px;
    border-bottom: 1px solid #f2ece7;
    padding-bottom: 35px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.cat-badge-top-indicator {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #cc6d52; /* Оранжевый акцент бренда */
}

.cat-block-main-title {
    font-size: 30px;
    color: #382d27;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.cat-block-divider-line {
    width: 60px;
    height: 3px;
    background-color: #cc6d52; /* Наш фирменный оранжевый маркер */
    border-radius: 2px;
}

.cat-block-description-text {
    font-size: 15px;
    color: #8a766c;
    line-height: 1.7;
}

/* ГИБКАЯ СЕТКА КАРТОЧЕК ТОВАРОВ ВНУТРИ ВИТРИНЫ КАТАЛОГА */
.products-grid-layout {
    display: flex;
    gap: 40px; /* Идеальное расстояние между люльками, никакого визуального шума */
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
}
/* ==========================================================================
   13. РОСКОШНАЯ КАРТОЧКА ИЗДЕЛИЯ С ЭФФЕКТОМ МЯГКОГО ПАРЕНИЯ И ВЗЛЕТА
   ========================================================================== */
.product-premium-card-wrapper {
    width: 305px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #ffffff;
    padding: 24px; /* Воздушные внутренние поля карточки изделия */
    border-radius: 20px;
    border: 1px solid #f2ece7;
    position: relative;
    overflow: hidden;
    /* Ультра-плавный сбалансированный ход карточки в обе стороны */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.22, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.22, 1), 
                border-color 0.4s ease;
}

/* Монументальный взлет люльки при наведении мышки покупателя */
.product-premium-card-wrapper:hover {
    transform: translateY(-12px); /* Карточка плавно и высоко парит */
    border-color: #e6dbd3;
    box-shadow: 0 25px 50px rgba(56, 45, 39, 0.08); /* Глубокая мягкая тень */
}

/* КОНТЕЙНЕР ДЛЯ ОРИГИНАЛЬНЫХ ФОТОГРАФИЙ ИЗДЕЛИЙ МАСТЕРСКОЙ С ЯНДЕКС ДИСКА */
.product-image-container-box {
    width: 100%;
    height: 275px;
    background-color: #faf6f0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #f2ece7;
}

.product-card-img-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Мягкое приближение маминого шнура при наведении на плашку */
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.22, 1);
}

.product-premium-card-wrapper:hover .product-card-img-element {
    transform: scale(1.06); /* Картинка слегка увеличивается, раскрывая фактуру петель */
}

/* ПАРА СТИЛЬНЫХ ФЛОАТ-БЕЙДЖЕЙ ПОВЕРХ КАРТИНКИ ТОВАРА */
.product-card-floating-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #cc6d52; /* Цвет букв точно как на логотипе мамы */
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(240, 230, 223, 0.5);
    box-shadow: 0 4px 10px rgba(56, 45, 39, 0.03);
}

/* ДЕТАЛИЗИРОВАННЫЙ БЛОК ОПИСАНИЯ ВНУТРИ КАРТОЧКИ ЛЮЛЬКИ */
.product-card-description-data-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    text-align: left;
}

.product-card-title-heading {
    font-size: 17px;
    font-weight: 700;
    color: #382d27;
    line-height: 1.4;
    letter-spacing: -0.2px;
}

.product-card-meta-text-description {
    font-size: 13px;
    color: #8a766c;
    line-height: 1.6;
}

/* НИЖНЯЯ МЕТРИЧЕСКАЯ ЗОНА С ЦЕННИКОМ И КНОПКОЙ */
.product-card-footer-action-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto; /* Намертво прижимает цену и кнопку вниз карточки люльки */
}

.product-card-price-display-zone {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.price-currency-label {
    font-size: 12px;
    color: #8a766c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-tag-value {
    font-size: 22px;
    font-weight: 800;
    color: #382d27;
    letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   14. СЛОЖНАЯ ИНЖЕНЕРНАЯ ФИЗИКА ПРУЖИНЫ ДЛЯ ВСЕХ КНОПОК САЙТА
   -------------------------------------------------------------------------- */
/* Кнопка "В корзину" внутри карточки люльки или набора корзинок */
.add-to-cart-btn {
    width: 100%;
    background-color: transparent;
    color: #cc6d52; /* Цвет оранжевой линии маминого логотипа */
    border: 2px solid #cc6d52;
    padding: 14px;
    font-family: 'Geologica', sans-serif;
    font-size: 12px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    /* Настраиваем крутую пружину cubic-bezier для эффекта прыжка при наведении */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.3s ease, 
                color 0.3s ease;
}

.add-to-cart-btn:hover {
    background-color: #cc6d52;
    color: #ffffff;
    transform: translateY(-6px); /* Кнопка сочно прыгает вверх внутри люльки */
    box-shadow: 0 8px 20px rgba(204, 109, 82, 0.28);
}

/* ГИГАНТСКАЯ ЦЕНТРАЛЬНАЯ КНОПКА «СМОТРЕТЬ КАТАЛОГ» НА ГЛАВНОМ ЭКРАНЕ ТЕЛЕПОРТА */
.btn-primary {
    display: inline-block;
    background-color: #cc6d52; /* Тот самый оранжевый цвет логотипа мамы */
    color: #ffffff;
    text-decoration: none;
    padding: 18px 55px; /* Огромные воздушные отступы делают её монументальной */
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 6px 22px rgba(204, 109, 82, 0.18);
    /* Deep пружинящий взлет при наведении мышки юзера */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #b55d44;
    transform: translateY(-9px); /* Кнопка роскошно отпружинивает высоко вверх */
    box-shadow: 0 18px 38px rgba(204, 109, 82, 0.35); /* Красивая объемная тень */
}

.btn-text-content {
    position: relative;
}
/* ==========================================================================
   15. СТИЛИ ГЛАВНОГО БАННЕРА (ПЕРВЫЙ ВИТРИННЫЙ ЭКРАН САЙТА) — ПОЛНАЯ РАЗВЕРТКА
   ========================================================================== */
.hero-section {
    background: transparent !important; 
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    height: calc(90vh - 155px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 50px;
    margin-bottom: 60px;
    width: 100%;
    position: relative;
}

.hero-content-wrapper {
    max-width: 950px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: heroFadeSlideIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

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

.hero-brand-top-label {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 7px; 
    color: #cc6d52; 
    margin-bottom: 30px;
}

.hero-main-heading-title {
    font-size: 56px;
    color: #382d27;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 30px;
    letter-spacing: -0.8px; 
}

.hero-subheading-subtitle {
    font-size: 19px;
    color: #8a766c;
    margin-bottom: 55px;
    font-style: italic; 
    font-weight: 400;
    line-height: 1.65;
    max-width: 750px;
}

.hero-action-buttons-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* --------------------------------------------------------------------------
   16. ОБЩИЕ СИСТЕМНЫЕ СВОЙСТВА ДЛЯ ВСЕХ ЭКРАНОВ-ТЕЛЕПОРТОВ МАСТЕРСКОЙ
   -------------------------------------------------------------------------- */
.page-inner-container, 
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 110px 50px;
    text-align: center;
    width: 100%;
}

.page-badge, 
.section-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #cc6d52;
    font-weight: 800;
    display: block;
    margin-bottom: 20px;
}

.page-main-title, 
.section-title {
    font-size: 38px;
    color: #382d27;
    font-weight: 500;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

.page-title-decorative-line,
.sections-title-decorative-line {
    width: 50px;
    height: 3px;
    background-color: #cc6d52;
    margin: 0 auto 35px auto;
    border-radius: 2px;
}

.page-subtitle {
    font-size: 16px;
    line-height: 1.85;
    color: #615047;
    max-width: 850px;
    margin: 0 auto 65px auto;
}

/* ==========================================================================
   17. СЕКЦИЯ ОТЗЫВОВ СЧАСТЛИВЫХ МАМ (МЯГКИЙ КИНЕМАТОГРАФИЧНЫЙ ВЗЛЕТ КАРТОЧЕК)
   ========================================================================== */
.reviews-section-brand { 
    background: transparent !important; 
    background-color: transparent !important;
    width: 100%;
}

.reviews-section-header-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.section-title-underline-line {
    width: 50px;
    height: 3px;
    background-color: #cc6d52;
    margin-top: 16px;
    border-radius: 2px;
}

.reviews-grid-layout { 
    display: flex; 
    gap: 50px; 
    justify-content: center; 
    align-items: center;
    width: 100%;
}

.review-premium-card { 
    max-width: 600px; 
    width: 100%;
    padding: 50px; 
    text-align: center; 
    /* Прописываем упругий пружинящий эффект для парения отзывов, о котором ты просил */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.review-premium-card:hover {
    transform: translateY(-10px); /* Ультра-плавный контролируемый взлет */
    box-shadow: 0 25px 45px rgba(56, 45, 39, 0.08);
}

.review-img-box-container { 
    width: 100%; 
    height: 350px; 
    border-radius: 14px; 
    overflow: hidden; 
    margin-bottom: 40px; 
    border: 1px solid #f2ece7; 
}

.review-image-element { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.review-premium-card:hover .review-image-element {
    transform: scale(1.04); 
}

.review-text-content-box {
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
}

.review-paragraph-text { 
    font-size: 16px; 
    font-style: italic; 
    line-height: 1.85; 
    color: #615047; 
}

.review-author-signature-box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    color: #cc6d52; 
    text-transform: uppercase; 
    letter-spacing: 1.8px; 
}

.review-author-city-label {
    color: #8a766c; 
    font-weight: 500;
}
/* ==========================================================================
   18. ЭКРАН "ВЫГОДНЫЕ СЕТЫ" (СТРАНИЦА ГОТОВЫХ РЕШЕНИЙ ДЛЯ ДЕТСКОЙ)
   ========================================================================== */
#sets-page .page-inner-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.page-header-text-block-zone {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

/* ПРОСТОРНАЯ ГЕОМЕТРИЧЕСКАЯ СЕТКА ГОТОВЫХ КОМПЛЕКТОВ */
.sets-grid-layout {
    display: flex;
    gap: 45px;
    justify-content: center;
    align-items: stretch;
    margin-top: 45px;
    width: 100%;
}

/* КАРТОЧКА СЕТА С ВЫСОКИМ ВНУТРЕННИМ ВОЗДУХОМ */
.set-premium-card {
    flex: 1;
    max-width: 390px;
    padding: 55px 45px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    border-radius: 24px;
    /* Ультра-плавный взлет комплектов при наведении */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.set-premium-card:hover {
    transform: translateY(-10px); /* Сет упруго приподнимается над фоном Да Винчи */
    box-shadow: 0 25px 50px rgba(56, 45, 39, 0.09);
}

/* ВЫДЕЛЕНИЕ ЛУЧШЕГО КОМПЛЕКТА ДЛЯ СОВЕРШЕННОГО ВИЗУАЛА */
.premium-accent-border {
    border: 2px solid #cc6d52 !important; /* Толстая оранжевая рамка в цвет логотипа */
}

/* Округлый парящий бейдж поверх центрального комплекта */
.badge-set-indicator {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #cc6d52;
    color: #ffffff;
    font-size: 11px;
    padding: 6px 20px;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(204, 109, 82, 0.2);
}

.set-card-header-title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.set-card-main-title {
    font-size: 20px;
    color: #382d27;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.set-card-divider-line {
    width: 45px;
    height: 2px;
    background-color: #cc6d52;
}

.set-card-content-items-list-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.set-composition-lead-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a766c;
    font-weight: 800;
}

/* МАРКИРОВАННЫЙ СПИСОК ИЗДЕЛИЙ В СЕТЕ */
.set-list-items-ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.set-list-single-item {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #615047;
    line-height: 1.55;
    align-items: flex-start;
}

.set-item-dot {
    color: #cc6d52; /* Оранжевые маркеры-точки */
    font-weight: 800;
}

/* СПЕЦИФИКАЦИИ ВНУТРИ ВЫГОДНЫХ НАБОРОВ */
.set-card-technical-spec-box {
    width: 100%;
    margin-top: 5px;
}

.set-spec-table {
    width: 100%;
    border-collapse: collapse;
}

.set-spec-row {
    border-bottom: 1px dashed #f2ece7;
}

.set-spec-row:last-child {
    border-bottom: none;
}

.set-spec-row td {
    padding: 8px 0;
    font-size: 12px;
}

.set-spec-label {
    color: #8a766c;
    font-weight: 500;
    text-align: left;
}

.set-spec-value {
    color: #4a3e3d;
    font-weight: 700;
    text-align: right;
}

.set-card-footer-pricing-zone {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: auto; /* Жестко выравнивает ценники по нижней границе */
    align-items: center;
}

.set-price-display {
    font-size: 26px;
    font-weight: 800;
    color: #cc6d52; /* Цена выделена главным акцентом */
    letter-spacing: 0.5px;
}

/* ==========================================================================
   19. ЭКРАН "ДОСТАВКА И ОПЛАТА" (ДВУХКОЛОНОЧНЫЕ ИНФО-КАРТОЧКИ)
   ========================================================================== */
#delivery-page .page-inner-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.delivery-info-box-layout {
    display: flex;
    gap: 45px;
    text-align: left;
    margin-top: 30px;
    width: 100%;
}

/* Роскошная большая карточка с описанием условий получения посылок */
.delivery-card-premium {
    flex: 1;
    padding: 55px 50px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.delivery-card-premium:hover {
    transform: translateY(-5px); /* Легкое парение при наведении */
}

.delivery-card-icon-header {
    font-size: 28px;
    margin-bottom: 6px;
}

.delivery-card-title {
    font-size: 19px;
    color: #cc6d52;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.delivery-card-divider-line {
    width: 40px;
    height: 2px;
    background-color: #f0e6df;
}

.delivery-card-description {
    font-size: 15px;
    color: #615047;
    line-height: 1.8;
}

.delivery-card-description strong {
    font-weight: 700;
    color: #382d27;
}
/* ==========================================================================
   20. ДИЗАЙН СТРАНИЦЫ "О НАС" (ИСТОРИЯ БРЕНДА, ЦИТАТЫ И ЦЕННОСТИ)
   ========================================================================== */
#about-page .page-inner-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.page-title-decorative-line {
    width: 60px;
    height: 3px;
    background-color: #cc6d52; /* Наш терракотово-оранжевый акцент */
    margin: 15px auto 35px auto;
    border-radius: 2px;
}

/* Двухколоночный богатый макет страницы истории */
.about-page-rich-content-layout {
    display: flex;
    gap: 55px;
    text-align: left;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Левая текстовая карточка с историей с 2017 года */
.about-rich-text-story-card {
    flex: 1.3;
    padding: 55px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-paragraph-text {
    font-size: 16px;
    line-height: 1.85;
    color: #615047;
}

.about-paragraph-text strong {
    font-weight: 700;
    color: #382d27;
}

/* Премиальный блок глубокой цитаты мастера Лейлы */
.about-premium-blockquote {
    font-size: 18px;
    font-style: italic;
    line-height: 1.75;
    color: #cc6d52;
    border-left: 4px solid #cc6d52; /* Оранжевая строгая черта слева */
    padding-left: 25px;
    margin: 15px 0;
    font-weight: 500;
}

/* Правая вертикальная сетка ценностей производства */
.about-values-grid-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-value-item-card {
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.about-value-item-card:hover {
    transform: translateY(-4px);
}

.about-value-card-icon-box {
    font-size: 26px;
}

.about-value-card-title {
    font-size: 16px;
    color: #382d27;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-value-card-description {
    font-size: 13px;
    color: #8a766c;
    line-height: 1.65;
}

/* ==========================================================================
   21. РАЗДЕЛ "ОПТОВИКАМ" (КОММЕРЧЕСКИЕ ПРЕДЛОЖЕНИЯ И КНОПКИ СВЯЗИ)
   ========================================================================== */
#wholesale-page .page-inner-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.wholesale-layout-box {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
}

.wholesale-text-card {
    max-width: 950px; /* Сделали шире под внутреннюю подсетку */
    width: 100%;
    padding: 60px;
    text-align: left;
}

.wholesale-card-heading-text {
    font-size: 24px;
    color: #382d27;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.wholesale-card-divider-line {
    width: 50px;
    height: 2px;
    background-color: #cc6d52;
    margin: 15px 0 25px 0;
}

.wholesale-card-description-text {
    font-size: 15px;
    color: #615047;
    line-height: 1.8;
    margin-bottom: 45px;
}

/* Микросетка целевых коммерческих предложений B2B */
.wholesale-partners-types-subgrid {
    display: flex;
    gap: 25px;
    margin-bottom: 45px;
    width: 100%;
}

.partner-type-mini-block {
    flex: 1;
    background-color: #faf6f0; /* Мягкий бежевый тон контраста */
    padding: 30px 25px;
    border-radius: 14px;
    border: 1px solid #f2ece7;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.partner-icon-mini-box {
    font-size: 22px;
}

.partner-mini-title {
    font-size: 15px;
    color: #cc6d52;
    font-weight: 700;
}

.partner-block-p {
    font-size: 13px;
    color: #8a766c;
    line-height: 1.6;
}

/* Сетка сочных кнопок соцсетей */
.wholesale-links-buttons-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.wholesale-btn-social-wrapper {
    flex: 1;
    min-width: 200px;
}

.social-btn {
    text-decoration: none;
    color: #ffffff;
    padding: 16px 30px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Настраиваем пружинящий подъем кнопок мессенджеров */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                filter 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-5px); /* Сочный взлет кнопок мессенджеров */
    filter: brightness(1.05);
    box-shadow: 0 12px 25px rgba(56, 45, 39, 0.12);
}

/* Цвета мессенджеров */
.wa { background-color: #25D366; } 
.tg { background-color: #0088cc; } 
.inst { background-color: #cc6d52; }
/* ==========================================================================
   22. ИНТЕРФЕЙС ЦЕНТРИРОВАННОЙ ИНТЕРАКТИВНОЙ КОРЗИНЫ ПОКУПОК
   ========================================================================== */
#cart-page .page-inner-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.cart-centered-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
}

.cart-layout-box {
    display: flex;
    gap: 40px;
    text-align: left;
    align-items: flex-start;
    max-width: 950px;
    width: 100%;
}

.cart-items-list {
    flex: 1;
    padding: 45px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-empty-state-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 160px;
}

.cart-empty-text {
    font-size: 16px;
    color: #8a766c;
    text-align: center;
    line-height: 1.6;
}

.cart-empty-link {
    color: #cc6d52;
    text-decoration: none;
    font-weight: 700;
}

/* Динамические строки товаров, генерируемые JavaScript-мозгом */
.js-cart-list-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.js-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2ece7;
    padding-bottom: 16px;
}

.js-cart-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.js-cart-title {
    font-size: 16px;
    font-weight: 600;
    color: #382d27;
}

.js-cart-price {
    font-size: 15px;
    color: #cc6d52;
    font-weight: 700;
}

/* Изящная круглая кнопка удаления [×] по крестику */
.js-delete-btn {
    background: #f2eae4;
    border: none;
    color: #8a766c;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s, color 0.2s;
}

.js-delete-btn:hover {
    background-color: #cc6d52;
    color: #ffffff;
    transform: scale(1.08);
}

/* ИТОГОВАЯ РАСЧЕТНАЯ КАРТОЧКА КОРЗИНЫ ТОВАРОВ */
.cart-total-card {
    width: 350px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-total-card-header h3 {
    font-size: 13px;
    color: #8a766c;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.total-price-display {
    font-size: 34px;
    font-weight: 800;
    color: #382d27;
}

.cart-total-card-divider {
    width: 100%;
    height: 1px;
    background-color: #f2ece7;
}

.delivery-notice, .payment-notice {
    font-size: 13px;
    color: #8a766c;
    line-height: 1.5;
}

.delivery-notice {
    font-style: italic;
}

.cart-total-action-btn-box {
    width: 100%;
    margin-top: 10px;
}

.checkout-btn {
    text-align: center;
    width: 100%;
}

/* ==========================================================================
   23. СТРАНИЦА ПРОДВИЖЕНИЯ "ПОДЕЛИТЬСЯ САЙТОМ" (СТРУКТУРА ПОД QR-КОД)
   ========================================================================== */
#share-page .page-inner-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.share-box-layout {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    text-align: left;
    width: 100%;
    max-width: 950px;
    margin: 30px auto 0 auto;
}

.qr-placeholder-card, 
.copy-link-card {
    flex: 1;
    padding: 45px;
}

.qr-code-zone {
    width: 220px;
    height: 220px;
    background-color: #faf6f0;
    border: 2px dashed #e6dbd3;
    border-radius: 14px;
    margin: 0 auto 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a766c;
    font-size: 14px;
}

.qr-card-text {
    text-align: center;
    font-size: 14px;
    color: #8a766c;
    line-height: 1.6;
}

.copy-card-header-box h3 {
    font-size: 18px;
    color: #382d27;
    font-weight: 600;
}

.copy-card-divider {
    width: 40px;
    height: 2px;
    background-color: #cc6d52;
    margin-top: 10px;
}

.link-url-text {
    font-size: 20px;
    font-weight: 700;
    color: #cc6d52;
    margin: 25px 0 35px 0;
    letter-spacing: 0.5px;
}

.copy-success-msg {
    display: none;
    font-size: 14px;
    color: #25D366;
    font-weight: 600;
    margin-top: 20px;
}
/* ==========================================================================
   24. ОФИЦИАЛЬНЫЙ ПОДВАЛ (ФУТЕР) С ЮРИДИЧЕСКИМИ ТИТРАМИ ЗАЩИТЫ ПРАВ
   ========================================================================== */
.site-footer {
    background-color: #ffffff;
    border-top: 1px solid #f0e6df;
    padding: 40px 60px;
    font-size: 13px;
    color: #8a766c;
    margin-top: auto; /* Намертво держит подвал внизу страницы при любом объеме контента */
    width: 100%;
}

.footer-container-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* Дорогая, аккуратная ссылка на тебя в правом нижнем углу */
.developer-link-anchor {
    color: #cc6d52;
    font-weight: 700;
    border-bottom: 1px dashed #cc6d52;
    transition: all 0.3s ease;
}

.developer-link-anchor:hover {
    color: #b55d44;
    border-bottom-color: transparent;
}
/* ==========================================================================
   ТОТАЛЬНАЯ МНОГОСЛОЙНАЯ АДАПТИВНОСТЬ БРЕНДА SVYAZALA LEYLA (ФИНАЛ)
   ========================================================================== */

/* ФИКС №4: Идеальные пропорции картинок без размытия и сжатия (object-fit: cover) */
img, video {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}




/* ==========================================================================
   СЛОЙ №2: СТРОГО ДЛЯ ПЛАНШЕТОВ (ФИКС №2: Идеальный стык от 430.01px до 1024px)
   ========================================================================== */
@media screen and (min-width: 431px) and (max-width: 1024px) {
    
    .header-main-flex-container {
        padding: 0 20px;
        height: 90px;
        gap: 15px;
    }
    .main-nav { gap: 15px; }
    .nav-link-teleport { font-size: 13px; }
    .logo-image-file-element { height: 65px; }
    .header-right-side { gap: 12px; }
    .header-phone { font-size: 13px; padding: 8px 14px; white-space: nowrap; word-break: keep-all; }
    .cart-btn-nav { padding: 10px 16px; font-size: 13px; }

    #catalog-page .catalog-layout-container {
        flex-direction: column;
        padding: 20px;
    }
    #catalog-page .sidebar-menu-wrapper {
        width: 100%;
        margin-bottom: 30px;
    }
    #catalog-page .cat-menu-list-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    #catalog-page .cat-menu-single-item { margin-bottom: 0; }
    #catalog-page .cat-anchor-link { padding: 10px 16px; background-color: #f4f1ee; border-radius: 10px; }
    #catalog-page .cat-link-arrow-indicator { display: none; }
    #catalog-page .catalog-products-view-aside { width: 100%; }

    /* ГРИД-СЕТКИ ТОВАРОВ НА ПЛАНШЕТЕ: По 2 карточки в ряд */
    .products-grid-layout, .sets-grid-layout, .delivery-details-info-grid, .wholesale-partners-types-subgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .reviews-grid-layout, .about-values-grid-layout {
        grid-template-columns: 1fr;
    }
    
    #home-page .hero-main-title { font-size: 2.2rem; }
    .wholesale-links-buttons-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
}
/* ==========================================================================
   СЛОЙ №1: СТРОГО ДЛЯ СМАРТФОНОВ (Вертикальные экраны до 430px) — ФИНАЛЬНАЯ СТАБИЛИЗАЦИЯ
   ========================================================================== */
@media screen and (max-width: 600px) {
    
    /* ГЛОБАЛЬНЫЙ СБРОС ДЕСКТОПНЫХ ВЫЛЕТОВ */
    html, 
    html body {
        font-size: 14px;
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* ФИКС НАБОРОВ: Сброс жестких ограничений и паддингов, съедавших боковые плашки */
    html body .page-inner-container, 
    html body #home-page .hero-section,
    html body #catalog-page .catalog-layout-container {
        padding: 10px 12px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    
    html body #home-page .sets-grid-layout,
    html body .sets-grid-layout {
        display: grid;
        grid-template-columns: 1fr; 
        gap: 14px;
        width: 100%;
        padding: 0;
    }
    
    html body #home-page .set-premium-card,
    html body .set-premium-card, 
    html body .product-premium-card-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0; /* Лечит распирание карточки от длинного десктопного текста */
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    /* 1. ОРАНЖЕВАЯ ЛЕНТА ДОСТАВКИ — СТРОГО У ПОТОЛКА */
    html body .top-announcement-bar {
        position: static; /* Возвращаем в поток, убирая наезды хедера */
        display: block;
        width: 100%;
        height: auto;
        padding: 6px 10px;
        box-sizing: border-box;
        margin: 0;
    }

    /* 2. БЕЛАЯ ПЛАШКА ХЕДЕРА — СТРОГО ПОД ЛЕНТОЙ БЕЗ СКРОЛЛА ЗА ЭКРАНОМ */
    html body header.site-header {
        position: relative; /* Отключаем fixed/sticky следование за экраном */
        display: block;
        width: 100%;
        background: #ffffff;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #f4f1ee;
    }

    /* Каркас хедера: выстраивает все элементы в одну ультратонкую линию */
    html body header.site-header .header-main-flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; /* Полный запрет прыжков на вторую строку */
        justify-content: space-between;
        align-items: center;
        height: 52px; /* Фиксированная тонкая высота плашки */
        padding: 0 10px;
        gap: 8px;
        box-sizing: border-box;
    }

    /* ЛОГОТИП — СЛЕВА ВНУТРИ ПЛАШКИ */
    html body header.site-header .header-center-logo-zone {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0; /* Полная защита логотипа от сжатия */
        margin: 0;
        width: auto;
    }
    html body header.site-header .logo-image-file-element {
        height: 32px; /* Компактный размер под тонкую высоту плашки */
        width: auto;
    }

    /* РЕЗИНОВАЯ ЛЕНТА НАВИГАЦИИ (Каталог, О нас...) — СТРОГО ПОСЕРЕДИНЕ */
    html body header.site-header .main-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        flex-grow: 1; /* Занимает только доступную свободную нишу */
        width: auto;  /* Перебивает десктопную фиксированную ширину */
        overflow-x: auto; /* Горизонтальный скролл только для текстовых вкладок */
        white-space: nowrap;
        gap: 14px;
        height: 100%;
        padding: 0 4px;
        margin: 0;
        border: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Защита текстовых вкладок навигации от деформации во флексе */
    html body header.site-header .main-nav a,
    html body header.site-header .nav-link-teleport {
        flex-shrink: 0;
        display: inline-block;
    }

    /* НОМЕР, КОРЗИНА И QR — СТРОГО СПРАВА НА ОДНОМ УРОВНЕ (НЕ СКРОЛЛИТСЯ) */
    html body header.site-header .header-right-side {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        flex-shrink: 0; /* Кнопки зафиксированы, не улетают в скролл меню */
        width: auto;
        gap: 6px;
        padding: 0;
        margin-left: auto; /* Магнит к правому краю белой плашки */
    }

    /* Мобильные размеры кнопок правой группы */
    html body header.site-header .header-phone {
        font-size: 10px;
        padding: 4px 6px;
        white-space: nowrap;
    }
    html body header.site-header .cart-btn-nav { 
        padding: 4px 6px; 
        font-size: 10px; 
        white-space: nowrap;
    }
    html body header.site-header .qr-link-badge { 
        padding: 4px 6px; 
        font-size: 10px; 
        white-space: nowrap;
    }

    /* Скрытие системных полос прокрутки хедера и каталога */
    html body header.site-header .main-nav::-webkit-scrollbar,
    html body #catalog-page .cat-menu-list-container::-webkit-scrollbar {
        display: none;
    }

    /* 3. ПОЛНОЕ ВОССТАНОВЛЕНИЕ И СТАБИЛИЗАЦИЯ КАТАЛОГА */
    html body #catalog-page .catalog-layout-container {
        display: flex;
        flex-direction: column; /* Сайдбар перестраивается наверх над товарами */
        padding: 10px 5px;
    }
    html body #catalog-page .sidebar-menu-wrapper {
        width: 100%;
        position: relative;
        top: 0;
        margin-bottom: 15px;
    }
    html body #catalog-page .cat-menu-list-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        gap: 8px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    html body #catalog-page .cat-menu-single-item { 
        margin-bottom: 0; 
        display: inline-block;
    }
    html body #catalog-page .cat-anchor-link { 
        padding: 6px 12px; 
        background-color: #f4f1ee; 
        border-radius: 20px; 
        font-size: 12px; 
    }
    html body #catalog-page .cat-link-arrow-indicator { 
        display: none; /* Скрываем десктопные стрелочки */
    }

    /* Перевод контентных гридов в одну адаптивную колонку */
    html body #catalog-page .catalog-products-view-aside { 
        width: 100%; 
        padding: 0; 
    }
    html body .products-grid-layout, 
    html body .reviews-grid-layout, 
    html body .about-values-grid-layout, 
    html body .wholesale-partners-types-subgrid, 
    html body .delivery-details-info-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
    }
    html body .product-image-container-box { min-height: 220px; }
}

/* ==========================================================================
   СТАБИЛИЗИРУЮЩИЙ СЛОЙ АДАПТИВНОСТИ: MOBILE + TABLET FIXES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body.site-body {
    min-width: 320px;
    width: 100%;
}

.independent-page-view,
.page-inner-container,
.section-container,
.catalog-layout-container,
.catalog-viewport-content {
    max-width: 100%;
}

#navigation-menu-top {
    padding-left: clamp(12px, 2.5vw, 40px);
    min-width: 0;
    scrollbar-width: none;
}

#navigation-menu-top::-webkit-scrollbar,
.cat-menu-list-container::-webkit-scrollbar {
    display: none;
}

.header-main-flex-container,
.main-nav,
.header-right-side,
.catalog-layout-container,
.catalog-viewport-content,
.products-grid-layout,
.sets-grid-layout,
.delivery-info-box-layout,
.about-page-rich-content-layout,
.wholesale-partners-types-subgrid,
.wholesale-links-buttons-grid,
.cart-layout-box,
.share-box-layout,
.footer-container-box {
    min-width: 0;
}

.site-header {
    padding-inline: clamp(16px, 3vw, 50px);
}

.header-main-flex-container {
    gap: clamp(16px, 2vw, 32px);
}

.main-nav {
    gap: clamp(14px, 2vw, 30px);
}

.main-nav .nav-link-teleport,
.cat-menu-list-container a.cat-anchor-link,
.cart-btn-nav,
.qr-link-badge,
.btn-primary,
.add-to-cart-btn,
.social-btn {
    overflow-wrap: normal;
    text-align: center;
}

.logo {
    width: clamp(72px, 7vw, 100px);
    height: clamp(72px, 7vw, 100px);
}

.header-right-side {
    gap: clamp(10px, 1.5vw, 25px);
}

.product-image-container-box.has-image-fallback,
.review-img-box-container.has-image-fallback {
    background-image: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(250,246,240,0.82)), url('images/fon-pattern.jpg');
    background-position: center;
    background-size: cover;
}

.product-image-container-box.has-image-fallback::after,
.review-img-box-container.has-image-fallback::after {
    content: attr(data-fallback-label);
    position: absolute;
    inset: auto 16px 16px 16px;
    z-index: 2;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #8a766c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 8px 20px rgba(56, 45, 39, 0.08);
}

.product-image-container-box.has-image-fallback .product-card-img-element,
.review-img-box-container.has-image-fallback .review-image-element {
    opacity: 0.28;
    filter: saturate(0.75);
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    body.site-body {
        padding-top: 131px;
    }

    .site-header {
        height: 96px;
        padding-inline: 22px;
    }

    .main-nav .nav-link-teleport {
        font-size: 11px;
        letter-spacing: 0.9px;
    }

    .phone-display-box {
        display: none;
    }

    .cart-btn-nav {
        padding: 11px 16px;
    }

    .qr-link-badge {
        padding: 10px 14px;
    }
}

@media screen and (max-width: 1024px) {
    body.site-body {
        padding-top: 0;
        background-attachment: scroll;
    }

    .top-announcement-bar {
        position: static;
        height: auto;
        min-height: 34px;
        padding: 7px 14px;
    }

    .announcement-inner-content {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .announcement-text-main {
        line-height: 1.4;
        letter-spacing: 0.9px;
    }

    header.site-header {
        position: sticky;
        top: 0;
        height: auto;
        min-height: 76px;
        padding: 10px 18px;
    }

    header.site-header .header-main-flex-container {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        height: auto;
        gap: 12px;
        padding: 0;
    }

    header.site-header .logo {
        width: 58px;
        height: 58px;
    }

    header.site-header .main-nav {
        height: auto;
        overflow-x: auto;
        padding: 0;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
    }

    header.site-header .nav-item-wrapper {
        flex: 0 0 auto;
        height: auto;
    }

    header.site-header .main-nav .nav-link-teleport {
        font-size: 11px;
        letter-spacing: 0.9px;
        padding: 10px 0;
        white-space: nowrap;
    }

    header.site-header .phone-display-box {
        display: none;
    }

    header.site-header .header-right-side {
        gap: 8px;
        justify-content: flex-end;
    }

    header.site-header .cart-btn-nav {
        padding: 10px 12px;
        font-size: 11px;
        letter-spacing: 0.8px;
    }

    header.site-header .qr-link-badge {
        padding: 9px 11px;
        font-size: 10px;
        letter-spacing: 0.8px;
    }

    .hero-section {
        height: auto;
        min-height: calc(100svh - 120px);
        padding: 72px 28px 56px;
        margin-bottom: 42px;
    }

    .hero-content-wrapper {
        max-width: 760px;
        padding: 48px 34px;
    }

    .hero-main-heading-title {
        font-size: 40px;
        letter-spacing: 0;
    }

    .page-inner-container,
    .section-container {
        padding: 64px 28px;
    }

    .catalog-layout-container {
        flex-direction: column;
        gap: 24px;
        padding: 28px 18px;
    }

    .sidebar-menu-wrapper {
        position: relative;
        top: auto;
        width: 100%;
        min-width: 0;
        padding: 22px;
    }

    .sidebar-sticky-scroll-box {
        gap: 16px;
    }

    .cat-menu-list-container {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .cat-menu-single-item {
        flex: 0 0 auto;
        width: auto;
    }

    .cat-menu-list-container a.cat-anchor-link {
        width: auto;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 999px;
        background-color: #f4f1ee;
        white-space: nowrap;
    }

    .cat-menu-list-container a.cat-anchor-link:hover,
    .cat-menu-list-container a.cat-anchor-link.active-cat {
        padding-left: 14px;
    }

    .cat-link-arrow-indicator {
        display: none;
    }

    .catalog-viewport-content {
        padding: 28px 22px;
        gap: 32px;
    }

    .products-grid-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .product-premium-card-wrapper {
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 20px;
    }

    .product-image-container-box {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .sets-grid-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .set-premium-card {
        max-width: none;
        min-width: 0;
    }

    .delivery-info-box-layout,
    .wholesale-partners-types-subgrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .about-page-rich-content-layout,
    .cart-layout-box,
    .share-box-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cart-total-card {
        width: 100%;
    }
}

@media screen and (min-width: 431px) and (max-width: 860px) {
    header.site-header .header-main-flex-container {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "logo actions"
            "nav nav";
        gap: 10px 14px;
    }

    header.site-header .header-center-logo-zone {
        grid-area: logo;
    }

    header.site-header .header-right-side {
        grid-area: actions;
    }

    header.site-header .main-nav {
        grid-area: nav;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid #f2ece7;
    }
}

@media screen and (min-width: 431px) and (max-width: 700px) {
    .products-grid-layout,
    .sets-grid-layout,
    .delivery-info-box-layout,
    .wholesale-partners-types-subgrid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    html,
    html body {
        width: 100%;
        overflow-x: hidden;
    }

    body.site-body {
        min-width: 0;
    }

    html body .top-announcement-bar {
        position: static;
        padding: 8px 12px;
    }

    html body .announcement-text-main {
        display: block;
        max-width: 100%;
        font-size: 10px;
        letter-spacing: 0.6px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    html body .announcement-icon-sparkle {
        display: none;
    }

    html body header.site-header {
        position: sticky !important;
        top: 0 !important;
        display: flex !important;
        width: 100%;
        min-height: 0;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.96);
    }

    html body header.site-header .header-main-flex-container {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "logo actions actions"
            "nav nav nav";
        height: auto !important;
        padding: 0 !important;
        gap: 8px 10px;
        align-items: center;
    }

    html body header.site-header .header-center-logo-zone {
        grid-area: logo;
    }

    html body header.site-header .logo {
        width: 44px;
        height: 44px;
    }

    html body header.site-header .logo-image-file-element {
        width: 44px;
        height: 44px;
    }

    html body header.site-header .header-right-side {
        grid-area: actions;
        justify-content: flex-end;
        gap: 7px;
        min-width: 0;
    }

    html body header.site-header .phone-display-box {
        display: none;
    }

    html body header.site-header .cart-btn-nav {
        padding: 8px 10px;
        gap: 4px;
        font-size: 10px;
        letter-spacing: 0.4px;
        border-radius: 999px;
    }

    html body header.site-header .cart-text-label {
        display: none;
    }

    html body header.site-header .qr-link-badge {
        padding: 8px 10px;
        font-size: 10px;
        letter-spacing: 0.4px;
        border-radius: 999px;
    }

    html body header.site-header .qr-badge-wrapper {
        display: none;
    }

    html body header.site-header .main-nav {
        grid-area: nav;
        width: 100%;
        height: auto;
        padding: 5px 0 0;
        margin: 0;
        gap: 12px;
        border-top: 1px solid #f2ece7;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    html body header.site-header .nav-item-wrapper {
        flex: 0 0 auto;
        height: auto;
    }

    html body header.site-header .main-nav .nav-link-teleport {
        font-size: 10px;
        letter-spacing: 0.45px;
        padding: 8px 0;
    }

    html body #home-page .hero-section,
    html body .hero-section {
        height: auto;
        min-height: calc(100svh - 120px);
        padding: 32px 14px;
        margin-bottom: 28px;
    }

    html body .hero-content-wrapper {
        padding: 34px 18px;
        border-radius: 18px;
    }

    html body .hero-brand-top-label {
        font-size: 10px;
        letter-spacing: 2px;
        margin-bottom: 18px;
    }

    html body .hero-main-heading-title {
        font-size: 28px;
        line-height: 1.25;
        letter-spacing: 0;
        margin-bottom: 18px;
    }

    html body .hero-subheading-subtitle {
        font-size: 15px;
        margin-bottom: 26px;
    }

    html body .btn-primary {
        width: 100%;
        max-width: 320px;
        padding: 14px 18px;
        font-size: 12px;
        letter-spacing: 0.8px;
    }

    html body .page-inner-container,
    html body .section-container {
        padding: 32px 14px;
        border-radius: 18px;
    }

    html body .page-main-title,
    html body .section-title {
        font-size: 26px;
        line-height: 1.25;
        letter-spacing: 0;
        margin-bottom: 24px;
    }

    html body .page-subtitle {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 34px;
    }

    html body #catalog-page .catalog-layout-container {
        padding: 16px 12px;
        gap: 16px;
    }

    html body #catalog-page .sidebar-menu-wrapper {
        width: 100%;
        min-width: 0;
        padding: 16px;
        border-radius: 18px;
    }

    html body #catalog-page .cat-menu-list-container {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
        gap: 8px;
        padding-bottom: 0;
        white-space: normal;
    }

    html body #catalog-page .cat-menu-single-item {
        flex: 0 0 auto;
        width: 100%;
    }

    html body #catalog-page .cat-menu-list-container a.cat-anchor-link {
        width: 100%;
        justify-content: center;
        padding: 9px 12px;
        border-radius: 999px;
        background-color: #f4f1ee;
        font-size: 12px;
        white-space: normal;
    }

    html body #catalog-page .catalog-viewport-content {
        padding: 20px 14px;
        border-radius: 18px;
        gap: 24px;
    }

    html body .cat-header-title-container-box {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    html body .cat-block-main-title {
        font-size: 24px;
        line-height: 1.25;
        letter-spacing: 0;
    }

    html body .products-grid-layout,
    html body .reviews-grid-layout,
    html body .sets-grid-layout,
    html body .delivery-info-box-layout,
    html body .about-page-rich-content-layout,
    html body .about-values-grid-layout,
    html body .wholesale-partners-types-subgrid,
    html body .wholesale-links-buttons-grid,
    html body .cart-layout-box,
    html body .share-box-layout,
    html body .footer-container-box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
    }

    html body .product-premium-card-wrapper,
    html body .set-premium-card,
    html body .review-premium-card,
    html body .delivery-card-premium,
    html body .about-rich-text-story-card,
    html body .about-value-item-card,
    html body .wholesale-text-card,
    html body .partner-type-mini-block,
    html body .cart-items-list,
    html body .cart-total-card,
    html body .qr-placeholder-card,
    html body .copy-link-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 20px;
        border-radius: 18px;
    }

    html body .product-image-container-box,
    html body .review-img-box-container {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    html body .product-card-title-heading {
        font-size: 16px;
    }

    html body .price-tag-value,
    html body .set-price-display {
        font-size: 21px;
    }

    html body .add-to-cart-btn,
    html body .social-btn,
    html body .checkout-btn {
        min-height: 46px;
        padding: 13px 16px;
        font-size: 12px;
        letter-spacing: 0.8px;
    }

    html body .js-cart-item {
        align-items: flex-start;
        gap: 12px;
    }

    html body .link-url-text {
        font-size: 15px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    html body .qr-code-zone {
        width: min(220px, 100%);
        height: auto;
        aspect-ratio: 1;
    }

    html body .site-footer {
        padding: 24px 14px;
        text-align: center;
    }
}

@media screen and (max-width: 360px) {
    html body .hero-main-heading-title {
        font-size: 25px;
    }
}

/* ==========================================================================
   ФИНАЛЬНАЯ ДОВОДКА БРЕНДА: УЗОР, ТОНКАЯ ШАПКА, ЧИТАЕМОСТЬ, СКИДКИ
   ========================================================================== */
body.site-body {
    background-color: #fff2ea;
    background-image: url('images/brand-pattern.svg');
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: 300px 300px;
    padding-top: 109px;
}

.site-header {
    top: 35px;
    height: 74px;
    padding-inline: clamp(18px, 2.4vw, 38px);
    background-color: rgba(255, 255, 255, 0.95);
}

.header-main-flex-container {
    max-width: 1520px;
    gap: 18px;
}

.logo {
    width: clamp(54px, 4.7vw, 66px);
    height: clamp(54px, 4.7vw, 66px);
}

#navigation-menu-top {
    padding-left: 0;
}

.main-nav {
    flex: 1 1 auto;
    justify-content: center;
    gap: clamp(12px, 1.35vw, 24px);
    overflow: visible;
}

.nav-item-wrapper {
    flex: 0 0 auto;
}

.main-nav .nav-link-teleport {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
}

.main-nav .nav-link-teleport::after {
    height: 2px;
}

.header-right-side {
    flex: 0 0 auto;
    gap: 12px;
}

.header-phone {
    padding: 7px 12px;
    font-size: 12px;
}

.cart-btn-nav {
    padding: 10px 15px;
    gap: 7px;
    font-size: 10px;
    letter-spacing: 0.8px;
}

.qr-link-badge {
    padding: 9px 13px;
    font-size: 10px;
    letter-spacing: 0.9px;
}

.page-header-text-block-zone,
.cat-header-title-container-box {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 28px 30px;
    border: 1px solid rgba(240, 230, 223, 0.9);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 42px rgba(56, 45, 39, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.cat-header-title-container-box {
    align-items: flex-start;
}

.page-badge,
.section-subtitle,
.cat-badge-top-indicator {
    color: #b95f46;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.page-subtitle,
.cat-block-description-text {
    max-width: 860px;
    color: #4f403a;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.cat-block-description-text {
    margin: 0;
}

.cat-block-main-title {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

.set-card-footer-pricing-zone {
    gap: 16px;
}

.set-price-display-discount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    width: 100%;
}

.set-old-price {
    color: #aaa19c;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(138, 118, 108, 0.75);
}

.set-new-price {
    color: #cc6d52;
    background: #fff5ef;
    border: 1px solid rgba(204, 109, 82, 0.22);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(204, 109, 82, 0.12);
}

.royal-price .set-new-price {
    color: #382d27;
    border-color: rgba(56, 45, 39, 0.2);
    box-shadow: 0 10px 22px rgba(56, 45, 39, 0.09);
}

.set-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #cc6d52;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.6px;
    box-shadow: 0 8px 18px rgba(204, 109, 82, 0.2);
}

.product-image-container-box.has-image-fallback,
.review-img-box-container.has-image-fallback {
    background-image:
        linear-gradient(135deg, rgba(255, 250, 246, 0.58), rgba(255, 255, 255, 0.82)),
        url('images/brand-pattern.svg');
    background-size: auto, 220px 220px;
}

.modal-open {
    overflow: hidden;
}

.developer-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.developer-profile-modal.is-open {
    display: flex;
}

.developer-profile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(56, 45, 39, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.developer-profile-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    padding: 34px 28px 30px;
    border: 1px solid rgba(204, 109, 82, 0.2);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 241, 0.96)),
        url('images/brand-pattern.svg');
    background-size: auto, 160px 160px;
    box-shadow: 0 28px 70px rgba(56, 45, 39, 0.24);
    text-align: center;
}

.developer-profile-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(204, 109, 82, 0.1);
    color: #9e4d39;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.developer-profile-badge {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(204, 109, 82, 0.12);
    color: #b95f46;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.developer-profile-title {
    margin-bottom: 10px;
    color: #382d27;
    font-size: clamp(28px, 6vw, 38px);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.developer-profile-text {
    margin: 0 auto 20px;
    max-width: 320px;
    color: #5b4a43;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
}

.developer-profile-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 22px;
    border-radius: 999px;
    background: #cc6d52;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.4px;
    box-shadow: 0 16px 32px rgba(204, 109, 82, 0.26);
}

@media screen and (min-width: 1025px) and (max-width: 1380px) {
    .phone-display-box {
        display: none;
    }

    .main-nav {
        gap: clamp(10px, 1.1vw, 16px);
    }

    .main-nav .nav-link-teleport {
        font-size: 10px;
        letter-spacing: 0.7px;
    }
}

@media screen and (max-width: 1024px) {
    html body.site-body {
        padding-top: 0;
    }

    body.site-body {
        background-attachment: scroll;
        background-size: 240px 240px;
    }

    header.site-header {
        top: 0;
        height: auto;
        min-height: 58px;
        padding: 7px 14px;
    }

    header.site-header .logo {
        width: 46px;
        height: 46px;
    }

    header.site-header .main-nav .nav-link-teleport {
        min-height: 30px;
        padding: 7px 0;
        font-size: 10px;
        letter-spacing: 0.55px;
    }

    header.site-header .cart-btn-nav {
        padding: 8px 11px;
    }

    header.site-header .qr-link-badge {
        padding: 8px 10px;
    }
}

@media screen and (max-width: 600px) {
    html body.site-body {
        padding-top: 0;
        background-size: 185px 185px;
    }

    html body header.site-header {
        top: 0 !important;
        height: auto;
        padding: 7px 10px;
    }

    html body header.site-header .logo,
    html body header.site-header .logo-image-file-element {
        width: 36px;
        height: 36px;
    }

    html body header.site-header #navigation-menu-top.main-nav {
        gap: 4px !important;
        padding-top: 4px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    html body header.site-header #navigation-menu-top.main-nav .nav-item-wrapper:first-child {
        margin-left: 0 !important;
    }

    html body header.site-header #navigation-menu-top.main-nav .nav-item-wrapper:last-child {
        margin-right: 12px !important;
    }

    html body header.site-header .main-nav .nav-link-teleport {
        min-height: 28px;
        padding: 6px 0;
        font-size: 8px;
        letter-spacing: 0;
    }

    html body .page-header-text-block-zone,
    html body .cat-header-title-container-box {
        width: 100%;
        max-width: calc(100vw - 48px);
        min-width: 0;
        padding: 22px 18px;
        border-radius: 16px;
        overflow: visible;
    }

    html body #catalog-page .catalog-layout-container,
    html body #catalog-page .catalog-viewport-content {
        width: 100%;
        max-width: calc(100vw - 24px);
        min-width: 0;
        overflow: visible;
    }

    html body .cat-block-main-title {
        display: block;
        max-width: 100%;
        font-size: clamp(21px, 6.2vw, 24px);
        line-height: 1.18;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html body .page-subtitle,
    html body .cat-block-description-text {
        font-size: 14px;
        line-height: 1.65;
    }

    html body .set-price-display-discount {
        gap: 7px;
    }

    html body .set-old-price {
        font-size: 14px;
    }

    html body .set-new-price {
        padding: 8px 12px;
        font-size: 21px;
    }

    html body .set-discount-badge {
        min-width: 38px;
        min-height: 24px;
        font-size: 10px;
    }
}