/* Jonath's 0.10.7 — release-critical mobile layout repair. */

@media (max-width: 767px) {
	/* Keep the hero image visible and put readable copy beneath it. */
	.site-shell .hero-section,
	.site-shell .hero-track {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.site-shell .hero-slide {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		padding: 0 !important;
		background: #08090b !important;
	}

	.site-shell .hero-slide.is-active {
		position: relative !important;
		display: block !important;
	}

	.site-shell .hero-slide > img {
		position: absolute !important;
		inset: 0 0 auto !important;
		height: clamp(280px, 74vw, 350px) !important;
		width: 100% !important;
		object-fit: cover !important;
		object-position: var(--hero-mobile-focus-x, 50%) var(--hero-mobile-focus-y, 38%) !important;
	}

	.site-shell .hero-overlay {
		position: absolute !important;
		inset: 0 0 auto !important;
		height: clamp(280px, 74vw, 350px) !important;
		background: linear-gradient(0deg, #08090b 0%, rgba(8,9,11,.2) 38%, rgba(8,9,11,.04) 100%) !important;
	}

	.site-shell .hero-content {
		height: auto !important;
		min-height: 0 !important;
		align-items: flex-start !important;
		margin-top: clamp(280px, 74vw, 350px) !important;
		padding: 28px 18px 82px !important;
		background: #08090b;
	}

	.site-shell .hero-copy {
		width: 100% !important;
		max-width: none !important;
	}

	.site-shell .hero-copy .eyebrow {
		margin-bottom: 17px !important;
		font-size: 10px !important;
		line-height: 1.35 !important;
	}

	.site-shell .hero-copy h1,
	.site-shell .hero-copy h2 {
		max-width: 100% !important;
		font-size: clamp(42px, 12.5vw, 58px) !important;
		line-height: .88 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	.site-shell .hero-lead {
		max-width: 36rem !important;
		margin-top: 18px !important;
		font-size: 14px !important;
		line-height: 1.48 !important;
	}

	.site-shell .hero-buttons {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 9px !important;
		margin-top: 22px !important;
	}

	.site-shell .hero-buttons .btn {
		width: 100% !important;
		min-height: 48px !important;
		padding: 0 14px !important;
	}

	.site-shell .hero-controls {
		right: 18px !important;
		bottom: 18px !important;
		left: 18px !important;
	}

	.site-shell .hero-arrows button {
		background: #111319 !important;
	}

	/* One clean border around mobile search. */
	.jak-mobile-menu__search {
		box-sizing: border-box !important;
		width: 100% !important;
		grid-template-columns: 24px minmax(0,1fr) auto !important;
		border: 1px solid var(--line) !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}

	.jak-mobile-menu__search input,
	.jak-mobile-menu__search input[type="search"] {
		width: 100% !important;
		min-width: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		outline: 0 !important;
		background: transparent !important;
	}

	.jak-mobile-menu__quick-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0,1fr));
		gap: 8px;
		margin: -5px 0 18px;
	}

	.jak-mobile-menu__quick-actions a {
		min-width: 0;
		min-height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 8px;
		border: 1px solid var(--line);
		border-radius: 11px;
		color: var(--ink);
		font-size: 10px;
		font-weight: 900;
		line-height: 1.15;
		text-align: center;
		text-transform: uppercase;
	}

	.jak-mobile-menu__quick-actions a:first-child {
		border-color: var(--accent);
		background: var(--accent);
		color: var(--accent-ink);
	}

	.jak-mobile-menu__quick-actions svg {
		width: 16px;
		height: 16px;
		flex: 0 0 auto;
	}

	/* Care links must be readable rows, never one horizontal text run. */
	.jak-mobile-menu__group > div {
		display: grid !important;
		grid-template-columns: 1fr !important;
	}

	.jak-mobile-menu__group > div > a {
		min-height: 42px !important;
		display: flex !important;
		align-items: center !important;
		padding: 0 10px !important;
		border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent) !important;
		font-size: 13px !important;
		line-height: 1.3 !important;
	}

	/* Restore eight products as a controlled swipe row on phones. */
	.product-tabs [role="tabpanel"] .product-grid {
		display: flex !important;
		gap: 12px !important;
		overflow-x: auto !important;
		padding: 0 2px 14px !important;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.product-tabs [role="tabpanel"] .product-grid > * {
		flex: 0 0 min(78vw, 310px) !important;
		scroll-snap-align: start;
	}

	/* Keep the newsletter and footer as two clean, adjoining sections. */
	.lead-section--footer {
		box-sizing: border-box !important;
		padding: 48px 0 !important;
		overflow: visible !important;
	}

	.lead-section--footer .lead-inner {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 22px !important;
	}

	.lead-section--footer h2 {
		font-size: clamp(44px, 13vw, 58px) !important;
		line-height: .88 !important;
	}

	.lead-section--footer .lead-form-wrap > p {
		margin-bottom: 18px !important;
		font-size: 15px !important;
		line-height: 1.45 !important;
	}

	.lead-section--footer .lead-form {
		height: auto !important;
		display: grid !important;
		grid-template-columns: 24px minmax(0,1fr) !important;
		gap: 8px 10px !important;
		padding: 11px !important;
		border-radius: 12px !important;
	}

	.lead-section--footer .lead-form input {
		width: 100% !important;
		min-width: 0 !important;
		min-height: 46px !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.lead-section--footer .lead-form button {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		min-height: 50px !important;
		margin: 0 !important;
		border-radius: 9px !important;
		justify-content: center !important;
	}

	.lead-section--footer .lead-form-wrap > small {
		margin-top: 10px !important;
		font-size: 10px !important;
		line-height: 1.4 !important;
	}

	.site-footer {
		margin-top: 0 !important;
		padding-top: 42px !important;
	}
}

@media (min-width: 768px) {
	.product-tabs [role="tabpanel"] .product-grid {
		grid-template-columns: repeat(4, minmax(0,1fr)) !important;
	}
}