/* ================================================================
   BELLIONÉ & Co — RESPONSIVE SYSTEM
   Mobile-first. Shopify-grade breakpoints.

   Breakpoints:
   xs  : 0–479px      (small phones)
   sm  : 480–767px    (large phones)
   md  : 768–1023px   (tablets)
   lg  : 1024–1279px  (small desktops / landscape tablet)
   xl  : 1280–1399px  (desktop)
   2xl : 1400px+      (wide screens)
   ================================================================ */

/* ──────────────────────────────────────────
   BASE (Mobile-first defaults — all screens)
────────────────────────────────────────── */

/* Fluid type scale */
html { font-size: 16px; }

/* Touch targets — min 44×44px (Apple HIG / WCAG) */
a, button, .bel-sz, .bel-cat-cta,
.woocommerce a.button, .woocommerce button.button { min-height: 44px; }

/* Prevent zoom on input focus (iOS) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select, textarea { font-size: 16px !important; }

/* Smooth momentum scroll on iOS */
.bel-lookbook-scroll,
.bel-mobile-menu { -webkit-overflow-scrolling: touch; }

/* ──────────────────────────────────────────
   CURSOR — hide on touch devices
────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    #bel-cursor, #bel-cursor-ring { display: none !important; }
    body { cursor: auto !important; }
    a, button { cursor: pointer !important; }
}

/* ──────────────────────────────────────────
   TOPBAR
────────────────────────────────────────── */
@media (max-width: 479px) {
    .bel-topbar {
        font-size: .55rem;
        letter-spacing: .12em;
        padding: .45rem .8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Scroll topbar on very small screens */
    .bel-topbar { overflow-x: auto; scrollbar-width: none; }
    .bel-topbar::-webkit-scrollbar { display: none; }
}

/* ──────────────────────────────────────────
   NAV / HEADER
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-nav-left { display: none !important; }
    .bel-hamburger { display: flex !important; }

    .bel-nav-wrap {
        grid-template-columns: auto 1fr auto;
        padding: .75rem 1.2rem;
    }
    .bel-nav-right { gap: 1rem; }
    .bel-nav-right > a:not(.bel-cart-link) {
        display: none; /* hide Search/Account text links on mobile */
    }
    /* Show icon-only versions instead */
    .bel-nav-right .bel-search-icon,
    .bel-nav-right .bel-account-icon { display: flex !important; }
}

@media (max-width: 479px) {
    .bel-logo-main { font-size: 1.1rem; letter-spacing: .2em; }
    .bel-logo-sub  { font-size: .42rem; }
    .bel-cart-link { padding: .4rem .7rem; font-size: .58rem; }
}

/* ──────────────────────────────────────────
   MOBILE MENU — full-screen overlay
────────────────────────────────────────── */
.bel-mobile-menu {
    display: none;
    position: fixed; inset: 0; z-index: 9500;
    background: var(--bg);
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
}
.bel-mobile-menu.open { display: flex; }

.bel-mob-menu-top {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--border2);
}
.bel-mob-menu-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem; letter-spacing: .3em;
    text-transform: uppercase; color: var(--white);
}
.bel-mobile-close {
    background: none; border: none;
    color: var(--muted); font-size: 1.2rem;
    cursor: pointer; padding: .5rem;
    line-height: 1; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
}

.bel-mob-menu-links {
    flex: 1; display: flex; flex-direction: column;
    padding: 2rem 1.4rem;
    gap: 0;
}
.bel-mob-menu-links a {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    font-style: italic;
    color: var(--cream);
    padding: .8rem 0;
    border-bottom: 1px solid var(--border2);
    display: flex; align-items: center;
    justify-content: space-between;
    transition: color .2s, padding-left .2s;
}
.bel-mob-menu-links a:hover,
.bel-mob-menu-links a:active { color: var(--gold); padding-left: .5rem; }
.bel-mob-menu-links a::after { content: '→'; font-style: normal; font-size: .8em; color: var(--muted2); }

.bel-mob-menu-bottom {
    padding: 1.5rem 1.4rem;
    border-top: 1px solid var(--border2);
    display: flex; gap: 1rem; flex-wrap: wrap;
}
.bel-mob-soc {
    font-family: 'Jost', sans-serif;
    font-size: .6rem; letter-spacing: .15em;
    text-transform: uppercase; color: var(--muted2);
    padding: .5rem 1rem;
    border: 1px solid var(--border2);
    transition: color .2s, border-color .2s;
}
.bel-mob-soc:hover { color: var(--cream); border-color: var(--maroon2); }

/* ──────────────────────────────────────────
   HERO
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-hero-body {
        padding: 7rem 1.4rem 3rem;
        align-items: flex-end;
    }
    .bel-hero-left { max-width: 100%; }
    .bel-hero-stats { gap: 1.5rem; }
}

@media (max-width: 767px) {
    .bel-hero {
        min-height: 100svh;
        /* On mobile, text is centered bottom */
    }
    .bel-hero-body {
        padding: 5rem 1.2rem 2.5rem;
        align-items: flex-end;
    }
    .bel-hero-h1 {
        font-size: clamp(2.8rem, 14vw, 5rem) !important;
    }
    .bel-hero-desc { font-size: 1rem; }
    .bel-hero-btns { gap: .8rem; }
    .bel-hero-btns .bel-btn-primary,
    .bel-hero-btns .bel-btn-outline {
        width: 100%;
        justify-content: center;
        padding: 1rem;
    }
    .bel-hero-stats {
        gap: 1.2rem;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .bel-stat-num { font-size: 1.5rem; }
    .bel-stat-label { font-size: .5rem; }
    .bel-hero-crest { display: none; } /* hide decorative crest on mobile */
    .bel-hero-scroll { padding: 1rem 1.2rem 2rem; }
}

@media (max-width: 479px) {
    .bel-hero-h1 { font-size: clamp(2.4rem, 12vw, 3.5rem) !important; }
    .bel-hero-stats { gap: .8rem; }
    .bel-stat-num { font-size: 1.3rem; }
}

/* ──────────────────────────────────────────
   MARQUEE
────────────────────────────────────────── */
@media (max-width: 479px) {
    .bel-mq-item span { font-size: .55rem; letter-spacing: .15em; }
}

/* ──────────────────────────────────────────
   SECTION GENERIC
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-section { padding: 4rem 0; }
    .bel-container { padding: 0 1.4rem; }
}
@media (max-width: 767px) {
    .bel-section { padding: 3rem 0; }
    .bel-container { padding: 0 1.1rem; }
    .bel-section-header { margin-bottom: 1.8rem; }
    .bel-section-title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
}
@media (max-width: 479px) {
    .bel-container { padding: 0 .9rem; }
}

/* ──────────────────────────────────────────
   CATEGORIES GRID
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-cats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bel-cat-item:first-child {
        grid-column: span 2;
        grid-row: auto;
        aspect-ratio: 16/7;
    }
}
@media (max-width: 767px) {
    .bel-cats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
    }
    .bel-cat-item:first-child {
        grid-column: span 2;
        aspect-ratio: 16/8;
    }
    .bel-cat-item { aspect-ratio: 3/4; }
    .bel-cat-label { font-size: .95rem; }
    .bel-cat-count { font-size: .5rem; }
    /* Always show CTA on mobile (no hover) */
    .bel-cat-cta { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 479px) {
    .bel-cats-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .bel-cat-label { font-size: .85rem; }
}

/* ──────────────────────────────────────────
   EDITORIAL
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-editorial-wrap { grid-template-columns: 1fr; }
    .bel-ed-visual { min-height: 360px; }
    .bel-ed-text { padding: 2.5rem; }
    .bel-ed-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .bel-ed-visual { min-height: 280px; }
    .bel-ed-text { padding: 1.8rem; }
    .bel-ed-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .bel-ed-features { grid-template-columns: 1fr; gap: .6rem; }
    .bel-btn-primary, .bel-btn-outline {
        width: 100%; justify-content: center;
    }
}

/* ──────────────────────────────────────────
   PRODUCT CARDS
────────────────────────────────────────── */

/* Always show quick add & wishlist on touch */
@media (hover: none) and (pointer: coarse) {
    .bel-quick-add { transform: none !important; }
    .bel-wishlist-btn { opacity: 1 !important; }
    .bel-product-card:hover .bel-product-img img { transform: none; }
}

@media (max-width: 1279px) {
    .bel-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
    .bel-products-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 767px) {
    .bel-products-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .bel-product-name { font-size: .95rem; }
    .bel-product-price { font-size: 1rem; }
    .bel-product-brand { font-size: .48rem; }
    .bel-sizes { gap: .3rem; margin-bottom: .5rem; }
    .bel-sz { font-size: .5rem; padding: .28rem .5rem; min-height: 32px; }
    .bel-btn-atc { font-size: .55rem; padding: .6rem; }
}
@media (max-width: 479px) {
    .bel-products-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}

/* WooCommerce shop grid */
@media (max-width: 1279px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: .8rem !important; }
}
@media (max-width: 479px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem !important; }
}

/* ──────────────────────────────────────────
   SHOP PAGE LAYOUT
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-shop-layout {
        grid-template-columns: 1fr;
    }
    /* Filters slide in from left as a panel */
    .bel-shop-filters {
        position: fixed !important;
        top: 0 !important; left: -100% !important;
        bottom: 0 !important; z-index: 9500 !important;
        width: min(85vw, 320px) !important;
        transition: left .35s cubic-bezier(.4,0,.2,1) !important;
        overflow-y: auto !important;
        border-right: 1px solid var(--border) !important;
        border-top: none !important;
    }
    .bel-shop-filters.open { left: 0 !important; }
    .bel-filters-backdrop {
        display: none;
        position: fixed; inset: 0; z-index: 9400;
        background: rgba(0,0,0,.5);
    }
    .bel-shop-filters.open ~ .bel-filters-backdrop { display: block; }
    .bel-filters-close { display: block !important; }
    .bel-filter-toggle { display: flex !important; }
}
@media (min-width: 1024px) {
    .bel-filter-toggle { display: none !important; }
    .bel-filters-close { display: none !important; }
}

/* ──────────────────────────────────────────
   HERITAGE STRIP
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-heritage-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 767px) {
    .bel-heritage { padding: 3rem 0; }
    .bel-heritage-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; padding: 0 1.1rem; }
    .bel-heritage-text { font-size: .58rem; }
    .bel-heritage-title { font-size: .9rem; }
}
@media (max-width: 479px) {
    .bel-heritage-grid { grid-template-columns: 1fr; }
    .bel-h-item { text-align: left; display: flex; gap: 1rem; align-items: flex-start; }
    .bel-heritage-icon { font-size: 1.1rem; margin-bottom: 0; flex-shrink: 0; margin-top: .1rem; }
}

/* ──────────────────────────────────────────
   LOOKBOOK SCROLL
────────────────────────────────────────── */
@media (max-width: 767px) {
    .bel-lookbook-scroll { gap: .7rem; }
    .bel-look-card { flex: 0 0 60vw; max-width: 220px; }
    .bel-look-title { font-size: .9rem; }
    /* Always show hover overlay on touch */
}
@media (hover: none) {
    .bel-look-hover { opacity: 0; } /* keep hidden, shown on tap */
}
@media (max-width: 479px) {
    .bel-look-card { flex: 0 0 65vw; }
}

/* ──────────────────────────────────────────
   TESTIMONIALS
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-testimonials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .bel-testimonials-grid { grid-template-columns: 1fr; }
    /* Horizontal scroll on mobile */
    .bel-testimonials-grid {
        display: flex;
        overflow-x: auto;
        gap: .8rem;
        scrollbar-width: none;
        padding-bottom: .5rem;
        cursor: grab;
        grid-template-columns: unset;
    }
    .bel-testimonials-grid::-webkit-scrollbar { display: none; }
    .bel-t-card { flex: 0 0 85vw; max-width: 340px; }
}

/* ──────────────────────────────────────────
   NEWSLETTER
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-newsletter-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 4rem 1.4rem;
    }
}
@media (max-width: 767px) {
    .bel-newsletter-inner { padding: 3rem 1.1rem; }
    .bel-nl-title { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* ──────────────────────────────────────────
   FOOTER
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 767px) {
    .bel-footer-top {
        grid-template-columns: 1fr;
        padding: 3rem 1.1rem 2.5rem;
        gap: 2rem;
    }
    /* Collapsible footer columns on mobile */
    .bel-footer-col-wrap { border-bottom: 1px solid var(--border2); }
    .bel-footer-col-title {
        display: flex; align-items: center; justify-content: space-between;
        cursor: pointer; padding-bottom: .8rem;
    }
    .bel-footer-col-title::after { content: '+'; color: var(--gold); font-size: .9rem; }
    .bel-footer-col-title.open::after { content: '−'; }
    .bel-footer-links { display: none; padding-bottom: 1rem; }
    .bel-footer-links.open { display: block; }
    /* Brand column always visible */
    .bel-footer-brand-col .bel-footer-links { display: flex; }
}
@media (max-width: 767px) {
    .bel-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.2rem 1.1rem 2rem;
    }
    .bel-payment-chips { gap: .4rem; }
    .bel-pay-chip { font-size: .48rem; padding: .2rem .55rem; }
}

/* ──────────────────────────────────────────
   SINGLE PRODUCT PAGE
────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bel-product-layout { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 767px) {
    .bel-product-page-title { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
    .bel-product-trust { gap: .6rem; }
    .bel-trust-item { font-size: .58rem; }
}

/* WC product summary stacking */
@media (max-width: 1023px) {
    .woocommerce div.product .images,
    .woocommerce div.product .summary {
        float: none !important;
        width: 100% !important;
        clear: none !important;
    }
    .woocommerce div.product {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ──────────────────────────────────────────
   CART / CHECKOUT
────────────────────────────────────────── */
@media (max-width: 767px) {
    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .woocommerce { width: 100% !important; float: none !important; }
    .woocommerce-checkout .col-1,
    .woocommerce-checkout .col-2 { float: none !important; width: 100% !important; }
    .woocommerce table.shop_table { font-size: .9rem; }
    .woocommerce table.shop_table .product-name a { font-size: .9rem; }
}

/* ──────────────────────────────────────────
   STICKY MOBILE BOTTOM BAR
   (Shopify-style: fixed cart/nav at bottom)
────────────────────────────────────────── */
.bel-mobile-bar {
    display: none;
}
@media (max-width: 767px) {
    .bel-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 800;
        background: rgba(13,11,11,.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        padding: .6rem 1rem;
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
        gap: .5rem;
    }
    .bel-mob-bar-btn {
        flex: 1;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: .2rem;
        font-family: 'Jost', sans-serif;
        font-size: .48rem; letter-spacing: .12em;
        text-transform: uppercase; color: var(--muted2);
        padding: .4rem .3rem;
        background: none; border: none;
        text-decoration: none;
        cursor: pointer;
        transition: color .2s;
        position: relative;
    }
    .bel-mob-bar-btn:hover,
    .bel-mob-bar-btn.active { color: var(--gold); }
    .bel-mob-bar-icon { font-size: 1.1rem; line-height: 1; display: block; }

    .bel-mob-bar-cart {
        flex: 1.5;
        background: var(--maroon);
        color: var(--cream) !important;
        border-radius: 0;
        font-family: 'Jost', sans-serif;
        font-size: .58rem; letter-spacing: .15em;
        text-transform: uppercase;
        display: flex; align-items: center; justify-content: center;
        gap: .5rem;
        padding: .6rem;
        border: 1px solid var(--maroon2);
        text-decoration: none;
    }
    .bel-mob-bar-cart:hover { background: var(--maroon2); color: var(--cream) !important; }
    .bel-mob-bar-count {
        background: var(--gold);
        color: var(--bg);
        width: 16px; height: 16px;
        border-radius: 50%;
        font-size: .48rem; font-weight: 600;
        display: flex; align-items: center; justify-content: center;
    }

    /* Push content up so it's not hidden behind bar */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    /* But not on checkout/cart — don't double-pad */
    .woocommerce-cart body,
    .woocommerce-checkout body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ──────────────────────────────────────────
   SWIPE HINT on lookbook (mobile)
────────────────────────────────────────── */
@media (max-width: 767px) {
    .bel-scroll-hint {
        display: flex;
        align-items: center; gap: .5rem;
        font-family: 'Jost', sans-serif;
        font-size: .55rem; letter-spacing: .15em;
        text-transform: uppercase; color: var(--muted2);
        margin-top: .8rem;
    }
    .bel-scroll-hint::before {
        content: '←→';
        color: var(--gold); font-size: .7rem;
    }
}
@media (min-width: 768px) {
    .bel-scroll-hint { display: none; }
}

/* ──────────────────────────────────────────
   SHOP HERO BANNER
────────────────────────────────────────── */
@media (max-width: 767px) {
    .bel-shop-hero .bel-container {
        padding-top: 3.5rem !important;
        padding-bottom: 2rem !important;
    }
    .bel-shop-title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
}

/* ──────────────────────────────────────────
   WC NOTICES
────────────────────────────────────────── */
@media (max-width: 767px) {
    .woocommerce-notices-wrapper {
        padding: 0 1.1rem;
    }
    .woocommerce-notices-wrapper .woocommerce-message,
    .woocommerce-notices-wrapper .woocommerce-error {
        font-size: .9rem !important;
        padding: .8rem 1rem !important;
    }
}

/* ──────────────────────────────────────────
   LARGE SCREENS (desktop enhancements)
────────────────────────────────────────── */
@media (min-width: 1400px) {
    .bel-products-grid { grid-template-columns: repeat(4, 1fr); }
    .bel-cats-grid { grid-template-columns: repeat(3, 1fr); }
    .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 1600px) {
    .bel-products-grid { grid-template-columns: repeat(5, 1fr); }
    .woocommerce ul.products { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ──────────────────────────────────────────
   PRINT
────────────────────────────────────────── */
@media print {
    #masthead, .bel-topbar, .bel-mobile-bar,
    .bel-marquee-bar, .bel-newsletter,
    footer { display: none !important; }
    body { background: white !important; color: black !important; }
    .bel-hero { min-height: auto !important; }
}

/* ──────────────────────────────────────────
   MOBILE MENU BACKDROP
────────────────────────────────────────── */
.bel-mob-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 9400;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
}
.bel-mobile-menu.open ~ .bel-mob-backdrop,
.bel-mob-backdrop.visible { display: block; }

/* Nav icon vs text toggles */
.bel-nav-icon { display: none; }
.bel-nav-text { display: inline; }
@media (max-width: 1023px) {
    .bel-nav-icon { display: inline; font-size: 1.1rem; }
    .bel-nav-text { display: none; }
}