/* ==========================================================================
   Responsive breakpoints
   Mobile: <576px | Tablet: 576-991px | Laptop: 992-1439px | Large/TV: 1440px+
   Base CSS above is written laptop/desktop-first; we scale down AND up here.
   ========================================================================== */

/* ---- Large screens / TV (1440px+) : cap widths, scale up hero ---- */
@media (min-width: 1440px) {
	:root { --us-container-max: 1440px; }
	.us-hero-content h1 { font-size: 76px; }
	.us-instagram-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1920px) {
	:root { --us-container-max: 1600px; }
	body { font-size: 17px; }
}

/* ---- Tablet (max 991px) ---- */
@media (max-width: 991px) {
	:root { --us-header-h: 68px; }

	/* Header / nav → mobile drawer */
	.us-mobile-menu-toggle { display: flex !important; }
	.us-primary-nav {
		position: fixed !important;
		top: 0; left: -320px;
		width: 300px; height: 100%;
		background: var(--us-white);
		z-index: 250;
		padding: 90px 24px 24px;
		overflow-y: auto;
		transition: left 0.3s ease;
		box-shadow: 8px 0 30px rgba(0,0,0,0.1);
	}
	.us-primary-nav.is-open { left: 0 !important; }
	.us-nav-list { flex-direction: column !important; gap: 4px; }
	.us-nav-item > a { padding: 14px 0; }
	.us-nav-item > a::after { display: none; }
	.us-mega-panel {
		position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important;
		box-shadow: none; border: none; padding: 8px 0 8px 12px;
		display: none; flex-direction: column; gap: 16px; min-width: 0;
	}
	.us-has-mega.is-open .us-mega-panel { display: flex !important; }

	.us-header-icons { gap: 0; }
	.us-currency-switcher { display: none; } /* moved into mobile drawer footer if needed */

	/* Shop layout: sidebar becomes off-canvas filter panel */
	.us-shop-layout { grid-template-columns: 1fr !important; }
	.us-filter-toggle { display: inline-flex !important; align-items: center; gap: 6px; }
	.us-shop-sidebar {
		position: fixed; top: 0; left: -280px; width: 280px; height: 100%;
		background: var(--us-white); z-index: 250; padding: 90px 24px 24px;
		overflow-y: auto; transition: left 0.3s ease; box-shadow: 8px 0 24px rgba(0,0,0,0.12);
	}
	.us-shop-sidebar.is-open { left: 0; }

	.us-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 14px; }
	.us-related-products ul.products { grid-template-columns: repeat(2, 1fr) !important; }

	/* Product page stacks */
	.us-single-product-wrap { grid-template-columns: 1fr !important; gap: 32px; }

	/* Cart / checkout stack */
	.us-checkout-layout { grid-template-columns: 1fr !important; gap: 32px; }
	.us-cart-collaterals { max-width: 100%; }

	/* My account */
	.us-account-layout { grid-template-columns: 1fr !important; gap: 24px; }
	.us-account-nav ul { flex-direction: row !important; flex-wrap: wrap; }
	.us-dashboard-cards { grid-template-columns: repeat(3, 1fr) !important; }

	.us-auth-wrap { grid-template-columns: 1fr !important; min-height: 0; }
	.us-auth-visual { padding: 40px 32px; text-align: center; align-items: center; }
	.us-auth-visual p { margin: 0 auto; }
	.us-auth-form-side { padding: 40px 32px; max-width: 100%; }

	.us-footer-columns { grid-template-columns: repeat(2, 1fr) !important; }
	.us-instagram-grid { grid-template-columns: repeat(3, 1fr) !important; }
	.us-brand-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Mobile (max 575px) ---- */
@media (max-width: 575px) {
	.us-container { padding: 0 16px; }

	.us-announcement-bar { font-size: 11px; }

	.us-header-inner { padding: 0 16px; gap: 12px; }
	.us-logo a { font-size: 18px; }

	.us-hero { min-height: 64vh; align-items: flex-end; }
	.us-hero-content { padding: 32px 16px 40px; }
	.us-hero-content h1 { font-size: 32px; }
	.us-hero-content p { font-size: 14px; }
	.us-btn { padding: 12px 22px; font-size: 13px; }

	.us-category-tiles { grid-template-columns: 1fr; padding: 32px 16px; }

	.us-section-heading { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 20px; }

	.us-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px 10px; }
	.us-product-carousel { grid-auto-columns: minmax(160px, 1fr); gap: 12px; }
	.us-quick-view-btn { display: none; } /* no hover state on touch; keep it clean */

	.us-brand-strip { grid-template-columns: 1fr 1fr !important; padding: 32px 16px; gap: 18px; }

	.us-instagram-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }

	.us-footer-newsletter { padding: 40px 16px; }
	.us-newsletter-form { flex-direction: column; gap: 10px; }
	.us-newsletter-form input,
	.us-newsletter-form button { border-radius: var(--us-radius-sm); width: 100%; }

	.us-footer-columns { grid-template-columns: 1fr 1fr; padding: 32px 16px; gap: 24px; }
	.us-footer-bottom { flex-direction: column; gap: 10px; text-align: center; padding: 20px 16px; }

	.us-related-products ul.products { grid-template-columns: 1fr 1fr; }

	.us-gallery-thumbs { gap: 8px; }
	.us-gallery-thumb { width: 58px; height: 72px; }

	.us-dashboard-cards { grid-template-columns: 1fr; }
	.us-order-card-top { flex-direction: column; align-items: flex-start; gap: 8px; }

	.us-cart-row { grid-template-columns: 70px 1fr; grid-template-areas: "img info" "img qty" "img remove"; }
	.us-cart-row-img { grid-area: img; }
	.us-cart-row-info { grid-area: info; }
	.us-cart-row-qty { grid-area: qty; }
	.us-cart-row-remove { grid-area: remove; }

	.us-search-overlay { padding-top: 90px; }
	.us-search-overlay-inner input[type="search"] { font-size: 20px; }
}

/* ---- Extra-small phones ---- */
@media (max-width: 380px) {
	.us-product-grid { grid-template-columns: 1fr 1fr; }
	.us-hero-content h1 { font-size: 28px; }
	.us-instagram-grid { grid-template-columns: repeat(2, 1fr); }
}