/*
 * Teeth Whitening Trays v3 — DELTAS ONLY.
 *
 * v3's hero is the night-guards hero, so the page links
 * night-guards-v3.css + night-guards-react-inline.css first and this sheet
 * LAST. Everything here either (a) styles something genuinely new (the
 * annotated first slide, the third badge, the package subtitle) or (b)
 * overrides a night-guards value the whitening-trays design changes (the
 * button colours, the card ordering). Nothing is copied forward.
 *
 * Prefix for new classes is `twv3-`. Where a rule has to reach a night-guards
 * class it is scoped under `.twv3-hero` so it cannot leak onto
 * /product/night-guards/ if both sheets ever load together.
 *
 * @see single-product-teeth-whitening-trays-v3-react.php (link order)
 * @see account-app/src/products/teeth-whitening-v3/sections/TraysHero.jsx
 */

/* ---------------------------------------------------------------------------
 * 1. Badges — the design adds a THIRD badge next to IN STOCK.
 *
 * night-guards has one `.category` chip on a grey ground. v3 has two: the
 * product line in brand pink and a category in near-black. The base
 * `.category` rule supplies the shape (padding, radius, weight), so these only
 * restate the colours.
 * ------------------------------------------------------------------------ */
.twv3-hero .stock-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* The base rule sets margin-right:10px on .in-stock; the flex gap above now
   owns the spacing, so drop it or the first gap is 18px and the second 8px. */
.twv3-hero .stock-badge .in-stock {
    margin-right: 0;
}

.twv3-hero .category.twv3-category-whitening {
    background: #fa319e;
    color: #fff;
}

.twv3-hero .category.twv3-category-cosmetics {
    background: #2d2e2f;
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * 2. Package options.
 *
 * The visible order is T9, T6, T3 while the DOM order is the data order
 * T3, T9, T6 — reordered here rather than server-side, because the data order
 * is also what makes the hero's "second option" default land on T9.
 *
 * night-guards-react-inline.css L2127-2143 does exactly this for its own two
 * thickness wrappers (.option-two-m-wrapper / .option-three-m-wrapper). v3's
 * groups are keyed on sensitivity, not thickness, so they carry their own
 * class and the same three rules are restated for it — reusing the millimetre
 * class names to inherit the ordering would have been actively misleading.
 *
 * .four-ultra-wrapper still supplies `display:flex; flex-wrap:wrap` and the
 * full-width children, which is why the group markup keeps that wrapper.
 * ------------------------------------------------------------------------ */
.twv3-hero .four-ultra-wrapper > .twv3-option-group {
    display: flex;
    flex-wrap: wrap;
}

.twv3-hero .twv3-option-group .package-option:nth-child(2) { order: 1; } /* T9 */
.twv3-hero .twv3-option-group .package-option:nth-child(3) { order: 2; } /* T6 */
.twv3-hero .twv3-option-group .package-option:nth-child(1) { order: 3; } /* T3 */

/* The sub-line under each package title. night-guards puts HTML from the
   database here (`.package-price` / `.package-insurance` spans it rewrites in
   an effect); v3's is static copy, so it is one element and needs its own
   type styling. */
.twv3-hero .twv3-package-subtitle {
    display: block;
    color: #2d2e2f;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 2px;
    font-family: 'Montserrat', sans-serif;
}

/*
 * ...and it goes PINK on the selected row only — the sub-line is part of the
 * selected state, the way the border, the ground and the radio dot are.
 *
 * It used to be #fa319e unconditionally, which read as correct at a glance
 * because the default selection is T9 and a screenshot of the default state
 * looks exactly like the design. All three rows were pink; selecting T6 or T3
 * changed nothing about the text.
 *
 * `#2d2e2f` above is `.package-title`'s own colour (night-guards-v3.css
 * L1590), so an unselected row's two lines now match, which is what the design
 * shows.
 *
 * Deliberately keyed to `.selected` and NOT to `:hover`: hovering already
 * tints the whole card, and moving the text colour too would make a hovered
 * row indistinguishable from the chosen one. No `#wrapper` prefix needed —
 * unlike the sibling `.package-option.selected` rules further down, nothing
 * competes for this colour, and (0,3,0) already beats the base rule.
 */
.twv3-hero .package-option.selected .twv3-package-subtitle {
    color: #fa319e;
}

/* Each row shows ONE landscape kit photo (the product card's own artwork), not
   night-guards' row of square guard thumbnails, so the base `width:48px` — which
   would squash a 340x203 photo to a sliver — gives way to the dual cap in
   section 16. */
.twv3-hero .guards-images img {
    width: auto;
    height: auto;
    object-fit: contain;
}
.twv3-hero .guards-images {
    flex: 0 0 134px;
    width: 134px;
    min-width: 200px;
    max-width: 134px;
    gap: 0;
    padding: 6px 8px 6px 50px !important;
    align-items: center;
    justify-content: flex-start;
}
/* ---------------------------------------------------------------------------
 * 3. Action buttons — v3 recolours both.
 *
 * night-guards: Add to cart amber (#f0c23a), Buy Now navy (#24156e). v3: Add
 * to cart brand pink, Buy Now near-black. The base selectors are very long and
 * carry the amber/navy, so these have to match their specificity — hence the
 * same full class chains, scoped under .twv3-hero.
 * ------------------------------------------------------------------------ */
.twv3-hero .night-guard-product-detail button.btn.add-to-cart-btn.add-to-cart-btn-v2.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    background: #fa319e;
    color: #fff;
}

.twv3-hero .night-guard-product-detail button.btn.add-to-cart-btn.add-to-cart-btn-v2.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover {
    color: #fff;
}

.twv3-hero .night-guard-product-detail button.buy-now-btn.buy-now-button {
    background: #101113;
}

/* The kit price is the emphasis; the shipping note is a quiet aside. */
.twv3-hero .twv3-btn-price {
    font-weight: 700;
}

.twv3-hero .twv3-btn-note {
    font-weight: 400;
    font-size: 11px;
    opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * 4. The hero slider.
 *
 * ONE box for every slide, as an aspect ratio — see the rule below.
 *
 * The base rule is `.slide-item img { width:100% }`, which is fine for
 * night-guards (four slides, all the same landscape crop) but not here: slick
 * sizes its track from the tallest slide, so a mixed set leaves the shorter
 * slides' slack at the bottom as a hole between the artwork and the thumbnail
 * rail. That was severe with the old photography, which mixed landscape and
 * PORTRAIT — graphic-trays-and-case.webp (400x479) rendered 766px tall in a
 * 640px column and pushed the rail ~300px down.
 * ------------------------------------------------------------------------ */
/*
 * ONE BOX for every slide, as an ASPECT RATIO rather than a pixel height.
 *
 * slick sizes its track from the tallest slide, so unequal slides leave the
 * shorter ones with all their slack at the BOTTOM — a hole between the artwork
 * and the thumbnail rail. The five supplied slides are 771x485, 766x562,
 * 785x538, 613x520 and 730x546: all landscape, but spanning ratios 1.18 to
 * 1.59, which at a 520px column rendered them 327px to 441px tall.
 *
 * 613/520 is the TALLEST of those ratios (slide 4), so the box is exactly big
 * enough to hold every slide at full width with nothing cropped, and each
 * image centres in it. As a ratio rather than the old fixed 470px it scales
 * with the column, so the same rule holds at every breakpoint and the two
 * media-query overrides that used to restate it are gone.
 */
.twv3-slider .slide-item {
    aspect-ratio: 613 / 520;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * `width:auto` beats the base `.slide-item img { width:100% }`: these are five
 * different aspects, so letting width drive would stretch the wider ones past
 * the box. Both maxima at 100% lets whichever dimension binds first do so.
 */
.twv3-slider .slide-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

/*
 * Slick's arrows sit vertically centred. Nudge them into the gutter so they
 * clear the artwork — slide 2 and slide 3 both carry label copy at the left and
 * right edges that a centred arrow would sit on top of.
 */
.twv3-slider .slick-prev {
    left: -10px;
    z-index: 2;
}

.twv3-slider .slick-next {
    right: -10px;
    z-index: 2;
}

/* ---------------------------------------------------------------------------
 * 4b. The video modal.
 *
 * `night-guards-v3.css` already carries every rule that paints it
 * (`.video-modal`, `.video-modal-content`, `.close-video-modal`,
 * `.show-video-modal .*`) and this lander links that sheet, so the modal itself
 * needs nothing here. These two are the gaps.
 * ------------------------------------------------------------------------ */

/*
 * `.noscroll` is set on <body> by SBProduct.initVideoModal() alongside
 * `show-video-modal` — and NO stylesheet in the theme has ever defined it.
 * Grepped the child theme, the parent and every sheet under assets/css: the
 * only occurrence is the line in product-common.js that adds the class. So the
 * page scrolled freely behind the open modal on every lander that uses this
 * utility. Scoped to the modal being open so it can never strand the body.
 */
body.show-video-modal.noscroll {
    overflow: hidden;
}

/*
 * The video slide's play button is drawn INTO its artwork, so it gets no
 * `.video-play-button` of its own — but it still has to read as clickable.
 * `.slide-item` sets `cursor:pointer` for the lightbox slides; this makes the
 * whole video slide the hit area, since the trigger class is on the slide
 * rather than on an inner <a>.
 */
.twv3-slider .slide-item.twv3-video-slide {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 5. Responsive.
 *
 * The slide box is an aspect ratio now, so it needs no per-breakpoint height —
 * the two overrides that used to restate `--twv3-slide-h` here (300px mobile,
 * 400px tablet) went with the annotated slide whose callout type they existed
 * to keep legible.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Three chips do not fit on one 390px line; let them wrap rather than
       overflow the column. */
    .twv3-hero .stock-badge {
        gap: 6px;
    }
}

/* ---------------------------------------------------------------------------
 * 6. Trust bar — night-guards' band, recoloured.
 *
 * `.dark-blue` (#24156e) and `.light-blue` (#331f97) are GENERIC utility
 * classes used across the theme, so these overrides are scoped to this
 * section's own wrapper instead of redefining the utilities. That is the whole
 * reason sections/TrustBar.jsx carries `.twv3-trust-bar`.
 * ------------------------------------------------------------------------ */
.twv3-trust-bar .dark-blue {
    background: #2d2e2f;
}

.twv3-trust-bar .light-blue {
    background: #fa319e;
}

.twv3-trust-accent {
    color: #fa319e;
}

/*
 * EVEN vertical rhythm in the pink band: 32px above the stars, 32px before the
 * logo strip, 32px below it.
 *
 * `teeth-whitening-v2.css` L2030 sets `.section-body .logoes-strip-mbt {
 * margin-top: 4rem; margin-bottom: 1rem }` and loads AFTER the night-guards
 * sheets, so it beat their `margin-top: 1rem` and won. On top of the band's own
 * `padding: 32px 0` that measured 32px above the stars but a **64px** gap
 * before the logos and **48px** (16 margin + 32 padding) below them — the band
 * read bottom-heavy and the logos sat adrift from the tagline they belong to.
 *
 * Zeroing the bottom margin lets the band's padding alone set the space under
 * the logos, so the three gaps come out identical.
 *
 * (0,3,0) to clear v2's (0,2,0) without `!important`, and scoped to this
 * lander's wrapper so the shared `.section-body .logoes-strip-mbt` rule keeps
 * applying everywhere else — the same reason the colour overrides above are
 * scoped.
 */
.twv3-trust-bar .section-body .logoes-strip-mbt {
    margin-top: 32px;
    margin-bottom: 0;
}

/*
 * Centre the logos on ONE midline.
 *
 * The wordmarks are deliberately different heights — 38-41px for six of them
 * but `clnet-icon-transparent.png` is 93x66 — and slick sizes `.slick-track`
 * from the tallest, so the track is 66px. The slides carry
 * `display:flex; align-items:center` already (teeth-whitening-v2.css L2039) but
 * they do NOT fill that track, so every logo sat flush with its TOP: the six
 * short ones hung from the top edge while CNET ran the full 66px, and the row
 * read as ragged rather than as a line.
 *
 * `align-items:center` on the TRACK is what fixes it — the slides become
 * equal-height flex items and each logo centres in the 66px. Nothing is
 * resized: CNET stays 93x66, which is how the design draws it.
 *
 * Flex on the track is safe; flex on `.mulimages` is NOT. Adding v1's
 * `d-flex align-items-center justify-content-center` to the marquee element
 * collapses `.slick-track` to 0px and every logo vanishes — a different
 * element, and the reason this rule targets the track directly.
 */
.twv3-trust-bar .logoes-strip-mbt.slick-initialized .slick-track {
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------------
 * 7. Our Promise.
 * ------------------------------------------------------------------------ */

/* night-guards' subtitle is #331f97 (purple); v3's is brand pink. */
.twv3-promise .promise-subtitle {
    color: #fa319e;
}

/*
 * Award badge.
 *
 * The design INDENTS this block — it is centred under the text column, not
 * flush with "Our Promise". night-guards' `.rating-badge` already does exactly
 * that (`justify-content: center; margin-left: -30px` in
 * night-guards-react-inline.css L1030), and this rule used to override it to
 * `flex-start; margin-left: 0`, which pulled the Forbes wordmark out to the
 * heading's left edge. Only the vertical padding is v3's; the horizontal
 * placement is inherited on purpose.
 */
.twv3-promise .rating-badge.twv3-award-badge {
    padding-top: 10px;
    /*
     * The design INDENTS this block — it does not sit flush with "Our
     * Promise". night-guards centres it (`justify-content: center;
     * margin-left: -30px`), and centring is what this used to inherit, but the
     * result drifts with the column width: in a 555px column it lands 145px in,
     * where the comp has it ~95px in.
     *
     * 95px measured off the comp using the heading-left → circle-left span as
     * the scale ruler (800 comp px against 585 here), which is the only way to
     * convert from a comp drawn on a wider canvas. Explicit, so it stays put if
     * the column width changes again.
     */
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 95px;
}

.twv3-award-kicker {
        display: block;
        font-size: 18px;
        color: #2d2e2f;
        font-weight: 400;
        font-family: 'Montserrat';
        margin-bottom: 2px;
}

/*
 * The only Forbes marks in the theme are a WHITE knockout
 * (products/teeth-whitening-trays/forbes-logo.webp) and a blue one; this band
 * is white, so neither reads. brightness(0) drives every colour channel to
 * black while leaving the alpha channel alone, which turns the knockout into a
 * solid black wordmark — no new asset, and it still tracks the source file.
 */
.twv3-forbes-mark {
    display: block;
    width: 145px;
    height: auto;
    filter: brightness(0);
}


/* ---------------------------------------------------------------------------
 * 8. The promise circle.
 *
 * ONE flat PNG (girl-circle-img.png, 735x759) — the same arrangement as
 * night-guards' person-circle_03.png: the pink ring, the #fdf0f7 ground and all
 * three subjects are baked into the file. It replaces a CSS composition that
 * existed only because no whitening comp did: a round clipping frame, the ring
 * as a box-shadow, and the v2 hero's kit / trays / model placed in % of it.
 *
 * The frame is deliberately NOT a circle any more. The comp is TALLER than it
 * is wide, because the model breaks out of the ring at the bottom — a
 * `border-radius: 50%` + `overflow: hidden` box would clip exactly the part
 * that is drawn to escape, and its own ring would double the baked-in one. What
 * is left is a plain block the image fills.
 *
 * The SIZE still lives on `.promise-image`, not here: night-guards sets
 * `.circular-frame { max-width:100% !important; width:100% !important }`
 * between 768 and 1024px, which would defeat a max-width on the frame.
 * Constraining the parent and letting the frame be 100% of it survives that
 * rule instead of fighting it.
 * ------------------------------------------------------------------------ */
.twv3-promise .promise-image {
    max-width: 520px;
    margin: 0 auto;
}

/*
 * Every round-frame property is cleared explicitly rather than just dropped:
 * `.circular-frame` is night-guards'/v2's class and brings its own radius,
 * background and (at <=1024px) `padding-bottom: 60px` with it.
 */
.twv3-promise-circle {
    width: 100%;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: 0;
    overflow: visible;
    position: relative;
}

/*
 * `.circular-frame img { width:100%; height:100%; object-fit:cover }` would
 * squash the 735x759 comp into whatever box the frame resolves to. The comp
 * carries its own framing, so all it needs is its aspect ratio left alone.
 * Equal specificity to that rule, but this sheet loads last, so it wins —
 * including over night-guards' <=1024px override.
 */
.twv3-promise-circle img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    /* One column at 390px, so the circle gets the full width but stays small
       enough that the promise list is not pushed off the first screen. */
    .twv3-promise .promise-image {
        max-width: 340px;
    }

    .twv3-award-kicker {
        font-size: 12px;
    }

    .twv3-forbes-mark {
        width: 120px;
    }
}

/*
 * night-guards' `.promise-description` is `line-height: 1`, which is fine for
 * its one-line copy but sets wrapped lines touching. v3's descriptions are
 * longer and do wrap in this column, so they need real leading — and dropping
 * `.promise-content`'s 40px right padding buys back enough width that most of
 * them stay on one line, as the design shows.
 */
.twv3-promise .promise-content {
    padding-right: 0;
    position: relative;
    top: 40px;
}
.our-promise-section{
    padding-bottom:50px;
}

/*
 * Section geometry, matched to the design comp.
 *
 * Three things were off, all of them structural rather than cosmetic:
 *
 * 1. `.row` computes 35px of horizontal padding — from no rule in any sheet
 *    this page can read (not inline, not in a media block, and the two
 *    unreadable sheets are the slick CDN pair, which do not style `.row`). It
 *    inset the text column to 185px where the comp has it at ~150, i.e. hard
 *    against the container edge, and it stole 70px from the circle's column.
 *    Overridden rather than hunted down further.
 *
 * 2. The circle is ~42% of the section width in the comp, not 36%. At 520px it
 *    sat inside its column; the comp's is 605px and OVERFLOWS the container to
 *    the right, which is what makes it read as the dominant element.
 *
 * 3. The comp's circle starts ~26px below the section top and the heading ~43px
 *    below that — the circle is taller than the text column and the row centres
 *    them, so that offset falls out of the size difference rather than needing
 *    its own rule. The 50px top padding it had put the circle level with the
 *    heading instead.
 */
.twv3-promise .row {
    padding-left: 0;
    padding-right: 0;
}

/*
 * Top space above "Our Promise". The row centres the two columns, so the
 * heading's offset from the section top is `padding-top + (image - column)/2`.
 * The comp puts the heading ~67px down.
 *
 * 40px, not the 50px it was: the image column used to be a 605x605 CSS circle
 * and is now the 735x759 comp, which at 605 wide renders 625 TALL. The extra
 * 20px of height is split by the centring and pushed the heading to 80px.
 * (It was briefly 26px earlier still, while the circle was capped to its
 * column at 555px and the offset was ~0.)
 */
.twv3-promise {
    padding-top: 40px;
}

/*
 * DESKTOP ONLY, as a min-width query — not an unscoped rule.
 *
 * This block sits later in the file than the `max-width: 767px` one that caps
 * the circle at 340px, so as an unscoped `.twv3-promise .promise-image` its
 * `max-width: 605px` beat that cap on source order and the phone circle came
 * out 605px, far wider than its column. Behind `min-width: 1200px` it cannot
 * reach the smaller breakpoints at all, and tablet/phone keep the 520px base
 * and 340px cap above.
 *
 * `width`, not just `max-width`: the div is `width:auto`, so a max-width alone
 * let it collapse to the 555px column and the circle never grew. 605px is the
 * comp's ~42% of the section width, and it deliberately OVERFLOWS the container
 * to the right — `margin-left:auto` resolves to 0 on an over-wide box, so it
 * starts at the column's content edge and hangs off the right, which is the
 * side the comp hangs off.
 */
@media (min-width: 1200px) {
    .twv3-promise .promise-image {
        width: 605px;
        max-width: 605px;
        margin-left: auto;
        margin-right: 0;
    }
}

/* Bullet pitch. The comp steps the four promises every ~66px; a 46px item with
   night-guards' 25px margin steps every 71px, which is what made this column
   taller than the comp's and pushed the circle down with it. */
.twv3-promise .promise-item {
    margin-bottom: 20px;
}

.twv3-promise .promise-description {
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * 8b. The description band's pink gradient, FULL-BLEED.
 *
 * `teeth-whitening-v2.css` L263 paints it with
 * `.section-three.sec-we-re-the-best:before { width: 100%; ... }` and
 * `best-teeth-shades.png` (1900x142) — a pink-to-white vertical fade that is
 * already exactly what the design shows. Nothing was wrong with the asset or
 * the rule; the problem is WHERE v3 puts the section.
 *
 * On v1 `.sec-we-re-the-best` is a top-level section, so `width: 100%` is the
 * viewport. In v3 the same markup is a tab PANEL nested inside
 * `.product-tabs-section > .container`, so 100% resolves to 1170px and the
 * gradient rendered inset with ~135px of white gutter each side — the section's
 * own white showing through where the design is pink to the edge.
 *
 * The breakout is `left: 50%` + `margin-left: -50vw`, which is measured from
 * the viewport rather than the container. `100vw` INCLUDES the classic
 * scrollbar, so on a scrolling page it is a few px wider than the content box
 * and would push a horizontal scrollbar; `overflow-x: clip` on the full-width
 * ancestor absorbs that. `clip` and not `hidden` on purpose — `hidden` makes
 * the element a scroll container, which changes how descendants with sticky or
 * fixed positioning behave.
 * ------------------------------------------------------------------------ */
/*
 * THREE panels carry one of these gradients, not one:
 *   #description    .sec-we-re-the-best      (the band above)
 *   #guarantee      .sec-we-re-the-best      (a SECOND instance of it)
 *   #how-it-works   .the-proshield-process   (its own rule, same asset)
 *
 * The first fix here was keyed on `.twv3-description`, which only the
 * Description panel's section carries — so the other two kept rendering at
 * 1170px. Found by activating each tab in turn and re-scanning: a page scan
 * with only the default tab open cannot see them, since inactive panels are
 * `display:none`.
 *
 * Scoped to the lander root, which is (1,1,0) and so clears both v2 rules —
 * `.section-three.sec-we-re-the-best:before` (0,2,0) and
 * `.the-proshield-process:before` (0,1,0). Specificity matters more than usual
 * here: at (0,1,0) only the `margin-left` landed and the gradient kept its
 * 1170px width while being shifted 720px off the left edge, which is worse than
 * the gutters it was meant to fix.
 *
 * `top: 0` because v2 pulls `.sec-we-re-the-best`'s to -10px to hide a seam
 * against the section above it on v1; inside a tab panel there is no seam, and
 * the -10px just lifted the gradient off the tab bar.
 */
#sb-react-twv3-root .sec-we-re-the-best::before,
#sb-react-twv3-root .the-proshield-process::before {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    top: 0;
}

/*
 * No gap between the tab bar and the gradient.
 *
 * `.tab-content` carries `padding: 60px 0`, which on a gradient panel put 50px
 * of white between the tab rule and the top of the gradient (60px of padding
 * less the gradient's own -10px pull). The gradient IS the panel's top edge in
 * the design, so the panels that have one get no top padding.
 *
 * `#how-it-works` already ships that way (`padding: 0 0 60px`), so this is the
 * existing pattern rather than a new exception — which leaves `#description`
 * and `#guarantee`. `#comparison` keeps its 60px: it has no gradient, so that
 * padding is its own spacing.
 */
.twv3-tabs .tab-content#description,
.twv3-tabs .tab-content#guarantee {
    padding-top: 0;
}
p.cut-off-price:after{
    left:37px !important;
}
/*
 * The two ancestors that are full width — the desktop tab wrapper and the
 * mobile accordion — since the panel is rendered in BOTH (only one has height
 * at a given breakpoint, but the gradient breaks out of whichever is live).
 * `.mobile-accordion-section` is night-guards' own class; the accordion has no
 * `twv3-` hook of its own.
 */
.twv3-tabs,
.mobile-accordion-section {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * 8c. Honest Comparison — the red "note" cells.
 *
 * night-guards' table only ever puts a tick, a cross or a two-line stat in a
 * value cell, so there was no class for a cell of red prose. The whitening
 * table needs four: "Messy, uneven, irritates the gums" and the like, where
 * night guards just had a cross.
 * ------------------------------------------------------------------------ */
#sb-react-twv3-root .twv3-compare-note {
    display: block;
    color: #ff0000;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    padding: 0 8px;
}

/* The mobile cards join the lines into one string, so they wrap naturally in a
   much narrower cell and want the smaller type the rest of that card uses. */
#sb-react-twv3-root .comparison-card .twv3-compare-note {
    font-size: 13px;
    padding: 0;
}

/* ---------------------------------------------------------------------------
 * 9. Tab chrome — night-guards' tabs, recoloured.
 *
 * The whole tab/accordion layout already arrives with
 * night-guards-react-inline.css, so this is colour only: night-guards paints
 * the active tab and the 5px rule under the strip #24156e (navy), and v3 uses
 * brand pink to match the trust bar and the description panel's headings.
 * ------------------------------------------------------------------------ */
.twv3-tabs.product-tabs-section:after,
.twv3-tabs .tab-navigation:after {
    background: #fa319e;
}

.twv3-tabs .tab-btn.active {
    background: #fa319e;
    border-bottom-color: #fa319e;
}
@media screen and (max-width:1499px){
    .benefit-item span:not(.checkmark){
        font-size: 12px !important;
    }
    .twv3-hero .twv3-package-subtitle{
        font-size: 10px !important;
    }
    #sb-react-twv3-root .sec-we-re-the-best::before, #sb-react-twv3-root .the-proshield-process::before{
        top: -10px;
    }
}
@media (max-width: 768px) {
    /* night-guards overrides the active tab's bottom border to #5642bb here. */
    .twv3-tabs .tab-btn.active {
        border-bottom-color: #fa319e;
    }
}

/* ---------------------------------------------------------------------------
 * 10. Description panel.
 *
 * The 2-column alternating layout (.sec-we-re-the-best > .content-section >
 * .counter-N > .medium-6 + .sec-content-ll / .graphic-content) already comes
 * from the night-guards sheets — night-guards' own Description panel has the
 * same structure, which is what made this port cheap.
 *
 * What is MISSING there is the whitening panel's own furniture, because it
 * lives only in assets/css/teeth-whitening-v2.css: the pink results card, the
 * CTA+logo row and the 3-row spacing. Those rules are lifted verbatim from
 * that sheet rather than loading it whole — it also redeclares 19 classes v3
 * already renders (`.section-two`, `.section-header`, `.clients-logoes`,
 * `.beneth-starts-rating`, `.add-to-cart-btn`, `.buy-now-btn`, `.orignal-price`
 * …), so loading it would reskin the trust bar and the hero's buttons.
 *
 * Scoped under `.twv3-description` for the same reason: `.content-inner`,
 * `.text-bottom` and `.logo` are names generic enough to collide with the
 * theme, and the other three tab panels are night-guards markup that must not
 * pick these up.
 * ------------------------------------------------------------------------ */
.twv3-description .graphic-content.first-one-contet-img {
    max-width: 610px;
}

.twv3-description .medium-6.order-1 .graphic-content.first-one-contet-img {
    padding-right: 0px;
}

.twv3-description .content-section.three-rows-content {
    padding-top: 60px;
}

/* The pink results card: a tinted panel with the brand circle graphic bled in
   behind it via :before, the shade strip centred and the seal pinned top-right. */
.twv3-description .background-img-with-text {
    background-color: #fcf0f8;
    position: relative;
    z-index: 999;
    padding: 15px 40px 15px 40px;
    max-width: 610px;
    border-radius: 8px;
}

.twv3-description .background-img-with-text:before {
    background-image: url('../images/teeth-whitening-tray-new/background-circle1.png');
    content: '';
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0px;
    border-radius: 8px;
}

.twv3-description .content-inner {
    text-align: center;
}

/* White, because it sits on the magenta part of that circle graphic. */
.twv3-description .content-inner .text-bottom p {
    font-size: 16px;
    font-style: italic;
    color: #fff;
    font-family: 'Open Sans';
    padding-top: 15px;
    margin-bottom: 0px;
}

.twv3-description .content-inner .granterr-logo {
    position: absolute;
    right: 20px;
    top: 70px;
}

/* CTA and the NADP logo on one row. */
.twv3-description .button-with-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.twv3-description .button-with-logo .logo {
    position: relative;
    top: -10px;
    right: 80px;
}

.twv3-description p.sec-content-all-lp {
    margin-bottom: 40px;
    padding-top: 15px;
}
 .product-teeth-whitening-trays .the-process-title.the-process-title-1 span, .product-teeth-whitening-trays .the-process-title.the-process-title-2 span, .product-teeth-whitening-trays .the-process-title.the-process-title-3 span{
        color:#fa319e !important;
        font-weight:600 !important;
    }
    .highlight-text {
    color: #fa319e !important;
}
#guarantee .counter-one {
    align-items: center !important;
    padding: 40px 0px !important;
}
@media screen and (min-width:1499px){
    .twv3-hero .twv3-package-subtitle{
        font-size: 14px !important;
        font-weight:700;
    }
    .twv3-hero .package-title{
        font-size:14px !important;
        font-weight:500;
    }
   
}

@media screen and (max-width: 1024px) {
    .twv3-description .content-inner .granterr-logo {
        top: 40px;
    }

    .twv3-description .content-inner .text-bottom p br {
        display: none;
    }

    .twv3-description .button-with-logo .logo {
        right: 0;
        left: 0;
    }

    .twv3-description .teeth-shade-img img {
        max-width: 62%;
    }

    .twv3-description .button-with-logo .btn-primary-teal {
        min-width: 180px !important;
    }
}

@media screen and (max-width: 992px) {
    .twv3-description .content-inner .granterr-logo {
        top: 40px;
        max-width: 70px;
    }

    .twv3-description .content-section.three-rows-content {
        padding-top: 20px;
    }
}
.popup-wrapper span{
    color:#fff !important;
}
@media screen and (max-width: 767px) {
    .twv3-description .content-inner .text-bottom p {
        font-size: 12px;
    }

    .twv3-description .content-inner .granterr-logo {
        top: 23px;
        max-width: 70px;
        right: 8px;
    }
.mobile-comparison-slider .slick-dots li.slick-active button{
    background: transparent;
}
    .twv3-description .button-with-logo button {
        min-width: 0px !important;
    }
    .mobile-comparison-slider .slick-dots li button{
        background: transparent !important;
    }
    .price-content{
        min-height: 45px;
    }
    .section-slider-night-guard .price-content{
        padding-top: 14px !important;
    }
    .twv3-hero .guards-images{
        padding-left: 34px !important;
    }
    .section-two .section-body .sec-heading-curious{
        font-size: 28px !important;
    }
    .product-slider-wrapper.slick-initialized.slick-slider.slick-dotted{
        max-height: max-content!important;
    }
    .sec-we-re-the-best h2, .over-40million-americans h5, .choose-package-div h1{
        font-size: 26px !important;
    }
    #sb-react-twv3-root > .twv3-slot--award .twv3-award-badge--band{
        padding: 30px 15px 30px !important;
    }
}

/* ---------------------------------------------------------------------------
 * 11. CTA colour, page-wide.
 *
 * night-guards paints `.btn-primary-teal` #331f97 (purple) — that is the CTA on
 * every panel of the detail body, including the whitening Description one,
 * where the live v2 page uses brand pink. Recoloured for the whole lander
 * rather than just that panel, so the borrowed night-guards panels do not sit
 * two clicks away in a different accent.
 *
 * Scoped to the lander's own root: that beats `.btn-primary-teal` (0,1,0) and
 * night-guards' longest override for it, `.section.section-top-banner
 * .action-btn .btn-primary-teal` (0,3,0), without !important — and it cannot
 * leak to any other page, since only this template prints that id.
 * `.blue-button` / `.btn-blue-clr` appear in the borrowed markup but are
 * declared in neither night-guards sheet, so there is nothing else to override.
 * ------------------------------------------------------------------------ */
#sb-react-twv3-root .btn-primary-teal {
    background-color: #fa319e;
    border-color: #fa319e;
}

#sb-react-twv3-root .btn-primary-teal:hover {
    background-color: #d81b80;
    border-color: #d81b80;
}

/* ---------------------------------------------------------------------------
 * 12. The borrowed whitening sections — shedding night-guards.
 *
 * The facts scroller and the T3/T9/T6 grid come from the v2 page, so this
 * lander links teeth-whitening-v2.css AFTER the night-guards sheets and that
 * sheet wins nearly everywhere (see the sheet-order note in
 * single-product-teeth-whitening-trays-v3-react.php).
 *
 * "Nearly": the two sheets were built from the same class vocabulary —
 * night-guards has its own facts + product-cards sections — and night-guards
 * still wins wherever it uses a HIGHER-specificity selector or `!important`.
 * Measured against the live page, that is 10 properties, and only the three
 * below are visible. `.twv3-kit` (on both borrowed sections) is what lets them
 * be pulled back without touching either source sheet.
 * ------------------------------------------------------------------------ */

/*
 * THE STRUCTURAL ONE. night-guards-react-inline.css gives
 * `.product-slider-wrapper` `gap: 2.5rem` for its own 3-up card row. The
 * whitening grid is `justify-content: space-between` with `margin: 0 5px` and
 * no gap, and 3 x 374px + 2 x 40px + margins = 1232px does not fit the 1170px
 * container — so the third card wrapped onto its own row and the layout came
 * apart. v2 declares no `gap` at all, so there is nothing to lose by zeroing
 * it; night-guards already zeroes it itself below 767px.
 */
.twv3-kit .product-slider-wrapper {
    gap: 0;
}
.twv3-action-buttons span{
    color:#fff !important;
    font-weight: 700;
}
/*
 * night-guards scopes its card copy under `#product-cart-section`, and the
 * whitening grid reuses that very id — so an ID-specificity rule (1,1,1) beats
 * v2's `.product-card .product-description p` (0,2,1) and the card blurbs came
 * out with night-guards' 35px top padding, grey #828486 and 1.6 line-height.
 * Re-assert v2's values at ID specificity of our own.
 */
#product-cart-section.twv3-kit .product-card .product-description p {
    color: #555759;
    font-size: 12px;
    font-family: 'Open Sans';
    padding: 12px 24px;
    margin-bottom: 10px;
    /* v2's blurb runs at the sheet-wide `p { line-height: 1.4 }`; `normal`
       here is ~1.2 and took a 1px slice off every line of the blurb. */
    line-height: 1.4;
    text-align: initial;
}

@media screen and (max-width: 767px) {
    #product-cart-section.twv3-kit .product-card .product-description p {
        font-size: 11px;
        padding: 10px 10px;
        text-align: left;
        margin-bottom: 5px;
    }
}

/*
 * THE CARD HEADER. night-guards-react-inline.css L854-858 pulls
 * `.card-top-header` out of its card with `margin: -1.5rem -1.5rem 0` (and
 * -15px below 767px, L2003-2007), because ITS cards carry 1.5rem of padding
 * and the header is meant to sit flush against the card's edges.
 *
 * The whitening cards have no such padding, so that negative margin dragged
 * the title 24px ABOVE the card's own border and 24px wider than it on each
 * side: the "T3 Teeth Whitening System" heading floated outside the box and
 * the LIGHT/HEAVY/AVERAGE STAINS badge rode up onto the top border. v2 leaves
 * this margin at 0 and the header is the first row INSIDE the card, with the
 * badge hanging under it — which is the design this page is matching.
 *
 * Only the pull-out is reverted; the header's background, radius and bottom
 * border (teeth-whitening-v2.css L329, L610) are untouched, so the T9 card
 * keeps its pink title bar.
 */
.twv3-kit .card-top-header {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

/*
 * THE STAINS BADGE, same leak one element down. night-guards-react-inline.css
 * L839-851 gives `.product-card .card-badge` `margin-left/right: auto` next to
 * its absolute placement. teeth-whitening-v2.css re-declares that badge twice
 * (L341 desktop, L4138 mobile) but never its margins, so the `auto` survived.
 *
 * Above 767px the badge is absolutely positioned and `auto` resolves to 0, so
 * nothing showed. On mobile v2 drops it back into flow, where `auto` centred a
 * 110px badge in a 310px card — 99px in from the left edge it is supposed to
 * sit flush against. v2's own computed value there is 0.
 */
.twv3-kit .product-card .card-badge {
    margin-left: 0;
    margin-right: 0;
}

/*
 * night-guards-v3.css sets `.row-wrape.rowrpe2 { font-weight: 400 !important }`;
 * the whitening rows are 600. `!important` is the only thing that beats
 * `!important`, and it is confined to this section's own scope.
 */
.twv3-kit .row-wrape.rowrpe2 {
    font-weight: 600 !important;
}

/* ---------------------------------------------------------------------------
 * 12b. THE REST OF THE GRID'S SPACING, measured back to the v2 page.
 *
 * sections/Cards.jsx is a verbatim copy of the v2 page's own Cards.jsx, so the
 * grid is supposed to be pixel-identical to
 * /product/teeth-whitening-trays/?design_twt=react. It was not: a computed-style
 * walk of both pages' #product-cart-section subtrees (every box + spacing
 * property, keyed by DOM path) turned up the leaks below — all of them
 * night-guards rules that win on `:not()` specificity, an id, or `!important`,
 * and none of them design decisions for this page.
 *
 * Each rule restores the value the v2 page COMPUTES, at each breakpoint v2
 * declares one, rather than a value that merely looks close.
 * ------------------------------------------------------------------------ */

/*
 * night-guards-react-inline.css L639 also wraps the row (`flex-wrap: wrap`).
 * With gap zeroed above nothing wraps today, but v2 declares no wrap at all
 * and the 3-up row must never be allowed to break.
 */
.twv3-kit .product-slider-wrapper {
    flex-wrap: nowrap;
}

/*
 * THE CARD BOX. night-guards-react-inline.css L628 sets `flex: 0 0 33.33%`.
 * v2 leaves flex alone and sizes the cards with `max-width: 32%` + `width: 100%`
 * (teeth-whitening-v2.css L4465), which is what the whitening container's
 * `justify-content: space-between` is spaced for.
 */
#product-cart-section.twv3-kit .product-card {
    flex: 0 1 auto;
}

/*
 * SQUARE INNER CORNERS. `.card-content` (night-guards-react-inline.css L746)
 * and `.card-top-header` (L888) are rounded 10px for night-guards' cards. v2
 * rounds only the CARD itself (12px) and its T9 header; the other two headers
 * and every card's content block are square there.
 */
#product-cart-section.twv3-kit .card-content {
    border-radius: 0;
}

#product-cart-section.twv3-kit .product-card:not(.second-product-card) .card-top-header {
    border-radius: 0;
}

/*
 * THE STAINS BADGE. night-guards-react-inline.css L839 caps it at 260px and
 * centres its text. v2 lets the inline-block shrink to its label and leaves
 * text-align at the initial `start`, so "LIGHT STAINS" sits flush left.
 */
@media screen and (min-width: 768px) {
    #product-cart-section.twv3-kit .product-card .card-badge {
        max-width: none;
        text-align: initial;
    }
}

/*
 * THE RATING / APPLICATIONS / USAGE ROWS — the biggest visible gap. v2 insets
 * them 50px (20px under 1499px, 15px on mobile); night-guards-react-inline.css
 * L725 zeroes that padding through `.product-card:not(.second-product-card)`
 * (0,3,0), which outranks v2's `.product-card .product-selection-description`
 * (0,2,0) no matter the sheet order. So the rows — and the divider lines that
 * bracket them — ran the full width of the card, 40px wider than the design.
 *
 * Breakpoints mirror teeth-whitening-v2.css L376 / L3498 / L2844 + L4030.
 */
#product-cart-section.twv3-kit .product-card .product-selection-description {
    padding: 7px 50px 15px 50px;
}

@media only screen and (max-width: 1499px) and (min-width: 768px) {
    #product-cart-section.twv3-kit .product-card .product-selection-description {
        padding: 7px 20px 15px 20px;
    }
}

@media only screen and (max-width: 767px) {
    #product-cart-section.twv3-kit .product-card .product-selection-description {
        padding: 15px 15px 5px 15px;
    }
}

/*
 * THE STAR STRIP. night-guards-v3.css L1300 sets `.stars { font-size: 18px }`.
 * The stars are an IMG, so the only thing that buys is 5.6px of extra leading
 * on the line it sits on — which grew the Rating row. v2 inherits the row's
 * own 14px.
 */
#product-cart-section.twv3-kit .product-selection-description img.stars {
    font-size: inherit;
}

/*
 * THE PRICE BLOCK. night-guards-react-inline.css L734 puts
 * `padding-top: 20px !important` on `.price-box` (v2 has no `.price-box` rule
 * at all, so it is flush), and night-guards-v3.css L1755 rewrites
 * `.price-content` to `padding: 20px 0 0 !important`, dropping v2's 20px
 * bottom padding. Between them the card grew 20px and the price sat 20px low
 * inside it. `!important` is the only thing that beats `!important`.
 */
#product-cart-section.twv3-kit .price-box {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#product-cart-section.twv3-kit .price-content {
    padding: 20px 0 !important;
}

@media screen and (max-width: 767px) {
    /* v2 L4026 flattens the bottom padding on mobile. */
    #product-cart-section.twv3-kit .price-content {
        padding: 20px 0 0 !important;
    }
    .twv3-hero .subscription-tagline.widget-text{
        font-size: 10px !important;
    }
}

/*
 * THE TWO CTAs. night-guards-v3.css L1626 restyles `.add-to-cart-btn,
 * .buy-now-btn` as its own buttons — 8px radius, `width: 100%`, 600 weight and
 * a 10px bottom margin — and L1869 drops add-to-cart to 12px; night-guards-
 * react-inline.css L144 pushes both to 700. But on the whitening card these
 * classes are the WRAPPER divs; the buttons inside are `.btn-general` /
 * `.btn-black-blue`, already styled by v2 (L595, L602). So all of that only
 * rounded the wrappers and, via the wrapper's margin, opened a 10px gap under
 * Buy Now that the design does not have. v2's computed wrapper values:
 * square, auto width, 400 weight, 16px, and margin only under Add to Cart.
 */
#product-cart-section.twv3-kit .add-to-cart-btn,
#product-cart-section.twv3-kit .buy-now-btn {
    width: auto;
    border-radius: 0;
    /* v2 declares no type on these wrappers at any width — 16px on desktop and
       14px on mobile are both inherited — so inherit rather than re-state a
       number that would be wrong at the other breakpoint. */
    font-size: inherit;
    font-weight: inherit;
    margin-bottom: 0;
}

#product-cart-section.twv3-kit .add-to-cart-btn {
    margin-bottom: 10px;
}

/*
 * THE FINANCING LINE. night-guards-react-inline.css L748 takes
 * `.subscription-tagline.widget-text` (0,2,0) to weight 400, over v2's
 * `div.subscription-tagline` (0,1,1) 500.
 */
#product-cart-section.twv3-kit .subscription-tagline.widget-text {
    font-weight: 500;
}

/*
 * THE CARD ORDER. night-guards-react-inline.css L688 gives
 * `.third-product-card { order: 2 }` to pull its own third card forward. Here
 * the DOM order is already T3, T9, T6, so it changes nothing today — but it
 * would silently reorder the row if a fourth card were ever added, and v2
 * computes 0.
 */
#product-cart-section.twv3-kit .third-product-card {
    order: 0;
}

/*
 * SLIDER MODE (below 1026px the grid becomes a slick carousel — 2-up centred
 * on tablet, 1-up on phones). Three night-guards rules break slick's own
 * geometry here, and none of them applies on the v2 page:
 *
 *  - night-guards-v3.css L103 keeps `.product-slider-wrapper` `display: flex`
 *    from 768px up. slick.css makes an initialised slider `display: block` and
 *    v2 only turns it back into a flex row at 1026px and above — so on tablet
 *    v3 was laying slick's own .slick-list/.slick-track out as flex items.
 *  - L1983 pulls `.slick-list` out with `margin: 0 -10px`, which widens the
 *    list by 20px; slick sizes every slide from the list, so each card came
 *    out 10px too wide before the rule below even applied.
 *  - L1978-1982 then caps the slide at `max-width: 25% !important` with
 *    `width: 100% !important`, which is night-guards' own tablet 4-up feel.
 *    v2 leaves the slide at the inline width slick computed — 477px of a
 *    994px list at 1024px, against v3's 365px.
 *
 * `!important` can only be answered with `!important`, which rules out simply
 * deferring to slick's inline width. But with `infinite: false` and three
 * cards, slick's track is exactly 3 slides wide (`track = 3 x slideWidth`), so
 * `33.3333%` of the track IS slideWidth at every breakpoint and viewport —
 * no viewport arithmetic to drift out of step with the container.
 */
@media screen and (max-width: 1025px) {
    .twv3-kit .product-slider-wrapper.slick-initialized {
        display: block;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .twv3-kit .product-slider-wrapper.slick-initialized .slick-list {
        margin: 0;
    }

    .twv3-kit .product-slider-wrapper.slick-initialized .slick-slide {
        margin: 0;
        width: 33.3333% !important;
        max-width: none !important;
    }
}

/*
 * THE BLURB AT TABLET. teeth-whitening-v2.css L3811 drops the card blurb to
 * 10px under 992px; the ID-specificity re-assertion above (which exists to
 * beat night-guards' own `#product-cart-section .product-description p`) was
 * holding it at 12px, which cost the blurb a line of its 124px well.
 */
@media screen and (min-width: 768px) and (max-width: 992px) {
    #product-cart-section.twv3-kit .product-card .product-description p {
        font-size: 10px;
    }
}

/*
 * PHONES. Five more leaks that only show below 767px:
 *
 *  - night-guards-react-inline.css L2036 forces `.product-selection-description`
 *    `text-align: left !important`. v2 declares nothing there and the rows
 *    inherit the card's centred text, so `inherit` — not `center` — is what
 *    reproduces it.
 *  - L1990 scopes the section's bottom margin as `div#product-cart-section`
 *    (1,1,1) at 60px, under v2's `.main-products-wrapper` 120px (0,1,0).
 *  - L683 doubles slick's own 30px `.slick-dotted.slick-slider` margin to 60px.
 *  - L664-673 restyles the dots as 12px circles; v2 runs slick-theme's 20px
 *    squares.
 *  - and two of THIS sheet's own mobile rules, written for the hero and the
 *    other bands, land on the grid as well: `.price-content { min-height: 45px }`
 *    (v2: 70px) and the 26px heading clamp (v2: 30px).
 */
@media screen and (max-width: 767px) {
    #product-cart-section.twv3-kit .product-selection-description {
        text-align: inherit !important;
    }

    div#product-cart-section.twv3-kit {
        margin-bottom: 120px;
    }

    .twv3-kit .product-slider-wrapper.slick-slider {
        margin-bottom: 30px;
    }

    .twv3-kit .product-slider-wrapper .slick-dots li button {
        width: 20px;
        height: 20px;
        padding: 5px;
        border-radius: 0;
    }

    #product-cart-section.twv3-kit .price-content {
        min-height: 70px;
    }

    /* v2 leaves the slide at the inline width slick gave it. */
    #product-cart-section.twv3-kit .product-card {
        max-width: none;
    }

    .twv3-kit .choose-package-div h1 {
        font-size: 26px !important;
    }

    /*
     * THE HEIGHT CLAMP. teeth-whitening-v2.css L4015 caps the mobile slider at
     * `max-height: 791px` — the cards overflow it deliberately, and the dots
     * hang below on `bottom: -140px`. This sheet's own mobile block releases
     * that to `max-content !important`, which added 112px of empty section
     * below the cards here. Back to v2's clamp inside the borrowed grid only;
     * the release still stands for this page's other sliders.
     */
    /* .twv3-kit .product-slider-wrapper.slick-initialized.slick-slider.slick-dotted {
        max-height: 791px !important;
    } */

    /*
     * THE LAST DOT. app.css's `ul li:last-child { margin: 0 }` (0,1,2) is what
     * sets the final dot's margin on v2, over slick-theme's `.slick-dots li`
     * (0,1,1). night-guards-react-inline.css L664 re-states `margin: 0 5px` at
     * (0,2,1) and takes it back, which pushed the whole dot row 5px left.
     */
    .twv3-kit .product-slider-wrapper .slick-dots li:last-child {
        margin: 0;
    }
}

/*
 * THE FACTS SCROLLER. night-guards' own version of this band is a full-width
 * text block, so `.over-40million-americans p` carries
 * `padding: 0 115px; max-width: 970px; margin-left: auto`. teeth-whitening-v2.css
 * restyles that paragraph (font, colour, weight, line-height) but never
 * declares padding, max-width or margin — so those three applied unopposed and
 * left ~6px of usable width inside a 278px card. Every fact box rendered one
 * word per line, ~570px tall.
 *
 * This is the trap in sharing a class vocabulary: the properties BOTH sheets
 * declare resolve by sheet order and were all fine; the damage came from the
 * ones only night-guards declares.
 */
.twv3-kit.over-40million-americans p {
    padding: 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/*
 * ...and its two HEADINGS, from the same source. night-guards-v3.css L203-209
 * gives `.over-40million-americans h5` and `h6` `max-width: 970px` with
 * `margin-left: auto` and NO `margin-right`, so the block hugs the right edge
 * of the container — deliberate there, because that band's artwork sits down
 * the left. teeth-whitening-v2.css never declares either property on these
 * headings, so both applied unopposed and "INVEST IN THE GOOD STUFF!" and its
 * pink subhead sat 225px right of the slider they title (centre 975 against
 * the scroller's 750 in a 1420px container).
 *
 * Only bites above 1100px: below that night-guards' own media queries hand the
 * headings `margin: 0 auto` / `max-width: 86%`, which centre them anyway. The
 * reset is unconditional because it is a no-op at those widths — the container
 * is narrower than the max-width it removes.
 */
.twv3-kit.over-40million-americans h5,
.twv3-kit.over-40million-americans h6 {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/*
 * night-guards bleeds a large tooth render into the left of its version of this
 * band via `:before`. On a whitening page it is just a giant stray tooth over
 * the fact cards.
 */
.twv3-kit.over-40million-americans:before {
    display: none;
}

/* ---------------------------------------------------------------------------
 * 13. Reviews band.
 *
 * The card styling arrives from teeth-whitening-v2.css / the night-guards
 * sheets (both style `.review-cardss .card-box` identically). What is v3's own
 * is the BAND: the design is a light-pink ground with a dark heading, and both
 * source bands are the opposite — `.ntg-section5 .section-body.clients-logoes`
 * is #2d2e2f in v2 and #331f97 in night-guards, with
 * `.sec-heading-curious { color: #fff }`.
 *
 * The press-logo strip above keeps v2's strong pink, because it is still a
 * `.section-body.clients-logoes` block; only the reviews body below is light.
 * ------------------------------------------------------------------------ */
.twv3-reviews .twv3-reviews-body {
    background: #f8d8e8;
    padding: 45px 0 55px;
}

/* Dark on light, the inverse of both source bands. Specificity has to beat
   `.section-two .section-body .sec-heading-curious` (0,3,0). */
.twv3-reviews .twv3-reviews-body .sec-heading-curious {
    color: #2d2e2f;
}

/* `.ntg-section5` adds a 25px top margin for its own stacking; here the band
   sits flush under the HSA/FSA strip. */
.twv3-reviews.ntg-section5 {
    margin-top: 0;
}

/*
 * The strip's pink. `.section-two .section-body.clients-logoes` is #fa319e in
 * teeth-whitening-v2.css, but that sheet ALSO has
 * `.ntg-section5 .section-body.clients-logoes { background: #2d2e2f }` for the
 * v2 page's own dark reviews band — and this section carries `ntg-section5` for
 * its card padding. Equal specificity, later in the sheet, so the dark won and
 * the strip came out charcoal. Restated here, plus its own vertical rhythm:
 * `.clients-logoes` alone is 2rem top and bottom, a lot for one row of logos.
 */
.twv3-reviews .section-body.clients-logoes {
    background: #fa319e;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

/*
 * The reviews CTA is TEAL in the design, and that takes an explicit override:
 * `btn-seegreen` is #68c8c7 in night-guards-v3.css but teeth-whitening-v2.css
 * redefines `html body .btn-seegreen` as brand pink, and v2 loads later — so on
 * this lander the class alone gives pink, the same as every other CTA here.
 *
 * Scoped to the lander root so it outranks `html body …` (0,2,2) without
 * `!important`, and confined to this band — every other CTA on the page stays
 * pink.
 */
#sb-react-twv3-root .twv3-reviews .btn-seegreen {
    background: #68c8c7;
    border-color: #68c8c7;
}

#sb-react-twv3-root .twv3-reviews .btn-seegreen:hover {
    background: #4fb3b2;
    border-color: #4fb3b2;
}

/* ---------------------------------------------------------------------------
 * 14. FAQ.
 *
 * The FAQ markup is Visual Composer + Ultimate-FAQ output, so almost all of its
 * styling arrives from ewd-ufaq.css (enqueued by the gate) plus the
 * `.ewd-ufaq-*` and `#faq-id` blocks that teeth-whitening-v2.css and the
 * night-guards sheets both carry.
 *
 * Two gaps, both because v3 does not link
 * assets/css/teeth-whitening-trays-react-inline.css — that sheet is v1's inline
 * <style> block for the v2 page, and pulling it in would also bring
 * `.have-dental-btn{display:none}` and a body-class rule for a product page
 * this lander is not. So the rules that matter are restated here.
 * ------------------------------------------------------------------------ */

/* The CTA's pink ground under the accordion. */
.twv3-faq .see-geha-btn-bg {
    background-color: #fcf0f8;
    padding-bottom: 4rem;
}

/* VC leaves empty <p> between rows, which otherwise add ~20px each. */
.twv3-faq p:empty {
    display: none;
}

/*
 * Chevron colour. night-guards-react-inline.css sets
 * `.ewd-ufaq-faq-title .ewd-ufaq-post-margin-symbol span { color: #4acac9
 * !important }` (teal) and teeth-whitening-v2.css only counters it under a
 * `.night-guard-faq` ancestor this lander does not have — so the arrows come
 * out teal against a pink design. `!important` is the only thing that beats
 * `!important`, and the lander-root scope keeps it off every other page.
 */
#sb-react-twv3-root .twv3-faq .ewd-ufaq-faq-title .ewd-ufaq-post-margin-symbol span {
    color: #fa319e !important;
}

/* ---------------------------------------------------------------------------
 * 15. "Life Stains" before-footer band.
 *
 * The band is injected HTML and brings its own <style>, so it needs no styling
 * from here — with ONE exception. Its own rule for the CTA is
 * `.partnership-banner-bottom .our-people-promise button { background:#4acac9 }`
 * at (0,3,1), and section 11 above recolours `.btn-primary-teal` page-wide from
 * `#sb-react-twv3-root` at (1,1,0) — an ID beats three classes, so v3's pink
 * won and the button came out pink against a design that shows it teal.
 *
 * Restated with the lander root in front so it outranks that override rather
 * than carving an exception into it.
 * ------------------------------------------------------------------------ */
#sb-react-twv3-root .partnership-banner-bottom .our-people-promise button {
    background: #4acac9;
    border-color: #4acac9;
    color: #fff;
}

#sb-react-twv3-root .partnership-banner-bottom .our-people-promise button:hover {
    background: #3aa9a8;
    border-color: #3aa9a8;
}

/* ---------------------------------------------------------------------------
 * 16. Hero, matched to the PSD.
 *
 * The hero inherits night-guards' TEAL selection language (#4acac9) and its
 * navy bullet emphasis (#24156e). The whitening design is pink throughout, so
 * every one of those is restated here. Each rule mirrors the night-guards
 * selector it overrides, including the `#wrapper` prefix — that is (1,2,0) and
 * cannot be beaten by a plain class, which is why these carry `.twv3-hero` on
 * top rather than being written short.
 * ------------------------------------------------------------------------ */

/* -- Bullets -------------------------------------------------------------- */

/* Emphasis inside a bullet is pink, not night-guards' navy. */
.twv3-hero .benefit-item strong {
    color: #fa319e;
}

/* Bullet 3 is dark and bold. Keyed on its own class — see the note in
   sections/TraysHero.jsx for why a structural selector was wrong here. */
.twv3-hero .benefit-item .twv3-benefit-dark {
    color: #2d2e2f;
}

/* The badge sits closer to its line than night-guards' 27px icon did. */
.twv3-hero .benefit-item img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.twv3-hero .benefit-item {
    gap: 12px;
    margin-bottom: 12px;
}

.twv3-hero .benefit-item span:not(.checkmark) {
    padding-left: 0;
}

/* -- Sensitivity pills ---------------------------------------------------- */

#wrapper .twv3-hero .thickness-option.selected {
    border: 2px solid #fa319e;
    background: #fff;
}

#wrapper .twv3-hero .thickness-option input[type="radio"]:checked + .option-text::before {
    border-color: #fa319e;
    background: #fa319e;
}

/* -- Package cards -------------------------------------------------------- */

#wrapper .twv3-hero .package-option.selected {
    border-color: #fa319e;
    background: #fdeaf4;
    box-shadow: 0 0 0 1px #fa319e;
}

#wrapper .twv3-hero .package-option:hover {
    border-color: #fa319e;
    background: #fdeaf4;
}

#wrapper .twv3-hero .package-option input[type="radio"]:checked + .package-content::before {
    background: #fa319e;
}

/*
 * The image column: night-guards reserves `min-width:45%` for four guard
 * thumbnails. The design gives the whitening kit a generous image well with the
 * title starting at a FIXED x on all three rows.
 *
 * 134px = 38px radio gutter + 88px of photo + 8px right padding. The WIDTH is
 * derived from the height cap below, not chosen: this column is the tallest
 * thing in the row, so it is what sets the row height, and the design's row is
 * short.
 *
 * There is width to spare — the title wants 266px on one line and the subtitle
 * 278px, and at 134px the details column gets a 352px content box. The binding
 * constraint here is HEIGHT; it was the other way round while the photo was
 * allowed to be 62px tall in a 177px column.
 *
 * FIXED width, not `flex: 0 0 auto` content sizing. Height-capped, the five
 * shots come out 56-88px wide (t9 non-sensitive is 339x169, t3 is 280x220), so
 * content sizing started each tier's title at a different x AND shifted the
 * title sideways when the shopper toggled sensitivity.
 */
.twv3-hero .guards-images {
    flex: 0 0 134px;
    width: 134px;
    min-width: 200px;
    max-width: 134px;
    gap: 0;
    /*
     * 38px of left padding is the floor: night-guards puts the radio at
     * `left:15px` with a 20px box, so anything less runs the photo under it.
     *
     * The 6px VERTICAL padding is load-bearing on the ROW HEIGHT — the row is
     * `photo + 2x this + 4px of border`. night-guards' own 18px would put it
     * back over 80px.
     */
    padding: 6px 8px 6px 38px;
    /* The shorter non-sensitive shots centre in the row rather than being
       stretched by flex's default `stretch`. */
    align-items: center;
    justify-content: flex-start;
}

/*
 * BOTH caps matter, and the HEIGHT one sets the row height.
 *
 * The design's row is ~57px. Scaled off the reference crop by its subtitle
 * width (~308px there against 270-278px here, so the crop is ~1.12x our CSS
 * px), its 64px row is ~57 CSS px. The text block is only 35px tall (title 18 +
 * subtitle 15 + 2px margin), so the PHOTO is what has to give: 44px + 2x6px of
 * column padding + 4px of border lands the row at ~60px.
 *
 * The five shots are 280x220 (t3, both), 306x203 / 314x177 (t6) and
 * 340x203 / 339x169 (t9) — ratios 1.27 to 2.00. Capping width alone made every
 * row a different height AND made a row jump height when the shopper toggled
 * sensitivity, because the non-sensitive shots are the shorter ones. 88px is
 * the width the widest of them needs at a 44px height cap.
 */
.twv3-hero .guards-images img {
    max-width: 95px;
    max-height: 55px;
}

/*
 * Card title on ONE line, which is how the design has it. It needs ~286px and
 * at a 1440 viewport the details column only had 257px — the shortfall is why
 * the images column above is trimmed and why this drops a point from
 * night-guards' 14px. Measured at 1440, the narrowest desktop that matters;
 * the PSD is drawn on a wider canvas where 14px fits.
 */
.twv3-hero .package-title {
    font-size: 13px;
}

/* ~10px of slack for the title above, which otherwise fit by exactly 0px at
   1440. Deliberately NOT `white-space: nowrap`: if the copy ever outgrows the
   column, wrapping to two lines is a far better failure than overflowing the
   card, and the harness asserts the one-line result so a regression is loud. */
.twv3-hero .package-details {
    padding-right: 6px;
}

/*
 * Mobile. night-guards drops the radio gutter to 32px under 1024px and shrinks
 * its thumbnails to 32px / 24px at 415px, so the kit photo has to come down
 * with the card or it eats the title's column. The `%`-free widths keep the
 * three titles aligned at every width, same reason as the desktop rule.
 */
@media screen and (max-width: 1024px) {
    .twv3-hero .guards-images {
        flex-basis: 124px;
        width: 124px;
        min-width: 124px;
        max-width: 124px;
        padding: 6px 8px 6px 32px;
    }

    .twv3-hero .guards-images img {
        max-width: 84px;
        max-height: 42px;
    }
}

@media screen and (max-width: 415px) {
    .twv3-hero .guards-images {
        flex-basis: 104px;
        width: 104px;
        min-width: 104px;
        max-width: 104px;
        padding: 5px 4px 5px 30px;
    }

    .twv3-hero .guards-images img {
        max-width: 70px;
        max-height: 36px;
    }
}

/* NOTE: `.twv3-plus` — the "+" that separated the whitening and desensitizing
   gels — is gone with the composite it belonged to. Each row is one kit photo
   now, the same one the product card for that tier shows. */


/*
 * Active thumbnail. night-guards rings it teal; every other selection
 * affordance in this hero is now pink, so this follows for consistency.
 *
 * NOTE this one is a judgement call, not a spec: the PSD draws the thumbnails
 * as five solid cyan placeholder squares, so it says nothing about the active
 * state. Easy to flip back if the cyan was deliberate.
 */
.twv3-slider .slider-nav .nav-item.active .thumbnail-placeholder {
    border-color: #fa319e !important;
    box-shadow: 0 2px 8px rgba(250, 49, 158, 0.35);
}

.twv3-slider .slider-nav .nav-item:hover .thumbnail-placeholder {
    border-color: rgba(250, 49, 158, 0.45);
}

/* ---------------------------------------------------------------------------
 * 17. Badge row + star size, per the PSD crop.
 *
 * night-guards pads `.in-stock` `5px 24px` and `.category` `6px 15px` — two
 * different paddings, so "IN STOCK" (8 characters) rendered 101x24 while
 * "Cosmetics" (9 characters) rendered 87x26. The design has all three pills
 * uniform, with "IN STOCK" the NARROWEST of the three. Unified here.
 * ------------------------------------------------------------------------ */
.twv3-hero .stock-badge .in-stock,
.twv3-hero .stock-badge .category {
    padding: 5px 15px;
    line-height: 1.3;
    border-radius: 20px;
}

/*
 * Stars. night-guards sets `.stars { font-size: 18px }`, which renders the five
 * glyphs 80px wide — visibly heavier than the design, where the row sits close
 * to the height of the "4.9 (…Reviews)" text beside it.
 */
.twv3-hero .product-rating .stars {
    font-size: 14px;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
 * 18. Price block on a SALE segment.
 *
 * Everything below only shows up once a segment actually has a discount
 * (all_users does not), which is why it needed a `geha_user=yes` cookie to see.
 * Four things were wrong against the design.
 * ------------------------------------------------------------------------ */

/*
 * 1. The discount chip. night-guards renders it at 25px/300, which is nearly as
 *    large as the price itself; the design has it noticeably smaller and
 *    sitting on the price's baseline.
 */
.twv3-hero .percent-off-text {
    font-size: 18px;
    font-weight: 600;
    align-self: flex-end;
    margin-bottom: 2px;
}

/*
 * 2. The struck original price. The design goes straight from the price to the
 *    savings line, and this element was also drawing a stray rule to the left
 *    of the number. Hidden rather than removed — it stays in the DOM (with its
 *    #cut-off-price id) for anything keyed on it, and "You Save $X" already
 *    carries the same information.
 */
.twv3-hero .price-content .cut-off-price {
    display: none !important;
}

/*
 * 3. The savings line. 12px bold was overrunning its column; the design's is
 *    small and quiet with only the amount emphasised (see the note in
 *    sections/TraysHero.jsx for the <span> that was making all of it magenta).
 */
.twv3-hero .subscription-tagline.widget-text {
    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
    color: #565759;
    /* night-guards puts an `italic` class on this line; the design's is upright. */
    font-style: normal;
}

.twv3-hero .subscription-tagline.widget-text b {
    font-weight: 700;
}

/*
 * 4. THE ONE THAT ACTUALLY BROKE LAYOUT. `.title-and-price` is a flex row of
 *    title + price, and on a sale segment the savings copy made the price
 *    column 259px wide — enough to squeeze the title onto THREE lines where the
 *    design has two. Cap the price column and let the title keep the rest.
 */
.twv3-hero .title-and-price .price-section-wrapper {
    flex: 0 0 auto;
    /*
     * A CAP, not a fixed width. Fixing it at 200px fixed the sale segment and
     * broke the plain one: with no savings copy this column is only ~77px, so
     * forcing 200px took 123px off the title and wrapped it to three lines at
     * 1440. max-width lets it stay narrow when there is nothing to say and
     * clamps it when there is.
     *
     * A PERCENTAGE, not px: measured at 1440 the block is 480px, the title
     * drops to 26px and "Teeth Whitening Trays" needs 307px — so the price
     * column has to stay under ~170px there, while at 1600 (block 605px, title
     * 30px, line 2 needs ~354px) it can take 200px+. 33% satisfies both.
     */
    max-width: 33%;
}

.twv3-hero .title-and-price .product-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
 * 19. Price column alignment.
 *
 * The design stacks HSA/FSA, the price row and the savings line on one flush
 * RIGHT edge. night-guards centres the middle two — `.price-content` is
 * `justify-content: center` and `.subscription-tagline` is
 * `text-align: center` — so measured inside the 200px column the three right
 * edges sat at 193 / 160 / 178 instead of lining up.
 * ------------------------------------------------------------------------ */
.twv3-hero .price-section-wrapper {
    padding-right: 0;
    text-align: right;
}

.twv3-hero .price-content {
    justify-content: flex-end;
    padding-right: 0;
}

.twv3-hero .real-price {
    text-align: right;
}

.twv3-hero .subscription-tagline.widget-text {
    text-align: right;
}

/* The badge box carries `padding: 0 7px 0 0`, which held the image 7px shy of
   the edge the other two lines now reach. (Not a whitespace text node — JSX
   emits none here; measured it before assuming.) */
.twv3-hero .hsa-fsa-logo {
    text-align: right;
    padding-right: 0;
}


/* ---------------------------------------------------------------------------
 * 20. MOBILE SECTION ORDER — night-guards'.
 *
 * Live night-guards does NOT show its bands in one sequence at both widths: its
 * v1 template interleaves the breakpoints, shipping the eligibility, press-logo
 * strap, reviews and promise bands TWICE (a `.mobile-hidden` half and a
 * `.desktop-hidden` half) at different points in the document. On a phone that
 * puts eligibility and the reviews straight after the mobile accordion and
 * drops Our Promise BELOW them, above the stat band and the product grid:
 *
 *   hero → logos → accordion → eligibility → logo strap → reviews →
 *   promise → stat band → products → FAQ
 *
 * v3 has the same ten bands, in the same DESKTOP order already, but each exists
 * exactly once: one Promise, one HSA/FSA band, one Reviews (one slick carousel,
 * one `#section-review` anchor, and its press-logo strip is inside it — so it
 * covers night-guards' strap + reviews pair in a single slot). Duplicating them
 * the way night-guards does would mean two carousels and a duplicate id, so the
 * mobile order is done here instead.
 *
 * HOW: the lander root is `display:flex;flex-direction:column` (set inline in
 * single-product-teeth-whitening-trays-v3-react.php, and the reason each
 * section is its own BFC), so every slot is a flex item and `order` moves it
 * with no change to the tree. TeethWhiteningV3Page.jsx puts a `twv3-slot--*`
 * class on each boundary div for exactly this.
 *
 * 768px is the breakpoint because it is where the detail body swaps layouts —
 * `.mobile-accordion-section` is display:block and `.product-tabs-section`
 * display:none at ≤768px (night-guards-react-inline.css L1348/L1379). Above it
 * nothing here applies and the tree order stands.
 *
 * EVERY child needs a value, including the ones that are only incidentally in
 * flow: an unlisted flex item keeps `order:0` and would jump to the very top.
 * The two Cards halves and the popup/modal roots are addressed by their own
 * ids/classes because those components render straight into the root (Cards
 * returns a fragment of two siblings), not through a boundary div.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* 1 — hero (also the pre-paint copy, before React swaps it in) */
    #sb-react-twv3-root > .twv3-hero {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    /* 2 — trust bar. Stays directly under the hero so `.blusc1`'s -50px
       margin-top still overlaps the thing it was drawn against. */
    #sb-react-twv3-root > .twv3-slot--trust {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    /* 3 — the Forbes badge as its own band. Mobile only; on desktop the badge
       renders inside Our Promise instead. @see §21 */
    #sb-react-twv3-root > .twv3-slot--award {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    }

    /* 4 — detail body. Both halves share one value: only the accordion has
       height here, and keeping them adjacent means neither can land between
       two other bands if the breakpoints ever drift apart. */
    #sb-react-twv3-root > .twv3-slot--body {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
    }

    /* 5 — HSA/FSA band, up from below the package grid */
    #sb-react-twv3-root > .twv3-slot--eligible {
        -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
        order: 5;
    }

    /* 6 — press-logo strip + review carousel, also up from below the grid */
    #sb-react-twv3-root > .twv3-slot--reviews {
        -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
        order: 6;
    }

    /* 7 — Our Promise, down from directly under the trust bar */
    #sb-react-twv3-root > .twv3-slot--promise {
        -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
        order: 7;
    }

    /* 8 — "invest in the good stuff" facts scroller (night-guards' stat band) */
    #sb-react-twv3-root > .twv3-slot--facts {
        -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
        order: 8;
    }

    /* 9 + 10 — the package grid, whose two halves are direct children:
       `#product-list` is the heading block every "Get Pricing" CTA targets and
       `#product-cart-section` is the card slider under it. Consecutive values,
       so they stay a single band. */
    #sb-react-twv3-root > #product-list {
        -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
        order: 9;
    }

    #sb-react-twv3-root > #product-cart-section {
        -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
        order: 10;
    }

    /* 11 — FAQ */
    #sb-react-twv3-root > .twv3-slot--faq {
        -webkit-box-ordinal-group: 12;
        -ms-flex-order: 11;
        order: 11;
    }

    /* Out of flow, but still a flex item, so it still needs a value — without
       one it would sit at order:0, i.e. above the hero. The card popups are
       position:fixed and paint nowhere near here; the before-footer band has to
       stay last.

       `.video-modal` was in this selector too until it moved: VideoModal.jsx
       now portals itself to <body> so it can clear the chrome header's stacking
       context, which takes it out of this flex container entirely. */
    #sb-react-twv3-root > .pop-up-wrapper {
        -webkit-box-ordinal-group: 13;
        -ms-flex-order: 12;
        order: 12;
    }

    #sb-react-twv3-root > .twv3-slot--before-footer {
        -webkit-box-ordinal-group: 14;
        -ms-flex-order: 13;
        order: 13;
    }
}
@media screen and (max-width:767px){
    .twv3-reviews .section-body.clients-logoes {
    padding-top: 0.2rem;
}
.elegible h4 {
    font-size: 14px !important;
}
}
/* ---------------------------------------------------------------------------
 * 21. The Forbes badge's two homes.
 *
 * `<AwardBadge />` renders in two places and exactly one is ever displayed:
 * inside Our Promise on desktop (where the comp puts it, indented under the
 * four promises) and as its own band above the detail accordion on mobile.
 *
 * The swap is at 768px — the SAME breakpoint as §20, deliberately, so the
 * badge cannot end up shown twice or not at all in the 1px seam that the
 * theme's own `.mobile-hidden` / `.desktop-hidden` pair leaves at 767/768.
 * Do not reach for those utilities here for that reason.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    .twv3-promise .twv3-award-badge--inline {
        display: none;
    }
}

@media (min-width: 769px) {
    #sb-react-twv3-root > .twv3-slot--award {
        display: none;
    }
}

/*
 * The band copy. It sits on the white the accordion starts with, between the
 * trust bar above and the first accordion row below, and it is CENTRED —
 * the 95px indent in §7 is a `.twv3-promise`-scoped rule and correctly does
 * not reach here, but night-guards' bare `.rating-badge` does, and that ships
 * `margin-left: -30px` to compensate for a logo this copy does not render.
 * Left as-is it pulls the badge 30px left of centre.
 */
#sb-react-twv3-root > .twv3-slot--award {
    background: #fff;
}

#sb-react-twv3-root > .twv3-slot--award .twv3-award-badge--band {
    margin-left: 0;
    padding: 24px 15px 4px;
    text-align: center;
}

#sb-react-twv3-root > .twv3-slot--award .twv3-forbes-mark {
    margin: 0 auto;
}