/* ==========================================================================
   Theme blocks
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */

/* The hero frame sits half the root padding outside the floating header on
   every side, and stops there instead of running edge to edge. */
.dss-hero {
	--hero-inset: calc(var(--wp--style--root--padding-left, var(--dss-gutter)) / 2);
	/* The header bar is capped at the wide size; the frame clears it by one
	   --hero-inset at each end, exactly as it does on narrower screens. */
	--hero-max: calc(var(--wp--style--global--wide-size, 1440px) + var(--hero-inset) * 2);
	--hero-h: calc(100svh - var(--hero-inset) * 2 - var(--dss-admin-bar));
	/* Width of the stage. Everything inside scales off this instead of the
	   viewport, so the type and the insets stop growing when the frame does. */
	--hero-w: min(100vw - var(--hero-inset) * 2, var(--hero-max));
	/* The block is full bleed, so padding — not a max-width — centres the stage:
	   alignfull's own negative margins outweigh anything this rule could set. */
	--hero-side: calc((100vw - var(--hero-w)) / 2);
	--hero-pad: clamp(20px, calc(var(--hero-w) * 0.04), 64px);
	--hero-floor: clamp(22px, calc(var(--hero-w) * 0.03), 40px);
	position: relative;
	isolation: isolate;
	padding-inline: var(--hero-side);
}

/* On the landing page the hero slides under the floating header. */
.dss-main > .dss-hero:first-child {
	margin-top: calc(-1 * (var(--dss-header-h) + var(--dss-gutter) * 2 - var(--hero-inset)));
}

.dss-hero--tall {
	--hero-h: min(86svh, 920px);
}

.dss-hero--medium {
	--hero-h: min(64svh, 680px);
}

/* Briefly disables entrance transitions while JS resets the server-rendered
   "active" state to its base state, so the reset is an instant, invisible
   snap instead of a reverse animation — see initHero() in site.js. */
.dss-hero.is-priming * {
	transition: none !important;
}

.dss-hero__ambient {
	position: absolute;
	z-index: -1;
	inset: 12% 8% -6%;
	opacity: 0.5;
	filter: blur(80px) saturate(1.5);
	pointer-events: none;
}

.dss-hero__ambient-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.dss-hero__ambient-img.is-active {
	opacity: 1;
}

.dss-hero__stage {
	position: relative;
	overflow: hidden;
	height: var(--hero-h);
	min-height: 540px;
	border-radius: var(--dss-r-xl);
	background: var(--dss-ink);
}

.dss-hero__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity 1.1s ease, visibility 0s 1.1s;
}

.dss-hero__slide.is-active {
	z-index: 1;
	visibility: visible;
	opacity: 1;
	transition: opacity 1.1s ease, visibility 0s 0s;
}

/* Scrim behind the copy. Wide screens darken from the left, where the text and
   the controls sit, and leave the right half — and the promo banner — clear. */
.dss-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(10, 12, 16, 0.82) 0%, rgba(10, 12, 16, 0.66) 26%, rgba(10, 12, 16, 0.3) 52%, rgba(10, 12, 16, 0) 78%),
		linear-gradient(to top, rgba(10, 12, 16, 0.45) 0%, rgba(10, 12, 16, 0.1) 32%, rgba(10, 12, 16, 0) 58%),
		linear-gradient(to bottom, rgba(10, 12, 16, 0.28) 0%, rgba(10, 12, 16, 0) 22%);
	pointer-events: none;
}

/* Narrow screens: the copy runs the full width low down, so darken upwards. */
@media (max-width: 782px) {
	.dss-hero__slide::after {
		background:
			linear-gradient(to top, rgba(10, 12, 16, 0.86) 0%, rgba(10, 12, 16, 0.64) 28%, rgba(10, 12, 16, 0.22) 56%, rgba(10, 12, 16, 0) 80%),
			linear-gradient(to bottom, rgba(10, 12, 16, 0.28) 0%, rgba(10, 12, 16, 0) 22%);
	}
}

.dss-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.1);
	transition: transform 9s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.dss-hero__slide.is-active .dss-hero__img {
	transform: scale(1.001);
}

.dss-hero__copy {
	position: absolute;
	z-index: 2;
	right: var(--hero-pad);
	bottom: clamp(96px, calc(var(--hero-w) * 0.11), 132px);
	left: var(--hero-pad);
	color: #fff;
}

.dss-hero__copy > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 1.1s var(--dss-ease);
}

.dss-hero__slide.is-active .dss-hero__copy > * {
	opacity: 1;
	transform: none;
}

.dss-hero__slide.is-active .dss-hero__copy > :nth-child(1) {
	transition-delay: 0.25s;
}

.dss-hero__slide.is-active .dss-hero__copy > :nth-child(2) {
	transition-delay: 0.35s;
}

.dss-hero__slide.is-active .dss-hero__copy > :nth-child(3) {
	transition-delay: 0.5s;
}

.dss-hero__slide.is-active .dss-hero__copy > :nth-child(4) {
	transition-delay: 0.62s;
}

.dss-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--dss-r-pill);
	background: rgba(255, 255, 255, 0.12);
	font-family: var(--dss-mono);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.dss-hero__eyebrow .dss-dot {
	background: #fff;
	animation: none;
}

.dss-hero__title {
	max-width: 11ch;
	margin: 0;
	color: #fff;
	font-size: clamp(3.25rem, calc(var(--hero-w) * 0.094), 10rem);
	font-weight: 600;
	line-height: 0.88;
	letter-spacing: -0.065em;
}

.dss-hero__text {
	max-width: 46ch;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1rem, calc(var(--hero-w) * 0.0135), 1.25rem);
	line-height: 1.45;
}

.dss-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.dss-hero__controls {
	position: absolute;
	z-index: 3;
	right: var(--hero-pad);
	bottom: var(--hero-floor);
	left: var(--hero-pad);
	display: flex;
	align-items: center;
	gap: 18px;
	color: #fff;
}

.dss-hero__counter {
	flex: none;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--dss-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.dss-hero__counter b {
	color: #fff;
	font-weight: 500;
}

.dss-hero__dots {
	display: flex;
	flex: 1;
	gap: 6px;
}

.dss-hero__dot {
	display: flex;
	flex: 0 1 72px;
	align-items: center;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.dss-hero__dot span {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.28);
}

.dss-hero__dot span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

.dss-hero__dot.is-active span::after {
	transform: scaleX(1);
}

.dss-hero.is-ticking .dss-hero__dot.is-active span::after {
	animation: dss-progress var(--dss-hero-interval, 7s) linear both;
}

.dss-hero__pause {
	flex: none;
}

.dss-hero__play {
	display: none;
}

.dss-hero.is-paused .dss-hero__pause-bars {
	display: none;
}

.dss-hero.is-paused .dss-hero__play {
	display: block;
}

/* Promo banner. A layer of its own, outside the stage, so it stays put while
   the slides change. Narrow screens get it in flow, under the whole slider. */
.dss-hero__promo {
	display: block;
	overflow: hidden;
	/* The hero already pads itself by --hero-inset, so this lines up with the stage. */
	margin: 12px 0 0;
	border-radius: var(--dss-r-lg);
	background: rgba(10, 12, 16, 0.4);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 30px 60px -24px rgba(0, 0, 0, 0.7);
	animation: dss-hero-promo-in 0.9s var(--dss-ease) 0.45s both;
}

.dss-hero__promo-img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.9s var(--dss-ease);
}

@keyframes dss-hero-promo-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

a.dss-hero__promo:hover {
	box-shadow: 0 0 0 2px var(--dss-accent), 0 36px 70px -24px rgba(36, 86, 255, 0.55);
}

a.dss-hero__promo:hover .dss-hero__promo-img {
	transform: scale(1.04);
}

a.dss-hero__promo:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* Wide screens: the banner lifts out of the flow into the bottom-right corner
   of the stage. The copy keeps clear of it and the controls stop stretching, so
   the pause button sits beside the dots. */
@media (min-width: 783px) {
	.dss-hero.has-promo {
		--dss-hero-promo-w: clamp(300px, calc(var(--hero-w) * 0.34), 560px);
	}

	.dss-hero.has-promo .dss-hero__promo {
		position: absolute;
		z-index: 2;
		/* The stage sits one --hero-side inside this element's border box. */
		right: calc(var(--hero-side) + var(--hero-pad));
		bottom: var(--hero-floor);
		width: var(--dss-hero-promo-w);
		margin: 0;
	}

	.dss-hero.has-promo .dss-hero__copy {
		right: calc(var(--hero-pad) + var(--dss-hero-promo-w) + 32px);
	}

	/* Shrink to fit so the row ends well before the banner. Capping it with a
	   max-width instead let the counter shrink and wrap its digits. */
	.dss-hero.has-promo .dss-hero__controls {
		right: auto;
	}

	/* Without the full-width row the dots need a track of their own: their
	   spans are empty, so an intrinsic basis would collapse them to the gaps. */
	.dss-hero.has-promo .dss-hero__dots {
		flex: 0 0 clamp(150px, calc(var(--hero-w) * 0.16), 228px);
	}
}

@keyframes dss-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@media (max-width: 600px) {
	.dss-hero__stage {
		min-height: 600px;
	}

	.dss-hero__copy {
		bottom: 88px;
	}

	.dss-hero__counter {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dss-hero__promo {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.dss-tiles {
	display: grid;
	grid-template-columns: repeat(var(--dss-cols, 3), minmax(0, 1fr));
	gap: var(--dss-gutter);
}

.dss-tiles--bento {
	grid-auto-flow: dense;
	grid-auto-rows: clamp(230px, 22vw, 340px);
}

.dss-tiles--bento .dss-tile:first-child {
	grid-row: span 2;
	grid-column: span 2;
}

.dss-tiles--grid .dss-tile {
	aspect-ratio: 4 / 5;
}

.dss-tile {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	min-height: 220px;
	border-radius: var(--dss-r-lg);
	background: var(--dss-surface);
	color: var(--dss-ink);
	text-decoration: none;
}

.dss-tile:hover {
	color: var(--dss-ink);
}

.dss-tile__media {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding:0;
	background: radial-gradient(90% 80% at 50% 40%, #fff 0%, #fff 40%, var(--dss-mist) 100%);
}

.dss-tile:first-child .dss-tile__media {
	padding: 0;
}

.dss-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*mix-blend-mode: multiply;*/
	transition: transform 1.2s var(--dss-ease);
}

.dss-tile:hover .dss-tile__img {
	transform: scale(1.07) rotate(-2deg);
}

.dss-tile__index {
	position: absolute;
	top: 20px;
	left: 22px;
	color: var(--dss-ink-50);
	font-family: var(--dss-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.dss-tile__label {
	position: absolute;
	bottom: 12px;
	left: 12px;
	display: flex;
	max-width: calc(100% - 92px);
	flex-direction: column;
	gap: 4px;
	padding: 12px 16px;
	border: 1px solid var(--dss-glass-border);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: var(--dss-blur);
	backdrop-filter: var(--dss-blur);
}

.dss-tile__name {
	font-size: clamp(1.125rem, 1.5vw, 1.5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.dss-tiles--bento .dss-tile:first-child .dss-tile__name {
	font-size: clamp(1.75rem, 3.4vw, 3.25rem);
	letter-spacing: -0.05em;
}

.dss-tile__count {
	color: var(--dss-ink-50);
	font-family: var(--dss-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dss-tile__arrow {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--dss-ink);
	color: #fff;
	transition: background-color 0.3s ease, transform 0.7s var(--dss-ease);
}

.dss-tile:hover .dss-tile__arrow {
	background: var(--dss-accent);
	transform: rotate(45deg);
}

@media (max-width: 1000px) {
	.dss-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dss-tiles--bento {
		grid-auto-rows: clamp(220px, 44vw, 320px);
	}

	.dss-tiles--bento .dss-tile:first-child {
		grid-row: span 1;
	}
}

@media (max-width: 520px) {
	.dss-tiles--bento {
		grid-auto-rows: 210px;
	}

	.dss-tile__label {
		right: 12px;
		bottom: 12px;
		padding: 10px 12px;
	}

	.dss-tile__arrow {
		top: 12px;
		bottom: auto;
		width: 40px;
		height: 40px;
	}
}

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.dss-product {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 8px;
	border: 1px solid var(--dss-line);
	border-radius: var(--dss-r-lg);
	background: var(--dss-surface);
	transition: translate 0.6s var(--dss-ease), box-shadow 0.6s var(--dss-ease), border-color 0.3s ease;
}

.dss-product,
.dss-product *,
.dss-rail-more {
	box-sizing: border-box;
}

/* Neutralise WooCommerce loop styles that leak into the card inside ul.products. */
.woocommerce ul.products li.product .dss-product__title {
	padding: 0;
}

.woocommerce .products .dss-product__facts {
	margin: 2px 0 0;
	padding: 0;
}

.woocommerce .products .dss-product__facts::before,
.woocommerce .products .dss-product__facts::after {
	content: none;
}

/* TI Wishlist prints its button after the card; float it over the image corner instead. */
.woocommerce ul.products li.product:has(> .dss-product) {
	position: relative;
	container-type: inline-size;
}

.woocommerce ul.products li.product > .tinv-wraper {
	position: absolute;
	z-index: 2;
	top: calc(100cqw - 56px);
	right: 20px;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product > .tinv-wraper .tinv-wishlist-clear,
.woocommerce ul.products li.product > .tinv-wraper .tinvwl-tooltip,
.woocommerce ul.products li.product > .tinv-wraper .tinvwl_add_to_wishlist-text {
	display: none;
}

.woocommerce ul.products li.product > .tinv-wraper .tinvwl_add_to_wishlist_button {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dss-glass-border);
	border-radius: 50%;
	background: var(--dss-glass);
	color: var(--dss-ink);
	font-size: 0;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.3s ease, color 0.25s ease, background-color 0.25s ease;
	-webkit-backdrop-filter: var(--dss-blur);
	backdrop-filter: var(--dss-blur);
}

.woocommerce ul.products li.product > .tinv-wraper .tinvwl_add_to_wishlist_button::before {
	margin: 0;
	font-size: 16px;
	line-height: 1;
}

.woocommerce ul.products li.product:hover > .tinv-wraper .tinvwl_add_to_wishlist_button,
.woocommerce ul.products li.product > .tinv-wraper .tinvwl_add_to_wishlist_button:focus-visible,
.woocommerce ul.products li.product > .tinv-wraper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	opacity: 1;
}

.woocommerce ul.products li.product > .tinv-wraper .tinvwl_add_to_wishlist_button:hover,
.woocommerce ul.products li.product > .tinv-wraper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	background: var(--dss-accent);
	color: #fff;
}

/* Touch screens have no hover, so keep the heart visible there. */
@media (hover: none) {
	.woocommerce ul.products li.product > .tinv-wraper .tinvwl_add_to_wishlist_button {
		opacity: 1;
	}
}

.dss-product:hover {
	border-color: transparent;
	box-shadow: var(--dss-shadow-float);
	translate: 0 -4px;
}

/* The title link covers the whole card, so show its focus ring on the card. */
.dss-product:has(.dss-product__title a:focus-visible) {
	outline: 2px solid var(--dss-accent);
	outline-offset: 3px;
}

.dss-product__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: calc(var(--dss-r-lg) - 8px);
	background: var(--dss-base);
}

.dss-product__link {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 12%;
}

.dss-product__img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 0.5s ease, transform 0.9s var(--dss-ease);
}

.dss-product:hover .dss-product__img {
	transform: scale(1.06);
}

.dss-product__img--alt {
	opacity: 0;
}

.dss-product.has-alt:hover .dss-product__img:not(.dss-product__img--alt) {
	opacity: 0;
}

.dss-product.has-alt:hover .dss-product__img--alt {
	opacity: 1;
}

.dss-product__badges {
	position: absolute;
	z-index: 1;
	top: 12px;
	left: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dss-product__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 10px 0;
}

.dss-product__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	margin: 0;
	color: var(--dss-ink-50);
	font-family: var(--dss-mono);
	font-size: 0.6875rem;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dss-product__cat {
	overflow: hidden;
	color: var(--dss-accent);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dss-product__sku {
	position: absolute;
	z-index: 1;
	top: 12px;
	right: 12px;
	overflow: hidden;
	max-width: calc(100% - 24px);
	padding: 5px 9px;
	border: 1px solid var(--dss-glass-border);
	border-radius: var(--dss-r-pill);
	background: var(--dss-glass);
	color: var(--dss-ink-70);
	font-family: var(--dss-mono);
	font-size: 0.625rem;
	line-height: 1;
	letter-spacing: 0.04em;
	text-overflow: ellipsis;
	white-space: nowrap;
	-webkit-backdrop-filter: var(--dss-blur);
	backdrop-filter: var(--dss-blur);
}

.dss-product__sku-label {
	color: var(--dss-ink-50);
}

/* Badges win the top-left corner; the SKU chip steps aside when both are present. */
.dss-product__badges ~ .dss-product__sku {
	max-width: calc(50% - 16px);
}

.dss-product__title {
	display: -webkit-box;
	overflow: hidden;
	min-height: 2.6em;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.dss-product__title a {
	color: var(--dss-ink);
	text-decoration: none;
	transition: color 0.25s ease;
}

.dss-product__title a:focus-visible {
	outline: none;
}

/* Stretch the title link over the card; the action button sits above it. */
.dss-product__title a::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
}

.dss-product:hover .dss-product__title a {
	color: var(--dss-accent);
}

.dss-product__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--dss-ink-50);
	font-size: 0.8125rem;
	line-height: 1.45;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.dss-product__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.dss-product__facts li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--dss-r-pill);
	background: var(--dss-base);
	color: var(--dss-ink-70);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
}

.dss-product__facts .is-stock::before,
.dss-product__facts .is-backorder::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1f9d55;
	box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.16);
}

.dss-product__facts .is-low {
	background: var(--dss-accent-soft);
	color: var(--dss-accent-deep);
}

.dss-product__facts .is-low::before {
	background: var(--dss-accent);
	box-shadow: 0 0 0 3px rgba(36, 86, 255, 0.18);
}

.dss-product__facts .is-backorder::before {
	background: #d98e04;
	box-shadow: 0 0 0 3px rgba(217, 142, 4, 0.18);
}

.dss-product__foot {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin: auto 0 0;
	padding: 14px 4px 4px 10px;
}

/* Hairline above the price row, kept off the card edges. */
.dss-product__foot::before {
	content: "";
	position: absolute;
	top: 0;
	right: 6px;
	left: 10px;
	border-top: 1px solid var(--dss-line);
}

.dss-product__body {
	padding-bottom: 16px;
}

.dss-product__price {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	margin: 0;
}

.dss-product__from {
	color: var(--dss-ink-50);
	font-family: var(--dss-mono);
	font-size: 0.625rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dss-product__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	color: var(--dss-ink);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
}

.dss-product__amount del {
	order: 2;
	color: var(--dss-ink-50);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
}

.dss-product__amount ins {
	color: var(--dss-accent);
	text-decoration: none;
}

.dss-product__add {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 44px;
	min-width: 44px;
	padding: 0 13px;
	border-radius: var(--dss-r-pill);
	background: var(--dss-ink);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, gap 0.5s var(--dss-ease), padding 0.5s var(--dss-ease);
}

.dss-product__add .dss-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	transition: transform 0.5s var(--dss-ease);
}

.dss-product__add-label {
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	transition: max-width 0.5s var(--dss-ease), opacity 0.3s ease;
}

.dss-product__add:hover,
.dss-product__add:focus-visible {
	background: var(--dss-accent);
	color: #fff;
}

.dss-product__add.is-link {
	background: var(--dss-surface);
	color: var(--dss-ink);
	box-shadow: inset 0 0 0 1px var(--dss-mist-deep);
}

.dss-product__add.is-link:hover,
.dss-product__add.is-link:focus-visible {
	background: var(--dss-ink);
	color: #fff;
	box-shadow: none;
}

.dss-product__add .dss-icon--check {
	display: none;
}

.dss-product__add.added {
	background: #1f9d55;
	color: #fff;
}

.dss-product__add.added .dss-icon--plus {
	display: none;
}

.dss-product__add.added .dss-icon--check {
	display: block;
}

.dss-product__add.loading {
	opacity: 0.65;
	pointer-events: none;
}

.dss-product__add.loading .dss-icon {
	animation: dss-product-spin 0.8s linear infinite;
}

/* WooCommerce appends a "View cart" link after the button; the header bag already shows it. */
.dss-product__foot .added_to_cart,
.woocommerce .dss-product .dss-product__foot a.added_to_cart {
	display: none;
}

@media (hover: hover) {
	.dss-product:hover .dss-product__add,
	.dss-product__add:focus-visible {
		gap: 8px;
		padding: 0 16px 0 18px;
	}

	.dss-product:hover .dss-product__add-label,
	.dss-product__add:focus-visible .dss-product__add-label {
		max-width: 9em;
		opacity: 1;
	}

	.dss-product:hover .dss-product__add.is-link .dss-icon {
		transform: translateX(2px);
	}
}

@keyframes dss-product-spin {
	to {
		transform: rotate(360deg);
	}
}

.dss-product--large .dss-product__title {
	font-size: 1.125rem;
}

@media (max-width: 782px) {
	.woocommerce ul.products .dss-product__excerpt {
		display: none;
	}
}

@media (max-width: 480px) {
	.dss-product {
		padding: 6px;
		border-radius: var(--dss-r-md);
	}

	.dss-product__media {
		border-radius: calc(var(--dss-r-md) - 6px);
	}

	.woocommerce ul.products .dss-product__body {
		padding: 12px 4px;
	}

	.woocommerce ul.products .dss-product__sku {
		display: none;
	}

	.woocommerce ul.products .dss-product__title {
		font-size: 0.875rem;
	}

	.woocommerce ul.products .dss-product__foot {
		padding: 12px 2px 2px 4px;
	}

	.woocommerce ul.products .dss-product__amount {
		font-size: 1.0625rem;
	}

	.woocommerce ul.products .dss-product__add {
		height: 38px;
		min-width: 38px;
		padding: 0 10px;
	}
}

/* --------------------------------------------------------------------------
   Rail end card
   -------------------------------------------------------------------------- */

.dss-rail-more {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	overflow: hidden;
	height: 100%;
	min-height: 280px;
	padding: clamp(20px, 2vw, 28px);
	border-radius: var(--dss-r-lg);
	background: var(--dss-electric);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.dss-rail-more::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -35%;
	bottom: -35%;
	width: 95%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 65%);
	transition: transform 0.9s var(--dss-ease);
}

.dss-rail-more:hover {
	color: #fff;
}

.dss-rail-more:hover::before {
	transform: scale(1.3);
}

.dss-rail-more__eyebrow {
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--dss-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dss-rail-more__count {
	display: block;
	font-size: clamp(3rem, 5vw, 4.75rem);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.06em;
	font-variant-numeric: tabular-nums;
}

.dss-rail-more__label {
	display: block;
	max-width: 16ch;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.0625rem;
	line-height: 1.3;
}

.dss-rail-more__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.875rem;
	font-weight: 500;
}

.dss-rail-more__arrow {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	color: var(--dss-ink);
	transition: transform 0.6s var(--dss-ease);
}

.dss-rail-more__arrow .dss-icon {
	width: 20px;
	height: 20px;
}

.dss-rail-more:hover .dss-rail-more__arrow {
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Rails (products, reviews)
   -------------------------------------------------------------------------- */

.dss-rail {
	--dss-cols: 4;
	position: relative;
}

.dss-rail__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px 24px;
	margin-bottom: clamp(22px, 3vw, 40px);
}

.dss-rail__title {
	flex: 1 1 auto;
	max-width: 15ch;
	margin: 0;
	font-size: clamp(2.125rem, 4.8vw, 4.5rem);
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.dss-rail__tools {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.dss-rail__tabs {
	flex-basis: 100%;
	order: 3;
}

.dss-rail__track {
	display: grid;
	grid-auto-columns: calc((100% - (var(--dss-cols) - 1) * var(--dss-gutter)) / var(--dss-cols));
	grid-auto-flow: column;
	gap: var(--dss-gutter);
	overflow-x: auto;
	/* Room inside the scroller so card borders, lift and shadow are not clipped. */
	margin: -12px 0 -28px;
	padding: 12px 0 28px;
	list-style: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.dss-rail__track::-webkit-scrollbar {
	display: none;
}

.dss-rail__item {
	min-width: 0;
	scroll-snap-align: start;
}

.dss-rail--grid .dss-rail__track {
	grid-auto-flow: row;
	grid-template-columns: repeat(var(--dss-cols), minmax(0, 1fr));
	row-gap: clamp(28px, 3vw, 48px);
	overflow: visible;
}

.dss-rail__panel[hidden] {
	display: none;
}

.dss-rail__panel:not([hidden]) {
	animation: dss-fade-up 0.6s var(--dss-ease);
}

.dss-rail__progress {
	position: relative;
	overflow: hidden;
	height: 2px;
	margin-top: 32px;
	border-radius: 2px;
	background: var(--dss-mist-deep);
}

.dss-rail__progress span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 25%;
	border-radius: 2px;
	background: var(--dss-ink);
	transition: width 0.3s ease;
}

.dss-rail.is-static .dss-rail__progress,
.dss-rail.is-static [data-dss-prev],
.dss-rail.is-static [data-dss-next] {
	display: none;
}

@media (max-width: 1100px) {
	.dss-rail {
		--dss-cols: 3 !important;
	}
}

@media (max-width: 782px) {
	.dss-rail {
		--dss-cols: 2 !important;
	}

	.dss-rail--rail .dss-rail__track {
		grid-auto-columns: 62%;
	}

	.dss-rail__tools [data-dss-prev],
	.dss-rail__tools [data-dss-next] {
		display: none;
	}
}

@media (max-width: 480px) {
	.dss-rail--rail .dss-rail__track {
		grid-auto-columns: 78%;
	}
}

/* --------------------------------------------------------------------------
   Product spotlight
   -------------------------------------------------------------------------- */

.dss-spotlight {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: var(--dss-gutter);
}

.dss-spotlight--reverse .dss-spotlight__media {
	order: 2;
}

.dss-spotlight__media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	min-height: clamp(380px, 46vw, 700px);
	padding: 10%;
	border-radius: var(--dss-r-xl);
	background: radial-gradient(80% 70% at 50% 45%, #fff 0%, #fff 45%, var(--dss-mist) 100%);
}

.dss-spotlight__img {
	width: 100%;
	height: 100%;
	max-height: 540px;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 1.4s var(--dss-ease);
}

.dss-spotlight__media:hover .dss-spotlight__img {
	transform: scale(1.05) rotate(-2deg);
}

.dss-spotlight__ribbon {
	position: absolute;
	top: 20px;
	left: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: var(--dss-r-pill);
	background: var(--dss-accent);
	color: #fff;
	font-family: var(--dss-mono);
	font-size: 0.6875rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dss-spotlight__ribbon .dss-icon {
	width: 12px;
	height: 12px;
}

.dss-spotlight__thumbs {
	position: absolute;
	bottom: 20px;
	left: 20px;
	display: flex;
	gap: 8px;
}

.dss-spotlight__thumbs img {
	width: 60px;
	height: 60px;
	padding: 4px;
	border: 1px solid var(--dss-line);
	border-radius: 14px;
	background: #fff;
	object-fit: contain;
}

.dss-spotlight__info {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(24px, 4vw, 56px);
	border-radius: var(--dss-r-xl);
	background: var(--dss-surface);
}

.dss-spotlight__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.2vw, 3.125rem);
	line-height: 1.02;
	letter-spacing: -0.045em;
}

.dss-spotlight__title a {
	color: var(--dss-ink);
}

.dss-spotlight__title a:hover {
	color: var(--dss-accent);
}

.dss-spotlight__summary {
	max-width: 54ch;
	margin: 0;
	color: var(--dss-ink-70);
	font-size: 1.0625rem;
}

.dss-spotlight__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}

.dss-spotlight__specs > div {
	padding: 14px 16px;
	border-radius: var(--dss-r-md);
	background: var(--dss-base);
}

.dss-spotlight__specs dt {
	color: var(--dss-ink-50);
	font-family: var(--dss-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dss-spotlight__specs dd {
	margin: 4px 0 0;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.dss-spotlight__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid var(--dss-line);
}

.dss-spotlight__price {
	font-size: clamp(1.625rem, 2.6vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.04em;
}

.dss-spotlight__price del {
	margin-right: 8px;
	color: var(--dss-ink-50);
	font-size: 0.55em;
	font-weight: 400;
}

.dss-spotlight__price ins {
	color: var(--dss-accent);
	text-decoration: none;
}

.dss-spotlight__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.dss-spotlight__actions .added_to_cart {
	color: var(--dss-accent);
	font-size: 0.875rem;
	font-weight: 500;
}

@media (max-width: 900px) {
	.dss-spotlight {
		grid-template-columns: minmax(0, 1fr);
	}

	.dss-spotlight--reverse .dss-spotlight__media {
		order: 0;
	}
}

/* --------------------------------------------------------------------------
   Vehicle finder
   -------------------------------------------------------------------------- */

.dss-vehicle {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	align-items: center;
	gap: clamp(28px, 5vw, 80px);
	overflow: hidden;
	isolation: isolate;
	padding: clamp(24px, 5vw, 72px);
	border-radius: var(--dss-r-xl);
	background: var(--dss-surface);
}

.dss-vehicle::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -70%;
	right: -18%;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(36, 86, 255, 0.26) 0%, rgba(36, 86, 255, 0) 65%);
}

.dss-vehicle__title {
	margin: 18px 0 0;
	font-size: clamp(2.125rem, 4.2vw, 4rem);
	line-height: 0.96;
	letter-spacing: -0.055em;
}

.dss-vehicle__subtitle {
	max-width: 40ch;
	margin: 18px 0 0;
	color: var(--dss-ink-70);
	font-size: 1.0625rem;
}

.dss-vehicle__form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--dss-line);
	border-radius: 14px 14px 28px 28px;
	background: var(--dss-base);
}

.dss-vehicle__field {
	position: relative;
	border-radius: 20px;
	background: var(--dss-surface);
	transition: box-shadow 0.3s ease;
}

.dss-vehicle__field:focus-within {
	box-shadow: 0 0 0 2px var(--dss-accent);
}

.dss-vehicle__field label {
	position: absolute;
	top: 14px;
	left: 18px;
	display: flex;
	gap: 8px;
	color: var(--dss-ink-50);
	font-family: var(--dss-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
}

.dss-vehicle__step {
	color: var(--dss-accent);
}

.dss-vehicle__field select {
	width: 100%;
	height: 76px;
	padding: 30px 40px 12px 18px;
	border: 0;
	border-radius: 20px;
	outline: none;
	background: transparent;
	color: var(--dss-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.dss-vehicle__field select:disabled {
	color: var(--dss-ink-50);
	cursor: not-allowed;
}

.dss-vehicle__field .dss-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 18px;
	height: 18px;
	color: var(--dss-ink-50);
	transform: translateY(-50%);
	pointer-events: none;
}

.dss-vehicle__submit {
	grid-column: 1 / -1;
	min-height: 60px;
	border-radius: 20px;
	font-size: 0.9375rem;
}

@media (max-width: 1000px) {
	.dss-vehicle {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.dss-vehicle__form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Stat
   -------------------------------------------------------------------------- */

.dss-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	height: 100%;
}

.dss-stat--card,
.dss-stat--accent {
	min-height: 220px;
	padding: clamp(20px, 2.4vw, 32px);
	border-radius: var(--dss-r-lg);
	background: var(--dss-surface);
}

.dss-stat--accent {
	background: var(--dss-electric);
	color: #fff;
}

.dss-stat__label {
	order: -1;
	max-width: 22ch;
	color: var(--dss-ink-70);
	font-size: 0.9375rem;
	line-height: 1.35;
}

.dss-stat--accent .dss-stat__label {
	color: rgba(255, 255, 255, 0.78);
}

.dss-stat__value {
	font-size: clamp(3rem, 5.6vw, 5.75rem);
	font-weight: 600;
	line-height: 0.88;
	letter-spacing: -0.065em;
	font-variant-numeric: tabular-nums;
}

.dss-stat--sm .dss-stat__value {
	font-size: clamp(1.75rem, 2.8vw, 2.75rem);
}

.dss-stat--lg .dss-stat__value {
	font-size: clamp(3.5rem, 6.4vw, 6.75rem);
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.dss-marquee {
	position: relative;
	overflow: hidden;
	padding-block: clamp(14px, 2vw, 28px);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.dss-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
}

.dss-marquee.is-ready .dss-marquee__track {
	animation: dss-marquee var(--dss-marquee-duration, 30s) linear infinite;
}

.dss-marquee--reverse.is-ready .dss-marquee__track {
	animation-direction: reverse;
}

.dss-marquee:hover .dss-marquee__track {
	animation-play-state: paused;
}

.dss-marquee__item {
	padding-inline: clamp(18px, 2.6vw, 44px);
	white-space: nowrap;
}

.dss-marquee__sep {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dss-accent);
}

.dss-marquee--brands .dss-marquee__item {
	color: var(--dss-ink);
	font-size: clamp(1.5rem, 3vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.045em;
}

.dss-marquee--headline .dss-marquee__item {
	font-size: clamp(3.25rem, 10vw, 10.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.065em;
}

.dss-marquee--headline .dss-marquee__item:nth-child(4n + 3) {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--dss-ink);
}

.dss-marquee--headline .dss-marquee__sep {
	width: 0.9vw;
	min-width: 10px;
	height: 0.9vw;
	min-height: 10px;
}

@keyframes dss-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(var(--dss-marquee-shift, -50%));
	}
}

@media (prefers-reduced-motion: reduce) {
	.dss-marquee.is-ready .dss-marquee__track {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.dss-reviews {
	--dss-cols: 4;
}

.dss-review {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-height: 360px;
	padding: clamp(22px, 2.4vw, 32px);
	border-radius: var(--dss-r-lg);
	background: var(--dss-surface);
}

.dss-review__quote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	letter-spacing: -0.015em;
}

.dss-review__quote p {
	margin: 0;
}

.dss-review__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.3;
}

.dss-review__author > span:last-child {
	display: flex;
	flex-direction: column;
}

.dss-review__author strong {
	font-weight: 600;
}

.dss-review__author > span:last-child > span {
	color: var(--dss-ink-50);
	font-size: 0.8125rem;
}

.dss-review__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--dss-accent-soft);
	color: var(--dss-accent);
	font-weight: 600;
}

.dss-review--summary {
	justify-content: flex-end;
	background: var(--dss-electric);
	color: #fff;
}

.dss-review__score {
	font-size: clamp(4.5rem, 7vw, 7rem);
	font-weight: 600;
	line-height: 0.85;
	letter-spacing: -0.07em;
}

.dss-review--summary .dss-stars {
	color: #fff;
}

.dss-review--summary p {
	max-width: 22ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
}

.dss-review--summary .dss-btn--glass {
	--btn-bg: rgba(255, 255, 255, 0.14);
	--btn-fg: #fff;
	--btn-border: rgba(255, 255, 255, 0.3);
	align-self: flex-start;
}

.dss-review--summary .dss-btn--glass:hover {
	--btn-bg: #fff;
	--btn-fg: var(--dss-ink);
}