/* ============================================================
   PISTAR — Responsive Styles
   Mobile-first breakpoints for premium experience
   ============================================================ */

/* ---- Extra Small: < 576px ---- */
@media (max-width: 575.98px) {
    :root {
        --pi-navbar-height: 60px;
    }

    h1 { font-size: var(--pi-fs-2xl); }
    h2 { font-size: var(--pi-fs-xl); }
    h3 { font-size: var(--pi-fs-lg); }

    .pi-container { padding: 0 var(--pi-space-4); }
    .pi-section { padding: var(--pi-space-10) 0; }
    .pi-section-header { margin-bottom: var(--pi-space-8); }
    .pi-section-header h2 { font-size: var(--pi-fs-xl); }

    /* Hero — compact on small phones */
    .pi-hero { min-height: 80vh; }
    .pi-hero-content { padding: var(--pi-space-4); }
    .pi-hero-content h1 { font-size: var(--pi-fs-3xl); }
    .pi-hero-content p { font-size: var(--pi-fs-base); }
    .pi-hero-cta { flex-direction: column; align-items: center; }
    .pi-hero-cta .btn { width: 100%; max-width: 300px; }

    /* Glass Hero Banner & Popular Pieces — auto centered and perfectly aligned with mobile UI */
    .pi-glass-hero-banner,
    #piHeaderBanner,
    #piPopularPieces {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .pi-glass-hero-banner {
        padding: 1rem 0.85rem 1.75rem 0.85rem !important;
        border-radius: 22px !important;
    }

    /* Filter Tabs & Grid Switcher automatically centered with UI */
    .pi-filter-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        gap: 6px !important;
        padding: 0 4px !important;
    }

    .pi-filter-tab {
        padding: 6px 14px !important;
        font-size: 0.82rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 9999px !important;
        margin: 0 !important;
    }

    .pi-mobile-grid-toggle-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0.5rem !important;
        margin-bottom: 1.25rem !important;
        text-align: center !important;
    }

    /* Bottom nav visible */
    .pi-bottom-nav { display: block; }
    body { padding-bottom: var(--pi-bottom-nav-height); }

    /* Auth card */
    .pi-auth-card { padding: var(--pi-space-6); border-radius: var(--pi-radius-lg); }
    .pi-auth-logo h1 { font-size: var(--pi-fs-xl); }

    /* Product cards — full width */
    .pi-product-card .pi-product-actions { opacity: 1; transform: none; }

    /* Sidebar hidden on mobile */
    .pi-sidebar { transform: translateX(-100%); }
    .pi-sidebar.open { transform: translateX(0); }
    .pi-content-with-sidebar,
    .pi-main-content.pi-content-with-sidebar { 
        margin-left: 0; 
        padding: calc(var(--pi-navbar-height) + var(--pi-space-4)) var(--pi-space-4) var(--pi-space-6) !important; 
    }

    /* Tables — horizontal scroll */
    .table-responsive-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Newsletter form */
    .pi-newsletter-form { flex-direction: column; }
    .pi-newsletter { padding: var(--pi-space-8) var(--pi-space-4); }

    /* Footer */
    .pi-footer { padding: var(--pi-space-10) 0 var(--pi-space-6); }

    /* Hide desktop nav items */
    .pi-desktop-only { display: none !important; }

    /* Cart items */
    .pi-cart-item { flex-wrap: wrap; }
    .pi-cart-item-image { width: 60px; height: 45px; }
}

/* ---- Small: 576px – 767px ---- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .pi-bottom-nav { display: block; }
    body { padding-bottom: var(--pi-bottom-nav-height); }

    .pi-hero-content h1 { font-size: var(--pi-fs-4xl); }

    .pi-sidebar { transform: translateX(-100%); }
    .pi-sidebar.open { transform: translateX(0); }
    .pi-content-with-sidebar,
    .pi-main-content.pi-content-with-sidebar { 
        margin-left: 0; 
        padding: calc(var(--pi-navbar-height) + var(--pi-space-4)) var(--pi-space-4) var(--pi-space-6) !important; 
    }

    .pi-product-card .pi-product-actions { opacity: 1; transform: none; }
    .pi-desktop-only { display: none !important; }

    .pi-glass-hero-banner,
    #piHeaderBanner,
    #piPopularPieces {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 720px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .pi-glass-hero-banner {
        padding: 1.5rem 1.25rem 2.25rem 1.25rem !important;
    }
}

/* ---- Medium / Tablet: 768px – 991px ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pi-hero-content h1 { font-size: var(--pi-fs-5xl); }

    .pi-sidebar { 
        width: 220px;
    }
    .pi-content-with-sidebar,
    .pi-main-content.pi-content-with-sidebar { 
        margin-left: 220px; 
        padding: calc(var(--pi-navbar-height) + var(--pi-space-5)) var(--pi-space-5) var(--pi-space-8) !important; 
    }

    .pi-bottom-nav { display: block; }
    body { padding-bottom: var(--pi-bottom-nav-height); }

    .pi-mobile-only { display: none !important; }
}

/* ---- Large / Laptop: 992px – 1199px ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pi-hero-content h1 { font-size: var(--pi-fs-5xl); }

    .pi-bottom-nav { display: none !important; }
    body { padding-bottom: 0; }

    .pi-mobile-only { display: none !important; }
}

/* ---- Extra Large / Desktop: 1200px – 1399px ---- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .pi-hero-content h1 { font-size: var(--pi-fs-6xl); }

    .pi-bottom-nav { display: none !important; }
    body { padding-bottom: 0; }

    .pi-mobile-only { display: none !important; }
}

/* ---- XXL / Large Desktop: 1400px+ ---- */
@media (min-width: 1400px) {
    .pi-container { max-width: var(--pi-container-2xl); }

    .pi-bottom-nav { display: none !important; }
    body { padding-bottom: 0; }

    .pi-mobile-only { display: none !important; }
}

/* ---- Mobile & Tablet Navbar & Options Drawer (< 992px) ---- */
@media (max-width: 991.98px) {
    .pi-desktop-only { display: none !important; }

    .pi-navbar {
        height: var(--pi-navbar-height) !important;
    }

    .pi-navbar .navbar-toggler {
        padding: 6px 10px;
        border-radius: var(--pi-radius-md);
        background: rgba(var(--pi-primary-rgb), 0.08);
        border: 1px solid var(--pi-border-color);
        transition: all var(--pi-transition-fast);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .pi-navbar .navbar-toggler:hover,
    .pi-navbar .navbar-toggler[aria-expanded="true"] {
        background: rgba(var(--pi-primary-rgb), 0.18);
        border-color: var(--pi-primary);
    }

    #piNavItems.collapse {
        display: none;
    }

    #piNavItems.collapse.show {
        display: block !important;
        position: fixed;
        top: var(--pi-navbar-height);
        left: 0;
        right: 0;
        width: 100vw;
        max-height: calc(100vh - var(--pi-navbar-height) - var(--pi-bottom-nav-height, 60px));
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(28px) saturate(200%);
        -webkit-backdrop-filter: blur(28px) saturate(200%);
        border-bottom: 1px solid var(--pi-border-color);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
        padding: var(--pi-space-4) var(--pi-space-5) var(--pi-space-6);
        z-index: 1055;
        animation: pi-slide-down 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    [data-theme="dark"] #piNavItems.collapse.show {
        background: rgba(15, 15, 35, 0.96);
        border-bottom-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    }

    #piNavItems .navbar-nav .nav-link {
        padding: 10px 14px;
        border-radius: var(--pi-radius-md);
        font-weight: var(--pi-fw-medium);
        display: flex;
        align-items: center;
        transition: all var(--pi-transition-fast);
        color: var(--pi-text-primary);
    }

    #piNavItems .navbar-nav .nav-link:hover,
    #piNavItems .navbar-nav .nav-link.active {
        background: rgba(var(--pi-primary-rgb), 0.1);
        color: var(--pi-primary) !important;
    }

    .pi-mobile-search input {
        background: var(--pi-bg-input);
        border: 1px solid var(--pi-border-color);
        border-radius: var(--pi-radius-md);
        padding: 8px 12px 8px 36px;
        color: var(--pi-text-primary);
        font-size: var(--pi-fs-sm);
    }
}

/* ============================================================
   PRINT STYLES (Invoices)
   ============================================================ */
@media print {
    .pi-navbar, .pi-bottom-nav, .pi-sidebar, .pi-footer,
    .btn, .pi-theme-toggle, .pi-announcement-bar {
        display: none !important;
    }
    body {
        background: #FFFFFF;
        color: #000000;
        font-size: 12pt;
    }
    .pi-content-with-sidebar {
        margin-left: 0;
    }
    .pi-invoice {
        box-shadow: none;
        border: none;
    }
}