/* Homepage "Hot Products" carousel: continuously drifting ribbon.
   Card visuals come from the shop's own .shop-card (style.css); this file
   only sizes the cards for the ribbon and animates the track.
   Breakpoints follow the site convention: 640 / 768 / 1200 / 1600. */

.hot-products {
	--hp-cw: 232px;
	--hp-gap: 20px;
	padding: 40px 0 40px;
	overflow-x: clip;
	display: flex;
	flex-direction: column;
}
/* DOM order is header, controls, ribbon (so the pause button is reached first
   by keyboard); visually the ribbon comes before the controls. */
.hot-products__inner { order: 1; }
.hot-products__marquee { order: 2; }
.hot-products__controls { order: 3; }

/* ---- Header (same rhythm as the section it replaces) ---- */
.hot-products__header { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hot-products__eyebrow { margin: 0; font: 500 14px/22px var(--nios-font); color: var(--nios-accent); }
.hot-products__title { margin: 0; font: 700 28px/36px var(--nios-font); color: var(--nios-ink); text-wrap: balance; }
.hot-products__subtitle { margin: 0; font: 400 15px/24px var(--nios-font); color: #6d665f; }

/* ---- Ribbon ---- */
.hot-products__marquee {
	margin-top: 28px;
	overflow: hidden;              /* a <noscript> rule and the reduced-motion query below turn it into a scrollable row */
	padding-block: 2px;
	scrollbar-width: thin;
}
.hot-products__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	width: max-content;
}
.hot-products .shop-card {
	flex: none;
	width: var(--hp-cw);
	margin-inline-start: var(--hp-gap);   /* spacing lives on the card so half the track is exactly one set */
}
.hot-products .shop-card__media { aspect-ratio: 1; }
.hot-products .shop-card__desc { display: none; }
.hot-products .shop-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 38px;
}

/* ---- Motion (only once JS has built the two seamless sets) ---- */
.hot-products.is-js .hot-products__marquee {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.hot-products.is-js .hot-products__track {
	animation: hot-products-drift var(--hp-dur, 60s) linear infinite;
	will-change: transform;
}
.hot-products.is-paused .hot-products__track {
	animation-play-state: paused;
}
/* Hover pause only where hover is real; on touch a tap would leave :hover stuck. */
@media (hover: hover) {
	.hot-products.is-js[data-pause-hover="1"] .hot-products__marquee:hover .hot-products__track {
		animation-play-state: paused;
	}
}
/* Keyboard focus inside the ribbon: stop the drift and let the browser scroll
   the focused card into view (JS resets it when focus leaves). */
.hot-products.is-focus-scroll .hot-products__marquee { overflow-x: auto; }
.hot-products.is-focus-scroll .hot-products__track { animation: none; transform: none; }
/* Site is RTL: the ribbon flows toward the reading end, new cards enter from the left. */
@keyframes hot-products-drift { to { transform: translateX(50%); } }

/* ---- Pause control (WCAG 2.2.2: moving content that lasts > 5s needs a stop) ---- */
.hot-products__controls { display: flex; justify-content: center; margin-top: 24px; }
.hot-products__pause {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--nios-border);
	border-radius: 999px;
	background: #fff;
	color: var(--nios-ink);
	font: 500 13px/20px var(--nios-font);
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.hot-products__pause[hidden] { display: none; }
.hot-products__pause:hover { background: var(--nios-bg-panel); border-color: var(--nios-accent); }
.hot-products__pause:focus-visible { outline: 2px solid var(--nios-accent); outline-offset: 3px; }
.hot-products__icon--play { display: none; }
.hot-products.is-paused .hot-products__icon--play { display: block; }
.hot-products.is-paused .hot-products__icon--pause { display: none; }

@media (min-width: 640px) {
	.hot-products { --hp-cw: 272px; }
}
@media (min-width: 768px) {
	.hot-products { padding: 48px 0 48px; }
	.hot-products__eyebrow { font-size: 15px; line-height: 24px; }
	.hot-products__title { font-size: 34px; line-height: 42px; }
	.hot-products__subtitle { font-size: 16px; line-height: 26px; }
	.hot-products__marquee { margin-top: 32px; }
}
@media (min-width: 1200px) {
	.hot-products { --hp-cw: 288px; padding: 56px 0 56px; }
	.hot-products__title { font-size: 40px; line-height: 50px; }
	.hot-products__subtitle { font-size: 18px; line-height: 28px; }
	.hot-products__marquee { margin-top: 36px; }
}
@media (min-width: 1600px) {
	.hot-products { --hp-cw: 312px; padding: 48px 0 64px; }
	.hot-products__title { font-size: 44px; line-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.hot-products__marquee { overflow-x: auto; }
	.hot-products.is-js .hot-products__marquee { -webkit-mask-image: none; mask-image: none; }
	.hot-products.is-js .hot-products__track { animation: none; }
	.hot-products .shop-card__media img { transition: none; }
}