/* ============================================================
   REDBOX OFFICIAL — Responsive Fixes v3.0
   Perfect Desktop → Tablet → Mobile adaptation.
   ============================================================ */

/* ============================================================
   LARGE DESKTOP (1401–1600px) — slightly tighter container
   ============================================================ */
@media (max-width: 1600px) {
    :root {
        --container: 1320px;
    }
}

/* ============================================================
   DESKTOP (1201–1400px)
   ============================================================ */
@media (max-width: 1400px) {
    :root {
        --container: 1280px;
        --space-section: 6rem;
    }
}

/* ============================================================
   TABLET LANDSCAPE (1025–1200px)
   ============================================================ */
@media (max-width: 1200px) {
    :root {
        --header-height: 80px;
        --space-section: 5rem;
        --container: 1100px;
    }

    /* Hide desktop nav, show mobile toggle */
    .header-nav { display: none; }
    .mobile-menu-toggle { display: flex; }

    /* Center the logo since the nav is gone */
    .site-header .header-container {
        grid-template-columns: 1fr auto 1fr;
    }

    /* Reduce hero size */
    .hero-slide {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3rem 1.5rem;
        text-align: left;
    }
    .hero-image { max-width: 480px; aspect-ratio: 4 / 5; }

    /* 3-col → 2-col grids */
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .flash-sale-grid { grid-template-columns: repeat(3, 1fr); }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

    /* About section: stack */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .about-image { max-width: 560px; margin: 0 auto; }

    /* Footer grid: 2 cols */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
    }
    .footer-brand { grid-column: span 2; }

    /* Blog layout */
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
}

/* ============================================================
   TABLET PORTRAIT (769–1024px)
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --header-height: 72px;
        --space-section: 4rem;
        --container: 940px;
    }

    /* Hero: simpler layout */
    .hero-slider { min-height: calc(90vh - var(--header-height)); }
    .hero-title { font-size: clamp(2.75rem, 7vw, 4rem); }
    .hero-brand-shape { font-size: clamp(8rem, 22vw, 18rem); }

    /* Product grids: 2 cols */
    .products-grid,
    .flash-sale-grid { grid-template-columns: repeat(2, 1fr); }

    /* Lookbook tiles: stack into single column */
    .lookbook-tile { grid-column: span 12 !important; aspect-ratio: 16 / 10 !important; }

    /* Instagram grid: 3 cols */
    .instagram-grid { grid-template-columns: repeat(3, 1fr); }

    /* Footer grid: 2 cols tighter */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-brand { grid-column: span 2; }

    /* Quick view modal: stacked */
    .quick-view-content { grid-template-columns: 1fr; }
    .qv-image { border-radius: var(--radius-card) var(--radius-card) 0 0; aspect-ratio: 16 / 10; }
    .qv-info { padding: 2rem; }

    /* Mini cart narrower */
    .mini-cart-widget { max-width: 380px; }

    /* CTA section: smaller */
    .cta-section::before { font-size: clamp(8rem, 18vw, 16rem); }

    /* WooCommerce single product: 2-col → 1-col */
    .woocommerce-wrapper { display: block !important; }
    .woocommerce-wrapper.has-shop-sidebar { display: block !important; }
}

/* ============================================================
   MOBILE (481–768px)
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --space-section: 3rem;
        --container: 100%;
        --radius-card: 18px;
        --radius-collection: 20px;
    }

    /* Container: tighter padding */
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }

    /* Header: hide most actions, keep essentials */
    .header-actions .header-icon-btn[aria-label="Account"] { display: none; }

    /* Hero: simplified single column */
    .hero-slider { min-height: calc(85vh - var(--header-height)); }
    .hero-slide {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.25rem;
        gap: 1.5rem;
        align-items: flex-start;
    }
    .hero-brand-shape { font-size: clamp(7rem, 32vw, 14rem); bottom: -2vw; }
    .hero-title { font-size: clamp(2.5rem, 11vw, 4rem); margin-bottom: 1rem; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 1.75rem; }
    .hero-image { max-width: 100%; aspect-ratio: 4 / 5; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 0.625rem; }
    .hero-actions .btn { width: 100%; }

    /* Section spacing tighter */
    .section-pad { padding-top: var(--space-section); padding-bottom: var(--space-section); }
    .section-header { margin-bottom: 2.5rem; }

    /* Trust grid: 1 col */
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .trust-item { padding: 0.75rem; }

    /* Categories grid: 1 col */
    .categories-grid { grid-template-columns: 1fr; gap: 1rem; }

    /* Products/flash: 2 cols (sticky on mobile) */
    .products-grid,
    .flash-sale-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .product-card-info { font-size: 0.8125rem; }
    .quick-view-btn { font-size: 0.625rem; padding: 0.625rem 0.5rem; }

    /* About stats: 3-col → 2-col */
    .about-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin: 2rem 0;
        padding-top: 1.5rem;
    }
    .about-stats strong { font-size: 1.75rem; }

    /* Lookbook: single column */
    .lookbook-tile { aspect-ratio: 4 / 5 !important; }

    /* Testimonials: 1 col */
    .testimonials-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .testimonial-card { padding: 1.75rem; }
    .testimonial-text { font-size: 1rem; }

    /* Instagram: 2 cols */
    .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

    /* FAQ: smaller summary */
    .faq-item summary { font-size: 1rem; padding: 1.25rem 0; }

    /* CTA section */
    .cta-section h2 { font-size: clamp(2rem, 7vw, 2.75rem); }

    /* Footer */
    .footer-newsletter { padding: 2.5rem 0; }
    .newsletter-inner { flex-direction: column; align-items: flex-start; }
    .newsletter-form { width: 100%; min-width: 0; }
    .footer-main { padding: 3rem 0 2rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-brand { grid-column: span 1; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 0.75rem; }

    /* Quick view: full screen */
    .quick-view-modal { padding: 0; }
    .qv-modal-content { max-height: 100vh; border-radius: 0; }
    .qv-info { padding: 1.5rem; }

    /* Mini cart: full width */
    .mini-cart-widget { max-width: 100%; }
    .mini-cart-header,
    .mini-cart-items,
    .mini-cart-footer { padding-left: 1.25rem; padding-right: 1.25rem; }

    /* Forms */
    .form-row { grid-template-columns: 1fr; }

    /* Blog: 1 col */
    .blog-grid { grid-template-columns: 1fr; gap: 2rem; }
    .blog-card-image { aspect-ratio: 16 / 10; }
    .single-post-content { font-size: 1rem; padding: 0 0.25rem; }

    /* Sticky ATC: simplified */
    .sticky-add-to-cart .container { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .sticky-atc-left { justify-content: center; }
    .sticky-atc-right .btn { width: 100%; }

    /* Floating buttons */
    .whatsapp-float { right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
    .back-to-top { right: 1rem; bottom: 4.5rem; width: 44px; height: 44px; }

    /* Shop toolbar */
    .shop-toolbar { flex-direction: column; align-items: stretch; gap: 0.75rem; }

    /* WooCommerce */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 48% !important;
        margin: 0 0 2rem 0 !important;
    }
    .woocommerce ul.products li.product:nth-child(2n+1) { clear: both; }
    .woocommerce .woocommerce-ordering { width: 100%; }
    .woocommerce .woocommerce-ordering select { width: 100%; }
}

/* ============================================================
   SMALL MOBILE (≤480px) — fine-tune
   ============================================================ */
@media (max-width: 480px) {
    :root {
        --radius-card: 16px;
        --radius-collection: 18px;
    }

    .container { padding-left: 1rem; padding-right: 1rem; }

    /* Hero title sizing */
    .hero-title { font-size: clamp(2.25rem, 12vw, 3rem); }
    .hero-subtitle { font-size: 0.9375rem; }
    .hero-actions { gap: 0.5rem; }
    .hero-actions .btn { padding: 0.875rem 1.25rem; font-size: 0.75rem; }

    /* Hero dots */
    .hero-dots { bottom: 1rem; }

    /* Section title smaller */
    .section-title { font-size: clamp(1.75rem, 7vw, 2.25rem); margin-bottom: 1rem; }
    .section-eyebrow { font-size: 0.625rem; }
    .section-desc { font-size: 0.9375rem; }

    /* Buttons: full-width when stacked */
    .btn { padding: 0.9375rem 1.25rem; font-size: 0.8125rem; }
    .btn-block { width: 100%; }

    /* Trust items: stacked icon */
    .trust-item { flex-direction: row; gap: 0.875rem; }
    .trust-icon { width: 40px; height: 40px; }
    .trust-icon svg { width: 20px; height: 20px; }

    /* About stats: 1 col */
    .about-stats { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    .about-stats strong { font-size: 1.5rem; }
    .about-stats span { font-size: 0.625rem; }

    /* Testimonials: full padding */
    .testimonial-card { padding: 1.5rem; }
    .testimonial-avatar { width: 48px; height: 48px; }

    /* Newsletter: full width */
    .newsletter-form {
        flex-direction: column;
        gap: 0.5rem;
        background: transparent;
        border: none;
        padding: 0;
    }
    .newsletter-form input {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-button);
    }
    .newsletter-form button {
        width: 100%;
        padding: 1rem;
    }

    /* Error 404 */
    .error-404-actions { flex-direction: column; align-items: stretch; }
    .error-404-actions .btn { width: 100%; }

    /* WooCommerce single product: hide some elements */
    .sticky-add-to-cart .sticky-atc-left img { width: 44px; height: 56px; }

    /* Blog card meta */
    .blog-card-meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

    /* Pagination */
    .redbox-pagination a,
    .redbox-pagination span { min-width: 36px; height: 36px; padding: 0 0.5rem; font-size: 0.75rem; }
}

/* ============================================================
   iOS SAFETY — prevent input zoom, fix 100vh
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari 100vh fix */
    .hero-slider,
    .mobile-menu-overlay,
    .quick-view-modal {
        height: 100svh;
    }
    .mobile-menu-panel {
        max-height: 100svh;
    }
}

/* Prevent iOS input zoom (font-size ≥ 16px on focus) */
@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px;
    }
}

/* iOS sticky positioning fix */
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* ============================================================
   BODY SCROLL LOCK — overlays (no position: fixed to preserve scroll)
   ============================================================ */
html:has(.mobile-menu-overlay.active),
html:has(.quick-view-modal.active),
html:has(.mini-cart-widget.active) {
    overflow: hidden;
}
body:has(.mobile-menu-overlay.active),
body:has(.quick-view-modal.active),
body:has(.mini-cart-widget.active) {
    overflow: hidden;
}
/* Fallback for browsers without :has() */
html.menu-open, html.modal-open, html.cart-open { overflow: hidden; }
body.menu-open,
body.modal-open,
body.cart-open {
    overflow: hidden;
}

/* ============================================================
   LOADING STATES — image shimmer placeholders
   ============================================================ */
.product-card-image,
.fs-image,
.category-image,
.blog-card-image,
.about-image,
.qv-image,
.mini-cart-item-image,
.hero-image,
.collection-image,
.lookbook-tile {
    background: linear-gradient(110deg, var(--color-bg-warm) 30%, var(--color-border) 50%, var(--color-bg-warm) 70%);
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}
.product-card-image:has(img:not([src=""])),
.fs-image:has(img:not([src=""])),
.category-image:has(img:not([src=""])),
.blog-card-image:has(img:not([src=""])),
.about-image:has(img:not([src=""])),
.qv-image:has(img:not([src=""])),
.mini-cart-item-image:has(img:not([src=""])),
.hero-image:has(img:not([src=""])),
.collection-image:has(img:not([src=""])),
.lookbook-tile:has(img:not([src=""])) {
    animation: none;
    background: var(--color-bg-warm);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .site-header,
    .site-footer,
    .whatsapp-float,
    .back-to-top,
    .mobile-menu-overlay,
    .search-overlay,
    .quick-view-modal,
    .sticky-add-to-cart,
    .announcement-bar,
    .hero-dots {
        display: none !important;
    }
    body { background: #fff; color: #000; }
}

/* ============================================================
   RTL SUPPORT
   ============================================================ */
[dir="rtl"] .announcement-marquee { animation-direction: reverse; }
[dir="rtl"] .mobile-menu-overlay { transform: translateX(-100%); }
[dir="rtl"] .mobile-menu-overlay.active { transform: translateX(0); }
[dir="rtl"] .mini-cart-widget { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .mini-cart-widget.active { transform: translateX(0); }
[dir="rtl"] .whatsapp-float { right: auto; left: 1rem; }
[dir="rtl"] .back-to-top { left: auto; right: 1rem; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-image,
    .announcement-marquee { animation: none !important; }
}