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

@font-face {
     font-family: 'Dihjauti';
     src: url('/assets/fonts/DihjautiS-Regular.otf');
}

@font-face {
     font-family: 'Gill Sans Nova';
     src: url('/assets/fonts/gillsansnova_book.ttf');
}

body {
     font-family: 'Gill Sans Nova', Arial, sans-serif;
     background-color: #fbfbfb;
     line-height: 1.6;
}

/* Layout components */

.container {
     width: 100%;
     max-width: 1440px;
     margin: 0 auto;
     padding: 0 16px;
}

@media (min-width: 640px) {
     .container {
          padding: 0 24px;
     }
}

@media (min-width: 1024px) {
     .container {
          padding: 0 32px;
     }
}

/* Header styles */
.header {
     background-color: #fbfbfb;
}

.header-top {
     background-color: #fbfbfb;
     padding: 8px 0;
}

.header-top-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 16px;
}

.header-main {
     background-color: #2d030b;
     padding: 32px 0;
}

.header-main-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 24px;
}

.logo {
     width: 294px;
     height: 66px;
}

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

.header-action {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     color: #fbfbfb;
}

.header-action img {
     width: 24px;
     height: 24px;
}

.cart-badge {
     position: relative;
}

.cart-count {
     position: absolute;
     top: -6px;
     right: -6px;
     background-color: #fbfbfb;
     color: #060606;
     font-size: 12px;
     font-weight: 600;
     padding: 2px 6px;
     border-radius: 6px;
     min-width: 14px;
     text-align: center;
}

.header-nav {
     background-color: #fbfbfb;
     border: 1px solid #eceaea;
     padding: 16px 0;
}

.header-nav-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 24px;
}

.menu-btn,
.show-all-btn {
     background-color: #2d030b;
     color: #fbfbfb;
     border: none;
     padding: 6px 24px;
     border-radius: 4px;
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 4px;
}

.search-container {
     flex: 1;
     max-width: 500px;
     position: relative;
}

.search-input {
     width: 100%;
     padding: 10px 36px 10px 16px;
     border: none;
     border-radius: 5px;
     background-color: #eceaea;
     font-size: 16px;
     color: #978080;
}

.search-icon {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     width: 20px;
     height: 20px;
}

/* ===== Catalog Layout ===== */
.catalog-page {
     padding: 32px 0 48px;
     background-color: #F3F3F3;
}

.catalog-container {
     display: flex;
     gap: 24px;
     align-items: flex-start;
}

/* Старый селектор — для обратной совместимости */
.main-content {
     padding: 48px 0;
     background-color: #F3F3F3;
}

.main-content .container {
     display: flex;
     gap: 48px;
     align-items: flex-start;
}

/* ===== Sidebar header (видим только в мобильном модале) =====
   Заголовок «Фильтры» по центру, кнопка X прижата к правому краю. */
.sidebar__header {
     display: none;
     align-items: center;
     justify-content: center;        /* заголовок центрирован */
     position: relative;             /* контейнер для абсолютного X */
     padding: 0 0 16px;
     margin-bottom: 16px;
     border-bottom: 1px solid #eceaea;
}

.sidebar__title {
     font-family: 'Dihjauti', serif;
     font-size: 22px;                /* как в дизайне — крупнее, чем было 18px */
     font-weight: 400;
     color: #2d030b;
     text-align: center;
     line-height: 1.2;
}

.sidebar__close {
     position: absolute;             /* выводим из flex-потока, прижимаем к правому краю */
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     margin-top: -8px;               /* компенсация под padding-bottom: 16px у header */
     width: 32px;
     height: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: transparent;
     border: none;
     color: #2d030b;
     cursor: pointer;
}

/* Информер «Поиск по запросу: …» */
.catalog-search-info {
     display: flex;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
     padding: 12px 16px;
     margin-bottom: 16px;
     background-color: #fff;
     border: 1px solid #eceaea;
     border-radius: 6px;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 14px;
     color: #2d030b;
}

.catalog-search-info strong {
     color: #780d00;
     font-weight: 500;
}

.catalog-search-info__reset {
     margin-left: auto;
     color: #780d00;
     text-decoration: none;
     font-size: 13px;
     padding: 4px 10px;
     border-radius: 4px;
     transition: background-color .15s ease;
}

.catalog-search-info__reset:hover {
     background-color: rgba(120, 13, 0, .08);
}

/* ===== Catalog toolbar ===== */
.catalog-toolbar {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 24px;
}

.catalog-toolbar__filters {
     display: none;             /* на десктопе скрыто — фильтр в боковой панели */
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 0;
     width: 40px;               /* квадратная иконка-кнопка, как у сортировки */
     height: 40px;
     background: transparent;
     border: none;
     border-radius: 4px;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 14px;
     color: #210201;            /* тёмный цвет иконки */
     cursor: pointer;
     transition: background-color .15s ease;
}

.catalog-toolbar__filters:hover {
     background-color: rgba(33, 2, 1, .08);
}

/* Текст «Фильтры» — на мобильной он скрывается, остаётся только иконка
   (см. ниже @media). На десктопе кнопка вообще не показывается. */
.catalog-toolbar__filters-label {
     display: none;
}

.catalog-toolbar__chips {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
}

.catalog-toolbar__spacer {
     flex: 1;
}

/* Чип активного фильтра */
.catalog-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: 35px;
     padding: 8px 16px;
     background: #210201;
     border: 1px solid #210201;
     border-radius: 4px;
    
     font-size: 16px;
     color: #FBFBFB;
     cursor: pointer;
     transition: background-color .15s ease, border-color .15s ease;
}

.catalog-chip span {
     font-family: 'Gill Sans Nova', sans-serif;
     font-weight: 400;
     font-size: 16px;
     line-height: 1;            /* убираем лишнюю высоту строки, чтобы текст был
                                    точно по центру строки чипа */
     letter-spacing: 0%;
     display: inline-block;
}

.catalog-chip:hover {
     background-color: #370610;
     border-color: #370610;
}

.catalog-chip svg,
.catalog-chip__close {
     width: 12px;
     height: 12px;
     display: block;            /* убирает baseline-смещение у <img> */
     align-self: center;        /* явное центрирование по cross-axis flex'а */
     opacity: 1;
     transition: opacity .15s ease;
     flex-shrink: 0;
}

.catalog-chip:hover svg,
.catalog-chip:hover .catalog-chip__close {
     opacity: 1;
}

.catalog-chip--reset {
     color: #060606 !important;
     background-color: #FBFBFB !important;
     text-decoration: none !important;
     border: 1px solid #210201 !important;
}

.catalog-chip--reset:hover {
     border: 1px solid #370610;
}

/* ===== Catalog sort (dropdown) ===== */
.catalog-sort {
     position: relative;
}

/* Кнопка-иконка: только иконка, текст «Показать» — в tooltip (browser title) */
.catalog-sort__trigger {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     padding: 0;
     background: transparent;
     border: none;
     cursor: pointer;
     border-radius: 4px;
     color: #210201;            /* SVG со fill="currentColor" окрашивается в тёмный */
     transition: background-color .15s ease;
}

.catalog-sort__trigger:hover {
     background-color: rgba(33, 2, 1, .08);
}

.catalog-sort__trigger img,
.catalog-sort__trigger svg {
     width: 20px;
     height: 20px;
     display: block;
}
/* 
.catalog-sort__trigger:hover {
     background-color: rgba(120, 13, 0, .08);
} */

/* .catalog-sort.is-open .catalog-sort__trigger {
     background-color: rgba(120, 13, 0, .12);
} */


.catalog-sort__menu {
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     min-width: 240px;
     padding: 12px;
     background: #fff;
     border: 1px solid #eceaea;
     border-radius: 4px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
     z-index: 30;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-4px);
     transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.catalog-sort__label{
     font-size: 18px;
     font-family: 'Gill Sans Nova', sans-serif;
     font-weight: 400;
     font-size: 18px;
     line-height: 120%;
     letter-spacing: 0%;
     color: #060606;
}
.catalog-sort.is-open .catalog-sort__menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}

.catalog-sort__option {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 4px 0px;
     border-radius: 4px;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 14px;
     color: #2d030b;
     text-decoration: none;
     transition: background-color .12s ease;
}

/* .catalog-sort__option:hover {
     background-color: #f3f3f3;
} */

.catalog-sort__option[aria-selected="true"] .catalog-sort__radio,
.catalog-sort__radio.is-checked {
     border-color: #210201;
}

.catalog-sort__option[aria-selected="true"] .catalog-sort__radio::after,
.catalog-sort__radio.is-checked::after {
     opacity: 1;
}

.catalog-sort__radio {
     position: relative;
     width: 16px;
     height: 16px;
     border: 1.5px solid #210201;
     border-radius: 50%;
     flex-shrink: 0;
}

.catalog-sort__radio::after {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 8px;
     height: 8px;
     background: #210201;
     border-radius: 50%;
     opacity: 0;
     transition: opacity .12s ease;
}

.catalog-sort__option[aria-selected="true"] {
     color: #780d00;
}

/* ===== Sidebar backdrop (мобилка) ===== */
.sidebar-backdrop {
     position: fixed;
     inset: 0;
     background-color: rgba(0, 0, 0, .45);
     opacity: 0;
     visibility: hidden;
     transition: opacity .2s ease, visibility .2s;
     z-index: 1100;
}

.sidebar-backdrop.is-visible {
     opacity: 1;
     visibility: visible;
}

/* Sidebar */
.sidebar {
     width: 100%;
     max-width: 288px;
     background-color: #fbfbfb;
     border-radius: 8px;
     padding: 16px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
     flex-shrink: 0;
}

/* === Wine Filter (новые стили под дизайн-систему) === */
.wine-filter {
     display: flex;
     flex-direction: column;
}

.wine-filter__chips {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     padding-bottom: 16px;
     margin-bottom: 12px;
     border-bottom: 1px solid #eceaea;
}

.wine-filter__chip {
     display: inline-flex;
     align-items: center;
     padding: 4px 10px;
     background-color: #f3f3f3;
     border-radius: 4px;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 13px;
     line-height: 100%;
     color: #2d030b;
}

.wine-filter__reset,
.wine-filter__clear {
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 13px;
     color: #780d00;
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: border-color .2s ease;
     align-self: center;
     cursor: pointer;
}

.wine-filter__reset:hover,
.wine-filter__clear:hover {
     border-bottom-color: #780d00;
}

.wine-filter__section {
     padding: 14px 0;
     /* border-bottom: 1px solid #eceaea; */
}

.wine-filter__section:last-of-type {
     border-bottom: none;
}

.wine-filter__toggle {
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 8px;
     padding: 0;
     background: transparent;
     border: none;
     font-family: 'Dihjauti', sans-serif;
     font-size: 18px;
     font-weight: 700;
     line-height: 120%;
     color: #2d030b;
     cursor: pointer;
}

.wine-filter__toggle span{
     font-size: 18px;
     font-weight: 700;
     line-height: 120%;
}

.wine-filter__chevron {
     transition: transform .2s ease;
     color: #978080;
     flex-shrink: 0;
}

.wine-filter__section.is-collapsed .wine-filter__chevron {
     transform: rotate(-90deg);
}

.wine-filter__body {
     padding-top: 16px;
     overflow: hidden;
     transition: max-height .25s ease;
}

.wine-filter__section.is-collapsed .wine-filter__body {
     max-height: 0;
     padding-top: 0;
}

.wine-filter__list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 12px;
}

.wine-filter__item.is-disabled {
     opacity: 0.4;
     pointer-events: none;
}

.wine-filter__check {
     display: flex;
     align-items: center;
     gap: 6px;
     cursor: pointer;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 15px;
     line-height: 120%;
     color: #210201;
}

.wine-filter__check input {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}

.wine-filter__check-box {
     width: 18px;
     height: 18px;
     flex-shrink: 0;
     border: 1.5px solid #210201;
     border-radius: 50%;
     position: relative;
     transition: border-color .15s ease, background-color .15s ease;
}

.wine-filter__check input:checked+.wine-filter__check-box {
     background-color: transparent;
     border-color: #210201;
}

.wine-filter__check input:checked+.wine-filter__check-box::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 9px;
     height: 9px;
     border: none;
     background-color: #210201;
     border-radius: 50%;
}

.wine-filter__check-label {
     flex: 1;
     font-family: 'Gill Sans Nova', sans-serif;
     font-weight: 400;
     font-size: 18px;
     line-height: 120%;
     letter-spacing: 0%;
}

.wine-filter__count {
     color: #978181;
     padding-left: 4px;
     font-family: 'Gill Sans Nova', sans-serif;
     font-weight: 400;
     font-size: 16px;
     line-height: 120%;
     letter-spacing: 0%;
}

.wine-filter__range {
     display: flex;
     gap: 8px;
}

.wine-filter__range-field {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 4px;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 12px;
     color: #978181;
}

.wine-filter__range-field span {
     font-family: 'Gill Sans Nova', sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 120%;
     letter-spacing: 0%;
     color: #978181;
}

.wine-filter__input {
     width: 100%;
     height: 36px;
     padding: 0 16px;
     border: 1px solid #eceaea;
     border-radius: 6px;
     background-color: #fff;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 14px;
     line-height: 100%;
     color: #2d030b;
     outline: none;
     transition: border-color .15s ease;
}

.wine-filter__input:focus {
     border-color: #2d030b;
}

/* ============================================================
   Двуручный слайдер цены.
   Два <input type="range"> лежат друг над другом в одном треке.
   Сам трек серый, поверх него — .wine-filter__price-progress
   с фиксированной шириной (выставляется из JS через left/right %).
   Хитрость: сами range-инпуты прозрачные с pointer-events:none
   на треке, а pointer-events:auto на thumb-псевдоэлементе —
   так пользователь может ухватить любой из двух ползунков,
   не блокируя нижний.
   ============================================================ */
.wine-filter__price-slider {
     display: flex;
     flex-direction: column;
     gap: 14px;
     padding: 6px 4px 0;
}

.wine-filter__price-display {
     display: flex;
     justify-content: space-between;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 13px;
     color: #978181;
}

.wine-filter__price-display b {
     font-weight: 600;
     color: #2d030b;
}

.wine-filter__price-track {
     position: relative;
     height: 4px;
     background: #eceaea;
     border-radius: 2px;
     margin: 8px 8px 18px; /* отступы по бокам — чтобы кружочки thumb'ов не вылезали за рамку */
}

.wine-filter__price-progress {
     position: absolute;
     top: 0;
     bottom: 0;
     background: #2d030b;
     border-radius: 2px;
}

/* Range-инпуты: невидимый трек, видимый только thumb. */
.wine-filter__price-thumb {
     position: absolute;
     top: 50%;
     left: -8px;
     right: -8px;
     width: calc(100% + 16px);
     height: 0;
     margin: 0;
     padding: 0;
     background: none;
     border: none;
     outline: none;
     -webkit-appearance: none;
     appearance: none;
     pointer-events: none; /* трек не должен ловить клики — только thumb */
     transform: translateY(-50%);
     z-index: 2;
}

/* Делаем нативный трек невидимым (Chrome/Safari/Edge). */
.wine-filter__price-thumb::-webkit-slider-runnable-track {
     height: 4px;
     background: transparent;
     border: none;
}
.wine-filter__price-thumb::-moz-range-track {
     height: 4px;
     background: transparent;
     border: none;
}

/* Сам ползунок — кружок. */
.wine-filter__price-thumb::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #fff;
     border: 2px solid #2d030b;
     box-shadow: 0 1px 4px rgba(45, 3, 11, 0.25);
     cursor: pointer;
     pointer-events: auto; /* возвращаем клики только thumb'у */
     margin-top: -6px; /* центрируем относительно 4px трека */
     transition: transform 0.12s ease;
}
.wine-filter__price-thumb::-moz-range-thumb {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #fff;
     border: 2px solid #2d030b;
     box-shadow: 0 1px 4px rgba(45, 3, 11, 0.25);
     cursor: pointer;
     pointer-events: auto;
     transition: transform 0.12s ease;
}

.wine-filter__price-thumb::-webkit-slider-thumb:hover,
.wine-filter__price-thumb:focus::-webkit-slider-thumb {
     transform: scale(1.15);
}
.wine-filter__price-thumb::-moz-range-thumb:hover,
.wine-filter__price-thumb:focus::-moz-range-thumb {
     transform: scale(1.15);
}

/* Max-ползунок должен лежать поверх min — иначе при их сближении
   нижний из них недоступен для клика. */
.wine-filter__price-thumb--max {
     z-index: 3;
}

.wine-filter__actions {
     /* На десктопе скрыто — кнопка «Применить» нужна только в мобильном модале фильтров.
        Включается ниже в @media (max-width: 1023px). */
     display: none;
     flex-direction: column;
     gap: 12px;
     margin-top: 20px;
     padding-top: 16px;
     border-top: 1px solid #eceaea;
}

.wine-filter__apply {
     width: 100%;
}

/* «Показать ещё N» / «Свернуть» */
.wine-filter__more {
     margin-top: 16px;
     /* padding: 4px 0; */
     background: transparent;
     border: none;
     font-family: 'Gill Sans Nova', sans-serif;
     color: #780D00;
     cursor: pointer;
     transition: color .15s ease;
     align-self: flex-start;
     font-weight: 400;
     font-size: 16px;
     line-height: 120%;
     letter-spacing: 0%;
}

.wine-filter__more:hover {
     color: #5a0a00;
}

/* Сердечко-overlay в верхнем правом углу карточки каталога */
.product-card .favorite-btn--overlay {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 32px;
     height: 32px;
     padding: 0;
     background-color: rgba(255, 255, 255, .92);
     border: none;
     border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background-color .2s ease, transform .2s ease;
     z-index: 2;
}

.product-card .favorite-btn--overlay img {
     width: 22px;
     height: 19px;
}

.product-card .favorite-btn--overlay:hover {
     background-color: #fff;
     transform: scale(1.05);
}

.product-card .favorite-btn--overlay.is-active {
     background-color: #fef2f2;
}

/* На десктопе — overlay-сердечко на картинке СКРЫТО (видно только на мобилке) */
@media (min-width: 640px) {
     .product-card .favorite-btn--overlay {
          display: none !important;
     }
}

/* На мобилке — inline-сердечко в кнопках СКРЫТО (видно только overlay) */
@media (max-width: 639px) {
     .product-card .favorite-btn--inline {
          display: none !important;
     }
}

/* Старые селекторы — для обратной совместимости (если фильтр старого вида будет где-то ещё) */
.filter-section {
     margin-bottom: 16px;
}

.filter-title {
     font-family: 'Dihjauti', sans-serif;
     font-size: 16px;
     font-weight: 700;
     color: #2d030b;
     margin-bottom: 12px;
}

/* Content area */
.content-area {
     flex: 1;
     margin-left: 6px;
}

.filter-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     display: none;
}

.filter-button {
     display: none;
}

.active-filters {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 24px;
}

.filter-tag {
     background-color: #210201;
     color: #fbfbfb;
     padding: 8px 16px;
     border-radius: 5px;
     font-size: 16px;
     display: flex;
     align-items: center;
     gap: 8px;
}

.filter-tag.reset {
     background-color: #fbfbfb;
     color: #060606;
     border: 2px solid #210201;
}

.sort-section {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 10px;
     margin-bottom: 24px;
     position: relative;
}

.sort-trigger {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     color: #780d00;
}

.sort-dropdown {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     padding: 0;
}

.sort-option {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     background-color: #f3f3f3;
     border: 1px solid transparent;
     border-radius: 4px;
     font-family: 'Gill Sans Nova', sans-serif;
     font-size: 14px;
     line-height: 100%;
     color: #2d030b;
     text-decoration: none;
     cursor: pointer;
     transition: background-color .2s ease, border-color .2s ease;
}

.sort-option:hover {
     background-color: #ebe8e8;
}

.sort-option .checkbox {
     width: 14px;
     height: 14px;
     border: 1.5px solid #978080;
     border-radius: 50%;
     background-color: transparent;
     position: relative;
     flex-shrink: 0;
}

.sort-option .checkbox.checked {
     border-color: #780d00;
}

.sort-option .checkbox.checked::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 8px;
     height: 8px;
     background-color: #780d00;
     border-radius: 50%;
}

.sort-option:has(.checkbox.checked),
.sort-option .checkbox.checked~* {
     /* подсветка активного варианта */
}

.sort-option .checkbox.checked~span {
     color: #780d00;
     font-weight: 500;
}

/* Product grid */
.product-grid {
     display: flex;
     flex-direction: column;
     gap: 16px;
}

.product-card {
     background-color: #fff;
     border: 1px solid #eceaea;
     border-radius: 8px;
     padding: 24px;
     display: flex;
     gap: 32px;
     align-items: stretch;
     min-height: 320px;
}

.product-image-container {
     width: 200px;
     min-width: 200px;
     max-width: 200px;
     padding: 0;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}

.discount-badge {
     position: absolute;
     top: 16px;
     left: 0;
     background-color: #780d00;
     color: #fbfbfb;
     padding: 2px 8px;
     border-radius: 5px;
     font-size: 16px;
}

.product-image {
     width: auto;
     max-width: 100%;
     height: auto;
     max-height: 280px;
     object-fit: contain;
     margin: 0 auto;
     display: block;
}

.product-info {
     flex: 1;
     min-width: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
}

/* Заголовок + цена в одну строку через flex — никаких overlap'ов
   ни с длинным заголовком, ни с длинным «Цена по запросу» */
.product-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 12px;
}

.product-details {
     flex: 1 1 auto;
     min-width: 0;
     /* без min-width:0 длинное слово растянет flex-item */
}

.product-title {
     font-family: 'Dihjauti', sans-serif !important;
     color: #2d030b !important; 
     margin-bottom: 16px !important;
     text-align: start !important;
     line-height: 110% !important;
     font-weight: 700 !important;
     font-style: Bold !important;
     font-size: 24px !important;
     line-height: 110.00000000000001% !important;
     letter-spacing: 0% !important;
}

.product-specs {
     display: flex;
     gap: 18px;
     margin-bottom: 20px;
     flex-wrap: wrap;
}

.product-spec {
     padding: 6px 8px;
     border: 1px solid #210201;
     border-radius: 5px;
     font-weight: 400;
     line-height: 100%;
     color: #210201;
     font-family: 'Dihjauti', sans-serif !important;
     font-weight: 700;
     font-style: Bold;
     font-size: 16px;
     line-height: 120%;
     letter-spacing: 0%;
}

.product-pricing {
     /* flex-item в .product-header — стоит в правой стороне строки заголовка */
     flex: 0 0 auto;
     min-width: 100px;
     max-width: 180px;
     text-align: right;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 4px;
     word-break: break-word;
     overflow-wrap: anywhere;
     margin-top: 0px !important;
     padding-top: 0px !important;
}

/* Для всех экранов >768px (планшет + десктоп) — title слева, цена справа в одну
   строку. Перебиваем @media (max-width: 1023px) {.product-header { flex-direction: column }}
   за счёт более высокой специфичности (.product-card .product-header = 2 vs .product-header = 1) */
@media (min-width: 769px) {
     .product-card .product-header {
          flex-direction: row;
          align-items: flex-start;
          gap: 16px;
     }

     .product-card .product-pricing {
          width: auto;
          text-align: right;
          align-items: flex-end;
     }

     .product-card .current-price {
          justify-content: flex-end;
     }
}

.current-price {
     font-size: 24px;
     color: #780d00;
     font-weight: 400;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 4px;
     margin-bottom: 2px;
}

/* "Цена по запросу" — текст без рубля, делаем меньше и в две строки */
.current-price--request {
     font-size: 14px;
     line-height: 1.25;
     color: #978080;
     font-weight: 500;
     text-align: right;
     justify-content: flex-end;
     word-break: break-word;
     white-space: normal;
}

.old-price {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 4px;
     color: #978080;
     font-size: 18px;
}

.price-strike {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 1px;
     background-color: #978080;
}

.product-description {
     font-family: 'Gill Sans Nova', sans-serif;
     color: #2d030b;
     margin-bottom: 20px;
     font-weight: 400;
     font-style: Book;
     font-size: 16px;
     line-height: 140%;
     letter-spacing: 0%;
}

.product-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: auto;
     /* прижимает блок к низу карточки */
     padding-top: 16px;
     
}

.product-actions .add-to-cart-btn,
.product-actions .catalog-quantity-controls {
     /* min-width: 180px !important; */
     max-width: 220px !important;
     flex: 0 0 auto !important;
}

.product-actions .favorite-btn--inline {
     flex: 0 0 40px;
     width: 40px;
     height: 40px;
     padding: 0;
     background-color: #f3f3f3;
     border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
}

.product-actions .favorite-btn--inline:hover {
     background-color: #e6e4e4;
}

.product-actions .favorite-btn--inline.is-active {
     background-color: #fef2f2;
}

.product-actions .favorite-btn--inline img {
     width: 18px;
     height: 18px;
}

.add-to-cart-btn {
     background-color: #2d030b !important;
     color: #fbfbfb !important;
     border: none !important;
     height: 40px !important;
     padding: 14px 24px !important;
     border-radius: 4px !important;
     font-family: 'Dihjauti', sans-serif !important;
     font-size: 14px !important;
     font-weight: 400 !important;
     text-transform: uppercase !important;
     cursor: pointer !important;
     width: auto !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     line-height: 100% !important;
     transition: background-color .25s ease !important;
}

.add-to-cart-btn[disabled],
.add-to-cart-btn:disabled {
     background-color: #c9c6c6 !important;
     color: #fbfbfb !important;
     cursor: not-allowed !important;
     opacity: 1 !important;
}

.add-to-cart-btn[disabled]:hover {
     background-color: #c9c6c6 !important;
}

.add-to-cart-btn.is-hidden {
     display: none !important;
}

/* ===== На десктопе: текст «В КОРЗИНУ» виден, иконка СКРЫТА ===== */
@media (min-width: 640px) {
     .product-card .add-to-cart-btn .add-to-cart-btn__icon {
          display: none !important;
     }

     .product-card .add-to-cart-btn .add-to-cart-btn__text {
          display: inline !important;
     }
}

.catalog-quantity-controls {
     display: none;
     align-items: center;
     justify-content: center;
     background: #f2f2f2;

     overflow: hidden;
}

.catalog-quantity-controls.is-visible {
     display: inline-flex;
}

.catalog-quantity-btn {
     border: none;
     background: #f2f2f2;
     color: #210201;
     font-size: 28px;
     line-height: 1;
     cursor: pointer;
     background-color: #f2f2f2;
     border-radius: 4px;
     padding: 8px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.catalog-quantity-btn svg {
     width: 24px;
     height: 24px;

}
.catalog-quantity-value {
     background-color: #f2f2f2;
     text-align: center;
     width: 30px;
     font-weight: 400;
     line-height: 110.00000000000001%;
     color: #978181;
     font-size: 18px;
}

.favorite-btn {
     background-color: #f2f2f2;
     border: none;
     padding: 6px;
     border-radius: 4px;
     cursor: pointer;
     width: 40px;
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background-color .25s ease;
}

.favorite-btn img {
     width: 20px;
     height: 20px;
}

.favorite-btn.is-active {
     background-color: #fef2f2;
}

.favorite-btn.is-active img {
     filter: none;
}

.catalog-loadmore-wrapper {
     margin-top: 32px;
     display: flex;
     justify-content: center;
}

.catalog-loadmore-wrapper .btn{
     padding: 14px 24px !important;
     font-family: "Dihjauti", sans-serif !important;
     font-weight: 700 !important;
     font-style: Bold !important;
     font-size: 14px !important;
     line-height: 100% !important;
     letter-spacing: 0% !important;
     text-transform: uppercase !important;
     color: #060606 !important;
     border: 1px solid #210201 !important;
     height: 40px !important;
}

.catalog-loadmore-wrapper .btn:hover {
     background-color: #210201 !important;
     color: white !important;
     border: 1px solid #210201 !important;
}

.catalog-loadmore.is-loading {
     opacity: .7;
}

/* Footer */
.footer {
     background-color: #2d030b;
     color: #fbfbfb;
     padding: 30px 0;
}

.footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 40px;
}

.footer-logo {
     width: 186px;
     height: 100px;
}

.footer-main {
     display: flex;
     justify-content: space-between;
     width: 100%;
     gap: 40px;
}

.footer-section {
     flex: 1;
}

.footer-section h3 {
     color: #cda27a;
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 16px;
}

.footer-section ul {
     list-style: none;
}

.footer-section li {
     margin-bottom: 8px;
}

.footer-section a {
     color: #fbfbfb;
     text-decoration: none;
     font-size: 18px;
}

.footer-contacts {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: 20px;
}

.footer-bottom {
     width: 100%;
     border-top: 1px solid rgba(236, 234, 234, 0.1);
     padding-top: 16px;
     text-align: center;
}

.social-links {
     display: flex;
     gap: 16px;
     justify-content: center;
     margin-top: 20px;
}

.social-links img {
     width: 28px;
     height: 28px;
}

/* Typography */
.contact-text {
     font-size: 16px;
     font-weight: 700;
     color: #210201;
}

.header-action-text {
     font-size: 16px;
     font-weight: 700;
     color: #fbfbfb;
     text-align: center;
}

/* Interactive states */


.menu-btn:hover,
.show-all-btn:hover,
.add-to-cart-btn:not(:disabled):hover {
     background-color: #3a0712 !important;
     transition: background-color 0.25s ease;
}

.favorite-btn:hover {
     background-color: #e5e7eb;
     transition: background-color 0.25s ease;
}

.product-card:hover {
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
     transition: box-shadow 0.3s ease;
}

.filter-tag:hover {
     background-color: #1a0206;
     color: #fbfbfb;
     transition: background-color 0.3s ease;
}

.checkbox:hover {
     border-color: #780d00;
     transition: border-color 0.3s ease;
}

/* Responsive media queries */
@media (max-width: 1023px) {

     /* На планшете — sidebar становится мобильным модалом */
     .catalog-toolbar__filters {
          display: inline-flex;
          width: 20px;
          height: 20px;
     }

     .catalog-sort__trigger{
          width: 20px;
          height: 20px;
     }

     .catalog-container {
          flex-direction: column;
     }

     .catalog-container .sidebar {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          width: 100%;
          max-width: 100vw;
          height: 100vh;
          padding: 20px 16px 0;     /* убрали 100px-запас под старый хак actions */
          overflow-y: auto;
          z-index: 1200;
          transform: translateX(-100%);
          transition: transform .25s ease;
          border-radius: 0;
          box-shadow: 8px 0 24px rgba(0, 0, 0, .2);
     }

     .catalog-container .sidebar.is-mobile-open {
          transform: translateX(0);
     }

     .catalog-container .sidebar__header {
          display: flex;
     }

     .content-area {
          width: 100%;
     }

     /* В мобильном модале кнопка «Применить» прилипает к низу */
     /* В мобильном модале кнопка «Применить» — sticky к низу окна.
        Раньше тут был хак bottom: -20px + margin -20px, из-за которого
        блок появлялся в произвольной точке посреди списка фильтров.
        Делаем чисто: bottom: 0 + горизонтальные отрицательные margin'ы,
        чтобы блок занимал всю ширину sidebar'а. */
     .catalog-container .wine-filter__actions {
          display: flex;            /* возвращаем видимость на мобильном/планшете */
          position: sticky;
          bottom: 0;
          background: #fbfbfb;
          margin: 16px -16px 0;     /* без отрицательного нижнего margin */
          padding: 16px;
          border-top: 1px solid #eceaea;
          z-index: 5;
     }

     /* Старые селекторы для main-content (legacy) */
     .main-content .container {
          flex-direction: column;
          gap: 24px;
     }

     .main-content .sidebar {
          max-width: 100%;
          width: 100%;
          order: 2;
     }

     .main-content .content-area {
          margin-left: 0;
          order: 1;
          width: 100%;
     }

     .header-main-content {
          flex-direction: column;
          text-align: center;
     }

     .header-actions {
          gap: 16px;
     }

     .product-card {
          flex-direction: column;
          text-align: center;
     }

     .product-image-container {
          width: 100%;
          max-width: 200px;
          margin: 0 auto;
     }

     .product-header {
          flex-direction: column;
          gap: 16px;
     }

     .product-pricing {
          width: 100%;
          text-align: center;
     }

     .footer-main {
          flex-direction: column;
          gap: 24px;
     }
}

@media (max-width: 767px) {
     .container {
          padding: 0 16px;
     }

     .header-top-content {
          flex-direction: column;
          gap: 8px;
     }

     .header-nav-content {
          flex-direction: column;
          gap: 16px;
     }

     .search-container {
          order: 1;
          max-width: 100%;
     }

     .active-filters {
          flex-direction: column;
          gap: 8px;
     }

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

     .current-price {
          font-size: 20px;
     }

     .product-specs {
          justify-content: center;
     }

     .sort-section {
          justify-content: center;
     }

     .catalog-toolbar__chips{
          gap: 6px;
     }

     .catalog-toolbar{
          display: flex;
          align-items: start;
          gap: 12px;
          flex-wrap: nowrap;
          margin-bottom: 24px;
     }

     .product-specs{
          display: none !important;
     }
}

@media (max-width: 639px) {

     /* ===== Мобильная карточка каталога — вертикальная как на дизайне ===== */
     .product-grid {
          gap: 16px;
          padding: 0px 40px;
     }

     .product-card {
          flex-direction: column !important;
          text-align: center;
          padding: 16px !important;
          gap: 0 !important;
          align-items: stretch;
          background: #fff;
          border-radius: 8px;
     }

     .product-card .product-image-container {
          width: 100% !important;
          max-width: none !important;
          padding: 16px 16px 12px !important;
          position: relative;
          margin: 0 auto;
          display: flex !important;
          align-items: center;
          justify-content: center;
          min-height: auto;
     }

     .product-card .product-image {
          width: auto !important;
          max-width: 180px !important;
          max-height: 240px !important;
          height: auto !important;
          margin: 0 auto !important;
          object-fit: contain;
     }

     .product-card .favorite-btn--overlay {
          top: 0;
          right: 0;
     }

     /* Грид с областями: название сверху, цена слева внизу, кнопки справа внизу */
     .product-card .product-info {
          padding: 0 !important;
          flex: 1;
          display: grid !important;
          grid-template-columns: 1fr auto;
          grid-template-areas:
               "title   title"
               "price   actions";
          gap: 12px;
          align-items: center;
     }

     /* product-header не должен своей шириной мешать гриду — делаем его прозрачным */
     .product-card .product-header {
          display: contents !important;
     }

     .product-card .product-details {
          grid-area: title;
          text-align: center;
     }

     .product-card .product-title {
          font-family: 'Dihjauti', serif !important;
          text-align: center !important;
          font-size: 17px !important;
          font-weight: 700 !important;
          line-height: 130% !important;
          margin-bottom: 6px !important;
          color: #2d030b !important;
          word-break: break-word;
          overflow-wrap: break-word;
     }

     /* Объём/спецификации — простым центрированным курсивом под заголовком */
     .product-card .product-specs {
          display: none !important;
          justify-content: center !important;
          align-items: center !important;
          gap: 8px !important;
          margin: 0 !important;
          flex-wrap: wrap;
     }

     .product-card .product-spec {
          padding: 0 !important;
          border: none !important;
          background: transparent !important;
          font-family: 'Dihjauti', serif !important;
          font-size: 15px !important;
          font-style: italic;
          font-weight: 400 !important;
          color: #2d030b !important;
          line-height: 1.2 !important;
     }

     .product-card .product-description {
          display: none !important;
     }

     .product-card .product-pricing {
          /* Сбрасываем десктопные absolute-стили, чтобы grid сработал */
          position: static !important;
          top: auto !important;
          right: auto !important;
          min-width: 0 !important;
          max-width: none !important;
          grid-area: price;
          justify-self: start !important;
          align-self: center !important;
          align-items: center !important;
          flex-direction: row !important;
          display: flex !important;
          gap: 6px;
          margin: 0 !important;
          padding: 0 !important;
          width: auto !important;
          text-align: left !important;
     } 

     .product-card .current-price {
          font-family: 'Behrens Antiqua', serif !important;
          font-size: 24px !important;
          font-weight: 400 !important;
          justify-content: flex-start !important;
          color: #780D00 !important;
     }

     /* "Цена по запросу" на мобильной — мельче, серее, в одну-две строки слева */
     .product-card .current-price--request {
          font-size: 13px !important;
          font-weight: 500 !important;
          color: #978080 !important;
          line-height: 1.25 !important;
          text-align: left !important;
     }

     .product-card .product-actions {
          grid-area: actions;
          justify-self: end !important;
          margin: 0 !important;
          display: flex !important;
          align-items: center !important;
          gap: 8px;
     }

     /* Если в DOM осталась старая favorite-btn в actions (не overlay) — прячем её,
        чтобы не дублировалась с overlay-сердечком */
     .product-card .product-actions .favorite-btn:not(.favorite-btn--overlay) {
          display: none !important;
     }

     .product-card .product-actions .add-to-cart-btn {
          width: 40px !important;
          height: 40px !important;
          min-width: 0 !important;
          /* сбрасываем десктопное min-width: 180px */
          max-width: none !important;
          padding: 0 !important;
          border-radius: 50% !important;
          background-color: #780d00 !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          margin-left: auto;
     }

     /* Когда товар уже в корзине — кнопку скрываем, виден +/- счётчик */
     .product-card .product-actions .add-to-cart-btn.is-hidden {
          display: none !important;
     }

     /* Контролы +/- в кнопке корзины — компактные на мобильном */
     .product-card .product-actions .catalog-quantity-controls {
          min-width: 0 !important;
          max-width: none !important;
          height: 40px;
          border-radius: 4px;
     }

     .product-card .product-actions .catalog-quantity-btn {
          width: 32px;
          height: 40px;
          font-size: 18px;
          padding: 0;
     }

     .product-card .product-actions .catalog-quantity-value {
          width: 36px;
          padding: 0 4px;
          font-size: 16px;
          line-height: 1;
     }

     /* На мобильной: показываем иконку, скрываем текст */
     .product-card .product-actions .add-to-cart-btn .add-to-cart-btn__text {
          display: none !important;
     }

     .product-card .product-actions .add-to-cart-btn .add-to-cart-btn__icon {
          display: block !important;
          width: 16px;
          height: 16px;
          filter: brightness(0) invert(1);
          /* белая иконка на бордовом фоне */
     }

     .product-card .product-actions .add-to-cart-btn[disabled] {
          background-color: #c9c6c6 !important;
          font-size: 12px !important;
          color: #fff !important;
          width: auto !important;
          min-width: 0 !important;
          /* сбрасываем десктопное min-width: 180px */
          max-width: none !important;
          height: 36px !important;
          padding: 0 14px !important;
          border-radius: 4px !important;
          white-space: nowrap;
     }

     .product-card .product-actions .add-to-cart-btn[disabled] .add-to-cart-btn__text {
          display: inline !important;
     }

     .product-card .product-actions .add-to-cart-btn[disabled] .add-to-cart-btn__icon {
          display: none !important;
     }

     .logo {
          width: 140px;
          height: 32px;
     }

     .header-actions {
          flex-wrap: wrap;
          justify-content: center;
          gap: 16px;
     }

     .header-nav-content {
          flex-direction: column;
          gap: 8px;
          width: 100%;
     }

     .menu-btn,
     .show-all-btn {
          padding: 8px 16px;
          font-size: 12px;
     }

     .search-container {
          width: 100%;
          max-width: 100%;
     }

     .search-input {
          font-size: 14px;
          padding: 8px 32px 8px 12px;
     }

     .main-content {
          padding: 24px 0;
     }

     .main-content .container {
          flex-direction: column;
          gap: 24px;
     }

     .sidebar {
          position: fixed;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100vh;
          background-color: #fbfbfb;
          border-radius: 0;
          padding: 0;
          box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
          overflow-y: auto;
          z-index: 2000;
          transition: left 0.3s ease;
          max-width: none;
          display: flex;
          flex-direction: column;
     }

     /* Удалены два дубля `.sidebar::before { content: 'Фильтры' }` —
        заголовок теперь рендерится только из HTML
        (.sidebar__header > .sidebar__title), у которого ещё и есть
        кнопка закрытия X. Без этого «Фильтры» дублировался дважды. */

     .sidebar.open {
          left: 0;
     }

     .sidebar .close-filters {
          position: fixed;
          top: 28px;
          right: 24px;
          width: 28px;
          height: 28px;
          cursor: pointer;
          z-index: 2001;
          background: transparent;
          border: none;
          padding: 0;
          display: none;
     }

     .sidebar.open .close-filters {
          display: block;
     }

     .sidebar .close-filters::before,
     .sidebar .close-filters::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 20px;
          height: 2px;
          background-color: #060606;
          transform-origin: center;
     }

     .sidebar .close-filters::before {
          transform: translate(-50%, -50%) rotate(45deg);
     }

     .sidebar .close-filters::after {
          transform: translate(-50%, -50%) rotate(-45deg);
     }

     .filter-overlay {
          display: block !important;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;
     }

     .filter-overlay.open {
          opacity: 1;
          pointer-events: all;
     }

     .content-area {
          margin-left: 0;
          order: 1;
     }

     .filter-button {
          order: 1;
          display: flex;
          width: 100%;
     }

     .filter-button img {
          width: 18px;
          height: 18px;
     }

     .active-filters {
          width: 75%;
          flex: 1;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: flex-start;
          gap: 8px;
          margin-bottom: 0;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
     }

     .active-filters::-webkit-scrollbar {
          display: none;
     }

     .filter-tag {
          padding: 6px 10px;
          font-size: 13px;
          border-radius: 6px;
          flex-shrink: 0;
          white-space: nowrap;
     }

     .filter-tag img {
          width: 12px;
          height: 12px;
     }

     .sort-section {
          flex-direction: row;
          align-items: center;
          gap: 6px;
          justify-content: flex-end;
          margin-left: auto;
          margin-bottom: 0;
          width: 25%;
     }

     .sort-trigger {
          font-size: 13px;
          gap: 6px;
     }

     .sort-trigger span {
          display: none
     }

     .sort-trigger img {
          /* width: 14px;
          height: 14px; */
     }

     .sort-dropdown {
          position: absolute;
          top: 100%;
          right: 0;
          left: auto;
          transform: none;
          width: auto;
          min-width: 240px;
          max-width: 320px;
          z-index: 2001;
          background-color: #fbfbfb;
          border-radius: 8px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
          padding: 12px;
          margin-top: 8px;
     }

     .filter-title {
          font-size: 14px;
     }

     .filter-label {
          font-size: 16px;
          font-weight: 400;
          color: #060606;
     }

     .filter-count {
          font-size: 16px;
          color: #978080;
     }

     .checkbox {
          width: 18px;
          height: 18px;
          border: 2px solid #060606;
          border-radius: 50%;
     }

     .checkbox.checked {
          background-color: transparent;
          border-color: #060606;
     }

     .checkbox.checked::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 8px;
          height: 8px;
          background-color: #060606;
          border-radius: 50%;
     }

     .filter-item {
          margin-bottom: 16px;
     }

     .filter-section {
          margin-bottom: 0;
          padding: 20px 24px;
          border-bottom: 1px solid #eceaea;
     }

     .filter-section:last-of-type {
          border-bottom: none;
     }

     .filter-title {
          font-family: 'Gill Sans Nova', sans-serif;
          font-size: 16px;
          font-weight: 700;
          color: #060606;
          margin-bottom: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
     }

     .filter-title.collapsible::after {
          content: '';
          width: 12px;
          height: 12px;
          border-right: 2px solid #060606;
          border-bottom: 2px solid #060606;
          transform: rotate(45deg);
          transition: transform 0.3s ease;
     }

     .filter-title.collapsible.open::after {
          transform: rotate(-135deg);
     }

     .price-inputs {
          gap: 6px;
     }

     .price-input {
          font-size: 16px;
          padding: 8px 12px;
          width: 100%;
          text-align: center;
          border: 1px solid #eceaea;
          border-radius: 5px;
     }
     
     .footer {
          padding: 24px 0;
     }

     .footer-content {
          gap: 24px;
     }

     .footer-logo {
          width: 140px;
          height: 75px;
     }

     .footer-main {
          flex-direction: column;
          gap: 24px;
          width: 100%;
     }

     .footer-section {
          flex-direction: column;
          gap: 16px;
     }

     .footer-section h3 {
          font-size: 16px;
     }

     .footer-section a {
          font-size: 14px;
     }

     .footer-contacts {
          flex-direction: column;
          gap: 8px;
     }

     .social-links {
          gap: 12px;
     }

     .social-links img {
          width: 24px;
          height: 24px;
     }
}

.header-nav {
     position: relative;
}

/* Контейнер выпадающего меню */
.mega-menu {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     width: 900px;
     height: 220px;
     background: #fbfbfb;
     border-radius: 8px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
     display: none;
     z-index: 2000;
}

.mega-menu-inner {
     display: flex;
     height: 100%;
     padding: 32px;
     gap: 24px;
}

/* Колонки */
.mega-col {
     display: flex;
     flex-direction: column;
     gap: 8px;
     min-width: 160px;
}

/* Правая колонка */
.mega-account {
     margin-left: auto;
}

/* Заголовки */
.mega-title {
     color: #2D030B;
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 16px;
}

/* Ссылки */
.mega-col a {
     text-decoration: none;
     color: #060606;
     font-size: 16px;
}

.mega-col a:hover {
     color: #780d00;
}