/* ===========================================
   bestbrnd4u
   Version 2.1 — исправлены баги каталога
=========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{

    --primary:#111827;
    --secondary:#2563eb;
    --accent:#f59e0b;
    --danger:#ef4444;

    --white:#ffffff;

    --gray50:#f9fafb;
    --gray100:#f3f4f6;
    --gray200:#e5e7eb;
    --gray300:#d1d5db;
    --gray500:#6b7280;
    --gray700:#374151;
    --gray900:#111827;

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);
    --shadow:0 12px 30px rgba(0,0,0,.08);
    --shadow-lg:0 25px 60px rgba(0,0,0,.12);

    --radius:18px;

    --transition:.35s cubic-bezier(.4,0,.2,1);

}

/* =====================================
   RESET & BASE
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    /* прибираємо системний сірий блик при тапі на iOS/Android —
       замість нього використовуємо власні :active стани нижче */
    -webkit-tap-highlight-color:transparent;
}

/* iOS Safari тримає режим "подвійний тап — зум" активним для
   будь-якого елемента, тому перший тап по кнопці/посиланню
   очікує ~300-350мс, чи не буде другого тапу поруч. Якщо
   людина не дочекалась і тапнула ще раз ("не спрацювало"),
   Safari іноді сприймає цю пару тапів як жест зуму і гасить
   клік повністю — кнопка "Купити"/"Додати в кошик" не
   спрацьовує з першого разу. touch-action:manipulation прибирає
   цю неоднозначність: клік по інтерактивних елементах
   реєструється миттєво, без очікування другого тапу. */
button,
a,
.btn,
input[type="button"],
input[type="submit"]{
    touch-action:manipulation;
}

html{
    scroll-behavior:smooth;
    /* scroll-padding-top навмисно НЕ задаємо: зсув під шапку тепер
       рахує JS (див. syncPhoneLinks/скрол до якорів у common.js) —
       він міряє реальну висоту шапки, а фіксовані 100px були
       підібрані під десктоп і на телефоні давали хибну позицію,
       ще й додавались до scroll-margin цілі. */
    scrollbar-width:thin;
    scrollbar-color:var(--gray300) var(--gray50);
    /* резервуємо місце під вертикальний скролбар завжди —
       без цього поява скролбару (напр. коли в пошуку з'являються
       результати) змінює доступну ширину і весь центрований
       контент "стрибає" вліво */
    scrollbar-gutter:stable;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--gray50);
    color:var(--gray900);
    line-height:1.6;
    overflow-x:hidden;
}

/* -- скроллбар (Chrome/Edge/Safari) -- */

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:var(--gray50);
}

::-webkit-scrollbar-thumb{
    background:var(--gray300);
    border-radius:10px;
    border:2px solid var(--gray50);
}

@media (hover:hover) and (pointer:fine){
::-webkit-scrollbar-thumb:hover{
    background:var(--gray500);
}
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button{
    font-family:inherit;
    cursor:pointer;
    border:none;
    background:none;
}

input,
textarea,
select{
    font-family:inherit;
    width:100%;
    border:1px solid var(--gray200);
    border-radius:12px;
    padding:14px 16px;
    font-size:15px;
    background:var(--gray50);
}

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

section{
    padding:45px 0;
}

.product-page-section{
    padding:0;
}

h1{
    font-size:64px;
    font-weight:800;
    line-height:1.1;
}

h2{
    font-size:42px;
    font-weight:800;
    margin-bottom:50px;
    text-align:center;
}

h3{
    font-size:24px;
    font-weight:700;
}

p{
    color:var(--gray500);
}

.error{
    padding:60px 20px;
    text-align:center;
    color:var(--gray500);
}

/* =====================================
   BUTTONS
===================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 42px;
    border-radius:50px;
    background:var(--secondary);
    color:#fff;
    font-weight:700;
    transition:var(--transition);
    box-shadow:var(--shadow);
}

@media (hover:hover) and (pointer:fine){
.btn:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    background:#1d4ed8;
}
}

.btn-outline{
    background:transparent;
    color:var(--primary);
    box-shadow:none;
    border:2px solid var(--gray300);
}

@media (hover:hover) and (pointer:fine){
.btn-outline:hover{
    background:var(--gray100);
    color:var(--primary);
    border-color:var(--gray300);
    transform:translateY(-4px);
}
}

/* =====================================
   ANIMATIONS
===================================== */

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

@keyframes fade{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

.fade{
    animation:fade .6s ease;
}

/* =====================================
   HEADER
===================================== */

header{
    position:fixed;
    inset:0 0 auto 0;
    height:82px;
    display:flex;
    align-items:center;
    z-index:9999;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(22px);
    border-bottom:1px solid rgba(255,255,255,.3);
    box-shadow:0 8px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

/* На мобільному common.js одразу після завантаження переносить
   гамбургер+пошук+лого в один блок ліворуч (.header-left) —
   до цього моменту вони спочатку намальовані в "десктопному"
   порядку (лого окремо, пошук у правому кластері іконок).
   Без цього правила користувач встигає на долю секунди побачити
   стару розкладку, і шапка візуально "стрибає", коли JS її
   перебудовує. Ховаємо рядок шапки до готовності й одразу
   показуємо вже в фінальному вигляді. */
@media(max-width:768px){
    .header:not(.header-ready){
        visibility:hidden;
    }
}

.logo{
    font-size:34px;
    font-weight:900;
    letter-spacing:4px;
    color:var(--primary);
    transition:.3s;
}

@media (hover:hover) and (pointer:fine){
.logo:hover{
    color:var(--secondary);
}
}

.logo span{
    color:var(--secondary);
}

nav ul{
    display:flex;
    gap:38px;
    align-items:center;
}

nav a{
    position:relative;
    font-size:15px;
    font-weight:700;
    color:var(--gray700);
    transition:.3s;
}

@media (hover:hover) and (pointer:fine){
nav a:hover{
    color:var(--secondary);
}
}

nav a.active{
    color:var(--secondary);
}

.sale-text,
.sale-text.active{
    color:var(--danger) !important;
}



@media (hover:hover) and (pointer:fine){
.sale-text:hover{
    color:var(--danger) !important;
}
}

/* -- мега-меню -- */

nav li.has-mega{
    position:relative;
    /* висота = висоті header (82px), інакше .mega-menu (top:100%
       відносно цього li) відраховується від короткого блоку тексту
       посередині header, а не від його нижнього краю — і випадаюче
       меню на ~29px "заходить" під сам header замість того, щоб
       починатися рівно під ним */
    height:82px;
    display:flex;
    align-items:center;
}

nav li.has-mega > a{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

nav li.has-mega > a::after{
    content:"";
    width:7px;
    height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    opacity:.6;
    transition:.25s;
}

@media (hover:hover) and (pointer:fine){
nav li.has-mega:hover > a::after{
    transform:rotate(225deg) translateY(2px);
}
}

.mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%) translateY(4px);
    display:grid;
    grid-template-columns:repeat(4, 130px);
    gap:14px;
    background:#fff;
    border-radius:16px;
    box-shadow:var(--shadow-lg);
    padding:32px 18px 18px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s;
    z-index:500;
}

@media (hover:hover) and (pointer:fine){
nav li.has-mega:hover .mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
}

.mega-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    padding:10px;
    border-radius:12px;
    transition:.25s;
}

@media (hover:hover) and (pointer:fine){
.mega-item:hover{
    background:var(--gray50);
    color:var(--secondary);
}
}

.mega-item img{
    width:88px;
    height:88px;
    object-fit:cover;
    border-radius:12px;
}

.mega-item span{
    font-size:13px;
    font-weight:700;
    color:var(--gray900);
}

@media (hover:hover) and (pointer:fine){
.mega-item:hover span{
    color:var(--secondary);
}
}

/* -- мегаменю "Каталог" з колонками розділів (наповнюється JS) -- */

.mega-menu.mega-menu-columns{
    /* Панель на всю ширину екрана: усі три меню (Каталог, Новинки,
       Акції) відкриваються на одному й тому самому місці, тож при
       переведенні курсору між пунктами вона більше не "стрибає"
       вбік. Точні left/width виставляє mega-menu.js — сам li вузький
       і є containing block, тому суто через CSS дотягнутись до країв
       екрана не вийде. */
    left:0;
    right:auto;
    width:auto;
    max-width:none;
    transform:translateY(4px);

    display:block;
    grid-template-columns:none;
    gap:0;
    padding:0;
    border-radius:0 0 20px 20px;
}

/* правило nav li.has-mega:hover .mega-menu має специфічність (0,3,2)
   і перебило б transform вище, повернувши translateX(-50%) — тобто
   панель знову з'їхала б убік. Дублюємо селектор із класом колонок */
nav li.has-mega:hover .mega-menu.mega-menu-columns{
    transform:translateY(0);
}

/* вміст вирівняний по центральній сітці сайту, колонки — рівні
   за шириною, з однаковими відступами між ними */
.mega-inner{
    max-width:1600px;
    margin:0 auto;
    padding:30px 32px 28px;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    gap:26px 32px;
    align-items:start;
    text-align:left;
}

/* усередині сітки ширину задає сама колонка сітки, а не фікс. 160px */
.mega-inner .mega-col{
    width:auto;
}

.mega-col{
    width:160px;
}

/* заголовок колонки — назва статі: темний, звичайним регістром,
   як у референсі; сам по собі є посиланням на всю стать */
.mega-col-title{
    font-size:15px;
    font-weight:700;
    color:var(--gray900);
    margin-bottom:12px;
}

/* ВАЖЛИВО про подвійний селектор: правило .mega-col a нижче має
   специфічність (0,1,1) — вищу за .mega-col-title (0,1,0) — і
   перебило б розмір та колір заголовка, зрівнявши його зі
   звичайним пунктом списку */
.mega-col a.mega-col-title-link{
    display:block;
    font-size:15px;
    font-weight:700;
    color:var(--gray900);
    padding:0;
    margin-bottom:12px;
}

.mega-col a.mega-col-title-link:hover{
    color:var(--secondary);
}

.mega-col a.mega-col-all{
    margin-top:6px;
    font-weight:600;
    color:var(--secondary);
}

.mega-col a{
    display:block;
    padding:5px 0;
    font-size:14px;
    color:var(--gray700);
    transition:.2s;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media (hover:hover) and (pointer:fine){
.mega-col a:hover{
    color:var(--secondary);
}
}

.header-icons{
    display:flex;
    gap:18px;
    align-items:center;
}

.header-icons a,
.header-icons button{
    position:relative;
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    box-shadow:var(--shadow-sm);
    transition:.3s;
    font-size:20px;
}

@media (hover:hover) and (pointer:fine){
.header-icons a:hover,
.header-icons button:hover{
    background:var(--secondary);
    color:white;
    transform:translateY(-3px);
}
}

.header-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.header-left button{
    position:relative;
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    box-shadow:var(--shadow-sm);
    transition:.3s;
    font-size:20px;
    flex-shrink:0;
}

@media (hover:hover) and (pointer:fine){
.header-left button:hover{
    background:var(--secondary);
    color:white;
    transform:translateY(-3px);
}
}

/* -- кнопка мобільного меню (гамбургер) --
   сама кнопка з'являється лише на вузьких екранах, див.
   @media(max-width:768px) нижче — тут лише базовий вигляд,
   спільний з іншими іконками хедера. Селектор навмисно з двох
   класів (.header-icons/.header-left .mobile-menu-btn), а не
   одного — інакше .header-icons button{display:flex} (вище)
   переважає за специфічністю, і кнопка лізла б навіть на
   десктопі. Два варіанти селектора — бо на мобільному JS
   переносить кнопку з .header-icons в .header-left (див.
   common.js), а на десктопі вона повертається назад */

.header-icons .mobile-menu-btn,
.header-left .mobile-menu-btn{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:46px;
    height:46px;
    border-radius:50%;
    background:white;
    box-shadow:var(--shadow-sm);
    transition:.3s;
    order:-1;
}

.mobile-menu-btn span{
    display:block;
    width:18px;
    height:2px;
    border-radius:2px;
    background:var(--gray900);
    transition:.25s;
}

.mobile-menu-btn.open span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.mobile-menu-btn.open span:nth-child(2){
    opacity:0;
}

.mobile-menu-btn.open span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}

/* -- мини-корзина (поп-ап под иконкой корзины) -- */

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

.cart-popup{
    position:absolute;
    top:calc(100% + 16px);
    right:0;
    width:340px;
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow-lg);
    padding:22px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:.25s;
    z-index:600;
}

.cart-popup.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.cart-popup-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--gray700);
}

.cart-popup-header span{
    color:var(--secondary);
    font-weight:800;
}

.cart-popup-item{
    display:flex;
    gap:14px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid var(--gray100);
}

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

.cart-popup-item-info{
    min-width:0;
}

.cart-popup-item-brand{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--gray500);
    margin-bottom:2px;
}

.cart-popup-item-title{
    font-size:14px;
    font-weight:600;
    color:var(--gray900);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.cart-popup-item-meta{
    font-size:12px;
    color:var(--gray500);
    margin-top:2px;
}

.cart-popup-item-price{
    font-size:14px;
    color:var(--gray500);
    margin-top:2px;
}

.cart-popup-total{
    display:flex;
    justify-content:space-between;
    margin:16px 0 18px;
    font-size:16px;
    font-weight:700;
}

.cart-popup .btn{
    width:100%;
    padding:14px;
    font-size:14px;
    font-weight:700;
    border-radius:12px;
    box-shadow:none;
    background:var(--secondary);
    color:#fff;
}

@media (hover:hover) and (pointer:fine){
.cart-popup .btn:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}
}

.cart-popup .cart-popup-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:auto;
    margin-top:10px;
    padding:13px;
    border-radius:12px;
    border:1.5px solid var(--gray200);
    font-size:14px;
    font-weight:700;
    color:var(--gray700);
    text-decoration:none;
    transition:.2s;
    background:none;
    box-shadow:none;
}

@media (hover:hover) and (pointer:fine){
.cart-popup .cart-popup-link:hover{
    border-color:var(--secondary);
    color:var(--secondary);
    background:rgba(37,99,235,.05);
    transform:none;
}
}

@media(max-width:500px){

    .cart-popup{
        position:fixed;
        top:92px;
        left:16px;
        right:16px;
        width:auto;
        max-width:360px;
        margin:0 auto;
    }

}

#cartCount,
#favCount{
    position:absolute;
    top:-4px;
    right:-4px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--danger);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:700;
}


/* =====================================
   HERO
===================================== */

/* тёмна підкладка позаду hero — щоб у вирізі
   скругленого нижнього кута було видно темний
   колір, а не світлий фон сторінки */
.hero-backdrop{
    background:#111827;
}

.hero{
    border-radius:0 0 40px 40px;
    margin-top:82px;
    min-height:720px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;

    /* захисний колір-підклад: якщо з якоїсь причини
       фото не завантажиться, кут не буде "світлою дірою" */
    background-color:#111827;

    /* усе одним background-image — навмисно без окремого
       ::before для градієнта: два різних composite-шари
       (псевдоелемент + фон) з border-radius:40px і
       overflow:hidden давали баг рендеру в Chrome — по кутах
       "просвічував" фон сторінки. Один шар = один клip. */
    background-image:
        linear-gradient(
            90deg,
            rgba(17,24,39,.65) 0%,
            rgba(17,24,39,.30) 55%,
            rgba(17,24,39,0) 100%
        ),
        linear-gradient(rgba(17,24,39,.45), rgba(17,24,39,.45)),
        var(--hero-bg, url("/assets/images/banners/hero-bags.jpg"));
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content{
    position:relative;
    z-index:5;
    max-width:650px;
    color:white;
    animation:fadeUp 1s ease;
}

.hero h1{
    color:white;
    margin-bottom:25px;
}

.hero p{
    color:rgba(255,255,255,.9);
    font-size:20px;
    margin-bottom:45px;
    max-width:520px;
}

.hero-buttons{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

.hero .btn{
    font-size:18px;
}

/* FIX: тёмный .btn-outline на тёмном фото hero
   был почти нечитаем — делаем светлый вариант
   только в контексте hero */
.hero .btn-outline{
    color:#fff;
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(6px);
}

@media (hover:hover) and (pointer:fine){
.hero .btn-outline:hover{
    background:#fff;
    color:var(--primary);
    border-color:#fff;
}
}

/* той самий фікс, що і для .hero, але для банерів
   сторінок bayer-service / delivery-payment / return-warranty */
.bayer-hero-banner .btn-outline{
    color:#fff;
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(6px);
}

@media (hover:hover) and (pointer:fine){
.bayer-hero-banner .btn-outline:hover{
    background:#fff;
    color:var(--primary);
    border-color:#fff;
}
}

/* =====================================
   SECTION TITLE
===================================== */

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:45px;
    scroll-margin-top:100px;
}

.section-title h2{
    margin:0;
}

.section-title a{
    color:var(--secondary);
    font-weight:700;
}

/* =====================================
   INSTAGRAM PROMO
===================================== */

.instagram-promo{
    background:var(--primary);
    padding:25px 0;
}

.instagram-card{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
    padding:36px 44px;
    border-radius:24px;
    background:linear-gradient(135deg,#405de6,#5851db 25%,#833ab4 50%,#c13584 75%,#fd1d1d);
}

.instagram-icon{
    font-size:40px;
    flex-shrink:0;
    width:76px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.18);
    border-radius:50%;
}

.instagram-text{
    flex:1;
    min-width:220px;
}

.instagram-text h3{
    color:#fff;
    font-size:24px;
    margin-bottom:6px;
}

.instagram-text p{
    color:rgba(255,255,255,.9);
}

.instagram-card .btn{
    background:#fff;
    color:var(--primary);
    white-space:nowrap;
}

@media (hover:hover) and (pointer:fine){
.instagram-card .btn:hover{
    background:rgba(255,255,255,.85);
}
}

@media(max-width:768px){

    .instagram-card{
        flex-direction:column;
        text-align:center;
        padding:32px 24px;
    }

}

/* =====================================
   CATEGORIES
===================================== */

.categories{
    background:white;
}

.grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.category{
    background:white;
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
    cursor:pointer;
}

@media (hover:hover) and (pointer:fine){
.category:hover{
    transform:translateY(-8px);
}
}

.category img{
    width:100%;
    height:300px;
    object-fit:cover;
    transition:.5s;
}

@media (hover:hover) and (pointer:fine){
.category:hover img{
    transform:scale(1.05);
}
}

.category h3{
    padding:22px;
    text-align:center;
}

/* =====================================
   ADVANTAGES
===================================== */

.advantages{
    background:white;
}

.advantages-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.advantages-grid div{
    text-align:center;
    padding:40px;
    border-radius:20px;
    background:var(--gray50);
    transition:.3s;
}

@media (hover:hover) and (pointer:fine){
.advantages-grid div:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
}
}

.advantages-grid h3{
    margin:20px 0 10px;
}

/* =====================================
   PRODUCTS GRID + CARD
   (используется на главной, в каталоге,
   в избранном и в "похожих товарах")
===================================== */

.products{
    background:#f8fafc;
    padding-top:40px;
}

#products{
    /* магічний -58px прибрано разом із global scroll-padding-top:
       зсув тепер виставляє JS через scroll-margin-top на самому
       заголовку, під фактичну висоту шапки */
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:30px;
}

/* =====================================
   КАРУСЕЛЬ ("Популярні товари", "Схожі товари")

   Скопльовано під .carousel-track, щоб не зачепити
   справжню CSS-сітку каталогу (#catalogGrid теж має
   клас .products-grid, але без .carousel-track —
   там потрібна саме сітка, а не горизонтальний скрол).
===================================== */

.carousel{
    position:relative;
}

.carousel-track.products-grid{
    display:flex;
    grid-template-columns:none;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 4px 8px;
    margin:-4px -4px -8px;
    /* те саме, що й для photo-track: горизонтальний свайп
       гортає картки, а вертикальний свайп повинен нормально
       йти на скрол сторінки — тому дозволяємо обидва напрямки
       й даємо браузеру самому визначити жест (як на MD Fashion) */
    touch-action:pan-x pan-y;
}

.carousel-track.products-grid::-webkit-scrollbar{
    display:none;
}

.carousel-track.products-grid .product-card{
    scroll-snap-align:start;
    flex:0 0 calc(25% - 18px);
    min-width:260px;
}

.carousel-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gray900);
    z-index:5;
    transition:var(--transition);
}

.carousel-arrow svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media (hover:hover) and (pointer:fine){
.carousel-arrow:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-50%) scale(1.06);
}
}

.carousel-arrow.carousel-prev{
    left:-24px;
}

.carousel-arrow.carousel-next{
    right:-24px;
}

.carousel-arrow[disabled]{
    opacity:.35;
    cursor:default;
}

@media(max-width:900px){

    .carousel-track.products-grid .product-card{
        flex:0 0 calc(80% - 12px);
        min-width:220px;
    }

    .carousel-arrow{
        width:40px;
        height:40px;
    }

    .carousel-arrow.carousel-prev{
        left:-8px;
    }

    .carousel-arrow.carousel-next{
        right:-8px;
    }

}

.product-card{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
    transition:var(--transition);
    animation:fadeUp .5s ease both;
    cursor:pointer;
}

.product-card[hidden]{
    display:none;
}

@media (hover:hover) and (pointer:fine){
.product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}
}

.product-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    border:2px solid transparent;
    transition:.35s;
    pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
.product-card:hover::before{
    border-color:rgba(37,99,235,.15);
}
}

/* -- изображение карточки -- */

.product-image{
    position:relative;
}

.product-video-slide{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:.45s;
}



@media (hover:hover) and (pointer:fine){
.product-card:hover .product-image img{
    transform:scale(1.08);
}
}

.product-carousel{
    position:relative;
    width:100%;
    aspect-ratio:4/5;
    overflow:hidden;
    background:var(--gray50);
}

.photo-track{
    display:flex;
    width:100%;
    height:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* горизонталь тепер керується вручну в JS
       (bindProductCarousel в ui.js) — див. докладне пояснення
       біля .gallery-track. Тут дозволяємо pan-y, щоб сторінка
       нормально скролилась, коли палець на фото картки */
    touch-action:pan-y pinch-zoom;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
}

.photo-track::-webkit-scrollbar{
    display:none;
}

.photo-slide{
    flex:0 0 100%;
    scroll-snap-align:start;
}

.photo-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:var(--gray900);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    line-height:1;
    box-shadow:var(--shadow-sm);
    z-index:3;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s;
}

@media (hover:hover) and (pointer:fine){
.product-card:hover .photo-nav{
    opacity:1;
    pointer-events:auto;
}

.product-card:hover .photo-nav:disabled{
    opacity:.35;
}
}

.photo-nav:disabled{
    cursor:default;
}

.photo-nav-prev{ left:10px; }
.photo-nav-next{ right:10px; }

.photo-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:12px;
    display:flex;
    justify-content:center;
    gap:5px;
    z-index:3;
}

.photo-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,.65);
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
    transition:.2s;
}

.photo-dot.active{
    width:14px;
    border-radius:3px;
    background:#fff;
}

/* на мобільних стрілки лише заважають — гортаємо свайпом,
   крапки лишаються видимими завжди */
@media(max-width:768px){

    .photo-nav{
        display:none;
    }

}

.badge{
    position:absolute;
    top:18px;
    left:18px;
    background:var(--secondary);
    color:white;
    padding:8px 14px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    z-index:2;
}

.badge-stack{
    position:absolute;
    /* щільніше в лівий верхній кут, щоб стовпчик бейджів
       (NEW/TOP → -30% → «Під замовлення») менше закривав фото */
    top:10px;
    left:10px;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}

.badge-discount{
    background:var(--danger);
}

.badge-stack .badge{
    position:static;
}

.badge-preorder{
    display:none;
    align-items:center;
    gap:5px;
    background:#b45309;
}

@media(max-width:768px){

    .badge-preorder{
        display:flex;
        width:34px;
        height:34px;
        padding:0;
        justify-content:center;
        border-radius:50%;
        font-size:15px;
    }

    .badge-preorder-text{
        display:none;
    }

}

/* -- кнопка "в избранное" (иконка-сердце) --
   base круглый стиль общий для карточки
   и для страницы товара (.favorite-btn ниже
   переопределяет размер под свой контекст).

   ВАЖНО: раньше внутри кнопки лежал эмодзи ❤ —
   он игнорирует CSS color и всегда красный,
   поэтому при hover (красный фон) сердце
   визуально "пропадало", сливаясь с фоном.
   Теперь внутри — SVG-иконка (см. ui.js),
   которая полностью управляется через
   fill/stroke ниже. */

.favorite{
    width:44px;
    height:44px;
    border-radius:50%;
    background:white;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.favorite svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:var(--gray900);
    stroke-width:2;
    transition:.25s ease;
    pointer-events:none;
}

@media (hover:hover) and (pointer:fine){

    .favorite:hover{
        background:var(--danger);
        transform:scale(1.08);
    }

    .favorite:hover svg{
        fill:#fff;
        stroke:#fff;
    }

    .favorite.active:hover svg{
        fill:#fff;
        stroke:#fff;
    }

}

.favorite.active svg{
    fill:var(--danger);
    stroke:var(--danger);
}

.product-image .favorite{
    position:absolute;
    top:18px;
    right:18px;
    z-index:2;
}

/* -- панель кольору/розміру/кнопки, що з'являється поверх фото
      лише при наведенні (десктопна сітка каталогу й каруселі) --
      За замовчуванням (мобільний, список) прихована — там працює
      звичайний блок нижче фото, як і раніше. */

.product-hover-panel{
    display:none;
}

@media (hover:hover) and (pointer:fine){

    .products-grid:not(.list-view) .product-hover-panel{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        position:absolute;
        left:10px;
        right:10px;
        bottom:10px;
        z-index:4;
        padding:14px;
        border-radius:16px;
        background:linear-gradient(to top, rgba(17,24,39,.88) 0%, rgba(17,24,39,.55) 65%, rgba(17,24,39,0) 100%);
        opacity:0;
        transform:translateY(10px);
        pointer-events:none;
        transition:.25s;
    }

    .products-grid:not(.list-view) .product-card:hover .product-hover-panel{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    .product-hover-panel .product-options{
        display:flex;
        /* Колір і розмір — ОКРЕМИМИ рядками, один під одним.
           Раніше вони стояли поруч із gap:14px, а стрілки прокрутки
           виступають на 8px назовні з КОЖНОГО боку: права стрілка
           кольору й ліва стрілка розміру не вміщались у цей зазор
           (8+8=16 > 14) і накладались одна на одну та на сусідній
           блок — саме це було видно після вибору другого кольору,
           коли список розмірів ставав коротким.
           У стовпчик кожен блок отримує всю ширину панелі, і стрілки
           стоять по власних краях, ні з чим не стикаючись. */
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        margin-bottom:0;
        /* Панель має align-items:flex-start, тому діти НЕ розтягуються
           і рядок опцій ріс по вмісту — розміри вилазили за картку, а
           .product-sizes ніколи не ставав вужчим за вміст, тож
           scrollWidth === clientWidth і стрілки не з'являлись.
           width:100% + min-width:0 обмежують рядок шириною панелі. */
        width:100%;
        min-width:0;
    }

    /* обидва блоки — на всю ширину панелі, кожен зі своєю
       прокруткою. Сам overflow-x лишається на .product-sizes /
       .product-colors (спільне правило в @media(min-width:769px)
       нижче по файлу), а обгортка задає видиму область, відносно
       якої absolute-позиціонуються стрілки. */
    .product-hover-panel .product-sizes-wrap,
    .product-hover-panel .product-colors-wrap{
        width:100%;
        min-width:0;
    }

    .product-hover-panel .discount{
        align-self:flex-start;
    }

    .product-hover-panel .buy-btn{
        height:42px;
        font-size:14px;
    }

    /* оригінальний блок (колір/розмір/ціна-знижка/кнопка) під фото —
       у цьому режимі дублюється панеллю вище, тож ховаємо його, щоб
       не показувати двічі */
    .products-grid:not(.list-view) .product-card .product-meta-row .product-options,
    .products-grid:not(.list-view) .product-card .price-meta .discount,
    .products-grid:not(.list-view) .product-card > .product-info > .buy-btn{
        display:none;
    }

}

/* -- текстовая часть карточки -- */

.product-card .product-info{
    display:flex;
    flex-direction:column;
    flex:1;
    /* min-width:0 обов'язковий: у .product-card стоїть
       overflow:hidden, і без цього рядок ціни з white-space:nowrap
       не міг стиснутись — «грн» просто зрізалось краєм картки
       (виглядало так, наче валюти в каталозі немає взагалі) */
    min-width:0;
    padding:18px 20px 20px;
}

.product-category-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:6px;
}

.product-category{
    display:inline-block;
    color:var(--gray700);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.preorder-inline,
.preorder-row{
    display:none;
}

@media(min-width:769px){

    .preorder-inline,
    .preorder-row{
        align-items:center;
        gap:5px;
        padding:3px 10px;
        border-radius:50px;
        background:rgba(180,83,9,.12);
        color:#b45309;
        font-size:11px;
        font-weight:700;
        letter-spacing:.3px;
        white-space:nowrap;
    }

    /* сітка (не список) — тег поруч з брендом */
    .products-grid:not(.list-view) .preorder-inline{
        display:inline-flex;
    }

    /* список — власним рядком під розмір/колір, перед кнопкою */
    .products-grid.list-view .preorder-row{
        display:inline-flex;
        width:fit-content;
        padding:6px 14px;
        font-size:12px;
    }

}

.preorder-tag{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    margin-bottom:8px;
    border-radius:6px;
    background:rgba(245,158,11,.12);
    color:#b45309;
    font-size:12px;
    font-weight:700;
}

.preorder-banner{
    padding:14px 18px;
    margin-bottom:20px;
    border-radius:14px;
    background:rgba(245,158,11,.1);
    border:1px solid rgba(245,158,11,.3);
    color:#92400e;
    font-size:14px;
    line-height:1.5;
}

.product-title{
    font-size:17px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:10px;
    /* Резервуємо висоту РІВНО під 2 рядки (2 × line-height), навіть
       якщо назва товару вміщається в один. Без цього назва в один
       рядок займає вдвічі менше місця, ніж у два — і все, що нижче
       (ціна, кнопка "Купити"), зʼїжджає вгору. У сусідніх картках
       одного ряду з різною довжиною назви ціна опинялась на різній
       висоті — саме це показано на скріні. em — відносно ВЛАСНОГО
       font-size цього правила, тож стабільно і на мобільній версії
       з іншим розміром шрифту (там окреме дзеркальне правило нижче). */
    min-height:2.6em;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

/* Назва в картці — справжнє посилання <a href="/p/…/">, а не просто
   текст. Раніше перехід на товар робив лише JS-обробник кліку по
   картці: людині це непомітно, але пошуковий робот такі "посилання"
   не бачить взагалі — сторінки товарів не мали жодного вхідного
   посилання з каталогу і трималися в індексі тільки на sitemap.
   Візуально нічого не змінюється: колір і підкреслення успадковані,
   клік по решті картки далі обробляє common.js (і переносить
   обраний колір/розмір). */
.product-title-link{
    color:inherit;
    text-decoration:none;
}

.product-title-link:hover{
    text-decoration:underline;
}

.product-meta-row{
    display:flex;
    flex-direction:column;
}

/* мобільний за замовчуванням: залишаємо той самий порядок, що й
   був — колір/розмір над ціною */
.product-meta-row .product-options{
    order:-1;
}

@media(min-width:769px){

    .product-meta-row{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        margin-bottom:14px;
    }

    .product-meta-row .product-options{
        order:0;
        flex-direction:column;
        align-items:flex-end;
        margin-bottom:0;
        flex-wrap:nowrap;
    }

    .product-meta-row .product-price{
        margin-bottom:0;
    }

}

.product-options{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}

.product-colors{
    display:flex;
    gap:7px;
}

.mini-color{
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 1.5px var(--gray200);
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.mini-color:hover{
    box-shadow:0 0 0 1.5px var(--gray300);
}
}

.mini-color.active{
    box-shadow:0 0 0 2px var(--secondary);
}

.product-sizes-wrap,
.product-colors-wrap{
    position:relative;
    display:flex;
    align-items:center;
    min-width:0;
}

.product-sizes{
    display:flex;
    gap:5px;
    min-width:0;
}

.product-sizes .mini-size{
    flex-shrink:0;
}

/* стрілки прокрутки розмірів — лише десктоп і лише коли є що
   прокручувати (клас has-overflow ставить ui.js) */
.sizes-arrow,
.colors-arrow{
    display:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:20px;
    height:20px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.22);
    color:var(--gray700);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    transition:opacity .15s ease;
}

.sizes-arrow-left,
.colors-arrow-left{ left:-8px; }

.sizes-arrow-right,
.colors-arrow-right{ right:-8px; }

.sizes-arrow:disabled,
.colors-arrow:disabled{
    opacity:.3;
    cursor:default;
}

@media(min-width:769px){

    .product-sizes,
    .product-colors{
        overflow-x:auto;
        scroll-behavior:smooth;
        scrollbar-width:none;
        -ms-overflow-style:none;
        /* рамка активного розміру / кільце активного кольору
           малюються ПОЗА межами самої кнопки — без цього запасу
           контейнер прокрутки обрізав би їх з країв */
        padding:2px;
        margin:-2px;
    }

    .product-sizes::-webkit-scrollbar,
    .product-colors::-webkit-scrollbar{
        display:none;
    }

    .product-sizes-wrap.has-overflow .sizes-arrow,
    .product-colors-wrap.has-overflow .colors-arrow{
        display:inline-flex;
    }

    /* кружечки кольору не стискаються — інакше flex ужимав би їх
       замість того, щоб дати рядку прокручуватись */
    .product-colors .mini-color{
        flex-shrink:0;
    }

}

.mini-size{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:28px;
    padding:0 7px;
    border-radius:9px;
    border:1.5px solid var(--gray200);
    font-size:12px;
    font-weight:700;
    color:var(--gray700);
    background:#fff;
    white-space:nowrap;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.mini-size:hover{
    border-color:var(--gray300);
}
}

.mini-size.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

.product-price{
    /* Ціна і закреслена стара — ОДНИМ рядком. Раніше стара ціна з
       пігулкою відсотка займали другий рядок і на вузьких картках
       каталогу «грн» вилазило за край. Відсоток тепер живе в
       бейджі на фото, тож рядок став коротшим і вміщається. */
    display:flex;
    flex-direction:row;
    align-items:baseline;
    flex-wrap:nowrap;
    gap:8px;
    min-width:0;
    margin-bottom:14px;
    /* однакова висота карток у ряду — тепер це один рядок */
    min-height:28px;
}

.price-meta{
    display:flex;
    align-items:baseline;
    flex-wrap:nowrap;
    gap:10px;
    min-height:19px;
}

.price-meta .old-price{
    white-space:nowrap;
}

.product-card .price{
    font-size:20px;
    font-weight:800;
    color:var(--gray900);
    white-space:nowrap;
}

.product-card .old-price{
    text-decoration:line-through;
    color:var(--gray300);
    font-size:13px;
    white-space:nowrap;
}

.discount{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    padding:4px 10px;
    border-radius:999px;
    background:var(--danger);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    white-space:nowrap;
}

/* сумма скидки в сводке заказа (корзина/чекаут) —
   просто акцентный текст, без "таблетки"-фона */
.discount-value{
    color:#16a34a;
    font-weight:700;
}

.product-card .buy-btn{
    margin-top:auto;
    width:100%;
    height:48px;
    border-radius:12px;
    background:var(--secondary);
    color:white;
    font-size:15px;
    font-weight:700;
    transition:.3s;
}

@media (hover:hover) and (pointer:fine){
.product-card .buy-btn:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}
}

/* =====================================
   NEWSLETTER
===================================== */

.newsletter{
    background:var(--primary);
    padding:50px 0;
    text-align:center;
}

.newsletter h2{
    color:#fff;
    font-size:44px;
    margin-bottom:16px;
}

.newsletter > .container > p{
    color:rgba(255,255,255,.6);
    font-size:17px;
    margin-bottom:48px;
}

.newsletter-form{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:24px;
    max-width:560px;
    margin:0 auto;
}

.newsletter-form input{
    flex:1;
    background:transparent;
    border:none;
    border-bottom:1.5px solid rgba(255,255,255,.3);
    border-radius:0;
    padding:12px 4px;
    font-size:17px;
    color:#fff;
    transition:.25s;
}

.newsletter-form input::placeholder{
    color:rgba(255,255,255,.45);
}

.newsletter-form input:focus{
    outline:none;
    border-bottom-color:#fff;
}

.newsletter-form .btn{
    flex-shrink:0;
    background:#fff;
    color:var(--primary);
    padding:16px 38px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    box-shadow:none;
}

@media (hover:hover) and (pointer:fine){
.newsletter-form .btn:hover{
    background:var(--secondary);
    color:#fff;
    transform:translateY(-2px);
}
}

.newsletter-form .btn:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none;
}

.newsletter-form input.has-error{
    border-bottom-color:#ff9b9b;
    animation:newsletterShake .3s;
}

@keyframes newsletterShake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-6px); }
    75%{ transform:translateX(6px); }
}

.newsletter small{
    display:block;
    margin-top:28px;
    color:rgba(255,255,255,.4);
    font-size:13px;
    letter-spacing:.3px;
}

@media(max-width:600px){

    .newsletter-form{
        flex-direction:column;
        align-items:stretch;
        gap:20px;
    }

    .newsletter-form .btn{
        width:100%;
    }

}

/* =====================================
   FOOTER
===================================== */

footer{
    margin-top:0;
    background:var(--primary);
    padding:80px 0 30px;
}

.footer{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.2fr;
    gap:60px;
}

.footer h3{
    margin-bottom:20px;
    color:#fff;
}

.footer a{
    display:block;
    margin-bottom:10px;
    color:var(--gray300);
    transition:.3s;
}

@media (hover:hover) and (pointer:fine){
.footer a:hover{
    color:white;
    padding-left:8px;
}
}

.footer p{
    color:var(--gray300);
    margin-bottom:10px;
}

/* Контакти на сторінці «Контакти» — успадковують колір тексту
   картки, підкреслення при наведенні */
.contact-card .contact-link{
    color:inherit;
    text-decoration:none;
}

.contact-card .contact-link:hover{
    color:var(--secondary);
    text-decoration:underline;
}

/* Контакти у футері — телефон, пошта, Telegram.
   Успадковують колір тексту футера, а не типовий синій колір
   посилання: інакше три контактні рядки вибивалися б із блоку.
   Підкреслення з'являється лише при наведенні — щоб було видно,
   що це все-таки посилання. */
.footer .phone-link,
.footer .mail-link,
.footer .tg-link{
    color:inherit;
    text-decoration:none;
}

.footer .phone-link:hover,
.footer .mail-link:hover,
.footer .tg-link:hover{
    color:#fff;
    text-decoration:underline;
}

.copyright{
    background:var(--primary);
    color:var(--gray300);
    padding:20px 0;
    font-size:14px;
    border-top:1px solid rgba(255,255,255,.1);
}

/* =====================================
   PROMO BANNER
===================================== */

.promo{
    background:#fff;
    padding:40px 0;
}

.promo-banner{
    border-radius:30px;
    overflow:hidden;
    padding:90px;
    color:white;

    background-color:#111827;
    background-image:
        linear-gradient(rgba(17,24,39,.55), rgba(17,24,39,.55)),
        var(--promo-bg, url("/assets/images/banners/home-new-arrivals.jpg"));
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.promo-content{
    max-width:650px;
}

.promo-label{
    display:inline-block;
    padding:8px 18px;
    background:var(--secondary);
    border-radius:50px;
    margin-bottom:24px;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
}

.promo-banner h2{
    color:white;
    text-align:left;
    margin-bottom:25px;
}

.promo-banner p{
    color:rgba(255,255,255,.9);
    margin-bottom:40px;
    font-size:18px;
}

/* =====================================
   BRANDS
===================================== */

/* =====================================
   АКЦІЇ (головна сторінка)
===================================== */

.promotions{
    background:#fff;
}

.promotions-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:28px;
}

.promo-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
    transition:.3s;
}

@media (hover:hover) and (pointer:fine){
.promo-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}
}

.promo-card-image{
    position:relative;
    height:220px;
    overflow:hidden;
}

.promo-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
    transition:.45s;
}

@media (hover:hover) and (pointer:fine){
.promo-card:hover .promo-card-image img{
    transform:scale(1.06);
}
}

.promo-card-badge{
    position:absolute;
    top:16px;
    left:16px;
    background:var(--danger);
    color:#fff;
    padding:6px 14px;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
}

.promo-card-info{
    padding:22px 24px 26px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.promo-card-info h3{
    font-size:19px;
    line-height:1.3;
}

.promo-card-info p{
    font-size:14px;
    color:var(--gray500);
}

.promo-card-link{
    margin-top:10px;
    font-weight:700;
    color:var(--secondary);
    font-size:14px;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.promo-card:hover .promo-card-link{
    color:#1d4ed8;
}
}

/* =====================================
   ПОВНОШИРИННИЙ СЛАЙДЕР АКЦІЙ (displayType: "hero_slider") —
   одна велика акція за раз, зі стрілками й лічильником,
   як банер на md-fashion.ua
===================================== */

.promo-hero-slider{
    background:#fff;
}

.promo-hero-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-radius:30px;
    overscroll-behavior-x:contain;
}

.promo-hero-track::-webkit-scrollbar{
    display:none;
}

.promo-hero-slide{
    flex:0 0 100%;
    scroll-snap-align:start;
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:360px;
    background:#f8fafc;
}

.promo-hero-slide-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:10px;
    padding:36px;
}

.promo-hero-slide-badge{
    display:inline-block;
    padding:8px 18px;
    background:var(--danger);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
}

.promo-hero-slide-content h2{
    font-size:32px;
    line-height:1.15;
    text-align:left;
    margin:0;
}

.promo-hero-slide-content p{
    color:var(--gray500);
    font-size:16px;
    margin:0;
}

.promo-hero-quicklinks{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:4px;
}

.promo-hero-quicklinks a{
    padding:12px 22px;
    background:var(--gray900);
    color:#fff;
    border-radius:10px;
    font-weight:600;
    font-size:14px;
    white-space:nowrap;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease;
}

@media (hover:hover) and (pointer:fine){
    .promo-hero-quicklinks a:hover{
        background:var(--secondary);
        transform:translateY(-4px) scale(1.04);
        box-shadow:0 14px 28px rgba(17,24,39,.28);
    }

    .promo-hero-quicklinks a:active{
        transform:translateY(-1px) scale(1.01);
        box-shadow:0 6px 14px rgba(17,24,39,.22);
    }
}

.promo-hero-cta{
    margin-top:6px;
}

.promo-hero-slide-image{
    position:relative;
    display:block;
    overflow:hidden;
}

.promo-hero-slide-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
    transition:.5s;
}

@media (hover:hover) and (pointer:fine){
    .promo-hero-slide-image:hover img{
        transform:scale(1.04);
    }
}

.promo-hero-stage{
    position:relative;
}

.promo-hero-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:22px;
}

.promo-hero-controls[hidden]{
    display:none;
}

.promo-hero-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:50%;
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.1);
    font-size:16px;
    transition:.2s;
}

.promo-hero-arrow[hidden]{
    display:none;
}

@media (hover:hover) and (pointer:fine){
    .promo-hero-arrow:hover{
        background:var(--gray900);
        color:#fff;
    }
}

.promo-hero-counter{
    font-weight:700;
    color:var(--gray500);
    letter-spacing:.5px;
    min-width:60px;
    text-align:center;
}

@media(max-width:768px){

    .promo-hero-slide{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .promo-hero-slide-content{
        order:2;
        padding:16px 18px 20px;
        gap:8px;
    }

    .promo-hero-slide-content h2{
        font-size:22px;
    }

    .promo-hero-slide-image{
        order:1;
        min-height:280px;
    }

    .promo-hero-quicklinks{
        flex-wrap:nowrap;
        gap:6px;
        width:100%;
    }

    .promo-hero-quicklinks a{
        flex:1 1 0;
        padding:10px 6px;
        font-size:12.5px;
        text-align:center;
    }

}

.brands{
    background:#f8fafc;
}

.brands-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.brand-card{
    height:140px;
    background:white;
    border-radius:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    font-weight:800;
    letter-spacing:2px;
    transition:.35s;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.brand-card:active{
    background:var(--primary);
    color:white;
    transform:scale(.97);
}

@media (hover:hover) and (pointer:fine){
.brand-card:hover{
    transform:translateY(-8px);
    background:var(--primary);
    color:white;
}
}

/* =====================================
   TOAST / NOTIFICATION
===================================== */

.toast{
    position:fixed;
    right:20px;
    bottom:20px;
    background:var(--primary);
    color:#fff;
    padding:14px 22px;
    border-radius:10px;
    opacity:0;
    transform:translateY(20px);
    transition:.3s;
    z-index:9999;
}

.toast.show{
    opacity:1;
    transform:translateY(0);
}

/* помітне повідомлення зверху — під іконкою профілю
   в шапці, окремо від звичайного тоста знизу */
.top-notice{
    position:fixed;
    top:96px;
    right:20px;
    max-width:360px;
    background:var(--primary);
    color:#fff;
    padding:16px 20px;
    border-radius:14px;
    box-shadow:var(--shadow-lg);
    font-size:14px;
    font-weight:600;
    line-height:1.5;
    z-index:9998;
    opacity:0;
    transform:translateY(-14px);
    transition:.3s;
    pointer-events:none;
}

.top-notice.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.scroll-top{
    position:fixed;
    right:30px;
    bottom:30px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
    transition:.3s;
    z-index:999;
}

.scroll-top.show{
    opacity:1;
    pointer-events:auto;
}

/* коли відкрита мобільна шторка "Всі фільтри" — ховаємо кнопку
   "нагору", інакше вона накладається на футер шторки */
body:has(.mobile-sticky-cart.show) .scroll-top{
    bottom:calc(100px + env(safe-area-inset-bottom, 0px));
}

body.mobile-filters-open .scroll-top{
    opacity:0;
    pointer-events:none;
}

/* =====================================
   LOADER / SPINNER / EMPTY STATE
===================================== */

.loader{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:80px 0;
    color:var(--gray500);
    grid-column:1/-1;
}

/* FIX: без этого правила спиннер "крутится вечно" —
   собственный display:flex у .loader перебивает
   стандартный display:none у атрибута [hidden],
   поэтому нужно явно объявить приоритет для hidden. */
.loader[hidden]{
    display:none;
}

.spinner{
    width:44px;
    height:44px;
    border-radius:50%;
    border:4px solid var(--gray200);
    border-top-color:var(--secondary);
    animation:spin .8s linear infinite;
}

.empty-state{
    text-align:center;
    padding:80px 20px;
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    grid-column:1/-1;
}

.empty-state h2{
    font-size:52px;
    margin-bottom:10px;
}

.empty-state p{
    margin-bottom:24px;
    font-size:17px;
}

.empty-state .btn{
    margin:0 8px 8px;
}

/* =====================================
   BREADCRUMBS
   (хедер фиксированный — отступ обязателен)
===================================== */

.breadcrumbs{
    margin-top:82px;
    padding:14px 0;
    background:#f7f7f7;
    font-size:15px;
}

.breadcrumbs a{
    text-decoration:none;
    color:var(--gray500);
}

@media (hover:hover) and (pointer:fine){
.breadcrumbs a:hover{
    color:var(--secondary);
}
}

.breadcrumbs .crumb-sep{
    display:inline-block;
    margin:0 8px;
    color:var(--gray300);
    font-size:13px;
}

/* =====================================
   CATALOG PAGE
===================================== */

.catalog-page{
    padding-top:20px;
    padding-bottom:80px;
    min-height:100vh;
}

.catalog-header{
    margin-bottom:36px;
}

.catalog-header h1{
    font-size:40px;
}

.catalog-header p{
    margin-top:8px;
}

.catalog-layout{
    display:block;
}

/* -- бокове дерево категорій зліва від сітки (лише десктоп) -- */

/* на вузьких екранах сайдбар не показуємо взагалі — категорії
   доступні через дропдаун "Категорія" і мобільну шторку фільтрів */
.catalog-sidebar{
    display:none;
}

@media(min-width:1100px){

    .catalog-layout{
        display:grid;
        grid-template-columns:250px minmax(0,1fr);
        gap:34px;
        align-items:start;
    }

    .catalog-sidebar{
        display:block;
        position:sticky;
        top:170px; /* шапка + sticky-панель фільтрів */
        max-height:calc(100vh - 190px);
        overflow-y:auto;
        padding-right:6px;
        scrollbar-width:thin;
    }

    .catalog-sidebar[hidden]{
        display:none;
    }

}

.sidebar-tree{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sidebar-all,
.sidebar-category{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:9px 12px;
    border-radius:10px;
    font-size:14.5px;
    color:var(--gray700);
    text-align:left;
    transition:background .15s ease, color .15s ease;
}

.sidebar-all{
    font-weight:700;
    margin-bottom:6px;
}

.sidebar-all:hover,
.sidebar-category:hover{
    background:var(--gray100);
}

.sidebar-all.active,
.sidebar-category.active{
    background:#eff6ff;
    color:var(--secondary);
    font-weight:600;
}

.sidebar-group{
    padding-top:12px;
}

/* заголовок групи тепер кнопка «згорнути/розгорнути» */
.sidebar-group-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:4px 12px 7px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:var(--gray500);
    text-align:left;
    cursor:pointer;
    transition:color .15s ease;
}

.sidebar-group-title:hover{
    color:var(--gray700);
}

/* Значок «+ / −» з двох ліній: горизонтальна є завжди, вертикальна
   з'являється лише коли група ЗГОРНУТА (тоді разом виходить «+»).
   Колір — синій, як акцент інтерфейсу.

   Раніше тут була переставлена логіка: у згорнутому стані
   вертикальна лінія отримувала rotate(0deg), тобто лягала рівно
   поверх горизонтальної — і замість «+» усюди був «−». */
.sidebar-group-icon{
    position:relative;
    flex-shrink:0;
    width:11px;
    height:11px;
    color:var(--secondary);
}

.sidebar-group-icon::before,
.sidebar-group-icon::after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:11px;
    height:2px;
    background:currentColor;
    border-radius:1px;
    transform:translateY(-50%);
    transition:transform .18s ease, opacity .18s ease;
}

/* розгорнуто: вертикальна лінія «складається» в горизонтальну
   і зникає → лишається «−» */
.sidebar-group-icon::after{
    transform:translateY(-50%) rotate(0deg);
    opacity:0;
}

/* згорнуто: вертикальна лінія повертається на 90° і стає видимою → «+» */
.sidebar-group.collapsed .sidebar-group-icon::after{
    transform:translateY(-50%) rotate(90deg);
    opacity:1;
}

.sidebar-group.collapsed .sidebar-group-body{
    display:none;
}

.sidebar-count{
    flex-shrink:0;
    min-width:26px;
    padding:1px 8px;
    border-radius:20px;
    background:var(--gray100);
    font-size:12px;
    font-weight:600;
    color:var(--gray500);
    text-align:center;
}

.sidebar-all.active .sidebar-count,
.sidebar-category.active .sidebar-count{
    background:#dbeafe;
    color:var(--secondary);
}

/* FIX: .cart-layout{display:grid} перебивает
   стандартный display:none у [hidden] — без этого
   правила товары в корзине не исчезали и "съезжали"
   под блок "корзина пуста" при удалении/изменении
   количества. */
.cart-layout[hidden]{
    display:none;
}

/* -- горизонтальна панель фільтрів -- */

.catalog-filters-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    background:#fff;
    padding:20px 24px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    margin-bottom:28px;
    /* та сама sticky-поведінка, що й у мобільної .mobile-filter-bar:
       прилипає під шапкою і ховається при скролі вниз (керується
       класом is-hidden з initStickyFilterAutoHide у catalog.js) */
    position:sticky;
    top:82px;
    z-index:500;
    transition:transform .3s ease;
}

.catalog-filters-bar.is-hidden{
    transform:translateY(-140%);
}

.filter-group{
    display:flex;
    align-items:center;
}

.filter-search{
    flex:0 1 200px;
    min-width:160px;
    max-width:260px;
}

.catalog-filters-bar input,
.catalog-filters-bar select{
    height:48px;
    width:100%;
    font-size:14px;
    border:1.5px solid var(--gray200);
    transition:.25s;
}

.catalog-filters-bar select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:40px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    cursor:pointer;
    min-width:160px;
}

@media (hover:hover) and (pointer:fine){
.catalog-filters-bar input:hover,
.catalog-filters-bar select:hover{
    border-color:var(--gray300);
}
}

.catalog-filters-bar input:focus,
.catalog-filters-bar select:focus{
    outline:none;
    border-color:var(--secondary);
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.filter-reset{
    height:48px;
    padding:0 22px;
    white-space:nowrap;
    box-shadow:none;
}

.gender-filter{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.gender-pill{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:10px 14px;
    border-radius:12px;
    border:1.5px solid var(--gray200);
    font-size:13px;
    font-weight:600;
    color:var(--gray700);
    background:#fff;
    text-align:center;
    white-space:nowrap;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.gender-pill:hover{
    border-color:var(--secondary);
    color:var(--secondary);
    background:rgba(37,99,235,.05);
}
}

.gender-pill.active{
    background:rgba(37,99,235,.08);
    border-color:var(--secondary);
    color:var(--secondary);
}

.gender-pill.active::before{
    content:"✓";
    font-size:11px;
    font-weight:800;
}

/* -- кастомні дропдауни "Бренд" / "Ціна" (в стилі сортування) -- */

.filter-dropdown{
    position:relative;
    flex:0 1 135px;
    min-width:125px;
    max-width:220px;
}

.filter-toggle{
    width:100%;
    height:48px;
    padding:0 16px;
    border-radius:12px;
    border:1.5px solid var(--gray200);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:14px;
    font-weight:600;
    color:var(--gray700);
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.filter-toggle:hover{
    border-color:var(--gray300);
}
}

.filter-dropdown.open .filter-toggle{
    border-color:var(--secondary);
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.filter-toggle span:first-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.filter-arrow{
    font-size:11px;
    color:var(--gray500);
    transition:transform .2s;
    flex-shrink:0;
}

.filter-dropdown.open .filter-arrow{
    transform:rotate(180deg);
}

.filter-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:#fff;
    border-radius:14px;
    box-shadow:var(--shadow-lg);
    padding:8px;
    min-width:220px;
    max-height:320px;
    overflow-y:auto;
    z-index:200;
    transition:opacity .2s ease, transform .2s ease;
}

/* приховано під час скролу вниз (не "по-справжньому закрито" —
   див. setupDropdownScrollVisibility у catalog.js) */
.filter-menu.scroll-hidden{
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
}

/* -- фільтр ціни: повзунок діапазону "від / до" -- */

/* -- фільтр ціни: повзунок діапазону "від / до" -- */

/* .filter-menu за замовчуванням розтягнутий на ширину самої
   кнопки-тригера (left:0;right:0) — цього достатньо для списку
   чекбоксів, але замало для повзунка з двома полями введення та
   підписом "грн". Ціна до того ж останній фільтр у рядку, тож
   рости вправо нікуди — впирається у край екрана й обрізається
   (це і показано на скріні). Розкриваємо ширше й від правого
   краю кнопки, щоб меню росло вліво, у вільний простір рядка
   фільтрів, а не за межі viewport. */
#priceDropdown .filter-menu{
    left:auto;
    right:0;
    width:336px;
    min-width:336px;
}

.price-range{
    padding:14px 12px 8px;
}

.price-range-slider{
    position:relative;
    height:22px;
    /* більший відступ знизу — щоб поля вводу не тулились до смужки */
    margin:6px 10px 22px;
}

.price-range-track,
.price-range-fill{
    position:absolute;
    top:50%;
    height:3px;
    transform:translateY(-50%);
    border-radius:2px;
    pointer-events:none;
}

.price-range-track{
    left:0;
    right:0;
    background:var(--gray200);
}

.price-range-fill{
    background:var(--gray700);
}

/* Два range-інпути лежать один поверх одного: сама доріжка прозора,
   клікабельні лише ручки (pointer-events нижче).

   ВАЖЛИВО про подвійний селектор: загальне правило
   .catalog-filters-bar input має специфічність (0,1,1) — вищу, ніж
   .price-range-input (0,1,0), — і нав'язувало повзунку height:48px,
   width:100% та рамку 1.5px. Саме звідси бралась овальна обводка
   навколо чорної смужки, а 48px висоти замість 22px розпирали
   контейнер і накладались на блок вище. Дублюємо селектор з
   .catalog-filters-bar, щоб перебити це правило. */
.catalog-filters-bar .price-range-input,
.mobile-filters-sub-content .price-range-input,
.price-range-input{
    position:absolute;
    top:0;
    left:-10px;
    width:calc(100% + 20px);
    height:22px;
    margin:0;
    padding:0;
    background:none;
    border:none;
    border-radius:0;
    appearance:none;
    -webkit-appearance:none;
    pointer-events:none;
}

/* те саме і для :focus — інакше .catalog-filters-bar input:focus
   малює блакитне світіння box-shadow навколо всієї смужки */
.catalog-filters-bar .price-range-input:focus,
.mobile-filters-sub-content .price-range-input:focus,
.price-range-input:focus{
    outline:none;
    border:none;
    box-shadow:none;
}

.price-range-min{ z-index:3; }
.price-range-max{ z-index:4; }

.price-range-input::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    pointer-events:auto;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--gray700);
    border:none;
    cursor:grab;
    transition:transform .15s ease, box-shadow .15s ease;
}

.price-range-input::-webkit-slider-thumb:active{
    cursor:grabbing;
    transform:scale(1.1);
    box-shadow:0 0 0 6px rgba(37,99,235,.15);
}

.price-range-input:focus-visible::-webkit-slider-thumb{
    box-shadow:0 0 0 4px rgba(37,99,235,.25);
}

.price-range-input::-moz-range-thumb{
    pointer-events:auto;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--gray700);
    border:none;
    cursor:grab;
}

.price-range-input::-moz-range-track{
    background:none;
    border:none;
}

.price-range-fields{
    display:flex;
    align-items:center;
    gap:10px;
}

.price-range-field{
    flex:1 1 0;
    min-width:0;
    display:flex;
    align-items:stretch;
    border:1px solid var(--gray200);
    border-radius:8px;
    overflow:hidden;
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.price-range-field:focus-within{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

/* важливо: перебиваємо загальне правило .catalog-filters-bar input,
   яке робить усі інпути на всю ширину і 48px заввишки */
.catalog-filters-bar .price-range-number,
.price-range-number{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    height:36px;
    border:none;
    border-radius:0;
    padding:0 8px;
    font-size:14px;
    font-weight:600;
    color:var(--gray700);
    text-align:center;
    background:none;
}

/* .catalog-filters-bar input:focus має специфічність (0,2,1) і
   перебило б голий .price-range-number:focus (0,2,0), домалювавши
   друге блакитне світіння поверх того, що вже дає
   .price-range-field:focus-within — тому дублюємо селектор */
.catalog-filters-bar .price-range-number:focus,
.price-range-number:focus{
    outline:none;
    border:none;
    box-shadow:none;
}

.price-range-suffix{
    display:flex;
    align-items:center;
    padding:0 9px;
    font-size:13px;
    color:var(--gray500);
    background:var(--gray100,#f3f4f6);
    border-left:1px solid var(--gray200);
    white-space:nowrap;
}

.price-range-dash{
    color:var(--gray500);
    flex-shrink:0;
}

/* у мобільній шторці "Всі фільтри" меню ціни розтягується
   на всю ширину — даємо повзунку більше повітря */
.mobile-filters-sub-content .price-range{
    padding:18px 4px 4px;
}

/* -- «звужувальні» фільтри: недоступні варіанти -- */

/* Варіанти, яких немає серед знайдених товарів, ховаємо повністю —
   так само, як у великих магазинів. Уже обраний варіант ніколи не
   отримує цей клас (див. markAvailability у catalog.js), інакше
   його неможливо було б зняти. */
.filter-option.unavailable,
.filter-size-chip.unavailable,
.filter-size-group.unavailable,
.sidebar-category.unavailable,
.sidebar-group.unavailable{
    display:none;
}

/* Стать — фіксований ряд кнопок, тому не ховаємо, а гасимо:
   зникнення однієї кнопки перебудовувало б увесь рядок */
.gender-pill.disabled{
    opacity:.35;
    cursor:not-allowed;
    pointer-events:none;
}

.filter-option{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    padding:10px 14px;
    border-radius:8px;
    background:transparent;
    font-size:14px;
    color:var(--gray700);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.filter-option[hidden]{
    display:none;
}

.filter-option-group-title{
    padding:12px 14px 4px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--gray300);
}

.filter-option-group-title:first-child{
    padding-top:4px;
}

@media (hover:hover) and (pointer:fine){
.filter-option:hover{
    background:var(--gray100);
    color:var(--gray900);
}
}

.filter-option.active{
    background:rgba(37,99,235,.08);
    color:var(--secondary);
    font-weight:700;
}

.filter-checkbox{
    flex-shrink:0;
    width:17px;
    height:17px;
    border-radius:5px;
    border:1.5px solid var(--gray300);
    background:#fff;
    position:relative;
    transition:.2s;
}

.filter-option.active .filter-checkbox{
    background:var(--secondary);
    border-color:var(--secondary);
}

.filter-option.active .filter-checkbox::after{
    content:"";
    position:absolute;
    left:5px;
    top:1px;
    width:4px;
    height:8px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.filter-option-clear{
    width:100%;
    display:block;
    text-align:left;
    padding:9px 14px;
    margin-bottom:4px;
    border-radius:8px;
    background:transparent;
    font-size:13px;
    font-weight:600;
    color:var(--gray500);
    border-bottom:1px solid var(--gray100);
}

@media (hover:hover) and (pointer:fine){
.filter-option-clear:hover{
    background:var(--gray100);
    color:var(--danger);
}
}

/* -- дропдаун "Розмір": групи (Сумки/Рюкзаки) з чіпами -- */

.filter-menu.filter-menu-sizes{
    min-width:280px;
    max-height:none;
    overflow:visible;
}

.filter-size-group + .filter-size-group{
    margin-top:16px;
}

.filter-size-group-title{
    padding:4px 6px 8px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--gray500);
}

.filter-size-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0 6px 6px;
}

.filter-size-chip{
    min-width:42px;
    padding:8px 12px;
    border-radius:10px;
    border:1.5px solid var(--gray200);
    background:#fff;
    font-size:13.5px;
    font-weight:600;
    color:var(--gray700);
    text-align:center;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.filter-size-chip:hover{
    border-color:var(--gray300);
}
}

.filter-size-chip.active{
    background:var(--secondary);
    border-color:var(--secondary);
    color:#fff;
}

/* -- дропдаун "Колір": свотч біля назви -- */

.filter-menu.filter-menu-colors{
    max-height:320px;
    overflow-y:auto;
}

.filter-color-swatch{
    flex-shrink:0;
    width:16px;
    height:16px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.12);
}

/* -- пошук всередині дропдауна "Бренд" -- */

.filter-menu-search{
    padding-top:6px;
}

/* для дропдауна "Бренд" скролиться має лише список
   опцій нижче, а не весь блок цілком (інакше з'являються
   два скролбари одночасно) */
.filter-menu.filter-menu-search{
    max-height:none;
    overflow:visible;
}

.filter-menu-search-box{
    position:relative;
    padding:2px 2px 8px;
    margin-bottom:6px;
    border-bottom:1px solid var(--gray100);
}

.filter-menu-search-icon{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:13px;
    opacity:.5;
    pointer-events:none;
}

.filter-menu-search-box input{
    width:100%;
    height:40px;
    padding:0 12px 0 34px;
    border:1.5px solid var(--gray200);
    border-radius:10px;
    /* мінімум 16px, інакше Safari на iOS автоматично зумить
       сторінку при фокусі на полі пошуку категорії/бренду */
    font-size:16px;
    background:var(--gray50);
}

.filter-menu-search-box input:focus{
    outline:none;
    border-color:var(--secondary);
    background:#fff;
}

.filter-menu-options{
    max-height:220px;
    overflow-y:auto;
}

.filter-menu-empty{
    padding:16px 14px;
    text-align:center;
    color:var(--gray500);
    font-size:13.5px;
}

/* -- панель активних фільтрів -- */

.active-filters-bar[hidden]{
    display:none;
}

.active-filters-bar{
    margin:0 0 28px;
    padding:14px 20px;
    background:rgba(37,99,235,.05);
    border:1px dashed rgba(37,99,235,.25);
    border-radius:16px;
}

.active-filters-label{
    font-size:13px;
    font-weight:600;
    color:var(--gray500);
    white-space:nowrap;
    display:flex;
    align-items:center;
}

.active-filters-list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
}

.active-filters-chips{
    display:contents;
}

.filter-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px 7px 14px;
    border-radius:50px;
    background:#fff;
    border:1.5px solid var(--gray200);
    font-size:13px;
    font-weight:600;
    color:var(--gray700);
    transition:.2s;
    white-space:nowrap;
}

.filter-chip.filter-chip-hidden{
    display:none;
}

.filter-more-chip{
    color:var(--secondary);
    border-color:rgba(37,99,235,.3);
    background:rgba(37,99,235,.06);
    padding:7px 16px;
}

@media (hover:hover) and (pointer:fine){
.filter-more-chip:hover{
    background:rgba(37,99,235,.12);
    border-color:var(--secondary);
    color:var(--secondary);
}
}

@media (hover:hover) and (pointer:fine){
.filter-chip:hover{
    border-color:var(--danger);
    color:var(--danger);
}
}

.filter-chip-x{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--gray100);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    color:var(--gray500);
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.filter-chip:hover .filter-chip-x{
    background:var(--danger);
    color:#fff;
}
}

.filter-reset-chip{
    padding:8px 16px;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    color:var(--secondary);
    white-space:nowrap;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.filter-reset-chip:hover{
    background:rgba(37,99,235,.1);
}
}

.catalog-top{
    background:#fff;
    padding:16px 22px;
    border-radius:14px;
    box-shadow:var(--shadow-sm);
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    flex-wrap:wrap;
    gap:12px;
}

.catalog-top p{
    color:var(--gray700);
    font-weight:600;
}

.catalog-top #productsCount{
    color:var(--secondary);
}

.catalog-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.catalog-actions > div{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--gray500);
    font-size:14px;
}

#gridViewBtn,
#listViewBtn{
    width:36px;
    height:36px;
    border-radius:10px;
    background:var(--gray100);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
#gridViewBtn:hover,
#listViewBtn:hover{
    background:var(--secondary);
    color:#fff;
}
}

/* -- кастомний дропдаун сортування -- */

.sort-dropdown{
    position:relative;
}

.sort-toggle{
    width:auto;
    height:auto;
    padding:10px 16px;
    border-radius:10px;
    background:var(--gray100);
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color:var(--gray700);
    white-space:nowrap;
}

@media (hover:hover) and (pointer:fine){
.sort-toggle:hover{
    background:var(--gray200);
    color:var(--gray900);
}
}

.sort-toggle #sortLabel{
    color:var(--secondary);
    font-weight:700;
}

.sort-arrow{
    font-size:11px;
    transition:transform .2s;
}

.sort-dropdown.open .sort-arrow{
    transform:rotate(180deg);
}

.sort-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:#fff;
    border-radius:14px;
    box-shadow:var(--shadow-lg);
    padding:8px;
    min-width:220px;
    z-index:600;
    transition:opacity .2s ease, transform .2s ease;
}

.sort-menu.scroll-hidden{
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
}

.sort-menu[hidden]{
    display:none !important;
}

.sort-option{
    width:100%;
    height:auto;
    display:block;
    text-align:left;
    padding:10px 14px;
    border-radius:8px;
    background:transparent;
    font-size:14px;
    color:var(--gray700);
    white-space:nowrap;
}

@media (hover:hover) and (pointer:fine){
.sort-option:hover{
    background:var(--gray100);
    color:var(--gray900);
}
}

.sort-option.active{
    background:rgba(37,99,235,.08);
    color:var(--secondary);
    font-weight:700;
}

#gridViewBtn.active,
#listViewBtn.active{
    background:var(--secondary);
    color:#fff;
}

/* -- каталог: рівно по 3 картки в рядок у режимі "сітка" -- */

#catalogGrid.products-grid:not(.list-view){
    grid-template-columns:repeat(3, 1fr);
}

/* -- режим "список" для сетки товаров -- */

.products-grid.list-view{
    grid-template-columns:1fr;
}

.products-grid.list-view .product-card{
    flex-direction:row;
}

.products-grid.list-view .product-image{
    width:220px;
    height:auto;
    flex-shrink:0;
}

.products-grid.list-view .product-info{
    flex:1;
}

.products-grid.list-view .product-title{
    min-height:0;
}

.product-desc{
    display:none;
}

/* -- десктопний режим "список": розмір/колір переносимо під ціну,
   а звільнене праворуч місце віддаємо під опис товару.
   Мобільний вигляд (нижче, max-width:768) лишається як є —
   не займаємо його цим блоком. -- */
@media(min-width:769px){

    .products-grid.list-view .product-info{
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-areas:
            "cat cat"
            "title title"
            "meta desc"
            "preorder preorder"
            "buy buy";
        column-gap:40px;
    }

    .products-grid.list-view .preorder-row{
        grid-area:preorder;
    }

    .products-grid.list-view .product-category{
        grid-area:cat;
    }

    .products-grid.list-view .product-title{
        grid-area:title;
    }

    .products-grid.list-view .product-meta-row{
        grid-area:meta;
        flex-direction:column;
        /* stretch, а НЕ flex-start.
           З flex-start діти сідали по ширині власного вмісту й
           ніколи не ставали вужчими за нього — ширина грід-колонки
           до них не доходила, переповнення не виникало, а отже
           .product-sizes не мав що прокручувати і стрілки не
           з'являлись узагалі (саме це було на другому скріні). */
        align-items:stretch;
        justify-content:flex-start;
        gap:16px;
        /* дає флекс-елементу право стиснутись до ширини своєї
           грід-колонки: без цього рядок кольору/розміру міг
           розпирати "meta" ширше за виділені їй 1fr і наїжджати
           на сусідню колонку з описом (див. options нижче) */
        min-width:0;
    }

    .products-grid.list-view .product-meta-row .product-options{
        order:0;
        /* Колір і розмір — ОКРЕМИМИ рядками, один під одним, а не
           поруч в одному рядку. У списку є достатньо ширини (уся
           колонка "meta"), тож кожному варто віддати повний рядок
           під себе, а не ділити один рядок навпіл — саме тому
           попередній варіант (side-by-side, як у панелі наведення)
           не витримував багато кольорів+розмірів одночасно: обидва
           тіснились в один рядок і впирались одне в одного. */
        flex-direction:column;
        /* так само stretch: інакше обмеження ширини не доходить
           до .product-colors-wrap / .product-sizes-wrap усередині */
        align-items:stretch;
        gap:10px;
        /* дає флекс-елементу право стиснутись до ширини колонки —
           інакше він розпирає "meta" ширше за виділений 1fr */
        width:100%;
        min-width:0;
    }

    /* Кожен рядок тепер займає весь свій рядок (стек, а не пара
       поруч), тож кольору більше не потрібно ділити ширину з
       розміром — і сам він отримує повноцінну прокрутку, коли
       не влазить, замість того щоб просто необмежено розтягуватись
       (як було раніше і не давало розміру взагалі жодного місця
       при 15 кольорах). */
    /* обгортка займає весь свій рядок — стрілки стають рівно по
       краях видимої області (див. пояснення в панелі наведення вище) */
    .products-grid.list-view .product-colors-wrap{
        width:100%;
        min-width:0;
    }

    .products-grid.list-view .product-sizes-wrap{
        /* тепер сам собі окремий рядок на всю ширину "meta", а не
           залишок місця біля кольору — прокрутка розміру (уже існує
           в .product-sizes нижче по файлу) відтепер працює в межах
           повної ширини колонки, а не вузького шматка навпіл */
        width:100%;
        min-width:0;
    }

    .products-grid.list-view .product-desc{
        grid-area:desc;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:5;
        overflow:hidden;
        color:var(--gray700);
        font-size:14px;
        line-height:1.65;
        padding-top:2px;
    }

    .products-grid.list-view .buy-btn{
        grid-area:buy;
        margin-top:20px;
    }

}

/* =====================================
   PRODUCT PAGE
===================================== */

.product-wrapper{
    display:grid;
    grid-template-columns:minmax(320px,560px) 1fr;
    gap:60px;
    padding:30px 0 60px;
    align-items:start;
}

/* -- галерея: вертикальные миниатюры + большое фото -- */

.product-gallery{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:20px;
    align-items:start;
    width:100%;
    position:sticky;
    top:110px;
}

.thumbs-vertical{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.thumb{
    width:100%;
    aspect-ratio:1/1;
    cursor:pointer;
    border-radius:14px;
    border:2px solid transparent;
    transition:.25s;
    overflow:hidden;
    position:relative;
}

.thumb img,
.thumb video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
    display:block;
    pointer-events:none;
}

.thumb-play{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(17,24,39,.35);
    color:#fff;
    font-size:16px;
}

@media (hover:hover) and (pointer:fine){

    .thumb:hover{
        transform:translateY(-3px);
        border-color:var(--primary);
    }

}

.thumb.active{
    border-color:var(--secondary);
}

.main-photo{
    position:relative;
    width:100%;
    min-width:0;
    background:#fff;
    padding:25px;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    overflow:hidden;
}

.product-badge{
    position:absolute;
    top:20px;
    left:20px;
    background:var(--primary);
    color:#fff;
    padding:8px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    z-index:2;
}

.zoom-container{
    overflow:hidden;
    border-radius:16px;
}

.gallery-track{
    display:flex;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* iOS вважає будь-який overflow-x:auto елемент окремою
       "зоною жестів" і не передає з нього вертикальний тач
       сторінці, незалежно від touch-action:pan-x. Тому
       горизонтальне гортання тепер керується вручну в JS
       (setupGallery у product.js: touchmove з preventDefault
       лише коли жест визначено як горизонтальний), а тут
       дозволяємо саме pan-y — вертикаль обробляється браузером
       як завжди, і сторінка нормально скролиться, коли палець
       на фото */
    touch-action:pan-y pinch-zoom;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
}

.gallery-track::-webkit-scrollbar{
    display:none;
}

.gallery-slide{
    flex:0 0 100%;
    width:100%;
    display:block;
    scroll-snap-align:start;
    transition:transform .35s ease;
    cursor:zoom-in;
}

.gallery-slide-video,
.gallery-slide-embed{
    cursor:default;
    background:#000;
}

.gallery-slide-embed{
    aspect-ratio:16/9;
}

.gallery-slide-embed iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

.gallery-slide,
.photo-slide,
.category img,
.product-image img{
    -webkit-user-drag:none;
    user-drag:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
}

/* прибрано авто-зум по ховеру (transform:scale на весь кадр) —
   тепер замість нього справжній зум з переглядом курсором
   живе у повноекранному лайтбоксі (lightbox.js), а тут просто
   курсор-підказка "натисніть, щоб наблизити" (cursor:zoom-in
   вище на .gallery-slide) */

.gallery-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:16px;
    display:flex;
    justify-content:center;
    gap:8px;
    z-index:3;
}

.gallery-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(17,24,39,.25);
    transition:.2s;
}

.gallery-dot.active{
    width:22px;
    border-radius:4px;
    background:var(--gray900);
}

@media(max-width:768px){

    /* на iOS/Android браузер сам збільшує масштаб при фокусі на
       полі вводу, якщо шрифт менший за 16px — тому на мобільних
       піднімаємо розмір саме для полів форм (авторизація,
       реєстрація, чекаут тощо), щоб автозум не спрацьовував */
    input,
    textarea,
    select{
        font-size:16px;
    }

    .product-gallery{
        grid-template-columns:1fr;
    }

    .thumbs-vertical{
        flex-direction:row;
        order:2;
        overflow-x:auto;
    }

    .thumb{
        width:64px;
        height:64px;
        flex-shrink:0;
    }

    .main-photo{
        padding:12px;
        border-radius:16px;
    }

}

/* -- инфо-блок товара -- */

.product-wrapper .product-info{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.product-wrapper .product-info h1{
    font-size:40px;
    line-height:1.2;
}

.brand{
    display:inline-block;
    align-self:flex-start;
    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gray500);
    font-weight:600;
    text-decoration:none;
}

@media (hover:hover) and (pointer:fine){
.brand:hover{
    color:var(--secondary);
    text-decoration:underline;
}
}

.product-meta-line{
    margin-top:-12px;
    font-size:13.5px;
    color:var(--gray500);
}

.price-box{
    display:flex;
    align-items:baseline;
    gap:18px;
}

.price-box .price{
    font-size:38px;
    font-weight:800;
    color:var(--gray900);
}

.price-box .old-price{
    font-size:20px;
    text-decoration:line-through;
    color:var(--gray300);
}

.product-short{
    font-size:17px;
    line-height:1.8;
    color:var(--gray500);
}

/* -- выбор цвета / размера -- */

.option-group label{
    display:block;
    margin-bottom:12px;
    font-weight:600;
}

.size-row-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.size-row-head label{
    margin-bottom:12px;
}

.size-guide-link{
    color:var(--secondary);
    font-weight:600;
    font-size:14px;
    text-decoration:underline;
    text-underline-offset:2px;
    margin-bottom:12px;
}

@media (hover:hover) and (pointer:fine){
    .size-guide-link:hover{
        color:#1d4ed8;
    }
}

.size-error{
    margin-top:10px;
    color:#dc2626;
    font-size:13.5px;
    font-weight:600;
}

@keyframes sizeShake{
    10%, 90%{ transform:translateX(-1px); }
    20%, 80%{ transform:translateX(2px); }
    30%, 50%, 70%{ transform:translateX(-4px); }
    40%, 60%{ transform:translateX(4px); }
}

.size-shake{
    animation:sizeShake .5s;
}

.size-shake .size,
.size-shake .mini-size{
    border-color:#dc2626 !important;
}

/* -- модалка "Таблиця розмірів" -- */

.size-guide-card{
    max-width:520px;
    border-top-color:var(--secondary);
}

.size-guide-table{
    width:100%;
    border-collapse:collapse;
    margin-top:18px;
}

.size-guide-table th,
.size-guide-table td{
    padding:12px 10px;
    text-align:left;
    border-bottom:1px solid var(--gray100);
    font-size:14.5px;
}

.size-guide-table th{
    color:var(--gray500);
    font-weight:600;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.size-guide-table td:first-child{
    font-weight:700;
}

.color-options{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.color{
    width:56px;
    height:56px;
    border-radius:12px;
    border:2px solid var(--gray200);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:var(--gray100);
    cursor:pointer;
    padding:0;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.color:hover{
    border-color:var(--gray300);
    transform:translateY(-2px);
}
}

.color.active{
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(17,24,39,.08);
}

.sizes{
    display:flex;
    /* без переносу 20 розмірів (36–46 + XS–4XL) розтягували рядок
       за межі контейнера і ламали верстку сторінки товару */
    flex-wrap:wrap;
    gap:12px;
}

.sizes .size{
    flex-shrink:0;
}

.size{
    padding:12px 20px;
    border:1px solid var(--gray200);
    background:#fff;
    border-radius:12px;
    cursor:pointer;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.size:hover{
    border-color:var(--primary);
}
}

.size.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

/* -- кнопки "Купить" + "В избранное" -- */

.product-actions{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.mobile-sticky-cart{
    display:none;
}

@media(max-width:768px){

    .mobile-sticky-cart{
        display:block;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:900;
        background:#fff;
        /* мінімум 20px відступу знизу навіть якщо
           env(safe-area-inset-bottom) дорівнює 0 — інакше
           кнопка опиняється в "гарячій зоні" й перший тап
           в Safari на iOS лише розгортає нижню панель
           браузера замість натискання на кнопку */
        padding:12px 16px max(20px, calc(12px + env(safe-area-inset-bottom, 0px)));
        box-shadow:0 -10px 30px rgba(0,0,0,.1);
        transform:translateY(110%);
        transition:transform .3s ease;
    }

    .mobile-sticky-cart.show{
        transform:translateY(0);
    }

    .mobile-sticky-cart .buy-btn{
        width:100%;
        height:52px;
        font-size:16px;
    }

}

.product-actions .btn{
    flex:1;
    min-width:200px;
    height:60px;
    font-size:18px;
    gap:8px;
}

.favorite-btn{
    position:relative;
    width:60px;
    height:60px;
    flex-shrink:0;
    border-radius:16px;
    border:1px solid var(--gray200);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s;
}

.favorite-btn-icon{
    width:24px;
    height:24px;
    fill:none;
    stroke:var(--gray900);
    stroke-width:2;
    transition:.25s;
}

@media (hover:hover) and (pointer:fine){

    .favorite-btn:hover{
        background:var(--primary);
        border-color:var(--primary);
    }

    .favorite-btn:hover .favorite-btn-icon{
        fill:#fff;
        stroke:#fff;
    }

}

.favorite-btn.active .favorite-btn-icon{
    fill:var(--danger);
    stroke:var(--danger);
}

@media (hover:hover) and (pointer:fine){
.favorite-btn.active:hover .favorite-btn-icon{
    fill:var(--danger);
    stroke:var(--danger);
}
}

/* -- маленький бейдж-індикатор у кутку кнопки "в обране" —
   з'являється, тільки коли товар вже додано (клас .active) —
   лишається червоним завжди, незалежно від наведення на кнопку -- */

.favorite-indicator{
    position:absolute;
    top:-8px;
    right:-8px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--gray200);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(.5);
    transition:.25s;
    pointer-events:none;
}

.favorite-indicator svg{
    width:12px;
    height:12px;
    fill:var(--danger);
    stroke:var(--danger);
    stroke-width:2;
}

.favorite-btn.active .favorite-indicator{
    opacity:1;
    transform:scale(1);
    border-color:var(--danger);
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* -- доставка / оплата / возврат -- */

.delivery-box{
    padding:20px;
    background:var(--gray50);
    border-radius:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:15px;
}

.preorder-box{
    padding:20px;
    background:rgba(245,158,11,.08);
    border:1px solid rgba(245,158,11,.3);
    border-radius:18px;
}

.preorder-box-title{
    font-weight:700;
    color:#b45309;
    margin-bottom:8px;
}

.preorder-box p{
    font-size:14px;
    line-height:1.6;
    color:var(--gray700);
    margin:0;
}

/* -- характеристики -- */

.specifications{
    margin-top:10px;
    background:#fff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.specifications h3{
    margin-bottom:20px;
}

.spec-row{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px;
    padding:7px 0;
    font-size:14.5px;
    line-height:1.55;
}

.spec-row span{
    color:var(--gray500);
    flex-shrink:0;
}

.spec-row span::after{
    content:":";
}

.spec-row strong{
    color:var(--gray900);
    font-weight:600;
}

.spec-block + .spec-block{
    margin-top:22px;
    padding-top:22px;
    border-top:1px solid var(--gray100);
}

.spec-block h3{
    font-size:16px;
    text-align:left;
    margin-bottom:12px;
}

.spec-block-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    text-align:left;
    cursor:default;
    -webkit-tap-highlight-color:transparent;
}

.spec-block-header h3{
    margin-bottom:0;
}

.accordion-chevron{
    width:18px;
    height:18px;
    flex-shrink:0;
    fill:none;
    stroke:var(--gray500);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    display:none;
    transition:transform .25s ease;
}

.accordion-item.open .accordion-chevron{
    transform:rotate(180deg);
}

.spec-block-content{
    overflow:hidden;
}

/* -- на мобільних інформація про товар збирається у
   розкривний список (як на md-fashion.ua): заголовки
   клікабельні, контент згорнутий, поки не розкрити -- */
@media(max-width:768px){

    .spec-block-header{
        cursor:pointer;
        padding:14px 0;
    }

    .spec-block h3{
        margin-bottom:0;
    }

    .accordion-chevron{
        display:block;
    }

    .spec-block + .spec-block{
        margin-top:0;
        padding-top:0;
    }

    .spec-block:not(:last-child){
        border-bottom:1px solid var(--gray100);
    }

    .spec-block-content{
        display:grid;
        grid-template-rows:0fr;
        transition:grid-template-rows .3s ease;
    }

    .spec-block-inner{
        overflow:hidden;
        min-height:0;
        padding-bottom:0;
        transition:padding-bottom .3s ease;
    }

    .accordion-item.open .spec-block-content{
        grid-template-rows:1fr;
    }

    .accordion-item.open .spec-block-inner{
        padding-bottom:18px;
    }

}

.spec-plain{
    padding:6px 0 14px;
    color:var(--gray700);
    font-size:14.5px;
    line-height:1.6;
}

/* -- компактні банери брендів (displayType: banner_compact) --
   менший банер: фото + короткий текст і кнопка, без товарів,
   за зразком тизера G-STAR на md-fashion.ua -- */

.brand-teaser{
    padding:30px 0;
}

.brand-teaser:nth-child(even){
    background:#fafafa;
}

.brand-teaser-banner{
    display:grid;
    grid-template-columns:330px 1fr;
    align-items:stretch;
}

.brand-teaser-image{
    aspect-ratio:4/5;
}

.brand-teaser-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
    display:block;
}

.brand-teaser-content{
    background:var(--gray50);
    padding:0 44px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:16px;
}

.brand-teaser-text{
    color:var(--accent);
    font-weight:600;
    font-size:15px;
    line-height:1.5;
    max-width:220px;
}

.brand-teaser-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--primary);
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    font-size:13.5px;
    font-weight:600;
    transition:.2s;
}

.brand-teaser-btn:hover{
    background:#1f2937;
    transform:translateY(-2px);
}

.brand-teaser-arrow{
    transition:transform .2s;
}

.brand-teaser-btn:hover .brand-teaser-arrow{
    transform:translateX(3px);
}

@media(max-width:700px){

    .brand-teaser-banner{
        grid-template-columns:1fr;
    }

    .brand-teaser-image{
        max-height:none;
        aspect-ratio:4/3;
    }

    .brand-teaser-content{
        padding:28px 24px;
    }

    .brand-teaser-text{
        max-width:none;
    }

}

/* -- повноширинні банери акцій (featured) на головній --
   фото + текст в один ряд, а під ним товари цієї акції,
   за зразком банерів брендів на md-fashion.ua -- */

/* прибираємо базовий відступ section{padding:45px 0} саме тут —
   він додавався ПОВЕРХ власного padding у .brand-campaign нижче,
   через що зверху й знизу виходило 45+36=81px порожнього місця */
#brandCampaignsSection{
    padding:0;
}

.brand-campaign{
    padding:36px 0;
}

.brand-campaign:nth-child(even){
    background:#fafafa;
}

.brand-campaign-banner{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:stretch;
    gap:0;
    border-radius:24px;
    overflow:hidden;
    margin-bottom:40px;
    box-shadow:var(--shadow);
}

.brand-campaign-image{
    display:block;
    min-height:420px;
}

.brand-campaign-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.brand-campaign-content{
    background:var(--gray50);
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:14px;
}

.brand-campaign-eyebrow{
    display:inline-block;
    padding:6px 16px;
    background:var(--secondary);
    color:#fff;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
}

.brand-campaign-content h2{
    font-size:32px;
    line-height:1.25;
    /* глобальний h2{margin-bottom:50px} (для великих заголовків
       секцій типу "Популярні товари") тут зайвий — додається
       поверх gap:14px від .brand-campaign-content і дає
       нерівний, набагато більший відступ саме під заголовком.
       Скидаємо його, щоб відстань між усіма блоками (беджем,
       заголовком, текстом, кнопкою) була однаковою */
    margin-bottom:0;
    text-align:left;
}

.brand-campaign-content p{
    color:var(--gray500);
    font-size:16px;
}

.brand-campaign-content .btn{
    margin-top:10px;
}

/* Розкладку карток (кількість колонок/ширина, горизонтальна
   прокрутка при переповненні) тепер повністю задає спільний клас
   .carousel-track.products-grid — той самий, що й у "Популярні
   товари". Тут лишається тільки відступ під блоком. */
.brand-campaign-products{
    margin-bottom:32px;
}

.brand-campaign-more{
    text-align:center;
}

@media(max-width:1000px){

    .brand-campaign-banner{
        grid-template-columns:1fr;
    }

    .brand-campaign-image{
        min-height:280px;
    }

    .brand-campaign-content{
        padding:40px 32px;
    }

}

@media(max-width:560px){

    .brand-campaign-content{
        padding:32px 24px;
    }

    .brand-campaign-content h2{
        font-size:24px;
    }

}

/* -- похожие товары -- */

.similar{
    padding:80px 0;
    background:#fafafa;
}

/* =====================================
   КОРЗИНА
===================================== */

.cart-page{
    padding-top:30px;
    padding-bottom:80px;
    min-height:60vh;
}

.cart-page h1{
    font-size:38px;
    margin-bottom:30px;
}

.cart-layout{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:40px;
    align-items:start;
}

.cart-items{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.cart-item{
    display:grid;
    grid-template-columns:90px 1fr auto auto auto;
    align-items:center;
    gap:20px;
    background:#fff;
    border-radius:16px;
    padding:16px;
    box-shadow:var(--shadow-sm);
}

.cart-item-image img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:12px;
}

.cart-item-info{
    display:flex;
    flex-direction:column;
    gap:4px;
    /* min-width:0 ОБОВ'ЯЗКОВИЙ.
       Це грід-елемент у колонці 1fr, а в таких типовий min-width:auto —
       колонка не може стиснутись вужче за свій вміст. Рядок із 20
       розмірів (nowrap) розпирав колонку, картка кошика ставала
       ширшою за екран і виштовхувала панель «Разом» за край, а
       переповнення ВСЕРЕДИНІ обгорток не виникало — тож і прокрутка
       зі стрілками не вмикалась. Саме той самий випадок, що вже був
       у режимі «список» у каталозі. */
    min-width:0;
}

.cart-item-brand{
    font-size:13px;
    color:var(--gray500);
    text-transform:uppercase;
    letter-spacing:.05em;
}

.cart-item-title{
    font-weight:600;
    color:var(--gray900);
}

@media (hover:hover) and (pointer:fine){
.cart-item-title:hover{
    color:var(--secondary);
}
}

.cart-item-options{
    margin-bottom:8px;
}

/* -- прокрутка кольору/розміру в кошику та обраному --
   Ті самі обгортки, що в картці товару. min-width:0 обов'язковий:
   без нього обгортка сідає по ширині вмісту, переповнення не
   виникає — і рядок із багатьма кольорами розпирає верстку замість
   того, щоб прокручуватись (саме це було на скріні кошика). */
.cart-item-options,
.favorite-row .product-options{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    min-width:0;
}

.cart-item .product-colors-wrap,
.cart-item .product-sizes-wrap,
.favorite-row .product-colors-wrap,
.favorite-row .product-sizes-wrap{
    width:100%;
    min-width:0;
}

.cart-item-price{
    display:flex;
    align-items:baseline;
    /* nowrap — щоб у вузькому віджеті кошика ціна і закреслена
       стара лишались одним рядком, а не переносились */
    flex-wrap:nowrap;
    white-space:nowrap;
    gap:8px;
    color:var(--gray500);
    font-size:14px;
}

.cart-item-price .old-price,
.cart-item-total .old-price{
    text-decoration:line-through;
    color:var(--gray300);
    font-size:.85em;
}

.cart-item-price .price{
    color:var(--gray900);
    font-weight:600;
}

.cart-item-qty{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--gray100);
    border-radius:50px;
    padding:6px 10px;
}

.qty-btn{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#fff;
    font-size:16px;
    font-weight:700;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

@media (hover:hover) and (pointer:fine){
.qty-btn:hover{
    background:var(--secondary);
    color:#fff;
}
}

.cart-item-total{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-weight:700;
    white-space:nowrap;
}

.cart-item-remove{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--gray100);
    color:var(--gray500);
    font-size:15px;
    transition:.3s;
}

@media (hover:hover) and (pointer:fine){
.cart-item-remove:hover{
    background:#fee2e2;
    color:#dc2626;
}
}

.cart-summary{
    background:#fff;
    border-radius:var(--radius);
    padding:28px;
    box-shadow:var(--shadow-sm);
    position:sticky;
    top:110px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.cart-summary h2{
    margin-bottom:6px;
}

.summary-row[hidden]{
    display:none;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    color:var(--gray500);
    font-size:15px;
}

.summary-total{
    padding-top:14px;
    border-top:1px solid var(--gray200);
    color:var(--gray900);
    font-weight:700;
    font-size:19px;
}

.cart-summary .btn,
.cart-summary .btn-outline{
    width:100%;
}

/* "Оформити замовлення" — основна дія, має виглядати
   помітніше; "Продовжити покупки" — другорядна, тому
   зроблена як тихе текстове посилання без рамки, щоб не
   конкурувала візуально з кнопкою оформлення замовлення */
.cart-summary #checkoutBtn{
    padding:19px 24px;
    font-size:16px;
    font-weight:800;
    letter-spacing:.2px;
}

.cart-summary a.btn-outline{
    margin-top:-4px;
    padding:10px 20px;
    border:none;
    background:transparent;
    box-shadow:none;
    color:var(--gray500);
    font-size:13.5px;
    font-weight:600;
}

@media (hover:hover) and (pointer:fine){
.cart-summary a.btn-outline:hover{
    background:var(--gray50);
    color:var(--gray900);
    transform:none;
}
}

/* =====================================
   ИЗБРАННОЕ
===================================== */

.favorites-page{
    padding-top:30px;
    padding-bottom:80px;
    min-height:60vh;
}

.favorites-page h1{
    font-size:38px;
    margin-bottom:30px;
}

/* -- горизонтальные строки избранного -- */

.favorites-list[hidden]{
    display:none;
}

.favorites-list[hidden]{
    display:none;
}

.favorites-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.favorite-row{
    display:grid;
    grid-template-columns:110px 1fr auto;
    align-items:center;
    gap:24px;
    background:#fff;
    border-radius:16px;
    padding:16px 20px;
    box-shadow:var(--shadow-sm);
    transition:.25s;
    cursor:pointer;
}

@media (hover:hover) and (pointer:fine){
.favorite-row:hover{
    box-shadow:var(--shadow);
}
}

.favorite-row-image{
    width:110px;
    height:110px;
    border-radius:12px;
    overflow:hidden;
    background:var(--gray100);
}

.favorite-row-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.favorite-row-info{
    min-width:0;
}

.favorite-row-brand{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--gray500);
    margin-bottom:4px;
}

.favorite-row-title{
    font-weight:700;
    font-size:17px;
    color:var(--gray900);
    margin-bottom:8px;
}

@media (hover:hover) and (pointer:fine){
.favorite-row-title:hover{
    color:var(--secondary);
}
}

.favorite-row-price{
    display:flex;
    align-items:baseline;
    gap:10px;
}

.favorite-row-price .price{
    font-size:19px;
    font-weight:800;
}

.favorite-row-price .old-price{
    font-size:14px;
    color:var(--gray300);
    text-decoration:line-through;
}

.favorite-row-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    min-width:200px;
}

.favorite-row-actions .buy-btn{
    height:48px;
    border-radius:12px;
    white-space:nowrap;
}

.favorite-row-remove{
    width:auto;
    height:auto;
    border-radius:8px;
    background:none;
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:12px 14px;
    font-size:13px;
    font-weight:600;
    color:var(--gray500);
    white-space:nowrap;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.favorite-row-remove:hover{
    background:#fee2e2;
    color:var(--danger);
    transform:none;
}
}

@media(max-width:700px){

    .favorite-row{
        grid-template-columns:80px 1fr;
        grid-template-areas:
            "image info"
            "actions actions";
    }

    .favorite-row-image{
        grid-area:image;
        width:80px;
        height:80px;
    }

    .favorite-row-info{
        grid-area:info;
    }

    .favorite-row-actions{
        grid-area:actions;
        flex-direction:row;
        min-width:0;
    }

}

/* =====================================
   КОНТАКТЫ
===================================== */

.contacts-page{
    padding-top:30px;
    padding-bottom:80px;
}

.contacts-page h1{
    font-size:38px;
    margin-bottom:12px;
}

.contacts-lead{
    max-width:560px;
    margin-bottom:40px;
    font-size:17px;
}

.contacts-layout{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:40px;
    align-items:start;
}

.contacts-info{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:#fff;
    border-radius:16px;
    padding:20px;
    box-shadow:var(--shadow-sm);
}

.contact-card span{
    font-size:26px;
}

.contact-card h3{
    font-size:15px;
    margin-bottom:4px;
}

.contact-card p{
    font-size:15px;
    color:var(--gray500);
}

.contact-form{
    background:#fff;
    border-radius:var(--radius);
    padding:32px;
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-form h2{
    margin-bottom:6px;
}

.contact-form label{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:14px;
    color:var(--gray700);
    font-weight:600;
}

.contact-form input,
.contact-form textarea{
    resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--secondary);
}

.contact-form .btn{
    align-self:flex-start;
}

/* =====================================
   ОФОРМЛЕННЯ ЗАМОВЛЕННЯ (CHECKOUT)
===================================== */

.checkout-page{
    padding-top:30px;
    padding-bottom:80px;
    min-height:60vh;
}

.checkout-page h1{
    font-size:38px;
    margin-bottom:24px;
}

.checkout-layout{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:40px;
    align-items:start;
}

.checkout-layout[hidden]{
    display:none;
}

.checkout-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.checkout-block{
    background:#fff;
    border-radius:var(--radius);
    padding:28px;
    box-shadow:var(--shadow-sm);
}

.checkout-block h2{
    font-size:22px;
    text-align:left;
    margin-bottom:6px;
}

.checkout-block .checkout-block-sub{
    color:var(--gray500);
    font-size:14px;
    margin-bottom:20px;
}

.checkout-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.checkout-fields .field-full{
    grid-column:1/-1;
}

.checkout-form label{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:14px;
    color:var(--gray700);
    font-weight:600;
}

.checkout-form input:focus,
.checkout-form textarea:focus{
    outline:none;
    border-color:var(--secondary);
}

.field-error{
    font-size:12px;
    font-weight:500;
    color:var(--danger);
    min-height:14px;
}

.checkout-form input.invalid{
    border-color:var(--danger);
    background:#fdf4f3;
    padding-right:44px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:20px;
}

.checkout-form input.invalid:focus{
    border-color:var(--danger);
}

/* -- способи доставки -- */

.delivery-options{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.delivery-option{
    display:block;
    cursor:pointer;
}

.delivery-option input{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.delivery-option-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border:2px solid var(--gray200);
    border-radius:14px;
    padding:16px 18px;
    transition:var(--transition);
    background:var(--gray50);
}

.delivery-option input:checked + .delivery-option-card{
    border-color:var(--secondary);
    background:#eff6ff;
}

@media (hover:hover) and (pointer:fine){
.delivery-option-card:hover{
    border-color:var(--gray300);
}
}

.delivery-option-title{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;
    color:var(--gray900);
}

.delivery-option-icon{
    font-size:22px;
}

.delivery-option-price{
    font-weight:700;
    color:var(--secondary);
    white-space:nowrap;
}

.delivery-detail{
    margin-top:14px;
    display:none;
}

.delivery-detail.show{
    display:block;
}

/* -- зв'язатися зі мною -- */

.contact-channels{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.contact-channel{
    cursor:pointer;
}

.contact-channel input{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.contact-channel-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:50px;
    border:2px solid var(--gray200);
    font-size:14px;
    font-weight:600;
    color:var(--gray700);
    transition:var(--transition);
}

.contact-channel input:checked + .contact-channel-chip{
    border-color:var(--secondary);
    background:var(--secondary);
    color:#fff;
}

/* -- підсумок замовлення -- */

.order-summary{
    background:#fff;
    border-radius:var(--radius);
    padding:28px;
    box-shadow:var(--shadow-sm);
    position:sticky;
    top:110px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.order-summary-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.order-summary-header h2{
    font-size:20px;
    text-align:left;
    margin-bottom:0;
}

.order-summary-toggle{
    font-size:13px;
    font-weight:600;
    color:var(--secondary);
}

.order-summary-items{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.order-summary-items.hidden{
    display:none;
}

.order-item{
    display:flex;
    gap:12px;
}

.order-item-image{
    flex-shrink:0;
}

.order-item img{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:10px;
    flex-shrink:0;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.order-item-image:hover img{
    opacity:.85;
}
}

.order-item-info{
    display:flex;
    flex-direction:column;
    gap:3px;
    flex:1;
    font-size:13px;
}

.order-item-title{
    font-weight:600;
    color:var(--gray900);
    font-size:14px;
    text-decoration:none;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.order-item-title:hover{
    color:var(--secondary);
}
}

.order-item-meta{
    color:var(--gray500);
}

.order-item-price{
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
}

.order-item-oldprice{
    color:var(--gray500);
    text-decoration:line-through;
    font-weight:400;
    font-size:12px;
    margin-right:6px;
}

.promo-row{
    display:flex;
    gap:8px;
}

.promo-row input{
    flex:1;
}

.promo-row button{
    background:var(--gray100);
    color:var(--gray900);
    font-weight:700;
    padding:0 18px;
    border-radius:12px;
    white-space:nowrap;
    transition:var(--transition);
}

@media (hover:hover) and (pointer:fine){
.promo-row button:hover{
    background:var(--gray200);
}
}

.promo-message{
    font-size:13px;
    font-weight:600;
    min-height:16px;
}

.promo-message.success{
    color:#16a34a;
}

.promo-message.error{
    color:var(--danger);
}

.order-summary .btn{
    width:100%;
}

/* -- підтвердження замовлення -- */

.checkout-success{
    text-align:center;
    padding:70px 20px;
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}

.checkout-success .success-icon{
    font-size:56px;
    margin-bottom:16px;
}

.checkout-success h2{
    margin-bottom:12px;
}

.checkout-success p{
    max-width:480px;
    margin:0 auto 30px;
}

.order-confirm-card{
    max-width:420px;
    margin:0 auto 30px;
    text-align:left;
    background:var(--bg-soft, #f7f7f9);
    border:1px solid var(--border, #e5e5ea);
    border-radius:var(--radius);
    padding:20px 24px;
}

.order-confirm-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
    border-bottom:1px solid var(--border, #e5e5ea);
    font-size:14px;
}

.order-confirm-row:last-child{
    border-bottom:none;
}

.order-confirm-row span{
    color:var(--text-muted, #6b7280);
}

.order-confirm-row strong{
    font-weight:600;
}

.order-confirm-total{
    padding-top:14px;
}

.order-confirm-total strong{
    font-size:18px;
}

.thanks-actions{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
}

@media (max-width:480px){
    .thanks-actions{
        flex-direction:column;
        align-items:stretch;
    }
}

/* -- поп-ап підтвердження виходу зі сторінки -- */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,41,.6);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:10000;
    overflow-y:auto;
}

.modal-overlay[hidden]{
    display:none;
}

.modal-card{
    background:#fff;
    border-radius:var(--radius);
    padding:32px;
    max-width:440px;
    width:100%;
    box-shadow:var(--shadow-lg);
    animation:fadeUp .25s ease;
    border-top:4px solid #c9a86a;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:14px;
}

.modal-header h3{
    font-size:20px;
    line-height:1.3;
    text-align:left;
    color:var(--primary);
    margin-bottom:0;
}

.modal-close{
    width:34px;
    height:34px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gray100);
    color:var(--gray500);
    font-size:14px;
    transition:var(--transition);
}

@media (hover:hover) and (pointer:fine){
.modal-close:hover{
    background:var(--gray200);
    color:var(--primary);
}
}

.modal-text{
    color:var(--gray500);
    font-size:15px;
    line-height:1.6;
    margin-bottom:26px;
}

.modal-actions{
    display:flex;
    gap:12px;
}

.btn-modal{
    flex:1;
    padding:15px;
    border-radius:14px;
    font-size:14px;
    font-weight:700;
    transition:var(--transition);
}

.btn-modal-confirm{
    background:var(--primary);
    color:#e8c98a;
}

@media (hover:hover) and (pointer:fine){
.btn-modal-confirm:hover{
    background:#1b2540;
    transform:translateY(-2px);
}
}

.btn-modal-cancel{
    background:#fff;
    color:var(--primary);
    border:2px solid var(--gray200);
}

@media (hover:hover) and (pointer:fine){
.btn-modal-cancel:hover{
    border-color:var(--gray300);
    background:var(--gray50);
    transform:translateY(-2px);
}
}

@media(max-width:480px){

    .modal-actions{
        flex-direction:column-reverse;
    }

}

/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:1300px){

    nav ul{
        gap:24px;
    }

    .header-icons{
        gap:12px;
    }

}

@media(max-width:1100px){

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

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

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

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

}

@media(max-width:1000px){

    .product-wrapper{
        grid-template-columns:1fr;
    }

    .product-gallery{
        position:static;
    }

    .catalog-filters-bar{
        row-gap:10px;
    }

    .filter-search{
        flex:1 1 100%;
        max-width:none;
    }

    .filter-gender{
        flex:1 1 100%;
    }

    .gender-filter{
        width:100%;
    }

    .gender-pill{
        flex:1 1 auto;
    }

    .filter-dropdown{
        flex:1 1 calc(50% - 5px);
        min-width:140px;
        max-width:none;
    }

    #catalogGrid.products-grid:not(.list-view){
        grid-template-columns:repeat(2, 1fr);
    }

    .cart-layout{
        grid-template-columns:1fr;
    }

    .contacts-layout{
        grid-template-columns:1fr;
    }

    .checkout-layout{
        grid-template-columns:1fr;
    }

    .order-summary{
        position:static;
    }

}

@media(min-width:769px) and (max-width:900px){

    .product-gallery{
        grid-template-columns:1fr;
    }

    .thumbs-vertical{
        flex-direction:row;
        order:2;
        overflow-x:auto;
    }

    .thumb{
        width:70px;
        height:70px;
        flex-shrink:0;
    }

}

@media(max-width:900px){

    .cart-item{
        grid-template-columns:70px 1fr;
        grid-template-areas:
            "image info"
            "qty qty"
            "total remove";
    }

    .cart-item-image{ grid-area:image; }
    .cart-item-info{ grid-area:info; }
    .cart-item-qty{ grid-area:qty; justify-content:flex-start; }
    .cart-item-total{ grid-area:total; }
    .cart-item-remove{ grid-area:remove; justify-self:end; }

}

@media(max-width:768px){

    .sort-menu{
        right:auto;
        left:0;
        min-width:0;
        width:calc(100vw - 60px);
        max-width:280px;
    }

    .hero{
        min-height:520px;
        text-align:center;
    }

    .hero h1{
        font-size:42px;
    }

    .hero-content{
        margin:auto;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
        gap:14px;
        width:100%;
    }

    .hero-buttons .btn{
        width:100%;
    }

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

    #catalogGrid.products-grid:not(.list-view){
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
    }

    #catalogGrid.products-grid:not(.list-view) .product-carousel{
        aspect-ratio:1/1;
    }

    .product-card .badge{
        top:10px;
        left:10px;
        padding:5px 9px;
        font-size:10px;
    }

    .product-card .product-image .favorite{
        top:10px;
        right:10px;
    }

    .product-card .favorite{
        width:32px;
        height:32px;
    }

    .product-card .favorite svg{
        width:15px;
        height:15px;
    }

    .product-card .product-info{
        padding:12px;
    }

    .product-card .product-category{
        font-size:10.5px;
        margin-bottom:4px;
    }

    .product-card .product-title{
        font-size:13.5px;
        line-height:1.3;
        margin-bottom:8px;
        /* той самий резерв під 2 рядки, що і в десктопному правилі
           вище, — тут окремо, бо в мобільній версії інший font-size */
        min-height:2.6em;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
    }

    /* Колір і розмір — ОДНИМ рядком, з горизонтальною прокруткою.
       Раніше тут працював успадкований flex-wrap:wrap: коли кольорів
       або розмірів багато (напр. 36–41), вони переносились на новий
       рядок і вилазили за межі картки. Тепер рядок не переноситься,
       а зайве прокручується пальцем усередині самої картки. */
    .product-card .product-options{
        gap:8px;
        margin-bottom:10px;
        /* Кільце активного кольору (box-shadow) виходить за межі
           самого кружечка, а контейнер прокрутки обрізав його —
           перший колір виглядав "зрізаним" зліва. Padding дає
           кільцю місце, а від'ємний margin повертає рядок на
           попереднє місце, щоб нічого не з'їхало. */
        padding:0 3px;
        margin-left:-3px;
        margin-right:-3px;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        /* ховаємо смугу прокрутки, жест лишається */
        scrollbar-width:none;
        -ms-overflow-style:none;
        -webkit-overflow-scrolling:touch;
        /* touch-action НЕ задаємо навмисно.
           Раніше тут стояв touch-action:pan-x — і будь-який
           мікрозсув пальця під час тапу браузер трактував як
           початок горизонтального панорамування, тож клік
           скасовувався: колір доводилось тиснути двічі, а розмір
           не вибирався взагалі. overflow-x:auto сам по собі вже
           дає горизонтальну прокрутку, а розпізнавання «тап проти
           свайпу» краще лишити браузеру. */
    }

    .product-card .product-options::-webkit-scrollbar{
        display:none;
    }

    /* без цього flex стискав би кружечки та розміри замість того,
       щоб дати рядку прокручуватись.
       Обгортки (-wrap) теж тут: між .product-options і самим списком
       тепер є проміжний шар, і якби він міг стискатись, рядок
       кольору ужимався б замість того, щоб прокручуватись. */
    .product-card .product-colors,
    .product-card .product-sizes,
    .product-card .product-colors-wrap,
    .product-card .product-sizes-wrap{
        flex-wrap:nowrap;
        flex-shrink:0;
    }

    .product-card .mini-color,
    .product-card .mini-size{
        flex-shrink:0;
    }

    .product-card .mini-color{
        width:16px;
        height:16px;
    }

    .product-card .mini-size{
        min-width:22px;
        height:22px;
        padding:0 5px;
        font-size:10px;
    }

    /* Кошик і обране на мобільному: та сама прокрутка, що вище в
       .product-card, тільки колір і розмір тут НЕ в одному спільному
       рядку (у картці товару вони туляться поруч із ціною), а кожен
       на всю ширину, один під одним (.product-colors-wrap /
       .product-sizes-wrap: width:100%, див. правило вище по файлу) —
       тож прокручується кожен .product-colors / .product-sizes
       окремо. Це те саме правило, що вже працює в
       @media(min-width:769px) нижче; тут лише знято обмеження по
       ширині екрана, щоб воно діяло і на мобільному. Стрілки
       навмисно лишаються десктопними — на мобільному скролить палець. */
    .cart-item .product-colors,
    .cart-item .product-sizes,
    .favorite-row .product-colors,
    .favorite-row .product-sizes{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
        /* той самий запас під кільце активного кольору/розміру, що
           й у десктопному правилі — інакше прокрутка обрізає його
           з країв */
        padding:2px;
        margin:-2px;
    }

    .cart-item .product-colors::-webkit-scrollbar,
    .cart-item .product-sizes::-webkit-scrollbar,
    .favorite-row .product-colors::-webkit-scrollbar,
    .favorite-row .product-sizes::-webkit-scrollbar{
        display:none;
    }

    /* без цього кружечки кольору стискались би замість того, щоб
       рядок прокручувався — та сама причина, що й у .product-card
       вище. .mini-size тут не дублюємо: він уже не стискається
       завдяки базовому правилу .product-sizes .mini-size задалеко
       вище по файлу (діє на будь-якій ширині екрана). */
    .cart-item .mini-color,
    .favorite-row .mini-color{
        flex-shrink:0;
    }

    .product-card .product-price{
        margin-bottom:10px;
        min-height:0;
        gap:2px;
    }

    .product-card .price{
        font-size:15px;
    }

    .product-card .old-price{
        font-size:11.5px;
    }

    .product-card .discount{
        padding:3px 8px;
        font-size:11px;
    }

    .product-card .buy-btn{
        height:38px;
        padding:0 12px;
        font-size:12.5px;
        border-radius:10px;
    }

    .products-grid.list-view .product-card{
        flex-direction:column;
    }

    .products-grid.list-view .product-image{
        width:100%;
        aspect-ratio:4/5;
    }

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

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

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

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

    .promo-banner{
        padding:45px 30px;
    }

    /* картинка в блоці "Акції" на мобільному має виглядати
       як повноцінне фото, а не вузька обрізана смужка */
    .promotions-grid{
        grid-template-columns:1fr;
    }

    .promo-card-image{
        height:auto;
        aspect-ratio:4/5;
    }

    nav{
        display:none;
    }

    /* лого більше не в одному кластері з гамбургером/пошуком —
       ３ колонки: лівий кластер / лого по центру / кошик+обране,
       так текст "BestBrnd4u" стоїть рівно посередині шапки, а не
       притиснутий ліворуч разом з іконками */
    .header{
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
    }

    .header-left{
        justify-self:start;
    }

    .logo{
        justify-self:center;
    }

    .header-icons{
        justify-self:end;
    }

    .header-icons .mobile-menu-btn,
    .header-left .mobile-menu-btn{
        display:flex;
    }

    /* акаунт на мобільному ховаємо — на вузькому екрані місце
       у хедері обмежене, а увійти можна й з мобільного меню */
    #accountLink{
        display:none;
    }

    .checkout-fields{
        grid-template-columns:1fr;
    }

    .checkout-block{
        padding:22px;
    }

    /* заголовок секції ("Популярні товари", "Новинки" тощо) —
       на вузькому екрані h2 в 42px не влазить в один рядок і
       "з'їдає" посилання "Переглянути всі" поруч */
    .section-title{
        margin-bottom:24px;
        gap:10px;
    }

    .section-title h2{
        font-size:22px;
        text-align:left;
        margin-bottom:0;
    }

    .section-title a{
        font-size:13px;
        white-space:nowrap;
        flex-shrink:0;
    }

}

@media(max-width:500px){

    .container{
        padding:0 20px;
    }

    /* повний розмір лого (34px + letter-spacing 4px) разом з
       гамбургером/пошуком зліва і обраним/кошиком справа не
       влазить у вузький екран — звужуємо саме лого, іконки
       мають фіксований розмір і їх звужувати нема куди */
    .logo{
        font-size:20px;
        letter-spacing:1px;
    }

    .header-left{
        gap:10px;
    }

    .header-icons{
        gap:10px;
    }

    .hero h1{
        font-size:34px;
    }

    h2{
        font-size:32px;
    }

    .btn{
        width:100%;
    }

    .product-actions .btn{
        min-width:0;
    }

}

/* =====================================
   МОБІЛЬНЕ МЕНЮ (випадна панель під хедером,
   відкривається кнопкою .mobile-menu-btn — див. common.js)
===================================== */

.mobile-nav-backdrop{
    position:fixed;
    inset:82px 0 0 0;
    background:rgba(17,24,39,.5);
    z-index:3999;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease;
}

.mobile-nav-backdrop.open{
    opacity:1;
    visibility:visible;
}

.mobile-nav{
    position:fixed;
    top:82px;
    left:0;
    right:0;
    z-index:4000;
    max-height:calc(100vh - 82px);
    overflow-y:auto;
    background:#fff;
    box-shadow:var(--shadow-lg);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s;
}

.mobile-nav.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.mobile-nav-list{
    list-style:none;
    padding:12px 0;
}

.mobile-nav-list a{
    display:flex;
    align-items:center;
    padding:16px 24px;
    font-size:16px;
    font-weight:700;
    color:var(--gray900);
    border-bottom:1px solid var(--gray100);
}

.mobile-nav-list a:active{
    background:var(--gray50);
}

.mobile-nav-list a.sale-text,
.mobile-nav-list a.sale-text:active{
    color:var(--danger) !important;
}

/* =====================================
   ГЛОБАЛЬНИЙ ПОШУК (оверлей у стилі Nike)
===================================== */

.search-overlay{
    position:fixed;
    top:82px;
    left:0;
    right:0;
    bottom:0;
    z-index:4000;
    display:flex;
    justify-content:center;
}

.search-overlay[hidden]{
    display:none;
}

.search-overlay-backdrop{
    position:absolute;
    inset:0;
    background:rgba(17,24,39,.5);
    opacity:0;
    transition:opacity .25s ease;
}

.search-overlay.open .search-overlay-backdrop{
    opacity:1;
}

.search-overlay-panel{
    position:relative;
    z-index:1;
    width:100%;
    max-height:calc(100vh - 82px);
    overflow-y:auto;
    /* без цього поява внутрішнього скролбару (коли зʼявляються
       результати пошуку) звужує контент і все "стрибає" вліво */
    scrollbar-gutter:stable;
    background:#fff;
    box-shadow:var(--shadow-lg);
    transform:translateY(-16px);
    opacity:0;
    transition:.25s ease;
}

.search-overlay.open .search-overlay-panel{
    transform:translateY(0);
    opacity:1;
}

.search-overlay-bar{
    display:flex;
    align-items:center;
    gap:20px;
    padding:26px 32px;
    border-bottom:1px solid var(--gray100);
}

.search-overlay-input-wrap{
    flex:1;
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--gray50);
    border:1.5px solid var(--gray200);
    border-radius:14px;
    padding:0 18px;
    transition:.2s;
}

.search-overlay-input-wrap:focus-within{
    border-color:var(--secondary);
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.search-overlay-icon{
    font-size:16px;
    opacity:.5;
    flex-shrink:0;
}

.search-overlay-input-wrap input{
    flex:1;
    height:56px;
    border:none;
    background:transparent;
    font-size:18px;
    padding:0;
}

.search-overlay-input-wrap input:focus{
    outline:none;
}

.search-overlay-clear[hidden]{
    display:none;
}

.search-overlay-clear{
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--gray200);
    color:var(--gray700);
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.search-overlay-clear:hover{
    background:var(--gray300);
}
}

.search-overlay-cancel{
    font-size:15px;
    font-weight:600;
    color:var(--gray700);
    white-space:nowrap;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.search-overlay-cancel:hover{
    color:var(--secondary);
}
}

.search-overlay-body{
    padding:36px 32px 60px;
}

.search-idle{
    display:flex;
    align-items:flex-start;
    gap:56px;
}

.search-idle-main{
    flex:1 1 380px;
    min-width:0;
}

.search-section + .search-section{
    margin-top:36px;
}

.search-section-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--gray500);
    margin-bottom:16px;
}

/* -- популярні запити (чіпи) -- */

.search-chip-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.search-chip{
    padding:12px 20px;
    border-radius:50px;
    background:var(--gray100);
    color:var(--gray900);
    font-size:14px;
    font-weight:600;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.search-chip:hover{
    background:var(--secondary);
    color:#fff;
}
}

/* -- останні пошуки -- */

.search-recent-list{
    display:flex;
    flex-direction:column;
}

.search-recent-item{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:13px 4px;
    border-bottom:1px solid var(--gray100);
    cursor:pointer;
}

@media (hover:hover) and (pointer:fine){
.search-recent-item:hover .search-recent-term{
    color:var(--secondary);
}
}

.search-recent-term{
    font-size:15px;
    color:var(--gray900);
    transition:.2s;
}

.search-recent-remove{
    width:26px;
    height:26px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gray400, var(--gray300));
    font-size:11px;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.search-recent-remove:hover{
    background:var(--gray100);
    color:var(--gray900);
}
}

/* -- банери каталогу (права колонка ідле-стану пошуку) -- */

.search-promo-banners{
    flex:1 1 320px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.search-promo-banner{
    position:relative;
    height:130px;
    border-radius:16px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
    padding:16px;
    overflow:hidden;
    transition:transform .25s;
}

@media (hover:hover) and (pointer:fine){
.search-promo-banner:hover{
    transform:translateY(-3px);
}
}

.search-promo-banner span{
    color:#fff;
    font-weight:700;
    font-size:16px;
    position:relative;
    z-index:1;
}

.search-promo-new{
    background:linear-gradient(135deg,#0f1729,#1b2540);
}

.search-promo-new span{
    color:#e8c98a;
}

.search-promo-sale{
    background:linear-gradient(135deg,#7f1d1d,#b91c1c);
}

/* -- результати пошуку -- */

.search-results[hidden]{
    display:none;
}

.search-results{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:48px;
}

.search-suggestion-list{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.search-suggestion-item{
    text-align:left;
    padding:11px 10px;
    border-radius:8px;
    font-size:14.5px;
    color:var(--gray700);
    transition:.15s;
}

@media (hover:hover) and (pointer:fine){
.search-suggestion-item:hover{
    background:var(--gray100);
    color:var(--secondary);
}
}

.search-no-suggestions{
    color:var(--gray300);
    font-size:13.5px;
}

.search-results-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:20px;
}

.search-result-card{
    display:block;
    transition:.2s;
}

.search-result-image{
    aspect-ratio:1/1;
    background:var(--gray50);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:10px;
}

.search-result-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.3s;
}

@media (hover:hover) and (pointer:fine){
.search-result-card:hover .search-result-image img{
    transform:scale(1.06);
}
}

.search-result-brand{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--gray500);
    margin-bottom:2px;
}

.search-result-title{
    font-size:14px;
    font-weight:600;
    color:var(--gray900);
    margin-bottom:4px;
    line-height:1.3;
}

.search-result-price{
    font-size:14px;
    font-weight:700;
    color:var(--gray900);
}

.search-no-results{
    color:var(--gray500);
    font-size:14.5px;
    padding:8px 0;
}

.search-see-all[hidden]{
    display:none;
}

.search-see-all{
    display:inline-block;
    margin-top:20px;
    font-size:14px;
    font-weight:700;
    color:var(--secondary);
}

@media (hover:hover) and (pointer:fine){
.search-see-all:hover{
    text-decoration:underline;
}
}

@media(max-width:800px){

    .search-overlay-bar{
        padding:18px 20px;
        gap:12px;
    }

    .search-overlay-input-wrap input{
        height:48px;
        font-size:16px;
    }

    .search-overlay-body{
        padding:24px 20px 48px;
    }

    .search-idle{
        flex-direction:column;
        gap:32px;
    }

    .search-promo-banners{
        width:100%;
    }

    .search-results{
        grid-template-columns:1fr;
        gap:28px;
    }

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

}

/* =====================================
   ОСОБИСТИЙ КАБІНЕТ / АВТОРИЗАЦІЯ
===================================== */

#accountLink.logged-in{
    background:var(--secondary);
    color:#fff;
}

.account-page{
    padding:50px 0 80px;
}

.account-page .loader{
    padding:60px 0;
}

/* -- картка входу / реєстрації -- */

.auth-card{
    max-width:420px;
    margin:0 auto;
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:32px;
}

.auth-tabs{
    display:flex;
    gap:8px;
    margin-bottom:24px;
    background:var(--gray100);
    border-radius:12px;
    padding:4px;
}

.auth-card-title{
    font-size:22px;
    text-align:left;
    margin-bottom:6px;
}

.auth-card-sub{
    color:var(--gray500);
    font-size:14px;
    margin-bottom:24px;
}

.auth-tab{
    flex:1;
    padding:10px;
    border-radius:9px;
    font-size:14px;
    font-weight:700;
    color:var(--gray500);
    background:transparent;
    transition:.2s;
}

.auth-tab.active{
    background:#fff;
    color:var(--gray900);
    box-shadow:var(--shadow-sm);
}

.auth-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.auth-form[hidden]{
    display:none;
}

.auth-form label{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:14px;
    color:var(--gray700);
    font-weight:600;
}

/* FIX: display:flex вище перебиває стандартний display:none
   у [hidden] — без цього рядка поля "Номер відділення" /
   "Номер поштомату" / "Адреса..." показувались всі одразу,
   незалежно від обраного способу отримання. */
.auth-form label[hidden]{
    display:none;
}

.auth-form input:focus{
    outline:none;
    border-color:var(--secondary);
}

.auth-form select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:44px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    cursor:pointer;
    transition:var(--transition);
}

@media (hover:hover) and (pointer:fine){
.auth-form select:hover{
    border-color:var(--gray300);
}
}

.auth-form select:focus{
    outline:none;
    border-color:var(--secondary);
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

/* -- глазок "показати/приховати пароль" -- */

.password-field{
    position:relative;
}

.password-field input{
    padding-right:46px;
}

.password-toggle{
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gray400, var(--gray300));
    transition:var(--transition);
}

@media (hover:hover) and (pointer:fine){
.password-toggle:hover{
    background:var(--gray100);
    color:var(--gray700);
}
}

.auth-form .btn{
    width:100%;
    margin-top:4px;
}

.auth-link{
    align-self:center;
    font-size:13px;
    font-weight:600;
    color:var(--gray500);
    text-decoration:underline;
}

@media (hover:hover) and (pointer:fine){
.auth-link:hover{
    color:var(--secondary);
}
}

/* -- кабінет авторизованого користувача -- */

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

.account-header h1{
    text-align:left;
    font-size:40px;
    margin-bottom:4px;
}

.account-email{
    color:var(--gray500);
    font-size:14px;
    max-width:560px;
    line-height:1.5;
}

.account-tabs{
    display:flex;
    gap:8px;
    margin-bottom:28px;
    border-bottom:1px solid var(--gray200);
}

.account-tab{
    padding:12px 4px;
    margin-right:24px;
    font-size:15px;
    font-weight:700;
    color:var(--gray500);
    background:none;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.account-tab:hover{
    color:var(--gray900);
}
}

.account-tab.active{
    color:var(--gray900);
    border-bottom-color:var(--secondary);
}

.account-panel[hidden]{
    display:none;
}

/* -- Мої дані -- */

.profile-card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:32px;
    max-width:640px;
}

.profile-card h2{
    text-align:left;
    font-size:20px;
    margin-bottom:6px;
}

.profile-card-sub{
    color:var(--gray500);
    font-size:14px;
    margin-bottom:24px;
}

.profile-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.profile-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 20px;
}

.profile-fields .field-full{
    grid-column:1 / -1;
}

.profile-form label{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:14px;
    color:var(--gray700);
    font-weight:600;
}

.profile-form input:focus{
    outline:none;
    border-color:var(--secondary);
}

.profile-email-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    background:var(--gray50);
    border-radius:12px;
    font-size:14px;
}

.profile-email-row span{
    color:var(--gray500);
}

.profile-email-row strong{
    color:var(--gray900);
    font-weight:600;
}

.profile-logout-row{
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid var(--gray100);
}

.profile-logout-row .btn-outline{
    color:#dc2626;
    border-color:#fecaca;
}

@media (hover:hover) and (pointer:fine){
    .profile-logout-row .btn-outline:hover{
        background:#fef2f2;
        border-color:#fecaca;
    }
}

.profile-form .auth-link{
    align-self:flex-start;
}

.profile-links-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.auth-link-danger{
    color:#dc2626;
}

@media (hover:hover) and (pointer:fine){
.auth-link-danger:hover{
    color:#b91c1c;
}
}

.profile-form .btn{
    align-self:flex-start;
    min-width:180px;
}

.orders-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.order-card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}

.order-card-toggle{
    display:block;
    width:100%;
    text-align:left;
    padding:20px 24px;
    background:none;
    border:none;
    cursor:pointer;
}

.order-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.order-card-title-group{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.order-card-header-right{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:14px;
}

.order-card-number{
    display:block;
    font-weight:700;
    font-size:15px;
    color:var(--gray900);
}

.order-card-date{
    display:block;
    font-size:13px;
    color:var(--gray500);
}

.order-card-chevron{
    flex-shrink:0;
    font-size:16px;
    color:var(--gray500);
    transition:transform .2s;
}

.order-card.expanded .order-card-chevron{
    transform:rotate(180deg);
}

.order-card-brief{
    margin-top:10px;
    font-size:13px;
    color:var(--gray500);
    line-height:1.7;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
}

.order-card-brief-dot{
    margin:0 8px;
    color:var(--gray300);
}

.order-card-brief-discount{
    color:var(--danger);
}

.order-card-brief-total{
    color:var(--gray900);
    font-weight:700;
}

.order-card-details{
    padding:0 24px 24px;
    border-top:1px solid var(--gray100);
    margin-top:0;
    padding-top:20px;
}

.order-status{
    flex-shrink:0;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    background:var(--gray100);
    color:var(--gray700);
}

.order-status-new{
    background:rgba(37,99,235,.1);
    color:var(--secondary);
}

.order-status-processing{
    background:rgba(245,158,11,.12);
    color:#b45309;
}

.order-status-shipped{
    background:rgba(37,99,235,.1);
    color:var(--secondary);
}

.order-status-completed{
    background:rgba(16,185,129,.12);
    color:#047857;
}

.order-status-cancelled{
    background:rgba(239,68,68,.1);
    color:var(--danger);
}

.order-card-items{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 28px;
}

.order-item-brand{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--gray500);
}

.order-item-refuse{
    align-self:flex-start;
    margin-top:4px;
    font-size:12.5px;
    font-weight:600;
    color:var(--gray500);
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.order-item-refuse:hover{
    color:var(--danger);
}
}

/* -- контактні дані / доставка / оплата у деталях замовлення -- */

.order-detail-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-bottom:20px;
}

.order-detail-block h3{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--gray900);
    margin-bottom:10px;
}

.order-detail-block p{
    font-size:14px;
    color:var(--gray500);
    line-height:1.6;
    margin:0;
}

.order-detail-block p strong{
    color:var(--gray700);
    font-weight:600;
}

.order-detail-payment{
    margin-bottom:20px;
}

.order-detail-divider{
    border:none;
    border-top:1px solid var(--gray100);
    margin:0 0 20px;
}

@media(max-width:640px){

    .order-card-items{
        grid-template-columns:1fr;
    }

    .order-detail-columns{
        grid-template-columns:1fr;
        gap:16px;
    }

}

.order-card-summary{
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed var(--gray200);
    display:flex;
    flex-direction:column;
    gap:8px;
}

.order-card-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-size:13px;
    color:var(--gray500);
}

.order-card-summary-discount span:last-child{
    color:var(--danger);
    font-weight:600;
}

.order-card-summary-total{
    margin-top:4px;
    padding-top:10px;
    border-top:1px solid var(--gray100);
    font-size:16px;
    font-weight:700;
    color:var(--gray900);
}

@media(max-width:600px){

    .auth-card{
        padding:24px 20px;
    }

    .account-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .account-page{
        padding-top:28px;
    }

    .account-header h1{
        font-size:30px;
    }

    .order-card-toggle{
        padding:16px 18px;
    }

    .order-card-details{
        padding:0 18px 18px;
    }

    .order-card-brief{
        display:block;
        white-space:normal;
        line-height:1.6;
    }

    .profile-fields{
        grid-template-columns:1fr;
    }

    .profile-card{
        padding:24px 20px;
    }

    .account-tabs{
        gap:0;
    }

    .account-tab{
        margin-right:16px;
        font-size:14px;
    }

}

/* =====================================
   АДРЕСИ ДОСТАВКИ (особистий кабінет)
===================================== */

.addresses-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:28px;
}

.addresses-header h2{
    text-align:left;
    font-size:22px;
    margin-bottom:6px;
}

.addresses-header .btn{
    flex-shrink:0;
    padding:12px 22px;
    font-size:14px;
}

.addresses-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.address-card{
    display:flex;
    align-items:center;
    gap:16px;
    background:#fff;
    border:1px solid var(--gray100);
    border-radius:16px;
    padding:18px 20px;
    box-shadow:var(--shadow-sm);
}

.address-card-icon{
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:12px;
    background:var(--gray50);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.address-card-info{
    flex:1;
    min-width:0;
}

.address-card-title{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-weight:700;
    font-size:15px;
    color:var(--gray900);
}

.address-default-badge{
    font-size:11px;
    font-weight:700;
    color:var(--secondary);
    background:rgba(37,99,235,.1);
    padding:3px 10px;
    border-radius:20px;
}

.address-card-detail{
    margin-top:4px;
    font-size:13.5px;
    color:var(--gray500);
}

.address-card-actions{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:6px;
}

.address-edit-btn,
.address-remove-btn{
    padding:9px 14px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:.2s;
}

.address-edit-btn{
    color:var(--secondary);
}

@media (hover:hover) and (pointer:fine){
.address-edit-btn:hover{
    background:rgba(37,99,235,.1);
}
}

.address-remove-btn{
    color:var(--gray500);
}

@media (hover:hover) and (pointer:fine){
.address-remove-btn:hover{
    background:#fee2e2;
    color:var(--danger);
}
}

.address-modal-card{
    max-width:520px;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--gray300) transparent;
}

.address-modal-card::-webkit-scrollbar{
    width:6px;
}

.address-modal-card::-webkit-scrollbar-track{
    background:transparent;
}

.address-modal-card::-webkit-scrollbar-thumb{
    background:var(--gray300);
    border-radius:10px;
}

.address-default-check{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:500;
    color:var(--gray700);
    cursor:pointer;
}

.address-default-check input{
    width:18px;
    height:18px;
    accent-color:var(--secondary);
}

@media(max-width:600px){

    .addresses-header{
        flex-direction:column;
    }

    .addresses-header .btn{
        width:100%;
    }

    .address-card{
        flex-wrap:wrap;
    }

    .address-card-actions{
        width:100%;
        justify-content:flex-end;
    }

}

/* -- збережені адреси на чекауті -- */

.saved-addresses-block{
    margin-bottom:22px;
}

.saved-addresses-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--gray500);
    margin-bottom:10px;
}

.saved-addresses-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.saved-address-chip{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:10px 16px;
    border-radius:12px;
    border:1.5px solid var(--gray200);
    background:#fff;
    text-align:left;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.saved-address-chip:hover{
    border-color:var(--secondary);
}
}

.saved-address-chip.active{
    border-color:var(--secondary);
    background:rgba(37,99,235,.06);
}

.saved-address-chip-title{
    font-size:13.5px;
    font-weight:700;
    color:var(--gray900);
}

.saved-address-chip-meta{
    font-size:12px;
    color:var(--gray500);
}

/* =====================================
   ОКРЕМА СТОРІНКА АКЦІЇ (promo.html)
===================================== */

.promo-hero{
    padding:40px 0 20px;
}

.promo-hero-banner{
    border-radius:30px;
    overflow:hidden;
    padding:70px 60px;
    color:#fff;
    background-color:#111827;
    /* cover, щоб не було сірих/порожніх полів по краях банера.
       Було contain — але тоді фото, завантажене в акцію, показувалось
       цілком і залишало порожні поля, якщо його пропорції не збігались
       з пропорціями банера. Тепер фото завжди заповнює банер повністю;
       щоб при цьому на мобільному та десктопі не обрізало по-різному
       важливі деталі/текст на фото, можна завантажити в акції окреме,
       вертикальніше фото спеціально під мобільні екрани (--banner-img-mobile
       нижче) — інакше на вузьких екранах просто обрізається те саме фото */
    background-image:var(--banner-img-mobile);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    min-height:420px;
}

@media(min-width:769px){
    .promo-hero-banner{
        background-image:var(--banner-img-desktop);
    }
}

.promo-hero-content{
    max-width:650px;
}

.promo-hero-badge{
    display:inline-block;
    padding:8px 18px;
    background:var(--danger);
    border-radius:50px;
    margin-bottom:20px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.04em;
}

.promo-hero-badge[hidden]{
    display:none;
}

.promo-hero-content h1{
    color:#fff;
    font-size:42px;
    margin-bottom:16px;
}

.promo-hero-content p{
    color:rgba(255,255,255,.88);
    font-size:17px;
    line-height:1.6;
    margin-bottom:32px;
    max-width:520px;
}

.promo-products{
    padding:50px 0 80px;
}

@media(max-width:768px){

    .promo-hero-banner{
        padding:44px 28px;
        min-height:320px;
    }

    .promo-hero-content h1{
        font-size:30px;
    }

}

/* =====================================
   МОБІЛЬНІ ФІЛЬТРИ КАТАЛОГУ
   (закріплена панель "Фільтри" + повноекранний
   список фільтрів, замість громіздкого стеку
   інпутів/дропдаунів на вузьких екранах)
===================================== */

.mobile-filter-bar{
    display:none;
}

@media(max-width:768px){

    .catalog-filters-bar{
        display:none;
    }

    .mobile-filter-bar{
        display:flex;
        align-items:center;
        gap:10px;
        position:sticky;
        top:82px;
        z-index:500;
        background:#fff;
        padding:12px 20px;
        margin:0 -20px 20px;
        box-shadow:0 6px 20px rgba(0,0,0,.06);
        transition:transform .3s ease;
    }

    .mobile-filter-bar.is-hidden{
        transform:translateY(-140%);
    }

    .mobile-filter-bar .sort-dropdown{
        flex:1 1 auto;
        min-width:0;
    }

    .mobile-filter-bar .sort-toggle{
        width:100%;
        height:44px;
        justify-content:center;
    }

    .mobile-filter-bar .sort-menu{
        left:auto;
        right:0;
        width:min(78vw,320px);
        max-width:none;
    }

}

.mobile-filter-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:0 0 auto;
    height:44px;
    padding:0 18px;
    border-radius:12px;
    border:1.5px solid var(--gray200);
    background:#fff;
    font-size:14px;
    font-weight:700;
    color:var(--gray900);
    white-space:nowrap;
}

.mobile-filter-btn-icon{
    font-size:14px;
}

.mobile-filter-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:50px;
    background:var(--secondary);
    color:#fff;
    font-size:11.5px;
    font-weight:800;
}

.mobile-filter-count[hidden]{
    display:none;
}

/* -- повноекранна модалка "Всі фільтри" -- */

.mobile-filters-modal[hidden]{
    display:none;
}

.mobile-filters-modal{
    position:fixed;
    inset:0;
    z-index:10050;
    background:#fff;
}

.mobile-filters-sheet{
    position:relative;
    height:100%;
    overflow:hidden;
}

.mobile-filters-screen{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    background:#fff;
}

.mobile-filters-screen[hidden]{
    display:none;
}

.mobile-filters-head{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 20px;
    border-bottom:1px solid var(--gray100);
}

.mobile-filters-head-title{
    font-size:17px;
    font-weight:800;
    color:var(--gray900);
}

.mobile-filters-close,
.mobile-filters-back{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--gray100);
    font-size:15px;
    color:var(--gray700);
}

.mobile-filters-back{
    margin-right:auto;
}

.mobile-filters-close{
    margin-left:auto;
}

.mobile-filters-rows{
    flex:1 1 auto;
    overflow-y:auto;
    padding:4px 4px 24px;
}

.mobile-filter-row{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 16px;
    border-bottom:1px solid var(--gray100);
    text-align:left;
    font-size:15.5px;
    font-weight:600;
    color:var(--gray900);
}

.mobile-filter-row-right{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:var(--gray500);
    font-weight:500;
}

.mobile-filter-row-value{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
}

.mobile-filter-row-arrow{
    flex-shrink:0;
    color:var(--gray300);
}

.mobile-filters-footer{
    flex:0 0 auto;
    display:flex;
    gap:12px;
    padding:14px 20px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid var(--gray100);
    box-shadow:0 -8px 24px rgba(0,0,0,.05);
}

.mobile-filters-footer .btn{
    flex:1 1 auto;
    width:auto;
    justify-content:center;
}

.mobile-filters-footer .btn-outline{
    flex:0 0 auto;
    width:auto;
    padding-left:18px;
    padding-right:18px;
}

/* текстові вузли навколо <span> в кнопках "Показати N товарів"
   стають окремими анонімними flex-елементами (бо .btn — flex),
   і пробіл між ними "з'їдається" браузером — фіксуємо явним
   відступом, щоб не злипалось у "Показати2товарів" */
#mfCount,
#mfSubCount{
    margin:0 4px;
}

.mobile-filters-sub-content{
    flex:1 1 auto;
    overflow-y:auto;
    padding:14px 16px 24px;
}

/* коли реальні елементи дропдаунів (categoryMenu/brandMenu/...)
   переносяться JS-ом всередину мобільної шторки — знімаємо
   з них абсолютне позиціювання та обмеження висоти, які їм
   потрібні лише для десктопного попапу */
.mobile-filters-sub-content .filter-menu{
    position:static;
    box-shadow:none;
    padding:0;
    min-width:0;
    max-height:none;
    overflow:visible;
    border-radius:0;
}

.mobile-filters-sub-content .filter-menu-options{
    max-height:none;
    overflow:visible;
}

.mobile-filters-sub-content .filter-option{
    padding:13px 10px;
    font-size:15px;
    white-space:normal;
}

.mobile-filters-sub-content .filter-option-clear{
    padding:12px 10px;
}

.mobile-filters-sub-content .filter-size-chips{
    padding:0 0 6px;
}

.mobile-filters-sub-content .gender-filter{
    flex-direction:column;
    gap:0;
}

.mobile-filters-sub-content .gender-pill{
    justify-content:flex-start;
    border:none;
    border-bottom:1px solid var(--gray100);
    border-radius:0;
    padding:14px 10px;
    font-size:15px;
    background:transparent;
}

.mobile-filters-sub-content .gender-pill.active{
    background:transparent;
    color:var(--secondary);
}

/* =====================================
   LIGHTBOX — повноекранний перегляд фото
   товару з зумом (за зразком md-fashion.ua)
===================================== */

.lightbox{
    position:fixed;
    inset:0;
    z-index:20000;
    background:rgba(10,10,12,.97);
    opacity:0;
    transition:opacity .25s ease;
    display:flex;
    flex-direction:column;
}

.lightbox[hidden]{
    display:none;
}

.lightbox.open{
    opacity:1;
}

.lightbox-stage{
    position:relative;
    flex:1;
    overflow:hidden;
    display:flex;
}

.lightbox-track{
    display:flex;
    width:100%;
    height:100%;
    transition:transform .35s ease;
    will-change:transform;
}

.lightbox-slide{
    flex:0 0 100%;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:20px;
}

/* -- відео та вбудовані плеєри в лайтбоксі -- */

/* На відміну від фото, тут НЕ ставимо touch-action:none —
   плеєру потрібні власні жести (перемотка, гучність). */
.lightbox-slide-media{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:16px;
}

.lightbox-video{
    max-width:100%;
    max-height:100%;
    border-radius:12px;
    background:#000;
    outline:none;
}

/* embed (YouTube/Vimeo) — тримаємо співвідношення 16:9 і
   вписуємо у вільне місце екрана */
.lightbox-embed{
    width:min(100%, 1100px);
    aspect-ratio:16 / 9;
    max-height:100%;
    border:0;
    border-radius:12px;
    background:#000;
}

.lightbox-img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    touch-action:none;
    transition:transform .25s ease;
    user-select:none;
    -webkit-user-drag:none;
}

.lightbox.is-zoomed .lightbox-slide{
    /* курсор ховається кастомним кружком-підказкою (JS додає
       клас .cursor-hidden лише поки курсор реально над фото) */
}

/* -- десктоп: замість системного курсора "лупа" показуємо
   свій кружок з +/- (лоджика в lightbox.js), а системний
   курсор ховаємо тільки поки він справді над фото -- */
@media (hover:hover) and (pointer:fine){

    .lightbox-track.cursor-hidden,
    .lightbox-track.cursor-hidden .lightbox-slide{
        cursor:none;
    }

    .lightbox.is-zoomed .lightbox-img{
        transition:none;
    }

}

.lightbox-zoom-hint{
    position:absolute;
    width:44px;
    height:44px;
    border-radius:50%;
    background:#fff;
    color:var(--gray900);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:400;
    line-height:1;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    pointer-events:none;
    z-index:3;
    opacity:0;
    transition:opacity .15s ease;
}

.lightbox-zoom-hint.show{
    opacity:1;
}

.lightbox-close{
    position:fixed;
    top:20px;
    right:20px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.lightbox-close:hover{
    background:rgba(255,255,255,.18);
}
}

.lightbox-close svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
}

.lightbox-arrow{
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:.2s;
}

@media (hover:hover) and (pointer:fine){
.lightbox-arrow:hover{
    background:rgba(255,255,255,.18);
}
}

.lightbox-arrow svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.lightbox-arrow[disabled]{
    opacity:.3;
    pointer-events:none;
}

/* великі стрілки посередині екрана — тільки на широких екранах */
.lightbox > .lightbox-prev,
.lightbox > .lightbox-next{
    display:none;
}

.lightbox-bottom-bar{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    padding:18px 20px;
}

.lightbox-info{
    position:relative;
    z-index:2;
    text-align:center;
    padding:0 24px 6px;
}

.lightbox-info[hidden]{
    display:none;
}

.lightbox-info-brand{
    color:rgba(255,255,255,.55);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.lightbox-info-title{
    color:#fff;
    font-size:15px;
    font-weight:600;
    margin-top:4px;
}

.lightbox-counter{
    color:#fff;
    font-size:16px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    min-width:56px;
    text-align:center;
}

.lightbox-counter-total{
    color:rgba(255,255,255,.5);
    font-weight:500;
}

.lightbox-hint{
    position:relative;
    z-index:2;
    text-align:center;
    color:rgba(255,255,255,.55);
    font-size:12.5px;
    padding:0 24px 22px;
}

@media(min-width:769px){

    .lightbox-hint{
        display:none;
    }

    .lightbox-bottom-bar{
        position:fixed;
        top:36px;
        left:44px;
        justify-content:flex-start;
        padding:0;
    }

    .lightbox-bottom-bar .lightbox-prev-mobile,
    .lightbox-bottom-bar .lightbox-next-mobile{
        display:none;
    }

    .lightbox-counter{
        font-size:30px;
        font-weight:800;
        color:#fff;
    }

    .lightbox-counter-total{
        font-size:16px;
    }

    .lightbox-info{
        position:fixed;
        top:92px;
        left:44px;
        text-align:left;
        padding:0;
        max-width:360px;
    }

    .lightbox-info-brand{
        font-size:13px;
    }

    .lightbox-info-title{
        font-size:19px;
    }

    .lightbox > .lightbox-prev,
    .lightbox > .lightbox-next{
        display:flex;
        position:fixed;
        top:50%;
        transform:translateY(-50%);
        z-index:2;
    }

    .lightbox > .lightbox-prev{
        left:30px;
    }

    .lightbox > .lightbox-next{
        right:30px;
    }

}

@media(max-width:768px){

    .lightbox-close{
        top:14px;
        right:14px;
        width:38px;
        height:38px;
    }

    .lightbox-arrow{
        width:38px;
        height:38px;
    }

}

/* =====================================
   ПОЛІТИКА КОНФІДЕНЦІЙНОСТІ (privacy-policy.html)
===================================== */

.legal-content{
    max-width:820px;
    margin:0 auto;
    padding:60px 0 20px;
}

.legal-updated{
    display:inline-block;
    padding:6px 16px;
    border-radius:50px;
    background:var(--gray100);
    color:var(--gray500);
    font-size:13.5px;
    font-weight:600;
    margin-bottom:36px;
}

.legal-content h2{
    font-size:22px;
    text-align:left;
    margin:44px 0 16px;
    color:var(--gray900);
}

.legal-content h2:first-of-type{
    margin-top:0;
}

.legal-content p{
    color:var(--gray500);
    font-size:15.5px;
    line-height:1.8;
    margin-bottom:16px;
}

.legal-content ul{
    margin:0 0 16px;
    padding-left:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.legal-content ul li{
    position:relative;
    padding-left:26px;
    color:var(--gray500);
    font-size:15.5px;
    line-height:1.7;
}

.legal-content ul li::before{
    content:"";
    position:absolute;
    left:6px;
    top:9px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--secondary);
}

.legal-content ul li strong{
    color:var(--gray900);
}

.legal-content a{
    color:var(--secondary);
    text-decoration:underline;
    text-underline-offset:3px;
}

@media(max-width:600px){

    .legal-content{
        padding:40px 0 10px;
    }

    .legal-content h2{
        font-size:19px;
        margin:34px 0 12px;
    }

}

/* =====================================
   БАЙЄР-СЕРВІС (bayer-service.html)
===================================== */

.bayer-hero-banner{
    border-radius:30px;
    overflow:hidden;
    padding:80px 60px;
    color:#fff;
    background:
        linear-gradient(rgba(17,24,39,.72), rgba(17,24,39,.72)),
        url('https://images.pexels.com/photos/5745781/pexels-photo-5745781.jpeg?auto=compress&cs=tinysrgb&w=1600')
        center/cover no-repeat;
}

/* варіант без фотографії байєр-сервісу — для інших
   інформаційних сторінок (наприклад "Оплата і доставка") */
.dp-hero-banner{
    background:linear-gradient(135deg, var(--primary), #1f2937);
}

.bayer-hero-banner .bayer-hero-content{
    max-width:640px;
}

.bayer-hero-badge{
    display:inline-block;
    padding:8px 18px;
    background:var(--secondary);
    border-radius:50px;
    margin-bottom:20px;
    font-size:14px;
    font-weight:700;
}

.bayer-hero-banner h1{
    color:#fff;
    font-size:44px;
    margin-bottom:18px;
}

.bayer-hero-banner p{
    color:rgba(255,255,255,.85);
    font-size:17px;
    margin-bottom:32px;
}

.bayer-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.bayer-section{
    padding:70px 0;
}

.bayer-section:nth-child(even){
    background:var(--gray50);
}

.bayer-section-head{
    max-width:720px;
    margin:0 auto 40px;
    text-align:center;
}

.bayer-section-eyebrow{
    display:inline-block;
    font-size:28px;
    margin-bottom:10px;
}

.bayer-section-head h2{
    margin-bottom:14px;
}

.bayer-section-head p{
    color:var(--gray500);
    font-size:16px;
    line-height:1.7;
}

/* -- переваги: сітка карток -- */

.bayer-benefits-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
}

.bayer-benefit-card{
    background:#fff;
    border-radius:20px;
    padding:28px;
    box-shadow:var(--shadow-sm);
    text-align:center;
}

.bayer-benefit-card .bayer-benefit-icon{
    font-size:32px;
    margin-bottom:14px;
}

.bayer-benefit-card h3{
    font-size:17px;
    margin-bottom:10px;
}

.bayer-benefit-card p{
    color:var(--gray500);
    font-size:14.5px;
    line-height:1.6;
}

/* -- кроки роботи сервісу -- */

.bayer-steps{
    display:flex;
    flex-direction:column;
    gap:28px;
    max-width:820px;
    margin:0 auto;
}

.bayer-step{
    display:flex;
    gap:22px;
    background:#fff;
    border-radius:20px;
    padding:28px;
    box-shadow:var(--shadow-sm);
}

.bayer-step-number{
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:18px;
}

.bayer-step h3{
    font-size:18px;
    margin-bottom:8px;
}

.bayer-step p{
    color:var(--gray500);
    line-height:1.7;
}

.bayer-step ul{
    margin-top:10px;
    padding-left:20px;
    color:var(--gray500);
    line-height:1.9;
}

/* -- таблиця доставки -- */

.bayer-delivery-table{
    width:100%;
    border-collapse:collapse;
    margin-top:14px;
    font-size:15px;
}

.bayer-delivery-table th{
    text-align:left;
    padding:12px 16px;
    background:var(--gray100);
    font-weight:700;
    color:var(--gray900);
}

.bayer-delivery-table th:first-child{
    border-radius:12px 0 0 12px;
}

.bayer-delivery-table th:last-child{
    border-radius:0 12px 12px 0;
}

.bayer-delivery-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--gray100);
    color:var(--gray700, var(--gray900));
}

/* -- чому обирають нас: список з галочками -- */

.bayer-why-list{
    max-width:720px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.bayer-why-item{
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:#fff;
    border-radius:16px;
    padding:20px 24px;
    box-shadow:var(--shadow-sm);
}

.bayer-why-check{
    flex-shrink:0;
    width:30px;
    height:30px;
    border-radius:50%;
    background:rgba(37,99,235,.1);
    color:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}

.bayer-why-check.is-negative{
    background:rgba(239,68,68,.1);
    color:var(--danger);
}

.bayer-why-item strong{
    color:var(--gray900);
}

.bayer-why-item p{
    color:var(--gray500);
    margin:0;
}

/* -- CTA-блок зі зв'язком -- */

.bayer-cta{
    text-align:center;
    background:var(--primary);
    color:#fff;
    border-radius:30px;
    padding:56px 40px;
}

.bayer-cta h2{
    color:#fff;
    margin-bottom:14px;
}

.bayer-cta p{
    color:rgba(255,255,255,.75);
    max-width:560px;
    margin:0 auto 30px;
    line-height:1.7;
}

.bayer-cta-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
}

.bayer-cta .btn-outline{
    color:#fff;
    border-color:rgba(255,255,255,.35);
}

@media (hover:hover) and (pointer:fine){
    .bayer-cta .btn-outline:hover{
        background:rgba(255,255,255,.1);
    }
}

/* -- FAQ (акордеон, згорнутий на всіх розмірах екрану) -- */

.bayer-faq-list{
    max-width:820px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.bayer-faq-item{
    background:#fff;
    border-radius:16px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}

.bayer-faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 24px;
    text-align:left;
    font-weight:600;
    font-size:15.5px;
    color:var(--gray900);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.bayer-faq-item .accordion-chevron{
    display:block;
    flex-shrink:0;
}

.bayer-faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
}

.bayer-faq-item.open .bayer-faq-answer{
    grid-template-rows:1fr;
}

.bayer-faq-answer-inner{
    overflow:hidden;
    min-height:0;
    padding:0 24px;
    transition:padding .3s ease;
}

.bayer-faq-item.open .bayer-faq-answer-inner{
    padding:0 24px 20px;
}

.bayer-faq-answer p{
    color:var(--gray500);
    line-height:1.7;
    margin:0;
}

@media(max-width:768px){

    .bayer-hero-banner{
        padding:44px 26px;
    }

    .bayer-hero-banner h1{
        font-size:30px;
    }

    .bayer-section{
        padding:48px 0;
    }

    .bayer-step{
        flex-direction:column;
        gap:14px;
    }

    .bayer-delivery-table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    .bayer-cta{
        padding:40px 22px;
        border-radius:22px;
    }

}

/* =====================================
   ДОБІРКА (collections.json) — велике фото зліва,
   товари з гортанням справа, за зразком md-fashion.ua
===================================== */

.collections .container + .container{
    margin-top:60px;
}

.collection-widget{
    display:grid;
    grid-template-columns:minmax(260px,38%) 1fr;
    gap:40px;
    align-items:stretch;
}

.collection-image{
    border-radius:20px;
    overflow:hidden;
    background:var(--gray100);
}

/* <picture> — інлайновий елемент, тож без цього він не розтягується
   на всю висоту колонки і object-fit у вкладеного <img> нічого не дає */
/* Те саме, що й для добірки: <picture> інлайновий, і без розтягування
   вкладений <img> з object-fit не заповнює слот. Стосується всіх трьох
   способів показу акції на головній. */
.promo-hero-slide-image picture,
.brand-campaign-image picture,
.brand-teaser-image picture{
    display:block;
    width:100%;
    height:100%;
}

.collection-image picture{
    display:block;
    width:100%;
    height:100%;
}

.collection-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.collection-content{
    display:flex;
    flex-direction:column;
    gap:24px;
    min-width:0;
}

.collection-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.collection-eyebrow{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    color:var(--secondary);
    margin-bottom:6px;
}

.collection-head h2{
    margin:0;
    font-size:26px;
}

.collection-nav{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
}

.collection-page-indicator{
    font-size:13px;
    color:var(--gray500);
}

.collection-page-current{
    color:var(--gray900);
    font-weight:700;
}

.collection-arrow{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid var(--gray200);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:var(--gray900);
    transition:.2s;
}

.collection-arrow:disabled{
    opacity:.35;
    cursor:default;
}

@media (hover:hover) and (pointer:fine){
    .collection-arrow:not(:disabled):hover{
        background:var(--primary);
        border-color:var(--primary);
        color:#fff;
    }
}

.collection-products-row{
    display:grid;
    /* minmax(0,1fr), а не просто 1fr — інакше колонка не може
       стиснутися вужче за вміст (назву товару/бренд), і третя
       картка "вилазить" за межі екрана на вузьких вьюпортах —
       сторінка отримує зайвий горизонтальний скрол */
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.collection-product{
    display:flex;
    flex-direction:column;
    gap:10px;
    /* грід-колонка (.collection-products-row: grid-template-columns:
       repeat(2,minmax(0,1fr)) на мобільному) сама по собі мінімальна
       ширина ще НЕ означає, що дитина всередині теж стискається —
       у грід-елемента типовий min-width:auto, тож довгий нерозривний
       рядок ціни міг вилізти за межі своєї колонки */
    min-width:0;
}

.collection-product[hidden]{
    display:none;
}

.collection-product-image{
    position:relative;
    aspect-ratio:3/4;
    border-radius:14px;
    overflow:hidden;
    background:var(--gray100);
}

.collection-product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s;
}

@media (hover:hover) and (pointer:fine){
    .collection-product:hover .collection-product-image img{
        transform:scale(1.05);
    }
}

.collection-product-image .favorite{
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

.collection-product-info{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.collection-product-brand{
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--gray500);
    text-transform:uppercase;
}

.collection-product-title{
    font-size:13.5px;
    color:var(--gray900);
    line-height:1.4;
}

@media (hover:hover) and (pointer:fine){
    .collection-product-title:hover{
        color:var(--secondary);
    }
}

.collection-product-price{
    display:flex;
    align-items:baseline;
    /* одним рядком, без переносу — так само, як у ціни картки
       товару в каталозі: ціна + закреслена стара мають вміщатись
       у вузьку колонку добірки, не переносячи "грн" на новий рядок */
    flex-wrap:nowrap;
    gap:6px;
    margin-top:4px;
    font-size:14px;
    font-weight:700;
    color:var(--gray900);
    min-width:0;
}

.collection-product-price .price,
.collection-product-price .old-price{
    white-space:nowrap;
}

.collection-product-price .old-price{
    font-size:12px;
    font-weight:500;
    color:var(--gray400,var(--gray500));
    text-decoration:line-through;
}

@media(max-width:900px){

    .collection-widget{
        grid-template-columns:1fr;
    }

    .collection-image{
        aspect-ratio:16/9;
    }

}

@media(max-width:640px){

    .collections .container + .container{
        margin-top:40px;
    }

    .collection-products-row{
        /* 2 колонки, а не 3 — так само, як #catalogGrid на
           мобільному: на вузькому екрані 3 картки в ряд стають
           надто вузькими для назви/бренду/ціни. При 3 товарах на
           "сторінці" добірки третя картка просто переноситься на
           другий рядок */
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .collection-head h2{
        font-size:19px;
    }

    .collection-product-title{
        font-size:11.5px;
    }

    .collection-product-price{
        font-size:12.5px;
    }

    .collection-nav{
        gap:8px;
    }

    .collection-arrow{
        width:28px;
        height:28px;
        font-size:13px;
    }

}

/* =====================================
   СПЛИВАЮЧИЙ БАНЕР АКЦІЇ (promo-popup.js) —
   з'являється в кутку екрана, як на md-fashion.ua
===================================== */

.promo-popup{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:5000;
    width:280px;
    opacity:0;
    transform:translateY(24px) scale(.96);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
}

.promo-popup.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.promo-popup-link{
    display:block;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    background:var(--gray100);
}

.promo-popup-link img{
    display:block;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}

.promo-popup-close{
    position:absolute;
    top:-12px;
    right:-12px;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#fff;
    color:var(--gray900);
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,.2);
    transition:.2s;
    z-index:1;
}

.promo-popup-close:hover{
    background:var(--gray900);
    color:#fff;
    transform:rotate(90deg);
}

@media(max-width:640px){

    .promo-popup{
        left:16px;
        right:16px;
        bottom:16px;
        width:auto;
        max-width:260px;
        margin-left:auto;
    }

}


/* -------------------------
   Сторінки каталогу
   ------------------------- */

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:34px 0 8px;
}

.pagination[hidden]{ display:none; }

.pagination-page,
.pagination-arrow{
    min-width:40px;
    height:40px;
    padding:0 12px;
    border:1.5px solid var(--gray200);
    border-radius:10px;
    background:#fff;
    color:var(--gray700);
    font:600 14px/1 Inter, -apple-system, sans-serif;
    cursor:pointer;
    transition:.2s;
}

.pagination-page:hover:not(.active),
.pagination-arrow:hover:not(:disabled){
    border-color:var(--secondary);
    color:var(--secondary);
}

.pagination-page.active{
    background:var(--secondary);
    border-color:var(--secondary);
    color:#fff;
    cursor:default;
}

.pagination-arrow:disabled{
    opacity:.4;
    cursor:default;
}

.pagination-gap{
    padding:0 4px;
    color:var(--gray300);
    user-select:none;
}

@media(max-width:768px){

    .pagination-page,
    .pagination-arrow{
        min-width:36px;
        height:36px;
        padding:0 9px;
        font-size:13px;
    }

}

/* ======================================================
   Статичний блок сторінки товару
   ======================================================
   Його вставляє scripts/build-product-pages.js прямо в
   p/<slug>/index.html, а product.js замінює інтерактивною
   версією одразу після завантаження каталогу. Тобто видно
   його лише частку секунди — або постійно, якщо JS не
   виконався (робот, режим економії трафіку, збій CDN).
   Ховати його через display:none не можна: прихований текст
   Google може розцінити як спробу підсунути контент лише
   роботу. Тож просто робимо його охайним. */
.product-static-seo h1{
    font-size:26px;
    line-height:1.25;
    margin:0 0 8px;
}

.product-static-brand{
    color:#6b7280;
    margin:0 0 12px;
}

.product-static-price .price{
    font-size:24px;
    font-weight:700;
}

.product-static-price .old-price{
    margin-left:10px;
    color:#9ca3af;
    text-decoration:line-through;
}

.product-static-gallery{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:16px 0;
}

.product-static-gallery img{
    width:140px;
    height:140px;
    object-fit:cover;
    border-radius:8px;
}

.product-static-desc{
    max-width:70ch;
    line-height:1.6;
}

.product-static-specs{
    list-style:none;
    padding:0;
    margin:16px 0;
    line-height:1.8;
}

/* ======================================================
   Фото акцій на мобільному — видно ПОВНІСТЮ
   ======================================================
   Слоти під фото акції мали жорстко задану висоту:
   .brand-teaser-image — aspect-ratio:4/3, .brand-campaign-image —
   min-height:420px, .promo-hero-slide-image — min-height:280px. Разом з
   object-fit:cover це означало, що будь-яке фото інших пропорцій
   обрізається. Вертикальний кадр 1200×1500, завантажений у слот 4:3,
   показував лише вузьку смугу посередині — саме це й було видно на
   мобільній верстці.

   Тут висота слота НЕ задається, а береться від самого фото. Тобто
   кадр видно цілком, і при цьому не з'являється порожніх полів —
   на відміну від object-fit:contain у слоті фіксованої висоти.
   (Порожні поля колись були проблемою на банері сторінки акції,
   там свідомо лишили cover — див. коментар біля --banner-img-mobile.)

   Блок навмисно в кінці файлу: правила вище задають висоту в кількох
   різних медіа-запитах, і перебити їх без !important можна лише
   порядком. */
@media(max-width:768px){

    .promo-hero-slide-image,
    .brand-campaign-image,
    .brand-teaser-image,
    .promo-card-image{
        aspect-ratio:auto;
        height:auto;
        min-height:0;
        max-height:none;
    }

    .promo-hero-slide-image picture,
    .brand-campaign-image picture,
    .brand-teaser-image picture,
    .promo-card-image picture{
        height:auto;
    }

    .promo-hero-slide-image img,
    .brand-campaign-image img,
    .brand-teaser-image img,
    .promo-card-image img{
        width:100%;
        height:auto;
        object-fit:contain;
    }

    /* картка в сітці не має розтягуватись на висоту сусіда —
       інакше слот знову отримає чужу висоту */
    .brand-teaser-image,
    .brand-campaign-image{
        align-self:start;
    }

}