/* ==========================================================================
   Phones and tablets (iPhone 13+, Android 12+, iPad).
   Loaded after theme.css. theme.css carries several generations of mobile
   rules at different breakpoints (480 / 560 / 768 / 900 px) that override
   each other; this file is the single source of truth for small screens and
   uses the theme's own 900px header breakpoint throughout.
   ========================================================================== */

/* --- All sizes: small-screen safety ------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, iframe { max-width: 100%; }

@media (max-width: 900px) {

	/* --- Header: logo row stays, navigation becomes a drawer ----------- */
	.site-header { position: sticky; top: 0; z-index: 1000; padding-top: env(safe-area-inset-top); }
	.header-inner { min-height: 60px; padding-top: 8px; padding-bottom: 8px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
	.mobile-menu-toggle,
	.header-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
	.mobile-menu-toggle { margin-left: -10px; }
	.site-logo { min-width: 0; flex: 1 1 auto; text-align: center; }
	.site-logo .logo-text { font-size: clamp(1.15rem, 5.4vw, 1.5rem); white-space: nowrap; }

	/* The header's backdrop blur makes it the containing block for fixed
	   children, so the drawer's height is set explicitly and the blur is
	   dropped while the menu is open. */
	.site-header.nav-open { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.site-header .header-nav-bar {
		display: none;
		position: fixed;
		left: 0; right: 0;
		top: var(--jt-header-h, 60px);
		height: calc(100vh - var(--jt-header-h, 60px));
		height: calc(100dvh - var(--jt-header-h, 60px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		z-index: 999;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid rgba(255, 255, 255, .2);
	}
	.site-header.nav-open .header-nav-bar { display: block; }
	body.jt-nav-open { overflow: hidden; }

	.header-nav-inner { display: block; padding: 4px 20px 24px; }
	.header-nav-inner .primary-nav { display: block; margin: 0; }
	.header-nav-bar .nav-list { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; padding: 0; }
	.header-nav-bar .nav-list > li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .16); }
	.site-header .header-nav-bar .mega-top-link {
		display: flex; flex-direction: row; align-items: center; gap: 14px;
		width: 100%; min-height: 56px; padding: 10px 2px;
		font-size: 1rem; letter-spacing: .02em; text-transform: none;
	}
	.header-nav-bar .mega-top-link::before,
	.header-nav-bar .mega-top-link::after { display: none !important; }
	.header-nav-bar .mega-top-icon { flex: 0 0 26px; display: inline-flex; }
	.header-nav-bar .mega-top-text { display: inline-flex; flex-direction: row; align-items: baseline; gap: .35em; flex-wrap: wrap; }
	.site-header .header-nav-bar .mega-top-text .mega-top-primary { font-size: 1rem; font-weight: 600; }
	.site-header .header-nav-bar .mega-top-text .mega-top-secondary { font-size: 1rem; font-weight: 400; opacity: .85; text-transform: none; letter-spacing: 0; }
	.header-nav-bar .mega-caret { margin-left: auto; width: 14px; height: 14px; opacity: .8; transition: transform .2s ease; }
	.header-nav-bar .mega-item.is-open > .mega-top-link .mega-caret { transform: rotate(180deg); }

	/* Sub-menus open in place, as an accordion. */
	.header-nav-bar .mega-panel { position: static; width: auto; box-shadow: none; border: 0; background: transparent; transform: none; }
	.header-nav-bar .mega-panel-inner { display: block; max-height: none; overflow: visible; padding: 0 0 14px 40px; }
	.header-nav-bar .mega-col { margin: 0 0 12px; }
	.header-nav-bar .mega-col-title { font-size: .75rem; color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .2); }
	.header-nav-bar .mega-links-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
	.header-nav-bar .mega-links a { min-height: 44px; display: flex; align-items: center; font-size: .95rem; }
	.header-nav-bar .mega-promo { display: none; }

	/* Search panel under the header. */
	.header-search-panel .header-search-form { display: flex; gap: 8px; padding-left: 16px; padding-right: 16px; }
	.header-search-panel input[type="search"] { flex: 1 1 auto; min-width: 0; }

	/* --- Forms: 16px stops iOS zooming into the field --------------------- */
	input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
	select, textarea { font-size: 16px; }
	select { min-height: 44px; }

	/* --- Touch targets ----------------------------------------------------- */
	.btn, .btn-sm, .card-action-btn, .branch-phone, .branch-directions, .btn-text,
	.pagination a, .pagination span, .filter-toggle, .pdp-cta-row .btn { min-height: 44px; }
	.btn-sm, .card-action-btn { display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; padding-top: 10px; padding-bottom: 10px; }
	.branch-phone, .branch-directions { padding: 8px 0; }
	.site-footer a { display: inline-block; padding: 6px 0; }

	/* Nothing under 12px. */
	.mega-col-title, .category-tile-count, .meta-metal, .meta-sep, .meta-weight,
	.trust-label, .branch-flag, .jcore-lead-field-note, .card-action-btn { font-size: max(12px, .75rem); }

	/* --- Home banner ----------------------------------------------------- */
	.jtheme-banner.is-photo .jtheme-banner-image { aspect-ratio: 4 / 3; }
	.jtheme-banner-overlay .container { padding-left: 20px; padding-right: 20px; }
	.jtheme-banner-title { font-size: clamp(1.5rem, 7vw, 2.1rem); }
	.jtheme-banner-excerpt { display: none; }

	/* --- Listing (PLP): filters slide in from the left ------------------- */
	.plp-container { display: block; }
	.plp-sidebar {
		position: fixed !important;
		top: 0; left: 0; bottom: 0;
		height: 100vh; height: 100dvh;
		width: min(86vw, 340px); max-width: none;
		margin: 0; border-radius: 0;
		z-index: 2000;
		overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		transform: translateX(-105%);
		transition: transform .25s ease;
		padding: max(16px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
		background: var(--c-neutral-0, #fff);
		visibility: hidden;
	}
	.plp-sidebar.open { transform: translateX(0); visibility: visible; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
	.plp-overlay { z-index: 1990; }
	.sidebar-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
	.filter-toggle { display: inline-flex; align-items: center; }
	.plp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
	.plp-main { width: 100%; }

	/* --- Product grids: two columns on phones, three on tablets ---------- */
	.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.product-card-actions { position: static; transform: none; opacity: 1; }

	/* --- Product page (PDP) ---------------------------------------------- */
	.pdp-container { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.pdp-gallery { position: static; }
	.pdp-cta-row { gap: 10px; }
	.pdp-cta-main { flex: 1 1 100%; justify-content: center; }
	.pdp-cta-share, .pdp-tryon-mount, .jcore-tryon-open { flex: 1 1 calc(50% - 5px); justify-content: center; }
	.pdp-key-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
	.accordion-specs-grid { grid-template-columns: minmax(0, 1fr); }
	.pdp-layout { padding-bottom: 24px; }
	.pdp-accordion-section { padding-top: 24px; }

	/* --- Stores / collections ------------------------------------------- */
	.store-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.store-map-col { position: static; }

	/* --- Footer ------------------------------------------------------------ */
	.footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
	.site-footer { margin-top: 40px; padding-top: 40px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }

	/* --- Lead form modal: full height, scrolls inside ------------------- */
	.jcore-lead-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* iPad in portrait: product page side by side. */
@media (min-width: 700px) and (max-width: 900px) {
	.pdp-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
	.pdp-gallery { position: sticky; top: calc(var(--jt-header-h, 60px) + 16px); align-self: start; }
}

/* Tablets in portrait (iPad 768–900px): roomier grids. */
@media (min-width: 640px) and (max-width: 900px) {
	.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.header-nav-bar .mega-links-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Phones. */
@media (max-width: 639px) {
	.site-header .header-cta { display: none; }
}
@media (max-width: 600px) {
	.container { padding-left: 16px; padding-right: 16px; }
	.footer-inner { grid-template-columns: minmax(0, 1fr); }
	.cta-row { flex-direction: column; }
	.cta-row .btn { width: 100%; }
}

@media (max-width: 380px) {
	.product-grid { gap: 10px; }
	.product-card-title, .product-card h3 { font-size: .9rem; }
}