/**
* Night Guard hero — shop card design (Design F: gallery left, boxed price).
*
* SHOP-ONLY. Everything is scoped under .sbr-ng (the card root) so it can never
* touch the partner landers. Per-card colors arrive as inline CSS vars
* (--ng-accent etc.) set by the renderer; this keeps the design data-driven.
*/
.sbr-ng,
.sbr-ng * { box-sizing: border-box; }
.sbr-ng {
--ng-ui: 'Open Sans', sans-serif;
--ng-display: 'Montserrat', sans-serif;
--ng-accent: #1cb9bd;
--ng-indigo: #331f97;
--ng-save: #1f9d63;
--ng-magenta: #fa319e;
--ng-amber: #f0c23a;
--ng-ink: #171a2b;
--ng-slate: #5d6275;
--ng-line: #e9eaf1;
display: block;
width: 100%;
font-family: var(--ng-ui);
color: var(--ng-ink);
text-align: left;
}
/* The card occupies a full-width row; neutralize shared lander card chrome. */
.sbr-ng-col { width: 100%; float: none; }
.sbr-ng-col .vc_column-inner,
.sbr-ng-col .wpb_wrapper { padding: 0; margin: 0; }
/* The night-guard hero's visible surface IS the teal #e8f8f8 .vc_column-inner
(sale-products-styles-top.css:64); it ships with SQUARE corners. Round + clip it
so the card has rounded top + bottom corners like the other shop cards. The popup
is position:fixed, so overflow:hidden here never clips it. */
#newsalePage .sbr-ng-col .vc_column-inner,
.sbr-ng-col .vc_column-inner { border-radius: 22px; overflow: hidden; box-shadow: 0 14px 40px -18px rgba(20, 40, 40, .28), 0 4px 12px -6px rgba(20, 40, 40, .12); }
.sbr-ng a { text-decoration: none; }
.sbr-ng img { display: block; max-width: 100%; }
/* Amber fallback: sbr_shop_d_stars() is a shared primitive also used OUTSIDE
.sbr-ng roots (e.g. the quantity cards — cariPRO toothbrush), where --ng-amber
is undefined and the stars inherited black text. */
.sbr-ng-stars { display: inline-flex; gap: 2px; color: var(--ng-amber, #f0c23a); line-height: 0; vertical-align: middle; }
/* ============================ HERO ============================ */
.sbr-ng-hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: stretch;
max-width: 1180px;
margin: 0 auto;
padding: 14px 6px;
}
/* ---- left column ---- */
.sbr-ng-left { display: flex; flex-direction: column; min-width: 0; }
.sbr-ng-eyebrow {
font-weight: 800; font-size: 12.5px; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--shop-card-accent, var(--ng-accent)); margin-bottom: 10px;
}
.sbr-ng-headline {
font-family: var(--ng-display); font-weight: 800; font-size: 50px;
line-height: 0.98; letter-spacing: -1.6px; color: var(--ng-ink);
margin: 0 0 16px;
}
/* ---- gallery ---- */
.sbr-ng-gallery { display: flex; flex-direction: column; flex: 1; }
.sbr-ng-gallery__stage {
position: relative; flex: 1; min-height: 380px; border-radius: 22px;
overflow: hidden;
background: var(--shop-card-fill, radial-gradient(120% 90% at 30% 18%, #f0fbf8 0%, #d7efe9 60%, #c6e7e0 100%));
box-shadow: 0 20px 44px -24px rgba(14, 60, 58, .4);
}
.sbr-ng-gallery__badge {
position: absolute; top: 16px; left: 16px; z-index: 6;
font-weight: 800; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
color: #fff; background: var(--shop-card-accent, var(--ng-accent)); border-radius: 999px; padding: 6px 12px;
}
.sbr-ng-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
.sbr-ng-slide.is-active { opacity: 1; visibility: visible; }
/* Headline slide: copy anchored top-left (below the Lab-direct badge), product
shot centered along the bottom — vertical separation keeps them from overlapping. */
.sbr-ng-slide__headline { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 60px 40px 40px; }
.sbr-ng-slide__lines { font-family: var(--ng-display); font-weight: 500; font-size: 32px; line-height: 1.12; color: #3a4a49; }
.sbr-ng-slide__himg { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0 auto; width: 280px; max-width: 60%; mix-blend-mode: normal; }
.sbr-ng-slide__frame {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 26px;
}
.sbr-ng-slide__frame img { max-width: 78%; max-height: 76%; object-fit: contain; mix-blend-mode: normal; }
.sbr-ng-gallery__arw {
position: absolute; top: 46%; transform: translateY(-50%); z-index: 7;
width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255, 255, 255, .92); color: var(--ng-ink);
font-size: 22px; font-weight: 700; line-height: 1;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.sbr-ng-gallery__arw.is-prev { left: 12px; }
.sbr-ng-gallery__arw.is-next { right: 12px; }
/* thumbnail rail */
.sbr-ng-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.sbr-ng-thumb {
flex: 1; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; cursor: pointer;
border: 2px solid var(--ng-line); background: #f3f8f7;
display: flex; align-items: center; justify-content: center; padding: 6px;
}
.sbr-ng-thumb.is-active { border-color: var(--ng-accent); }
.sbr-ng-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: normal; }
.sbr-ng-thumb__txt { font-family: var(--ng-display); font-weight: 800; font-size: 12px; color: var(--ng-indigo); text-align: center; line-height: 1; }
/* ---- right column: recommender ---- */
.sbr-ng-reco {
background: #fff; border: 1px solid var(--ng-line); border-radius: 24px;
padding: 30px; box-shadow: 0 30px 70px -34px rgba(40, 30, 90, .4);
display: flex; flex-direction: column;
}
.sbr-ng-reco__q { font-weight: 800; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--ng-slate); margin-bottom: 14px; }
/* grind picker */
.sbr-ng-grind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #eef0f6; border-radius: 16px; padding: 6px; }
.sbr-ng-grind__opt {
border: 0; background: transparent; cursor: pointer; border-radius: 12px; padding: 14px 6px;
display: flex; flex-direction: column; align-items: center; line-height: 1.25;
transition: background .2s ease, box-shadow .2s ease;
}
.sbr-ng-grind__lbl { font-weight: 800; font-size: 14.5px; color: var(--ng-ink); }
.sbr-ng-grind__desc { font-weight: 500; font-size: 10.5px; color: #9aa0b2; margin-top: 2px; }
.sbr-ng-grind__opt.is-on { background: var(--shop-action, var(--ng-accent)); box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--shop-action, var(--ng-accent)) 55%, transparent); }
.sbr-ng-grind__opt.is-on .sbr-ng-grind__lbl { color: #fff; }
.sbr-ng-grind__opt.is-on .sbr-ng-grind__desc { color: rgba(255, 255, 255, .85); }
.sbr-ng-reco__live { margin-top: 22px; }
.sbr-ng-reco__pick { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sbr-ng-reco__check { width: 34px; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--ng-accent) 14%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sbr-ng-reco__pre { font-weight: 600; font-size: 11.5px; color: var(--ng-slate); }
.sbr-ng-reco__name { font-family: var(--ng-display); font-weight: 800; font-size: 21px; color: var(--ng-ink); letter-spacing: -.5px; line-height: 1; }
.sbr-ng-reco__tl { margin-bottom: 16px; }
.sbr-ng-reco__tiles { display: flex; gap: 10px; margin-bottom: 16px; }
.sbr-ng-tile { flex: 1; border-radius: 14px; background: #f4f3fb; padding: 14px 16px; }
.sbr-ng-tile.is-save { background: #e9f8ef; }
.sbr-ng-tile__k { font-weight: 600; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--ng-slate); margin-bottom: 3px; }
.sbr-ng-tile.is-save .sbr-ng-tile__k { color: var(--ng-save); }
.sbr-ng-tile__v { font-family: var(--ng-display); font-weight: 800; font-size: 26px; color: var(--ng-ink); letter-spacing: -1px; }
.sbr-ng-tile__v sup { font-size: 15px; }
.sbr-ng-tile.is-save .sbr-ng-tile__v { color: var(--ng-save); }
.sbr-ng-tile__v small { font-family: var(--ng-ui); font-weight: 600; font-size: 12px; color: var(--ng-slate); }
.sbr-ng-reco__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.sbr-ng-reco__now { font-family: var(--ng-display); font-weight: 800; font-size: 38px; color: var(--ng-ink); letter-spacing: -1.5px; }
.sbr-ng-reco__now sup { font-size: 19px; vertical-align: super; }
.sbr-ng-reco__was { font-weight: 600; font-size: 15px; color: var(--ng-slate); text-decoration: line-through; }
.sbr-ng-reco__off { font-weight: 800; font-size: 12px; color: #fff; background: var(--shop-action, var(--ng-magenta)); border-radius: 6px; padding: 3px 8px; }
.sbr-ng-choose {
width: 100%; border: 0; cursor: pointer; border-radius: 14px; padding: 17px;
background: var(--shop-action, #1cb9bd); color: #fff; font-family: var(--ng-ui); font-weight: 800;
font-size: 16.5px; letter-spacing: .3px;
box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--shop-action, #1cb9bd) 67%, transparent);
display: flex; align-items: center; justify-content: center; gap: 10px;
}
.sbr-ng-choose:hover { filter: brightness(.96); }
.sbr-ng-reassure { text-align: center; font-weight: 500; font-size: 11.5px; color: var(--ng-slate); margin-top: 12px; }
.sbr-ng-trust { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ng-line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sbr-ng-trust__item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sbr-ng-trust__ic { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--ng-accent) 14%, transparent); display: flex; align-items: center; justify-content: center; }
.sbr-ng-trust__t { line-height: 1.2; }
.sbr-ng-trust__t b { display: block; font-weight: 800; font-size: 12.5px; color: var(--ng-ink); }
.sbr-ng-trust__t span { font-weight: 500; font-size: 11px; color: var(--ng-slate); }
.sbr-ng-reco__rate { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 12px; color: var(--ng-slate); }
/* ===================== TIMELINE (shared) ===================== */
.sbr-ng-tl__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sbr-ng-tl__title { font-weight: 700; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: #9aa0b2; }
.sbr-ng-tl__label { font-weight: 800; font-size: 12px; }
.sbr-ng-tl__bars { display: flex; gap: 3px; }
.sbr-ng-tl__cell { flex: 1; height: 9px; border-radius: 3px; background: var(--ng-line); transition: background .3s ease; }
.sbr-ng-tl__scale { display: flex; justify-content: space-between; margin-top: 5px; font-weight: 600; font-size: 9.5px; color: #b3b7c6; }
/* ===================== BOXED PRICE (shared) ===================== */
/* Quotes the PER-GUARD rate (see sbr_shop_d_price_boxed) — the /guard
unit rides inside __now so the pair never wraps apart. */
.sbr-ng-price { border-radius: 12px; background: color-mix(in srgb, var(--ng-accent) 5%, #fff); padding: 14px 16px; margin-bottom: 16px; }
.sbr-ng-price__top { display: flex; align-items: baseline; gap: 8px; }
.sbr-ng-price__now { font-family: var(--ng-display); font-weight: 800; font-size: 28px; color: var(--ng-ink); letter-spacing: -1px; }
.sbr-ng-price__now sup { font-size: 14px; vertical-align: super; }
.sbr-ng-price__now small { font-family: var(--ng-ui); font-weight: 600; font-size: 12.5px; color: var(--ng-slate); letter-spacing: 0; margin-left: 2px; }
.sbr-ng-price__was { font-weight: 600; font-size: 12.5px; color: var(--ng-slate); text-decoration: line-through; }
.sbr-ng-price__bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--ng-accent) 13%, transparent); }
.sbr-ng-price__save { font-weight: 700; font-size: 11.5px; }
.sbr-ng-price__reorder { font-weight: 600; font-size: 11.5px; color: var(--ng-slate); }
/* ===================== POPUP ===================== */
/* Flex-center the panel in the viewport (matches the package-compare / sports-guard
modals) instead of top-aligning it; the panel caps at viewport height and scrolls
internally when the tiers are tall. */
/* Symmetric padding = TRUE vertical centering. The old 116px top pad reserved the
96px fixed header, but `body.sbr-ng-lock #main-content { z-index }` (below)
already lifts the whole modal layer above the header while open, so nothing
can slide behind it — the asymmetry only made the panel sit low. */
.sbr-ng-popup { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 24px; }
.sbr-ng-popup.is-open { display: flex; }
.sbr-ng-popup__overlay { position: absolute; inset: 0; background: rgba(12, 10, 32, .6); backdrop-filter: blur(4px); }
.sbr-ng-popup__panel {
position: relative; width: 100%; max-width: 1280px; margin: 0;
background: #f4f3fb; border-radius: 24px; padding: 36px 40px 34px;
box-shadow: 0 40px 100px -30px rgba(12, 10, 32, .7);
max-height: calc(100vh - 48px);
overflow-y: auto;
/* scrolls internally, but keep the rounded panel clean — no visible scrollbar */
scrollbar-width: none; -ms-overflow-style: none;
/* Transition ONLY the open/close entrance props. `transition: all` also
animated `zoom`, and shop-popup-fit.js clears + re-applies zoom (with a
forced measure in between) on every click inside the panel — with `all`
that mid-task zoom round-trip animates, blinking the whole popup on the
2mm/3mm thickness switch. */
transform: translateY(20px) scale(.98); opacity: 0;
transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1);
}
.sbr-ng-popup__panel::-webkit-scrollbar { display: none; }
.sbr-ng-popup.is-open .sbr-ng-popup__panel { transform: none; opacity: 1; }
.sbr-ng-popup__close {
position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 999px;
border: 2px solid var(--ng-accent); background: #fff; color: var(--ng-ink); cursor: pointer;
display: flex; align-items: center; justify-content: center; z-index: 2;
}
.sbr-ng-popup__head { text-align: center; max-width: 660px; margin: 0 auto 26px; }
.sbr-ng-popup__head h2 { font-family: var(--ng-display); font-weight: 800; font-size: 34px; color: var(--ng-ink); margin: 0 0 8px; letter-spacing: -.8px; }
.sbr-ng-popup__head p { font-weight: 500; font-size: 14px; line-height: 1.55; color: var(--ng-slate); margin: 0; }
/* Per-tier thickness picker — sits directly above the buy buttons but keeps the
ORIGINAL segmented-pill styling the popup-head toggle had: white container
with hairline border + soft shadow, accent-filled active pill, label stacked
over note. Pills split the tier width evenly. Each tier owns an independent
copy (the controller scopes the swap to the tier). */
.sbr-ng-tier__thk { margin-bottom: 10px; }
.sbr-ng-thk__seg { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid #e2e7e6; border-radius: 14px; padding: 4px; gap: 4px; box-shadow: 0 2px 8px rgba(20, 40, 40, .06); }
.sbr-ng-thk__opt { border: 0; cursor: pointer; background: transparent; border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; font-family: var(--ng-ui); font-weight: 700; font-size: 13.5px; color: #3f4d4c; transition: box-shadow .2s ease, color .2s ease; }
.sbr-ng-thk__opt small { font-weight: 600; font-size: 10px; color: #9aa7a6; margin-top: 2px; }
/* Active pill is OUTLINED, not filled (client: the solid accent fill fought the
Add to Cart button right below). Inset ring so the pill's box never shifts. */
.sbr-ng-thk__opt.is-on { background: #fff; box-shadow: inset 0 0 0 2px var(--shop-action, var(--ng-accent)); color: var(--ng-ink); }
.sbr-ng-thk__opt.is-on small { color: var(--ng-slate); }
/* tier grid */
.sbr-ng-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.sbr-ng-popup__dots, .sbr-ng-popup__swipe { display: none; }
.sbr-ng-tier {
border-radius: 18px; border: 2px solid #eceef4; background: #fff; overflow: hidden;
box-shadow: 0 2px 10px rgba(23, 26, 43, .05); display: flex; flex-direction: column;
}
.sbr-ng-tier.is-rec { border-color: var(--shop-action, var(--ng-accent)); }
.sbr-ng-tier__stage {
position: relative; height: 232px; padding: 14px 14px 12px; display: flex; align-items: center; justify-content: center;
background: var(--shop-card-fill, linear-gradient(160deg, #f3f1fc, #e7e4f7));
}
.sbr-ng-tier__stage img { max-width: 98%; max-height: 100%; object-fit: contain; mix-blend-mode: normal; }
.sbr-ng-tier__badge { position: absolute; top: 12px; left: 12px; font-weight: 800; font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: #002244; border-radius: 5px; padding: 4px 9px; }
.sbr-ng-tier.is-rec .sbr-ng-tier__badge,
.sbr-ng-tier.is-best .sbr-ng-tier__badge { background: var(--shop-card-accent, var(--ng-accent)); }
.sbr-ng-tier__off { position: absolute; top: 12px; right: 12px; font-weight: 800; font-size: 11px; color: #fff; background: var(--shop-action, var(--ng-magenta)); border-radius: 6px; padding: 3px 8px; }
.sbr-ng-tier__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.sbr-ng-tier__rating { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-weight: 600; font-size: 12px; color: var(--ng-slate); }
.sbr-ng-tier__title { font-family: var(--ng-display); font-weight: 800; font-size: 22px; color: var(--ng-ink); letter-spacing: -.5px; line-height: 1.1; margin-bottom: 4px; }
.sbr-ng-tier__sub { font-weight: 600; font-size: 12px; color: var(--ng-slate); margin-bottom: 14px; }
.sbr-ng-tier .sbr-ng-tl { margin-bottom: 12px; }
.sbr-ng-tier__cta { margin-top: auto; }
.sbr-ng-buy { display: flex; flex-direction: column; gap: 10px; }
/* GEOMETRY (equal size for both buttons) comes from the shop-wide CTA normalizer
in shop.css:355-374 — .sbr-ng-buynow was added to that list so the pair renders
dimension-identical (client feedback; mirrors /product/night-guards). Only
per-design cosmetics live here; the values below are the no-normalizer fallback. */
.sbr-ng-buy .sbr-ng-add,
.sbr-ng-buy .sbr-ng-buynow {
width: 100%; text-align: center; border-radius: 11px; cursor: pointer; font-family: var(--ng-ui);
font-weight: 800; font-size: 13.5px; padding: 13px; line-height: 1.1;
display: flex; align-items: center; justify-content: center; gap: 7px;
}
.sbr-ng-buy .sbr-ng-add { border: 0; background: var(--shop-action, #1cb9bd); color: #fff; }
.sbr-ng-buy .sbr-ng-add:hover { filter: brightness(.96); }
.sbr-ng-buy .sbr-ng-buynow { border: 0; background: var(--shop-card-accent, #f0c23a); color: #2d2e2f; }
.sbr-ng-buy .sbr-ng-buynow:hover { filter: brightness(.96); }
/* Buy Now is an ; the storefront's button
styles otherwise win over the rule above, so pin it to the accent color with a
higher-specificity !important (mirrors the Teeth Whitening popup's buy-now).
Label is dark #2d2e2f on the amber fill — same pairing as the PDP's yellow
Add-to-cart — because white-on-amber was near-unreadable. */
.sbr-ng .sbr-ng-buy .sbr-ng-buynow { background: var(--shop-card-accent, #f0c23a) !important; border: 0 !important; color: #2d2e2f !important; box-shadow: none !important; }
.sbr-ng .sbr-ng-buy .sbr-ng-buynow:hover { background: var(--shop-card-accent, #f0c23a) !important; color: #2d2e2f !important; filter: brightness(.92); }
/* Add to Cart is a