/* ═══════════════════════════════════════════════════════════════
   AREA51 — MOBILE.CSS  (load AFTER custom.css in _Layout.cshtml)
   Covers: Home, Products, Detail, Auth, Cart, Wishlist,
           Contact, About, Profile
   ═══════════════════════════════════════════════════════════════ */

html, body {
    overflow-x: hidden;
}

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

/* ─────────────────────────────────────────────────────────────
   TABLET  ≤ 960px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {

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

    /* Hero */
    .hero-slider {
        height: 55vh;
        min-height: 380px;
        margin-bottom: 2rem;
    }

    .slide-content h1 {
        font-size: 2.4rem;
    }

    .slide-content p {
        font-size: 1rem;
        margin-bottom: 1.75rem;
    }

    .btn-hero {
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }

    .slider-btn {
        width: 50px;
        height: 50px;
    }

        .slider-btn.prev {
            left: 1.25rem;
        }

        .slider-btn.next {
            right: 1.25rem;
        }

    /* Sections */
    .products-section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
        padding-bottom: 1.25rem;
    }

        .section-header h2 {
            font-size: 2rem;
        }

    /* Products page */
    .page-header {
        padding: 1.5rem 0;
    }

    /* Detail page */
    .product-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .product-gallery {
        max-width: 520px;
        margin: 0 auto;
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr !important;
    }

    .contact-map iframe {
        height: 240px !important;
    }

    /* Profile */
    .profile-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE  ≤ 680px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 680px) {

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

    /* ── HERO ─────────────────────────────────────────── */
    .hero-slider {
        height: 52vh;
        min-height: 320px;
        margin-bottom: 1.5rem;
    }

    .slide-button-wrapper {
        justify-content: flex-start;
    }

    .btn-hero {
        padding: .85rem 1.8rem;
        font-size: .88rem;
    }

    .slider-btn {
        width: 42px;
        height: 42px;
    }

        .slider-btn.prev {
            left: .75rem;
        }

        .slider-btn.next {
            right: .75rem;
        }

    .slider-dots {
        bottom: 1rem;
        gap: .5rem;
    }

    .dot {
        width: 8px;
        height: 8px;
    }

        .dot.active {
            width: 28px;
        }

    /* ── SECTION HEADERS ──────────────────────────────── */
    .products-section {
        padding: 2rem 0;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

        .section-header h2 {
            font-size: 1.45rem;
        }

    .section-label {
        font-size: .7rem;
    }

    .section-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .btn-link {
        font-size: .82rem;
        padding: .5rem 1rem;
    }

    .arrow-btn {
        width: 36px;
        height: 36px;
    }

    /* ── PRODUCT SLIDERS (home) ───────────────────────── */
    .products-track:not(.partners-track-custom) .products-track-item {
        flex: 0 0 calc(72% - .5rem);
    }

    /* ── PRODUCTS PAGE ────────────────────────────────── */
    .page-title {
        font-size: 1.3rem !important;
    }

    .products-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .toolbar-right {
        justify-content: space-between;
        width: 100%;
    }

    .active-filters {
        flex-wrap: wrap;
        gap: 6px;
    }

    .active-filter-tag {
        font-size: .72rem;
        padding: 4px 10px;
    }

    .clear-filters {
        font-size: .72rem;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }

    /* ── PRODUCT DETAIL ───────────────────────────────── */
    .product-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .product-gallery {
        max-width: 100%;
    }

    .product-detail-title {
        font-size: 1.3rem !important;
    }

    .product-detail-price {
        font-size: 1.6rem !important;
    }

    /* Gallery thumbs — horizontal row */
    .gallery-thumbs {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
    }

    .gallery-thumb {
        flex-shrink: 0;
        width: 64px !important;
        height: 64px !important;
    }

    /* Specs */
    .product-specs-table td,
    .product-specs-table th {
        font-size: .82rem;
        padding: 8px 10px;
    }

    /* Related products slider */
    .related-products .products-track:not(.partners-track-custom) .products-track-item {
        flex: 0 0 calc(70% - .5rem);
    }

    /* ── CART ─────────────────────────────────────────── */
    .cart-layout {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Hide desktop column headers on mobile */
    .cart-items-header {
        display: none !important;
    }

    /* Stack each cart item */
    .cart-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        padding: 14px !important;
        border-bottom: 1px solid #f0f0f0;
    }

    .cart-item-img {
        width: 64px !important;
        height: 64px !important;
        flex-shrink: 0;
        border-radius: 8px;
        overflow: hidden;
    }

    .cart-item-qty {
        justify-content: flex-start !important;
    }

    .cart-item-remove {
        align-self: flex-end;
    }

    .cart-summary {
        border-radius: 12px;
        padding: 16px !important;
    }

    .cart-send-btn {
        padding: 13px;
        font-size: .9rem;
    }

    /* Order modal */
    #sendOrderModal > div {
        padding: 24px 20px !important;
        border-radius: 12px !important;
        width: 95% !important;
    }

    /* ── WISHLIST ─────────────────────────────────────── */
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .wishlist-card-img-link {
        height: 160px;
    }

    .wishlist-card-body {
        padding: 10px !important;
    }

    .wl-name {
        font-size: .78rem;
    }

    .wl-price {
        font-size: .95rem;
    }

    .wl-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .wl-cart-btn {
        font-size: .75rem;
        padding: 7px 10px;
    }

    .wl-remove-btn {
        width: 32px;
        height: 32px;
    }

    /* ── AUTH PAGES ───────────────────────────────────── */
    .auth-page {
        padding: 20px 0 32px;
        align-items: flex-start;
    }

    .auth-container {
        padding: 0 12px;
    }

    .auth-card {
        padding: 24px 18px 28px !important;
        border-radius: 12px;
    }

    .auth-title {
        font-size: 1.3rem !important;
    }

    .auth-sub {
        font-size: .85rem !important;
    }

    /* Register — first/last name side by side → stacked */
    .form-row-2 {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* OTP boxes — bigger tap targets */
    .otp-boxes {
        gap: 6px !important;
    }

    .otp-box {
        width: 42px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
    }

    .auth-steps {
        margin-bottom: 16px;
    }

    .step-label {
        font-size: .72rem;
    }

    /* ── CONTACT ──────────────────────────────────────── */
    .contact-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .contact-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .contact-card {
        padding: 12px !important;
    }

    .contact-card-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .contact-card-body h3 {
        font-size: .82rem;
    }

    .contact-card-body a,
    .contact-card-body span {
        font-size: .82rem;
    }

    .contact-map {
        margin-top: 16px;
    }

        .contact-map iframe {
            height: 220px !important;
        }

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

    .form-submit {
        width: 100%;
        padding: 13px;
    }

    /* ── ABOUT ────────────────────────────────────────── */
    .ab-hero {
        grid-template-columns: 1fr !important;
        padding: 28px 18px !important;
        gap: 20px !important;
    }

    .ab-hero-badge {
        display: none !important;
    }

    .ab-hero-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    .ab-hero-desc {
        font-size: .85rem !important;
    }

    .ab-hero-stats {
        gap: 16px !important;
        flex-wrap: wrap;
    }

    .ab-stat strong {
        font-size: 1.4rem !important;
    }

    .ab-services {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ab-service-card {
        padding: 18px !important;
    }

    .ab-why {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ab-why-left {
        padding: 24px 20px !important;
    }

    .ab-cta {
        flex-direction: column !important;
        padding: 28px 18px !important;
        gap: 18px !important;
        text-align: center;
    }

    .ab-cta-title {
        font-size: 1.2rem !important;
    }

    .ab-cta-btns {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .ab-btn-white,
    .ab-btn-outline {
        text-align: center;
        width: 100%;
    }

    /* ── PROFILE ──────────────────────────────────────── */
    .profile-page {
        padding: 1.5rem 0;
    }

    .profile-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .profile-card {
        padding: 20px !important;
    }

    .profile-avatar {
        width: 72px;
        height: 72px;
        font-size: 1.6rem;
    }

    .profile-name {
        font-size: 1.1rem;
    }

    .loyalty-card {
        padding: 16px !important;
    }

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

    .orders-panel {
        padding: 16px !important;
    }

    .op-card {
        padding: 12px !important;
    }

    .op-card-top {
        flex-wrap: wrap;
        gap: 6px;
    }

    .op-id {
        font-size: .82rem;
    }

    /* ── SHARED UI ────────────────────────────────────── */
    .breadcrumb {
        font-size: .72rem;
        flex-wrap: wrap;
        gap: 3px;
    }

    .static-page-header {
        padding: 1.5rem 0;
    }

    .static-page {
        padding: 2rem 0;
    }

    /* YouTube banner — hide on mobile */
    .yt-banner-wrap {
        display: none;
    }

    /* ── HOME — PROMO BANNER ──────────────────────────── */
    .promo-banner {
        height: auto !important;
        padding: 28px 0 !important;
    }

    .promo-content {
        padding: 0 18px !important;
        gap: 10px;
    }

    .promo-title {
        font-size: clamp(22px, 7vw, 36px) !important;
    }

    .promo-deco {
        display: none !important;
    }

    /* ── HOME — CAMPING BANNER ────────────────────────── */
    .banner2 {
        min-height: 260px !important;
        padding: 32px 0 !important;
    }

    .banner2-content {
        padding: 0 18px !important;
    }

    .banner2-title {
        font-size: clamp(26px, 8vw, 44px) !important;
        white-space: normal !important;
    }

    /* ── HOME — LOYALTY STRIP ─────────────────────────── */
    .banner3 {
        height: 120px !important;
    }

    .banner3-content {
        padding: 0 18px !important;
    }

    .banner3-title {
        font-size: 15px !important;
    }

    .banner3-ticker span {
        font-size: 11px;
    }

    /* ── HOME — PROJECTS CAROUSEL ─────────────────────── */
    .proj-carousel {
        height: auto !important;
        perspective: none !important;
    }

    .proj-slide {
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        display: none;
    }

        .proj-slide.active {
            display: block !important;
        }

    .proj-slide-inner {
        flex-direction: column !important;
        height: auto !important;
    }

    .proj-slide-imgs {
        width: 100% !important;
        height: 200px !important;
    }

        .proj-slide-imgs .proj-slide-img:nth-child(n+2) {
            display: none;
        }

    .proj-slide-info {
        padding: 16px 14px !important;
    }

    .proj-slide-title {
        font-size: 1rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   SMALL PHONE  ≤ 400px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {

    .hero-slider {
        height: 46vh;
        min-height: 260px;
    }

    .slide-content h1 {
        font-size: 1.35rem;
    }

    .btn-hero {
        padding: .75rem 1.5rem;
        font-size: .82rem;
    }

    .products-track:not(.partners-track-custom) .products-track-item {
        flex: 0 0 calc(88% - .5rem);
    }

    .section-header h2 {
        font-size: 1.2rem;
    }

    .prd-card-img-wrap {
        height: 160px;
    }

    /* Cart */
    .cart-item-img {
        width: 52px !important;
        height: 52px !important;
    }

    /* Wishlist — single column */
    .wishlist-grid {
        grid-template-columns: 1fr !important;
    }

    /* OTP — slightly smaller */
    .otp-box {
        width: 36px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    /* Contact info cards — single column */
    .contact-cards {
        grid-template-columns: 1fr !important;
    }

    /* Auth */
    .auth-card {
        padding: 20px 14px 24px !important;
    }

    /* About stats stacked */
    .ab-hero-stats {
        flex-direction: column;
        gap: 10px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   HEADER  ≤ 520px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {

    .header-main-content {
        height: 60px !important;
        padding: 0 1rem !important;
    }

    .hd-logo-img {
        height: 44px !important;
    }

    .hd-action-btn {
        width: 36px !important;
        height: 36px !important;
    }

        .hd-action-btn svg {
            width: 18px !important;
            height: 18px !important;
        }

    .hd-lang-switcher {
        gap: 2px;
    }

    .hd-lang-btn {
        padding: 3px 6px !important;
        font-size: .68rem !important;
    }

    .hd-search-form {
        padding: 0 1rem !important;
    }

    .hd-search-submit {
        padding: 0 14px !important;
        font-size: .78rem !important;
    }

    .hd-mobile-link {
        padding: 15px 20px;
        font-size: .92rem;
    }

    .hd-mobile-sub {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    /* Mobile language row */
    .hd-mobile-lang-row {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    .hd-mobile-lang-btn {
        flex: 1;
        text-align: center;
        padding: 9px 0;
        font-size: .8rem;
        font-weight: 700;
        background: #f3f4f6;
        border: 1.5px solid #e5e7eb;
        border-radius: 6px;
        cursor: pointer;
        color: #374151;
        font-family: inherit;
        transition: all .15s;
    }

        .hd-mobile-lang-btn.active {
            background: #dc2626;
            color: #fff;
            border-color: #dc2626;
        }
}

/* ─────────────────────────────────────────────────────────────
   TOUCH DEVICES — fix hover-only effects
   ───────────────────────────────────────────────────────────── */
@media (hover: none) {

    /* Wishlist btn always visible */
    .prd-wish {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    /* No lift on card tap */
    .prd-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
    }

    .product-card:hover {
        transform: none !important;
    }

    .partner-logo:hover {
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   PRODUCTS SIDEBAR — correct padding when stacked
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .products-main {
        padding: 16px 0 40px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   SLIDESHOW — fix text clipping caused by slideInLeft animation
   Root cause: translateX(-100px) + overflow:hidden on hero-slider
   clips the right edge of text during animation on ALL screens
   ───────────────────────────────────────────────────────────── */

/* Kill the sliding animation on ALL screens — it causes clipping */
.slide-content,
.slide-content h1,
.slide-content p,
.btn-hero {
    animation: none !important;
    transform: none !important;
}

/* Simple fade-in instead — no horizontal movement */
.slide.active .slide-content {
    animation: slideContentFade .6s ease both .2s !important;
}

@keyframes slideContentFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────────
   SLIDESHOW — mobile layout fixes  ≤ 960px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .slide-content {
        animation: none !important;
        transform: none !important;
    }
}

@media (max-width: 680px) {
    /* Full width content, safe padding both sides */
    .slide-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 20px !important;
        text-align: left !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .slide-content-wrapper {
        padding: 0 !important;
        overflow: visible !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .slide-content h1 {
        font-size: 1.65rem !important;
        line-height: 1.25 !important;
        margin-bottom: .75rem !important;
        padding: 0.05em 0 0.3em 0 !important;
        overflow: visible !important;
        width: 100% !important;
        display: block !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        box-decoration-break: clone !important;
        -webkit-box-decoration-break: clone !important;
        word-break: break-word !important;
    }

    .slide-content p {
        font-size: .88rem !important;
        margin-bottom: 1.25rem !important;
        word-break: break-word !important;
    }

    .slide-button-wrapper {
        justify-content: flex-start !important;
    }
}

@media (max-width: 400px) {
    .slide-content {
        padding: 0 16px !important;
    }

        .slide-content h1 {
            font-size: 1.35rem !important;
        }
}

/* ─────────────────────────────────────────────────────────────
   ADMIN — Orders table overflow fix
   ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {

    /* Make admin tables horizontally scrollable */
    .admin-table-wrap,
    .admin-card .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 700px; /* table keeps its width, container scrolls */
    }

    /* Admin orders specific */
    .orders-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Admin card padding reduce */
    .admin-card {
        border-radius: 10px;
    }

    .admin-page-header {
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 680px) {

    /* Admin sidebar — hide on mobile, show toggle */
    .admin-layout {
        grid-template-columns: 1fr !important;
    }

    /* Admin stats grid */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 14px !important;
    }

    .stat-value {
        font-size: 1.4rem !important;
    }

    /* Admin toolbar */
    .admin-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* All admin tables — scroll */
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 640px;
        font-size: .8rem;
    }

        .admin-table th,
        .admin-table td {
            padding: 10px 12px !important;
            white-space: nowrap;
        }

    /* Admin modal — full width */
    .admin-modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Admin form */
    .admin-form-row-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   PRODUCT DETAIL — Reviews section  ≤ 680px
   (reviews-layout is defined inline in Detail.cshtml)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 680px) {

    /* Reviews layout — stack */
    .reviews-section {
        padding: 32px 0 48px;
    }

    .reviews-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Stats col compact */
    .reviews-stats-col {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .rev-avg-wrap {
        text-align: left;
        flex-shrink: 0;
    }

    .rev-avg-num {
        font-size: 2.4rem !important;
    }

    .rev-bars {
        flex: 1;
    }

    /* Reviews header — stack */
    .reviews-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

    .btn-write-review {
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    /* Review form */
    .review-form-card {
        padding: 16px !important;
    }

    .star-pick {
        font-size: 1.5rem !important;
    }

    .rev-form-actions {
        flex-direction: column;
    }

    .btn-rev-submit,
    .btn-rev-cancel {
        width: 100%;
        padding: 11px;
    }

    /* Trust badges — wrap */
    .pd-trust {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .pd-trust-item {
        font-size: .8rem;
    }

    /* Purchase row — stack on very small */
    .pd-purchase {
        flex-direction: column;
        gap: 12px;
    }

    .pd-add-btn {
        width: 100% !important;
        justify-content: center;
    }

    /* Specs section */
    .pd-specs-section {
        padding: 20px 0 !important;
    }

    .pd-specs-title {
        font-size: 1.1rem !important;
    }

    .pd-spec-row {
        grid-template-columns: 1fr 1fr !important;
        padding: 10px 12px !important;
        font-size: .82rem !important;
    }

    /* Thumbs — horizontal scroll */
    .pd-thumbs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 4px;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .pd-thumb {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0;
    }

    /* Grid padding on mobile */
    .pd-grid {
        padding: 16px !important;
        gap: 16px !important;
    }

    .pd-title {
        font-size: 1.2rem !important;
    }

    .pd-price-main {
        font-size: 1.6rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   SEARCH BUTTON FIX — sidebar search icon alignment
   ───────────────────────────────────────────────────────────── */
.sb-search button {
    height: auto !important;
    align-self: stretch !important;
    min-height: unset !important;
}

/* Pagination tap targets */
@media (max-width: 680px) {
    .pagination-number,
    .pagination-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
    }
}




/* ═══════════════════════════════════════════════════════════════
   ADMIN — Products page  (image/video upload grids)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

    /* Image preview grid: 3-col → 2-col */
    #existingImagesGrid,
    #imgPreviewItems {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Video grid: 2-col → 1-col */
    #existingVideosGrid,
    #videoUploadWrap {
        grid-template-columns: 1fr !important;
    }

    /* Attribute row: fixed 4-col → stacked */
    .attr-row-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* Product form tabs — scroll horizontally */
    .admin-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 4px;
    }

    .admin-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: .75rem;
        padding: 8px 12px !important;
    }

    /* Product search toolbar */
    .admin-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

        .admin-toolbar input[type="text"],
        .admin-toolbar input[type="search"],
        .admin-toolbar select {
            width: 100% !important;
        }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — PopularProducts  (pop-grid 2-col → 1-col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pop-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — Categories page  (attr row inside modal)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Category attr row: 3-col → 1-col */
    .cat-attr-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Category modal */
    #catModal .admin-modal,
    #catEditModal .admin-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — Users page  (table overflow + action buttons)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .users-table-wrap,
    .admin-card .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    /* User action buttons — icon-only on very small */
    .user-action-btn span {
        display: none;
    }

    .user-action-btn {
        padding: 6px !important;
        min-width: 34px;
        justify-content: center;
    }

    /* User edit modal */
    #userEditModal .admin-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 88vh;
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — Banners & Partners pages
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .banners-grid,
    .partners-grid {
        grid-template-columns: 1fr !important;
    }

    .banner-card,
    .partner-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .banner-card-img,
    .partner-logo-preview {
        width: 100% !important;
        max-width: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — Topbar  (shrink on small screens)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .topbar {
        padding: 0 12px !important;
        height: 52px !important;
    }

    .topbar-title {
        font-size: .85rem !important;
    }

    .admin-content {
        padding: 12px 10px !important;
    }

    /* Admin page header — stack title & button */
    .admin-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .admin-page-title {
        font-size: 1.1rem !important;
    }

    /* Stats grid — single column */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HOME — New hero section  (`.hero` new design)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hero {
        min-height: 60vh !important;
    }

    .hero-title {
        font-size: clamp(1.6rem, 6vw, 2.8rem) !important;
        line-height: 1.15 !important;
    }

    .hero-subtitle {
        font-size: .9rem !important;
    }

    .hero-actions {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 10px !important;
    }

    .hero-counter {
        font-size: 2.5rem !important;
    }

    .hero-nav-btns {
        gap: 8px !important;
    }

    .hero-nav-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 480px) {
    .hero-tag {
        font-size: .65rem !important;
        padding: 5px 10px !important;
    }

    .hero-dots {
        gap: 6px;
        bottom: 16px !important;
    }

    .hero-dot {
        width: 7px !important;
        height: 7px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HOME — HP product cards  (.hp-prod-card) — 4-col → 2-col → 1-col
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hp-prod-track {
        gap: 12px !important;
    }

    .hp-prod-card {
        min-width: 200px !important;
    }
}

@media (max-width: 480px) {
    .hp-prod-card {
        min-width: 160px !important;
    }

    .hp-prod-img-wrap {
        height: 150px !important;
    }

    .hp-prod-name {
        font-size: .8rem !important;
    }

    .hp-prod-price {
        font-size: .95rem !important;
    }

    .hp-prod-btn-cart {
        font-size: .72rem !important;
        padding: 8px 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HOME — Services / Benefits / Stats sections
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hp-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .hp-benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .hp-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .hp-services-grid,
    .hp-benefits-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-service-card,
    .hp-benefit-card {
        padding: 16px !important;
    }

    .hp-section-title {
        font-size: 1.3rem !important;
    }

    .hp-stat-num {
        font-size: 1.8rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HOME — Loyalty / Camping / Projects banners  (inline styles fix)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Projects section header */
    .proj-section-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Loyalty tier strip — horizontal scroll if needed */
    .loyalty-tiers-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 6px;
    }

    .loyalty-tier-card {
        flex-shrink: 0;
        min-width: 130px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCTS PAGE — grid layout  (3/4-col → 2-col → 1-col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 360px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE — Orders panel inner items
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .op-items-grid {
        grid-template-columns: 1fr !important;
    }

    .op-item {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .op-item-img {
        width: 52px !important;
        height: 52px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL — make <select> and <input> 100% wide on small screens
   so they never overflow their container
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="number"],
    textarea {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL — prevent fixed-width inline elements from causing
   horizontal scroll (last-resort safety net)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .container {
        overflow-x: clip;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PROFILE — inline grid (first/last name row)
   Cannot target inline style, so we use the wrapper selector
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* The edit profile name row uses inline style grid 1fr 1fr.
       We override via the parent container and force children to stack. */
    #editSection > div > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Profile loyalty card tier grid 2-col → 1-col */
    .lc-tiers {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CART — inline grid-template-columns on cart-item rows
   Override via container width constraint
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    /* Cart item rows — the inline grid col def is too wide for mobile.
       Force flex column so all columns stack vertically. */
    .cart-item[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Cart items header — hide entirely (labels meaningless when stacked) */
    .cart-items-header[style*="grid-template-columns"] {
        display: none !important;
    }

    /* Cart layout wrapper */
    .cart-layout[style*="display:grid"],
    .cart-layout[style*="display: grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Cart summary — full width */
    .cart-summary {
        width: 100% !important;
    }

    /* Cart quantity row — left-align */
    .cart-item-qty,
    .cart-qty-wrap {
        justify-content: flex-start !important;
    }
}



/* ═══════════════════════════════════════════════════════════════
   HEADER — actions area shrink on very small screens
   (hd-lang-switcher can be hidden if screen too narrow)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .hd-lang-switcher {
        display: none !important;
    }

    /* Reduce action button sizes */
    .hd-action-btn {
        width: 34px !important;
        height: 34px !important;
    }

    .hd-logo-img {
        height: 32px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PAGE — product add-to-cart row + qty selector
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .pd-qty-row,
    .qty-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .pd-qty-selector,
    .qty-selector {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* Compatibility tab — car filter dropdowns stack */
    .compat-filter-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

        .compat-filter-row select {
            width: 100% !important;
        }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — Stats overflow on small screens
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
    .ab-hero-stats {
        flex-wrap: wrap !important;
        gap: 14px !important;
    }

    .ab-stat {
        flex: 0 0 calc(50% - 7px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS / MESSAGES — admin pages
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    /* Review card — actions wrap */
    .review-card-actions,
    .rev-admin-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Messages — list + detail stack */
    .messages-layout {
        grid-template-columns: 1fr !important;
    }

    .messages-list {
        max-height: 280px;
        overflow-y: auto;
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Camping page admin */
    .camping-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SAFE SCROLL — no horizontal overflow anywhere
   ═══════════════════════════════════════════════════════════════ */
html {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   FIX 1 — LOYALTY BANNER (banner3) — text overflow on mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .banner3 {
        height: auto !important;
        min-height: 120px;
        padding: 20px 0;
    }

    .banner3-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 16px !important;
        gap: 12px !important;
    }

    .banner3-left {
        width: 100%;
    }

    .banner3-eyebrow {
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }

    .banner3-title {
        font-size: 14px !important;
        white-space: normal !important;
        word-break: break-word;
    }

    /* The sub paragraph with tier thresholds */
    .banner3-content p {
        font-size: .78rem !important;
        line-height: 1.4 !important;
        word-break: break-word;
    }

        .banner3-content p span {
            font-size: .72rem !important;
            word-spacing: -1px;
        }

    .banner3-btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
        align-self: flex-start;
    }

    /* Ticker — slow it down so it's readable on small screens */
    .banner3-ticker {
        animation-duration: 18s !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 2 — PROJECTS CAROUSEL — dots clipped + section padding
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .proj-carousel-section {
        padding: 40px 0 48px !important;
        /* overflow must NOT be hidden — dots live outside carousel */
        overflow: visible !important;
    }

        /* Section header on dark bg — ensure it's visible */
        .proj-carousel-section .section-header {
            padding-bottom: 16px !important;
        }

    /* Dots — always visible, enough tap target */
    .proj-dots {
        margin-top: 16px !important;
        gap: 10px !important;
    }

    .proj-dot {
        width: 10px !important;
        height: 10px !important;
        min-width: 10px;
        /* Larger tap target via padding trick */
        padding: 6px !important;
        box-sizing: content-box !important;
    }

        .proj-dot.active {
            width: 28px !important;
            border-radius: 5px !important;
        }

    /* Slide info padding */
    .proj-slide-info {
        padding: 16px !important;
        gap: 8px !important;
    }

    .proj-slide-title {
        font-size: 1rem !important;
    }

    .proj-slide-work {
        font-size: .82rem !important;
    }
}



/* ═══════════════════════════════════════════════════════════════
   FIX 4 — ADMIN BANNERS — JS-rendered slide/banner rows
   The rows are inline-flex with fixed children — need to stack
   on mobile since we can't change the JS template directly
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Target the JS-rendered slide rows (children of #slidesWrap) */
    #slidesWrap > div {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px !important;
    }

        /* Slide number circle — keep small */
        #slidesWrap > div > div:first-child {
            width: 28px !important;
            height: 28px !important;
            font-size: .75rem !important;
        }

        /* Slide thumbnail */
        #slidesWrap > div > div:nth-child(2) {
            width: 72px !important;
            height: 48px !important;
            border-radius: 8px !important;
        }

        /* Slide info text — full width below thumb */
        #slidesWrap > div > div:nth-child(3) {
            flex: 1 1 100% !important;
            min-width: 0 !important;
            order: 4;
        }

        /* Action buttons — wrap to new row */
        #slidesWrap > div > div:last-child {
            flex: 1 1 100% !important;
            display: flex !important;
            gap: 6px !important;
            order: 5;
        }

            /* Action buttons within — full width */
            #slidesWrap > div > div:last-child button {
                flex: 1 !important;
                justify-content: center !important;
                font-size: .75rem !important;
                padding: 8px 10px !important;
            }

    /* Banner rows (#bannersWrap children) */
    #bannersWrap > div {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px !important;
    }

        /* Banner color preview — shrink */
        #bannersWrap > div > div:first-child {
            width: 72px !important;
            height: 56px !important;
            border-radius: 8px 0 0 8px;
        }

        /* Banner info — full width */
        #bannersWrap > div > div:nth-child(2) {
            flex: 1 1 calc(100% - 88px) !important;
            min-width: 0 !important;
            padding: 0 !important;
        }

            /* Banner info subtitle — allow wrap */
            #bannersWrap > div > div:nth-child(2) > div:nth-child(2) {
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: unset !important;
            }

        /* Banner actions (status + edit button) — new row */
        #bannersWrap > div > div:last-child {
            flex: 1 1 100% !important;
            padding-right: 0 !important;
            justify-content: space-between !important;
        }

            /* Edit button — grow to fill */
            #bannersWrap > div > div:last-child button {
                flex: 1 !important;
                justify-content: center !important;
                font-size: .78rem !important;
            }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 5 — PRODUCT DETAIL — SKU / stock badge overflow
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* SKU line — wrap if needed */
    .pd-sku,
    .product-sku,
    [class*="sku"] {
        font-size: .72rem !important;
        word-break: break-all;
        white-space: normal !important;
    }

    /* Stock badge */
    .pd-stock,
    .product-stock,
    .stock-badge {
        font-size: .75rem !important;
        white-space: normal !important;
    }

    /* Gallery thumbs — ensure horizontal scroll works */
    .pd-thumbs,
    .gallery-thumbs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
        padding-bottom: 6px;
        scrollbar-width: none; /* hide scrollbar on mobile */
    }

        .pd-thumbs::-webkit-scrollbar,
        .gallery-thumbs::-webkit-scrollbar {
            display: none;
        }

    .pd-thumb,
    .gallery-thumb {
        flex-shrink: 0 !important;
        width: 56px !important;
        height: 56px !important;
    }

    /* Discount badge */
    .pd-discount-badge,
    .discount-badge,
    .product-badge {
        font-size: .7rem !important;
        padding: 3px 8px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN ORDERS — correct fix
   Target: #ordersTableWrap (the actual render container)
   The .order-row CSS grid is 7 fixed columns — must scroll horiz
   ═══════════════════════════════════════════════════════════════ */

/* Always apply scroll on #ordersTableWrap — even on tablet */
#ordersTableWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Prevent the card from expanding past viewport */
    max-width: 100%;
}

.order-row,
.order-row-head {
    /* Let the grid rows be as wide as they need — wrapper scrolls */
    min-width: 700px;
}

/* Stats row: 3-col → 2-col → 1-col */
@media (max-width: 900px) {
    #ordersStats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    #ordersStats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Toolbar — stack on small screens */
    #ordersFilter,
    .orders-filter-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

        #ordersFilter input,
        #ordersFilter select,
        .orders-filter-row input,
        .orders-filter-row select {
            width: 100% !important;
        }
}



/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE  (orientation:landscape + max-height:500px)
   Targets rotated phones only — NOT tablets
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   PUBLIC SITE — landscape
   ──────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {

    /* Header — slimmer */
    .header-main-content,
    .hd-main-inner {
        height: 50px !important;
    }

    .hd-logo-img {
        height: 28px !important;
    }

    /* Hero — shorter */
    .hero-slider {
        height: 54vh !important;
        min-height: 200px !important;
        margin-bottom: 1.25rem !important;
    }

    .hero {
        min-height: 54vh !important;
    }

    .hero-title {
        font-size: clamp(1.2rem, 3.5vw, 2rem) !important;
    }

    .slide-content h1 {
        font-size: clamp(1.1rem, 3vw, 1.8rem) !important;
        margin-bottom: .4rem !important;
    }

    .slide-content p {
        font-size: .8rem !important;
        margin-bottom: .8rem !important;
    }

    /* Sections — less vertical padding */
    .products-section,
    .hp-section,
    .proj-carousel-section,
    .static-page,
    .about-page {
        padding: 1.5rem 0 !important;
    }

    /* Products grid — use horizontal space */
    .products-grid,
    .prd-grid-new {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    /* Product detail — restore 2-col */
    .product-detail-layout,
    .pd-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* Cart — restore side-by-side */
    .cart-layout {
        display: grid !important;
        grid-template-columns: 1fr 300px !important;
        gap: 16px !important;
    }

    .cart-item[style*="grid-template-columns"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* Wishlist — 3 col */
    .wishlist-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Profile — restore sidebar */
    .profile-grid {
        grid-template-columns: 280px 1fr !important;
    }

    /* About — restore 2-col */
    .ab-hero {
        grid-template-columns: 1fr 240px !important;
        padding: 24px 28px !important;
        gap: 20px !important;
    }

    /* Contact — restore 2-col */
    .contact-layout {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Loyalty banner — compact horizontal */
    .banner3 {
        height: 90px !important;
        min-height: 90px !important;
    }

    .banner3-content {
        flex-direction: row !important;
        align-items: center !important;
        padding: 0 20px !important;
        gap: 16px !important;
    }

    .banner3-title {
        font-size: 13px !important;
    }

    /* Projects carousel — shorter */
    .proj-carousel {
        height: 240px !important;
    }

    .proj-carousel-section {
        padding: 28px 0 !important;
    }

    /* Auth — compact */
    .auth-page {
        padding: 8px 0 16px !important;
    }

    .auth-card {
        padding: 16px 20px 18px !important;
        max-width: 460px;
        margin: 0 auto;
    }

    .auth-title {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }

    .auth-logo-img {
        width: 36px !important;
        height: 36px !important;
    }

    .form-group {
        margin-bottom: 8px !important;
    }

    .form-input {
        padding: 8px 12px !important;
    }

    .auth-submit {
        padding: 10px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   ADMIN PANEL — landscape
   Key insight: sidebar is fixed 220px, admin-main has margin-left:220px
   On landscape phone (~812px wide, ~375px tall) this actually works
   BUT the topbar + content area needs to be more compact
   ──────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {

    /* ── Sidebar — scrollable, slimmer logo bar ── */
    .admin-sidebar {
        /* Keep sidebar visible — enough width in landscape */
        transform: translateX(0) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Slim scrollbar */
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.15) transparent;
    }

    .admin-main {
        /* Sidebar IS showing in landscape, restore margin */
        margin-left: var(--sidebar-w) !important;
    }

    /* Hide hamburger — sidebar visible */
    .topbar-menu-btn {
        display: none !important;
    }

    .sidebar-close {
        display: none !important;
    }

    /* ── Topbar — slimmer ── */
    .admin-topbar {
        height: 44px !important;
        padding: 0 14px !important;
    }

    .topbar-title {
        font-size: .82rem !important;
    }

    /* ── Content area — less padding ── */
    .admin-content {
        padding: 12px 14px !important;
    }

    /* ── Stats grid — 3-col in landscape (6 cards = 2 rows of 3) ── */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .stat-card {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .stat-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .stat-value {
        font-size: 1.2rem !important;
    }

    .stat-label {
        font-size: .68rem !important;
    }

    .stat-sub {
        font-size: .65rem !important;
        margin-top: 3px !important;
    }

    /* ── Dashboard grid — side by side ── */
    .dash-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }

    /* ── Admin cards — compact ── */
    .admin-card {
        border-radius: 8px !important;
    }

    .admin-card-header {
        padding: 12px 16px !important;
    }

    .admin-card-title {
        font-size: .82rem !important;
    }

    /* ── Admin page header — compact ── */
    .admin-page-header {
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
    }

    .admin-page-title {
        font-size: 1rem !important;
    }

    /* ── Orders stats — 3-col ── */
    #ordersStats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    /* ── Sidebar nav items — tighter ── */
    .sidebar-link {
        padding: 8px 20px !important;
        font-size: .8rem !important;
    }

    .sidebar-section-label {
        padding: 12px 20px 4px !important;
        font-size: .6rem !important;
    }

    .sidebar-logo {
        height: 44px !important;
        padding: 0 14px !important;
    }

    /* ── Admin table — readable ── */
    .admin-table {
        font-size: .76rem !important;
    }

        .admin-table th,
        .admin-table td {
            padding: 8px 10px !important;
        }

    /* ── Pop grid (PopularProducts) ── */
    .pop-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }

    /* ── Admin modal — shorter max-height ── */
    .admin-modal {
        max-height: 82vh !important;
    }

    .admin-modal-body {
        max-height: 55vh !important;
        overflow-y: auto;
    }

    /* ── Sidebar logout row — compact ── */
    .sidebar-logout {
        padding: 10px 20px !important;
        font-size: .78rem !important;
    }
}

/* Very short landscape (Android compact / iPhone SE landscape ~568px wide, 320px tall) */
@media (orientation: landscape) and (max-height: 380px) {

    /* Sidebar collapses — too cramped */
    .admin-sidebar {
        transform: translateX(-100%) !important;
    }

        .admin-sidebar.open {
            transform: translateX(0) !important;
        }

    .admin-main {
        margin-left: 0 !important;
    }

    .topbar-menu-btn {
        display: flex !important;
    }

    .sidebar-close {
        display: flex !important;
    }

    /* Even more compact content */
    .admin-content {
        padding: 8px 10px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .stat-card {
        padding: 10px 12px !important;
    }

    .stat-value {
        font-size: 1.1rem !important;
    }

    /* Public — ultra compact */
    .hero-slider {
        height: 50vh !important;
        min-height: 180px !important;
    }

    .auth-logo-img {
        display: none !important;
    }

    .auth-card {
        padding: 12px 16px !important;
    }
}




/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE LOYALTY BANNER — ticker behind content, no overlap
   ═══════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {

    .banner3-wrap {
        overflow: hidden;
    }

    .banner3 {
        height: auto !important;
        min-height: 80px !important;
        padding: 14px 0 !important;
        /* Ensure content is above ticker */
    }

    /* Ticker stays behind — z-index already 1, content is 2.
       But in landscape the banner height was forcing overlap.
       Reduce ticker opacity further so it's purely decorative */
    .banner3-ticker {
        opacity: .6;
        z-index: 1 !important;
    }

        .banner3-ticker span {
            color: rgba(255,255,255,0.05) !important;
        }

    /* Content — always on top, horizontal row */
    .banner3-content {
        position: relative;
        z-index: 2 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 32px !important;
        gap: 32px !important;
    }

    .banner3-left {
        flex-shrink: 0;
    }

    .banner3-eyebrow {
        font-size: 10px !important;
        letter-spacing: 2px !important;
        display: block;
        margin-bottom: 3px;
    }

    .banner3-title {
        font-size: 15px !important;
        white-space: nowrap;
        margin: 0 0 4px !important;
    }

    /* Sub-text paragraph — inline in landscape */
    .banner3-content p {
        font-size: .78rem !important;
        margin: 0 !important;
        color: rgba(255,255,255,.7) !important;
        line-height: 1.3 !important;
        white-space: nowrap;
    }

        .banner3-content p span {
            /* Tier thresholds line */
            display: inline !important;
            font-size: .72rem !important;
            opacity: .8;
        }
}







/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE HERO — exact layout from drawing:
   [h1  big text    ]          [ VIEW PRODUCTS ]
   [p   small text  ]
   [p   small text  ]
   dots centered at bottom
   ═══════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {

    .hero-slider {
        height: 56vh !important;
        min-height: 200px !important;
        margin-bottom: .5rem !important;
    }

    /* Wrapper — centered */
    .slide-content-wrapper {
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

        /* Container — constrained, centered */
        .slide-content-wrapper .container {
            max-width: 800px !important;
            padding: 0 40px !important;
            width: 100% !important;
        }

    /* slide-content:
       - position:relative so button can be absolute
       - left half = h1 + p stacked normally
       - button = absolute, right side, vertically centered  */
    .slide-content {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 800px !important;
        text-align: left !important;
        padding: 12px 45% 44px 40px !important;
        /* left 40px pulls text from edge, right 45% keeps button zone */
        margin: 0 auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

        /* h1 — big text, left */
        .slide-content h1 {
            font-size: clamp(1rem, 2.8vw, 1.8rem) !important;
            margin-bottom: .4rem !important;
            padding: 0.05em 0 0.1em 0 !important;
            line-height: 1.2 !important;
            display: block !important;
        }

        /* p — small text, left, below h1 */
        .slide-content p {
            font-size: .76rem !important;
            margin-bottom: 0 !important;
            line-height: 1.4 !important;
            display: block !important;
        }

    /* button wrapper — absolute, right half, vertically centered */
    .slide-button-wrapper {
        position: absolute !important;
        right: 40px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        pointer-events: auto !important;
    }

    .btn-hero {
        padding: .85rem 2rem !important;
        font-size: .84rem !important;
        white-space: nowrap !important;
    }

    /* Dots — bottom center */
    .slider-dots {
        bottom: .5rem !important;
        z-index: 110;
    }

    /* Arrows */
    .slider-btn {
        width: 36px !important;
        height: 36px !important;
    }

        .slider-btn.prev {
            left: 10px !important;
        }

        .slider-btn.next {
            right: 10px !important;
        }

    /* YouTube tab — compact */
    .yt-banner-wrap {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .yt-tab {
        padding: 10px 7px !important;
        font-size: 10px !important;
        letter-spacing: 1px !important;
    }

        .yt-tab .yt-icon {
            width: 14px !important;
            height: 14px !important;
        }
}


/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE — PRODUCTS FILTER SIDEBAR
   Sidebar hidden by default, toggled via existing .mobile-filter-btn
   + openMobileFilters() / closeMobileFilters() JS (already in page)
   ═══════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {

    /* Products layout — full width, no sidebar column */
    .products-layout {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar — fixed drawer, slides in from left */
    .filters-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(300px, 80vw) !important;
        z-index: 500 !important;
        background: #fff !important;
        transform: translateX(-110%) !important;
        transition: transform .3s cubic-bezier(.22,.68,0,1.15) !important;
        box-shadow: 4px 0 32px rgba(0,0,0,.18) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

        /* Open state */
        .filters-sidebar.mobile-open {
            transform: translateX(0) !important;
        }

    /* Overlay — already styled in page, just ensure it shows */
    .filters-overlay.active {
        display: block !important;
        /* Slightly darker in landscape since more content is visible */
        background: rgba(0,0,0,.5) !important;
        backdrop-filter: blur(2px) !important;
    }

    /* Show mobile header and footer inside sidebar */
    .sidebar-mobile-header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2;
        background: #fafafa !important;
    }

    .sidebar-mobile-footer {
        display: block !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        border-top: 1px solid #f3f4f6 !important;
    }

    /* Show the filter toggle button */
    .mobile-filter-btn {
        display: flex !important;
    }

    /* Filter button — slightly more prominent in landscape */
    .mobile-filter-btn {
        padding: 7px 14px !important;
        font-size: .8rem !important;
        gap: 6px !important;
        /* Smooth icon rotation when open */
        transition: border-color .15s, color .15s !important;
    }

    /* Animate the filter icon when sidebar is open */
    .filters-sidebar.mobile-open ~ * .mobile-filter-btn svg,
    body.filters-open .mobile-filter-btn svg {
        transform: rotate(180deg);
        transition: transform .3s ease !important;
    }

    .mobile-filter-btn svg {
        transition: transform .3s ease !important;
    }

    /* Products grid — use freed space */
    .prd-grid-new {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 12px !important;
    }

    /* Products main — compact padding */
    .products-main {
        padding: 12px 14px 32px !important;
    }

    /* Toolbar — compact */
    .products-toolbar {
        padding: 10px 14px !important;
        gap: 10px !important;
    }
}