/*
 * ShineSky 006 homepage Products (Figma 2008:139), internal gray prototype.
 * Native horizontal overflow + scroll snap adapted from tkdev CodePen RNGZNqG
 * (MIT; see licenses/products006/NOTICE.md). All selectors scoped to .ss6-products.
 *
 * Desktop anchor: 1440x900. Every length below is its Figma px value expressed
 * as a fraction of a 1440 viewport, clamped to the Figma value as the maximum.
 *   inset 66.25 = 4.6007vw   gap 7.34375 = 0.51vw   card 587.5 (>=1024)
 *   section: 108 + eyebrow 16.156 + 31.844 + heading 64.625 + 81.375
 *            + track 490 (card 446.516 + 43.484) + 108 = 900
 * Responsive modes: desktop >=1024, tablet 600-1023, phone <600.
 */

.ss6-products {
	--ss6p-bg: #efede9;
	--ss6p-ink: #171615;
	--ss6p-placeholder: #d9d9d9;
	--ss6p-inset: clamp(16px, 4.6007vw, 66.25px);
	--ss6p-gap: clamp(6px, 0.51vw, 7.34375px);
	/*
	 * One continuous card-width rule for tablet and desktop (>=600):
	 * 480px floor through 768, linear growth 768->1024 (480 -> 587.5),
	 * then the Figma 587.5px from 1024 up (1440 stays exact).
	 *   slope = 107.5 / 256 = 0.419921875  -> 41.9921875vw
	 *   intercept = 480 - 0.419921875 * 768 = 157.5px
	 * Phone (<600) overrides this below with its own peek rule.
	 */
	--ss6p-card: clamp(480px, calc(157.5px + 41.9921875vw), 587.5px);

	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: clamp(56px, 7.5vw, 108px) 0 clamp(48px, 7.5vw, 108px);
	background: var(--ss6p-bg);
	color: var(--ss6p-ink);
}

.ss6-products *,
.ss6-products *::before,
.ss6-products *::after {
	box-sizing: border-box;
}

.ss6-products__head {
	padding-inline: var(--ss6p-inset);
}

.ss6-products__eyebrow {
	margin: 0;
	font-family: "Inter Variable", "Inter", system-ui, sans-serif;
	font-size: clamp(13px, 1.02vw, 14.6875px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
}

.ss6-products__heading {
	max-width: min(1200px, 100%);
	margin: clamp(14px, 2.2114vw, 31.844px) 0 0;
	font-family: "Montserrat Variable", "Montserrat", system-ui, sans-serif;
	font-size: clamp(28px, 4.0799vw, 58.75px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

/* Scroll container: the only element that scrolls horizontally. */
.ss6-products__track {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-top: clamp(28px, 5.651vw, 81.375px);
	padding: 0 0 clamp(16px, 3.0197vw, 43.484px);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	/* Horizontal browsing on the track, vertical swipes pass to the page. */
	touch-action: pan-x pan-y pinch-zoom;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ss6p-inset);
	outline: none;
}

.ss6-products__track:focus-visible {
	outline: 2px solid var(--ss6p-ink);
	outline-offset: -2px;
}

/* Insets live on the list (scrollable content) so both ends are reachable. */
.ss6-products__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ss6p-gap);
	width: max-content;
	margin: 0;
	padding: 0 var(--ss6p-inset);
	list-style: none;
}

.ss6-products__card {
	flex: 0 0 var(--ss6p-card);
	width: var(--ss6p-card);
	margin: 0;
	padding: 0 0 clamp(12px, 2.489vw, 35.84px);
	scroll-snap-align: start;
}

/* Gray placeholder media (Figma RECTANGLE #d9d9d9). Static: no filter/animation. */
.ss6-products__media {
	position: relative;
	width: 100%;
	aspect-ratio: 587.5 / 316.515625;
	overflow: hidden;
	background: var(--ss6p-placeholder);
}

/* Only rendered when an approved image is supplied later; gray box shows on failure. */
.ss6-products__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ss6-products__title {
	margin: clamp(14px, 1.6322vw, 23.504px) 0 0;
	font-family: "Inter Variable", "Inter", system-ui, sans-serif;
	font-size: clamp(18px, 1.6319vw, 23.5px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

.ss6-products__link {
	color: inherit;
	text-decoration: none;
}

.ss6-products__link:hover {
	text-decoration: underline;
}

.ss6-products__link:focus-visible {
	outline: 2px solid var(--ss6p-ink);
	outline-offset: 2px;
}

.ss6-products__state {
	margin: clamp(10px, 1.9896vw, 28.65px) 0 0;
	font-family: "Inter Variable", "Inter", system-ui, sans-serif;
	font-size: clamp(13px, 1.02vw, 14.6875px);
	font-weight: 400;
	line-height: 1.1;
}

/* Exact Figma string "OFF   /   ON" (three spaces each side), kept on one line. */
.ss6-products__state-label {
	white-space: pre;
}

.ss6-products__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Thin native scrollbar: a drag target for mouse users without horizontal wheel.
   Sits inside the track's bottom padding; overlay scrollbars hide it on macOS/touch. */
.ss6-products__track {
	scrollbar-width: thin;
	scrollbar-color: rgba(23, 22, 21, 0.35) transparent;
}

.ss6-products__track::-webkit-scrollbar {
	height: 6px;
}

.ss6-products__track::-webkit-scrollbar-thumb {
	background: rgba(23, 22, 21, 0.35);
	border-radius: 3px;
}

.ss6-products__track::-webkit-scrollbar-track {
	background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.ss6-products__track {
		scroll-behavior: smooth;
	}
}

/* Tablet: 600-1023. Card width comes from the shared clamp() rule above
   (480 at 600-768, ~587.5 at 1023), so there is no jump at 1023/1024. */
@media (max-width: 1023.98px) {
	.ss6-products {
		--ss6p-gap: 8px;
		--ss6p-inset: clamp(24px, 4.6007vw, 66.25px);
	}

	/* Slightly larger than the 4.08vw desktop ratio so the heading stays a strong
	   second line on narrow tablets; ~44px at 1023 meets ~41.8px at 1024. */
	.ss6-products__heading {
		font-size: clamp(34px, 4.3vw, 44px);
	}
}

/* Phone: <600. One card plus a visible peek of the next (~79vw at 390/320).
   At 599 this gives 599 - 48 - 71.88 = 479.12px, meeting the 480px tablet floor. */
@media (max-width: 599.98px) {
	.ss6-products {
		--ss6p-inset: clamp(16px, 4.6007vw, 24px);
		--ss6p-gap: 6px;
		--ss6p-card: calc(100vw - (2 * var(--ss6p-inset)) - 12vw);
	}

	.ss6-products__heading {
		font-size: clamp(28px, 8.2vw, 36px);
		line-height: 1.12;
	}

	.ss6-products__title {
		font-size: 18px;
	}

	.ss6-products__state,
	.ss6-products__eyebrow {
		font-size: 13px;
	}
}

/* Coarse pointers use overlay scrollbars; drop the styled thin bar. */
@media (pointer: coarse) {
	.ss6-products__track {
		scrollbar-width: none;
	}

	.ss6-products__track::-webkit-scrollbar {
		display: none;
	}
}