/* ===========================
   MOBILE OVERRIDES (≤576px)
   =========================== */
@media (max-width: 576px){

    /* Базовая типографика и отступы */
    body { font-size: 15px; line-height: 1.35; }
    .container { padding-left: 12px; padding-right: 12px; }

    /* Навигация/шапка */
    .navbar .container{ padding-left:12px; padding-right:12px; }
    .navbar-brand img{ height:44px !important; }
    .navbar-brand{ font-size:1.05rem; }
    .nav-desktop-only{ display:none !important; }

    /* Живой поиск — выравниваем dropdown */
    #searchResults{
        position: absolute; inset: auto 0 auto 0;
        max-height: 60vh; overflow:auto;
        border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
    }
    #searchResults .dropdown-item{ padding:.55rem .8rem; }

    /* Карточки товаров (универсальные классы) */
    .product-card .img-wrap{
        aspect-ratio: 1/1; overflow:hidden; border-radius:14px;
    }
    .product-card img{ width:100%; height:100%; object-fit:cover; }
    .product-card .title{ font-size:.94rem; line-height:1.22; }
    .product-card .price{ font-size:1rem; font-weight:700; }
    .product-card .btn{ padding:.46rem .72rem; font-size:.92rem; }

    /* Ряды карточек: 2 колонки на XS */
    .row.row-cols-2 > [class^="col"]{ padding-left: 6px; padding-right:6px; }
    .row.g-3{ --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

    /* Кнопки выбора цвета/размера — крупнее для пальца */
    .size-btn, .color-btn{
        min-width: 44px; min-height: 44px; border-radius: 10px;
        display:inline-flex; align-items:center; justify-content:center;
    }

    /* Модалки: компактнее поля, скролл по экрану */
    .modal-dialog{ margin: .75rem; }
    .modal-content{ border-radius: 14px; }
    .modal .form-control{ padding:.55rem .75rem; font-size:.95rem; }
    .modal .btn{ padding:.55rem .8rem; }

    /* Quick View: делаем карусель комфортной */
    .qv-gallery .swiper{ border-radius:12px; overflow:hidden; }
    .qv-gallery .swiper-pagination-bullets{ bottom: 6px !important; }

    /* Корзина: скрываем таблицу, показываем мобильные карточки (если будут) */
    .cart-table{ display:none; }
    .cart-cards{ display:block; }

    /* Футер — меньше отступы */
    footer .container{ padding-left: 0; padding-right:0; }
    footer .swiper{ padding-bottom: 26px; }

    /* Toast — не липнет к краю на маленьких экранах */
    .position-fixed.bottom-0.end-0.p-3{ padding: .75rem !important; }
}

/* ===========================
   SMALL-TABLET OVERRIDES (≤768px)
   =========================== */
@media (max-width: 768px){

    /* Спонсоры: чуть крупнее логотипы и плотнее сетка */
    .sponsor-swiper img{ max-height:42px; height:42px; }
    .sponsor-swiper .swiper-slide{ padding: 6px 0; }
}

/* ===========================
   Деликатные улучшения без медиа
   (не влияют на десктоп-layout)
   =========================== */
.sponsor-swiper img{ transition: filter .2s, opacity .2s; }

/* Вспомогательный класс, если где-то нужно спрятать на мобиле элемент
   <div class="hide-on-mobile">...</div> */
@media (max-width: 576px){
    .hide-on-mobile{ display:none !important; }
}

/* ===== NAVBAR: мобильная укладка без правки Blade ===== */
@media (max-width: 576px){
    /* Навбар и дети оборачиваются на новую строку */
    nav.navbar{
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Внутренний .container занимает всю ширину и держит: лого + кнопки справа */
    nav.navbar > .container{
        width: 100%;
    }

    /* Лого поменьше */
    nav.navbar .fw-bold img{ height:44px !important; }

    /* Кнопка-гамбургер визуально крупнее и ближе к логотипу */
    nav.navbar .d-lg-none.ms-2{ margin-left: 8px !important; }
    nav.navbar .bi-list{ font-size: 1.8rem !important; }

    /* Правый блок иконок — прижать вправо, выровнять по центру по вертикали */
    nav.navbar .flex.items-center{
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    /* Бэйджи: компактнее и не перекрывают иконки */
    .badge.rounded-pill.bg-danger{
        transform: translate(-40%, -40%) !important;
        font-size: .78rem !important;
        min-width: 20px; min-height: 20px;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* Mega-меню (десктоп) на мобиле отключаем — всё через offcanvas */
    .mega-menu{ display:none !important; }

    /* Поиск: на всю ширину, под шапкой */
    nav.navbar .search-box{
        order: 3;           /* опускаем ниже */
        width: 100%;
        padding: 0 12px 8px;
    }
    nav.navbar .search-box .input-group{
        border: 1px solid #e9ecef; border-radius: 12px; overflow: hidden;
        background: #f8f9fa;
    }
    #searchResults{
        position: absolute; left: 0; right: 0;
        max-height: 60vh; overflow:auto;
        border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
    }
}

/* Укладываем шапку в одну линию и не даём ей расползаться */
@media (max-width: 576px){
    nav.navbar{ flex-wrap: wrap; row-gap: 8px; }
    nav.navbar > .container{ width:100%; align-items:center; }

    /* Лого поменьше */
    nav.navbar .fw-bold img{ height:44px !important; }

    /* Правый блок иконок — прижать вправо */
    nav.navbar .flex.items-center{
        margin-left:auto; display:inline-flex; align-items:center; gap:10px;
    }

    /* Бэйджи у иконок — компактнее */
    .badge.rounded-pill.bg-danger{
        transform: translate(-40%, -40%) !important;
        font-size:.78rem !important; min-width:20px; min-height:20px;
        display:inline-flex; align-items:center; justify-content:center;
    }

    /* Поиск — на всю ширину, ниже шапки */
    nav.navbar .search-box{ order:3; width:100%; padding:0 12px 8px; }
    nav.navbar .search-box .input-group{
        border:1px solid #e9ecef; border-radius:12px; overflow:hidden; background:#f8f9fa;
    }
}

@media (max-width: 576px){
    .offcanvas .accordion-button{ padding:.9rem 0; }
    .offcanvas .accordion-body a{ color:#212529; }
    .offcanvas .accordion-body a:hover{ text-decoration: underline; }
    .offcanvas .badge{
        min-width:20px; min-height:20px;
        display:inline-flex; align-items:center; justify-content:center;
    }
}

/* ==============================
   BASE (общие смягчения)
   ============================== */
:root{
    --radius-lg:14px;
    --radius-md:12px;
    --radius-sm:10px;
    --shadow-sm:0 6px 24px rgba(0,0,0,.08);
    --muted:#f6f7f8;
}

/* плавность ховеров/фокусов */
a, button { transition: all .18s ease; }

/* ==============================
   HEADER
   ============================== */
@media (max-width: 576px){
    nav.navbar{ flex-wrap:wrap; row-gap:10px; }
    nav.navbar > .container{ width:100%; align-items:center; }
    /* логотип компактнее */
    nav.navbar .fw-bold img{ height:44px !important; }
    /* правая панель — ровно по центру, плотнее отступы */
    nav.navbar .flex.items-center{ margin-left:auto; display:inline-flex; gap:10px; align-items:center; }
    /* бейджи: читаемость и позиция */
    .badge.rounded-pill.bg-danger{
        min-width:20px; min-height:20px; font-size:.78rem !important;
        transform:translate(-38%,-45%) !important;
        display:inline-flex; align-items:center; justify-content:center;
    }
    /* поиск на всю ширину ниже шапки */
    nav.navbar .search-box{ order:3; width:100%; padding:0 12px 10px; }
    nav.navbar .search-box .input-group{
        background:var(--muted); border-radius:999px; overflow:hidden; border:1px solid #eceff2;
    }
    #searchResults{
        position:absolute; left:0; right:0; top:calc(100% + 6px);
        border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
        max-height:60vh; overflow:auto;
    }
}

/* ==============================
   OFFCANVAS (моб. меню)
   ============================== */
@media (max-width: 576px){
    .offcanvas{ border-top-right-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-lg); }
    .offcanvas-header{ padding:14px 16px; }
    .offcanvas .accordion-button{ padding:.9rem 0; font-weight:600; }
    .offcanvas .accordion-button::after{ transform:scale(.9); }
    .offcanvas .accordion-body a{
        color:#222; border-radius:8px; padding:.5rem .25rem; display:block;
    }
    .offcanvas .accordion-body a:active{ background:var(--muted); }
    .offcanvas .badge{ min-width:20px; min-height:20px; display:inline-flex; align-items:center; justify-content:center; }
}
/* более тёмный backdrop — “фирменный” вайб */
.offcanvas-backdrop.show{ background:rgba(15,20,30,.55); }

/* ==============================
   HERO SWIPER (баннеры/видео)
   ============================== */
.hero-swiper{ --hero-h:62vw; border-radius:var(--radius-lg); overflow:hidden; }
.hero-swiper .swiper-slide{ height:var(--hero-h); }
.hero-swiper .slide-media{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:576px){
    .hero-swiper{ --hero-h:68vw; }
    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next{ display:none !important; }
    .hero-swiper .swiper-pagination-bullets{ bottom:10px; }
}

/* ==============================
   PRODUCT CAROUSELS
   ============================== */
.product-swiper { padding-bottom:26px; }
.product-swiper .swiper-slide{ height:auto; }
.product-swiper .img-wrap{ aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; background:#fff; }
.product-swiper img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:576px){
    .product-swiper .swiper-button-prev,
    .product-swiper .swiper-button-next{ display:none !important; }
    /* “peek” эффект — свипер немного видит следующий слайд */
    .peek-mobile .swiper{ padding-right:12px; }
}

/* ==============================
   PRODUCT CARD (универсальная)
   ============================== */
@media (max-width:576px){
    .product-card .title{ font-size:.95rem; line-height:1.22; }
    .product-card .price{ font-weight:700; }
    .product-card .btn{ padding:.5rem .8rem; border-radius:10px; }
    .size-btn, .color-btn{
        min-width:44px; min-height:44px; border-radius:10px;
        display:inline-flex; align-items:center; justify-content:center;
    }
}

/* ==============================
   PDP STICKY BAR (по желанию)
   ============================== */
@media (max-width:576px){
    .sticky-add-to-cart{
        position:fixed; left:0; right:0; bottom:0; z-index:1050;
        background:#fff; border-top:1px solid #eceff2; padding:10px 12px;
        box-shadow:0 -10px 30px rgba(0,0,0,.06);
    }
    body.has-sticky-atc{ padding-bottom:82px; } /* добавляй класс на body, когда бар подключён */
}

/* ==============================
   FORMS & MODALS
   ============================== */
@media (max-width:576px){
    .modal-dialog{ margin:.85rem; }
    .modal-content{ border-radius:var(--radius-lg); }
    .form-control{ padding:.55rem .75rem; font-size:.98rem; }
    .btn{ border-radius:12px; }
}

/* ==============================
   MISC
   ============================== */
/* чуть мягче тени карточкам/каруселям */
.card, .hero-swiper, .product-swiper .swiper { box-shadow: var(--shadow-sm); }

/* ===== ТОЛЬКО МОБИЛКА (≤576px) для Bootstrap Carousel баннеров ===== */
@media (max-width: 576px){
    /* высота баннера из ширины экрана + обрезка без белых полей */
    .fullscreen-banner{
        height: 68vw;                /* можно 60–72vw по вкусу */
        border-radius: 14px;         /* если не нужно — убери строку */
        overflow: hidden;
    }
    .fullscreen-banner .carousel-inner,
    .fullscreen-banner .carousel-item{
        height: 100%;
    }
    .fullscreen-banner .carousel-item > img,
    .fullscreen-banner .carousel-item > video{
        width: 100%;
        height: 100%;
        object-fit: cover;           /* заполняем блок аккуратно */
        object-position: center;
        display: block;
    }

    /* стрелки скрываем только на мобиле */
    .fullscreen-banner .carousel-control-prev,
    .fullscreen-banner .carousel-control-next{
        display: none !important;
    }

    /* точки делаем удобнее для клика */
    .fullscreen-banner .carousel-indicators{
        gap: 8px; margin-bottom: 8px;
    }
    .fullscreen-banner .carousel-indicators [data-bs-target]{
        width: 8px; height: 8px; border-radius: 999px;
        background-color: rgba(255,255,255,.85);
        opacity: .7;
    }
    .fullscreen-banner .carousel-indicators .active{
        opacity: 1; background-color: #fff;
    }

    /* подпись компактнее и в безопасной зоне */
    .fullscreen-banner .carousel-caption{
        left: 12px; right: 12px; bottom: 10px;
        padding: 10px 12px !important;
        border-radius: 12px;
        backdrop-filter: blur(6px);
    }
    .fullscreen-banner .carousel-caption h2{
        font-size: 1.05rem; line-height: 1.2; margin: 0 0 .35rem;
    }
}

/* ===== MOBILE FINAL FIX (≤576px) ===== */
@media (max-width:576px){

    /* 1) 2 колонки */
    .grid.grid-cols-4{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:12px !important;
    }

    /* 2) Карточка */
    .product-card{
        position:relative;
        border-radius:14px;
        background:#fff;
        overflow:hidden;
        box-shadow:0 6px 24px rgba(0,0,0,.06);
    }

    /* 3) ОБЁРТКА ПОД ФОТО — СБРОС ВСЕГО ЛИШНЕГО */
    .product-card-body{
        position:relative !important;
        padding:0 !important;
        margin:0 !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        display:block !important;
        background:#f5f5f5;
        line-height:0;          /* убираем возможный межстрочный зазор */
        border-radius:12px;
        overflow:hidden;
    }

    /* 4) Фото — строго квадрат */
    .product-card-body img{
        width:100% !important;
        height:auto !important;          /* перебиваем height="100%" из HTML */
        aspect-ratio:1 / 1 !important;
        object-fit:cover !important;
        object-position:center !important;
        display:block !important;
    }

    /* 5) Quick View: не резервирует место (лежит поверх фото) */
    .product-card-body .quick-view-btn{
        position:absolute !important;
        left:0; right:0; bottom:0;
        background:rgba(0,0,0,.45);
        color:#fff;
        font-size:.9rem;
        padding:6px 0;
        line-height:1.1;
    }

    /* 6) Сердце — справа сверху как на десктопе */
    .product-card .favorite-btn{
        position:absolute !important;
        top:8px; right:8px; z-index:3;
        width:36px; height:36px;
        padding:0 !important; border:0 !important;
        background:rgba(255,255,255,.92) !important;
        border-radius:999px !important;
        box-shadow:0 6px 18px rgba(0,0,0,.12);
    }
}

/* ===== MOBILE: favorite button to top-right ===== */
@media (max-width:576px){
    .product-card{ position: relative; } /* якорим для absolute */

    .product-card .favorite-btn{
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        left: auto !important;           /* сброс возможного центрирования */
        transform: none !important;
        margin: 0 !important;

        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center;
        justify-content: center;

        background: rgba(255,255,255,.92) !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.12);
        z-index: 5;
    }

    /* на всякий случай: иконка не ловит клики отдельно */
    .product-card .favorite-btn i{ pointer-events: none; font-size: 1.1rem; }
}

/* ===== PDP MOBILE (≤576px) ===== */
@media (max-width:576px){

    /* контейнер */
    #pdp{ padding:16px 0 !important; }

    /* верхний блок «галерея + правая колонка» в колонку */
    #pdp > div > .d-flex{ flex-direction:column !important; gap:12px !important; }

    /* галерея: столбиком */
    #pdp .product-gallery{ flex-direction:column !important; gap:10px !important; max-height:none !important; }

    /* большое фото — квадрат */
    #pdp .product-gallery .flex-grow-1{
        width:100% !important;
        aspect-ratio:1/1 !important;
        border-radius:14px; overflow:hidden; background:#f5f5f5;
    }
    #pdp .product-photo{
        display:none !important;
        width:100% !important; height:100% !important;
        object-fit:cover !important; object-position:center;
    }
    #pdp .product-photo.is-active{ display:block !important; }

    /* превьюшки — горизонтальная лента под фото */
    #pdp .product-gallery .ml-3{
        width:100% !important; margin-left:0 !important;
        display:grid !important; grid-auto-flow:column; grid-auto-columns:22%;
        gap:8px !important; overflow-x:auto !important; overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    #pdp .product-gallery .ml-3::-webkit-scrollbar{ display:none; }

    .product-thumb{ width:100% !important; height:auto !important; aspect-ratio:1/1 !important; object-fit:cover; border-radius:10px !important; opacity:.88; transition:opacity .15s, outline .15s; }
    .product-thumb.active{ opacity:1; outline:2px solid #111; }

    /* правая колонка больше не sticky */
    #pdp .sticky-top{ position:static !important; inset:auto !important; max-height:none !important; }

    /* заголовок/цены компактнее */
    #pdp h1.fw-bold{ font-size:1.35rem !important; line-height:1.2 !important; margin-bottom:.5rem !important; }
    #pdp .fs-3{ font-size:1.25rem !important; }

    /* селекторы цвета/размера удобные для пальца */
    #pdp [data-colors] .color-btn{
        width:40px; height:40px; border-radius:999px; border:2px solid #e9ecef; background:var(--swatch,#eee);
    }
    #pdp [data-colors] .color-btn.selected{ outline:3px solid #111; }

    #pdp [data-sizes] .size-btn{ min-width:44px; height:40px; border-radius:10px; }
    #pdp [data-sizes] .size-btn.selected{ background:#111; color:#fff; }

    #pdp #addToCartForm .form-control{ height:44px; }
    #pdp .add-to-cart-btn, #pdp .wishlist-btn{ height:46px; }
}