/* ============================================================
   RESPONSIVE UNIVERSAL — Complete Device Support
   Optimized for: Mobile, Tablet, Laptop, Desktop, Ultra-wide
   3D Background: Smooth across all devices
   ============================================================ */

:root {
    --accent: #00e5ff;
    --accent-2: #ff3da6;
    --accent-3: #2ee6a8;
    --glass: rgba(255,255,255,0.05);
    --glass-border: rgba(255,255,255,0.1);
    --header-height: 108px;
    --header-height-mobile: 96px;
}

/* ── MOBILE FIRST APPROACH ── */

/* ── Ultra-small devices (320px - 374px) ── */
@media (max-width: 374px) {
    :root {
        --header-height-mobile: 100px;
    }

    .store-header-inner {
        padding: 0.6rem 0.75rem;
        gap: 0.4rem;
    }

    .store-logo {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }

    .store-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .store-nav-link {
        font-size: 0.7rem;
        padding: 0.5rem 0.6rem;
        letter-spacing: 1px;
    }

    .page-offset {
        padding-top: 100px;
    }

    body {
        font-size: 14px;
    }

    .section-title {
        font-size: clamp(1.2rem, 4vw, 1.8rem);
    }

    .section-subtitle {
        font-size: 0.9rem;
    }
}

/* ── Small phones (375px - 480px) ── */
@media (min-width: 375px) and (max-width: 480px) {
    :root {
        --header-height-mobile: 110px;
    }

    .store-header-inner {
        padding: 0.7rem 0.9rem;
        gap: 0.5rem;
    }

    .store-logo {
        font-size: 1.3rem;
        letter-spacing: 1.5px;
    }

    .store-icon-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .store-nav-link {
        font-size: 0.75rem;
        padding: 0.55rem 0.7rem;
        letter-spacing: 1.2px;
    }

    .page-offset {
        padding-top: 110px;
    }

    body {
        font-size: 15px;
    }

    .section-title {
        font-size: clamp(1.3rem, 4.5vw, 2rem);
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

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

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-left {
        text-align: center;
    }

    .hero-cta-3d {
        flex-direction: column;
        align-items: center;
    }
}

/* ── Medium phones (481px - 600px) ── */
@media (min-width: 481px) and (max-width: 600px) {
    :root {
        --header-height-mobile: 120px;
    }

    .store-header-inner {
        padding: 0.75rem 1rem;
        gap: 0.6rem;
    }

    .store-logo {
        font-size: 1.4rem;
        letter-spacing: 1.5px;
    }

    .store-icon-btn {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }

    .store-nav-link {
        font-size: 0.78rem;
        padding: 0.6rem 0.75rem;
        letter-spacing: 1.3px;
    }

    .page-offset {
        padding-top: 120px;
    }

    body {
        font-size: 15px;
    }

    .section-title {
        font-size: clamp(1.4rem, 5vw, 2.1rem);
    }

    .section-subtitle {
        font-size: 0.98rem;
    }

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

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

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-left {
        text-align: center;
    }

    .hero-cta-3d {
        flex-direction: column;
        align-items: center;
    }

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

    .vx-grid {
        grid-template-columns: 1fr;
    }

    .jn-grid {
        grid-template-columns: 1fr;
    }

    .tst-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Large phones / Small tablets (601px - 768px) ── */
@media (min-width: 601px) and (max-width: 768px) {
    :root {
        --header-height-mobile: 130px;
    }

    .store-header-inner {
        padding: 0.8rem 1.1rem;
        gap: 0.7rem;
    }

    .store-logo {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
    }

    .store-icon-btn {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .store-nav-link {
        font-size: 0.8rem;
        padding: 0.65rem 0.8rem;
        letter-spacing: 1.4px;
    }

    .page-offset {
        padding-top: 130px;
    }

    body {
        font-size: 16px;
    }

    .section-title {
        font-size: clamp(1.5rem, 5.5vw, 2.2rem);
    }

    .section-subtitle {
        font-size: 1rem;
    }

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

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

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-left {
        text-align: center;
    }

    .hero-cta-3d {
        flex-direction: row;
        justify-content: center;
    }

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

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

    .jn-grid {
        grid-template-columns: 1fr;
    }

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

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

/* ── Tablets (769px - 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --header-height: 140px;
    }

    .store-header-inner {
        padding: 0.8rem 1.2rem;
        gap: 0.8rem;
    }

    .store-logo {
        font-size: 1.5rem;
    }

    .store-search {
        min-width: 250px;
    }

    .store-icon-btn {
        width: 42px;
        height: 42px;
    }

    .store-nav-link {
        font-size: 0.82rem;
        padding: 0.65rem 0.85rem;
    }

    .page-offset {
        padding-top: 140px;
    }

    body {
        font-size: 16px;
    }

    .section-title {
        font-size: clamp(1.6rem, 5.5vw, 2.3rem);
    }

    .section-subtitle {
        font-size: 1.02rem;
    }

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

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

    .hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 2rem;
    }

    .hero-left {
        text-align: left;
    }

    .hero-cta-3d {
        flex-direction: row;
        justify-content: flex-start;
    }

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

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

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

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

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

/* ── Laptops (1025px - 1440px) ── */
@media (min-width: 1025px) and (max-width: 1440px) {
    :root {
        --header-height: 140px;
    }

    .store-header-inner {
        padding: 0.8rem 1.25rem;
        gap: 1rem;
    }

    .store-logo {
        font-size: 1.6rem;
    }

    .store-search {
        min-width: 280px;
    }

    .store-icon-btn {
        width: 42px;
        height: 42px;
    }

    .store-nav-link {
        font-size: 0.82rem;
        padding: 0.65rem 0.9rem;
    }

    .page-offset {
        padding-top: 140px;
    }

    body {
        font-size: 16px;
    }

    .section-title {
        font-size: clamp(1.8rem, 5.5vw, 2.4rem);
    }

    .section-subtitle {
        font-size: 1.05rem;
    }

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

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

    .hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 2.5rem;
    }

    .hero-left {
        text-align: left;
    }

    .hero-cta-3d {
        flex-direction: row;
        justify-content: flex-start;
    }

    .cs-grid {
        grid-template-columns: repeat(6, 1fr);
    }

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

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

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

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

/* ── Desktops (1441px - 1920px) ── */
@media (min-width: 1441px) and (max-width: 1920px) {
    :root {
        --header-height: 140px;
    }

    .store-header-inner {
        padding: 0.8rem 1.5rem;
        gap: 1.2rem;
    }

    .store-logo {
        font-size: 1.7rem;
    }

    .store-search {
        min-width: 300px;
    }

    .store-icon-btn {
        width: 44px;
        height: 44px;
    }

    .store-nav-link {
        font-size: 0.85rem;
        padding: 0.7rem 1rem;
    }

    .page-offset {
        padding-top: 140px;
    }

    body {
        font-size: 17px;
    }

    .section-title {
        font-size: clamp(2rem, 5.5vw, 2.6rem);
    }

    .section-subtitle {
        font-size: 1.1rem;
    }

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

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

    .hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 3rem;
    }

    .hero-left {
        text-align: left;
    }

    .hero-cta-3d {
        flex-direction: row;
        justify-content: flex-start;
    }

    .cs-grid {
        grid-template-columns: repeat(6, 1fr);
    }

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

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

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

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

/* ── Ultra-wide displays (1921px+) ── */
@media (min-width: 1921px) {
    :root {
        --header-height: 150px;
    }

    .store-header-inner {
        padding: 1rem 2rem;
        gap: 1.5rem;
    }

    .store-logo {
        font-size: 1.8rem;
    }

    .store-search {
        min-width: 350px;
    }

    .store-icon-btn {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .store-nav-link {
        font-size: 0.9rem;
        padding: 0.75rem 1.1rem;
    }

    .page-offset {
        padding-top: 150px;
    }

    body {
        font-size: 18px;
    }

    .section-title {
        font-size: clamp(2.2rem, 5.5vw, 3rem);
    }

    .section-subtitle {
        font-size: 1.15rem;
    }

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

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

    .hero-grid {
        grid-template-columns: 1.3fr 0.7fr;
        gap: 3.5rem;
    }

    .cs-grid {
        grid-template-columns: repeat(6, 1fr);
    }

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

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

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

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

/* ── LANDSCAPE MODE ADJUSTMENTS ── */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --header-height-mobile: 80px;
    }

    .store-header-inner {
        padding: 0.5rem 0.8rem;
    }

    .store-logo {
        font-size: 1.1rem;
    }

    .store-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .page-offset {
        padding-top: 80px;
    }

    .section-pad {
        padding: 2rem 1.25rem;
    }

    .hero-section-3d {
        padding: 2rem 1.25rem 1.5rem;
    }
}

/* ── TOUCH DEVICE OPTIMIZATIONS ── */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .store-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-3d {
        padding: 1rem 2rem;
        min-height: 44px;
    }

    .card {
        padding: 1.5rem;
    }

    .product {
        border-radius: 20px;
    }

    /* Remove hover effects that don't work on touch */
    .store-nav-link:hover {
        background: rgba(255,255,255,0.05);
    }

    .card:hover {
        transform: none;
    }

    .product:hover {
        transform: none;
    }

    /* Add active states instead */
    .store-icon-btn:active {
        transform: scale(0.95);
    }

    .btn-3d:active {
        transform: scale(0.98);
    }
}

/* ── HIGH DPI DISPLAYS ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .store-logo {
        filter: drop-shadow(0 0 8px rgba(0,240,255,0.4));
    }

    .btn-3d {
        box-shadow: 0 10px 30px rgba(0,240,255,0.3);
    }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .store-logo {
        filter: drop-shadow(0 0 8px rgba(0,240,255,0.4));
    }
}

/* ── DARK MODE (already default) ── */
@media (prefers-color-scheme: dark) {
    body {
        background: transparent;
        color: #fff;
    }
}

/* ── LIGHT MODE FALLBACK ── */
@media (prefers-color-scheme: light) {
    body {
        background: #f5f5f5;
        color: #333;
    }

    .store-header {
        background: rgba(255,255,255,0.95);
        border-bottom-color: rgba(0,0,0,0.1);
    }

    .store-nav-link {
        color: rgba(0,0,0,0.7);
    }

    .store-nav-link:hover {
        background: rgba(0,0,0,0.05);
        color: rgba(0,0,0,0.9);
    }
}

/* ── PRINT STYLES ── */
@media print {
    .store-header,
    .store-nav,
    .store-actions,
    .site-footer,
    .preloader-3d {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    .page-offset {
        padding-top: 0;
    }
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   Covers: Shop, Cart, Checkout, Product, Auth, Orders,
   Wishlist, Compare, Blog, Content pages, Forms, Tables
   ============================================================ */

/* ── UNIVERSAL MOBILE CONTAINER PADDING ── */
@media (max-width: 900px) {
    .shop-shell, .cart-shell, .checkout-shell, .pdp-shell,
    .wish-shell, .cmp-shell, .od-shell, .track-shell,
    .ship-shell, .sw-shell, .rr-shell, .fp-shell, .rp-shell,
    .ev-shell, .ep-shell, .pf-shell, .oc-shell {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 600px) {
    .shop-shell, .cart-shell, .checkout-shell, .pdp-shell,
    .wish-shell, .cmp-shell, .od-shell, .track-shell,
    .ship-shell, .sw-shell, .rr-shell, .fp-shell, .rp-shell,
    .ev-shell, .ep-shell, .pf-shell, .oc-shell {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ── SHOP PAGE MOBILE ── */
@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr !important;
    }
    .shop-side {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 1rem !important;
    }
    .deck {
        padding: 1.75rem 0 1.5rem !important;
    }
    .deck-hint {
        display: none !important;
    }
    .sec {
        margin: 2.75rem 0 !important;
    }
    .toolbar {
        align-items: flex-start !important;
    }
    .pc-img {
        padding: 7% 8% !important;
    }
    .rewards-wrap {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 820px) {
    .shop-grid.is-list .pc-card {
        flex-direction: column !important;
    }
    .shop-grid.is-list .pc-media {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
    .shop-grid.is-list .pc-stage {
        aspect-ratio: 16 / 11 !important;
    }
    .shop-grid.is-list .pc-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .cat-grid, .band-grid {
        grid-template-columns: 1fr !important;
    }
    .shop-grid {
        grid-template-columns: 1fr !important;
        gap: 1.1rem !important;
    }
    .deck-stats {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    }
    .modal-panel {
        margin: 2.5vh auto !important;
        border-radius: 18px !important;
    }
    .rail {
        grid-auto-columns: 236px !important;
    }
    .cmp-tray {
        width: calc(100% - 1.2rem) !important;
    }
    .deck-search-btn {
        padding: 0.62rem 1rem !important;
    }
    .qv-grid {
        grid-template-columns: 1fr !important;
        padding: 1.15rem !important;
    }
}

@media (max-width: 860px) {
    .qv-grid {
        grid-template-columns: 1fr !important;
        padding: 1.15rem !important;
    }
}

@media (max-width: 1080px) {
    .shop-layout {
        grid-template-columns: 1fr !important;
    }
    .shop-side {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 1200px) {
    .deck-title {
        font-size: clamp(1.8rem, 5vw, 3.1rem) !important;
    }
}

/* ── CART PAGE MOBILE ── */
@media (max-width: 900px) {
    .cart-grid {
        grid-template-columns: 1fr !important;
    }
    .cart-summary {
        position: static !important;
    }
    .cart-particle-wrap {
        min-height: 350px !important;
    }
}

@media (max-width: 600px) {
    .cart-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .cart-hero h1 {
        font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
    }
    .cart-hero {
        padding: 2rem 1rem 1.75rem !important;
    }
    .cart-summary {
        padding: 1.25rem !important;
    }
}

/* ── CHECKOUT PAGE MOBILE ── */
@media (max-width: 900px) {
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }
    .checkout-summary {
        position: static !important;
    }
    .checkout-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .checkout-steps {
        grid-template-columns: 1fr !important;
    }
    .checkout-step {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    .checkout-step:last-child {
        border-bottom: none !important;
    }
    .checkout-form-card {
        padding: 1.25rem !important;
    }
    .checkout-actions {
        flex-direction: column !important;
    }
    .checkout-btn {
        width: 100% !important;
        text-align: center !important;
    }
    .checkout-grid > * {
        min-width: 0 !important;
    }
    .checkout-form-card,
    .checkout-summary {
        max-width: 100% !important;
    }
}

/* ── PRODUCT PAGE MOBILE ── */
@media (max-width: 1024px) {
    .pd-hero {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }
}

@media (max-width: 900px) {
    .ov-grid, .rev-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .mini-bar-name, .mini-bar-img {
        display: none !important;
    }
    .intel-panel {
        padding: 1.25rem !important;
    }
    .intel-tab {
        padding: 0.9rem 1rem !important;
    }
    .pd-gallery-thumbs {
        gap: 0.5rem !important;
    }
    .pd-info {
        padding: 0 0.5rem !important;
    }
    .pd-price-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .pd-actions {
        flex-direction: column !important;
    }
    .pd-actions .btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ── AUTH PAGES MOBILE ── */
@media (max-width: 600px) {
    .login-container, .register-container, .fp-card, .rp-card, .ev-card {
        padding: 1.5rem !important;
        margin: 0 0.5rem !important;
    }
    .login-wrapper, .register-wrapper {
        padding: 1rem !important;
    }
    .logo {
        font-size: 1.5rem !important;
    }
    h1 {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 480px) {
    .login-container, .register-container, .fp-card, .rp-card, .ev-card {
        padding: 1.25rem !important;
        border-radius: 14px !important;
    }
}

/* ── PROFILE / ACCOUNT PAGE MOBILE ── */
@media (max-width: 768px) {
    .pf-row {
        grid-template-columns: 1fr !important;
    }
    .account-container-3d {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .pf-avatar-section {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* ── ORDERS PAGE MOBILE ── */
@media (max-width: 900px) {
    .orders-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .filters-grid {
        grid-template-columns: 1fr !important;
    }
    .order-details {
        grid-template-columns: 1fr !important;
    }
    .order-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ── ORDER DETAILS MOBILE ── */
@media (max-width: 600px) {
    .od-info-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .od-table {
        font-size: 0.85rem !important;
    }
    .od-table th, .od-table td {
        padding: 0.5rem !important;
    }
}

/* ── WISHLIST PAGE MOBILE ── */
@media (max-width: 900px) {
    .wish-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .wish-toolbar-left, .wish-toolbar-right {
        justify-content: center !important;
    }
    .wish-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .wish-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .wish-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .wish-share-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── COMPARE PAGE MOBILE ── */
@media (max-width: 900px) {
    .cmp-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .cmp-toolbar-left, .cmp-toolbar-right {
        justify-content: center !important;
    }
    .cmp-cards {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .cmp-info {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .cmp-cards {
        grid-template-columns: 1fr !important;
    }
    .cmp-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── BLOG PAGE MOBILE ── */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .featured-post {
        grid-column: span 1 !important;
    }
    .blog-categories {
        gap: 0.5rem !important;
    }
    .category-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
    }
    .newsletter-form {
        flex-direction: column !important;
    }
    .blog-header h1 {
        font-size: 2rem !important;
    }
}

@media (max-width: 600px) {
    .blog-card {
        border-radius: 14px !important;
    }
    .blog-body {
        padding: 1rem !important;
    }
    .blog-card h3 {
        font-size: 0.92rem !important;
    }
}

/* ── ABOUT PAGE MOBILE ── */
@media (max-width: 900px) {
    .about-hero-3d {
        grid-template-columns: 1fr !important;
    }
    .stats-row-3d {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .stats-row-3d {
        grid-template-columns: 1fr !important;
    }
    .about-hero-3d {
        padding: 2rem 1rem !important;
    }
}

/* ── CONTACT PAGE MOBILE ── */
@media (max-width: 900px) {
    .contact-grid-3d {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .contact-form {
        padding: 1.25rem !important;
    }
}

/* ── FAQ PAGE MOBILE ── */
@media (max-width: 600px) {
    .faq-group {
        padding: 0 !important;
    }
    .faq-q {
        padding: 0.85rem 1rem !important;
        font-size: 0.88rem !important;
    }
    .faq-a-inner {
        padding: 0 1rem 1rem !important;
    }
}

/* ── HELP CENTER MOBILE ── */
@media (max-width: 768px) {
    .help-categories {
        grid-template-columns: 1fr !important;
    }
    .help-articles {
        grid-template-columns: 1fr !important;
    }
    .contact-options {
        grid-template-columns: 1fr !important;
    }
    .live-chat {
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }
}

/* ── SHIPPING PAGE MOBILE ── */
@media (max-width: 900px) {
    .ship-calc-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .ship-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ship-options {
        grid-template-columns: 1fr !important;
    }
    .ship-hero {
        padding: 2rem 1rem 1.75rem !important;
    }
}

/* ── RETURNS PAGE MOBILE ── */
@media (max-width: 768px) {
    .process-steps-3d {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .process-steps-3d {
        grid-template-columns: 1fr !important;
    }
}

/* ── RETURN REQUEST MOBILE ── */
@media (max-width: 768px) {
    .rr-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── TRACK ORDER MOBILE ── */
@media (max-width: 600px) {
    .track-info {
        grid-template-columns: 1fr 1fr !important;
    }
    .track-actions {
        flex-direction: column !important;
    }
    .track-action {
        width: 100% !important;
        text-align: center !important;
    }
    .track-hero {
        padding: 2rem 1rem 1.75rem !important;
    }
}

/* ── SIZE GUIDE MOBILE ── */
@media (max-width: 768px) {
    .size-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .size-table {
        min-width: 600px !important;
    }
}

@media (max-width: 600px) {
    .size-tabs {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .size-tab {
        flex: 1 1 calc(50% - 0.25rem) !important;
        text-align: center !important;
    }
}

/* ── GIFT CARDS MOBILE ── */
@media (max-width: 768px) {
    .gift-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .tabs-container {
        flex-direction: column !important;
        align-items: center !important;
    }
    .tab-button {
        margin: 0.5rem 0 !important;
        width: 200px !important;
    }
    .page-header h1 {
        font-size: 2rem !important;
    }
}

/* ── REWARDS MOBILE ── */
@media (max-width: 900px) {
    .tier-grid, .steps-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .tier-card {
        padding: 1.25rem 1rem !important;
    }
}

/* ── AFFILIATE MOBILE ── */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem !important;
    }
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .commission-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 600px) {
    .commission-grid {
        grid-template-columns: 1fr !important;
    }
    .calc-card {
        padding: 1.25rem !important;
    }
}

/* ── PRIVACY / TERMS / COOKIE POLICY MOBILE ── */
@media (max-width: 900px) {
    .tl-row {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    .rcard {
        flex-direction: column !important;
        gap: 0.4rem !important;
    }
    .deck {
        padding: 1.75rem 1.25rem 1.5rem !important;
    }
    .sec {
        margin: 2.75rem 0 !important;
    }
}

/* ── SUSTAINABILITY / INNOVATION / LUXURY MOBILE ── */
@media (max-width: 900px) {
    .cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
    }
    .btn-primary, .btn-secondary, .cta-buttons .btn {
        width: 100% !important;
        max-width: 300px !important;
    }
    .timeline-item {
        grid-template-columns: 1fr !important;
    }
    .timeline-item:nth-child(even) {
        direction: ltr !important;
    }
}

/* ── ACCOUNT MANAGEMENT MOBILE ── */
@media (max-width: 768px) {
    .table-header, .table-row {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .table-header {
        display: none !important;
    }
    .table-row {
        padding: 1rem !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
    }
    .table-row::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        color: #00e5ff !important;
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ── 404 PAGE MOBILE ── */
@media (max-width: 600px) {
    .error-container, .error-content, .not-found-content {
        padding: 2rem 1rem !important;
    }
    .error-code, .not-found-code {
        font-size: 4rem !important;
    }
}

/* ── ORDER SUCCESS / THANK YOU MOBILE ── */
@media (max-width: 600px) {
    .success-container, .thank-container, .order-success-wrap {
        padding: 2rem 1rem !important;
    }
    .success-card, .thank-card {
        padding: 1.5rem !important;
        border-radius: 14px !important;
    }
}

/* ── ORDER CANCEL MOBILE ── */
@media (max-width: 600px) {
    .oc-card {
        padding: 1.5rem !important;
    }
}

/* ── REFUND PAGE MOBILE ── */
@media (max-width: 768px) {
    .content-box {
        padding: 2rem !important;
    }
    .content-box h2 {
        font-size: 1.5rem !important;
    }
    .content-box p, .content-box li {
        font-size: 1rem !important;
    }
}

/* ── EMAIL PREFERENCES MOBILE ── */
@media (max-width: 600px) {
    .ep-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.8rem !important;
    }
}

/* ── SHARED WISHLIST MOBILE ── */
@media (max-width: 600px) {
    .sw-hero {
        padding: 2rem 1rem 1.75rem !important;
    }
}

/* ── ADVANCED SEARCH MOBILE ── */
@media (max-width: 768px) {
    .search-grid, .filter-grid {
        grid-template-columns: 1fr !important;
    }
    .search-results {
        grid-template-columns: 1fr !important;
    }
}

/* ── PRODUCT DETAIL (ALT) MOBILE ── */
@media (max-width: 768px) {
    .pdp-hero, .product-detail-hero {
        grid-template-columns: 1fr !important;
    }
    .pdp-gallery, .product-gallery {
        order: -1 !important;
    }
}

/* ── COMMON FORM PATTERNS MOBILE ── */
@media (max-width: 600px) {
    .field-row {
        grid-template-columns: 1fr !important;
    }
    .promo-row {
        flex-direction: column !important;
    }
    .promo-row input {
        width: 100% !important;
    }
    .promo-apply {
        width: 100% !important;
        text-align: center !important;
    }
    .cart-promo-row {
        flex-direction: column !important;
    }
    .cart-promo-input {
        width: 100% !important;
    }
    .cart-promo-btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ── COMMON TABLE PATTERNS MOBILE ── */
@media (max-width: 600px) {
    .spec-table {
        font-size: 0.85rem !important;
    }
    .spec-table th, .spec-table td {
        padding: 0.5rem !important;
    }
    .ord-card {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
    }
    .ord-card-actions {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
}

/* ── COMMON GRID PATTERNS MOBILE ── */
@media (max-width: 600px) {
    .pm-grid {
        grid-template-columns: 1fr !important;
    }
    .crosssell-grid {
        grid-template-columns: 1fr !important;
    }
    .gc-occ-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .trust-strip {
        grid-template-columns: 1fr !important;
    }
    .calc-out {
        grid-template-columns: 1fr !important;
    }
}

/* ── HERO SECTIONS MOBILE ── */
@media (max-width: 600px) {
    .cart-hero, .wish-hero, .cmp-hero, .ship-hero, .track-hero {
        padding: 2rem 1rem 1.75rem !important;
    }
    .cart-hero h1, .wish-hero h1, .cmp-hero h1, .ship-hero h1, .track-hero h1 {
        font-size: clamp(1.3rem, 6vw, 2rem) !important;
    }
    .page-intro h1 {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    }
    .page-intro p {
        font-size: 0.92rem !important;
    }
}

/* ── ANNOUNCEMENT BAR MOBILE ── */
@media (max-width: 480px) {
    .announcement-bar {
        font-size: 0.72rem !important;
        padding: 0.35rem 0.75rem !important;
    }
}

/* ── FOOTER ENHANCED MOBILE ── */
@media (max-width: 600px) {
    .footer-top {
        padding: 2.5rem 1rem 1.5rem !important;
        gap: 1.5rem !important;
    }
    .footer-bottom {
        padding: 1rem !important;
    }
    .footer-trust {
        padding: 0.85rem 1rem !important;
        gap: 0.75rem !important;
    }
    .footer-trust-item {
        font-size: 0.8rem !important;
    }
}

/* ── DOCK / FLOATING ELEMENTS MOBILE ── */
@media (max-width: 640px) {
    .dock {
        right: 0.6rem !important;
        left: 0.6rem !important;
        bottom: 0.6rem !important;
    }
    .dock-inner {
        justify-content: space-between !important;
    }
    .dock-info {
        max-width: 110px !important;
    }
}

/* ── ACCORDION / DETAILS MOBILE ── */
@media (max-width: 600px) {
    .acc-q {
        padding: 0.85rem 1rem !important;
        font-size: 0.82rem !important;
    }
    .acc-a {
        padding: 0 1rem 1rem !important;
        font-size: 0.88rem !important;
    }
    .faq-q {
        padding: 0.85rem 1rem !important;
        font-size: 0.88rem !important;
    }
    .faq-a-inner {
        padding: 0 1rem 1rem !important;
    }
}

/* ── CTA BAND MOBILE ── */
@media (max-width: 600px) {
    .cta-band {
        padding: 2rem 1rem !important;
        margin: 2rem 0.5rem 0 !important;
    }
    .cta-band h2 {
        font-size: 1.2rem !important;
    }
    .cta-band p {
        font-size: 0.9rem !important;
    }
}

/* ── MODAL / OVERLAY MOBILE ── */
@media (max-width: 600px) {
    .modal-panel, .modal-content {
        margin: 2.5vh 0.5rem !important;
        border-radius: 14px !important;
        max-height: 95vh !important;
    }
}

/* ── STICKY ELEMENTS MOBILE ── */
@media (max-width: 900px) {
    .catbar {
        top: 88px !important;
    }
}

/* ── TIMELINE / STEPS MOBILE ── */
@media (max-width: 600px) {
    .ord-timeline {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .ord-step {
        padding: 0.75rem !important;
    }
    .ord-step::after {
        display: none !important;
    }
    .ord-step-dot {
        width: 36px !important;
        height: 36px !important;
    }
    .rate-summary {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .rate-bar {
        grid-template-columns: 2rem 1fr 2.5rem !important;
    }
}

/* ── IMAGES MOBILE ── */
@media (max-width: 600px) {
    .checkout-cart-item img {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ── BUTTONS MOBILE ── */
@media (max-width: 600px) {
    .btn-3d, .btn-primary, .btn-ghost {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.85rem !important;
    }
    .pm-add {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.62rem !important;
    }
    .chip {
        padding: 0.45rem 0.85rem !important;
        font-size: 0.62rem !important;
    }
}

/* ── TEXT UTILITY MOBILE ── */
@media (max-width: 600px) {
    .sec-title {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }
    .sec-kicker {
        font-size: 0.58rem !important;
        letter-spacing: 1.8px !important;
    }
    .sec-sub {
        font-size: 0.88rem !important;
    }
    h1 {
        font-size: clamp(1.3rem, 6vw, 2rem) !important;
    }
    h2 {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    }
}

/* ── PROSE / CONTENT BLOCKS MOBILE ── */
@media (max-width: 600px) {
    .prose-block {
        padding: 0 0.25rem !important;
    }
    .prose-block h2 {
        font-size: 1.1rem !important;
    }
    .prose-block h3 {
        font-size: 0.95rem !important;
    }
    .prose-block p, .prose-block li {
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
    }
    .summary-box {
        padding: 1rem 1.25rem !important;
    }
}

/* ══ MOBILE HEADER COMPACTION — FINAL OVERRIDES ══
   Applies to every page, including pages that carry their own
   inline copy of the header CSS and pages where luxury-final.css
   is injected. High-specificity selectors win every !important
   tie so the fixed header NEVER overflows the viewport and the
   hamburger menu is always reachable on phones. */
@media (max-width: 900px) {
    .store-header .store-search { display: none !important; }
}

@media (min-width: 481px) and (max-width: 900px) {
    main.page-offset { padding-top: 108px !important; }
    .catbar { top: 104px !important; }
}

@media (min-width: 901px) and (max-width: 1920px) {
    main.page-offset { padding-top: 156px !important; }
}

@media (min-width: 1921px) {
    main.page-offset { padding-top: 168px !important; }
}

@media (max-width: 480px) {
    main.page-offset { padding-top: 96px !important; }
    .catbar { top: 92px !important; }
    #announce-msg {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .store-header .store-header-inner {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
        gap: 0.5rem !important;
    }
    .store-header .store-brand {
        min-width: 0 !important;
        gap: 0.5rem !important;
    }
    .store-header .store-actions { gap: 0.22rem !important; }
    .store-logo,
    .store-header .store-logo,
    .store-logo-text,
    .store-header .store-logo-text {
        font-size: 1.15rem !important;
        letter-spacing: 0.5px !important;
    }
    .store-header .store-actions .store-icon-btn,
    .store-header .store-mobile-toggle {
        width: 34px !important;
        height: 34px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        font-size: 0.9rem !important;
    }
    .store-header .store-actions .store-icon-btn svg,
    .store-header .store-mobile-toggle svg {
        width: 17px !important;
        height: 17px !important;
    }
}

@media (max-width: 374px) {
    .store-header .store-header-inner {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        gap: 0.35rem !important;
    }
    .store-header .store-brand { gap: 0.4rem !important; }
    .store-logo,
    .store-header .store-logo,
    .store-logo-text,
    .store-header .store-logo-text {
        font-size: 1rem !important;
        letter-spacing: 0.4px !important;
    }
    .store-header .store-actions .store-icon-btn,
    .store-header .store-mobile-toggle {
        width: 32px !important;
        height: 32px !important;
    }
    .store-header .store-actions .store-icon-btn svg,
    .store-header .store-mobile-toggle svg {
        width: 16px !important;
        height: 16px !important;
    }
    .store-header .store-actions #header-theme-btn { display: none !important; }
}

/* ════════ COMPARE TRAY MOBILE COMPACTION — FINAL OVERRIDES ════════ */
@media (max-width: 640px) {
    .cmp-tray {
        width: calc(100% - 1.2rem) !important;
    }
    .cmp-tray-inner {
        gap: 0.45rem !important;
        padding: 0.6rem 0.55rem !important;
    }
    .cmp-slots {
        min-width: 0 !important;
    }
    .cmp-slot {
        width: 44px !important;
        height: 44px !important;
    }
    .cmp-tray-actions {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 0.4rem !important;
        max-width: 100% !important;
    }
    .cmp-btn {
        padding: 0.46rem 0.62rem !important;
        font-size: 0.55rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.6px !important;
    }
}

/* ════════ PRODUCT CARDS — MOBILE COMPACTION (SHOP DECK + RAILS) ════════ */
@media (min-width: 601px) and (max-width: 820px) {
    .shop-grid,
    .shop-grid.is-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .shop-grid,
    .shop-grid.is-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.65rem !important;
    }
    .shop-grid.is-list {
        grid-template-columns: 1fr !important;
    }
    .shop-grid .pc-card,
    .shop-grid.is-compact .pc-card,
    .shop-grid.is-list .pc-card {
        contain-intrinsic-size: auto 238px !important;
        border-radius: 14px !important;
    }
    .pc-card {
        border-radius: 14px !important;
    }
    .pc-card .pc-body {
        padding: 0.55rem 0.6rem 0.65rem !important;
        gap: 0.3rem !important;
    }
    .pc-card .pc-eyebrow,
    .pc-card .pc-desc,
    .pc-card .pc-highs,
    .pc-card .pc-meter,
    .pc-card .pc-stockline {
        display: none !important;
    }
    .pc-card .pc-name {
        font-size: 0.8rem !important;
        min-height: 0 !important;
        line-height: 1.28 !important;
        -webkit-line-clamp: 2 !important;
        letter-spacing: 0.2px !important;
    }
    .pc-card .pc-cat {
        font-size: 0.58rem !important;
        letter-spacing: 0.7px !important;
    }
    .pc-card .pc-rating {
        font-size: 0.62rem !important;
    }
    .pc-card .pc-rating b {
        font-size: 0.68rem !important;
    }
    .pc-card .pc-now {
        font-size: 0.98rem !important;
    }
    .pc-card .pc-old {
        font-size: 0.66rem !important;
    }
    .pc-card .pc-savechip {
        font-size: 0.55rem !important;
        padding: 0.12rem 0.38rem !important;
    }
    .pc-card .pc-actions {
        gap: 0.3rem !important;
        padding-top: 0.24rem !important;
    }
    .pc-card .pc-quick {
        display: none !important;
    }
    .pc-card .pc-add {
        padding: 0.46rem 0.55rem !important;
        font-size: 0.58rem !important;
        letter-spacing: 0.7px !important;
        border-radius: 10px !important;
    }
    .pc-card .pc-qty button {
        width: 24px !important;
        height: 28px !important;
    }
    .pc-card .pc-qty span {
        min-width: 16px !important;
        font-size: 0.68rem !important;
    }
    .pc-card .pc-tool {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
    }
    .pc-card .pc-badge {
        font-size: 0.52rem !important;
        padding: 0.22rem 0.44rem !important;
    }
    .pc-card .pc-foot .pc-chip {
        font-size: 0.56rem !important;
        padding: 0.18rem 0.4rem !important;
    }
}
@media (max-width: 374px) {
    .shop-grid,
    .shop-grid.is-compact {
        gap: 0.5rem !important;
    }
    .pc-card .pc-rating,
    .pc-card .pc-foot .pc-chip {
        display: none !important;
    }
    .pc-card .pc-tool {
        width: 28px !important;
        height: 28px !important;
    }
    .pc-card .pc-name {
        font-size: 0.76rem !important;
    }
    .pc-card .pc-now {
        font-size: 0.9rem !important;
    }
}