/**
 * Mobile-only overrides
 *
 * Правим мобильную версию ТОЛЬКО здесь, чтобы не задевать ПК-версию.
 * Файл подключается в шаблоне с media="(max-width: 991.98px)".
 *
 * Источник для моб. правок: `site_mobile_backup` (mobile baseline).
 */

/* Put mobile-only overrides below */

@media (max-width: 991.98px) {
  /* ===== Navbar (mobile) — mirror site_mobile_backup ===== */
  #mainNavbar .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 !important;
    height: 42px;
  }

  #mainNavbar .navbar-toggler {
    border-radius: 0 !important;
    color: #000;
  }

  #mainNavbar .navbar-toggler:hover,
  #mainNavbar .navbar-toggler:focus,
  #mainNavbar .navbar-toggler:active {
    color: #e5241f;
  }

  #mainNavbar .container-fluid .navbar-toggler svg {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  #mainNavbar .mobile-header-icons {
    gap: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #mainNavbar .mobile-icon-link svg {
    color: #000;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Search icon margins */
  #search-mobile {
    margin-left: 11px;
    margin-right: 11px;
  }

  /* Mobile logo centering */
  .navbar-brand.mobile-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
  }

  .navbar-brand.mobile-logo img {
    display: block;
  }

  /* ===== Slider text (mobile): старт ниже кадра; скролл — --overlay-scroll-shift ===== */
  .slide-content-overlay {
    bottom: auto !important;
    top: calc(72% + var(--overlay-scroll-shift, 0) * 14%) !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }

  .slide-content-overlay h3 {
    display: block !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    white-space: normal !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  .slide-content-overlay p {
    font-size: 0.95rem !important;
    height: auto !important;
    margin-bottom: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  /* Карточки каталога / избранное / табы — 16px слева. Не трогаем offcanvas поиск (#search-results без category-grid) */
  #category-products-grid .product-info-category,
  #favorites-products-grid .product-info-category,
  .tabs-module-container .product-info-category {
    padding-left: 16px !important;
  }

  #category-products-grid .product-info-category--swatches-only,
  #favorites-products-grid .product-info-category--swatches-only,
  .tabs-module-container .product-info-category--swatches-only {
    padding-left: 16px !important;
  }

  .offcanvas.offcanvas-search .offcanvas-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Offcanvas поиск: только внутренние 12px, без суммирования с общим .product-info */
  #search-results .product-info-category {
    padding: 12px 12px 14px !important;
    margin: 0 !important;
  }

  #search-results .product-info-category--swatches-only {
    padding: 4px 12px 14px !important;
    margin: 0 !important;
  }

  /* ===== Color swatches (mobile) — всегда видимы, уменьшенные отступы ===== */
  .color-options-category,
  .related-products-section .color-options-category {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  .color-swatches-category,
  .related-products-section .color-swatches-category {
    gap: 2px !important;
  }

  /* ===== Footer (mobile) — remove negative margins from site version ===== */
  .footer-section {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

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

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

  .footer-main .col-12.col-md-4.col-lg-2.mb-4,
  .footer-main .footer-grid-col {
    width: auto !important;
    margin-left: 0 !important;
  }
}

/* Слайдер: как .carousel-card__title при max-width 480px в gallerymodule */
@media (max-width: 480px) {
  .slide-content-overlay h3 {
    font-size: 1.75rem !important;
  }
}