/* Home hero slider — a real redesign, not the old static hero with a fade
   bolted on. Signature move: each slide is a colored light-pool (radial
   gradients only, no new images) the product photo floats in, revealed by a
   diagonal curtain wipe instead of a crossfade. Colors are exclusively the
   theme's own --ref-* / --shelo-* tokens — no new hues introduced. */

.ref-hero-slider {
	--hero-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--hero-wipe: 900ms;
	height: 640px;
	background: var(--ref-deep);
}

.ref-hero.ref-hero-slider::after {
	content: none;
}

.ref-hero-track {
	position: relative;
	height: 100%;
}

.ref-hero-slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	clip-path: inset(0 0 0 100%);
	background: radial-gradient(120% 140% at 15% -10%, var(--glow-a) 0%, transparent 55%),
		radial-gradient(90% 110% at 95% 115%, var(--glow-b) 0%, transparent 60%),
		var(--glow-base);
}

.ref-hero-slide.is-settling {
	clip-path: inset(0);
	transition: none;
}

.ref-hero-slide.is-active {
	z-index: 3;
	clip-path: inset(0);
	transition: clip-path var(--hero-wipe) var(--hero-ease);
}

.tint-brand {
	--glow-base: linear-gradient(160deg, #eaf8ff 0%, #dcf1ff 100%);
	--glow-a: rgba(9, 104, 220, .22);
	--glow-b: rgba(37, 199, 133, .16);
}

.tint-catalog {
	--glow-base: linear-gradient(160deg, #eef4fb 0%, #dbe8f6 100%);
	--glow-a: rgba(8, 35, 68, .24);
	--glow-b: rgba(9, 104, 220, .18);
}

.tint-affiliate {
	--glow-base: linear-gradient(160deg, #fff6ea 0%, #ffe9c9 100%);
	--glow-a: rgba(255, 177, 27, .30);
	--glow-b: rgba(8, 35, 68, .12);
}

.tint-shipping {
	--glow-base: linear-gradient(160deg, #eafff6 0%, #d7f7e8 100%);
	--glow-a: rgba(37, 199, 133, .28);
	--glow-b: rgba(9, 104, 220, .14);
}

/* Slow ambient drift on the color pools — pure decoration, always subtle */
.ref-hero-slide::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: inherit;
	opacity: 0;
	animation: heroDrift 16s ease-in-out infinite;
}

.ref-hero-slide.is-active::before {
	opacity: 1;
}

@keyframes heroDrift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-2%, 2%) scale(1.04); }
}

.ref-hero-slide .ref-hero-grid {
	position: relative;
	z-index: 2;
	height: 100%;
}

/* ---------- Copy ---------- */

.ref-hero-slide .ref-kicker,
.ref-hero-slide h1,
.ref-hero-slide .ref-hero-slide-title,
.ref-hero-slide .ref-hero-copy > p:not(.ref-kicker):not(.ref-hero-slide-title),
.ref-hero-slide .ref-actions {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 640ms var(--hero-ease), transform 640ms var(--hero-ease);
}

.ref-hero-slide.is-active .ref-kicker { transition-delay: 120ms; }
.ref-hero-slide.is-active h1,
.ref-hero-slide.is-active .ref-hero-slide-title { transition-delay: 220ms; }
.ref-hero-slide.is-active .ref-hero-copy > p:not(.ref-kicker):not(.ref-hero-slide-title) { transition-delay: 340ms; }
.ref-hero-slide.is-active .ref-actions { transition-delay: 440ms; }

.ref-hero-slide.is-active .ref-kicker,
.ref-hero-slide.is-active h1,
.ref-hero-slide.is-active .ref-hero-slide-title,
.ref-hero-slide.is-active .ref-hero-copy > p:not(.ref-kicker):not(.ref-hero-slide-title),
.ref-hero-slide.is-active .ref-actions {
	opacity: 1;
	transform: translateY(0);
}

.ref-hero-copy { padding-left: 90px; }

.ref-kicker {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin-bottom: 20px !important;
	padding: 7px 16px 7px 10px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(8, 35, 68, .1);
	color: var(--ref-deep) !important;
	font-size: 11px !important;
	font-weight: 800;
	letter-spacing: .06em;
}

.ref-kicker .shelo-icon { width: 15px; height: 15px; color: var(--ref-blue); }

.ref-hero-slider .ref-hero-grid {
	grid-template-columns: 58% 42%;
}

/* reference.css's unconditional `.ref-hero-copy > p:not(.ref-kicker)` rule
   (0,2,1) also matches .ref-hero-slide-title (a <p>); match its specificity
   here (.ref-hero-copy + p + class) so this file's later load order wins. */
.ref-hero-copy h1,
.ref-hero-copy p.ref-hero-slide-title {
	max-width: 620px;
	margin: 0 0 18px;
	color: var(--ref-deep);
	font-size: clamp(36px, 3.6vw, 54px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.04em;
	opacity: 1;
}

.ref-hero-copy h1 span,
.ref-hero-copy p.ref-hero-slide-title span {
	color: var(--ref-blue);
	font-style: italic;
}

.ref-hero-copy > p:not(.ref-kicker):not(.ref-hero-slide-title) {
	max-width: 400px;
	margin-bottom: 32px !important;
	color: var(--ref-ink);
	opacity: .7;
	font-size: 17px !important;
	line-height: 1.5;
}

.ref-actions { gap: 16px !important; }

.ref-hero-slide .ref-btn {
	min-height: 54px !important;
	padding: 0 15px 0 26px !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 800;
	box-shadow: 0 14px 28px rgba(8, 35, 68, .14);
	transition: transform 220ms var(--hero-ease), box-shadow 220ms var(--hero-ease);
}

.ref-hero-slide .ref-btn .shelo-icon {
	width: 32px;
	height: 32px;
	margin-left: 6px;
	padding: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	transition: transform 260ms var(--hero-ease);
}

.ref-hero-slide .ref-btn-outline .shelo-icon,
.ref-hero-slide .ref-btn-dark .shelo-icon {
	background: rgba(9, 104, 220, .1);
}

.ref-hero-slide .ref-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 34px rgba(8, 35, 68, .2);
}

.ref-hero-slide .ref-btn:hover .shelo-icon { transform: translateX(3px); }
.ref-hero-slide .ref-btn:active { transform: translateY(-1px) scale(.98); }

/* ---------- Visual: product floats in its light pool ---------- */

.ref-hero-visual {
	display: grid;
	place-items: center;
}

.ref-hero-slide .ref-hero-family-image {
	position: static !important;
	width: auto !important;
	height: auto !important;
	max-width: 640px;
	max-height: 540px;
	object-fit: contain;
	filter: drop-shadow(0 30px 40px rgba(8, 35, 68, .22));
	transform: scale(.94) translateY(10px);
	transition: transform 900ms var(--hero-ease);
	animation: heroFloat 5s ease-in-out infinite;
	animation-play-state: paused;
}

.ref-hero-slide.is-active .ref-hero-family-image {
	transform: scale(1) translateY(0);
	animation-play-state: running;
}

@keyframes heroFloat {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -14px; }
}

/* catalog-cover-2026.webp is a real 1:1 photo (no more portrait book
   mockup) and the cropped shipping shot is close to square too — both
   fill a squarer box better than the wide default. */
.tint-catalog .ref-hero-family-image,
.tint-shipping .ref-hero-family-image {
	max-width: 480px;
	max-height: 540px;
}

/* ---------- Arrows ---------- */

.ref-hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 54px;
	height: 54px;
	margin-top: -27px;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--ref-deep);
	background: #fff;
	box-shadow: 0 10px 26px rgba(8, 35, 68, .16);
	cursor: pointer;
	transition: transform 220ms var(--hero-ease), background 220ms var(--hero-ease), color 220ms var(--hero-ease);
}

.ref-hero-arrow:hover { background: var(--ref-blue); color: #fff; transform: scale(1.08); }
.ref-hero-arrow:active { transform: scale(.94); }
.ref-hero-arrow .shelo-icon { width: 22px; height: 22px; }
.ref-hero-prev { left: 28px; }
.ref-hero-next { right: 28px; }

/* ---------- Bottom bar: counter + segmented progress + play/pause ---------- */

.ref-hero-controls {
	position: absolute;
	left: 90px;
	right: 28px;
	bottom: 28px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 18px;
	transform: none;
}

.ref-hero-counter {
	display: flex;
	align-items: baseline;
	gap: 2px;
	color: var(--ref-deep);
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
}

.ref-hero-counter[data-hero-total]::after {
	content: " / " attr(data-hero-total);
	color: rgba(8, 35, 68, .4);
	font-weight: 700;
}

.ref-hero-play {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	display: grid;
	flex: none;
	place-items: center;
	color: var(--ref-deep);
	background: #fff;
	box-shadow: 0 6px 16px rgba(8, 35, 68, .12);
	cursor: pointer;
	transition: transform 160ms ease-out;
}

.ref-hero-play:active { transform: scale(.9); }
.ref-hero-play .shelo-icon { width: 14px; height: 14px; }

.ref-hero-dots {
	display: flex;
	flex: 1;
	gap: 8px;
	min-width: 0;
}

.ref-hero-dot {
	position: relative;
	flex: 1;
	height: 4px;
	max-width: 96px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(8, 35, 68, .14);
	cursor: pointer;
}

.ref-hero-dot-fill {
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left;
	border-radius: 999px;
	background: var(--ref-deep);
}

.ref-hero-dot.is-active .ref-hero-dot-fill {
	transform: scaleX(1);
	transition: transform linear var(--hero-duration, 6000ms);
}

.ref-hero-dot.is-active.is-paused .ref-hero-dot-fill { transition-duration: 0ms; }

.ref-hero-dot:not(.is-active) .ref-hero-dot-fill {
	transform: scaleX(0);
	transition: none;
}

@media (max-width: 1180px) {
	.ref-hero-copy { padding-left: 60px; }
	.ref-hero-controls { left: 60px; }
}

@media (max-width: 780px) {
	.ref-hero-slider { height: 640px; }

	.ref-hero-slide {
		background: radial-gradient(140% 90% at 20% 0%, var(--glow-a) 0%, transparent 60%),
			radial-gradient(120% 90% at 100% 100%, var(--glow-b) 0%, transparent 60%),
			var(--glow-base);
	}

	/* mobile-2026.css owns .ref-hero-grid / .ref-hero-visual / .ref-hero-family-image
	   with an absolute-overlay layout built for the old single-image hero
	   (display:block, visual as a full-bleed absolute backdrop, content:url()
	   hardcoded to one photo). This redesign uses a normal stacked layout
	   instead, so all three are fully re-declared here at higher specificity. */
	.ref-hero-slider .ref-hero-grid {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 100%;
		text-align: center;
	}

	.ref-hero-slider .ref-hero-copy {
		width: auto;
		padding: 40px 24px 0;
		text-align: center;
	}

	.ref-hero-slider .ref-actions { justify-content: center; }
	.ref-hero-slider .ref-actions .ref-btn-outline { display: inline-flex; }

	.ref-kicker { margin: 0 auto 16px !important; font-size: 10px !important; }
	.ref-hero-copy h1, .ref-hero-copy p.ref-hero-slide-title { width: auto; max-width: none; font-size: 40px; letter-spacing: -.03em; text-transform: none; opacity: 1; }
	.ref-hero-copy > p:not(.ref-kicker):not(.ref-hero-slide-title) { width: auto; max-width: 300px; margin-inline: auto; font-size: 15px !important; }

	.ref-hero-slider .ref-hero-visual {
		position: relative;
		inset: auto;
		z-index: auto;
		flex: 1;
		min-height: 0;
		padding-top: 4px;
		pointer-events: auto;
	}

	.ref-hero-slider .ref-hero-family-image {
		content: normal;
		right: auto;
		left: auto;
		top: auto;
		bottom: auto;
		filter: drop-shadow(0 20px 24px rgba(8, 35, 68, .18));
		max-width: 300px;
		max-height: 280px;
	}

	.tint-catalog .ref-hero-family-image,
	.tint-shipping .ref-hero-family-image { max-width: 260px; max-height: 300px; }

	.ref-hero-arrow { width: 40px; height: 40px; margin-top: -20px; top: auto; bottom: 24px; }
	.ref-hero-prev { left: 24px; }
	.ref-hero-next { right: 24px; }
	.ref-hero-controls { left: 24px; right: 24px; bottom: -2px; gap: 12px; }
	.ref-hero-counter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ref-hero-slide,
	.ref-hero-slide::before,
	.ref-hero-slide .ref-kicker,
	.ref-hero-slide h1,
	.ref-hero-slide .ref-hero-slide-title,
	.ref-hero-slide .ref-hero-copy > p:not(.ref-kicker):not(.ref-hero-slide-title),
	.ref-hero-slide .ref-actions,
	.ref-hero-slide .ref-hero-family-image {
		animation: none !important;
		transition-duration: 1ms !important;
		transform: none !important;
	}

	.ref-hero-slide { clip-path: none; opacity: 0; transition: opacity 200ms ease; }
	.ref-hero-slide.is-active { opacity: 1; }
}