/* =============================================================================
   BagShop - responsive.css
   Mobile-first breakpoint overrides
   ============================================================================= */

/* ── sm: 480px ── */
@media (min-width: 480px) {
	.whatsapp-float__label {
		display: inline;
	}

	.topbar {
		font-size: var(--text-sm);
	}

	/* Hero */
	.hero-slider { min-height: 520px; height: 100vh; }
	.hero-slide  { min-height: 520px; height: 100vh; }
}

/* ── md: 768px ── */
@media (min-width: 768px) {
	/* Footer: 2-column base becomes 4 columns */
	.footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer__col--brand {
		grid-column: auto;
	}

	/* Archive layout: 2-col posts grid */
	.posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Archive sidebar stacked → side by side */
	.archive-layout.has-sidebar,
	.single-layout.has-sidebar {
		grid-template-columns: 1fr 280px;
	}

	/* Hero */
	.hero-slider { min-height: 560px; height: 100vh; }
	.hero-slide  { min-height: 560px; height: 100vh; }
	.hero-slider__arrow { width: 52px; height: 52px; }

	/* Trust badges: 4 columns */
	.trust-grid { grid-template-columns: repeat(4, 1fr); }

	/* Categories: 4 columns */
	.categories-grid { grid-template-columns: repeat(4, 1fr); }

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

	/* Stats: 4 columns */
	.stats-grid { grid-template-columns: repeat(4, 1fr); }

	/* Testimonials: show 2 at once */
	.testimonial-card { display: block; flex: 0 0 calc(50% - 10px); }

	/* Repair section: 2-col layout */
	.repair-section__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	/* Newsletter: side by side always */
	.newsletter-inner { flex-wrap: nowrap; }

	/* Offer card */
	.offer-card { flex-wrap: nowrap; }
}

/* ── lg: 1024px ── */
@media (min-width: 1024px) {
	/* Show desktop nav, hide hamburger */
	.header__nav {
		display: flex;
	}

	.header__hamburger {
		display: none;
	}

	/* Mobile bottom nav: hide on desktop */
	.mobile-nav-bottom {
		display: none;
	}

	/* Remove bottom padding for mobile nav */
	.site-main {
		padding-bottom: 0;
	}

	/* WhatsApp float: lower (no mobile nav) */
	.whatsapp-float {
		bottom: var(--space-6);
	}

	/* Footer: 4 equal columns */
	.footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1.5fr;
	}

	.footer__col--brand {
		grid-column: auto;
	}

	/* Archive sidebar */
	.archive-layout.has-sidebar,
	.single-layout.has-sidebar {
		grid-template-columns: 1fr 300px;
	}

	/* Products: 4 columns */
	.products-grid { grid-template-columns: repeat(4, 1fr); }

	/* Hero */
	.hero-slider { min-height: 620px; height: 100vh; }
	.hero-slide  { min-height: 620px; height: 100vh; }
	.hero-slide__content { padding-block: var(--space-16); }

	/* Toast above desktop footer not mobile nav */
	.toast-container { bottom: var(--space-6); }
}

/* ── xl: 1280px ── */
@media (min-width: 1280px) {
	.footer__grid {
		gap: var(--space-12) var(--space-8);
	}
}

/* ── Extra small: 360px — catch-all for very narrow phones ── */
@media (max-width: 360px) {
    /* Trust grid collapse */
    .trust-grid { grid-template-columns: 1fr; }

    /* Products to 1 column */
    .products-grid { grid-template-columns: 1fr; }

    /* Categories to 1 column */
    .categories-grid { grid-template-columns: 1fr; }

    /* Repair stats to 1 column */
    .repair-section__stats { grid-template-columns: 1fr; }

    /* Stats grid */
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── High Contrast ── */
@media (forced-colors: active) {
	.btn,
	.badge {
		border: 2px solid ButtonText;
	}
}

/* =============================================================================
   COMPREHENSIVE DESIGN PASS — responsive.css  (July 2026)
   ============================================================================= */

/* ── 1. CONTAINER padding on small screens ── */
@media (max-width: 360px) {
    .container { padding-inline: 12px; }
}

/* ── 2. PRODUCT GRID — consistent across breakpoints ── */
@media (min-width: 481px) and (max-width: 767px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 3. HERO height — 85vh on very small screens ── */
@media (max-width: 360px) {
    .hero-slider,
    .hero-slide { height: 85vh; min-height: 460px; }
    .hero-slide__content { padding-block: 28px; }
    .hero-slide__heading { font-size: clamp(28px,9vw,38px) !important; }
}

/* ── 4. SECTION PADDING — tighten on 360px ── */
@media (max-width: 360px) {
    .trust-section { padding-block: var(--space-5); }
    .prem-section,
    .mn-product-section { padding: 36px 0; }
}

/* ── 5. FOOTER GRID — 1-col on tiny screens ── */
@media (max-width: 360px) {
    .footer__grid { grid-template-columns: 1fr; }
    .footer__top { padding-block: var(--space-8) var(--space-6); }
}

/* ── 6. MOBILE BOTTOM NAV — safe area ── */
@media (max-width: 1023px) {
    .mobile-nav-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    .site-main {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── 7. FORM INPUTS — min height on all screens ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
select,
textarea {
    min-height: 48px;
}
textarea { min-height: auto; }

/* ── 8. TOUCH devices — remove hover effects ── */
@media (hover: none) {
    .product-card:hover,
    .mn-card:hover,
    .category-card:hover,
    .hp-cat-card:hover {
        transform: none;
    }
}

/* ── 9. HEADER — height on mobile ── */
@media (max-width: 767px) {
    .header__inner { height: 60px; }
    :root { --header-height: 60px; }
}

/* ── 10. NO-JS fallback — mobile menu visible ── */
.no-js .mobile-menu { transform: none; }

/* ── 11. PRINT — clean page ── */
@media print {
    body { padding-bottom: 0 !important; }
    .site-main { padding-bottom: 0 !important; }
}

/* =============================================================================
   SEO-DRIVEN RESPONSIVE FIXES  (July 2026)
   ============================================================================= */

/* ── 375px — most common mobile width (iPhone SE, standard iPhone) ──────────
   SEO: Google mobile-first indexing evaluates at this viewport.
   All content must be readable without zooming on 375px.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
    /* Typography */
    body { font-size: 15px; }  /* SEO: minimum 15px body text on mobile */

    /* Product grids — stay 2-col, never drop to 1 (too large) */
    .products-grid        { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mn-cards-track       { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .categories-grid      { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Trust badges — 2-col on 375px, not 1-col which wastes space */
    .trust-grid           { grid-template-columns: repeat(2, 1fr); }

    /* Nav items — ensure 44px tap targets */
    .mobile-nav__list li a { min-height: 44px; }

    /* Containers */
    .container { padding-inline: 14px; }

    /* Hero — comfortable height */
    .hero-slider, .hero-slide { height: 85vh; min-height: 460px; }
    .hero-slide__content { padding-block: 32px; }

    /* Stats grid stays 2-col */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 320px — older Android, minimum supported width ────────────────────────
   SEO: Even on 320px phones, no horizontal scroll is allowed. Google checks
   this under Mobile Usability in Search Console.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 320px) {
    /* Prevent horizontal overflow */
    .container { padding-inline: 10px; }

    /* Product grids — 2-col still works on 320px */
    .products-grid        { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mn-cards-track       { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Trust can collapse to 1-col on 320px */
    .trust-grid           { grid-template-columns: 1fr; }

    /* Hero — minimal height on tiny screen */
    .hero-slider, .hero-slide { height: 80vh; min-height: 420px; }
    .hero-slide__heading { font-size: 26px !important; }

    /* Footer grid — single column */
    .footer__grid { grid-template-columns: 1fr; }
}

/* ── Ensure font-size never goes below 12px on any element ─────────────────
   SEO: Google flags text under 12px as "too small to read" in Mobile
   Usability report, which negatively affects rankings.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Breadcrumbs readable */
    .arc-breadcrumb-bar .woocommerce-breadcrumb,
    .woocommerce-breadcrumb { font-size: 12px !important; }

    /* Footer links */
    .footer__nav-list a { font-size: 13px; }

    /* Bottom nav labels */
    .mobile-nav-bottom__item { font-size: 11px; }
}

/* ── Cart / Checkout: narrow the fixed sidebar column on tablet / small-laptop
   widths (~481–900px) — otherwise the 380px sidebar (sized for desktop) eats
   too much of the row and cramps the main column before the ≤480px stack
   kicks in. ── */
@media (max-width: 900px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr 280px;
        gap: 24px;
    }

    /* Checkout progress bar: tighten spacing so 2 steps + connector fit
       comfortably above the narrowed layout. */
    .checkout-progress__step { font-size: 13px; gap: 8px; }
    .checkout-progress__num { width: 26px; height: 26px; }
}

/* =============================================================================
   CART / CHECKOUT / MY ACCOUNT — mobile stacking ≤480px
   These pages load main.css → responsive.css → woocommerce.css, in that order,
   so the base (non-media-query) rules added in woocommerce.css would otherwise
   win the cascade over these mobile overrides at the same specificity — hence
   the !important on the layout-changing properties below.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Cart + Checkout: single column, no fixed side rail */
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr !important;
    }
    .cart-summary,
    .checkout-summary__sticky {
        position: static !important;
        top: auto !important;
    }

    /* Cart item: image + details on top row, actions row below spans full width */
    .cart-item {
        grid-template-columns: 64px 1fr !important;
    }
    .cart-item__image img { width: 64px !important; height: 64px !important; }
    .cart-item__actions {
        grid-column: 1 / -1;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
    }

    .cart-actions { flex-wrap: wrap; }
    .cart-coupon__form { flex-direction: column !important; }
    .cart-coupon__form .form-control { min-width: 0 !important; width: 100%; }

    .cart-items,
    .cart-summary,
    .checkout-section,
    .checkout-summary {
        padding: 16px !important;
    }

    /* Checkout progress bar: same row layout, just tighter so it never
       overflows a 320–375px viewport (the connector is flex:1 and absorbs
       any leftover width on its own). */
    .checkout-progress { margin-bottom: 18px !important; }
    .checkout-progress__step { gap: 6px !important; font-size: 11.5px !important; }
    .checkout-progress__step:not(:last-child)::after { margin: 0 8px !important; }
    .checkout-progress__num { width: 24px !important; height: 24px !important; font-size: 12px !important; }

    /* Step 1 summary card + Continue/Edit controls: match the tighter mobile padding */
    .checkout-step1-summary { padding: 16px !important; }
    .checkout-step1-summary__header { flex-wrap: wrap !important; }
    .checkout-step__continue { width: 100% !important; }

    /* My Account: nav stacks above content, no sticky rail */
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        position: static !important;
        top: auto !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 18px !important;
    }

    /* Addresses + login/register: single column */
    .u-columns.col2-set {
        grid-template-columns: 1fr !important;
    }

    /* Orders table: allow horizontal scroll inside its own box instead of
       overflowing the page */
    .woocommerce-orders-table,
    .my_account_orders {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}