/**
 * BD Product Finder Quiz block (.bdpq) — a one-question-at-a-time quiz panel
 * that ends on a recommended-product card. Mobile-first; every colour and
 * size comes from a CSS variable the block spec sets, and each design only
 * re-points the internal --pq-* "ground" variables, so one set of component
 * rules serves all eight panels.
 *
 * vars:    --max-width --head-size --q-size --choice-size --ans-cols --gap
 *          --choice-pad --choice-radius --num-size --rname-size --img-size
 *          --res-radius --btn-radius
 *          --panel-bg --panel-line --accent --eb-bg --eb-color --head-color
 *          --sub-color --lbl-color --q-color --choice-bg --choice-border
 *          --choice-color --choice-hover-bg --choice-hover-border
 *          --num-bg --num-color --bar-bg --res-bg --rlb-color --rname-color
 *          --rdesc-color --price-color --pri-bg --pri-color --pri-shadow
 *          --alt-bg --alt-color --alt-border --again-color
 * classes: is-design-dark|light|soft|outline|gradient|glass|box|plain
 *          is-choice-style-solid|outline|soft|card|list
 *          is-num-shape-circle|square|plain|none
 *          is-bar-style-bars|dots|none  is-res-layout-stack|row
 *          is-step-anim-none|fade|slide  is-text-align-left|center|right
 *          is-tick / no-tick
 */

/* ------------------------------------------------- ground: light panels */

.espt-block-bd-product-quiz {
	--pq-accent: var(--bd-accent);
	--pq-panel: #ffffff;
	--pq-line: var(--bd-line);
	--pq-fg: var(--bd-body);
	--pq-head: var(--bd-ink);
	--pq-sub: var(--bd-muted);
	--pq-lbl: var(--bd-primary-dark);
	--pq-eb-bg: var(--bd-soft);
	--pq-eb-fg: var(--bd-primary-dark);
	--pq-choice-bg: var(--bd-soft);
	--pq-choice-line: var(--bd-soft-line);
	--pq-choice-fg: var(--bd-ink);
	--pq-choice-hover-bg: color-mix(in srgb, var(--bd-primary) 10%, #ffffff);
	--pq-choice-hover-line: var(--bd-primary);
	--pq-choice-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.35);
	--pq-num-bg: #ffffff;
	--pq-num-fg: var(--bd-primary);
	--pq-track: var(--bd-line);
	--pq-res-bg: var(--bd-soft);
	--pq-res-ink: var(--bd-ink);
	--pq-res-body: var(--bd-body);
	--pq-res-lbl: var(--bd-primary-dark);
	--pq-res-line: var(--bd-soft-line);
	--pq-again: var(--bd-muted);
}

/* --------------------------------------------------- ground: dark panels */

.espt-block-bd-product-quiz.is-design-dark,
.espt-block-bd-product-quiz.is-design-gradient,
.espt-block-bd-product-quiz.is-design-glass {
	--pq-panel: var(--bd-deep);
	--pq-line: color-mix(in srgb, #ffffff 12%, transparent);
	--pq-fg: color-mix(in srgb, #ffffff 88%, var(--bd-deep));
	--pq-head: #ffffff;
	--pq-sub: color-mix(in srgb, #ffffff 70%, var(--bd-deep));
	--pq-lbl: color-mix(in srgb, #ffffff 76%, var(--bd-primary));
	--pq-eb-bg: color-mix(in srgb, #ffffff 14%, transparent);
	--pq-eb-fg: color-mix(in srgb, #ffffff 88%, var(--bd-primary));
	--pq-choice-bg: color-mix(in srgb, #ffffff 9%, transparent);
	--pq-choice-line: color-mix(in srgb, #ffffff 20%, transparent);
	--pq-choice-fg: color-mix(in srgb, #ffffff 92%, var(--bd-deep));
	--pq-choice-hover-bg: color-mix(in srgb, #ffffff 17%, transparent);
	--pq-choice-hover-line: var(--bd-accent);
	--pq-choice-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
	--pq-num-bg: color-mix(in srgb, #000000 30%, transparent);
	--pq-num-fg: var(--bd-accent);
	--pq-track: color-mix(in srgb, #ffffff 16%, transparent);
	--pq-res-bg: #f7f8f6;
	--pq-res-line: #d5dbd5;
	--pq-again: color-mix(in srgb, #ffffff 62%, var(--bd-deep));
}

.espt-block-bd-product-quiz.is-design-soft {
	--pq-panel: var(--bd-soft);
	--pq-line: var(--bd-soft-line);
	--pq-choice-bg: #ffffff;
	--pq-num-bg: var(--bd-soft);
	--pq-res-bg: #ffffff;
}

.espt-block-bd-product-quiz.is-design-outline {
	--pq-panel: transparent;
	--pq-line: var(--bd-soft-line);
	--pq-choice-bg: transparent;
	--pq-num-bg: var(--bd-soft);
}

.espt-block-bd-product-quiz.is-design-box {
	--pq-panel: var(--bd-box-bg);
	--pq-line: var(--bd-box-line);
}

.espt-block-bd-product-quiz.is-design-plain {
	--pq-panel: transparent;
	--pq-line: transparent;
}

/* ------------------------------------------------------------- the panel */

.espt-block-bd-product-quiz .bdpq {
	background: var(--panel-bg, var(--pq-panel));
	border: 1px solid var(--panel-line, var(--pq-line));
	border-radius: var(--bd-radius, 14px);
	color: var(--pq-fg);
	line-height: 1.6;
	margin-left: auto;
	margin-right: auto;
	max-width: min(100%, var(--max-width, 620px));
	min-width: 0;
	padding: var(--bd-pad, 16px);
	position: relative;
}

.espt-block-bd-product-quiz.is-design-gradient .bdpq {
	background: var(--panel-bg, linear-gradient(145deg, var(--bd-primary) 0%, var(--bd-deep) 82%));
	border-color: var(--panel-line, transparent);
}

.espt-block-bd-product-quiz.is-design-glass .bdpq {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background: var(--panel-bg, color-mix(in srgb, var(--bd-deep) 74%, transparent));
}

.espt-block-bd-product-quiz.is-design-outline .bdpq {
	border-width: 2px;
}

.espt-block-bd-product-quiz.is-design-plain .bdpq {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* ------------------------------------------------------------- heading */

.espt-block-bd-product-quiz .bdpq-head {
	margin-bottom: 16px;
	min-width: 0;
}

.espt-block-bd-product-quiz.is-text-align-center .bdpq-head { text-align: center; }
.espt-block-bd-product-quiz.is-text-align-right .bdpq-head { text-align: right; }

.espt-block-bd-product-quiz .bdpq-eb {
	background: var(--eb-bg, var(--pq-eb-bg));
	border-radius: 99px;
	color: var(--eb-color, var(--pq-eb-fg));
	display: inline-block;
	font-size: clamp(10px, calc(var(--head-size, 22px) * 0.5), 14px);
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.4;
	margin-bottom: 10px;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 4px 12px;
}

.espt-block-bd-product-quiz .bdpq-h {
	color: var(--head-color, var(--pq-head));
	font-size: var(--head-size, 22px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}

.espt-block-bd-product-quiz .bdpq-h strong {
	color: var(--accent, var(--pq-accent));
	font-weight: inherit;
}

.espt-block-bd-product-quiz .bdpq-sb {
	color: var(--sub-color, var(--pq-sub));
	font-size: clamp(12px, calc(var(--head-size, 22px) * 0.62), 17px);
	line-height: 1.65;
	margin: 0;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- steps */

.espt-block-bd-product-quiz .bdpq-steps {
	min-width: 0;
}

.espt-block-bd-product-quiz .bdpq-qb {
	display: none;
	min-width: 0;
}

.espt-block-bd-product-quiz .bdpq-qb.is-on {
	display: block;
}

.espt-block-bd-product-quiz.is-step-anim-fade .bdpq-qb.is-on {
	animation: espt-pq-fade 0.28s ease both;
}

.espt-block-bd-product-quiz.is-step-anim-slide .bdpq-qb.is-on {
	animation: espt-pq-slide 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes espt-pq-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes espt-pq-slide {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.espt-block-bd-product-quiz .bdpq-lbl {
	color: var(--lbl-color, var(--pq-lbl));
	font-size: clamp(10px, calc(var(--q-size, 17px) * 0.66), 14px);
	font-weight: 700;
	letter-spacing: 0.13em;
	margin-bottom: 5px;
	overflow-wrap: anywhere;
}

.espt-block-bd-product-quiz .bdpq-q {
	color: var(--q-color, var(--pq-head));
	font-size: var(--q-size, 17px);
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- answers */

.espt-block-bd-product-quiz .bdpq-c {
	display: grid;
	gap: var(--gap, 8px);
	grid-template-columns: repeat(var(--ans-cols, 1), minmax(0, 1fr));
	min-width: 0;
}

.espt-block-bd-product-quiz .bdpq-ch {
	align-items: center;
	background: var(--choice-bg, var(--pq-choice-bg));
	border: 1.5px solid var(--choice-border, var(--pq-choice-line));
	border-radius: var(--choice-radius, 10px);
	color: var(--choice-color, var(--pq-choice-fg));
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: var(--choice-size, 15px);
	font-weight: 600;
	gap: 12px;
	line-height: 1.45;
	margin: 0;
	min-width: 0;
	padding: var(--choice-pad, 13px);
	text-align: left;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
	width: 100%;
}

.espt-block-bd-product-quiz .bdpq-cl {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* number badge / answer icon */

.espt-block-bd-product-quiz .bdpq-n {
	align-items: center;
	background: var(--num-bg, var(--pq-num-bg));
	border-radius: 50%;
	color: var(--num-color, var(--pq-num-fg));
	display: inline-flex;
	flex: none;
	font-size: calc(var(--num-size, 28px) * 0.5);
	font-weight: 800;
	height: var(--num-size, 28px);
	justify-content: center;
	line-height: 1;
	width: var(--num-size, 28px);
}

.espt-block-bd-product-quiz.is-num-shape-square .bdpq-n {
	border-radius: calc(var(--num-size, 28px) * 0.28);
}

.espt-block-bd-product-quiz.is-num-shape-plain .bdpq-n {
	background: none;
	border-radius: 0;
	justify-content: flex-start;
	width: auto;
}

.espt-block-bd-product-quiz .bdpq-nico {
	display: inline-flex;
	line-height: 0;
}

.espt-block-bd-product-quiz .bdpq-nico svg {
	height: calc(var(--num-size, 28px) * 0.55);
	width: calc(var(--num-size, 28px) * 0.55);
}

/* the tick that marks the answer you picked */

.espt-block-bd-product-quiz .bdpq-tick {
	color: var(--accent, var(--pq-accent));
	display: none;
	flex: none;
	height: 1.1em;
	width: 1.1em;
}

.espt-block-bd-product-quiz .bdpq-tick svg {
	display: block;
	height: 100%;
	width: 100%;
}

.espt-block-bd-product-quiz.is-tick .bdpq-ch.is-picked .bdpq-tick {
	display: block;
}

/* answer-button styles */

.espt-block-bd-product-quiz.is-choice-style-outline .bdpq-ch {
	background: var(--choice-bg, transparent);
	border-width: 2px;
}

.espt-block-bd-product-quiz.is-choice-style-soft .bdpq-ch {
	background: var(--choice-bg, color-mix(in srgb, var(--pq-choice-fg) 9%, transparent));
	border-color: var(--choice-border, transparent);
}

.espt-block-bd-product-quiz.is-choice-style-card .bdpq-ch {
	border-color: var(--choice-border, transparent);
	box-shadow: var(--pq-choice-shadow);
}

.espt-block-bd-product-quiz.is-choice-style-card .bdpq-ch:hover {
	box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.5);
	transform: translateY(-2px);
}

.espt-block-bd-product-quiz.is-choice-style-list .bdpq-c {
	gap: 0;
}

.espt-block-bd-product-quiz.is-choice-style-list .bdpq-ch {
	background: var(--choice-bg, transparent);
	border: 0;
	border-bottom: 1px solid var(--choice-border, var(--pq-choice-line));
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

.espt-block-bd-product-quiz.is-choice-style-list .bdpq-ch:last-child {
	border-bottom: 0;
}

/* Answer states. These come AFTER the style variants on purpose: the variant
   rules above carry the same specificity, so a hover/picked rule placed before
   them would silently lose on the outline / soft / card styles. */

.espt-block-bd-product-quiz .bdpq-ch:hover {
	background: var(--choice-hover-bg, var(--pq-choice-hover-bg));
	border-color: var(--choice-hover-border, var(--pq-choice-hover-line));
}

.espt-block-bd-product-quiz .bdpq-ch:active {
	transform: translateY(1px);
}

.espt-block-bd-product-quiz .bdpq-ch.is-picked {
	background: var(--choice-hover-bg, var(--pq-choice-hover-bg));
	border-color: var(--accent, var(--pq-accent));
}

/* The borderless list keeps its own hover: a soft row tint that works on both
   the light and the dark grounds, with no border to colour. */
.espt-block-bd-product-quiz.is-choice-style-list .bdpq-ch:hover,
.espt-block-bd-product-quiz.is-choice-style-list .bdpq-ch.is-picked {
	background: var(--choice-hover-bg, color-mix(in srgb, var(--pq-choice-fg) 8%, transparent));
	border-bottom-color: var(--accent, var(--pq-accent));
}

.espt-block-bd-product-quiz.is-choice-style-card .bdpq-ch:hover {
	border-color: var(--choice-hover-border, var(--pq-choice-hover-line));
}

/* -------------------------------------------------------- back / again */

.espt-block-bd-product-quiz .bdpq-back,
.espt-block-bd-product-quiz .bdpq-again {
	background: none;
	border: 0;
	color: var(--again-color, var(--pq-again));
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	margin-top: 10px;
	padding: 6px 2px;
	transition: color 0.15s ease;
}

.espt-block-bd-product-quiz .bdpq-again {
	display: block;
	text-align: center;
	width: 100%;
}

.espt-block-bd-product-quiz .bdpq-back:hover,
.espt-block-bd-product-quiz .bdpq-again:hover {
	color: var(--accent, var(--pq-accent));
}

/* ------------------------------------------------------- progress bar */

.espt-block-bd-product-quiz .bdpq-bar {
	display: flex;
	gap: 5px;
	margin-top: 16px;
	min-width: 0;
}

.espt-block-bd-product-quiz .bdpq-bar i {
	background: var(--bar-bg, var(--pq-track));
	border-radius: 99px;
	flex: 1 1 0;
	height: 4px;
	min-width: 0;
	transition: background 0.25s ease;
}

.espt-block-bd-product-quiz .bdpq-bar i.is-on {
	background: var(--accent, var(--pq-accent));
}

.espt-block-bd-product-quiz.is-bar-style-dots .bdpq-bar {
	gap: 7px;
	justify-content: center;
}

.espt-block-bd-product-quiz.is-bar-style-dots .bdpq-bar i {
	border-radius: 50%;
	flex: none;
	height: 8px;
	width: 8px;
}

.espt-block-bd-product-quiz .bdpq.is-done .bdpq-bar {
	display: none;
}

/* --------------------------------------------------------- result card */

/* tabindex="-1" holder — the script parks focus here on the result step, so
   no ring: it is never reachable by Tab. */
.espt-block-bd-product-quiz .bdpq-res:focus {
	outline: none;
}

.espt-block-bd-product-quiz .bdpq-res {
	background: var(--res-bg, var(--pq-res-bg));
	border-radius: var(--res-radius, 12px);
	color: var(--rdesc-color, var(--pq-res-body));
	min-width: 0;
	padding: clamp(14px, 4.5vw, 20px);
}

.espt-block-bd-product-quiz .bdpq-rtx {
	min-width: 0;
}

.espt-block-bd-product-quiz .bdpq-rimg {
	margin-bottom: 12px;
	min-width: 0;
}

.espt-block-bd-product-quiz .bdpq-rimg img {
	border-radius: 10px;
	display: block;
	height: auto;
	margin: 0 auto;
	max-height: var(--img-size, 120px);
	max-width: 100%;
	width: auto;
}

.espt-block-bd-product-quiz .bdpq-rbadge {
	background: color-mix(in srgb, var(--accent, var(--bd-accent)) 24%, transparent);
	border-radius: 99px;
	color: var(--bd-accent-ink);
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 3px 10px;
}

.espt-block-bd-product-quiz .bdpq-rlb {
	color: var(--rlb-color, var(--pq-res-lbl));
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	margin-bottom: 5px;
	overflow-wrap: anywhere;
}

.espt-block-bd-product-quiz .bdpq-rname {
	color: var(--rname-color, var(--pq-res-ink));
	font-size: var(--rname-size, 23px);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.espt-block-bd-product-quiz .bdpq-rdesc {
	color: var(--rdesc-color, var(--pq-res-body));
	font-size: clamp(12px, calc(var(--rname-size, 23px) * 0.6), 17px);
	line-height: 1.7;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

.espt-block-bd-product-quiz .bdpq-rprice {
	color: var(--price-color, var(--bd-primary-dark));
	font-size: clamp(15px, calc(var(--rname-size, 23px) * 0.8), 30px);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

/* result CTAs */

.espt-block-bd-product-quiz .bdpq-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.espt-block-bd-product-quiz .bdpq-cta a {
	align-items: center;
	border: 0;
	border-radius: var(--btn-radius, 8px);
	display: inline-flex;
	flex: 1 1 130px;
	font-size: clamp(13px, calc(var(--rname-size, 23px) * 0.62), 18px);
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 12px 14px;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.espt-block-bd-product-quiz .bdpq-pri {
	background: var(--pri-bg, var(--bd-primary));
	box-shadow: 0 3px 0 var(--pri-shadow, var(--bd-primary-dark));
	color: var(--pri-color, #ffffff);
}

.espt-block-bd-product-quiz .bdpq-pri:hover {
	color: var(--pri-color, #ffffff);
	filter: brightness(1.07);
}

.espt-block-bd-product-quiz .bdpq-pri:active {
	box-shadow: none;
	transform: translateY(3px);
}

.espt-block-bd-product-quiz .bdpq-bico {
	display: inline-flex;
	flex: none;
	line-height: 0;
}

.espt-block-bd-product-quiz .bdpq-bico svg {
	display: block;
	height: 1.15em;
	width: 1.15em;
}

/* Ghost button: transparent, so it reads as a button on every result-card
   ground (a white fill disappears on the light "soft" card). */
.espt-block-bd-product-quiz .bdpq-alt {
	background: var(--alt-bg, transparent);
	box-shadow: inset 0 0 0 1.5px var(--alt-border, var(--pq-res-line));
	color: var(--alt-color, var(--pq-res-ink));
}

.espt-block-bd-product-quiz .bdpq-alt:hover {
	background: var(--alt-bg, color-mix(in srgb, var(--pq-res-ink) 7%, transparent));
	color: var(--alt-color, var(--pq-res-ink));
	transform: translateY(-1px);
}

/* Anything the script empties is [hidden]; this outranks the display rules
   the parts above set (image wrapper, badge, price, description). */
.espt-block-bd-product-quiz .bdpq [hidden] {
	display: none;
}

/* ------------------------------------------------------------- focus */

.espt-block-bd-product-quiz .bdpq-ch:focus-visible,
.espt-block-bd-product-quiz .bdpq-back:focus-visible,
.espt-block-bd-product-quiz .bdpq-again:focus-visible,
.espt-block-bd-product-quiz .bdpq-cta a:focus-visible {
	outline: 2px solid var(--accent, var(--pq-accent));
	outline-offset: 2px;
}

/* -------------------------------------------------------- ≥768px */

@media (min-width: 768px) {
	.espt-block-bd-product-quiz .bdpq-head {
		margin-bottom: 18px;
	}

	.espt-block-bd-product-quiz.is-res-layout-row .bdpq-res {
		align-items: flex-start;
		display: flex;
		gap: 16px;
	}

	/* min() so a large "result image size" can never squeeze the text column
	   out of the row on a tablet-width panel. */
	.espt-block-bd-product-quiz.is-res-layout-row .bdpq-rimg {
		flex: 0 0 auto;
		margin-bottom: 0;
		width: min(45%, var(--img-size, 120px));
	}

	.espt-block-bd-product-quiz.is-res-layout-row .bdpq-rimg img {
		max-height: none;
		width: 100%;
	}

	.espt-block-bd-product-quiz.is-res-layout-row .bdpq-rtx {
		flex: 1 1 0;
	}
}

/* ------------------------------------------------------- ≥1024px */

@media (min-width: 1024px) {
	.espt-block-bd-product-quiz .bdpq-ch {
		padding: var(--choice-pad, 13px) calc(var(--choice-pad, 13px) + 2px);
	}

	.espt-block-bd-product-quiz.is-choice-style-list .bdpq-ch {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-product-quiz .bdpq-qb.is-on {
		animation: none;
	}

	.espt-block-bd-product-quiz .bdpq-ch,
	.espt-block-bd-product-quiz .bdpq-bar i,
	.espt-block-bd-product-quiz .bdpq-cta a,
	.espt-block-bd-product-quiz .bdpq-back,
	.espt-block-bd-product-quiz .bdpq-again {
		transition: none;
	}

	.espt-block-bd-product-quiz .bdpq-ch:hover,
	.espt-block-bd-product-quiz .bdpq-ch:active,
	.espt-block-bd-product-quiz .bdpq-alt:hover,
	.espt-block-bd-product-quiz .bdpq-pri:active {
		transform: none;
	}
}