/*
================================================================================
                              СОДЕРЖАНИЕ
================================================================================

  ЧАСТЬ 0: ОБЩИЕ КОМПОНЕНТЫ (все файлы) ........................... [000]
    0.1  Кнопка (универсальная) ................................... [000.1]
    0.2  Кнопка-сердце (избранное) ................................ [000.2]

  ЧАСТЬ 1: HEADER.PHP — Шапка и навигация ......................... [001]
    1.1  Глобальные стили (body, :root) ........................... [001.1]
    1.2  Header — главный экран с шкафом .......................... [001.2]
    1.3  Shrinking Line — сужающаяся линия ....................... [001.3]
    1.4  Catalog Section — секция каталога ....................... [001.4]
    1.5  Catalog Header — шапка каталога с поиском ............... [001.5]

  ЧАСТЬ 2: INDEX.PHP — Главная страница ........................... [002]
    2.1  River Carousel — бесконечная карусель ................... [002.1]
    2.2  Promo Text — промо-текст ................................ [002.2]
    2.3  Icon Section — иконки категорий ......................... [002.3]
    2.4  Restoration Section — секция реставрации ................ [002.4]
    2.5  Interior Section — интерьер-слайдер ..................... [002.5]
    2.6  Checkerboard Section — шахматная полоса ................. [002.6]
    2.7  Exclusive Section — эксклюзивная галерея ................ [002.7]
    2.8  Footer Lid — декоративная крышка ....................... [002.8]

  ЧАСТЬ 3: FOOTER.PHP — Подвал .................................... [003]
    3.1  Footer Content — контент подвала ........................ [003.1]

  ЧАСТЬ 4: CATALOG.PHP — Страница каталога ....................... [004]
    4.1  Catalog Controls — фильтры и хлебные крошки ............ [004.1]
    4.2  Product Card — карточка товара .......................... [004.2]

  ЧАСТЬ 5: PRODUCT.PHP — Страница товара .......................... [005]
    5.1  Product Breadcrumb — хлебные крошки .................... [005.1]
    5.2  Product Gallery — галерея изображений .................. [005.2]
    5.3  Product Info — информация о товаре ..................... [005.3]
    5.4  Product Description — описание товара .................. [005.4]

  MEDIA QUERIES — АДАПТИВ (все файлы) ............................ [MQ]
    MQ-001  @media max-width 991px ............................... [MQ-001]
    MQ-002  @media min-width 992px ............................... [MQ-002]
    MQ-003  @media max-width 768px ............................... [MQ-003]
    MQ-004  PRODUCT MOBILE @media max-width 991px ................ [MQ-004]

  ЧАСТЬ 6: QUICKCHECKOUT — Быстрое оформление заказа ........... [006]
    6.1  Основной контейнер krasivo-quickcheckout ............... [006.1]
    6.2  Правая колонка (платеж/адрес) .......................... [006.2]
    6.3  Поля ввода с нижним бордером ........................... [006.3]
    6.4  Комментарий к заказу ................................... [006.4]
    6.5  Фирменные кнопки cat-btn ............................... [006.5]
    6.6  Корзина товаров использует стили из common/cart.twig ... [006.6]

================================================================================
                              НАЧАЛО СТИЛЕЙ
================================================================================
*/


/*
================================================================================
  ЧАСТЬ 0: ОБЩИЕ КОМПОНЕНТЫ (все файлы)
================================================================================
*/

.mb-5 {
    margin-bottom: 5rem !important;
}
.offcanvas {
    z-index: 10450 !important;
}
.offcanvas-backdrop {
    z-index: 10400 !important;
}

/*
--------------------------------------------------------------------------------
  [000.1] КНОПКА (УНИВЕРСАЛЬНАЯ)
  Использование: <button class="btn-krasivo">Текст</button>
--------------------------------------------------------------------------------
*/
.btn-krasivo {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: #fff;
    border: 0;
    border-radius: 3px;
    padding: 9px 60px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-krasivo:hover {
    background: #f8f8f8;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-krasivo:active {
    transform: translateY(1px);
}

/* Cart button in wishlist */
.btn-cart {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 20px;
    font-size: 12px;
}

/*
--------------------------------------------------------------------------------
  [000.2] КНОПКА-СЕРДЦЕ (ИЗБРАННОЕ)
  Использование: <button class="heart-btn" onclick="this.classList.toggle('active')">
--------------------------------------------------------------------------------
*/

/* Heart button without SVG filter */
.heart-btn {
    position: absolute;
    top: 4px;
    right: 1px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 3;
}

/* ----- Новая иконка-сердце на чистом CSS ----- */
.heart-icon-css {
    display: block;
    transform: scale(0.7);
    width: 34px;
    height: 30px;
    clip-path: path("M15.9404 4.87269C19.6843 0.738513 24.3776 -1.0969 27.8565 0.671516C32.536 3.05042 33.2438 11.0485 29.4375 18.5358C26.1179 25.0657 20.4614 29.0494 15.9649 28.3834C11.4614 29.0809 5.7793 25.0922 2.44923 18.5416C-1.35692 11.0545 -0.648995 3.05647 4.03029 0.677376C7.50732 -1.09021 12.1976 0.742973 15.9404 4.87269Z");
    background: #ccc;
    box-shadow: inset 0px 4px 13px 0px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* ----- Состояния, используя твои классы ----- */

/* 1. Добавлено в вишлист (класс wl-add) */
.heart-btn.wl-add .heart-icon-css {
  background: linear-gradient(135deg, #B0806A 0%, #9C6654 40%, #6A4035 100%);
  box-shadow: 
    inset 0 2px 5px rgba(0,0,0,0.45),
    0 4px 12px rgba(156,102,84,0.4);
}

/* 2. Активное состояние (класс active) */
.heart-btn.active .heart-icon-css {
  background: linear-gradient(135deg, #A8654D 0%, #975139 40%, #5E3325 100%);
  box-shadow: 
    inset 0 3px 7px rgba(0,0,0,0.5),
    0 6px 16px rgba(151,81,57,0.5);
}

/* 4. Масштаб всей кнопки на active (как было) */
.heart-btn.active {
  transform: scale(1.1);
}

/* Кнопка */
/* Контейнер карточки товара (убедитесь, что у него есть это свойство) */
.product-thumb,
.product-card {
    position: relative;
}


/*
================================================================================
  ЧАСТЬ 1: HEADER.PHP — Шапка и навигация
================================================================================
*/

/*
--------------------------------------------------------------------------------
  [001.1] ГЛОБАЛЬНЫЕ СТИЛИ (body, :root)
  Файл: header.php
--------------------------------------------------------------------------------
*/
:root {
    --bg-accent: #C3AEA2;
    --main-dark: #000000;
}

body {
    overflow-x: hidden;
    background-color: #fff;
    margin: 0;
    padding: 0;
    font-family: 'Jost', sans-serif;
}


/*
--------------------------------------------------------------------------------
  [001.2] HEADER — ГЛАВНЫЙ ЭКРАН С ШКАФОМ
  Файл: header.php | Секция: <header class="header-bg">
  Элементы: .header-bg, .text-block, .shkaf
--------------------------------------------------------------------------------
*/
.header-bg {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(155deg, #975139 32%, #462217 95%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-radial-gradient(circle at center, #000 0.0001%, transparent 0.0002%), repeating-conic-gradient(#000 0.0001%, transparent 0.0005%);
    background-size: 2px 2px;
    opacity: 0.25;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.text-block {
    position: relative;
    z-index: 10;
    margin-right: 25%;
    margin-bottom: 5%;
    text-align: right;
    color: #fff;
}

.text-block h1 {
    font-family: 'Cormorant SC', serif;
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.text-block .subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 32px;
    color: var(--bg-accent);
    text-transform: uppercase;
}

.shkaf {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 110%;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
    margin-right: 10%;
}


/*
--------------------------------------------------------------------------------
  [001.3] SHRINKING LINE — СУЖАЮЩАЯСЯ ЛИНИЯ
  Файл: header.php | Секция: <section class="line-top">
  Элементы: .line-wrapper, .shrinking-line
--------------------------------------------------------------------------------
*/
.line-wrapper {
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.shrinking-line {
    width: 100%;
    height: 10px;
    background: var(--main-dark);
    transform-origin: center;
    will-change: transform;
}

/* Короткая линия (когда header скрыт) */
.shrinking-line.short-line {
    width: 200px;
    margin: 0 auto;
}


/*
--------------------------------------------------------------------------------
  [001.4] CATALOG SECTION — СЕКЦИЯ КАТАЛОГА (МЕНЮ)
  Файл: header.php | Секция: <section class="catalog-section">
  Элементы: .catalog-title, .buttons-row, .cat-btn, .inner-content, .icon-grid
--------------------------------------------------------------------------------
*/
.catalog-title {
    font-family: 'Jost', sans-serif;
    font-size: 32px;
    letter-spacing: 0.1em;
    margin: 0;
    white-space: nowrap;
}

.buttons-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 5px;
    position: relative;
    width: 100%;
}

.buttons-row > * {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cat-btn {
    background: #fff;
    border: 0;
    border-radius: 3px;
    text-transform: uppercase;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    padding: 8px 10px;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
}

.inner-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    opacity: 0;
    width: 100%;
    border-radius: 3px;
}

.icon-grid {
    display: grid;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background: white;
    text-align: center;
    padding: 30px 0;
    gap: 30px 10px;
}

.icon-link {
    text-decoration: none;
    color: #000;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-link img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 12px;
    filter: brightness(0);
    transition: all 0.4s ease;
}


/*
--------------------------------------------------------------------------------
  [001.5] CATALOG HEADER — ШАПКА КАТАЛОГА С ПОИСКОМ
  Файл: header.php | Секция: <div class="catalog-header">
  Элементы: .catalog-header, .header-search, .header-actions
--------------------------------------------------------------------------------
*/
.catalog-header {
    padding: 10px 0;
}

.catalog-header h1,
.brand-heading {
    font-size: 28px;
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    white-space: nowrap;
}

.header-search-wrapper {
    display: flex;
    z-index: 1002;
    position: relative;
}

.header-search-wrapper.smartsearch-active-wrapper .header-search{
    z-index: 999;
    position: relative;
    background: white;
    border-radius: 6px;
    padding: 4px;
}

.header-search {
    display: flex;
    align-items: center;
    background: transparent;
    width: 280px;
    position: relative;
    z-index: 999;
    padding: 4px;
}

.header-search::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
}

.header-search input {
    border: none !important;
    outline: none !important;
    padding: 5px !important;
    width: 100%;
    font-size: 14px;
    text-transform: lowercase;
    font-family: 'Jost', sans-serif !important;
    font-style: italic;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.header-search .btn-search {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}
.header-search .btn-search svg {
    height: 20px;
}

.header-actions {
    display: flex;
    align-items: baseline;
    gap: 16px;
    white-space: nowrap;
    position: relative;
}

.header-cart-wrap {
    position: relative;
}

.desktop-cart-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.desktop-cart-bg-overlay.open {
    opacity: 1;
    visibility: visible;
}
/*top: 6px;
    right: 4px;*/
.desktop-cart-overlay {
    position: absolute;
    top: -10px;
    right: -16px;
    z-index: 100;
    width: 400px;
    max-height: 80vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.desktop-cart-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.desktop-cart-overlay.open.sticky-visible {

}

.desktop-cart-overlay .btn-secondary,
.desktop-cart-overlay .btn-secondary:hover {
    transition: none;
}

.desktop-cart-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    position: relative;
}

.desktop-cart-title {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.desktop-cart-close-btn {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #975139;
    letter-spacing: 0.11em;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.desktop-cart-close-btn:hover {
    opacity: 0.7;
}

.desktop-cart-body {
    padding: 12px 16px;
}

.header-action-btn,
button.header-action-btn {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #975139;
    letter-spacing: 0.11em;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 0;
}

.header-action-btn:hover,
button.header-action-btn:hover {
    opacity: 0.7;
}

.header-wishlist-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.header-action-badge {
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #975139;
    line-height: 1;
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 0;
    transition: opacity 0.2s ease;
    opacity: 1;
}

.header-action-badge.hidden {
    opacity: 0;
    visibility: hidden;
}

.header-action-btn {
    position: relative;
}


/*
================================================================================
  ЧАСТЬ 2: INDEX.PHP — Главная страница
================================================================================
*/

/*
--------------------------------------------------------------------------------
  [002.1] RIVER CAROUSEL — БЕСКОНЕЧНАЯ КАРУСЕЛЬ
  Файл: index.php | Секция: <section class="river-carousel-section">
  Элементы: .main-carousel, .swiper-slide
--------------------------------------------------------------------------------
*/
.main-carousel {
    width: 100%;
    margin-top: 50px;
    cursor: grab;
    overflow: hidden;
}

.main-carousel:active {
    cursor: grabbing;
}

.swiper-wrapper {
    transition-timing-function: linear !important;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.swiper-slide img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
    pointer-events: none;
    display: block;
}


/*
--------------------------------------------------------------------------------
  [002.2] PROMO TEXT — ПРОМО-ТЕКСТ
  Файл: index.php | Секция: <section class="promo-text-section">
  Элементы: .promo-text
--------------------------------------------------------------------------------
*/
.promo-text {
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    max-width: 1000px;
    margin: 40px auto;
}


/*
--------------------------------------------------------------------------------
  [002.3] ICON SECTION — ИКОНКИ КАТЕГОРИЙ
  Файл: index.php | Секция: <section class="icon-section">
  Элементы: .icon-section
--------------------------------------------------------------------------------
*/
.icon-section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}


/*
--------------------------------------------------------------------------------
  [002.4] RESTORATION SECTION — СЕКЦИЯ РЕСТАВРАЦИИ
  Файл: index.php | Секция: <section class="restoration-section">
  Элементы: .striped-section, .grid-overlay, .cell, #shkaf2-img
--------------------------------------------------------------------------------
*/
.striped-section {
    position: relative;
    width: 100%;
    background-color: #D9D9D9;
    overflow: hidden;
}

.striped-section .bg-image {
    position: absolute;
    z-index: 1;
    object-fit: contain;
    opacity: 1;
    width: 80%;
    pointer-events: none;
    right: 0;
    bottom: 0;
}

.grid-overlay {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    z-index: 2;
}

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    aspect-ratio: 4 / 5;
    line-height: 1.2;
}

.cell.white {
    background-color: #ffffff;
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.3s linear;
}

.cell.white.visible {
    opacity: 1;
    transform: translateY(0);
}

.cell.transparent {
    background-color: transparent;
}

#shkaf2-img {
    will-change: transform;
    transition: transform 0.1s linear;
}


/*
--------------------------------------------------------------------------------
  [002.5] INTERIOR SECTION — ИНТЕРЬЕР-СЛАЙДЕР
  Файл: index.php | Секция: <section class="interior-section">
  Элементы: .interior-swiper, .interior-slide, .nav-btn
--------------------------------------------------------------------------------
*/
.interior-section {
    background-color: #fff;
}

.interior-swiper {
    position: relative;
    padding: 0 60px;
}

.interior-slide {
    display: flex;
    flex-direction: row;
    background: #fff;
    min-height: 500px;
    border: 1px solid #eee;
}

.slide-img-half {
    flex: 1;
    overflow: hidden;
}

.slide-img-half img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-text-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
    background: linear-gradient(to bottom, #F4F4F4 7%, #DBD9D9 100%);
}

.slide-text-half p {
    font-family: 'Jost', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: #000;
    max-width: 350px;
    margin-bottom: 60px;
}

.read-more {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-transform: lowercase;
    transition: opacity 0.3s;
}

.read-more:hover {
    color: #000;
    opacity: 0.7;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-prev {
    left: 0;
}

.nav-next {
    right: 0;
}

.nav-btn svg {
    width: 30px;
    transition: transform 0.3s;
}

.nav-btn:hover svg {
    transform: scale(1.2);
}


/*
--------------------------------------------------------------------------------
  [002.6] CHECKERBOARD SECTION — ШАХМАТНАЯ ПОЛОСА
  Файл: index.php | Секция: <section class="checkerboard-section">
  Элементы: .checkerboard-elegant
--------------------------------------------------------------------------------
*/
.checkerboard-elegant {
    width: 100%;
    height: 25px;
    background-color: #D9D9D9;
    --sh-size: 25px;
    background-image:
        linear-gradient(45deg, #000 25%, transparent 25%),
        linear-gradient(-45deg, #000 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #000 75%),
        linear-gradient(-45deg, transparent 75%, #000 75%);
    background-size: var(--sh-size) var(--sh-size);
    background-position: 0 0, 0 calc(var(--sh-size) / 2), calc(var(--sh-size) / 2) calc(var(--sh-size) / -2), calc(var(--sh-size) / -2) 0px;
    transition: background-size 0.1s linear, background-position 0.1s linear;
    will-change: background-size, background-position;
}


/*
--------------------------------------------------------------------------------
  [002.7] EXCLUSIVE SECTION — ЭКСКЛЮЗИВНАЯ ГАЛЕРЕЯ
  Файл: index.php | Секция: <section class="exclusive-section">
  Элементы: .pin-container, .sticky-wrapper, .photo-track, .photo-item
--------------------------------------------------------------------------------
*/
.pin-container {
    position: relative;
    height: 400vh;
    background: black;
}

.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.photo-track {
    display: flex;
    padding: 0 5vw;
    gap: 20px;
    will-change: transform;
}

.photo-item {
    flex-shrink: 0;
    width: 30vw;
    height: 80vh;
    transition: transform 0.1s ease-out;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*
--------------------------------------------------------------------------------
  [002.8] FOOTER LID — ДЕКОРАТИВНАЯ КРЫШКА
  Файл: index.php | Секция: <div class="footer-shadow-clipper">
  Элементы: .footer-shadow-clipper, .lid-svg-center, .lid-side-filler
--------------------------------------------------------------------------------
*/
.footer-shadow-clipper {
    width: 100%;
    position: relative;
    z-index: 10;
    margin-top: -41.2px;
    clip-path: inset(-300px -300px 0px -300px);
    overflow: visible;
}

.footer-top-overlap {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 42px;
    filter: drop-shadow(0px -4px 4.6px rgba(0, 0, 0, 0.1));
    pointer-events: none;
    gap: 0;
}

.lid-side-filler {
    flex: 1;
    height: 100%;
    background-color: #fff;
    position: relative;
    z-index: 2;
    /*margin: -1px;*/
}

.lid-svg-center {
    flex-shrink: 0;
    width: 90px;
    margin: -1px -1px;
    height: 42px;
    line-height: 0;
    background: transparent;
    position: relative;
    z-index: 1;
}

.lid-svg-center svg {
    display: block;
    width: 100%;
    height: 100%;
}


/*
================================================================================
  ЧАСТЬ 3: FOOTER.PHP — Подвал
================================================================================
*/

/*
--------------------------------------------------------------------------------
  [003.1] FOOTER CONTENT — КОНТЕНТ ПОДВАЛА
  Файл: footer.php | Секция: <footer class="custom-footer">
  Элементы: .custom-footer, .brand-text, .contact-block, .footer-link-small
--------------------------------------------------------------------------------
*/
.custom-footer {
    position: relative;
    width: 100%;
    background-color: #fff;
    font-family: 'Jost', sans-serif;
    color: #000;
    margin-top: -1px;
    padding-top: 1px;
    overflow-x: hidden;
}

.brand-text {
    font-size: 28px;
    letter-spacing: 0.3em;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
}

.contact-block {
    font-size: 18px;
    line-height: 1.4;
}

.footer-link-small {
    font-size: 11px;
    text-decoration: none;
    text-transform: lowercase;
    color: #6c757d !important;
    transition: color 0.3s ease;
}

.footer-link-small:hover {
    color: #000 !important;
}

.footer-row-fix {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
================================================================================
  ЧАСТЬ 4: CATALOG.PHP — Страница каталога
================================================================================
*/

/*
--------------------------------------------------------------------------------
  [004.1] CATALOG CONTROLS — ФИЛЬТРЫ И ХЛЕБНЫЕ КРОШКИ
  Файл: catalog.php | Секция: <div class="catalog-controls">
  Элементы: .catalog-controls, .breadcrumb-text
--------------------------------------------------------------------------------
*/
.catalog-controls {
    display: flex;
    align-items: center;
}

.breadcrumb-text {
    font-size: 14px;
    text-transform: uppercase;
    margin-left: 20px;
    letter-spacing: 1px;
}

/* Кнопка-фильтр */
.btn-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;          /* отступ до хлебных крошек */
  color: inherit;              /* наследует цвет текста родителя */
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-filter:hover {
  opacity: 0.7;
}
.btn-filter:focus-visible {
  outline: 2px solid #000;    /* видимый фокус для доступности */
  outline-offset: 2px;
}


/*
--------------------------------------------------------------------------------
  [004.2] PRODUCT CARD — КАРТОЧКА ТОВАРА
  Файл: catalog.php | Секция: <div class="product-card">
  Элементы: .img-container, .product-name, .product-price
--------------------------------------------------------------------------------
*/
.products-row {
    --bs-gutter-x: 8px; /* Горизонтальный отступ (между товарами и краями) */
    --bs-gutter-y: 8px; /* Вертикальный отступ (между рядами) */
}

.img-container {
    position: relative;
    background-color: #F7F7F7;
    aspect-ratio: 1 / 1.3;
    margin-bottom: 5px;
    border-radius: 3px;
    overflow: hidden;
    display: block;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.img-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);*/
    pointer-events: none;
    z-index: 2;
}

/* Remove button for wishlist */
.remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    /* background: rgba(255, 255, 255, 0.9); */
    /* border-radius: 50%; */
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.remove-btn:hover {
    background: rgba(255, 255, 255, 1);
}

.remove-btn svg {
    display: block;
}

.product-name {
    font-size: 16px;
    text-transform: lowercase;
    margin: 0;
}
@media (min-width: 992px) {
        .product-name {
        font-size: 20px;
    }
}

.product-origin {
    font-size: 14px;
    color: #8C8C8C;
    font-weight: 300;
    font-style: italic;
    margin: 0px 0 0px;
}

.product-price {
    font-size: 18px;
    color: #9C6654;
    font-weight: 400;
    margin-top: auto;
}

.container-catalog {
    padding: 0 14px !important;
}

.page-heading {
    font-family: 'Jost', sans-serif;
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
}

/* Search form */
.search-form {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.search-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.search-inputs .form-control {
    flex: 1;
    font-size: 14px;
    padding: 10px 15px;
    border: 1px solid #D9D9D9;
    border-radius: 3px;
}

.search-options {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.search-options .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    margin: 0;
}

.search-options input[type="checkbox"] {
    margin: 0;
}

/* Product stock info */
.product-stock {
    font-size: 12px;
    color: #666;
    margin: 5px 0 10px;
}

/* Sort controls */
.catalog-sort-controls {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    padding: 10px 0 20px;
}

.catalog-sort-controls .form-group {
    margin-bottom: 0;
}

.catalog-sort-controls .control-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    display: block;
}

.catalog-sort-controls .form-control {
    font-size: 13px;
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    padding: 4px 8px;
    box-shadow: none;
}

/* Subcategory card */
.subcategory-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

.subcategory-card:hover {
    opacity: 0.7;
}

.subcategory-img {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    background-color: #F7F7F7;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.subcategory-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subcategory-name {
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
}

/* Product card wrapper */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
@media (min-width: 992px) {
        .product-card {
        padding-bottom: 20px;
    }
}
.product-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-name a {
    text-decoration: none;
    color: inherit;
}

.product-name a:hover {
    opacity: 0.7;
}


/* Price styles */
.price-new {
    color: #9C6654;
    font-weight: 400;
}

.price-old {
    color: #999;
    text-decoration: line-through;
    font-size: 14px;
    margin-left: 8px;
}


/* Пагинация */
/* Обертка пагинации */
.vintage-pagination-wrap {
    padding: 15px 0; /* Уменьшили общие отступы */
}

/* Настройка списка, центрирование работает за счет text-center у родителя и inline-flex */
.vintage-pagination-wrap .pagination {
    display: inline-flex; 
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 4px; /* Более компактное расстояние между цифрами */
}

.vintage-pagination-wrap .pagination > li {
    display: inline-block;
}

/* Базовый дизайн кнопок — максимально легкий */
.vintage-pagination-wrap .pagination > li > a,
.vintage-pagination-wrap .pagination > li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px; /* Уменьшили размер */
    height: 36px;    /* Уменьшили размер */
    padding: 0 8px;
    margin: 0;
    background-color: transparent; /* Прозрачный фон для "воздушности" */
    border: 1px solid transparent;
    border-radius: 8px; /* Аккуратное небольшое скругление */
    color: #736b67; /* Нейтральный, слегка теплый серый цвет текста */
    font-size: 14px; /* Уменьшенный шрифт */
    font-weight: 400;
    text-decoration: none;
    transition: all 0.25s ease;
    float: none;
}

/* При наведении: белая подложка, нежная рамка и тень в тон основного цвета */
.vintage-pagination-wrap .pagination > li > a:hover,
.vintage-pagination-wrap .pagination > li > a:focus {
    background-color: #ffffff;
    color: #9C6654; /* Основной цвет сайта */
    border-color: rgba(156, 102, 84, 0.2); 
    box-shadow: 0 4px 10px rgba(156, 102, 84, 0.12); /* Мягкая цветная тень */
    transform: translateY(-1px); /* Едва заметный подъем */
    z-index: 2;
}

/* Активная страница: заливка основным цветом */
.vintage-pagination-wrap .pagination > .active > a,
.vintage-pagination-wrap .pagination > .active > span,
.vintage-pagination-wrap .pagination > .active > a:hover,
.vintage-pagination-wrap .pagination > .active > span:hover {
    background-color: #9C6654; 
    color: #ffffff;
    border-color: #9C6654;
    box-shadow: 0 4px 12px rgba(156, 102, 84, 0.25); /* Более выраженная тень */
    z-index: 3;
    font-weight: 500;
}

/* Анимация появления товаров */
.product-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInProduct 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes fadeInProduct {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стили текстового индикатора загрузки */
.loading-indicator {
    margin: 50px 0 30px;
}

.vintage-spinner {
    display: inline-block;
    color: #9C6654;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: vintagePulse 1.5s infinite ease-in-out;
}

@keyframes vintagePulse {
    0%, 100% { opacity: 0.3; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); }
}

/*
================================================================================
  MEDIA QUERIES — АДАПТИВ (все файлы)
================================================================================
*/

/*
--------------------------------------------------------------------------------
  [MQ-001] MOBILE: max-width 991px
--------------------------------------------------------------------------------
*/
@media (max-width: 991px) {

    /* Catalog Header */
    .catalog-header {
        flex-direction: column;
        gap: 10px;
        padding: 15px 0 0 0;
    }

    .catalog-header .col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .brand-heading-col {
        order: 1;
    }

    .catalog-search-col {
        order: 2;
    }

    .catalog-search {
        justify-content: center;
    }

    .header-search-wrapper {
        justify-content: center;
    }

    .header-search {
        width: 90%;
    }

    .catalog-header h1,
    .brand-heading {
        font-size: 12px;
    }

    .catalog-actions-col {
        display: none;
    }

    /* Catalog Section Menu */
    .catalog-title {
        text-align: center;
        font-size: 24px;
        margin-bottom: 1.2rem;
    }

    .buttons-row {
        flex-direction: column;
    }

    .buttons-row > * {
        width: 100%;
        flex: none;
    }

    .cat-btn {
        white-space: normal;
        min-width: 0 !important;
        padding: 12px 20px;
        margin-bottom: 5px;
    }

    .inner-content {
        position: static;
        box-shadow: none;
        border: none;
        visibility: visible;
    }

    .cat-btn-wrapper.is-open .inner-content {
        max-height: 2000px;
        opacity: 1;
        padding: 10px 0;
    }

    .icon-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 450px) {
        .icon-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .icon-link img {
        width: 70px;
        height: 70px;
    }

    /* Catalog Controls */
    .catalog-controls {
        justify-content: center;
        min-height: 52px;
    }

    .catalog-controls svg {
        position: absolute;
        left: 16px;
    }

    .breadcrumb-text {
        margin-left: 0;
        font-size: 13px;
        text-align: center;
    }

    /* Product Card */
    .top-static-line {
        width: 270px;
    }

    /* Interior Section */
    .interior-slide {
        flex-direction: column;
    }

    .slide-img-half {
        height: 350px;
    }

    .interior-swiper {
        padding: 0 40px;
    }
}


/*
--------------------------------------------------------------------------------
  [MQ-002] DESKTOP: min-width 992px
--------------------------------------------------------------------------------
*/
@media (min-width: 992px) {

    /* Catalog Section Menu */
    .cat-btn:hover {
        background: #f8f8f8;
    }

    .icon-grid {
        grid-template-columns: repeat(7, 1fr);
    }

    .inner-content {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 100;
        visibility: hidden;
    }

    .inner-content::before {
        content: '';
        position: absolute;
        top: -15px;
        left: 0;
        right: 0;
        height: 15px;
    }

    .cat-btn-wrapper:hover .inner-content {
        opacity: 1;
        visibility: visible;
        max-height: 800px;
        padding: 20px 0;
    }

    .icon-link:hover img {
        filter: none;
        transform: translateY(-10px);
    }

    /* Product Info */
    .product-info {
        text-align: left;
    }

}


/*
--------------------------------------------------------------------------------
  [MQ-003] MOBILE: max-width 768px
--------------------------------------------------------------------------------
*/
@media (max-width: 768px) {

    /* Header */
    .header-bg {
        height: 180px;
        justify-content: flex-start;
        padding-left: 20px;
    }

    .shkaf {
        height: 65%;
        margin-right: 0;
    }

    .text-block {
        margin: 0;
        text-align: left;
        width: 250px;
    }

    .text-block h1 {
        font-size: 38px;
    }

    .text-block .subtitle {
        font-size: 16px;
    }

    /* Shrinking Line */
    .shrinking-line {
        height: 8px;
    }

    /* Catalog Title */
    .catalog-title {
        text-align: center;
        width: 100%;
        font-size: 24px;
    }

    /* Dropdown */
    .dropdown-content {
        position: absolute;
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
    }

    .icon-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .icon-link img {
        width: 50px;
        height: 50px;
    }

    /* Promo Text */
    .promo-text {
        font-size: 22px;
        padding: 0 15px;
    }

    /* Swiper Carousel */
    .swiper-slide img {
        height: 250px;
    }

    /* Restoration Section */
    .grid-overlay {
        grid-template-columns: repeat(2, 1fr);
    }

    .striped-section .bg-image {
        right: auto;
        bottom: auto;
        width: auto;
    }

    .cell:not(.mob-show) {
        display: none;
    }

    .cell {
        aspect-ratio: 1 / 1.1;
    }

    .m-order-1 { order: 1; }
    .m-order-2 { order: 2; }
    .m-order-3 { order: 3; }
    .m-order-4 { order: 4; }
    .m-order-5 { order: 5; }
    .m-order-6 { order: 6; }
    .m-order-7 { order: 7; }
    .m-order-8 { order: 8; }

    /* Exclusive Section */
    .photo-track {
        display: block;
        position: relative;
        height: 100%;
        padding: 0;
    }

    .photo-item {
        position: absolute;
        width: 85vw;
        height: 35vh;
        left: 7.5vw;
        top: 15vh;
    }

    /* Footer Lid */
    .footer-shadow-clipper {
        margin-top: -31.5px;
    }

    .footer-top-overlap {
        height: 32px;
    }

    .lid-svg-center {
        width: 70px;
        height: 32px;
        margin: -1px -1px;
    }

    /* Footer Content */
    .masked-container {
        padding-top: 40px;
    }

    .brand-text {
        font-size: 18px;
        letter-spacing: 0.15em;
        font-weight: 100;
    }

    .contact-block {
        font-size: 16px;
        text-align: center;
        margin-left: 0 !important;
    }
}


/*
================================================================================
  ЧАСТЬ 5: PRODUCT.PHP — Страница товара
================================================================================
*/

/*
--------------------------------------------------------------------------------
  [005.1] PRODUCT BREADCRUMB — ХЛЕБНЫЕ КРОШКИ
--------------------------------------------------------------------------------
*/
.product-breadcrumb {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 20px;
    padding: 15px 0;
}
.product-page .product-breadcrumb  {
    margin: auto;
}

.product-breadcrumb a {
    text-decoration: none;
    color: inherit;
}

.product-breadcrumb a:hover {
    opacity: 0.7;
}

.product-breadcrumb .separator {
    margin: 0 8px;
}


/*
--------------------------------------------------------------------------------
  [005.2] PRODUCT GALLERY — ГАЛЕРЕЯ ИЗОБРАЖЕНИЙ
--------------------------------------------------------------------------------
*/

/* Главный контейнер */
.product-gallery {
    position: relative;
}

/* Ограничиваем ширину фото и центрируем */
.product-gallery .swiper#productSwiper {
    margin: 0 auto;
    padding-bottom: 15px; /* Место снизу для пагинации на мобилке */
    border-radius: 3px;
}

/* Убираем тени с фото */
.product-gallery .main-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: none;
}

/* --- БАЗОВЫЕ СТРЕЛКИ (МОБИЛЬНЫЕ) --- */
.product-gallery .nav-btn {
    position: absolute;
    bottom: 30px; 
    width: 50%;   
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center; 
    padding: 0;
}

.product-gallery .nav-prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 30px; 
}

.product-gallery .nav-next {
    right: 0;
    justify-content: flex-end;
    padding-right: 30px; 
}

/* Размер стрелок на мобилках (чуть увеличен) */
.product-gallery .nav-btn svg { 
    width: 24px; 
    height: 9px; 
    display: block; 
}
.product-gallery .nav-prev svg { transform: rotate(180deg); }

/* --- ПАГИНАЦИЯ (Полоски) --- */
.product-gallery .swiper-pagination {
    bottom: 0 !important;
    left: 0;
    width: 100%;
    display: flex;
    gap: 8px;
    padding: 0;
    margin-bottom: 8px;
}
.product-gallery .swiper-pagination-bullet {
    flex-grow: 1;
    height: 1px;
    background-color: #939393;
    border-radius: 0;
    opacity: 1;
    margin: 0 !important;
    transition: background-color 0.3s ease;
    cursor: pointer;
}
.product-gallery .swiper-pagination-bullet-active {
    background-color: #000000;
}


/* --- АДАПТИВ ДЛЯ ТЕЛЕФОНОВ (<991px) --- */
@media (max-width: 991px) {
    .product-gallery .swiper#productSwiper, .main-image {
        width: calc(240px + 5vw);
        margin: 0 auto; /* Обязательно центрируем фото */
    }
    
    .product-gallery .nav-btn { 
        width: 50px; 
    }
    
    /* Вычисляем точный левый край фотографии (50% экрана минус половина ширины фото) */
    .product-gallery .nav-prev { 
        padding-left: 10px; 
        left: calc(50% - 180px - 2.5vw); 
    }
    
    /* Вычисляем точный правый край фотографии */
    .product-gallery .nav-next { 
        padding-right: 10px; 
        right: calc(50% - 180px - 2.5vw); 
    }
    
    /* Обязательно скрываем блок миниатюр на телефонах */
    .product-gallery #productThumbs {
        display: none !important;
    }
}
/* --- ДЛЯ СОВСЕМ МЕЛКИХ УСТРОЙСТВ (до 420px) --- */
@media (max-width: 420px) {
    /* Уменьшаем саму иконку стрелки */
    .product-gallery .nav-btn svg {
        width: 26px; /* Было 36px */
        height: auto; /* Сохраняем пропорции */
    }
    
    /* Чуть уменьшаем кликабельную зону */
    .product-gallery .nav-btn {
        width: 40px; 
    }
    
    /* Сдвигаем стрелки ближе к центру, чтобы они не обрезались краем экрана */
    .product-gallery .nav-prev {
        padding-left: 5px;
        left: calc(50% - 165px - 2vw); 
    }
    
    .product-gallery .nav-next {
        padding-right: 5px;
        right: calc(50% - 165px - 2vw); 
    }
}


/* --- ДЕСКТОП: МИНИАТЮРЫ + СТРЕЛКИ ВНИЗУ (>991px) --- */
@media (min-width: 991px) {
    /* 1. СМЕЩАЕМ ВЕСЬ БЛОК ГАЛЕРЕИ ПРАВЕЕ */
    .product-gallery {
        max-width: 500px; /* Ограничиваем ширину контейнера (можно менять 80-95%) */
        margin-left: auto; /* Отталкиваем слева */
        margin-right: 0;   /* Прижимаем к правому краю колонки */
    }

    /* Отключаем мобильную пагинацию (полоски) */
    .product-gallery .swiper-pagination { display: none !important; }
    
    .product-gallery .swiper#productSwiper { padding-bottom: 0; }

    /* Центрируем весь блок навигации (как у вас и было) */
    .product-gallery .gallery-navigation {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 20px auto 0;
        gap: 25px;
    }

    /* Стрелки теряют абсолютное позиционирование */
    .product-gallery .nav-btn {
        position: static;          
        width: auto;
        height: 0px;              
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: auto;              
        left: auto;
        right: auto;
    }

    .product-gallery .nav-prev,
    .product-gallery .nav-next {
        padding: 0;
    }

    /* Стрелки покрупнее на десктопе */
    .product-gallery .nav-btn svg {
        width: 30px;
        height: 10px;
    }

    /* Ограничиваем блок миниатюр */
    .product-gallery #productThumbs {
        width: 180px; 
        margin: 0; 
        overflow: hidden;
    }

    /* Стилизуем сами миниатюры */
    .product-gallery #productThumbs .swiper-slide {
       /*width: 50px;
        height: 50px;*/
        cursor: pointer;
        opacity: 0.4;                 
        filter: grayscale(30%);
        transition: opacity 0.3s ease, filter 0.3s ease;
        border: none !important;      
    }

    /* Убираем пелену у активного фото */
    .product-gallery #productThumbs .swiper-slide-thumb-active {
        opacity: 1;
        filter: grayscale(0%);
        border: none !important;
    }

    /* Если у товара 2 фото — не сужаем контейнер, а центрируем сами элементы внутри него */
    .product-gallery #productThumbs.thumbs-2 .swiper-wrapper {
        justify-content: center;
    }

    .product-gallery #productThumbs img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/*СТАРЫЙ ВАРИАНТ
.product-gallery {
    position: relative;
}

.product-gallery .main-image {
    position: relative;
    margin-bottom: 20px;
    background-color: #F7F7F7;
    border-radius: 3px;
    overflow: hidden;
}

.product-gallery .main-image img {
    width: 100%;
    height: auto;
    min-height: 400px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.product-gallery .main-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 2;
}

.thumbnail-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 25px;
    align-items: stretch;
}

.thumbnail {
    cursor: pointer;
    transition: opacity 0.3s;
    background-color: #F7F7F7;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
}

.thumbnail:hover {
    opacity: 0.8;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.thumbnail::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 2;
}
/*

/*
--------------------------------------------------------------------------------
  [005.3] PRODUCT INFO — ИНФОРМАЦИЯ О ТОВАРЕ
--------------------------------------------------------------------------------
*/
.product-header {
    /*margin-bottom: 25px;*/
}

.product-title {
    font-family: 'Jost', sans-serif;
    font-size: 26px;
    text-transform: lowercase;
    margin-bottom: 0px;
}

/* Цвет для строки происхождения – #939393, курсив */
.product-origin {
    font-family: 'Jost', sans-serif;
    font-size: 17px;
    color: #939393;
    font-style: italic;
    margin-bottom: 5px;
}

/* Контейнер для артикула, сердца и цены */
.product-article-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* регулируйте по необходимости */
}

/* Стиль артикула (без лишних отступов) */
.product-article {
    font-style: italic;
    margin: 0;
    font-size: 11px;
    color: #8C8C8C;
}

/* Внутренний блок для сердца и цены */
.product-action-block-inline {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-main-block {
    display: flex;
    gap: 30px;
}

.product-main-left {
    flex: 1;
}

.product-main-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.product-action-block {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.heart-btn-inline {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: #D9D9D9;                     /* цвет по умолчанию */
  transition: color 0.3s, transform 0.3s;
}

/* ----- Новая иконка-сердце на чистом CSS ----- */
.heart-icon-css.inline {
    display: block;
    transform: scale(0.66);
    width: 34px;
    height: 30px;
    clip-path: path("M15.9404 4.87269C19.6843 0.738513 24.3776 -1.0969 27.8565 0.671516C32.536 3.05042 33.2438 11.0485 29.4375 18.5358C26.1179 25.0657 20.4614 29.0494 15.9649 28.3834C11.4614 29.0809 5.7793 25.0922 2.44923 18.5416C-1.35692 11.0545 -0.648995 3.05647 4.03029 0.677376C7.50732 -1.09021 12.1976 0.742973 15.9404 4.87269Z");
    background: #ccc;
    box-shadow: inset 0px 4px 13px 0px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.heart-btn-inline.wl-add .heart-icon-css {
  background: linear-gradient(135deg, #B0806A 0%, #9C6654 40%, #6A4035 100%);
  box-shadow: 
    inset 0 2px 5px rgba(0,0,0,0.45),
    0 4px 12px rgba(156,102,84,0.4);
}


.product-price-page {
    font-family: 'Jost', sans-serif;
    font-size: 22px;
    color: #9C6654;
    font-weight: 400;
}

.btn-purchase {
    margin-bottom: 0;
    margin-left: auto;
}

.product-specs {
    /*margin-bottom: 20px;*/
}

.specs-row {
    font-size: 17px;
    font-family: 'Jost', sans-serif;
}

.specs-row.italic {
    font-style: italic;
    font-weight: 200;
}

/* старые стили атрибутов */
.custom-spec {
    display: flex;
    justify-content: space-between;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.custom-spec .spec-label {
    color: #000;
}
.custom-spec .spec-value {
    color: #000;
}
/*///////////////////////*/

.product-details {
    margin-bottom: 20px;
}

.details-row {
    display: flex;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    padding: 5px 0;
}

.detail-label {
    font-style: italic;
    color: #8C8C8C;
    min-width: 100px;
}

.detail-value {
    color: #000;
}

.product-restoration {
    font-family: 'Jost', sans-serif;
    font-size: 17px;
    color: #9C6654;
    font-style: italic;
}


/*
--------------------------------------------------------------------------------
  [005.4] PRODUCT DESCRIPTION — ОПИСАНИЕ ТОВАРА
--------------------------------------------------------------------------------
*/
.product-description {
    margin-top: 25px;
    margin-bottom: 2rem;
}

.product-description p {
    font-family: 'Jost', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    color: #8C8C8C;
}


/*
--------------------------------------------------------------------------------
  [MQ-004] PRODUCT MOBILE: max-width 991px
--------------------------------------------------------------------------------
*/
@media (max-width: 991px) {

    .product-description {
        margin-top: 0px;
    }

    .product-breadcrumb {
        text-align: center;
        margin-left: 0px;
    }

    /* Row должен быть flex, чтобы работал order */
    .product-page .row {
        display: flex;
        flex-wrap: wrap;
    }

    .product-page .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .product-gallery .main-image img {
        height: auto;
        min-height: 250px;
    }

    .thumbnail-row {
        margin-bottom: 15px;
    }

    .thumbnail {
        aspect-ratio: 1;
    }

    .thumbnail img {
        height: 100%;
    }

    /* Заголовок товара */
    .product-header {
        /*margin-bottom: 20px;*/
    }

    .product-title {
        font-size: 22px;
    }

    .product-origin {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .product-article {
        font-size: 11px;
        text-align: left;
    }

    /* Блок с размерами и кнопкой */
    .product-main-block {
        display: block;
    }

    .product-main-left,
    .product-main-right {
        width: 100%;
    }

    /* Сердце + цена + кнопка */
    .product-action-block {
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .product-action-block .heart-btn-inline {
        order: 1;
    }

    .product-action-block .product-price {
        order: 2;
        font-size: 20px;
    }

    .btn-purchase {
        width: 100%;
        margin: 20px 0;
    }

    .product-details {
        display: block;
    }

    .details-row {
        display: flex;
        padding: 3px 0;
        border-bottom: none;
        flex-wrap: wrap;
    }

    .detail-label {
        min-width: auto;
        font-style: italic;
    }

    .detail-label::after {
        content: ': ';
    }

    /* Описание */
    .product-description p {
        font-size: 16px;
        line-height: 1.6;
    }
}



/*
================================================================================
  ЧАСТЬ 6: MOBILE-MENU.PHP — Единая навигация (десктоп + мобильная)
================================================================================
*/

/*
--------------------------------------------------------------------------------
  [006.0] ДЕСКТОПНАЯ НАВИГАЦИЯ
  На десктопе — горизонтальный ряд с hover-подменю
  На мобиле — вертикальный список с клик-подменю (на главной)
  На остальных страницах — скрыта, вместо неё mobile-bottom-menu
--------------------------------------------------------------------------------
*/

/* На не-главной мобильной — скрываем десктопную навигацию */
@media (max-width: 991px) {
    body:not(.is-home) .desktop-nav {
        display: none;
    }
}

@media (min-width: 992px) {
    /* На десктопе — показываем везде */
    .desktop-nav {
        display: block;
    }
    /* Мобильное нижнее меню — никогда на десктопе */
    .mobile-bottom-menu {
        display: none !important;
    }
}

@media (max-width: 991px) {
    /* Скрываем мобильное нижнее меню на главной */
    body.is-home .mobile-bottom-menu {
        display: none !important;
    }

    body.is-home {
        padding-bottom: 0;
    }

    /* На остальных страницах — мобильное нижнее меню */
    body:not(.is-home) .mobile-bottom-menu {
        display: block;
    }

    body:not(.is-home) {
        padding-bottom: 80px;
    }
}

/*
--------------------------------------------------------------------------------
  [006.1] МОБИЛЬНОЕ МЕНЮ — КОНТЕЙНЕР
--------------------------------------------------------------------------------
*/
.mobile-bottom-menu {
    display: none;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    top: auto;
    z-index: 9999;
}

@media (max-width: 991px) {
    .mobile-bottom-menu {
        display: block;
    }
    body {
        padding-bottom: 80px;
    }
    /* На главной — скрываем нижнюю панель и убираем padding */
    body.is-home {
        padding-bottom: 0;
    }
    body.is-home .menu-bar {
        display: none !important;
    }
}

/*
--------------------------------------------------------------------------------
  [006.2] ОВЕРЛЕЙ
--------------------------------------------------------------------------------
*/
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 5;
}

.mobile-bottom-menu.is-open .menu-overlay,
.mobile-bottom-menu.furniture-open .menu-overlay,
body.cart-is-open .menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/*
--------------------------------------------------------------------------------
  [006.3] КОНТЕЙНЕР МЕНЮ
--------------------------------------------------------------------------------
*/
.menu-cards {
    position: fixed;
    bottom: 5px;
    left: 20px;
    right: 20px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 20;
    box-sizing: border-box;
}

.mobile-bottom-menu.is-open .menu-cards,
.mobile-bottom-menu.furniture-open .menu-cards {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Кнопки категорий (по умолчанию скрыты) */
#menuCards > .m-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

/* При открытом подменю мебели — скрываем основные категории */
.mobile-bottom-menu.furniture-open #menuCards > .m-item:not(.m-item-furniture):not(.m-item-back) {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Скрываем кнопки МЕБЕЛЬ при открытом подменю */
.mobile-bottom-menu.furniture-open .m-item-furniture {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Анимация каскадом */
.mobile-bottom-menu.is-open #menuCards > .m-item {
    opacity: 0;
    transform: translateY(30px);
    animation: mUp 0.35s ease forwards;
    animation-delay: calc(var(--i, 0) * 0.06s);
}

/* Back button visible when furniture-open */
.mobile-bottom-menu.furniture-open .m-item-back {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    animation: mUp 0.35s ease forwards;
}

/* Furniture grid items animation */
.furniture-expanded.active-show .m-grid-item {
    opacity: 0;
    transform: translateY(30px);
    animation: mUp 0.35s ease forwards;
    animation-delay: calc(var(--i, 0) * 0.04s);
}

/*
--------------------------------------------------------------------------------
  [006.4] РАЗВЁРНУТЫЙ БЛОК МЕБЕЛИ
--------------------------------------------------------------------------------
*/
.furniture-expanded {
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 0;
    box-sizing: border-box;
}

.furniture-expanded.active-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    position: relative !important;
}

/* Блок подкатегорий (белый фон, тень) */
.furniture-content {
    background: #fff;
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
    padding: 12px 16px 16px;
}

.furniture-title {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
    text-align: center;
    padding: 4px 0 12px;
    font-weight: 400;
}

/* Сетка подкатегорий */
.m-furniture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
    padding: 16px 20px;
}

@media (min-width: 480px) {
    .m-furniture-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.m-grid-item {
    text-decoration: none;
    color: #000;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.2s ease;
}

.furniture-expanded.active-show .m-grid-item {
    opacity: 0;
    transform: translateY(30px);
    animation: mUp 0.35s ease forwards;
    animation-delay: calc(var(--i, 0) * 0.04s);
}

.m-grid-item:hover {
    transform: translateY(-3px);
}

.m-grid-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: brightness(0);
    transition: filter 0.3s ease;
}

.m-grid-item:hover img {
    filter: none;
}

/*
--------------------------------------------------------------------------------
  [006.5] ПУНКТ МЕНЮ (кнопка в стиле cat-btn)
--------------------------------------------------------------------------------
*/
.m-item {
    width: 100%;
    min-height: 48px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    padding: 16px;
    transition: opacity 0.2s, background 0.3s ease;
    margin-bottom: 5px;
}

.m-item:active {
    opacity: 0.7;
    background: #f8f8f8;
}

.m-item > span {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000;
    pointer-events: none;
}

.m-item svg {
    flex-shrink: 0;
    margin-right: 8px;
    pointer-events: none;
}

/*
--------------------------------------------------------------------------------
  [006.6] КОРЗИНА
--------------------------------------------------------------------------------
*/
/* Cart container */
.cart-container {
    position: fixed;
    bottom: 5px;
    left: 20px;
    right: 20px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
    display: flex !important;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 20;
    max-height: 70vh;
}

body.cart-is-open .cart-container {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Шапка корзины */
.cart-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.cart-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 10px !important;
    text-transform: uppercase !important;
    color: #975139 !important;
    text-align: center !important;
}

/* Список товаров */
.cart-items {
    flex: 1;
    overflow-y: scroll;
    padding: 0 16px;
    scrollbar-width: thin;
    scrollbar-color: #a0a0a0 #f1f1f1;
    min-height: 0;
    max-height: 30vh;         /* добавляем ограничение высоты */
    /* остальное без изменений */
}

.cart-items::-webkit-scrollbar {
    display: none;
}

/* Товар */
.cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
}

.cart-item-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cart-item-name {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    color: #000;
    line-height: 1.3;

    /* Ограничиваем ширину и принудительно переносим */
    display: block;                /* или inline-block */
    width: 100%;
    word-break: break-word;       /* перенос длинных слов */
    overflow-wrap: break-word;    /* современный аналог */
    white-space: normal;          /* сбрасываем возможный nowrap */
}

.cart-item-origin {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    color: #8C8C8C;
    font-style: italic;
}

.cart-item-price {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #9C6654;
    font-weight: 400;
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.cart-qty-control {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    border-radius: 3px;
    padding: 4px 8px;
}

.cart-qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #000;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.cart-qty-btn:hover {
    color: #975139;
}

.cart-qty {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    min-width: 20px;
    text-align: center;
}

.cart-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
}

.cart-remove-btn:hover {
    opacity: 0.7;
}

.cart-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0 16px;
}

.cart-footer {
    padding: 16px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cart-total-label {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000;
}

.cart-total-price {
    font-family: 'Jost', sans-serif;
    font-size: 18px;
    color: #9C6654;
    font-weight: 400;
}

.cart-checkout-btn {
    width: 100%;
    background: #fff;
    border: 0;
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.cart-checkout-btn:active {
    background: #f8f8f8;
}

/* Коммерческое предложение */
.cart-commercial {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-commercial-label {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #8C8C8C;
    text-transform: lowercase;
}

.cart-export-btns {
    display: flex;
    gap: 8px;
}

.cart-export-btns a {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    background: #fff !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 3px !important;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    color: black;
    text-decoration: none !important;
    display: inline-block !important;
}

.cart-export-btns a::after {
    font-family: 'Jost', sans-serif;
    font-size: 12px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000 !important;
}

.cart-export-btns a[href*="xlsx"]::after {
    content: "XLSX";
}

.cart-export-btns a[href*="pdf"]::after {
    content: "PDF";
}

.cart-export-btns a:hover {
    background: #f8f8f8 !important;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3) !important;
    text-decoration: none !important;
}

.cart-export-btns a:active {
    transform: translateY(1px);
}

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


/*
--------------------------------------------------------------------------------
   ВЕРХНЕЕ МОБИЛЬНОЕ МЕНЮ И КНОПКИ В ШАПКЕ
--------------------------------------------------------------------------------
*/

/* Кнопки в шапке */
.bar-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0px 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    border-radius: 3px;
}

.bar-btn:active {
    transform: scale(0.92);
}

.bar-svg {
    overflow: visible;
}

.bar-svg path {
    transition: fill 0.3s ease;
}

/* Изменение цвета иконки при открытом меню/корзине */
.mobile-bottom-menu.is-open ~ .catalog-section #menuToggleBtn .bar-svg path,
.mobile-bottom-menu.is-open #menuToggleBtn .bar-svg path,
#menuToggleBtn.active .bar-svg path {
    fill: #975139;
}

.mobile-bottom-menu.cart-open ~ .catalog-section #cartToggleBtn .bar-svg path,
.bar-btn.bar-bag.active .bar-svg path {
    fill: #975139;
}

/* Чипы количества */
.bar-btn .cart-chip,
.bar-btn .wl-chip {
    position: absolute;
    top: -2px;
    width: 12px;
    height: 12px;
    background: #975139;
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 8px;
    font-weight: 400;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

.bar-btn .cart-chip {
    right: -2px;
}

.bar-btn .wl-chip {
    left: 22px;
}

.bar-btn .cart-chip.has-items,
.bar-btn .wl-chip.has-items {
    display: flex;
}

/* Адаптируем шапку бренда для мобильных версий */
@media (max-width: 991px) {
    .brand-heading-col {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        position: relative;
        z-index: 1002;
        padding: 8px 15px;
        width: 100%;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Выпадающий контейнер верхнего меню */
    .mobile-bottom-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        pointer-events: none;
    }

}


/*
================================================================================
  ЧАСТЬ 6: QUICKCHECKOUT — Быстрое оформление заказа
================================================================================
*/

#cart1 {
    padding-left: calc(var(--bs-gutter-x) * .5);    
}

#payment-address .quickcheckout-heading {
    font-family: 'Jost', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 10px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 16px 16px 12px;
}

/* [006.1] Основной контейнер krasivo-quickcheckout */
.krasivo-quickcheckout {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Закругление как у кнопок */
    overflow: hidden;
    background-color: #fff;
    margin: 5rem;
}

/* [006.2] Правая колонка (платеж/адрес) */
.krasivo-right-col {
    background-color: #EEEEEE !important;
    padding: 0 5rem 5rem 5rem;
}

.krasivo-right-col .quickcheckout-content,
.krasivo-right-col .quickcheckout-heading {
    background-color: transparent !important;
}

.krasivo-right-col .quickcheckout-heading {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* [006.3] Поля ввода с нижним бордером */
.krasivo-right-col .form-control,
.krasivo-right-col select.form-control,
.krasivo-right-col input[type="text"],
.krasivo-right-col input[type="email"],
.krasivo-right-col input[type="tel"],
.krasivo-right-col textarea:not(.krasivo-comment) {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #939393 !important;
    border-radius: 0 !important;
    color: #333 !important;
    transition: all 0.3s ease;
    width: 100%;
}

.krasivo-right-col .form-control:focus,
.krasivo-right-col select.form-control:focus,
.krasivo-right-col input[type="text"]:focus,
.krasivo-right-col input[type="email"]:focus,
.krasivo-right-col input[type="tel"]:focus,
.krasivo-right-col textarea:not(.krasivo-comment):focus {
    background-color: transparent !important;
    border-bottom-color: #666 !important; /* Чуть темнее при фокусе */
    outline: none !important;
    box-shadow: none !important;
}

.krasivo-right-col .form-label {
    font-family: 'Jost', sans-serif !important;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    text-transform: lowercase;
    padding-top: 20px;
}

/* [006.4] Комментарий к заказу */
.krasivo-comment {
    background-color: #D9D9D9 !important;
    border: none !important;
    padding: 15px !important;
    color: #fff !important;
    width: 100%;
    transition: all 0.3s ease;
    min-height: 120px;
    resize: vertical;
}

.krasivo-comment:focus {
    background-color: #b0b0b0 !important; /* Светлее при вводе */
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(147, 147, 147, 0.3) !important;
}

.krasivo-comment::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* [006.5] Фирменные кнопки cat-btn в quickcheckout */
#quickcheckoutconfirm .cat-btn-primary {
    background-color: #000;
    color: #fff;
}

#quickcheckoutconfirm .cat-btn-primary:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#quickcheckoutconfirm .cat-btn-secondary {
    background-color: #939393;
    color: #fff;
}

#quickcheckoutconfirm .cat-btn-secondary:hover {
    background-color: #666;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* [006.6] Корзина товаров использует стили из common/cart.twig */
#cart1 .quickcheckout-content {
    padding: 0;
    background-color: transparent;
}

/* Адаптивность для quickcheckout */
@media (max-width: 991px) {
    .krasivo-quickcheckout{
        margin: auto;
        margin-bottom: 5rem;
    }
    .krasivo-right-col {
        padding: 20px;        
    }
}

/*
================================================================================
  ЧАСТЬ 1.6: SMARTSEARCH — УМНЫЙ ПОИСК
  Стили для полноэкранного оверлея с результатами поиска
  Структура повторяет cart-items / cart-footer
================================================================================
*/

/* ---------- Оверлей (самый нижний) ---------- */
.smartsearch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: none;
}

/* ---------- Полноэкранный контейнер — появляется под header-search-wrapper внутри него ---------- */
/* 2. Меняем позиционирование самого окна результатов */
.smartsearch-fullscreen-container {
    position: absolute; /* БЫЛО fixed - теперь окно привязано к .header-search-wrapper */
    top: 100%;          /* БЫЛО 170px - теперь окно начинается ровно под линией поиска */
    left: 0;
    
    /* Так как инпут всего 280px, нам нужно позволить окну быть шире инпута */
    width: max-content; 
    
    min-height: 0;
    max-height: calc(100vh - 80px);
    z-index: 1000;
    display: none;
    overflow: hidden;
    padding: 10px 0 0 0; /* Убрали боковые отступы, сделали отступ сверху 10px */
    box-sizing: border-box;
    pointer-events: none;
}

/* 3. Убираем центрирование, чтобы окно выравнивалось по левому краю поиска */
.smartsearch-fullscreen-container .smartsearch-result-box {
    position: relative;
    pointer-events: auto;
    
    max-width: 680px;
    margin: 0;
    
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* ---------- Список результатов (аналог .cart-items) ---------- */
.smartsearch-fullscreen-container .smartsearch-results {
    padding: 0;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.smartsearch-fullscreen-container .smartsearch-results::-webkit-scrollbar {
    width: 4px;
}
.smartsearch-fullscreen-container .smartsearch-results::-webkit-scrollbar-track {
    background: #f0f0f0;
}
.smartsearch-fullscreen-container .smartsearch-results::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

/* ---------- Один результат — ссылка (аналог .cart-item) ---------- */
.smartsearch-fullscreen-container .smartsearch-results a.item {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 12px;
    border-bottom: 1px solid #eaeaea;
    transition: background-color 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.smartsearch-fullscreen-container .smartsearch-results a.item:last-child {
    border-bottom: none;
}

.smartsearch-fullscreen-container .smartsearch-results a.item:hover {
    background-color: #f8f6f3;
    text-decoration: none;
    color: inherit;
}

.smartsearch-fullscreen-container .smartsearch-results a.item.current {
    background-color: #fff3cd;
}

.smartsearch-fullscreen-container .smartsearch-item-img {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

/* Инфо-блок (аналог .cart-item-info) */
.smartsearch-fullscreen-container .smartsearch-item-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.smartsearch-fullscreen-container .smartsearch-item-name {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smartsearch-fullscreen-container .smartsearch-item-model {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #999;
    letter-spacing: 0.05em;
}

.smartsearch-fullscreen-container .smartsearch-item-price {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-top: 2px;
}

.smartsearch-fullscreen-container .smartsearch-item-price .oldprice {
    text-decoration: line-through;
    color: #c00;
    font-size: 12px;
    margin-right: 6px;
    font-weight: 400;
}

/* ---------- Футер поиска (аналог .cart-footer) ---------- */
.smartsearch-fullscreen-container .smartsearch-footer {
    padding: 16px;
    background-color: #f8f9fa;
    border-top: 1px solid #eaeaea;
    text-align: center;
}

.smartsearch-fullscreen-container .smartsearch-all-btn {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    padding: 14px 24px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #333;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
}

.smartsearch-fullscreen-container .smartsearch-all-btn:hover {
    background: #f5f0eb;
    color: #333;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
}

.smartsearch-fullscreen-container .smartsearch-all-btn:active {
    background: #ebe5df;
    transform: translateY(0);
}

/* ---------- Body-класс при активном поиске ---------- */
body.smartsearch-active {
    /*overflow: hidden;*/
}

/* ========== АДАПТИВНОСТЬ ========== */

@media (min-width: 992px) {


    .smartsearch-fullscreen-container .smartsearch-result-box {
        max-width: 680px;
    }

    .smartsearch-fullscreen-container .smartsearch-results {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }

    .smartsearch-fullscreen-container .smartsearch-footer {
        padding: 16px;
        background-color: #f8f9fa;
        border-top: 1px solid #eaeaea;
        text-align: center;
    }

    .smartsearch-fullscreen-container .smartsearch-all-btn {
        display: inline-block;
        width: 100%;
        max-width: 400px;
        padding: 14px 24px;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 3px;
        font-family: 'Jost', sans-serif;
        font-size: 13px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #333;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
        box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
    }

    .smartsearch-fullscreen-container .smartsearch-all-btn:hover {
        background: #f5f0eb;
        color: #333;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
    }

    .smartsearch-fullscreen-container .smartsearch-all-btn:active {
        background: #ebe5df;
        transform: translateY(0);
    }
}

@media (max-width: 991px) {
    /* Ровно под поисковой строкой, растягиваем на весь доступный экран */
    .smartsearch-fullscreen-container {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;             /* Занимает всю ширину родителя */
        max-width: 100vw;        /* Не вылезает за пределы экрана */
        
        /* Вычисляем максимальную высоту: 100vh минус отступ сверху */
        max-height: calc(100vh - 100%); 
        
        padding: 12px 0 0 0;      /* Внешний отступ сверху от строки поиска */
        box-sizing: border-box;
        z-index: 1000;
    }

    /* Внутренний бокс становится Flex-контейнером на всю доступную высоту */
    .smartsearch-fullscreen-container .smartsearch-result-box {
        display: flex;
        flex-direction: column;
        width: calc(100% - 24px); /* Отступы по 12px с боков */
        margin: 0 auto;           /* Центрирование бокса */
        max-height: calc(100vh - 120px); /* Ограничение по высоте, чтобы не уходить за экран */
        border-radius: 6px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    /* Список результатов забирает всё свободное место и скроллится */
    .smartsearch-fullscreen-container .smartsearch-results {
        flex: 1 1 auto;
        max-height: none;         /* Высоту регулирует Flexbox */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Элемент списка */
    .smartsearch-fullscreen-container .smartsearch-results a.item {
        padding: 10px 12px;
        gap: 10px;
    }

    .smartsearch-fullscreen-container .smartsearch-item-img {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }

    .smartsearch-fullscreen-container .smartsearch-item-name {
        font-size: 14px;
    }

    .smartsearch-fullscreen-container .smartsearch-item-model {
        font-size: 11px;
    }

    .smartsearch-fullscreen-container .smartsearch-item-price {
        font-size: 13px;
    }

    /* Футер фиксируется внизу окна результатов */
    .smartsearch-fullscreen-container .smartsearch-footer {
        flex: 0 0 auto;
        padding: 12px;
        background-color: #f8f9fa;
        border-top: 1px solid #eaeaea;
    }

    .smartsearch-fullscreen-container .smartsearch-all-btn {
        display: block;
        width: 100%;
        padding: 12px 16px;
        font-size: 12px;
        box-sizing: border-box;
    }
}

/*
================================================================================
                              КОНЕЦ СТИЛЕЙ
================================================================================
*/