/**
 * Plain subscription card (type='subscription') — Jade-Luxe layout.  [SHOP ONLY]
 *
 * Replacement Toothbrush Heads · Plaque Highlighters · cariPRO Dental Probiotics.
 * Same architecture/visual language as the Enamel Armour card (.sbr-ea), MINUS
 * the formula toggle: a 3-chip VARIANT selector (2/4/8 · 1/2/3) replaces it. The
 * real billing engine (.subscription-product-content-body — supply/frequency
 * selects + .subs-add-to-cart / .otp-add-to-cart) is kept in the DOM for
 * lander-common.js but hidden (.sbr-sub-engine); the visible widgets proxy into
 * it via shop-subscription.js. Per-product accent arrives as --sub-accent.
 */

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

.sbr-sub {
	--sub-ui: 'Open Sans', sans-serif;
	--sub-disp: 'Montserrat', sans-serif;
	--sub-accent: #0e9aa6; --sub-ink: #15201f; --sub-slate: #5e6d6e;
	--sub-line: #e7eceb; --sub-emer: #1f9d63; --sub-coral: #ff6a5d;
	display: block; font-family: var(--sub-ui); color: var(--sub-ink); text-align: left;
	/* full-bleed cap: single (medium-12) cards stretch .vc_column-inner to the
	   viewport — cap + center to the shared full-width design width (1180px,
	   matching night-guard / sports-guard / package-compare / enamel). */
	max-width: 1180px; margin-left: auto; margin-right: auto;
}
/* Strip the storefront stock-card surface off the wrappers (same #newsalePage-
   scoped specificity + !important fix as the Enamel card). */
#newsalePage .sbr-sub-col .vc_column-inner,
#newsalePage .sbr-sub-col .wpb_wrapper,
.sbr-sub-col .vc_column-inner, .sbr-sub-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-sub .product-selection-box,
.sbr-sub .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-sub a { text-decoration: none; }
.sbr-sub img { display: block; max-width: 100%; }

.sbr-sub-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 (accent-tinted) ---- */
.sbr-sub-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%,
		color-mix(in srgb, var(--sub-accent) 5%, #fff) 0%,
		color-mix(in srgb, var(--sub-accent) 16%, #fff) 55%,
		color-mix(in srgb, var(--sub-accent) 26%, #fff) 100%));
}
.sbr-sub-stage__glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; filter: blur(8px); }
.sbr-sub-stage__img { position: relative; z-index: 2; width: 100%; max-width: 320px; height: 340px; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(20, 40, 40, .26)); }
/* 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-sub-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-sub-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(--sub-ink); }
.sbr-sub-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. Note the spec is
   conditional on this design (the renderer omits it when $preset['spec'] is
   empty); the seal keeps this offset either way so it stays clear of the pill. */
.sbr-sub-stage__seal { position: absolute; bottom: 46px; left: 24px; z-index: 3; width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--sub-accent) 40%, transparent); background: rgba(255, 255, 255, .55); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sbr-sub-stage__seal b { font-family: var(--sub-disp); font-weight: 700; font-size: 22px; color: var(--sub-ink); line-height: 1; }
.sbr-sub-stage__seal span { font-weight: 700; font-size: 7.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--sub-accent); margin-top: 2px; }
.sbr-sub-stage__spec { position: absolute; bottom: 22px; left: 24px; z-index: 3; font-weight: 600; font-size: 11px; color: var(--sub-slate); }
/* Phones: the stage keeps its 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-sub-stage__seal { width: 58px; height: 58px; bottom: 44px; left: 18px; border-width: 1.25px; }
	.sbr-sub-stage__seal b { font-size: 16px; }
	.sbr-sub-stage__seal span { font-size: 6px; letter-spacing: .6px; }
	.sbr-sub-stage__spec { left: 18px; font-size: 10.5px; }
}

/* ---- content ---- */
.sbr-sub-content { padding: 38px 42px; display: flex; flex-direction: column; text-align: left; }
.sbr-sub-eyebrow { font-weight: 700; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sub-accent); margin-bottom: 8px; }
.sbr-sub-title { font-family: var(--sub-disp); font-weight: 700; font-size: 40px; line-height: 0.98; letter-spacing: -1px; margin: 0 0 12px; }
.sbr-sub-title a { color: var(--sub-ink); }
.sbr-sub-desc { font-weight: 500; font-size: 14.5px; line-height: 1.55; color: var(--sub-slate); margin: 0 0 20px; }
.sbr-sub-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 24px; }
.sbr-sub-benefit { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: 12.8px; color: #3f4d4c; line-height: 1.35; }
.sbr-sub-benefit svg { flex-shrink: 0; margin-top: 2px; color: var(--sub-accent); background: color-mix(in srgb, var(--sub-accent) 14%, transparent); border-radius: 999px; padding: 3px; width: 18px; height: 18px; }

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

/* HIDDEN billing engine — kept in DOM for lander-common.js, never shown. */
.sbr-sub .subscription-product-content-body,
.sbr-sub-engine { display: none !important; }
.sbr-sub-select { display: none !important; }

/* Strip the reused subscription handler structural classes' stock styling
   (e.g. .subscription-product-header global min-height:382px). */
.sbr-sub .enamel-subscription-product-inner-wrapper,
.sbr-sub .innershortpop,
.sbr-sub .enamel-subscription-product-box,
.sbr-sub .subscription-product-header,
.sbr-sub .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-sub-field { margin-bottom: 16px; }
.sbr-sub-field:last-child { margin-bottom: 0; }
.sbr-sub-label { display: block; font-family: var(--sub-ui); font-weight: 700; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: #9aa7a6; margin-bottom: 8px; text-align: left !important; }

/* variant chips (visible proxy → both plans' product selects by index) */
.sbr-sub-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Supply is fixed while the 90-Day System plan is selected (single bundle). */
.sbr-sub-variants.is-locked { opacity: .45; pointer-events: none; }
.sbr-sub-variant { cursor: pointer; border: 2px solid var(--sub-line); background: #fff; border-radius: 13px; padding: 11px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.15; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.sbr-sub-variant__name { font-family: var(--sub-ui); font-weight: 700; font-size: 13.5px; color: var(--sub-ink); }
.sbr-sub-variant__price { font-family: var(--sub-disp); font-weight: 700; font-size: 15px; color: var(--sub-slate); letter-spacing: -.3px; }
.sbr-sub-variant.is-on { border-color: var(--shop-action, #1cb9bd); background: color-mix(in srgb, var(--shop-action, #1cb9bd) 7%, #fff); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--shop-action, #1cb9bd) 70%, transparent); }
.sbr-sub-variant.is-on .sbr-sub-variant__price { color: var(--shop-action, #1cb9bd); }

/* plan pair — both radios always visible together */
.sbr-sub .innershortpop { display: flex; flex-direction: column; gap: 12px; }
.sbr-sub .subscription-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sbr-sub-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-sub-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-sub-plan__body { flex: 1; min-width: 0; }
.sbr-sub-plan__main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sbr-sub-plan__name { font-family: var(--sub-ui); font-weight: 700; font-size: 15.5px; color: var(--sub-ink); white-space: nowrap; }
.sbr-sub-plan__tag { font-weight: 800; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: var(--sub-accent); border-radius: 5px; padding: 2px 7px; }
.sbr-sub-plan__note { display: block; font-family: var(--sub-ui); font-weight: 500; font-size: 11.5px; color: var(--sub-slate); margin-top: 3px; }
.sbr-sub-plan__save { display: inline-flex; align-items: center; margin-top: 6px; font-family: var(--sub-ui); font-weight: 700; font-size: 11px; color: var(--sub-emer); }
.sbr-sub-plan__save svg { stroke: var(--sub-emer); flex-shrink: 0; margin-right: 4px; }
.sbr-sub-plan__priceblock { flex-shrink: 0; text-align: right; min-width: 82px; }
.sbr-sub-plan__now { font-family: var(--sub-disp); font-weight: 700; font-size: 22px; color: var(--sub-ink); letter-spacing: -.5px; white-space: nowrap; }
.sbr-sub-plan__now .dollerSymbal { font-size: 13px; vertical-align: super; }
.sbr-sub-plan__off { display: block; font-family: var(--sub-ui); font-weight: 700; font-size: 10.5px; color: var(--shop-action, var(--sub-coral)); white-space: nowrap; }
.sbr-sub-plan__off s { color: #aab6b5; font-weight: 600; }

.sbr-sub .subscription-radio:checked + .sbr-sub-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-sub .subscription-radio:checked + .sbr-sub-plan .sbr-sub-plan__radio { border-color: var(--shop-action, #1cb9bd); }
.sbr-sub .subscription-radio:checked + .sbr-sub-plan .sbr-sub-plan__radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--shop-action, #1cb9bd); }
.sbr-sub .subscription-radio:checked + .sbr-sub-plan .sbr-sub-plan__now { color: var(--shop-action, #1cb9bd); }

/* Force the row layout against storefront's global label{display:block}. */
.sbr-sub .sbr-sub-plan { display: flex !important; align-items: center !important; text-align: left !important; }
.sbr-sub .sbr-sub-plan__main { display: flex !important; }
.sbr-sub .sbr-sub-plan__body { flex: 1 1 auto; min-width: 0; }
.sbr-sub .sbr-sub-plan__priceblock { flex: 0 0 auto; text-align: right !important; }

/* deliver-every chips */
.sbr-sub-field--freq { margin-top: 18px; }
.sbr-sub-field--freq.is-hidden { display: none; }
.sbr-ea-freq, .sbr-sub-field--freq .sbr-ea-freq { display: flex; gap: 8px; }
.sbr-sub-field--freq .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(--sub-ui); font-weight: 700; font-size: 14px; color: var(--sub-ink); white-space: nowrap; text-align: center; transition: all .18s ease; }
.sbr-sub-field--freq .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-sub-buy { margin-top: 18px; }
.sbr-sub-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.sbr-sub-price__now { font-family: var(--sub-disp); font-weight: 700; font-size: 38px; color: var(--sub-ink); letter-spacing: -1.2px; }
.sbr-sub-price__now sup { font-size: .5em; vertical-align: super; font-weight: 700; letter-spacing: 0; }
.sbr-sub-price__was { font-family: var(--sub-ui); font-weight: 600; font-size: 15px; color: #aab6b5; text-decoration: line-through; }

/* Accent CTA. Scoped + !important to beat the storefront's high-specificity
   button rules (amber bg / max-width:325px / small padding on .add_to_cart_button). */
.sbr-sub .sbr-sub-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(--sub-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 color-mix(in srgb, var(--shop-action, var(--sub-accent)) 36%, transparent) !important;
	transition: box-shadow .25s ease, filter .18s ease, transform .12s ease;
}
.sbr-sub .sbr-sub-cta:hover { box-shadow: 0 16px 34px color-mix(in srgb, var(--shop-action, var(--sub-accent)) 50%, transparent) !important; filter: brightness(1.03); }
.sbr-sub .sbr-sub-cta:active { transform: translateY(1px); }
.sbr-sub .sbr-sub-cta svg { stroke: #fff; flex-shrink: 0; }
.sbr-sub-cta__total { font-weight: 800; opacity: .92; }

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

/* ---- responsive ---- */
@media (max-width: 900px) {
	.sbr-sub-card { grid-template-columns: 1fr; border-radius: 22px; }
	.sbr-sub-stage { min-height: 300px; padding: 30px 24px; }
	.sbr-sub-stage__img { height: 240px; }
	.sbr-sub-content { padding: 26px 22px 30px; }
	.sbr-sub-title { font-size: 32px; }
	.sbr-sub-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.sbr-sub-plan { padding: 12px 12px; gap: 10px; }
	.sbr-sub-plan__main { gap: 6px; }
	.sbr-sub-plan__name { font-size: 14px; }
	.sbr-sub-plan__tag { font-size: 7.5px; padding: 2px 5px; letter-spacing: .3px; }
	.sbr-sub-plan__now { font-size: 20px; }
	.sbr-sub-plan__priceblock { min-width: 76px; }
	.sbr-sub-variant__name { font-size: 12px; }
	.sbr-sub-variant__price { font-size: 14px; }
}
@media (max-width: 480px) {
	.sbr-sub-title { font-size: 27px; }
	.sbr-sub-price__now { font-size: 30px; }
}

/* ---- mobile (≤767px): sticky product image -------------------------------------
   Same treatment as the Enamel Armour card (see shop-enamel.css for the full
   rationale): pin the image flush at top:0 so the content scrolls up *behind* it
   and disappears; clear the three overflow ancestors that otherwise trap sticky
   (.sbr-sub-card's clip, the parent-theme #wrapper [role="main"], and the site-wide
   body{overflow-x:hidden} → both scoped via :has so only the shop tree is touched);
   drop the card's grid to block flow so the stage's containing block spans the whole
   card; create the top breathing room INSIDE the stage (padding + nudged chip/rating)
   so it stays opaque with no gap to leak through. */
@media (max-width: 767px) {
	#wrapper [role="main"]:has(.sbr-sub-stage) { overflow: visible !important; }
	body:has(.sbr-sub-stage) { overflow: visible !important; }

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

	.sbr-sub-stage {
		position: -webkit-sticky; position: sticky;
		top: 0; z-index: 5;
		min-height: 0; padding: 56px 22px 24px; overflow: hidden;
		border-radius: 22px 22px 0 0;
		box-shadow: 0 16px 22px -18px rgba(10, 40, 40, .5);
	}
	.sbr-sub-stage__chip { top: 28px; }
	.sbr-sub-stage__rating { top: 38px; }
	.sbr-sub-stage__img { height: 200px; }
}

/* ---- mobile (≤767px): compact content — single-fold card --------------------
   Mirror of the Enamel Armour compact treatment (see shop-enamel.css): the stage
   (image size, sticky pin) is untouched; everything below tightens so the card
   fits one phone fold. Dropped on mobile: the "How would you like it?" label
   (via :has(), graceful no-op → label just stays on old browsers) and the
   decorative plan notes — the 90-Day System note is kept (it describes the
   bundle) but compacted. "Choose your supply" / "Deliver every" labels stay,
   matching the enamel card's kept Quantity / Deliver-every labels. This block
   sits AFTER the ≤560/≤480 rules on purpose so its tighter values win there. */
@media (max-width: 767px) {
	.sbr-sub-content { padding: 16px 16px 18px; }

	/* headline block */
	.sbr-sub-eyebrow { font-size: 10.5px; letter-spacing: 1.3px; margin-bottom: 4px; }
	.sbr-sub-title { font-size: 25px; letter-spacing: -.6px; margin-bottom: 6px; }
	.sbr-sub-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-sub-benefits { grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 12px; }
	.sbr-sub-benefit { font-size: 11.5px; line-height: 1.3; gap: 6px; }
	.sbr-sub-benefit svg { width: 15px; height: 15px; padding: 2.5px; margin-top: 1px; }

	/* copy the compact design omits */
	.sbr-sub-field:has(.sbr-sub-plans) > .sbr-sub-label { display: none; }
	.sbr-sub-plan__note { display: none; }
	.ninety-day-system .sbr-sub-plan__note { display: block; font-size: 10.5px; line-height: 1.3; margin-top: 2px; }

	.sbr-sub-field { margin-bottom: 10px; }
	.sbr-sub-label { font-size: 9.5px; margin-bottom: 5px; }

	/* variant chips */
	.sbr-sub-variants { gap: 6px; }
	.sbr-sub-variant { padding: 8px 4px; border-radius: 11px; gap: 2px; }
	.sbr-sub-variant__name { font-size: 12px; }
	.sbr-sub-variant__price { font-size: 13px; }

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

	/* deliver-every chips */
	.sbr-sub-field--freq { margin-top: 12px; }
	.sbr-ea-freq, .sbr-sub-field--freq .sbr-ea-freq { gap: 6px; }
	.sbr-sub-field--freq .sbr-ea-chip { padding: 9px 4px; font-size: 12px; border-radius: 9px; }

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