/* NFXProductStory range comparison (component/nfx-range/range.html.twig), loaded only where it renders.
   One structure, three shop looks through custom properties, chosen per sales channel (plugin config rangeLook):
   nfx-range--mcdart (default), nfx-range--sport1, nfx-range--dartshop ("measuring bench": dark ground, green marks). */

.nfx-range {
	--rg-ink: #1d1d1f; --rg-muted: #6e6e73; --rg-line: #e5e5ea; --rg-card: #fff; --rg-surface: #f5f5f7;
	--rg-accent: #db151c; --rg-ok: #13804a; --rg-ok-bg: #e7f4ec; --rg-buy: #db151c; --rg-buy-ink: #fff; --rg-buy-hover: #b81118;
	--rg-radius: 20px; --rg-radius-sm: 999px; --rg-font: inherit; --rg-title-case: none;
	--rg-metal: url(#nfxRangeMetal); --rg-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	margin: 56px 0 8px; padding: 40px 32px 32px; border-radius: 28px; background: var(--rg-surface); color: var(--rg-ink); font-family: var(--rg-font);
}
.nfx-range-head { margin: 0 0 28px; text-align: center; }
.nfx-range-kicker { margin: 0 0 6px; color: var(--rg-accent); font-weight: 700; font-size: .9375rem; }
.nfx-range-title { margin: 0; color: var(--rg-ink); font-weight: 700; font-size: clamp(1.625rem, calc(1.6vw + 1rem), 2.5rem); line-height: 1.12; letter-spacing: -.02em; text-transform: var(--rg-title-case); }
.nfx-range-list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.nfx-range-card { display: flex; flex-direction: column; padding: 16px 20px 24px; border-radius: var(--rg-radius); background: var(--rg-card); box-shadow: var(--rg-shadow); text-align: center; }
.nfx-range-card.is-current { box-shadow: inset 0 0 0 2px var(--rg-accent), var(--rg-shadow); }
.nfx-range-badge { min-height: 1.3em; margin: 0 0 4px; color: var(--rg-accent); font-weight: 700; font-size: .8125rem; }
.nfx-range-media { display: block; width: 160px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 8px; }
.nfx-range-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.nfx-range-card:hover .nfx-range-media img { transform: scale(1.04); }
.nfx-range-name { min-height: 2.6em; margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.nfx-range-name a { color: var(--rg-ink); text-decoration: none; }
.nfx-range-name a:hover { text-decoration: underline; }
.nfx-range-price { margin: 6px 0 14px; font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.nfx-range-rows { flex: 1; margin: 0 0 20px; }
.nfx-range-rows > div { padding: 10px 0; border-top: 1px solid var(--rg-line); }
.nfx-range-rows dt { color: var(--rg-muted); font-weight: 400; font-size: .75rem; }
.nfx-range-rows dd { margin: 3px 0 0; font-weight: 600; font-size: .9375rem; }
.nfx-range-form { display: grid; justify-items: center; gap: 4px; }
.nfx-range-form svg { width: 110px; height: auto; overflow: visible; }
.nfx-range-form path { fill: var(--rg-metal); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.nfx-range-weights { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.nfx-range-weights li { padding: 2px 8px; border-radius: var(--rg-radius-sm); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.nfx-range-weights .is-ok { background: var(--rg-ok-bg); color: var(--rg-ok); }
.nfx-range-weights .is-out { color: var(--rg-muted); text-decoration: line-through; opacity: .75; }
.nfx-range-cta { display: inline-flex; align-self: center; align-items: center; justify-content: center; min-height: 42px; padding: 0 24px; border-radius: var(--rg-radius-sm);
	color: var(--rg-accent); font-weight: 600; text-decoration: none; }
.nfx-range-cta:not(.is-buy)::after { content: " ›"; white-space: pre; }
.nfx-range-cta:hover { color: var(--rg-accent); text-decoration: underline; }
.nfx-range-cta.is-buy { background: var(--rg-buy); color: var(--rg-buy-ink); }
.nfx-range-cta.is-buy:hover { background: var(--rg-buy-hover); color: var(--rg-buy-ink); text-decoration: none; }
.nfx-range-cta:focus-visible, .nfx-range-name a:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 3px; }
.nfx-range-note { margin: 16px 0 0; color: var(--rg-muted); font-size: .8125rem; text-align: center; }

/* story page: the section already brings its own ground */
.nfx-st-compare .nfx-range { margin: 0; padding: 0; background: none; }
.nfx-st-compare .nfx-range-title { font-size: clamp(2.25rem, calc(3.2vw + 1rem), 4.5rem); }

/* Sport1: petrol ink, teal accent, magenta badge, house font in caps, radius 8 / 14, no pills */
.nfx-range--sport1 {
	--rg-ink: #0b1f23; --rg-muted: #5c6d71; --rg-line: #d9e2e4; --rg-surface: #f4f7f8; --rg-accent: #226a71; --rg-ok: #117a4e; --rg-ok-bg: #e3f2eb;
	--rg-buy: #2b8088; --rg-buy-hover: #1b6f77; --rg-radius: 14px; --rg-radius-sm: 8px; --rg-font: 'Sport1', sans-serif; --rg-title-case: uppercase;
	border-radius: 14px;
}
.nfx-range--sport1 .nfx-range-badge { color: #aa088f; text-transform: uppercase; letter-spacing: .04em; }
.nfx-range--sport1 .nfx-range-price { text-transform: uppercase; }

/* Dartshop: dark measuring bench, green marks for values in stock, Dartshop red for buying */
.nfx-range--dartshop {
	--rg-ink: #e8eaed; --rg-muted: #9aa1ab; --rg-line: rgba(255, 255, 255, .09); --rg-card: #23272e; --rg-surface: #1b1e23;
	--rg-accent: #e8eaed; --rg-ok: #fff; --rg-ok-bg: #2f7a4d; --rg-buy: #b60f1e; --rg-buy-hover: #930c18; --rg-radius: 14px; --rg-radius-sm: 10px;
	--rg-shadow: none; border-radius: 14px;
}
.nfx-range--dartshop .nfx-range-card.is-current { box-shadow: inset 0 0 0 2px #2f7a4d; }
.nfx-range--dartshop .nfx-range-badge { color: #6fcf97; }
.nfx-range--dartshop .nfx-range-media { border-radius: 10px; background: #f5f6f8; }

@media (max-width: 991.98px) {
	.nfx-range { padding: 32px 0 24px; border-radius: 20px; }
	.nfx-range-head { padding: 0 20px; }
	.nfx-range-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); padding: 0 20px 8px;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; overscroll-behavior-x: contain; }
	.nfx-range-card { scroll-snap-align: start; }
	.nfx-range-note { padding: 0 20px; }
	.nfx-st-compare .nfx-range-list { margin: 0 -20px; }
}
@media (prefers-reduced-motion: reduce) { .nfx-range-media img { transition: none; } }