/* ================================================================
   Collier — Full responsive system
   Breakpoints: 320, 375, 414, 576, 768, 1024, 1440
   ================================================================ */

/* ——— Global CSS safety ——— */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Hero/video fill containers without breaking layout */
.hero-cinematic__media img,
.hero-cinematic__media video,
.maison-hero-slide img,
.maison-hero-slide video,
.lux-card-compact__media img,
.lux-category-card img,
.lux-gallery-item img,
.lux-insta-item img,
.lux-promo-banner img {
    display: block;
    max-width: 100%;
}

.container,
.container-fluid,
.container-maison,
section,
.row,
.page-wrapper {
    max-width: 100%;
}

/* Semantic aliases (maps to existing components) */
.hero,
.hero-cinematic,
.banner,
.lux-promo-banner,
.products-grid,
.lux-product-grid,
.maison-products-grid,
.categories-grid,
.lux-category-grid,
.gallery-grid,
.lux-gallery-rail,
.lux-insta-grid,
.footer-grid,
.footer-premium-grid {
    width: 100%;
    max-width: 100%;
}

/* Tap-friendly buttons */
.btn-luxury,
.btn-admin,
.nav-icon-btn,
.navbar-toggle,
.filter-toggle,
.filter-sheet-close,
.hero-dot,
.maison-text-link {
    min-height: 44px;
    min-width: 44px;
}

.btn-luxury {
    min-height: 48px;
    touch-action: manipulation;
}

/* Readable minimum text on mobile */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        font-size: clamp(0.9rem, 2.8vw, 1rem);
        -webkit-text-size-adjust: 100%;
    }

    .editorial-lead {
        font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important;
    }

    .maison-label {
        font-size: clamp(0.62rem, 2.5vw, 0.68rem) !important;
    }

    .hero,
    .banner,
    .hero-cinematic,
    .lux-promo-banner,
    .products-grid,
    .lux-product-grid,
    .maison-products-grid,
    .categories-grid,
    .lux-category-grid,
    .gallery-grid,
    .lux-gallery-rail,
    .lux-insta-grid,
    .footer-grid,
    .footer-premium-grid,
    .lux-split-promo {
        width: 100%;
        max-width: 100%;
    }

    /* No horizontal sliders on mobile */
    .horizontal-scroll,
    .scroll-wrapper,
    .product-scroll,
    .carousel-track,
    .slider-track {
        overflow-x: hidden !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        transform: none !important;
        scroll-snap-type: none !important;
    }

    .testimonial-stack .swiper-wrapper,
    .testimonial-swiper.testimonial-stack .swiper-wrapper {
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
    }

    .horizontal-scroll > *,
    .scroll-wrapper > *,
    .product-scroll > *,
    .carousel-track > *,
    .slider-track > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* Disable heavy effects on mobile */
    .parallax,
    .hero-parallax-layer,
    [data-parallax],
    .cinematic-grain,
    .ambient-glow {
        display: none !important;
        transform: none !important;
        background-attachment: scroll !important;
    }

    .hero-banner-video,
    .hero-cinematic__media video,
    .maison-hero-slide video {
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Hero typography */
    .hero-cinematic {
        min-height: clamp(420px, 75vh, 640px);
    }

    .hero-cinematic__content {
        width: min(100%, calc(100% - 32px));
        padding: clamp(32px, 8vw, 56px) 16px;
    }

    .hero-cinematic__content .display-title {
        font-size: clamp(1.85rem, 9vw, 2.75rem) !important;
        line-height: 1.1;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero-cinematic__content .editorial-lead {
        font-size: clamp(0.92rem, 3.8vw, 1.05rem) !important;
    }

    .hero-cinematic__actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-cinematic__actions .btn-luxury {
        width: 100%;
    }

    /* Navbar hamburger */
    .nav-desktop-menu { display: none !important; }
    .navbar-toggle { display: flex !important; }

    /* Best sellers + promo stack */
    .lux-split-promo {
        grid-template-columns: 1fr !important;
    }

    .lux-promo-banner {
        order: -1;
        min-height: 280px;
    }

    /* Gallery = grid not slider */
    .gallery-grid,
    .lux-gallery-rail {
        display: grid !important;
        overflow-x: hidden !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .lux-gallery-item--tall {
        grid-row: span 1 !important;
        aspect-ratio: 1 !important;
    }

    /* Footer stacks */
    .footer-grid,
    .footer-premium-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .footer-premium-brand,
    .footer-premium-col,
    .footer-social,
    .footer-contact li,
    .footer-payments {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Filters: bottom sheet (see mobile-performance.css) */
    .maison-filters.filter-sheet {
        display: flex !important;
    }

    .filter-toggle {
        display: inline-flex !important;
        width: 100%;
        justify-content: center;
    }

    /* Page heroes */
    .page-hero-lux {
        padding: clamp(120px, 22vw, 160px) 16px clamp(48px, 8vw, 72px);
    }

    .page-hero-lux .display-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    }
}

/* ——— 1440px: large desktop ——— */
@media (min-width: 1440px) {
    .container-maison {
        width: min(1320px, 90vw);
    }

    .lux-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .lux-category-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .footer-premium-grid {
        grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
    }
}

/* ——— 1024px: tablet landscape / small laptop ——— */
@media (max-width: 1024px) {
    .lux-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lux-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lux-gallery-rail {
        grid-template-columns: repeat(3, 1fr);
    }

    .lux-insta-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .lux-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-premium-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-premium-brand {
        grid-column: 1 / -1;
    }

    .maison-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lux-about-preview {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ——— 768px: tablet portrait ——— */
@media (max-width: 768px) {
    .lux-product-grid,
    .maison-products-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(12px, 3vw, 20px);
    }

    .categories-grid,
    .lux-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .lux-insta-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .lux-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-col-left { display: none; }

    .container-maison,
    .container-fluid.maison-nav-container {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .maison-collection-layout {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    .maison-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .maison-concierge-grid {
        grid-template-columns: 1fr !important;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .asymmetric-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ——— 576px: large phones ——— */
@media (max-width: 576px) {
    body:not(.home-page) .products-grid,
    body:not(.home-page) .lux-product-grid,
    body:not(.home-page) .maison-products-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.home-page) .categories-grid,
    body:not(.home-page) .lux-category-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.home-page) .gallery-grid,
    body:not(.home-page) .lux-gallery-rail,
    body:not(.home-page) .lux-insta-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.home-page) .lux-services__grid,
    body:not(.home-page) .values-grid,
    body:not(.home-page) .stats-grid-luxury {
        grid-template-columns: 1fr !important;
    }

    body:not(.home-page) .footer-premium-grid {
        grid-template-columns: 1fr !important;
    }

    .lux-section__head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .newsletter-input-wrap {
        flex-direction: column !important;
    }

    .newsletter-input-wrap .btn-luxury {
        width: 100%;
    }
}

/* ——— 414px: iPhone Plus / large mobile ——— */
@media (max-width: 414px) {
    .hero-cinematic__content .display-title {
        font-size: clamp(1.7rem, 8.5vw, 2.2rem) !important;
    }

    .section-title-maison {
        font-size: clamp(1.45rem, 6.5vw, 1.85rem) !important;
    }

    .btn-luxury {
        padding: 14px 20px !important;
        font-size: 0.72rem !important;
    }

    .lux-card-compact__body {
        padding: 14px 12px 18px;
    }

    .lux-card-compact__name {
        font-size: 0.95rem !important;
    }
}

/* ——— 375px: iPhone standard ——— */
@media (max-width: 375px) {
    .container-maison,
    .container-fluid.maison-nav-container {
        width: calc(100% - 24px) !important;
    }

    .hero-cinematic__content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .brand-lockup .brand-text {
        font-size: 1rem !important;
        letter-spacing: 0.12em;
    }

    .lux-section {
        padding: clamp(48px, 12vw, 72px) 0;
    }
}

/* ——— 320px: small phones ——— */
@media (max-width: 320px) {
    body {
        font-size: 0.88rem;
    }

    .hero-cinematic {
        min-height: 380px;
    }

    .hero-cinematic__content .display-title {
        font-size: 1.55rem !important;
    }

    .btn-luxury {
        font-size: 0.68rem !important;
        letter-spacing: 0.08em !important;
    }

    .lux-card-compact__price {
        font-size: 0.92rem;
    }

    .footer-premium-col h5 {
        font-size: 0.78rem;
    }

    .mobile-nav-links a span {
        font-size: 1.25rem !important;
    }
}

/* Lite mode class (set by JS on mobile) */
.lite-mode .reveal-premium,
.lite-mode .fade-in,
.lite-mode .fade-in-left,
.lite-mode .fade-in-right,
.lite-mode .fade-in-scale {
    filter: none !important;
    will-change: auto !important;
}

.lite-mode .hero-cinematic__media img,
.lite-mode .maison-hero-slide img {
    animation: none !important;
    transform: none !important;
}

.lite-mode .shimmer-btn::after {
    display: none !important;
}