/* =========================================================================
   SNÜSSZ CSOMAG BUILDER — STYLESHEET
   =========================================================================
   SCB DESIGN TOKENS — edit ONLY these to rebrand. Every rule below consumes
   these custom properties; no hard-coded colours/sizes live in the rules.
   The client's "very specific" brand values go here.
   -------------------------------------------------------------------------
   BACKGROUNDS
     --scb-bg            page/widget backdrop (very dark teal-navy)
     --scb-card-bg       unselected tier / config card surface
     --scb-card-bg-sel   selected tier surface (slightly lifted)
     --scb-stepper-bg    stepper / flavour control background
   BORDERS
     --scb-border        default thin card border
     --scb-border-sel    selected card border (bright teal)
   ACCENT / STATE
     --scb-teal          primary teal accent (radio, %, pills, arrows)
     --scb-teal-2        teal gradient stop / hover
     --scb-orange        free-shipping / premium badge pill
     --scb-red           regular-price strikethrough
     --scb-teal-rgb       teal as "r g b" channels for rgb()/<alpha> glows
     --scb-orange-rgb     orange as "r g b" channels for shadows
     --scb-on-accent-rgb  on-accent as "r g b" channels (e.g. spinner track)
   TEXT
     --scb-text          primary white-ish text
     --scb-muted         muted gray (per-snüssz, sub copy)
     --scb-muted-dim     dimmer muted for disabled controls (no opacity hack)
     --scb-on-accent     text on teal pills & CTA
     --scb-on-ship       text on the orange free-shipping badge
   RADII
     --scb-radius-card   tier/config card corner radius
     --scb-radius-pill   badges / pills
     --scb-radius-btn    CTA / stepper radius
   SHADOWS / GLOW
     --scb-glow-sel      selected-card teal outer glow
     --scb-glow-inner    selected-card subtle inner glow
     --scb-shadow-cta    CTA drop shadow
     --scb-shadow-ship   free-shipping badge shadow
   TYPE
     --scb-font          font stack
     --scb-fs-boxes      "{N} doboz" size
     --scb-fs-discount   "X% KEDVEZMÉNY"
     --scb-fs-sub        per-snüssz / sub copy
     --scb-fs-regular    strikethrough price
     --scb-fs-sale       sale price (bold)
     --scb-fs-pill       popularity / shipping pills
     --scb-fs-cta        CTA label
     --scb-fs-title      configurator title
     --scb-fs-val        stepper big number
     --scb-fs-stepper    stepper +/- button glyph size
     --scb-fw-bold       semi-bold weight
     --scb-fw-black      heavy weight
   LAYOUT
     --scb-gap           vertical gap between cards
     --scb-pad-card      inner card padding
     --scb-pad-widget    outer widget padding
     --scb-bp-mobile     informational mobile breakpoint (480px); see NB
   NB: the mobile breakpoint is kept LITERAL (480px) in the @media query below
       because custom properties can't be used inside media-query conditions.
       --scb-bp-mobile mirrors that literal for documentation only.
   ========================================================================= */
/* Work Sans is normally already loaded site-wide (Elementor global font). If the
   Light (300) or the very-bold (900, used by the CTA) weights do not render,
   uncomment the next line to pull them in:
   @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;700;800;900&display=swap'); */

:root {
	/* BACKGROUNDS — outer widget is black, matching the page background. */
	--scb-bg: #000000;
	--scb-card-bg: #0c1117;            /* near-black blue tier/config surface */
	--scb-card-bg-sel: #111a25;        /* selected tier surface (slightly lifted) */
	--scb-stepper-bg: #080b11;         /* stepper / flavour control background */

	/* BORDERS */
	--scb-border: #1b2632;             /* default thin card border */
	--scb-border-sel: #92d0eb;         /* selected card border (brand light blue) */

	/* ACCENT / STATE — brand blues */
	--scb-teal: #92d0eb;               /* primary accent: radio, %, pills, arrows (light blue) */
	--scb-teal-2: #0b7db3;             /* deeper blue: hover / gradient stop / glow */
	--scb-orange: #c2410c;             /* free-shipping / premium badge (set to a blue to taste) */
	--scb-red: #bc543d;                /* regular-price strikethrough / errors (brand red, rgb 188 84 61) */
	--scb-yellow: #ffe11a;             /* order-process step arrows (matches the bright yellow arrows) */

	/* CHANNEL TOKENS — "r g b" triplets for rgb()/<alpha> glows. */
	--scb-teal-rgb: 11 125 179;        /* deep blue #0b7db3 — matches the button glow */
	--scb-orange-rgb: 194 65 12;       /* --scb-orange    #c2410c */
	--scb-on-accent-rgb: 4 20 26;      /* --scb-on-accent #04141a */

	/* TEXT */
	--scb-text: #ffffff;
	--scb-muted: #9fb4bf;
	--scb-muted-dim: #7e94a0;          /* disabled-state muted; passes AA without opacity */
	--scb-on-accent: #04141a;          /* dark text on light-blue pills */
	--scb-on-ship: #ffffff;            /* text on the free-shipping badge */

	/* CTA BUTTON — mirrors the site's global button (black + light-blue glow). */
	--scb-cta-bg: #000000;
	--scb-cta-fg: #ffffff;
	--scb-cta-border: #92d0eb;
	--scb-cta-radius: 10px;
	--scb-cta-shadow: 0 0 20px #0b7db3;
	--scb-cta-hover-bg: linear-gradient(90deg, #1d7aa9, #a4d9ec);
	--scb-cta-hover-shadow: 0 0 28px rgba(11, 125, 179, .6);

	/* RADII */
	--scb-radius-card: 14px;
	--scb-radius-pill: 999px;
	--scb-radius-btn: 12px;

	/* SHADOWS / GLOW */
	--scb-glow-sel: 0 0 0 1px var(--scb-border-sel), 0 0 16px rgb(var(--scb-teal-rgb) / .45);
	--scb-glow-inner: inset 0 0 22px rgb(var(--scb-teal-rgb) / .10);
	--scb-shadow-cta: 0 8px 22px rgb(var(--scb-teal-rgb) / .30);
	--scb-shadow-ship: 0 2px 8px rgb(var(--scb-orange-rgb) / .40);

	/* TYPE — Work Sans; light (300) base, headings 300 + UPPERCASE. */
	--scb-font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--scb-fs-boxes: 1.125rem;
	--scb-fs-discount: .95rem;
	--scb-fs-sub: .8rem;
	--scb-fs-regular: .85rem;
	--scb-fs-sale: 1.25rem;
	--scb-fs-pill: .7rem;
	--scb-fs-cta: 16px;
	--scb-fs-title: 1.15rem;
	--scb-fs-val: 1.05rem;
	--scb-fs-stepper: .85rem;          /* stepper +/- button glyph size */
	--scb-fw-normal: 300;              /* ALL widget text is Work Sans Light (300) */
	--scb-fw-bold: 300;                /* kept at 300 — only the CTA is heavier */
	--scb-fw-black: 300;               /* kept at 300 — only the CTA is heavier */
	--scb-fw-cta: 900;                 /* "KOSÁRBA VELE!" — the only (very) bold text */

	/* LAYOUT */
	--scb-gap: 12px;
	--scb-pad-card: 16px 18px;
	--scb-pad-widget: 0;
	--scb-bp-mobile: 480px;            /* informational; cannot be used inside @media */
}

/* =========================================================================
   WIDGET ROOT
   ========================================================================= */
.scb-widget {
	font-family: var(--scb-font);
	font-weight: var(--scb-fw-normal);
	background: var(--scb-bg); /* transparent — no widget backdrop */
	color: var(--scb-text);
	padding: var(--scb-pad-widget);
	box-sizing: border-box;
	max-width: 100%;   /* fill the container — no auto side margins */
	margin: 0;
}

.scb-widget *,
.scb-widget *::before,
.scb-widget *::after {
	box-sizing: border-box;
}

/* Form controls don't inherit font by default — force Work Sans everywhere so
   no element falls back to the theme font (Inter). */
.scb-widget button,
.scb-widget input,
.scb-widget select,
.scb-widget output,
.scb-widget textarea {
	font-family: inherit;
	font-weight: inherit;
}

.scb-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* =========================================================================
   DISCOUNT SUMMARY
   ========================================================================= */
.scb-summary {
	font-size: var(--scb-fs-sub);
	color: var(--scb-muted);
	margin: 0 0 12px;
}

.scb-summary:empty {
	display: none;
}

/* =========================================================================
   ORDER-PROCESS GUIDE ("RENDELÉS MENETE") — top-of-widget step banner
   ========================================================================= */
.scb-steps {
	position: relative;
	margin: 10px 0 var(--scb-gap);
	padding: 22px 16px 16px;
	background: var(--scb-card-bg);
	border: 1px solid var(--scb-border-sel);
	border-radius: var(--scb-radius-card);
	box-shadow: var(--scb-glow-inner);
}

/* the rounded "tab" label overlapping the top-left edge of the box */
.scb-steps__label {
	position: absolute;
	top: -12px;
	left: 16px;
	padding: 4px 14px;
	font-size: var(--scb-fs-pill);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--scb-on-accent);
	background: var(--scb-teal);
	border-radius: var(--scb-radius-pill);
}

.scb-steps__flow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.scb-steps__step {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 0;
	min-width: 0;
}

.scb-steps__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--scb-text);
}

.scb-steps__icon svg {
	display: block;
	width: 34px;
	height: 34px;
}

.scb-steps__text {
	font-size: var(--scb-fs-boxes);   /* match the "{N} doboz" tier label size */
	line-height: 1.2;
	color: var(--scb-text);
}

.scb-steps__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--scb-yellow);
}

.scb-steps__arrow svg {
	display: block;
	width: 26px;
	height: 26px;
}

/* Elementor mobile breakpoint (767px): stack the steps, centre them, and turn
   the arrows downward. */
@media (max-width: 767px) {
	.scb-steps__flow {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	.scb-steps__step {
		flex: 0 0 auto;
		width: 100%;
		justify-content: center;
	}

	.scb-steps__arrow {
		transform: rotate(90deg);
	}
}

/* =========================================================================
   TIER LIST
   ========================================================================= */
.scb-tiers {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--scb-gap);
}

.scb-tier {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: var(--scb-pad-card);
	background: var(--scb-card-bg);
	border: 1px solid var(--scb-border);
	border-radius: var(--scb-radius-card);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.scb-tier__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.scb-tier__ring {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--scb-muted);
	display: inline-block;
	position: relative;
	transition: border-color .15s;
	flex: 0 0 auto;
}

.scb-tier__ring::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--scb-teal);
	transform: scale(0);
	transition: transform .15s;
}

/* selected: native :has(:checked) OR JS-driven .is-selected */
.scb-tier:has(.scb-tier__radio:checked),
.scb-tier.is-selected {
	background: var(--scb-card-bg-sel);
	border-color: var(--scb-border-sel);
	box-shadow: var(--scb-glow-sel), var(--scb-glow-inner);
}

.scb-tier:has(.scb-tier__radio:checked) .scb-tier__ring,
.scb-tier.is-selected .scb-tier__ring {
	border-color: var(--scb-teal);
}

.scb-tier:has(.scb-tier__radio:checked) .scb-tier__ring::after,
.scb-tier.is-selected .scb-tier__ring::after {
	transform: scale(1);
}

/* hover affordance on un-selected cards (never overrides the selected glow) */
.scb-tier:not(:has(.scb-tier__radio:checked)):not(.is-selected):hover {
	border-color: var(--scb-teal-2);
}

.scb-tier__radio:focus-visible + .scb-tier__ring {
	outline: 2px solid var(--scb-teal);
	outline-offset: 2px;
}

.scb-tier__body {
	min-width: 0;
}

.scb-tier__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.scb-tier__boxes {
	font-size: var(--scb-fs-boxes);
	font-weight: var(--scb-fw-black);
	color: var(--scb-text);
}

.scb-tier__discount {
	flex-basis: 100%;   /* always drop onto its own line, below "{N} doboz" */
	width: 100%;
	font-size: var(--scb-fs-discount);
	font-weight: var(--scb-fw-bold);
	color: var(--scb-teal);
}

.scb-tier__sub {
	display: block;
	margin-top: 2px;
	font-size: var(--scb-fs-sub);
	color: var(--scb-muted);
}

/* popularity pill */
.scb-tier__pop {
	font-size: var(--scb-fs-pill);
	font-weight: var(--scb-fw-bold);
	letter-spacing: .04em;
	color: var(--scb-on-accent);
	background: var(--scb-teal);
	padding: 3px 8px;
	border-radius: var(--scb-radius-pill);
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

/* default popularity ("--popular") keeps the teal base above */

/* premium "LEGJOBB ÉRTÉK" pill — distinct on-brand orange/gold with white text */
.scb-tier__pop--best {
	color: var(--scb-on-ship);
	background: var(--scb-orange);
	box-shadow: 0 1px 6px rgb(var(--scb-orange-rgb) / .35);
}

/* free-shipping badge pinned to the top-right corner */
.scb-tier__ship-badge {
	position: absolute;
	top: -9px;
	right: 14px;
	font-size: var(--scb-fs-pill);
	font-weight: var(--scb-fw-bold);
	color: var(--scb-on-ship);
	background: var(--scb-orange);
	padding: 4px 10px;
	border-radius: var(--scb-radius-pill);
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1;
	box-shadow: var(--scb-shadow-ship);
}

/* price stack: red strike above, white sale below */
.scb-tier__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.scb-tier__regular {
	font-size: var(--scb-fs-regular);
	color: var(--scb-red);
	text-decoration: line-through;
}

.scb-tier__sale {
	font-size: var(--scb-fs-sale);
	font-weight: var(--scb-fw-black);
	color: var(--scb-text);
	text-decoration: none;
}

/* =========================================================================
   CONFIGURATOR
   ========================================================================= */
.scb-config {
	margin-top: var(--scb-gap);
	padding: var(--scb-pad-card);
	background: var(--scb-card-bg);
	border: 1px solid var(--scb-border-sel);
	border-radius: var(--scb-radius-card);
	box-shadow: var(--scb-glow-inner);
}

.scb-config[hidden] {
	display: none;
}

.scb-config__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 8px;
}

.scb-config__title {
	margin: 0;
	font-size: var(--scb-fs-title);
	font-weight: var(--scb-fw-normal);   /* heading: Work Sans Light */
	text-transform: uppercase;           /* headings are capitalised */
	color: var(--scb-text);
}

.scb-config__savings {
	font-size: var(--scb-fs-sub);
	color: var(--scb-muted);
	white-space: nowrap;
}

/* savings amount — intentionally bolder; people love seeing what they save. */
.scb-widget .scb-config__savings-val {
	color: var(--scb-teal);
	font-weight: 700 !important;
}

/* upsell hint — made prominent with colour + a callout box (no bigger font). */
.scb-config__hint {
	margin: 0 0 12px;
	font-size: var(--scb-fs-sub);
	color: var(--scb-teal);
	background: rgb(var(--scb-teal-rgb) / .10);
	border: 1px solid rgb(var(--scb-teal-rgb) / .35);
	border-left: 3px solid var(--scb-teal);
	border-radius: var(--scb-radius-btn);
	padding: 8px 12px;
}

.scb-config__hint:empty {
	display: none;
}

/* short "how to finish" note under the upsell hint: customise -> set flavours
   (or keep our default) -> hit add-to-cart. */
.scb-config__note {
	margin: 0 0 12px;
	font-size: var(--scb-fs-sub);
	line-height: 1.45;
	color: var(--scb-muted);
}

.scb-config__note strong {
	color: var(--scb-text);
	font-weight: 700;
}

.scb-config__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.scb-flavor {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	background: var(--scb-stepper-bg);
	border: 1px solid var(--scb-border);
	border-radius: var(--scb-radius-btn);
	transition: border-color .15s, box-shadow .15s;
}

/* highlight the flavour card while its stepper is keyboard-focused */
.scb-flavor:focus-within {
	border-color: var(--scb-border-sel);
	box-shadow: var(--scb-glow-inner);
}

.scb-flavor__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--scb-dot, #fff);
	flex: 0 0 auto;
}

/* product featured image (replaces the colour dot when available) */
.scb-flavor__img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--scb-stepper-bg);
}

/* out-of-stock flavour: dimmed, steppers disabled, "Elfogyott" shown */
.scb-flavor.is-oos {
	opacity: .5;
}

.scb-flavor__oos {
	flex: 0 0 auto;
	font-size: var(--scb-fs-pill);
	font-weight: var(--scb-fw-bold);
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--scb-red);
}

.scb-flavor__oos[hidden] {
	display: none;
}

.scb-flavor__name {
	font-size: var(--scb-fs-sub);
	color: var(--scb-text);
	flex: 1 1 auto;
	min-width: 0;
}

/* stepper with teal triangle buttons */
.scb-stepper {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.scb-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--scb-teal);   /* brand blue border */
	background: transparent;
	color: var(--scb-teal);
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	padding: 0;
}

/* arrow icon — SVG fills with the button colour (brand cyan) and is perfectly
   centred by the flex button. Bump the size here to taste. */
.scb-stepper__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.scb-stepper__btn:hover:not(:disabled) {
	background: rgb(var(--scb-teal-rgb) / .12);
}

.scb-stepper__btn:disabled {
	color: var(--scb-muted-dim);
	border-color: var(--scb-border);
	cursor: not-allowed;
}

.scb-stepper__btn:focus-visible {
	outline: 2px solid var(--scb-teal);
	outline-offset: 1px;
}

/* editable quantity field — type a number directly, or use the +/- buttons.
   Scoped + !important on the box metrics so the theme's `input { width:100% }`
   rules can't stretch it across the whole row. */
.scb-widget .scb-stepper__val {
	flex: 0 0 auto !important;
	width: 2.4em !important;
	min-width: 2.4em !important;
	max-width: 2.4em !important;
	height: auto !important;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--scb-font);
	font-weight: var(--scb-fw-black);
	/* >=16px so mobile Safari never zooms-on-focus (which caused the stuck
	   horizontal overflow); !important to beat theme input font-size rules. */
	font-size: max( 16px, var(--scb-fs-val) ) !important;
	line-height: 1.2;
	color: var(--scb-text);
	background: transparent !important;
	border: 1px solid var(--scb-teal) !important;   /* brand blue border */
	border-radius: 6px;
	margin: 0 !important;
	padding: 4px 0 !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* hide the native number spinners (we use our own +/- buttons) */
.scb-stepper__val::-webkit-outer-spin-button,
.scb-stepper__val::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.scb-widget .scb-stepper__val:focus {
	outline: none;
	border-color: var(--scb-border-sel) !important;
	background: var(--scb-stepper-bg) !important;
}

/* =========================================================================
   CTA
   ========================================================================= */
.scb-cta {
	margin-top: 14px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border: 1px solid var(--scb-cta-border);
	border-radius: var(--scb-cta-radius);
	cursor: pointer;
	font-family: var(--scb-font);
	font-size: var(--scb-fs-cta);
	font-weight: var(--scb-fw-cta);   /* the only bold (800) text in the widget */
	line-height: 1.3;
	text-decoration: none;
	color: var(--scb-cta-fg);
	background-color: var(--scb-cta-bg);
	box-shadow: var(--scb-cta-shadow);
	transition: all .3s ease;
}

/* Force the CTA bold on every device, beating any theme button rule. */
.scb-widget .scb-cta,
.scb-widget .scb-cta .scb-cta__label,
.scb-widget .scb-cta .scb-cta__price {
	font-weight: var(--scb-fw-cta) !important;
}

@media (hover: hover) {
	.scb-cta:hover:not(:disabled) {
		background: var(--scb-cta-hover-bg);
		color: var(--scb-cta-fg);
		transform: translateY(-2px);
		box-shadow: var(--scb-cta-hover-shadow);
	}
}

.scb-cta:disabled {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.scb-cta.is-loading {
	pointer-events: none;
}

.scb-cta__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: var(--scb-cta-fg);
	border-radius: 50%;
	animation: scb-spin .7s linear infinite;
}

.scb-cta__spinner[hidden] {
	display: none;
}

.scb-cta.is-loading .scb-cta__spinner {
	display: inline-block;
}

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

/* =========================================================================
   ERROR
   ========================================================================= */
.scb-error {
	color: var(--scb-red);
	font-size: var(--scb-fs-sub);
	margin: 10px 0 0;
}

.scb-error[hidden] {
	display: none;
}

/* success message (shown when "stay on page" is selected) */
.scb-success {
	color: var(--scb-teal);
	font-size: var(--scb-fs-sub);
	font-weight: var(--scb-fw-bold);
	margin: 10px 0 0;
}

.scb-success[hidden] {
	display: none;
}

/* =========================================================================
   CART / CHECKOUT UPSELL NOTICE (live-refreshed via AJAX)
   ========================================================================= */
.scb-upsell {
	font-family: var(--scb-font);
	font-weight: var(--scb-fw-normal);
	color: var(--scb-text);
	background: var(--scb-card-bg);
	border: 1px solid var(--scb-teal);
	border-radius: var(--scb-radius-card);
	padding: 12px 16px;
	margin: 0 0 16px;
	font-size: var(--scb-fs-sub);
}

/* hide the container entirely when there is no message */
.scb-upsell:empty {
	display: none;
}

/* =========================================================================
   RESPONSIVE — flavour grid -> single column; tier price stack wraps
   (literal 480px to match the documented --scb-bp-mobile breakpoint)
   ========================================================================= */
@media (max-width: 480px) {
	.scb-config__grid {
		grid-template-columns: 1fr;
	}

	.scb-tier {
		grid-template-columns: auto 1fr;
		grid-auto-rows: auto;
	}

	.scb-tier__prices {
		grid-column: 1 / -1;
		align-items: flex-start;
		flex-direction: row;
		gap: 10px;
	}

	/* shrink the CTA a few px and tighten padding so it never overflows */
	.scb-cta {
		font-size: 13px;
		padding: 13px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scb-cta__spinner {
		animation-duration: 0s;
	}

	.scb-tier,
	.scb-tier__ring,
	.scb-tier__ring::after,
	.scb-cta {
		transition: none;
	}
}