/* Maktune — homepage v3 "Parts Retailer".
   Dense Indian D2C commerce layout: navy utility bar, white header, blue
   category nav, dark cinematic category tiles, blue parts band, navy footer.
   EVERYTHING here is scoped to body.home-v3 so the rest of the site stays on
   the Morning Light system untouched. */

body.home-v3 {
	--v3-navy: #0B1B3A;
	--v3-navy-2: #12254A;
	--v3-blue: #0E2CCB;
	--v3-blue-dark: #0A22A0;
	--v3-orange: #F2600C;
	--v3-orange-ink: #C74B08;  /* coral behind white TEXT — see tokens.css */
	--v3-ink: #14171F;
	--v3-muted: #5C6474;
	--v3-line: #E3E7EE;
	--v3-alt: #F5F7FA;
	--v3-green: #11833B;
	--v3-r: 8px;
	/* One easing curve for the whole page so motion reads as a single system. */
	--v3-ease: cubic-bezier(.22, .61, .36, 1);

	background: #fff;
	color: var(--v3-ink);
}
body.home-v3 h1,
body.home-v3 h2,
body.home-v3 h3,
body.home-v3 h4 { color: var(--v3-ink); letter-spacing: -.01em; }
/* NOTE: deliberately no blanket `body.home-v3 a` colour rule — at (0,1,2) it
   out-specifies every component rule below and paints nav links, button
   labels, card titles and footer links blue-on-blue. Colour links per block. */

/* ============================================================ Utility bar */
.v3-utility {
	background: var(--v3-navy);
	color: #fff;
}
.v3-utility-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
	min-height: 34px;
	flex-wrap: wrap;
}
.v3-utility span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
}
.v3-utility svg { flex: 0 0 auto; opacity: .9; }

/* ================================================================ Header */
.v3-header { background: #fff; border-bottom: 1px solid var(--v3-line); }
.v3-header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 76px;
}
.v3-logo { flex: 0 0 auto; }
.v3-logo img { width: 168px; height: auto; }

.v3-search {
	flex: 1 1 auto;
	display: flex;
	max-width: 560px;
	margin: 0 auto;
	border: 1.5px solid var(--v3-line);
	border-radius: var(--v3-r);
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease;
}
.v3-search:focus-within { border-color: var(--v3-blue); }
.v3-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 11px 16px;
	font: 400 14.5px var(--body);
	color: var(--v3-ink);
	outline: none;
}
.v3-search input[type="search"]::placeholder { color: #9AA2B1; }
.v3-search button {
	border: 0;
	background: var(--v3-blue);
	color: #fff;
	padding: 0 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: background .15s ease;
}
.v3-search button:hover { background: var(--v3-blue-dark); }

.v3-actions { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.v3-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--v3-ink);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.v3-action:hover { color: var(--v3-blue); }
.v3-action svg { flex: 0 0 auto; }
.v3-action .v3-cart-count {
	position: absolute;
	top: -6px;
	left: 12px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--v3-orange-ink);
	color: #fff;
	font: 700 10.5px/17px var(--body);
	text-align: center;
}
.v3-action .v3-cart-count.is-empty { display: none; }

/* ========================================================= Category nav */
.v3-catnav { background: var(--v3-blue); }
.v3-catnav-inner { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.v3-catnav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 16px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .15s ease;
}
.v3-catnav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.v3-catnav .v3-catnav-all { margin-left: auto; background: var(--v3-blue-dark); }
.v3-catnav .v3-catnav-all:hover { background: #08197E; }

.v3-navtoggle { display: none; }

/* ================================================================== Hero */
.v3-hero { position: relative; background: #EFE4D2; overflow: hidden; }
.v3-hero-img { position: absolute; inset: 0; }
/* The photo is composed with the chair on the right facing left, and clean
   wall on the left — so hold the right edge and let the left crop first. */
.v3-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.v3-hero-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28, 18, 6, .16) 0%, rgba(28, 18, 6, .04) 42%, rgba(28, 18, 6, 0) 62%);
}
.v3-hero-inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 540px;
	padding-block: 52px;
}
.v3-hero-card {
	width: 100%;
	max-width: 452px;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(2px);
	border-radius: 12px;
	padding: 34px 34px 30px;
	box-shadow: 0 24px 60px rgba(40, 26, 8, .18), 0 2px 6px rgba(40, 26, 8, .08);
	animation: v3-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes v3-rise {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}
.v3-eyebrow {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--v3-muted);
	margin-bottom: 12px;
}
.v3-hero-card h1 {
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.025em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.v3-hero-sub { font-size: 15px; color: var(--v3-muted); margin: 0 0 16px; }
.v3-hero-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; color: var(--v3-muted); }
.v3-hero-rating strong { color: var(--v3-ink); font-size: 14px; }
.v3-hero-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; }
.v3-hero-price .amt { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.v3-hero-price .off { font-size: 15px; font-weight: 700; color: var(--v3-orange); }
.v3-hero-price del { font-size: 16px; color: #98A0AE; font-weight: 500; }

.v3-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--v3-r);
	background: var(--v3-blue);
	color: #fff;
	font: 700 15px/1.2 var(--body);
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: background .18s ease, transform .18s var(--v3-ease), box-shadow .24s var(--v3-ease);
}
/* A darker wash sweeps up through the button rather than a flat colour swap. */
.v3-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--v3-blue-dark);
	transform: translateY(101%);
	transition: transform .34s var(--v3-ease);
}
.v3-btn:hover::before { transform: none; }
.v3-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14, 44, 203, .26); }
.v3-btn:active { transform: translateY(0); }

/* Reassurance ticks under the hero CTA. */
.v3-hero-assure {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	list-style: none;
	margin: 14px 0 16px;
	padding: 0;
}
.v3-hero-assure li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--v3-muted);
}
.v3-hero-assure li::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311833B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.v3-btn-light::before { background: #E4EAFF; }
.v3-btn-ghost::before { background: var(--v3-ink); }
.v3-btn-orange { background: var(--v3-orange); }
.v3-btn-orange:hover { background: #D4530A; }
.v3-btn-light { background: #fff; color: var(--v3-blue); }
.v3-btn-light:hover { background: #EEF1FC; color: var(--v3-blue-dark); }
.v3-btn-ghost { background: transparent; color: var(--v3-ink); box-shadow: inset 0 0 0 1.5px var(--v3-line); }
.v3-btn-ghost:hover { background: var(--v3-ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--v3-ink); }
.v3-textlink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--v3-ink);
}
.v3-textlink:hover { color: var(--v3-blue); }

/* ========================================================== Dark USP bar */
.v3-usp { background: var(--v3-navy); color: #fff; }
.v3-usp-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding-block: 22px;
}
/* Start-aligned so the four icons sit on a common axis instead of each
   floating to the centre of its own column. */
.v3-usp-item { display: flex; align-items: center; justify-content: flex-start; gap: 13px; text-align: left; }
.v3-usp-item + .v3-usp-item { border-left: 1px solid rgba(255, 255, 255, .13); padding-left: 20px; }
.v3-usp-item svg { flex: 0 0 auto; color: #7C93E8; }
.v3-usp-item b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.v3-usp-item span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .62); line-height: 1.3; }

/* ====================================================== Dark section shell */
.v3-section.v3-dark { background: var(--v3-navy); color: rgba(255, 255, 255, .78); }
body.home-v3 .v3-title-light { color: #fff; }
.v3-dark .v3-kept-item b { color: #fff; }
.v3-dark .v3-kept-item span { color: rgba(255, 255, 255, .66); }
.v3-dark .v3-kept-item .ico { background: rgba(124, 147, 232, .16); color: #9DB0F0; }

/* ======================================================== Scroll reveals
   Drives the shared .reveal → .in-view observer in main.js. `--i` on an
   element staggers it within its row. Disabled under reduced motion below. */
/* Gated on `scripting: enabled` so that if JS never runs — or the browser
   doesn't support the query — the content simply renders visible rather than
   being stranded at opacity 0 waiting for an observer that never fires. */
@media (scripting: enabled) {
	body.home-v3 .reveal {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity .62s var(--v3-ease), transform .62s var(--v3-ease);
		transition-delay: calc(var(--i, 0) * 70ms);
	}
	body.home-v3 .reveal.in-view { opacity: 1; transform: none; }

	/* --- Per-component reveal variants. A single repeated effect is what
	   makes a long page feel inert, so each block enters in its own way. --- */

	/* Category tiles wipe open and settle out of a slight over-scale. */
	body.home-v3 .v3-cat.reveal {
		transform: none;
		clip-path: inset(0 0 100% 0);
		transition: opacity .7s var(--v3-ease), clip-path .8s var(--v3-ease);
	}
	body.home-v3 .v3-cat.reveal.in-view { clip-path: inset(0 0 0 0); }
	body.home-v3 .v3-cat.reveal img { transform: scale(1.14); transition: transform 1.1s var(--v3-ease); }
	body.home-v3 .v3-cat.reveal.in-view img { transform: scale(1); }

	/* Macro strip: same wipe, alternating direction. */
	body.home-v3 .v3-kept-strip.reveal .v3-macro {
		clip-path: inset(0 0 100% 0);
		transition: clip-path .85s var(--v3-ease), flex-grow .5s var(--v3-ease);
		transition-delay: calc(var(--f, 0) * 90ms);
	}
	body.home-v3 .v3-kept-strip.reveal .v3-macro:nth-child(even) { clip-path: inset(100% 0 0 0); }
	body.home-v3 .v3-kept-strip.reveal.in-view .v3-macro { clip-path: inset(0 0 0 0); }
	body.home-v3 .v3-kept-strip.reveal .v3-macro:nth-child(1) { --f: 0; }
	body.home-v3 .v3-kept-strip.reveal .v3-macro:nth-child(2) { --f: 1; }
	body.home-v3 .v3-kept-strip.reveal .v3-macro:nth-child(3) { --f: 2; }
	body.home-v3 .v3-kept-strip.reveal .v3-macro:nth-child(4) { --f: 3; }

	/* Tabs slide up as one unit — the grid below them handles its own switch. */
	body.home-v3 .v3-tabs.reveal { transform: translateY(14px); }


	/* The parts photograph drifts in from the right as the copy rises. */
	body.home-v3 .v3-band-img {
		opacity: 0;
		transform: translateX(36px);
		transition: opacity 1s var(--v3-ease), transform 1.1s var(--v3-ease);
	}
	body.home-v3 .v3-band.is-seen .v3-band-img { opacity: 1; transform: none; }

	/* USP items fade up individually rather than as one block. */
	body.home-v3 .v3-usp-item.reveal { transform: translateY(12px); }

	/* Quotes lift and lean in. */
	body.home-v3 .v3-quote.reveal { transform: translateY(24px) scale(.985); }
	body.home-v3 .v3-quote.reveal.in-view { transform: none; }

	/* Distribution bars grow left-to-right, staggered down the list. */
	body.home-v3 .v3-bars-track i { transition: transform .9s var(--v3-ease); }
	body.home-v3 .v3-score.in-view .v3-bars-track i { transform: scaleX(1); }
	body.home-v3 .v3-bars li:nth-child(1) .v3-bars-track i { transition-delay: .18s; }
	body.home-v3 .v3-bars li:nth-child(2) .v3-bars-track i { transition-delay: .26s; }
	body.home-v3 .v3-bars li:nth-child(3) .v3-bars-track i { transition-delay: .34s; }
	body.home-v3 .v3-bars li:nth-child(4) .v3-bars-track i { transition-delay: .42s; }
	body.home-v3 .v3-bars li:nth-child(5) .v3-bars-track i { transition-delay: .50s; }

	/* --- Hover lifts on elements that are themselves reveal targets ---
	   `body.home-v3 .reveal.in-view { transform: none }` is (0,3,0) and silently
	   beat the plain `.v3-card:hover { transform }` at (0,2,0), so once a card
	   had scrolled into view it stopped lifting on hover at all. The per-block
	   variants above go further still — `.v3-quote.reveal.in-view` is (0,4,0) —
	   so these have to both match that weight AND come after them in the file.
	   Keep this the LAST thing in the reveal block. Any future hover transform
	   on a .reveal element belongs here, not next to its component rules. */
	body.home-v3 .v3-card.reveal:hover { transform: translateY(-4px); }
	body.home-v3 .v3-quote.reveal:hover { transform: translateY(-4px); }
	body.home-v3 .v3-bundle.reveal:hover { transform: translateY(-3px); }
}

/* ------------------------------------------------ SVG stroke-draw icons */
.v3-draw path, .v3-draw circle, .v3-draw rect { stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (scripting: enabled) {
	.v3-draw path, .v3-draw circle, .v3-draw rect {
		transition: stroke-dashoffset .9s var(--v3-ease);
		transition-delay: calc(var(--i, 0) * 90ms + 120ms);
	}
	.reveal.in-view .v3-draw path,
	.reveal.in-view .v3-draw circle,
	.reveal.in-view .v3-draw rect { stroke-dashoffset: 0; }
}
/* pathLength="1" is an SVG attribute, not a CSS property — main.js stamps it
   onto these nodes so the dasharray above normalises across every icon. */

/* ============================================================== Sections */
.v3-section { padding: 68px 0; }
.v3-section.alt { background: var(--v3-alt); }

/* ---- Section heading: mono index + drawn rule + mask-revealed title ---- */
.v3-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.v3-head-main { min-width: 0; }
.v3-head-index {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--v3-blue);
}
.v3-head-rule {
	display: block;
	width: 54px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .68s var(--v3-ease) .1s;
}
.v3-head.in-view .v3-head-rule,
.reveal.in-view .v3-head-rule { transform: scaleX(1); }
.v3-head.is-light .v3-head-index { color: #8FA3EC; }
/* body-scoped: the base `body.home-v3 h2` colour rule is (0,1,2) and would
   otherwise paint this title dark-on-navy. */
body.home-v3 .v3-head.is-light .v3-title { color: #fff; }
body.home-v3 .v3-head.is-light .v3-head-link { color: rgba(255, 255, 255, .82); }
body.home-v3 .v3-head.is-light .v3-head-link:hover { color: #fff; }

/* The title text rides up from behind its own clipping box. */
.v3-title {
	overflow: hidden;
	margin: 0;
	font-size: clamp(21px, 2.3vw, 28px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.015em;
	text-transform: uppercase;
}
.v3-title > span {
	display: block;
	transform: translateY(105%);
	transition: transform .78s var(--v3-ease) .08s;
}
.v3-head.in-view .v3-title > span,
.reveal.in-view .v3-title > span { transform: none; }

.v3-head-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	padding-bottom: 4px;
}
.v3-head-link svg { transition: transform .3s var(--v3-ease); }
.v3-head-link:hover { color: var(--v3-blue-dark); }
.v3-head-link:hover svg { transform: translateX(4px); }
/* Underline that wipes in from the left on hover. */
.v3-head-link > span { position: relative; }
.v3-head-link > span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .34s var(--v3-ease);
}
.v3-head-link:hover > span::after { transform: scaleX(1); transform-origin: left center; }

/* Standalone index for sections whose head isn't the shared component. */
.v3-head-index-solo { display: flex; margin-bottom: 10px; }

/* ======================================================== Category tiles
   A tinted media panel with a transparent-PNG product floating on it, and the
   caption on its own row underneath. The label used to sit ON the image, which
   is what made the name and count read as misaligned against the product. */
.v3-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v3-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--v3-r);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--v3-line);
	transition: border-color .3s var(--v3-ease), box-shadow .3s var(--v3-ease);
}
.v3-cat:hover { border-color: #C7D1E4; box-shadow: 0 14px 30px rgba(15, 26, 50, .11); }

.v3-cat-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: radial-gradient(120% 100% at 50% 12%, #FFFFFF 0%, #EEF1F7 62%, #E4E9F2 100%);
	overflow: hidden;
}
/* `contain` with the product already centred in a square transparent canvas —
   nothing to crop, and every tile lands on the same optical centre. */
.v3-cat-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12%;
	transition: transform .45s var(--v3-ease);
}
.v3-cat:hover .v3-cat-media img { transform: scale(1.06); }

/* Grounding shadow under the floating cut-out. */
.v3-cat-media::after {
	content: "";
	position: absolute;
	left: 22%;
	right: 22%;
	bottom: 9%;
	height: 7%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(18, 28, 54, .22), transparent 72%);
	transition: transform .45s var(--v3-ease), opacity .45s var(--v3-ease);
}
.v3-cat:hover .v3-cat-media::after { transform: scaleX(1.08); opacity: .8; }

.v3-cat-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 15px 14px;
	border-top: 1px solid var(--v3-line);
	background: #fff;
}
.v3-cat-text { display: block; min-width: 0; }
body.home-v3 .v3-cat-text b {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.005em;
	color: var(--v3-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.home-v3 .v3-cat-text > span {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--v3-muted);
}
.v3-cat-go {
	flex: 0 0 auto;
	color: var(--v3-blue);
	opacity: .45;
	transform: translateX(-3px);
	transition: opacity .3s var(--v3-ease), transform .3s var(--v3-ease);
}
.v3-cat:hover .v3-cat-go { opacity: 1; transform: none; }

/* Pointer spotlight, confined to the media panel now that the caption is
   opaque white below it. main.js writes --mx/--my as percentages of the tile. */
.v3-cat-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(14, 44, 203, .10), transparent 62%);
	opacity: 0;
	transition: opacity .35s var(--v3-ease);
	pointer-events: none;
}
.v3-cat:hover .v3-cat-media::before { opacity: 1; }

/* ============================================================= Marquees
   Two copies of the track translate by exactly -50%, so the second copy is
   sitting where the first started at the moment the animation restarts and the
   wrap is invisible. Both are transform-only, so they stay on the compositor.
   `.v3-marquee-shift` is a separate element purely so main.js can add a
   scroll-velocity offset without fighting the CSS animation on the track. */
@keyframes v3-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.v3-marquee { overflow: hidden; }
.v3-marquee-shift { will-change: transform; }
.v3-marquee-track { display: flex; width: max-content; }
.v3-marquee-set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }

@media (scripting: enabled) {
	.v3-marquee-track { animation: v3-marquee var(--dur, 34s) linear infinite; }
	/* Reading the strip shouldn't be a chase — hovering parks it. */
	.v3-marquee:hover .v3-marquee-track { animation-play-state: paused; }
}

/* ---- Slim ticker, directly under the cobalt category nav ---- */
.v3-marquee:not(.v3-marquee-display) {
	background: var(--v3-navy);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.v3-marquee:not(.v3-marquee-display) li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	margin-right: 34px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	white-space: nowrap;
}
/* The separator is the dot before each item, so it never lands doubled or
   missing at the seam between the two copies. */
.v3-marquee:not(.v3-marquee-display) li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--v3-orange);
	flex: 0 0 auto;
}

/* ---- Display marquee: the tonal handover into the dark section ---- */
.v3-marquee-display {
	background: var(--v3-alt);
	border-block: 1px solid var(--v3-line);
	padding-block: 26px;
}
.v3-marquee-display li {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-right: 30px;
	font-size: clamp(28px, 4.6vw, 56px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.025em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--v3-ink);
}
/* Alternating solid and outlined words give the strip depth without a second
   colour. -webkit-text-stroke is the only cross-browser way to outline text.
   The stroke alpha was .32, which blends to #ADAFB4 against the alt background
   — 2.04:1, below the 3:1 floor this size of text has to clear. .48 blends to
   roughly #8A8E99 and clears it while still reading as an outline rather than
   a second solid word. */
.v3-marquee-display li:nth-child(even) {
	color: transparent;
	-webkit-text-stroke: 1.4px rgba(20, 23, 31, .48);
}
.v3-marquee-display li::after {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--v3-orange);
	flex: 0 0 auto;
	-webkit-text-stroke: 0;
}

/* ============================================================ Filter tabs */
.v3-tabs {
	position: relative;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: -8px 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--v3-line);
}
.v3-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	border-radius: 100px;
	background: transparent;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--v3-muted);
	cursor: pointer;
	transition: color .25s var(--v3-ease), background-color .25s var(--v3-ease);
}
.v3-tab:hover { color: var(--v3-ink); background: var(--v3-alt); }
.v3-tab.is-on { color: #fff; background: var(--v3-blue); }
.v3-tab i {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 100px;
	background: rgba(20, 23, 31, .08);
	color: inherit;
	transition: background-color .25s var(--v3-ease);
}
.v3-tab.is-on i { background: rgba(255, 255, 255, .22); }
/* The ink bar slides between tabs instead of each tab growing its own underline
   — main.js measures the active tab and writes --x / --w. */
.v3-tabs-ink {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: var(--w, 0);
	background: var(--v3-blue);
	transform: translateX(var(--x, 0));
	transition: transform .42s var(--v3-ease), width .42s var(--v3-ease);
	pointer-events: none;
}
.v3-card.is-hidden { display: none; }
@media (scripting: enabled) {
	/* Must out-specify `body.home-v3 .reveal.in-view` (0,3,0), which every card
	   carries once it has scrolled into view — at a lower weight the filter's
	   fade never applies and cards just pop. Hence the four-class selector. */
	body.home-v3 .v3-card.reveal.is-swap { opacity: 0; transform: translateY(10px) scale(.98); }
}
.v3-tabs-empty { padding: 30px 0; color: var(--v3-muted); font-size: 14px; }

/* =========================================================== Product cards */
.v3-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v3-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
	overflow: hidden;
	transition: box-shadow .25s ease, border-color .25s ease, transform .25s var(--v3-ease);
}
.v3-card:hover { border-color: #C9D2E2; box-shadow: 0 14px 32px rgba(15, 26, 50, .13); transform: translateY(-4px); }
@media (scripting: enabled) {
	/* Restates the base card transition and adds opacity — dropping any of the
	   original properties here would silently kill the hover lift. */
	.v3-card {
		transition: opacity .3s var(--v3-ease),
		            transform .3s var(--v3-ease),
		            box-shadow .25s ease,
		            border-color .25s ease;
	}
}
.v3-card-flag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	padding: 4px 9px;
	border-radius: 4px;
	background: var(--v3-orange-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
}
.v3-card-media { position: relative; display: block; padding: 16px 16px 6px; background: #fff; }
.v3-card-media img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform .3s var(--v3-ease); }
.v3-card:hover .v3-card-media img { transform: scale(1.06); }
.v3-card-peek {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translate(-50%, 10px);
	padding: 7px 15px;
	border-radius: 100px;
	background: rgba(11, 27, 58, .92);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s var(--v3-ease), transform .28s var(--v3-ease);
}
.v3-card:hover .v3-card-peek,
.v3-card:focus-within .v3-card-peek { opacity: 1; transform: translate(-50%, 0); }

.v3-card-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 16px; flex: 1; }
/* Reserved even when the product has no SKU. Without this the whole card below
   it rides up and the row stops lining up across the grid. */
.v3-card-sku {
	display: block;
	min-height: 15px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	color: var(--mk-muted-soft);
}
.v3-card-title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.005em;
	margin: 0;
	min-height: 2.64em;
}
.v3-card-title a { color: inherit; }
.v3-card-title a:hover { color: var(--v3-blue); }
.v3-card-rating { display: flex; align-items: center; gap: 7px; min-height: 17px; font-size: 12.5px; color: var(--v3-muted); }
.v3-card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.v3-card-price .amt { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--v3-ink); }
.v3-card-price del { font-size: 13px; color: var(--mk-muted-soft); font-weight: 500; }
.v3-stock {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--v3-green);
}
.v3-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.v3-stock.is-out { color: #B03A3A; }
.v3-card .v3-btn { width: 100%; min-height: 42px; font-size: 14px; margin-top: 4px; }

/* ========================================================== Spare parts band */
.v3-band {
	--v3-band-bg: #001033;
	position: relative;
	background: var(--v3-band-bg);
	color: rgba(255, 255, 255, .8);
	overflow: hidden;
}
.v3-band-img { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; }
.v3-band-img img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
/* The glow has to sit ABOVE the photograph — underneath it stops dead at the
   image edge and becomes the very seam it exists to hide. */
.v3-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: radial-gradient(70% 120% at 12% 50%, rgba(14, 44, 203, .34), transparent 70%);
	pointer-events: none;
}
/* padding-block, never the `padding` shorthand: this element also carries
   `.container`, whose horizontal padding the shorthand would wipe. */
.v3-band-inner { position: relative; z-index: 3; padding-block: 58px 60px; }
/* max-width on the children, not on the .container element — putting it on the
   container re-centres the whole block off the page gutter. */
.v3-band-inner > * { max-width: 560px; }
.v3-band-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v3-orange);
	margin-bottom: 14px;
}
.v3-band-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--v3-orange); }
body.home-v3 .v3-band h2 {
	color: #fff;
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-transform: uppercase;
	margin: 0 0 14px;
	overflow: hidden;
}
.v3-band p { font-size: 15px; line-height: 1.65; margin: 0 0 18px; color: rgba(255, 255, 255, .74); }
.v3-band-chips { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 24px; padding: 0; }
.v3-band-chips li {
	padding: 7px 14px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .24);
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}

/* =================================================== Durability (dark block) */
.v3-kept { display: grid; grid-template-columns: .9fr 1.4fr; gap: 44px; align-items: start; }
.v3-kept-copy { min-width: 0; }
.v3-kept-list { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; }
.v3-kept-item { display: flex; gap: 14px; align-items: flex-start; }
.v3-kept-item .ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(14, 44, 203, .1);
	color: var(--v3-blue);
}
.v3-kept-item b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.v3-kept-item span { display: block; font-size: 13.5px; color: var(--v3-muted); line-height: 1.5; }

/* ---- Macro strip: expanding panels that link to the part they photograph.
   Flex, not grid, so a hovered panel can take space from its siblings. ---- */
.v3-kept-strip { display: flex; gap: 10px; }
.v3-kept-strip img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.28) contrast(1.04); }
.v3-macro {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 5 / 8;
	border-radius: var(--v3-r);
	overflow: hidden;
	background: var(--v3-navy);
}
.v3-macro img { transition: transform .6s var(--v3-ease), filter .4s var(--v3-ease); }
.v3-macro::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 10, 20, 0) 40%, rgba(6, 10, 20, .88) 100%);
	opacity: .55;
	transition: opacity .4s var(--v3-ease);
}
.v3-macro-cap {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .34s var(--v3-ease), transform .34s var(--v3-ease);
}
body.home-v3 .v3-macro-cap b {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	margin-bottom: 2px;
}
body.home-v3 .v3-macro-cap > span,
body.home-v3 .v3-macro-cap .amount { font-size: 12px; color: rgba(255, 255, 255, .72); }
.v3-macro-go {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	color: var(--v3-navy);
	opacity: 0;
	transform: scale(.7);
	transition: opacity .3s var(--v3-ease), transform .3s var(--v3-ease);
}
@media (hover: hover) {
	.v3-kept-strip:hover .v3-macro { flex-grow: .78; }
	.v3-kept-strip .v3-macro:hover,
	.v3-kept-strip .v3-macro:focus-visible { flex-grow: 1.9; }
}
.v3-macro:hover img, .v3-macro:focus-visible img { transform: scale(1.06); filter: brightness(1.4) contrast(1.06); }
.v3-macro:hover::after, .v3-macro:focus-visible::after { opacity: 1; }
.v3-macro:hover .v3-macro-cap, .v3-macro:focus-visible .v3-macro-cap { opacity: 1; transform: none; }
.v3-macro:hover .v3-macro-go, .v3-macro:focus-visible .v3-macro-go { opacity: 1; transform: none; }
.v3-kept-strip .v3-macro:nth-child(even) { transform: translateY(22px); }

/* ============================================================== Bundles */
.v3-bundles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v3-bundle {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease, transform .25s var(--v3-ease);
}
.v3-bundle:hover { border-color: #C9D2E2; box-shadow: 0 10px 26px rgba(15, 26, 50, .10); }
.v3-bundle-media { display: block; background: #F7F8FA; }
.v3-bundle-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 12px; transition: transform .4s var(--v3-ease); }
.v3-bundle:hover .v3-bundle-media img { transform: scale(1.05); }
.v3-bundle-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.v3-bundle-body b { font-size: 14.5px; font-weight: 700; line-height: 1.32; }
.v3-bundle-body b a { color: inherit; }
.v3-bundle-body b a:hover { color: var(--v3-blue); }
.v3-bundle-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v3-bundle-price .amt { font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.v3-bundle-price del { font-size: 13px; color: #98A0AE; font-weight: 500; }
.v3-save {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(242, 96, 12, .12);
	color: #C4500A;
	font-size: 12px;
	font-weight: 700;
}
.v3-bundle-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 26px 24px;
	border-radius: var(--v3-r);
	background: var(--v3-blue);
	color: #fff;
}
.v3-bundle-cta svg { color: rgba(255, 255, 255, .75); margin-bottom: 4px; }
.v3-bundle-cta b { font-size: 16px; font-weight: 700; line-height: 1.3; }
.v3-bundle-cta span { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.v3-bundle-cta .v3-btn { margin-top: auto; }

/* ============================================================== Reviews */
.v3-reviews { position: relative; }
.v3-footer-col { min-width: 0; }
.v3-social { display: grid; grid-template-columns: .82fr 1.6fr; gap: 16px; align-items: start; }
.v3-score { padding: 28px; border-radius: var(--v3-r); background: var(--v3-navy); color: rgba(255, 255, 255, .76); }
.v3-score-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.v3-score strong,
.v3-count { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; }
.v3-score-top > div span { display: block; margin-top: 5px; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.v3-bars { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.v3-bars li { display: grid; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 10px; }
.v3-bars-label { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.v3-bars-label svg { color: #F5A623; }
.v3-bars-track { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.v3-bars-track i {
	display: block;
	height: 100%;
	width: var(--pct, 0%);
	border-radius: 3px;
	background: #F5A623;
	transform: scaleX(0);
	transform-origin: left center;
}
.v3-bars-num { font-size: 12px; text-align: right; color: rgba(255, 255, 255, .62); }
.v3-score .v3-textlink { color: #fff; }
.v3-score .v3-textlink:hover { color: #9DB0F0; }

.v3-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v3-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px;
	background: #fff;
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
	transition: box-shadow .25s ease, border-color .25s ease, transform .25s var(--v3-ease);
}
.v3-quote:hover { transform: translateY(-4px); border-color: #C9D2E2; box-shadow: 0 14px 32px rgba(15, 26, 50, .12); }
.v3-quote-mark { position: absolute; top: 20px; right: 20px; color: #E3E7EE; transition: color .3s var(--v3-ease); }
.v3-quote:hover .v3-quote-mark { color: #F6C9AE; }
.v3-quote p { font-size: 14px; line-height: 1.62; color: var(--v3-ink); margin: 0; flex: 1; }
.v3-quote footer { display: flex; align-items: center; gap: 11px; margin-top: 4px; }
.v3-quote-avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--v3-alt);
	color: var(--v3-blue);
	font-size: 14px;
	font-weight: 800;
}
.v3-quote-who { min-width: 0; }
.v3-quote-who b { display: block; font-size: 13.5px; font-weight: 700; }
.v3-quote-who a { display: block; font-size: 12px; color: var(--v3-muted); }
.v3-quote-who a:hover { color: var(--v3-blue); }

/* ================================================================== FAQ */
.v3-faq-wrap { display: grid; grid-template-columns: .8fr 1.4fr; gap: 44px; align-items: start; }
.v3-faq-intro p { font-size: 14.5px; line-height: 1.65; color: var(--v3-muted); margin: 14px 0 20px; max-width: 38ch; }
.v3-faq { border-top: 1px solid var(--v3-line); }
.v3-faq-item { border-bottom: 1px solid var(--v3-line); }
.v3-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--v3-ink);
	cursor: pointer;
	list-style: none;
}
.v3-faq-item summary::-webkit-details-marker { display: none; }
.v3-faq-item summary:hover { color: var(--v3-blue); }
.v3-faq-item summary svg { flex: 0 0 auto; color: var(--v3-muted); transition: transform .3s var(--v3-ease); }
.v3-faq-item[open] summary svg { transform: rotate(180deg); }
.v3-faq-a { padding: 0 0 18px; animation: v3-fade .35s var(--v3-ease) both; }
@keyframes v3-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.v3-faq-a p { font-size: 14px; line-height: 1.68; color: var(--v3-muted); margin: 0 0 8px; max-width: 68ch; }
.v3-faq-a a { font-size: 13.5px; font-weight: 600; color: var(--v3-blue); }
.v3-faq-a a:hover { color: var(--v3-blue-dark); }

/* ======================================================== Sticky buy bar */
.v3-stickybuy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .98);
	backdrop-filter: blur(6px);
	border-top: 1px solid var(--v3-line);
	box-shadow: 0 -8px 28px rgba(15, 26, 50, .12);
	transform: translateY(102%);
	transition: transform .4s var(--v3-ease);
}
.v3-stickybuy.is-on { transform: none; }
.v3-stickybuy-inner { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.v3-stickybuy-media { flex: 0 0 auto; }
.v3-stickybuy-media img { width: 46px; height: 46px; object-fit: contain; border-radius: 6px; background: var(--v3-alt); }
.v3-stickybuy-meta { min-width: 0; flex: 1; }
.v3-stickybuy-meta b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-stickybuy-sub { display: block; font-size: 12px; color: var(--v3-muted); }
.v3-stickybuy-price { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.v3-stickybuy-price .amt { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.v3-stickybuy-price del { font-size: 13px; color: #98A0AE; }

/* =============================================================== Footer */
.v3-footer { background: var(--v3-navy); color: rgba(255, 255, 255, .72); }
.v3-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-top: 48px;
	padding-bottom: 40px;
}
body.home-v3 .v3-footer h3 {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}
.v3-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.v3-footer a { color: rgba(255, 255, 255, .78); font-size: 13.5px; }
.v3-footer a:hover { color: #fff; }
.v3-footer-brand img { width: 172px; height: auto; margin-bottom: 14px; }
.v3-footer-brand p { font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; max-width: 34ch; }
.v3-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.v3-footer-bottom .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 16px;
	padding-bottom: 18px;
}
.v3-footer-bottom p { margin: 0; font-size: 12.5px; }
.v3-pay { display: flex; gap: 8px; flex-wrap: wrap; }
.v3-pay span {
	padding: 5px 10px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .1);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
}
.v3-legal { display: flex; gap: 18px; }
.v3-legal a { font-size: 12.5px; }

/* ====================================================== Copy-email chip */
.v3-faq-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.v3-copy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 100px;
	background: var(--v3-alt);
	font-size: 13px;
	font-weight: 600;
	color: var(--v3-muted);
	transition: background-color .25s var(--v3-ease), color .25s var(--v3-ease);
}
.v3-copy:hover { background: #E9EDF8; color: var(--v3-blue); }
.v3-copy svg { flex: 0 0 auto; opacity: .7; }
.v3-copy.is-copied { background: rgba(17, 131, 59, .12); color: var(--v3-green); }
/* Swapping the label text via a pseudo-element keeps the real address in the
   DOM for selection and for anyone reading with assistive tech. */
.v3-copy.is-copied .v3-copy-text { visibility: hidden; }
.v3-copy.is-copied .v3-copy-text::after {
	content: "Copied to clipboard";
	visibility: visible;
	position: absolute;
}
.v3-copy .v3-copy-text { position: relative; }

/* =========================================================== Responsive */
@media (max-width: 1080px) {
	.v3-header-inner { flex-wrap: wrap; gap: 14px; padding-top: 12px; padding-bottom: 12px; min-height: 0; }
	.v3-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
	.v3-actions { margin-left: auto; gap: 18px; }
	.v3-cats, .v3-grid, .v3-bundles { grid-template-columns: repeat(2, 1fr); }
	.v3-kept { grid-template-columns: 1fr; gap: 26px; }
	.v3-social { grid-template-columns: 1fr; }
	.v3-quotes { grid-template-columns: repeat(2, 1fr); }
	.v3-head { flex-wrap: wrap; }
	.v3-faq-wrap { grid-template-columns: 1fr; gap: 28px; }
	.v3-band-img { width: 50%; }
	.v3-band-inner { max-width: 100%; }
}

@media (max-width: 860px) {
	.v3-utility-inner { gap: 22px; }
	.v3-utility span { font-size: 10.5px; letter-spacing: .05em; }
	.v3-catnav-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.v3-catnav-inner::-webkit-scrollbar { display: none; }
	.v3-catnav .v3-catnav-all { margin-left: 0; }
	.v3-usp-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.v3-usp-item + .v3-usp-item { border-left: 0; padding-left: 0; }
	.v3-usp-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.13); padding-left: 16px; }
	.v3-hero-img::after { background: linear-gradient(180deg, rgba(10, 12, 20, .18) 0%, rgba(10, 12, 20, .48) 100%); }
	/* Let a band of the lifestyle photo show above the card on small screens. */
	.v3-hero-inner { padding-top: 168px; }
	.v3-hero-card { max-width: none; }
	.v3-review { grid-template-columns: 1fr; }
	.v3-review figure { aspect-ratio: 16 / 10; }
	.v3-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 560px) {
	.v3-utility span:nth-child(n+3) { display: none; }
	.v3-logo img { width: 140px; }
	.v3-action-label { display: none; }
	.v3-actions { gap: 16px; }
	.v3-hero-inner { padding-block: 150px 30px; }
	.v3-hero-card { padding: 22px 20px 20px; }
	.v3-cats, .v3-grid, .v3-bundles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.v3-card-media { padding: 12px 12px 4px; }
	.v3-card-body { padding: 4px 12px 12px; }
	/* Narrow cards wrap to three lines — reserve them so the price, stock and
	   button rows still line up across the pair. */
	.v3-card-title { min-height: 3.96em; }
	.v3-kept-strip { flex-wrap: wrap; }
	.v3-kept-strip .v3-macro { flex: 1 1 calc(50% - 5px); }
	/* Touch has no hover, so the caption is simply always shown. */
	.v3-macro-cap { opacity: 1; transform: none; }
	.v3-macro::after { opacity: 1; }
	.v3-quotes { grid-template-columns: 1fr; }
	.v3-marquee-display { padding-block: 18px; }
	/* Four tabs wrap to three lines at this width, so scroll them sideways
	   instead — the same pattern the category nav already uses. */
	.v3-tabs {
		gap: 4px;
		margin-bottom: 18px;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.v3-tabs::-webkit-scrollbar { display: none; }
	.v3-tab { padding: 8px 12px; font-size: 12.5px; flex: 0 0 auto; }
	/* overflow-x also clips overflow-y, which would eat an ink bar sitting at
	   -1px, so bring it inside the padding box. */
	.v3-tabs-ink { bottom: 0; }
	.v3-usp-inner { padding-block: 18px; }
	.v3-score { padding: 24px; }
	.v3-score strong { font-size: 42px; }
	.v3-stickybuy-media, .v3-stickybuy-sub { display: none; }
	.v3-stickybuy-inner { gap: 12px; }
	.v3-stickybuy-meta b { font-size: 13px; white-space: normal; }
	.v3-stickybuy .v3-btn { padding: 12px 18px; font-size: 13.5px; }
	.v3-section { padding: 34px 0; }
	.v3-band-img { display: none; }
	.v3-band::after { width: 96px; opacity: .9; }
	.v3-footer-grid { grid-template-columns: 1fr; gap: 26px; padding-top: 32px; }
	.v3-footer-bottom .container { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.v3-cat img, .v3-card, .v3-card-media img, .v3-bundle, .v3-btn,
	.v3-cat-label, .v3-cat-label b::after, .v3-title::after,
	body.home-v3 .reveal { transition: none; }
	.v3-cat:hover img, .v3-card:hover .v3-card-media img,
	.v3-card:hover, .v3-cat:hover .v3-cat-label { transform: none; }
	.v3-hero-card, .v3-faq-item[open] .v3-faq-a { animation: none; }
	.v3-title > span { transform: none; transition: none; }
	.v3-head-rule { transform: scaleX(1); transition: none; }
	.v3-head-link svg, .v3-head-link > span::after,
	.v3-quote, .v3-quote-mark, .v3-btn, .v3-btn::before { transition: none; }
	.v3-btn:hover { transform: none; box-shadow: none; }
	.v3-quote:hover { transform: none; }
	.v3-bars-track i { transform: scaleX(1); transition: none; }
	.v3-draw path, .v3-draw circle, .v3-draw rect { stroke-dashoffset: 0; transition: none; }
	.v3-cat.reveal { clip-path: none; }
	.v3-cat.reveal img { transform: none; }
	.v3-band-img { opacity: 1; transform: none; }
	.v3-stickybuy { transition: none; }
	.v3-faq-item summary svg { transition: none; }
	.v3-title::after { transform: scaleX(1); }
	body.home-v3 .reveal { opacity: 1; transform: none; }

	/* Marquees stop dead and simply read as a static list. */
	.v3-marquee-track { animation: none; }
	.v3-marquee-shift { transform: none !important; }
	/* Without motion the second copy is just duplicated text on screen. */
	.v3-marquee-set[aria-hidden="true"] { display: none; }

	.v3-macro img, .v3-macro::after, .v3-macro-cap, .v3-macro-go,
	.v3-card-peek, .v3-tab, .v3-tabs-ink, .v3-cat::before,
	body.home-v3 .v3-kept-strip.reveal .v3-macro { transition: none; }
	.v3-macro:hover img { transform: none; }
	.v3-kept-strip:hover .v3-macro,
	.v3-kept-strip .v3-macro:hover { flex-grow: 1; }
	.v3-macro-cap, .v3-macro-go { opacity: 1; transform: none; }
	.v3-kept-strip .v3-macro:nth-child(even) { transform: none; }
	body.home-v3 .v3-kept-strip.reveal .v3-macro { clip-path: none; }
	body.home-v3 .v3-card.reveal.is-swap { opacity: 1; transform: none; }
	/* Must match the (0,4,0) weight of the restored hover lifts above. */
	body.home-v3 .v3-card.reveal:hover,
	body.home-v3 .v3-quote.reveal:hover,
	body.home-v3 .v3-bundle.reveal:hover { transform: none; }
	.v3-bundle-media img, .v3-bundle { transition: none; }
	.v3-bundle:hover .v3-bundle-media img { transform: none; }
}