/*
 * CV First Time Vaper Quiz
 * 1:1 implementation of Figma design (file 59BfySWlGUGYqRFIQ5Vlii, page "First time vaper")
 * All tokens, colors, typography, spacing, radii extracted directly from Figma variables.
 * All class selectors are prefixed with #ftv-quiz-root for cascade specificity.
 */

/* ═══ DESIGN TOKENS ═════════════════════════════════════════════════════ */
:root {
	/* Colors — straight from Figma variables */
	--ftv-bg:          #fafaf9;
	--ftv-white:       #ffffff;
	--ftv-gray-100:    #f5f5f4;
	--ftv-gray-200:    #e7e5e4;
	--ftv-gray-300:    #d7d3d0;
	--ftv-gray-500:    #79716b;
	--ftv-gray-600:    #57534e;
	--ftv-gray-950:    #171412;
	--ftv-brand:       #e0302c;
	--ftv-brand-dark:  #c4281f;

	--ftv-success-50:  #ecfdf3;
	--ftv-success-500: #17b26a;
	--ftv-info-50:     #eff8ff;
	--ftv-error-50:    #fef3f2;
	--ftv-warning-50:  #fffaeb;

	/* Typography */
	--ftv-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Spacing scale (from Figma Size tokens) */
	--ftv-s1:   4px;
	--ftv-s15:  6px;
	--ftv-s2:   8px;
	--ftv-s3:   12px;
	--ftv-s5:   20px;
	--ftv-s6:   24px;
	--ftv-s8:   32px;
	--ftv-s10:  40px;
	--ftv-s12:  48px;
	--ftv-s16:  64px;
	--ftv-s20:  80px;
	--ftv-s24:  96px;
	--ftv-s40:  160px;

	/* Fluid spacing — scale horizontal padding fluidly between 375 and 1440 viewports */
	--ftv-pad-x: clamp(20px, calc(20px + (160 - 20) * ((100vw - 375px) / (1440 - 375))), 160px);

	/* Radii */
	--ftv-r-sm:  8px;
	--ftv-r-md:  20px;
	--ftv-r-full: 9999px;

	/* Motion — Airbnb/Apple/Linear consensus.
	   Single ease-out curve, 200ms default, never >320ms. No bouncy easings. */
	--ftv-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--ftv-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ftv-dur-fast: 150ms;
	--ftv-dur:      200ms;
	--ftv-dur-slow: 280ms;
}

/* ═══ FULLSCREEN PAGE — hide theme chrome ═══════════════════════════════ */
body.ftv-fullscreen-page #masthead,
body.ftv-fullscreen-page .site-header,
body.ftv-fullscreen-page header.site-header,
body.ftv-fullscreen-page #colophon,
body.ftv-fullscreen-page .site-footer,
body.ftv-fullscreen-page footer.site-footer,
body.ftv-fullscreen-page .woocommerce-breadcrumb,
body.ftv-fullscreen-page #chatra__iframe-wrapper,
body.ftv-fullscreen-page #chatra,
body.ftv-fullscreen-page #wll-site-launcher,
body.ftv-fullscreen-page .wll-launcher,
body.ftv-fullscreen-page [class*="wll-launcher"],
body.ftv-fullscreen-page .gb-overlay,
body.ftv-fullscreen-page [id^="gb-overlay-"],
body.ftv-fullscreen-page #generate-slideout-menu,
body.ftv-fullscreen-page .slideout-overlay {
	display: none !important;
}

body.ftv-fullscreen-page {
	background: var(--ftv-bg) !important;
	margin: 0;
	overflow-x: hidden;
}

/* ═══ RESET — scoped to #ftv-quiz-root ══════════════════════════════════ */
#ftv-quiz-root,
#ftv-quiz-root *,
#ftv-quiz-root *::before,
#ftv-quiz-root *::after {
	box-sizing: border-box;
}

#ftv-quiz-root {
	font-family: var(--ftv-font);
	font-weight: 400;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--ftv-gray-950);
	background: var(--ftv-bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	letter-spacing: normal;
	/* Container query context for responsive-to-container */
	container-type: inline-size;
	container-name: ftv;
}

#ftv-quiz-root button {
	font-family: inherit;
	border: 0;
	cursor: pointer;
	background: transparent;
	padding: 0;
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: inherit;
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	min-width: 0;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

#ftv-quiz-root a {
	color: inherit;
	text-decoration: none;
}

#ftv-quiz-root img {
	max-width: 100%;
	display: block;
}

/* Kill theme heading/paragraph defaults that leak letter-spacing + margin */
#ftv-quiz-root p,
#ftv-quiz-root h1,
#ftv-quiz-root h2,
#ftv-quiz-root h3,
#ftv-quiz-root h4,
#ftv-quiz-root h5,
#ftv-quiz-root h6,
#ftv-quiz-root span {
	margin: 0;
	padding: 0;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	line-height: inherit;
}

/* ═══ LAYOUT: TOP NAV ═══════════════════════════════════════════════════ */
#ftv-quiz-root .ftv-topnav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--ftv-s6) var(--ftv-pad-x) 0;
	width: 100%;
	gap: var(--ftv-s6);
	min-height: 54px;
}

#ftv-quiz-root .ftv-topnav--hidden { display: none; }

#ftv-quiz-root .ftv-topnav-left,
#ftv-quiz-root .ftv-topnav-right {
	display: flex;
	align-items: center;
	min-height: 30px;
}

#ftv-quiz-root .ftv-topnav-left  { justify-content: flex-start; }
#ftv-quiz-root .ftv-topnav-right { justify-content: flex-end; }

#ftv-quiz-root .ftv-back {
	display: inline-flex;
	align-items: center;
	gap: var(--ftv-s15);
	padding: var(--ftv-s1) 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-600);
	transition: color var(--ftv-dur) var(--ftv-ease);
}
#ftv-quiz-root .ftv-back:hover { color: var(--ftv-gray-950); }
#ftv-quiz-root .ftv-back svg { width: 14px; height: 14px; flex-shrink: 0; }

#ftv-quiz-root .ftv-topnav-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ftv-s15);
	min-width: 172px;
}

#ftv-quiz-root .ftv-step-label {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.24px;
	color: var(--ftv-gray-500);
	text-align: center;
	white-space: nowrap;
}

#ftv-quiz-root .ftv-progress {
	width: 172px;
	height: 5px;
	background: var(--ftv-gray-200);
	border-radius: var(--ftv-r-full);
	overflow: hidden;
}

#ftv-quiz-root .ftv-progress-fill {
	height: 100%;
	width: 0;
	background: var(--ftv-brand);
	border-radius: var(--ftv-r-full);
	transition: width .5s var(--ftv-ease-out);
}

#ftv-quiz-root .ftv-browse {
	display: inline-flex;
	align-items: center;
	padding: var(--ftv-s1) 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-600);
	white-space: nowrap;
	transition: color var(--ftv-dur) var(--ftv-ease);
}
#ftv-quiz-root .ftv-browse:hover { color: var(--ftv-gray-950); }
#ftv-quiz-root .ftv-browse-short { display: none; }

/* ═══ LAYOUT: CONTENT ════════════════════════════════════════════════════ */
#ftv-quiz-root .ftv-content {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	/* Steps: top-aligned with constant 64px gap from topnav */
	padding: var(--ftv-s16) var(--ftv-pad-x) var(--ftv-s24);
}

/* Welcome and Results: fully centered vertically, no topnav */
#ftv-quiz-root .ftv-content--centered {
	justify-content: center;
	padding: var(--ftv-s6) var(--ftv-pad-x);
}

/* ═══ SCREEN SYSTEM ══════════════════════════════════════════════════════ */
#ftv-quiz-root .ftv-screen { display: none; }
#ftv-quiz-root .ftv-screen.active {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ftv-s12);  /* 48 — default for welcome and results */
	width: 480px;          /* max column is 480 (card list overflow) */
	max-width: 100%;
	animation: ftvFadeIn 320ms var(--ftv-ease-out) both;
}

/* Steps: gap between heading-block and card-group is 40 (Figma s10), not 48 */
#ftv-quiz-root .ftv-screen--step.active {
	gap: var(--ftv-s10);
}

/* Welcome is narrower by design (358, no card overflow) */
#ftv-quiz-root .ftv-screen--welcome.active {
	width: 358px;
	max-width: 100%;
}

/* Simple opacity fade — avoids any transform-related layout-metric artifacts.
   Subtle enough to feel Airbnb-clean, fast enough to not block interaction. */
@keyframes ftvFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Heading block — full parent width. In steps (480 screen) this gives heading 480
   and sub constrains to 358 via max-width. In welcome (358 screen) everything is 358.
   This matches Figma where the heading text overflows the 358 container to 480. */
#ftv-quiz-root .ftv-heading-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ftv-s3);
	text-align: center;
	width: 100%;
}

#ftv-quiz-root .ftv-heading {
	font-family: var(--ftv-font);
	/* Fluid: 24px at 360vw → 30px at 720vw+ */
	font-size: clamp(24px, 4.5vw, 30px);
	font-weight: 500;
	line-height: 1.2;
	/* Letter-spacing scales proportionally with the font-size */
	letter-spacing: clamp(-1.8px, -0.06em, -1.4px);
	color: var(--ftv-gray-950);
	margin: 0;
	width: 100%;
	text-wrap: balance;
}

#ftv-quiz-root .ftv-sub {
	font-family: var(--ftv-font);
	/* Fluid: 14px → 16px */
	font-size: clamp(14px, 2.2vw, 16px);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--ftv-gray-600);
	margin: 0;
	width: 100%;
	max-width: 358px;  /* Same width as buttons — Figma sub is 358 inside the 480 heading overflow */
	text-wrap: pretty;
}

/* Welcome sub is narrower per Figma (256px) */
#ftv-quiz-root .ftv-screen--welcome .ftv-sub {
	max-width: 256px;
}

/* Results sub is 256px per Figma */
#ftv-quiz-root .ftv-screen--results .ftv-sub {
	max-width: 256px;
}

/* ═══ WELCOME ═══════════════════════════════════════════════════════════ */
/* Logo + heading are grouped (gap 24), then gap 48 before CTA */
#ftv-quiz-root .ftv-welcome-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ftv-s6);
	width: 100%;
}

#ftv-quiz-root .ftv-welcome-logo {
	width: 80px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#ftv-quiz-root .ftv-welcome-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width: none;
}

#ftv-quiz-root .ftv-welcome-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ftv-s3);
	width: 100%;
}

#ftv-quiz-root .ftv-microcopy {
	font-family: var(--ftv-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-500);
	text-align: center;
	margin: 0;
}

/* ═══ BUTTON — PRIMARY ══════════════════════════════════════════════════
   Figma: button is ALWAYS 358×56 (welcome, steps, results all the same).
   The card lists may overflow to 480, but the button stays narrow. */
#ftv-quiz-root .ftv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ftv-s1);
	width: 100%;
	max-width: 358px;
	align-self: center;
	padding: 16px var(--ftv-s5);
	background: var(--ftv-brand);
	color: var(--ftv-white);
	border-radius: var(--ftv-r-full);
	font-family: var(--ftv-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.32px;
	white-space: nowrap;
	outline: none;
	/* Apple/Airbnb/Linear consensus: only background and opacity transitions,
	   no transforms, no shadow lifts. */
	transition: background var(--ftv-dur) var(--ftv-ease),
	            opacity var(--ftv-dur) var(--ftv-ease);
}
#ftv-quiz-root .ftv-btn:hover {
	background: var(--ftv-brand-dark);
}
#ftv-quiz-root .ftv-btn:active {
	background: var(--ftv-brand-dark);
	opacity: 0.92;
}
#ftv-quiz-root .ftv-btn:focus-visible {
	outline: 2px solid var(--ftv-brand);
	outline-offset: 3px;
}
#ftv-quiz-root .ftv-btn:disabled,
#ftv-quiz-root .ftv-btn[disabled] {
	opacity: 0.38;
	cursor: not-allowed;
	pointer-events: none;
}
#ftv-quiz-root .ftv-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Spinner for loading states (add-to-cart) */
#ftv-quiz-root .ftv-spinner {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	animation: ftvSpin 600ms linear infinite;
}
@keyframes ftvSpin {
	to { transform: rotate(360deg); }
}

/* Loading state on the button — slightly dimmed, not clickable */
#ftv-quiz-root .ftv-btn--loading {
	pointer-events: none;
	opacity: 0.85;
}

/* Card group (cards + continue button) */
#ftv-quiz-root .ftv-card-group {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s10);
	width: 100%;
}

#ftv-quiz-root .ftv-card-list {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s3);
	width: 100%;
}

/* ═══ SHARED CARD BASE ══════════════════════════════════════════════════
   Cards never change their box size on selection — box-shadow (inset)
   provides the border ring. No transforms on hover (anti-AI-slop). */

#ftv-quiz-root .ftv-device-card,
#ftv-quiz-root .ftv-flavour-card,
#ftv-quiz-root .ftv-smoking-card,
#ftv-quiz-root .ftv-hit-card,
#ftv-quiz-root .ftv-eliquid-card {
	position: relative;
	background: var(--ftv-white);
	border: 0;
	border-radius: var(--ftv-r-md);
	box-shadow: inset 0 0 0 1px var(--ftv-gray-200);
	outline: none;
	transition: box-shadow var(--ftv-dur) var(--ftv-ease),
	            background var(--ftv-dur) var(--ftv-ease);
	cursor: pointer;
}

/* Hover: just darken the border — no lift, no shadow. */
#ftv-quiz-root .ftv-device-card:hover:not(.selected),
#ftv-quiz-root .ftv-flavour-card:hover:not(.selected),
#ftv-quiz-root .ftv-smoking-card:hover:not(.selected),
#ftv-quiz-root .ftv-hit-card:hover:not(.selected) {
	box-shadow: inset 0 0 0 1px var(--ftv-gray-500);
}

/* Suppress default browser focus outline on tap (mobile) — show only for keyboard */
#ftv-quiz-root .ftv-device-card:focus,
#ftv-quiz-root .ftv-flavour-card:focus,
#ftv-quiz-root .ftv-smoking-card:focus,
#ftv-quiz-root .ftv-hit-card:focus {
	outline: none;
}

/* Keyboard focus ring — only for :focus-visible (keyboard nav) */
#ftv-quiz-root .ftv-device-card:focus-visible,
#ftv-quiz-root .ftv-flavour-card:focus-visible,
#ftv-quiz-root .ftv-smoking-card:focus-visible,
#ftv-quiz-root .ftv-hit-card:focus-visible {
	outline: 2px solid var(--ftv-brand);
	outline-offset: 2px;
}

/* Selected: 2px brand-red ring */
#ftv-quiz-root .ftv-device-card.selected,
#ftv-quiz-root .ftv-flavour-card.selected,
#ftv-quiz-root .ftv-smoking-card.selected,
#ftv-quiz-root .ftv-hit-card.selected {
	box-shadow: inset 0 0 0 2px var(--ftv-brand);
}

/* ═══ STEP 1 — DEVICE CARDS ══════════════════════════════════════════════ */
#ftv-quiz-root .ftv-device-card {
	display: flex;
	align-items: center;
	gap: var(--ftv-s3);
	padding: var(--ftv-s3) var(--ftv-s6) var(--ftv-s3) var(--ftv-s3);
	width: 100%;
	text-align: left;
}

#ftv-quiz-root .ftv-device-img {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: var(--ftv-r-sm);
	overflow: hidden;
	background: var(--ftv-gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
}
#ftv-quiz-root .ftv-device-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#ftv-quiz-root .ftv-device-body {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ftv-s3);
}

#ftv-quiz-root .ftv-device-info {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s1);
	justify-content: center;
	min-width: 0;
}

#ftv-quiz-root .ftv-device-name {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.36px;
	color: var(--ftv-gray-950);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ftv-quiz-root .ftv-device-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ftv-quiz-root .ftv-device-price-row {
	display: flex;
	align-items: center;
	gap: var(--ftv-s3);
	flex-shrink: 0;
}

#ftv-quiz-root .ftv-device-price {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.32px;
	color: var(--ftv-gray-950);
	white-space: nowrap;
}

/* ═══ RADIO — 20x20 ring with 12x12 dot when selected (matches Figma exactly) */
#ftv-quiz-root .ftv-radio {
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ftv-white);
	box-shadow: inset 0 0 0 1.5px var(--ftv-gray-300);
	flex-shrink: 0;
	transition: box-shadow .2s var(--ftv-ease);
}
#ftv-quiz-root .selected .ftv-radio {
	box-shadow: inset 0 0 0 1.5px var(--ftv-brand);
}
#ftv-quiz-root .selected .ftv-radio::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	background: var(--ftv-brand);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: ftvRadioPop .24s var(--ftv-ease-out);
}
@keyframes ftvRadioPop {
	from { transform: translate(-50%, -50%) scale(0); }
	to   { transform: translate(-50%, -50%) scale(1); }
}

/* Staff pick badge — always use right positioning, never left (responsive-safe) */
#ftv-quiz-root .ftv-badge {
	position: absolute;
	top: -9px;
	right: 12px;
	background: var(--ftv-brand);
	color: var(--ftv-white);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.24px;
	padding: var(--ftv-s1) var(--ftv-s2);
	border-radius: var(--ftv-r-sm);
	white-space: nowrap;
	z-index: 2;
}

/* ═══ STEP 2 — FLAVOUR CARDS ═══════════════════════════════════════════════ */
#ftv-quiz-root .ftv-flavour-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ftv-s3);
	width: 100%;
}

#ftv-quiz-root .ftv-flavour-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ftv-s3);
	padding: var(--ftv-s5);
	min-height: 159px;
	text-align: left;
}

#ftv-quiz-root .ftv-flavour-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--ftv-r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#ftv-quiz-root .ftv-flavour-icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

#ftv-quiz-root .ftv-flavour-icon--fruit       { background: var(--ftv-success-50); }
#ftv-quiz-root .ftv-flavour-icon--mint        { background: var(--ftv-info-50); }
#ftv-quiz-root .ftv-flavour-icon--tobacco     { background: var(--ftv-error-50); }
#ftv-quiz-root .ftv-flavour-icon--delights    { background: var(--ftv-warning-50); }
#ftv-quiz-root .ftv-flavour-icon--flavourless { background: var(--ftv-gray-100); }

#ftv-quiz-root .ftv-flavour-info {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s1);
}

#ftv-quiz-root .ftv-flavour-name {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.36px;
	color: var(--ftv-gray-950);
	white-space: nowrap;
}

#ftv-quiz-root .ftv-flavour-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-500);
	white-space: nowrap;
}

#ftv-quiz-root .ftv-flavour-check {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 20px;
	height: 20px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--ftv-brand);
	color: var(--ftv-white);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity .2s var(--ftv-ease-out), transform .2s var(--ftv-ease-out);
}
#ftv-quiz-root .ftv-flavour-card.selected .ftv-flavour-check {
	display: flex;
	opacity: 1;
	transform: scale(1);
}
#ftv-quiz-root .ftv-flavour-check svg { width: 12px; height: 12px; }

/* ═══ STEP 3 — SMOKING CARDS ═══════════════════════════════════════════════
   Figma: padding 16×24, gap 12 between radio (20x20) and text column.
   Radio → text spacing is 12px, not 32. */
#ftv-quiz-root .ftv-smoking-card {
	display: flex;
	align-items: center;
	gap: var(--ftv-s3);
	padding: 16px var(--ftv-s6);
	width: 100%;
	min-height: 83px;
	text-align: left;
}

#ftv-quiz-root .ftv-smoking-info {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s1);
}

#ftv-quiz-root .ftv-smoking-name {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.36px;
	color: var(--ftv-gray-950);
}

#ftv-quiz-root .ftv-smoking-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-500);
}

/* ═══ STEP 4 — HIT CARDS ══════════════════════════════════════════════════ */
#ftv-quiz-root .ftv-hit-card {
	display: flex;
	align-items: center;
	gap: var(--ftv-s3);
	padding: var(--ftv-s3) var(--ftv-s6) var(--ftv-s3) var(--ftv-s3);
	width: 100%;
	min-height: 88px;
	text-align: left;
}

#ftv-quiz-root .ftv-hit-icon {
	width: 64px;
	height: 64px;
	border-radius: var(--ftv-r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
#ftv-quiz-root .ftv-hit-icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}
#ftv-quiz-root .ftv-hit-icon--smooth { background: var(--ftv-info-50); }
#ftv-quiz-root .ftv-hit-icon--strong { background: var(--ftv-error-50); }

#ftv-quiz-root .ftv-hit-body {
	flex: 1 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ftv-s3);
	min-width: 0;
}

#ftv-quiz-root .ftv-hit-info {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s1);
	min-width: 0;
}

#ftv-quiz-root .ftv-hit-name {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.36px;
	color: var(--ftv-gray-950);
	white-space: nowrap;
}

#ftv-quiz-root .ftv-hit-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ═══ RESULTS SCREEN ═══════════════════════════════════════════════════════ */
/* Results header: check circle + heading-block, 358 wide centered */
#ftv-quiz-root .ftv-results-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ftv-s6);
	width: 100%;
	max-width: 358px;
	align-self: center;
}

/* Results main wraps body + cta with 40px gap between them (Figma s10).
   Body (cards) is 480 wide, cta is 358 wide — just like steps. */
#ftv-quiz-root .ftv-results-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ftv-s10);
	width: 100%;
}

#ftv-quiz-root .ftv-check-circle {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: ftvCheckPop .5s var(--ftv-ease-out) both;
}
@keyframes ftvCheckPop {
	0%   { transform: scale(0.7); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

/* Results body: full 480 wide (cards overflow from the 358 column, like steps) */
#ftv-quiz-root .ftv-results-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ftv-s8);
	width: 100%;
}

/* Results CTA: 358 wide centered (button + questions link) */
#ftv-quiz-root .ftv-results-cta {
	max-width: 358px;
	align-self: center;
}

#ftv-quiz-root .ftv-results-section {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s2);
	width: 100%;
}

#ftv-quiz-root .ftv-section-label {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.96px;
	color: var(--ftv-gray-500);
	text-transform: uppercase;
	margin: 0;
}

#ftv-quiz-root .ftv-eliquid-list {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s3);
	width: 100%;
}

#ftv-quiz-root .ftv-eliquid-card {
	display: flex;
	align-items: center;
	gap: var(--ftv-s3);
	padding: var(--ftv-s3) var(--ftv-s6) var(--ftv-s3) var(--ftv-s3);
	width: 100%;
	cursor: default;
}
#ftv-quiz-root .ftv-eliquid-card:hover { transform: none; box-shadow: inset 0 0 0 1px var(--ftv-gray-200); }

#ftv-quiz-root .ftv-eliquid-img {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: var(--ftv-r-sm);
	overflow: hidden;
	background: var(--ftv-gray-100);
}
#ftv-quiz-root .ftv-eliquid-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#ftv-quiz-root .ftv-eliquid-body {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ftv-s3);
}

#ftv-quiz-root .ftv-eliquid-info {
	display: flex;
	flex-direction: column;
	gap: var(--ftv-s1);
	min-width: 0;
}

#ftv-quiz-root .ftv-eliquid-name {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.36px;
	color: var(--ftv-gray-950);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ftv-quiz-root .ftv-eliquid-meta {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-500);
	white-space: nowrap;
}

#ftv-quiz-root .ftv-eliquid-price {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.32px;
	color: var(--ftv-gray-950);
	white-space: nowrap;
	flex-shrink: 0;
}

#ftv-quiz-root .ftv-eliquid-skeleton {
	height: 104px;
	width: 100%;
	background: linear-gradient(90deg, var(--ftv-gray-100) 0%, var(--ftv-white) 50%, var(--ftv-gray-100) 100%);
	background-size: 200% 100%;
	border-radius: var(--ftv-r-md);
	animation: ftvShimmer 1.4s ease-in-out infinite;
}
@keyframes ftvShimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Results CTA */
#ftv-quiz-root .ftv-results-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ftv-s3);
	width: 100%;
}

#ftv-quiz-root .ftv-contact-line {
	display: inline-flex;
	align-items: center;
	gap: var(--ftv-s1);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.28px;
	color: var(--ftv-gray-500);
}
#ftv-quiz-root .ftv-contact-link {
	color: var(--ftv-brand);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: opacity .18s var(--ftv-ease);
}
#ftv-quiz-root .ftv-contact-link:hover { opacity: 0.75; }
#ftv-quiz-root .ftv-contact-line svg {
	width: 14px;
	height: 14px;
	color: var(--ftv-brand);
	flex-shrink: 0;
}

#ftv-quiz-root .ftv-cart-error {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ftv-brand);
	margin: 0;
	text-align: center;
}
#ftv-quiz-root .ftv-cart-error a {
	color: var(--ftv-brand);
	text-decoration: underline;
}

/* ═══ INTERACTIVE POLISH ═══════════════════════════════════════════════════ */

/* :active state on all interactive cards — mobile tactile feedback */
#ftv-quiz-root .ftv-device-card:active,
#ftv-quiz-root .ftv-flavour-card:active,
#ftv-quiz-root .ftv-smoking-card:active,
#ftv-quiz-root .ftv-hit-card:active {
	opacity: 0.92;
	transition-duration: 50ms;
}

/* Text selection — brand-appropriate colors */
#ftv-quiz-root ::selection {
	background: rgba(224, 48, 44, 0.12);
	color: var(--ftv-gray-950);
}

/* Back button — 44px minimum touch target on all sizes */
#ftv-quiz-root .ftv-back {
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
}

/* Windows High Contrast Mode — ensure card borders visible */
@media (forced-colors: active) {
	#ftv-quiz-root .ftv-device-card,
	#ftv-quiz-root .ftv-flavour-card,
	#ftv-quiz-root .ftv-smoking-card,
	#ftv-quiz-root .ftv-hit-card,
	#ftv-quiz-root .ftv-eliquid-card {
		border: 1px solid transparent;
	}
	#ftv-quiz-root .ftv-device-card.selected,
	#ftv-quiz-root .ftv-flavour-card.selected,
	#ftv-quiz-root .ftv-smoking-card.selected,
	#ftv-quiz-root .ftv-hit-card.selected {
		border: 2px solid Highlight;
	}
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   Container queries (preferred) + media queries (fallback).
   Breakpoint strategy:
     ≥ 900px  → Figma desktop spec, padding 160, card widths 480
     640–899  → Tablet/compact: reduced padding, tighter gaps
     < 640    → Mobile: 1-col cards, 2-col flavour grid (kept!), reduced text
     Flavour grid STAYS 2-col down to 360px per user requirement.
*/

/* ── Tablet (900px down) ─────────────────────────────────────────── */
@container ftv (max-width: 899px) {
	#ftv-quiz-root .ftv-content  { padding-top: var(--ftv-s12); padding-bottom: var(--ftv-s16); }
	#ftv-quiz-root .ftv-screen.active { gap: var(--ftv-s10); }
	#ftv-quiz-root .ftv-screen--step.active { gap: var(--ftv-s8); }
}
@media (max-width: 899px) {
	#ftv-quiz-root .ftv-content  { padding-top: var(--ftv-s12); padding-bottom: var(--ftv-s16); }
	#ftv-quiz-root .ftv-screen.active { gap: var(--ftv-s10); }
	#ftv-quiz-root .ftv-screen--step.active { gap: var(--ftv-s8); }
}

/* ── Mobile (639px down) ─────────────────────────────────────────── */
@container ftv (max-width: 639px) {
	/* Topnav — tighter, swap to short browse label */
	#ftv-quiz-root .ftv-topnav {
		padding: var(--ftv-s5) var(--ftv-s5) 0;
		gap: var(--ftv-s2);
	}
	#ftv-quiz-root .ftv-back span { display: none; }  /* icon only */
	#ftv-quiz-root .ftv-back { min-width: 32px; }
	#ftv-quiz-root .ftv-browse-long  { display: none; }
	#ftv-quiz-root .ftv-browse-short { display: inline; }
	#ftv-quiz-root .ftv-progress { width: 120px; }

	/* Content — reduced padding */
	#ftv-quiz-root .ftv-content {
		padding: var(--ftv-s10) var(--ftv-s5) var(--ftv-s12);
	}
	#ftv-quiz-root .ftv-content--centered {
		padding: var(--ftv-s5);
	}

	/* Screens fill the viewport at this size */
	#ftv-quiz-root .ftv-screen.active { width: 100%; gap: var(--ftv-s8); }
	#ftv-quiz-root .ftv-screen--welcome.active,
	#ftv-quiz-root .ftv-screen--results.active { width: 100%; }

	/* Headings + sub shrink */
	#ftv-quiz-root .ftv-heading { text-wrap: balance; }
	#ftv-quiz-root .ftv-sub { max-width: 320px; }
	#ftv-quiz-root .ftv-heading-block { max-width: 100%; gap: var(--ftv-s2); }
	#ftv-quiz-root .ftv-welcome-group { gap: var(--ftv-s5); }

	/* Welcome logo slightly smaller */
	#ftv-quiz-root .ftv-welcome-logo { width: 64px; height: 60px; }

	/* ── Cards ─────────────────────────────────────── */
	/* Device / hit / eliquid cards — tighter padding, smaller image */
	#ftv-quiz-root .ftv-device-card,
	#ftv-quiz-root .ftv-hit-card,
	#ftv-quiz-root .ftv-eliquid-card {
		padding: var(--ftv-s3);
		gap: var(--ftv-s3);
	}
	#ftv-quiz-root .ftv-device-img,
	#ftv-quiz-root .ftv-eliquid-img { width: 64px; height: 64px; }
	#ftv-quiz-root .ftv-hit-icon { width: 56px; height: 56px; }
	#ftv-quiz-root .ftv-hit-icon img { width: 48px; height: 48px; }
	#ftv-quiz-root .ftv-hit-name { font-size: 16px; letter-spacing: -0.32px; }
	#ftv-quiz-root .ftv-hit-desc { font-size: 13px; line-height: 1.4; }

	#ftv-quiz-root .ftv-device-name,
	#ftv-quiz-root .ftv-eliquid-name { font-size: 16px; letter-spacing: -0.32px; line-height: 1.4; }
	#ftv-quiz-root .ftv-device-desc,
	#ftv-quiz-root .ftv-eliquid-meta,
	#ftv-quiz-root .ftv-hit-desc { font-size: 13px; line-height: 1.4; white-space: normal; }
	#ftv-quiz-root .ftv-device-price,
	#ftv-quiz-root .ftv-eliquid-price { font-size: 15px; }

	/* Smoking — slightly tighter */
	#ftv-quiz-root .ftv-smoking-card {
		padding: var(--ftv-s3) var(--ftv-s5);
		min-height: 72px;
	}
	#ftv-quiz-root .ftv-smoking-name { font-size: 16px; letter-spacing: -0.32px; }
	#ftv-quiz-root .ftv-smoking-desc { font-size: 13px; line-height: 1.4; }

	/* ── Flavour grid: STAYS 2-col on mobile (user requirement) ── */
	#ftv-quiz-root .ftv-flavour-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--ftv-s2);
	}
	#ftv-quiz-root .ftv-flavour-card {
		min-height: 0;
		padding: var(--ftv-s3);
		gap: var(--ftv-s2);
	}
	#ftv-quiz-root .ftv-flavour-icon { width: 44px; height: 44px; }
	#ftv-quiz-root .ftv-flavour-icon img { width: 36px; height: 36px; }
	#ftv-quiz-root .ftv-flavour-name { font-size: 16px; letter-spacing: -0.32px; white-space: normal; }
	#ftv-quiz-root .ftv-flavour-desc { font-size: 13px; line-height: 1.4; white-space: normal; }
	#ftv-quiz-root .ftv-flavour-check { top: 10px; right: 10px; width: 18px; height: 18px; }

	/* Badge: right:12px is already the default — no override needed */

	/* Button a bit tighter */
	#ftv-quiz-root .ftv-btn { padding: 14px var(--ftv-s5); font-size: 15px; }

	/* Results: sections gap tighter */
	#ftv-quiz-root .ftv-results-body { gap: var(--ftv-s5); }
	#ftv-quiz-root .ftv-check-circle { width: 52px; height: 52px; }
}
@media (max-width: 639px) {
	#ftv-quiz-root .ftv-topnav {
		padding: var(--ftv-s5) var(--ftv-s5) 0;
		gap: var(--ftv-s2);
	}
	#ftv-quiz-root .ftv-back span { display: none; }
	#ftv-quiz-root .ftv-back { min-width: 32px; }
	#ftv-quiz-root .ftv-browse-long  { display: none; }
	#ftv-quiz-root .ftv-browse-short { display: inline; }
	#ftv-quiz-root .ftv-progress { width: 120px; }
	#ftv-quiz-root .ftv-content {
		padding: var(--ftv-s10) var(--ftv-s5) var(--ftv-s12);
	}
	#ftv-quiz-root .ftv-content--centered { padding: var(--ftv-s5); }
	#ftv-quiz-root .ftv-screen.active { width: 100%; gap: var(--ftv-s8); }
	#ftv-quiz-root .ftv-screen--welcome.active,
	#ftv-quiz-root .ftv-screen--results.active { width: 100%; }
	#ftv-quiz-root .ftv-heading { text-wrap: balance; }
	#ftv-quiz-root .ftv-sub { max-width: 320px; }
	#ftv-quiz-root .ftv-heading-block { max-width: 100%; gap: var(--ftv-s2); }
	#ftv-quiz-root .ftv-welcome-group { gap: var(--ftv-s5); }
	#ftv-quiz-root .ftv-welcome-logo { width: 64px; height: 60px; }
	#ftv-quiz-root .ftv-device-card,
	#ftv-quiz-root .ftv-hit-card,
	#ftv-quiz-root .ftv-eliquid-card {
		padding: var(--ftv-s3);
		gap: var(--ftv-s3);
	}
	#ftv-quiz-root .ftv-device-img,
	#ftv-quiz-root .ftv-eliquid-img { width: 64px; height: 64px; }
	#ftv-quiz-root .ftv-hit-icon { width: 56px; height: 56px; }
	#ftv-quiz-root .ftv-hit-icon img { width: 48px; height: 48px; }
	#ftv-quiz-root .ftv-hit-name { font-size: 16px; letter-spacing: -0.32px; }
	#ftv-quiz-root .ftv-hit-desc { font-size: 13px; line-height: 1.4; }
	#ftv-quiz-root .ftv-device-name,
	#ftv-quiz-root .ftv-eliquid-name { font-size: 16px; letter-spacing: -0.32px; line-height: 1.4; }
	#ftv-quiz-root .ftv-device-desc,
	#ftv-quiz-root .ftv-eliquid-meta,
	#ftv-quiz-root .ftv-hit-desc { font-size: 13px; line-height: 1.4; white-space: normal; }
	#ftv-quiz-root .ftv-device-price,
	#ftv-quiz-root .ftv-eliquid-price { font-size: 15px; }
	#ftv-quiz-root .ftv-smoking-card {
		padding: var(--ftv-s3) var(--ftv-s5);
		min-height: 72px;
	}
	#ftv-quiz-root .ftv-smoking-name { font-size: 16px; letter-spacing: -0.32px; }
	#ftv-quiz-root .ftv-smoking-desc { font-size: 13px; line-height: 1.4; }
	#ftv-quiz-root .ftv-flavour-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--ftv-s2);
	}
	#ftv-quiz-root .ftv-flavour-card {
		min-height: 0;
		padding: var(--ftv-s3);
		gap: var(--ftv-s2);
	}
	#ftv-quiz-root .ftv-flavour-icon { width: 44px; height: 44px; }
	#ftv-quiz-root .ftv-flavour-icon img { width: 36px; height: 36px; }
	#ftv-quiz-root .ftv-flavour-name { font-size: 16px; letter-spacing: -0.32px; white-space: normal; }
	#ftv-quiz-root .ftv-flavour-desc { font-size: 13px; line-height: 1.4; white-space: normal; }
	#ftv-quiz-root .ftv-flavour-check { top: 10px; right: 10px; width: 18px; height: 18px; }
	#ftv-quiz-root .ftv-badge { left: auto; right: 12px; top: -9px; }
	#ftv-quiz-root .ftv-btn { padding: 14px var(--ftv-s5); font-size: 15px; }
	#ftv-quiz-root .ftv-results-body { gap: var(--ftv-s5); }
	#ftv-quiz-root .ftv-check-circle { width: 52px; height: 52px; }
}

/* Reduce motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
	#ftv-quiz-root .ftv-screen.active,
	#ftv-quiz-root .ftv-check-circle,
	#ftv-quiz-root .selected .ftv-radio::after,
	#ftv-quiz-root .ftv-flavour-card.selected .ftv-flavour-check,
	#ftv-quiz-root .ftv-spinner,
	#ftv-quiz-root .ftv-eliquid-skeleton {
		animation: none !important;
	}
	#ftv-quiz-root .ftv-eliquid-skeleton {
		background: var(--ftv-gray-100) !important;
	}
}