/**
 * Enamel Armour subscription card — "Jade Luxe" (subscription-multiple).
 *
 * SHOP-ONLY, scoped under .sbr-ea. Layout follows the design (card.jsx): formula
 * toggle on top → BOTH plan radios together (Subscribe & Save + One-Time) → shared
 * quantity + delivery-frequency → single price + teal-gradient CTA. The real
 * billing infrastructure (.subscription-product-content-body — fluoride radios,
 * supply/frequency selects, hidden JSON, #P2/#P1 buttons) is kept in the DOM for
 * lander-common.js but hidden (.sbr-ea-engine); the visible widgets proxy into it
 * via shop-enamel.js. No cart/billing wiring is changed.
 */

.sbr-ea, .sbr-ea * { box-sizing: border-box; }

.sbr-ea {
	--ea-ui: 'Open Sans', sans-serif;
	--ea-disp: 'Montserrat', sans-serif;
	--ea-ink: #0a2729; --ea-jade: #13a3a0; --ea-teal: #1cb9bd; --ea-mint: #9fe7e1;
	--ea-emer: #1f9d63; --ea-coral: #ff6a5d; --ea-slate: #5e6d6e; --ea-line: #e7eceb;
	--ea-text: #15201f; --ea-amber: #f0c23a;
	display: block; font-family: var(--ea-ui); color: var(--ea-text); text-align: left;
	/* full-bleed cap: single (medium-12) cards stretch .vc_column-inner to the
	   viewport; cap + center to the shared design width (matches the other
	   full-width shop cards: night-guard / sports-guard / package-compare). */
	max-width: 1180px; margin-left: auto; margin-right: auto;
}
/* Strip the storefront's stock card surface off the wrappers so only .sbr-ea-card
   shows — otherwise .product-selection-box (white bg + radius + 15px pad) and
   .vc_column-inner (teal fill + pad) render as a second card behind ours. The
   global rules are #newsalePage-scoped, so match that specificity + !important. */
#newsalePage .sbr-ea-col .vc_column-inner,
#newsalePage .sbr-ea-col .wpb_wrapper,
.sbr-ea-col .vc_column-inner, .sbr-ea-col .wpb_wrapper {
	padding: 0 !important; margin: 0 !important;
	background: none !important; background-color: transparent !important;
	box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
}
#newsalePage .sbr-ea .product-selection-box,
.sbr-ea .product-selection-box {
	padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important;
	background: none !important; background-color: transparent !important;
	box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
}
.sbr-ea a { text-decoration: none; }
.sbr-ea img { display: block; max-width: 100%; }
.sbr-ea price { font-family: inherit; }

.sbr-ea-card {
	display: grid; grid-template-columns: 0.92fr 1.08fr; background: #fff; border-radius: 28px;
	overflow: hidden; box-shadow: 0 14px 40px -18px rgba(20, 40, 40, .28), 0 4px 12px -6px rgba(20, 40, 40, .12);
}

/* ---- product stage ---- */
.sbr-ea-stage {
	position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center;
	padding: 40px 30px; overflow: hidden;
	background: var(--shop-card-fill, radial-gradient(120% 90% at 30% 18%, #f0fbf8 0%, #cfeee8 55%, #b6e3db 100%));
}
.sbr-ea-stage__glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; filter: blur(8px); }
/* Fixed-box + contain so every formula variant (Fluoride / Fluoride-Free) renders
   at the SAME size regardless of the source image's intrinsic dimensions. */
.sbr-ea-stage__img { position: relative; z-index: 2; width: 100%; max-width: 320px; height: 340px; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(14, 60, 58, .3)); }
/* Same ribbon recipe as the other card labels (.sbr-qty-ribbon--navy etc.)
   so every stage label reads as one system: navy pill, 7px radius, 16px inset. */
.sbr-ea-stage__chip { position: absolute; top: 16px; left: 16px; z-index: 3; font-weight: 800; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: #fff; background: #002244; border-radius: 7px; padding: 6px 11px; box-shadow: 0 4px 12px rgba(20, 40, 40, .16); }
.sbr-ea-stage__rating { position: absolute; top: 20px; right: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11.5px; color: var(--ea-ink); }
.sbr-ea-stage__rating .sbr-ng-stars { color: #ffd24a; }
/* Money-back seal sits in the lower LEFT, stacked directly above the spec line,
   which frees the lower-right corner for the shared "View product" pill
   (.sbr-shop-vp, styled in shop.css). bottom:46px clears the spec's 22px offset
   plus its ~15px line box, leaving an even gap between the two. */
.sbr-ea-stage__seal { position: absolute; bottom: 46px; left: 24px; z-index: 3; width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid rgba(19, 163, 160, .4); background: rgba(255, 255, 255, .5); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sbr-ea-stage__seal b { font-family: var(--ea-disp); font-weight: 700; font-size: 22px; color: var(--ea-ink); line-height: 1; }
.sbr-ea-stage__seal span { font-weight: 700; font-size: 7.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ea-jade); margin-top: 2px; }
.sbr-ea-stage__spec { position: absolute; bottom: 22px; left: 24px; z-index: 3; font-weight: 600; font-size: 11px; color: var(--ea-slate); }
/* Phones: the stage keeps its 320px height but the card is much narrower, so the
   78px seal reads oversized against it — scale the disc and its type down and
   pull both it and the spec closer to the edge. */
@media (max-width: 767px) {
	.sbr-ea-stage__seal { width: 58px; height: 58px; bottom: 44px; left: 18px; border-width: 1.25px; }
	.sbr-ea-stage__seal b { font-size: 16px; }
	.sbr-ea-stage__seal span { font-size: 6px; letter-spacing: .6px; }
	.sbr-ea-stage__spec { left: 18px; font-size: 10.5px; }
}

/* ---- content ---- */
.sbr-ea-content { padding: 38px 42px; display: flex; flex-direction: column; text-align: left; }
.sbr-ea-featured { margin-bottom: 14px; }
.sbr-ea-featured span { font-weight: 800; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ea-slate); }
.sbr-ea-eyebrow { font-weight: 700; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ea-teal); margin-bottom: 8px; }
.sbr-ea-title { font-family: var(--ea-disp); font-weight: 700; font-size: 44px; line-height: 0.98; letter-spacing: -1px; margin: 0 0 12px; }
.sbr-ea-title a { color: var(--ea-text); }
.sbr-ea-desc { font-weight: 500; font-size: 15px; line-height: 1.55; color: var(--ea-slate); margin: 0 0 20px; }
.sbr-ea-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 24px; }
.sbr-ea-benefit { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: 12.8px; color: #3f4d4c; line-height: 1.35; }
.sbr-ea-benefit svg { flex-shrink: 0; margin-top: 2px; color: var(--ea-teal); background: rgba(28, 185, 189, .14); border-radius: 999px; padding: 3px; width: 18px; height: 18px; }

/* ---- controls ---- */
.sbr-ea-controls { display: block; }

/* HIDDEN billing engine — real content-body + its selects/radios stay in the DOM
   for lander-common.js but are never shown. !important beats the global accordion
   handler's inline display:block. */
.sbr-ea .subscription-product-content-body,
.sbr-ea-engine { display: none !important; }
.sbr-ea-select { display: none !important; }

/* The redesign REUSES the subscription handler's structural classes for the
   billing wiring, but only the .sbr-ea-* elements should carry visuals. Strip the
   original styling off the wrappers (e.g. .subscription-product-header carries a
   global min-height:382px that otherwise leaves a tall empty gap inside the card). */
.sbr-ea .enamel-subscription-product-inner-wrapper,
.sbr-ea .innershortpop,
.sbr-ea .enamel-subscription-product-box,
.sbr-ea .subscription-product-header,
.sbr-ea .subscription-product-header.white-background {
	min-height: 0 !important; padding: 0 !important; margin: 0 !important;
	background: none !important; border: 0 !important; box-shadow: none !important;
}

.sbr-ea-field { margin-bottom: 16px; }
.sbr-ea-field:last-child { margin-bottom: 0; }
.sbr-ea-label { display: block; font-family: var(--ea-ui); font-weight: 700; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: #9aa7a6; margin-bottom: 8px; text-align: left !important; }

/* sliding formula toggle (visible proxy) */
.sbr-ea-formula { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #f1f5f4; border-radius: 14px; padding: 5px; gap: 4px; }
.sbr-ea-formula__ind { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(10, 40, 40, .12); transition: left .28s cubic-bezier(.16, 1, .3, 1); }
.sbr-ea-formula.is-second .sbr-ea-formula__ind { left: 50%; }
.sbr-ea-formula__opt { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; border-radius: 10px; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.sbr-ea-formula__name { display: flex; align-items: center; gap: 6px; font-family: var(--ea-ui); font-weight: 700; font-size: 14px; color: #8a9897; }
.sbr-ea-formula__sub { font-family: var(--ea-ui); font-weight: 500; font-size: 10.5px; color: #aab6b5; margin-top: 2px; }
.sbr-ea-formula__new { font-weight: 800; font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: #b9c2c1; border-radius: 4px; padding: 2px 5px; transition: background .2s ease; }
.sbr-ea-formula__opt.is-on .sbr-ea-formula__name { color: var(--ea-text); }
.sbr-ea-formula__opt.is-on .sbr-ea-formula__sub { color: #9aa7a6; }
.sbr-ea-formula__opt.is-on .sbr-ea-formula__new { background: var(--ea-teal); }

/* plan pair — both radios always visible together */
.sbr-ea .innershortpop { display: flex; flex-direction: column; gap: 12px; }
.sbr-ea .subscription-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sbr-ea-plan {
	display: flex; align-items: center; gap: 13px; cursor: pointer;
	border: 2px solid #e6ecea; border-radius: 16px; padding: 14px 16px; background: #fff;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.sbr-ea-plan__radio { flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%; border: 2px solid #cdd6d4; display: flex; align-items: center; justify-content: center; transition: border-color .2s ease; }
.sbr-ea-plan__body { flex: 1; min-width: 0; }
.sbr-ea-plan__main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sbr-ea-plan__name { font-family: var(--ea-ui); font-weight: 700; font-size: 15.5px; color: var(--ea-text); white-space: nowrap; }
.sbr-ea-plan__tag { font-weight: 800; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: var(--ea-teal); border-radius: 5px; padding: 2px 7px; }
.sbr-ea-plan__note { display: block; font-family: var(--ea-ui); font-weight: 500; font-size: 11.5px; color: var(--ea-slate); margin-top: 3px; }
.sbr-ea-plan__save { display: inline-flex; align-items: center; margin-top: 6px; font-family: var(--ea-ui); font-weight: 700; font-size: 11px; color: var(--ea-emer); }
.sbr-ea-plan__save svg { stroke: var(--ea-emer); flex-shrink: 0; margin-right: 4px; }
.sbr-ea-plan__caption { display: block; margin-top: 5px; font-family: var(--ea-ui); font-weight: 600; font-size: 11px; line-height: 1.35; color: var(--ea-jade); }
/* Fixed min-width so the price block doesn't grow as the price/strike text widens
   ($15→$25, −17%→−22%); keeps the body width — and the BEST VALUE badge position —
   identical across quantity changes (no layout shift). */
.sbr-ea-plan__priceblock { flex-shrink: 0; text-align: right; min-width: 82px; }
.sbr-ea-plan__now { font-family: var(--ea-disp); font-weight: 700; font-size: 22px; color: var(--ea-text); letter-spacing: -.5px; white-space: nowrap; }
.sbr-ea-plan__now .dollerSymbal { font-size: 13px; vertical-align: super; }
.sbr-ea-plan__off { display: block; font-family: var(--ea-ui); font-weight: 700; font-size: 10.5px; color: var(--shop-action, var(--ea-coral)); white-space: nowrap; }
.sbr-ea-plan__off s { color: #aab6b5; font-weight: 600; }

.sbr-ea .subscription-radio:checked + .sbr-ea-plan { border-color: var(--shop-action, #1cb9bd); background: color-mix(in srgb, var(--shop-action, #1cb9bd) 6%, #fff); box-shadow: 0 10px 26px color-mix(in srgb, var(--shop-action, #1cb9bd) 12%, transparent); }
.sbr-ea .subscription-radio:checked + .sbr-ea-plan .sbr-ea-plan__radio { border-color: var(--shop-action, #1cb9bd); }
.sbr-ea .subscription-radio:checked + .sbr-ea-plan .sbr-ea-plan__radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--shop-action, #1cb9bd); }
.sbr-ea .subscription-radio:checked + .sbr-ea-plan .sbr-ea-plan__now { color: var(--shop-action, #1cb9bd); }

/* Force the row layout against the storefront's global label{display:block} /
   centered-card rules: radio | body | price on one row, price flush right. */
.sbr-ea .sbr-ea-plan { display: flex !important; align-items: center !important; text-align: left !important; }
.sbr-ea .sbr-ea-plan__main { display: flex !important; }
.sbr-ea .sbr-ea-plan__body { flex: 1 1 auto; min-width: 0; }
.sbr-ea .sbr-ea-plan__priceblock { flex: 0 0 auto; text-align: right !important; }

/* quantity + delivery row (shared, visible proxies) */
.sbr-ea-optrow { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.sbr-ea-field--qty { margin-bottom: 0; }
.sbr-ea-field--freq { flex: 1; min-width: 200px; margin-bottom: 0; }
.sbr-ea-field--freq.is-hidden { display: none; }
.sbr-ea-stepper { display: inline-flex; align-items: center; gap: 10px; }
.sbr-ea-stepper__box { display: inline-flex; align-items: center; border: 1.5px solid #e1e7e5; border-radius: 11px; background: #fff; }
.sbr-ea-dec, .sbr-ea-inc { width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer; font-family: var(--ea-ui); font-weight: 700; font-size: 19px; color: var(--ea-teal); display: flex; align-items: center; justify-content: center; }
.sbr-ea-dec[disabled], .sbr-ea-inc[disabled] { color: #cdd6d4; cursor: default; }
.sbr-ea-n { min-width: 30px; text-align: center; font-family: var(--ea-disp); font-weight: 700; font-size: 16px; color: var(--ea-text); }
.sbr-ea-stepper__unit { font-family: var(--ea-ui); font-weight: 600; font-size: 12px; color: var(--ea-slate); }

/* frequency chips */
.sbr-ea-freq { display: flex; gap: 10px; }
.sbr-ea-chip { flex: 1; min-width: 0; cursor: pointer; border-radius: 11px; padding: 11px 6px; border: 1.5px solid #e1e7e5; background: #fff; font-family: var(--ea-ui); font-weight: 700; font-size: 14px; color: var(--ea-text); white-space: nowrap; text-align: center; transition: all .18s ease; }
.sbr-ea-chip.is-on { border-color: var(--shop-action, #1cb9bd); background: var(--shop-action, #1cb9bd); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--shop-action, #1cb9bd) 33%, transparent); }

/* price + single CTA */
.sbr-ea-buy { margin-top: 14px; }
.sbr-ea-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.sbr-ea-price__now { font-family: var(--ea-disp); font-weight: 700; font-size: 38px; color: var(--ea-text); letter-spacing: -1.2px; }
.sbr-ea-price__now sup { font-size: .5em; vertical-align: super; font-weight: 700; letter-spacing: 0; }
.sbr-ea-price__was { font-family: var(--ea-ui); font-weight: 600; font-size: 15px; color: #aab6b5; text-decoration: line-through; }

/* Teal-gradient CTA (card.jsx). Scoped + !important to beat the storefront's
   high-specificity button rules (#newsalePage .teethWhieteingSystemWrapper… forces
   max-width:325px / padding:8px 10px / amber bg on .add_to_cart_button). */
.sbr-ea .sbr-ea-cta {
	display: flex !important; align-items: center; justify-content: center; gap: 10px;
	width: 100% !important; max-width: none !important; min-height: 58px;
	border: 0 !important; cursor: pointer; border-radius: 14px !important;
	padding: 17px 20px !important; margin: 0 !important;
	text-align: center; text-transform: none !important; line-height: 1.1 !important;
	font-family: var(--ea-ui) !important; font-weight: 800 !important; font-size: 16.5px !important; letter-spacing: .2px !important;
	color: #fff !important;
	background: var(--shop-action, #1cb9bd) !important; background-image: none !important;
	box-shadow: 0 10px 24px rgba(28, 185, 189, .36) !important;
	transition: box-shadow .25s ease, filter .18s ease, transform .12s ease;
}
.sbr-ea .sbr-ea-cta:hover { box-shadow: 0 16px 34px rgba(28, 185, 189, .5) !important; filter: brightness(1.03); }
.sbr-ea .sbr-ea-cta:active { transform: translateY(1px); }
.sbr-ea .sbr-ea-cta svg { stroke: #fff; flex-shrink: 0; }
.sbr-ea-cta__total { font-weight: 800; opacity: .92; }

.sbr-ea-trust { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.sbr-ea-trust__i { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ea-ui); font-weight: 600; font-size: 11.5px; color: var(--ea-slate); }
.sbr-ea-trust__i svg { color: var(--ea-teal); }

/* ---- responsive ---- */
@media (max-width: 900px) {
	.sbr-ea-card { grid-template-columns: 1fr; border-radius: 22px; }
	.sbr-ea-stage { min-height: 320px; padding: 30px 24px; }
	.sbr-ea-stage__img { height: 260px; }
	.sbr-ea-content { padding: 26px 22px 30px; }
	.sbr-ea-title { font-size: 34px; }
	.sbr-ea-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.sbr-ea-optrow { flex-direction: column; align-items: stretch; gap: 14px; }
	.sbr-ea-field--qty { display: flex; align-items: center; justify-content: space-between; }
	.sbr-ea-field--qty .sbr-ea-label { margin-bottom: 0; }
	/* tighten the plan card so "Subscribe & Save" + the BEST VALUE badge fit on one
	   line at typical phone widths */
	.sbr-ea-plan { padding: 12px 12px; gap: 10px; }
	.sbr-ea-plan__main { gap: 6px; }
	.sbr-ea-plan__name { font-size: 14px; }
	.sbr-ea-plan__tag { font-size: 7.5px; padding: 2px 5px; letter-spacing: .3px; }
	.sbr-ea-plan__now { font-size: 20px; }
	.sbr-ea-plan__priceblock { min-width: 76px; }
}
@media (max-width: 480px) {
	.sbr-ea-title { font-size: 28px; }
	.sbr-ea-price__now { font-size: 30px; }
	.sbr-ea-plan { padding: 12px 14px; gap: 10px; }
	.sbr-ea-plan__now { font-size: 20px; }
}

/* ---- mobile (≤767px): sticky product image ---------------------------------
   On phones the content runs well past one fold, so the product image pins to the
   top of the viewport (top:0) while the content scrolls up *behind* it and
   disappears; once the content ends the whole card scrolls away. The /shop page
   hides #mobile-header on mobile (display:none), so there is no fixed header to sit
   under — pinning at top:0 leaves no gap above the image for content to reappear in.

   position:sticky only engages when NOTHING in the ancestor chain is a clip/scroll
   container, so THREE overflow ancestors on the /shop tree are cleared here:
     • .sbr-ea-card's own corner-clip (overflow:hidden) — relocated onto the stage.
     • the parent theme's `#wrapper [role="main"]{overflow:hidden}` (revolution/app.css).
     • <body>: a site-wide `html,body{overflow-x:hidden}` (custom-styles.css /
       dashboardStyles.css / media-query.css) forces overflow-y:auto, turning body
       into a dead scroll container that silently traps the sticky. html is left
       alone — its overflow propagates to the viewport, so the viewport stays the
       scroll container (sticky works) AND still clips horizontal overflow (the shop's
       full-bleed 100vw band shows no scrollbar; verified scrollX can't move).
   The main/body overrides are scoped via :has() so only the shop subtree that holds
   this card is touched (graceful no-op on browsers without :has → image just scrolls).
   The card also drops its grid for block flow: in a single-column grid the stage's
   containing block is only its own row (no travel); as a block child it can stick
   across the full card height. The stage keeps its own opaque gradient bg + z-index
   so the content tucks behind it instead of showing through. */
@media (max-width: 767px) {
	#wrapper [role="main"]:has(.sbr-ea-stage) { overflow: visible !important; }
	body:has(.sbr-ea-stage) { overflow: visible !important; }

	.sbr-ea-card { display: block; overflow: visible; }

	/* Pin at top:0 (NOT a positive offset): any gap above the image is transparent,
	   so scrolled content reappears in it. Pinning flush means the opaque stage
	   covers from the very top and content simply disappears behind it. The visual
	   "breathing room" the image needs at the top is created INSIDE the stage instead
	   — extra top padding + the chip/rating nudged down — so it stays opaque (teal)
	   with no gap to leak through, and clears any device top UI that was clipping the
	   flush chip. */
	.sbr-ea-stage {
		position: -webkit-sticky; position: sticky;
		top: 0; z-index: 5;
		min-height: 0; padding: 56px 22px 24px;
		border-radius: 22px 22px 0 0;
		box-shadow: 0 16px 22px -18px rgba(10, 40, 40, .5);
	}
	.sbr-ea-stage__chip { top: 28px; }
	.sbr-ea-stage__rating { top: 38px; }
	.sbr-ea-stage__img { height: 200px; }
}

/* ---- mobile (≤767px): compact content — single-fold card --------------------
   Everything BELOW the image tightens to the compact design so the whole card
   fits one phone fold; the stage (image size, sticky pin) is untouched. What the
   compact layout drops on mobile: the "Formula" / "How would you like it?"
   section labels, the formula subtitles, and the plan note lines ("Pause or
   cancel anytime" / "A single delivery"). Benefits return to the 2-col grid and
   Quantity + Deliver-every share one row (labels above controls) — this block
   sits AFTER the ≤560px rules on purpose so its row layout wins there too. */
@media (max-width: 767px) {
	.sbr-ea-content { padding: 16px 16px 18px; }

	/* headline block — the "Featured · …" line is dropped entirely on mobile */
	.sbr-ea-featured { display: none; }
	.sbr-ea-eyebrow { font-size: 10.5px; letter-spacing: 1.3px; margin-bottom: 4px; }
	.sbr-ea-title { font-size: 25px; letter-spacing: -.6px; margin-bottom: 6px; }
	.sbr-ea-desc { font-size: 12.5px; line-height: 1.45; margin-bottom: 10px; }

	/* benefits: 2-col compact grid (base ≤900 rule stacks them 1-col) */
	.sbr-ea-benefits { grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 12px; }
	.sbr-ea-benefit { font-size: 11.5px; line-height: 1.3; gap: 6px; }
	.sbr-ea-benefit svg { width: 15px; height: 15px; padding: 2.5px; margin-top: 1px; }

	/* copy the compact design omits (optrow labels are nested deeper → kept) */
	.sbr-ea-controls > .sbr-ea-field > .sbr-ea-label { display: none; }
	.sbr-ea-formula__sub, .sbr-ea-plan__note { display: none; }

	.sbr-ea-field { margin-bottom: 10px; }

	/* formula toggle */
	.sbr-ea-formula { padding: 4px; border-radius: 12px; }
	.sbr-ea-formula__ind { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); }
	.sbr-ea-formula.is-second .sbr-ea-formula__ind { left: 50%; }
	.sbr-ea-formula__opt { padding: 8px 6px; }
	.sbr-ea-formula__name { font-size: 13px; }

	/* plan pair */
	.sbr-ea .innershortpop { gap: 8px; }
	.sbr-ea-plan { padding: 9px 12px; border-radius: 13px; gap: 10px; }
	.sbr-ea-plan__radio { width: 18px; height: 18px; }
	.sbr-ea .subscription-radio:checked + .sbr-ea-plan .sbr-ea-plan__radio::after { width: 8px; height: 8px; }
	.sbr-ea-plan__name { font-size: 13.5px; }
	.sbr-ea-plan__save { margin-top: 2px; font-size: 10.5px; }
	.sbr-ea-plan__now { font-size: 19px; }
	.sbr-ea-plan__off { font-size: 10px; }
	.sbr-ea-plan__priceblock { min-width: 72px; }

	/* quantity + frequency on one row, labels above controls */
	.sbr-ea-optrow { flex-direction: row; align-items: flex-start; gap: 12px; margin: 12px 0; }
	.sbr-ea-field--qty { display: block; flex: 0 0 auto; }
	.sbr-ea-field--freq { min-width: 0; }
	.sbr-ea-optrow .sbr-ea-label { font-size: 9.5px; margin-bottom: 5px; }
	.sbr-ea-dec, .sbr-ea-inc { width: 34px; height: 34px; font-size: 17px; }
	.sbr-ea-n { min-width: 24px; font-size: 14px; }
	.sbr-ea-freq { gap: 6px; }
	.sbr-ea-chip { padding: 9px 4px; font-size: 12px; border-radius: 9px; }

	/* price + CTA + trust */
	.sbr-ea-buy { margin-top: 10px; }
	.sbr-ea .sbr-shop-priceline { margin: 0 0 10px; }
	.sbr-ea-price { gap: 8px; }
	.sbr-ea-price__now { font-size: 26px; letter-spacing: -.8px; }
	.sbr-ea-price__was { font-size: 13px; }
	.sbr-ea .sbr-ea-cta { min-height: 48px; padding: 12px 16px !important; font-size: 15px !important; border-radius: 12px !important; }
	.sbr-ea-trust { margin-top: 10px; gap: 10px; }
	.sbr-ea-trust__i { font-size: 10.5px; }
}