/* =============================================================
   PARFUM BAR — Mobile UX Fixes
   Область применения: max-width 991px
   НЕ влияет на десктоп (992px+)
   ============================================================= */

@media (max-width: 991px) {

  /* ─────────────────────────────────────────────
     1. ГЛОБАЛЬНОЕ: шрифт тела и overflow
     ПРОБЛЕМА:  body не имеет базового font-size,
                браузер использует 16px по умолчанию,
                но многие элементы явно заданы в 9–13px —
                пользователь вынужден зумить.
                Горизонтальный overflow возникает из-за
                фиксированных padding'ов и min-width.
     РЕШЕНИЕ:   Убираем горизонтальный скролл глобально,
                гарантируем базовый читабельный размер.
  ─────────────────────────────────────────────── */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%; /* Запрет авто-масштабирования iOS */
  }

  /* ─────────────────────────────────────────────
     2. NAV — все страницы
     ПРОБЛЕМА:  nav-icon-btn имеет SVG 17×17px без
                padding → область касания ~17×17px,
                критически мало (норма 44×44px).
                На catalog.html nav-left показывает
                несколько ссылок — они наезжают на лого.
  ─────────────────────────────────────────────── */

  /* Иконки аккаунта и корзины — увеличиваем touch target */
  .nav-icon-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Кнопка «Назад» — минимальная высота касания */
  .nav-back {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Скрываем вторичные nav-ссылки, оставляем только критичные */
  /* catalog.html / index.html nav-left */
  .nav-left .nav-item:not(:first-child) {
    display: none;
  }

  /* ─────────────────────────────────────────────
     3. TOOLBAR (catalog.html)
     ПРОБЛЕМА:  .cat-tab высота 52px, но padding 0 16px
                делает их слишком узкими на маленьких
                экранах; все 5 вкладок не помещаются
                и приводят к горизонтальному скроллу.
                .search-wrap min-width:140px съедает
                место у сортировки.
                .sort-wrap почти не касаемый.
  ─────────────────────────────────────────────── */
  .toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar::-webkit-scrollbar {
    display: none;
  }

  .cat-tabs {
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-tabs::-webkit-scrollbar {
    display: none;
  }

  .cat-tab {
    padding: 0 14px;
    height: 48px;              /* Чуть снижаем, но сохраняем >44px */
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Сворачиваем поиск до иконки на узких экранах */
  .search-wrap {
    min-width: 44px;
    padding: 0 12px;
    flex-shrink: 0;
  }

  .search-input {
    font-size: 16px; /* Предотвращает zoom на iOS при фокусе */
  }

  /* Sort wrap — минимальный touch target */
  .sort-wrap {
    min-height: 48px;
    padding: 0 16px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ─────────────────────────────────────────────
     4. КАТАЛОГ — элементы списка (catalog.html)
     ПРОБЛЕМА:  .frag-vol кнопки padding:4px 9px →
                высота ~23px, недостаточно для касания.
                .frag-action 36×36px — ниже нормы 44px.
                .frag-price-from font-size:9px — нечитабельно.
                .frag-name font-size:20px — хорошо,
                но .frag-brand 9px — крайне мало.
                .load-more-btn padding:14px 36px — OK,
                но font-size:10px — трудночитаем.
  ─────────────────────────────────────────────── */

  /* Кнопки выбора объёма — увеличиваем touch area */
  .frag-vol {
    padding: 10px 14px;
    font-size: 11px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Кнопка добавления в корзину */
  .frag-action {
    width: 44px;
    height: 44px;
    border-color: rgba(232, 228, 223, 0.18); /* Всегда видна рамка на mobile */
    color: var(--text);
  }

  /* Бренд — увеличиваем читаемость */
  .frag-brand {
    font-size: 10px;
    margin-bottom: 5px;
  }

  /* Цена «от» — было 9px */
  .frag-price-from {
    font-size: 10px;
  }

  /* «Показать ещё» — читаемость */
  .load-more-btn {
    font-size: 12px;
    padding: 16px 28px;
    min-height: 52px;
    width: 100%;
    justify-content: center;
  }

  .load-more-wrap {
    padding: 40px 20px;
  }

  /* Result bar */
  .result-bar {
    padding: 14px 20px;
    font-size: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ─────────────────────────────────────────────
     5. PAGE HEADER (catalog.html)
     ПРОБЛЕМА:  декоративный псевдоэлемент ::before
                с font-size:clamp(100px,18vw,260px)
                может создавать горизонтальный overflow.
  ─────────────────────────────────────────────── */
  .page-header {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 240px;
    padding-bottom: 40px;
    overflow: hidden;
  }

  .page-header::before {
    font-size: clamp(64px, 20vw, 140px);
    right: -10px;
    opacity: 0.025; /* Чуть тише на мобиле */
  }

  .page-header-title {
    font-size: clamp(36px, 9vw, 64px);
  }

  /* ─────────────────────────────────────────────
     6. КОРЗИНА — DRAWER (auth.js)
     ПРОБЛЕМА:  .pbc-qty-btn 28×28px — меньше 44px.
                .pbc-item-remove font-size:10px и
                нет min-height → область касания <20px.
                .pbm-close 32×32px — меньше 44px.
  ─────────────────────────────────────────────── */

  /* Корзина — ширина на весь экран (уже есть max-width:440px) */
  #pb-cart-drawer {
    max-width: 100%;
  }

  /* Кнопки ±количество */
  .pbc-qty-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .pbc-qty-num {
    height: 44px;
    width: 40px;
    font-size: 14px;
  }

  /* Кнопка удаления — минимальная сенсорная зона */
  .pbc-item-remove {
    padding: 12px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 11px;
  }

  /* Кнопка «Оформить заказ» в drawer */
  .pbc-checkout-btn {
    padding: 16px;
    font-size: 12px;
    min-height: 52px;
  }

  /* Товар в корзине — увеличенные отступы */
  .pbc-item {
    padding: 16px 20px;
  }

  .pbc-item-name {
    font-size: 16px;
  }

  .pbc-item-vol {
    font-size: 12px;
  }

  .pbc-head {
    padding: 16px 20px;
  }

  /* Кнопка закрытия drawer */
  .pbc-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Итого */
  .pbc-foot {
    padding: 20px;
  }

  /* ─────────────────────────────────────────────
     7. МОДАЛКА АВТОРИЗАЦИИ (auth.js)
     ПРОБЛЕМА:  .pbm-box padding:48px 44px —
                огромные отступы на мобиле, контент
                не помещается. .pbm-close 32×32px.
                Поля ввода font-size:14px — на iOS
                вызовет zoom при фокусе.
                .pbm-tab height не задан явно → ~40px.
                .pbm-btn padding:13px — OK,
                но font-size:10px нечитаем.
  ─────────────────────────────────────────────── */

  .pbm-box {
    padding: 36px 24px 28px;
    margin: 12px;
    max-height: 92vh;
    overflow-y: auto;
  }

  .pbm-close {
    width: 44px;
    height: 44px;
    top: 8px;
    right: 8px;
  }

  /* Поля ввода — предотвращаем zoom на iOS */
  .pbm-input {
    font-size: 16px;
    padding: 12px 0;
  }

  /* Кнопка входа/регистрации */
  .pbm-btn {
    padding: 16px;
    font-size: 12px;
    min-height: 52px;
  }

  /* Табы */
  .pbm-tab {
    min-height: 48px;
    font-size: 11px;
    padding: 12px 0;
  }

  /* ─────────────────────────────────────────────
     8. CHECKOUT (checkout.html)
     ПРОБЛЕМА:  .field input font-size:14px → zoom iOS.
                .submit-btn font-size:11px — нечитаем.
                .noauth-btn / .success-btn padding:12px 36px
                минимально, но font-size:10px — плохо.
                .map-modal-close 36×36px — меньше нормы.
                .pvz-map-btn font-size:11px — читаем,
                но нет min-height.
  ─────────────────────────────────────────────── */

  .field input,
  .field textarea {
    font-size: 16px; /* Предотвращаем zoom на iOS */
    padding: 14px 0;
  }

  .field label {
    font-size: 10px;
  }

  .field-hint {
    font-size: 11px;
  }

  .submit-btn {
    padding: 18px;
    font-size: 13px;
    min-height: 56px;
    letter-spacing: 0.16em;
  }

  .noauth-btn,
  .success-btn {
    padding: 16px 40px;
    font-size: 12px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .noauth-title {
    font-size: clamp(28px, 7vw, 42px);
  }

  .map-modal-close {
    width: 44px;
    height: 44px;
  }

  .pvz-map-btn {
    min-height: 52px;
    font-size: 12px;
    padding: 14px 16px;
  }

  /* Форма — секции */
  .checkout-form-col {
    padding: 32px 20px 60px;
  }

  .checkout-summary-col {
    padding: 32px 20px 60px;
  }

  /* ─────────────────────────────────────────────
     9. ORDERS (orders.html)
     ПРОБЛЕМА:  .order-head padding:20px 28px —
                нет flex-wrap на мобиле между 600–991px.
                .state-btn padding:12px 32px,
                font-size:10px — нечитаем.
                .order-status font-size:9px — слишком мало.
                .order-info-grid col 1/-1 только на <600px.
  ─────────────────────────────────────────────── */

  .order-head {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
  }

  /* order-info-grid уже 1fr 1fr на десктопе,
     на мобиле переводим в single column */
  .order-info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .order-status {
    font-size: 10px;
    padding: 5px 12px;
  }

  .state-btn {
    padding: 16px 40px;
    font-size: 12px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .order-body {
    padding: 16px 20px;
  }

  .page-wrap {
    padding: 40px 20px 80px;
  }

  /* ─────────────────────────────────────────────
     10. PRODUCT DETAIL PAGES (ve_hero, swi, terre)
     ПРОБЛЕМА:  .pill кнопки padding:8px 18px →
                высота ~34px, меньше 44px.
                .add-to-cart — OK по высоте,
                но font-size:11px читаем лишь условно.
                hero-bottom абсолютно позиционирован —
                на маленьких экранах может наезжать
                на контент.
  ─────────────────────────────────────────────── */

  .pill {
    padding: 12px 18px;
    font-size: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .add-to-cart {
    padding: 14px 24px;
    font-size: 13px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hero bottom — расстояние от края */
  .hero-bottom {
    bottom: 32px;
    left: 20px;
    right: 20px;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Секции детальных страниц */
  .sec {
    padding: 52px 20px;
  }

  .notes-grid {
    grid-template-columns: 1fr;
  }

  .desc-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .details-strip {
    grid-template-columns: 1fr 1fr;
  }

  .detail-item {
    padding: 28px 20px;
  }

  .quote {
    font-size: clamp(20px, 5vw, 34px);
  }

  .quote-wrap {
    padding: 52px 20px;
  }

  /* ─────────────────────────────────────────────
     11. FOOTER — все страницы
     ПРОБЛЕМА:  .f-top grid 4 колонки ломается.
                .f-copy font-size:11px — условно.
                .f-bottom без flex-wrap.
  ─────────────────────────────────────────────── */

  .f-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
    padding: 36px 20px 32px;
  }

  .f-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px 28px;
  }

  .f-copy {
    font-size: 11px;
  }

  .f-wordmark {
    font-size: clamp(52px, 18vw, 120px);
    padding: 16px 20px 0;
    overflow: hidden;
  }

  /* Footer links — touch targets */
  .f-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  /* ─────────────────────────────────────────────
     12. INDEX (hero, product features)
     ПРОБЛЕМА:  .product-feature grid 1fr 1fr
                разбивается при <768px, но между
                768–991px остаётся двухколоночным —
                текст становится нечитаемым.
                pf-word-ru/en font-size:clamp(72px...)
                не помещается на экранах 768–991px.
  ─────────────────────────────────────────────── */

  .product-feature {
    grid-template-columns: 1fr;
    padding: 16px;
    height: auto;
    min-height: auto;
  }

  .pf-left {
    min-height: 56vw;
  }

  .pf-left-footer {
    bottom: 16px;
  }

  /* Инвертированный блок — сброс порядка */
  .pf-inverted .pf-right {
    order: 1;
  }

  .pf-inverted .pf-left {
    order: 2;
  }

  .pf-right {
    padding: 36px 24px 80px; /* +80px снизу для абсолютной кнопки */
    min-height: auto;
    position: relative;
  }

  .pf-dark {
    padding: 36px 24px 80px;
    align-items: flex-start;
    text-align: left;
  }

  .pf-word-ru,
  .pf-word-light {
    font-size: clamp(40px, 11vw, 80px);
  }

  .pf-word-en,
  .pf-word-orange {
    font-size: clamp(40px, 11vw, 80px);
  }

  /* Кнопка корзины внутри feature */
  .pf-right-footer,
  .pf-footer-left {
    position: absolute;
    bottom: 28px;
    right: 24px;
    left: auto;
  }

  .pf-dark .pf-right-footer,
  .pf-footer-left {
    left: 24px;
    right: auto;
  }

  .pf-cart-btn {
    width: 52px;
    height: 52px;
  }

  /* Announce bar */
  .announce {
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 0 48px;
  }

  /* Бутики секция */
  #boutiques > div:nth-child(2) {
    grid-template-columns: 1fr;
  }

  /* ─────────────────────────────────────────────
     13. ACCOUNT MENU (popup)
     ПРОБЛЕМА:  .pbam-item padding:10px 18px →
                ~40px высота, чуть ниже нормы.
  ─────────────────────────────────────────────── */

  .pbam-item {
    padding: 14px 18px;
    font-size: 13px;
    min-height: 48px;
  }

  /* ─────────────────────────────────────────────
     14. КОНТРАСТНОСТЬ — мутные тексты
     ПРОБЛЕМА:  var(--text-muted) = rgba(232,228,223,0.45)
                на тёмном фоне #0d1117 даёт контраст ~3.2:1
                (ниже WCAG AA 4.5:1 для малого текста).
                На mobile критично — нет hover-подсветки.
                Поднимаем opacity для самых мелких меток.
  ─────────────────────────────────────────────── */

  .frag-brand,
  .frag-price-from,
  .order-item-brand,
  .order-item-vol,
  .order-item-qty,
  .order-info-key,
  .sum-item-brand,
  .sum-item-vol,
  .sum-item-qty,
  .pbc-item-brand,
  .pbc-item-vol,
  .pbc-total-label,
  .meta-key,
  .note-tier,
  .detail-key,
  .sec-label,
  .page-label,
  .form-section-title,
  .page-header-label {
    color: rgba(232, 228, 223, 0.62); /* Повышаем с 0.45 до 0.62 */
  }

} /* end @media (max-width: 991px) */


/* ─────────────────────────────────────────────
   Дополнительный breakpoint 479px
   для самых узких экранов (iPhone SE и др.)
─────────────────────────────────────────────── */
@media (max-width: 479px) {

  /* Announce */
  .announce {
    font-size: 9px;
    letter-spacing: 0.08em;
    padding: 0 40px;
  }

  /* Catalog toolbar — ещё компактнее */
  .cat-tab {
    padding: 0 11px;
    font-size: 10px;
  }

  /* Product feature text */
  .pf-word-ru,
  .pf-word-light,
  .pf-word-en,
  .pf-word-orange {
    font-size: clamp(32px, 10vw, 52px);
  }

  /* Footer grid */
  .f-top {
    grid-template-columns: 1fr;
  }

  /* Details strip */
  .details-strip {
    grid-template-columns: 1fr;
  }

  /* Checkout form */
  .checkout-form-col {
    padding: 24px 16px 48px;
  }

  .checkout-summary-col {
    padding: 24px 16px 48px;
  }

  /* Hero nav */
  nav {
    padding: 0 16px;
  }

  .nav-inner {
    padding: 0 16px;
  }

}

/* ─────────────────────────────────────────────
   Скрыты по умолчанию — появляются только на
   мобиле через медиа-запросы ниже
─────────────────────────────────────────────── */
.mob-filter-btn,
.mob-filter-overlay,
.mob-catalog-link,
.mob-cat-btn,
.sidebar-close-btn {
  display: none;
}

/* ─────────────────────────────────────────────
   NAV — всегда видна на мобиле
   ПРОБЛЕМА: nav прозрачная, hover не работает
   на сенсорных экранах → иконки аккаунта
   и корзины невидимы на ярком фоне.
─────────────────────────────────────────────── */
@media (max-width: 991px) {
  nav,
  nav.hovered {
    background: rgba(13, 17, 23, 0.96) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(232, 228, 223, 0.1) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  nav .nav-link,
  nav.hovered .nav-link {
    color: rgba(232, 228, 223, 0.85) !important;
  }
  nav .nav-icon-btn,
  nav.hovered .nav-icon-btn {
    color: rgba(232, 228, 223, 0.75) !important;
  }
  nav .nav-logo,
  nav.hovered .nav-logo {
    color: #e8e4df !important;
  }
  /* Скрываем nav-left полностью — убираем из потока, иначе иконки уезжают за экран */
  .nav-left {
    display: none !important;
  }
  /* Иконку каталога в nav скрываем — заменена FAB-кнопкой */
  .mob-catalog-link {
    display: none !important;
  }
  /* Иконки навигации на product-страницах (inline color override) */
  nav button[style*="color"],
  nav a[style*="color"] {
    color: rgba(232, 228, 223, 0.75) !important;
  }
}

/* ─────────────────────────────────────────────
   CATALOG — мобильный фильтр-drawer
   ПРОБЛЕМА: .sidebar { display: none } на < 960px
   → все фильтры (бренд, цена, направление, сезон)
   недоступны на мобиле.
   РЕШЕНИЕ: sidebar становится выезжающим панелью
   слева, открывается кнопкой «Фильтры» в toolbar.
─────────────────────────────────────────────── */
@media (max-width: 991px) {

  /* Показываем кнопку «Фильтры» в toolbar */
  .mob-filter-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    min-height: 48px;
    flex-shrink: 0;
    border-left: 1px solid rgba(232, 228, 223, 0.1);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 228, 223, 0.55);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s;
    background: none;
    border-top: none;
    border-bottom: none;
    border-right: none;
    font-family: 'Jost', sans-serif;
  }
  .mob-filter-btn:active { color: #e8e4df; }

  /* Overlay затемнение */
  .mob-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 498;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .mob-filter-overlay.mob-active { display: block; }

  /* Sidebar как выезжающий drawer */
  .sidebar {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 320px) !important;
    height: auto !important;
    z-index: 499;
    background: #0d1117;
    border-right: 1px solid rgba(232, 228, 223, 0.1) !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 0 !important;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar.mob-open { transform: translateX(0); }

  /* Внутренний padding для контента drawer */
  .sidebar > * { padding-left: 24px; padding-right: 24px; }
  .sidebar .filter-group { padding-left: 24px; padding-right: 24px; }
  .sidebar .sidebar-divider { margin-left: 0; margin-right: 0; }

  /* Кнопка закрытия drawer */
  .sidebar-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px 16px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 228, 223, 0.55);
    border-bottom: 1px solid rgba(232, 228, 223, 0.1);
    margin-bottom: 24px;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: 'Jost', sans-serif;
  }
}

/* ─────────────────────────────────────────────
   CATALOG — кнопка категорий на мобиле
   Заменяет прокручиваемые табы компактным
   выпадающим списком.
─────────────────────────────────────────────── */
@media (max-width: 991px) {

  /* Прячем scrollable табы — заменяем кнопкой */
  .cat-tabs {
    display: none !important;
  }

  /* Кнопка «Все ▼» / «Мужские ▼» и т.д. */
  .mob-cat-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    min-height: 48px;
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232, 228, 223, 0.55);
    cursor: pointer;
    position: relative;
    border-right: 1px solid rgba(232, 228, 223, 0.1);
    white-space: nowrap;
    background: none;
    border-top: none;
    border-bottom: none;
    border-left: none;
    font-family: 'Jost', sans-serif;
    transition: color 0.2s;
  }
  .mob-cat-btn:active { color: #e8e4df; }

  /* Dropdown с категориями */
  .mob-cat-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: rgba(13, 17, 23, 0.98);
    border: 1px solid rgba(232, 228, 223, 0.1);
    border-top: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 150;
  }
  .mob-cat-btn.mob-open .mob-cat-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Пункты категорий */
  .mob-cat-opt {
    display: block;
    width: 100%;
    padding: 15px 18px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 228, 223, 0.5);
    border: none;
    border-bottom: 1px solid rgba(232, 228, 223, 0.08);
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Jost', sans-serif;
    min-height: 48px;
    transition: color 0.15s, background 0.15s;
  }
  .mob-cat-opt:last-child { border-bottom: none; }
  .mob-cat-opt.active { color: #c8bfb0; }
  .mob-cat-opt:active { background: rgba(200, 191, 176, 0.05); }
}

/* ─────────────────────────────────────────────
   TOOLBAR — исправление overflow-clipping
   ПРОБЛЕМА: toolbar { overflow-x: auto } создаёт
   контекст обрезки → sort-dropdown, который
   position:absolute внутри sticky-элемента,
   обрезается и не виден.
   РЕШЕНИЕ: toolbar overflow:visible, прокрутка
   только внутри .cat-tabs.
─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .toolbar {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  /* cat-tabs берёт оставшееся место и скроллится внутри */
  .cat-tabs {
    flex: 1 !important;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
}

/* ─────────────────────────────────────────────
   SORT DROPDOWN — работает по tap на мобиле
   ПРОБЛЕМА: dropdown открывается только :hover,
   что не работает на touch-экранах.
─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .sort-wrap {
    position: relative;
  }
  .sort-wrap.mob-open .sort-dropdown {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  /* Dropdown выравниваем по правому краю экрана */
  .sort-dropdown {
    right: 0;
    left: auto;
    min-width: 220px;
  }
  .sort-option {
    padding: 15px 18px;
    font-size: 11px;
    min-height: 48px;
  }
}

/* ─────────────────────────────────────────────
   INDEX — кнопка корзины в product-feature
   ПРОБЛЕМА: .pf-right-footer имеет inline-style
   position:absolute; bottom:48px; left/right:64px
   → inline styles перебивают медиа-запросы CSS
   → на мобиле кнопка накрывает текст.
   РЕШЕНИЕ: position:static + flow-layout через !important.
─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .pf-right-footer,
  .pf-footer-left {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 28px;
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  /* pf-right больше не нужен padding-bottom под абсолютную кнопку */
  .pf-right {
    padding-bottom: 36px !important;
  }
  .pf-dark {
    padding-bottom: 36px !important;
  }
}

/* ─────────────────────────────────────────────
   INDEX — FAB «Каталог» вместо иконки в nav
   Стиль идентичен кнопке «Фильтры» в каталоге
─────────────────────────────────────────────── */
.mob-catalog-fab {
  display: none; /* скрыта по умолчанию, только мобиль */
}
@media (max-width: 991px) {
  .mob-catalog-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 1000;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 13px 22px;
    font-family: 'Manrope', 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.28);
    text-transform: uppercase;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .mob-catalog-fab:active {
    background: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }
}

/* =============================================================
   LIGHT THEME — Mobile nav (white background, dark text)
   ============================================================= */
@media (max-width: 991px) {
  nav,
  .nav-wrap,
  .mob-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
  nav .nav-link,
  nav a,
  .nav-icon-btn,
  .nav-icon-btn svg,
  .nav-icon-btn path {
    color: #1a1a1a !important;
    stroke: #1a1a1a !important;
  }
  .logo, .nav-logo {
    color: #1a1a1a !important;
  }
  .logo em, .nav-logo em { color: #8a7355 !important; }

  /* Mobile dropdown / mega menus */
  .nav-dropdown,
  .mob-menu,
  .mob-drawer {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
  .nav-dropdown a,
  .mob-menu a {
    color: #1a1a1a !important;
  }

  /* Announcement on top stays black */
  .announce {
    background: #0a0a0a !important;
    color: #ffffff !important;
  }
}