/* ==================================================================
 * Standalone page compatibility
 *
 * Some pages (BioLean) were designed as complete stand-alone HTML with their
 * own stylesheet. On this site they also receive style.css and shop.css, and
 * those files use some of the same class names for different things:
 *   .abc-panel  is the white checkout card here, an invisible container there
 *   .abc-tag    is a pill here, plain text there
 *   [data-sec]  pads every section here, the sample's split sections have none
 * product-page.php wraps any page that carries its own <style> in
 * .abc-standalone, and these rules put the sample's own values back inside it.
 *
 * Generated by comparing every element of the rendered page against the
 * sample file on its own. :where() keeps each selector's specificity low, so
 * the page's own stylesheet - which loads after this one - still wins.
 * Loaded separately from style.css so a new style.css from the design team
 * does not wipe it out.
 * ================================================================== */

:where(.abc-standalone) section.section-flex-rel-1{padding-top:0px;padding-bottom:0px;gap:normal}
:where(.abc-standalone) div.div-3{margin-right:0px}
:where(.abc-standalone) p.abc-brand-hero{display:block;color:rgb(233, 201, 168);gap:normal;letter-spacing:2.64px;font-size:12px;font-weight:400}
:where(.abc-standalone) h1.h1-1{letter-spacing:normal}
:where(.abc-standalone) em.em-1{letter-spacing:normal;font-weight:500}
:where(.abc-standalone) p.abc-herolead.p-6{margin-top:0px}
:where(.abc-standalone) p.abc-herokick{color:rgb(233, 201, 168);letter-spacing:normal;font-weight:400}
:where(.abc-standalone) a.btn-link{gap:normal;font-weight:400}
:where(.abc-standalone) section.section-grid-1{border-top-style:none;border-bottom-style:none;background-color:rgba(0, 0, 0, 0);gap:normal}
:where(.abc-standalone) h2.h2-1{margin-top:0px;letter-spacing:normal}
:where(.abc-standalone) em.em-3{letter-spacing:normal;font-weight:500}
:where(.abc-standalone) p.p-11{margin-top:0px}
:where(.abc-standalone) p.abc-sub{text-transform:none;letter-spacing:normal;font-weight:400}
:where(.abc-standalone) div.div-flex-13{display:block;gap:normal}
:where(.abc-standalone) div.div-flex-13 > a.btn-link{display:inline-block}
:where(.abc-standalone) h2.h2-3{margin-top:10px;letter-spacing:normal}
:where(.abc-standalone) div.abc-step3-card{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}
:where(.abc-standalone) div.abc-step3-body > h3{letter-spacing:normal}
:where(.abc-standalone) div.abc-tier-card > h3{letter-spacing:normal}
:where(.abc-standalone) div.abc-tier-card.is-mid > h3{letter-spacing:normal}
:where(.abc-standalone) button.abc-choice > h3{letter-spacing:normal}
:where(.abc-standalone) div.abc-home-card > h3{letter-spacing:normal}
:where(.abc-standalone) p{margin-top:0px}
:where(.abc-standalone) p.abc-stage-kick{max-width:none}
:where(.abc-standalone) div.abc-tier-card{padding-top:32px;padding-right:28px;padding-bottom:32px;padding-left:28px}
:where(.abc-standalone) div.abc-tier-card.is-mid{padding-top:32px;padding-right:28px;padding-bottom:32px;padding-left:28px}
:where(.abc-standalone) section.abc-hero-split.abc-watch{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}
:where(.abc-standalone) div.abc-hs-media{max-width:none}
:where(.abc-standalone) h2{letter-spacing:normal}
:where(.abc-standalone) em{letter-spacing:normal}
:where(.abc-standalone) h2 > em{font-weight:500}
:where(.abc-standalone) p.abc-hs-lead{margin-top:0px}
:where(.abc-standalone) section.abc-bodyh.abc-hero-split{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}
:where(.abc-standalone) svg.abc-eq-ic{max-width:none}
:where(.abc-standalone) p.abc-kb-b{margin-top:0px}
:where(.abc-standalone) div.abc-know3-card{padding-top:8px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none}
:where(.abc-standalone) p.abc-j3-d{margin-top:0px}
:where(.abc-standalone) div.abc-step{display:block}
:where(.abc-standalone) p.abc-loc-label{max-width:none;letter-spacing:2.3px;font-size:11.5px}
:where(.abc-standalone) div.abc-pkg-card.abc-tier-pill{padding-top:13px;padding-right:12px;padding-bottom:13px;padding-left:12px}
:where(.abc-standalone) p.abc-pkg-n{max-width:none;font-size:21px}
:where(.abc-standalone) p.abc-pkg-p{margin-top:0px;max-width:none;font-size:14px}
:where(.abc-standalone) p.abc-pkg-d{margin-top:0px;max-width:none;font-size:13px}
:where(.abc-standalone) p.abc-hint{max-width:none;font-size:14px}
:where(.abc-standalone) span.abc-tag{display:inline;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-color:rgba(0, 0, 0, 0)}
:where(.abc-standalone) div.abc-panel{margin-bottom:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;background-color:rgba(0, 0, 0, 0);overflow-x:visible;overflow-y:visible}
:where(.abc-standalone) div.abc-home-card{padding-top:32px;padding-right:34px;padding-bottom:32px;padding-left:34px;margin-right:100px;margin-left:100px}
:where(.abc-standalone) button.abc-search.btn-link{gap:normal}
:where(.abc-standalone) a.abc-celink{display:inline;padding-bottom:0px;margin-top:0px;border-bottom-width:0px;border-bottom-style:none;font-size:15px}

/* Stronger resets, for places where style.css/shop.css use a more specific
   selector than the :where() rules above can beat. */
.abc-standalone div.div-rel-2 > div.div-3{margin-right:0px}
.abc-standalone div.div-3 > p.abc-brand-hero{color:rgb(233, 201, 168);font-size:12px}
.abc-standalone div.div-3 > p.abc-herokick{color:rgb(233, 201, 168)}
.abc-standalone section.section-grid-1{background-color:rgba(0, 0, 0, 0);border-bottom-style:none;border-top-style:none;gap:normal}
.abc-standalone div.abc-step3-body > p{margin-top:0px}
.abc-standalone div.abc-hs-text > p.abc-brand-hero{color:rgb(233, 201, 168);font-size:12px}
.abc-standalone div.abc-flow-i > p{margin-top:0px}
.abc-standalone button.abc-choice > p{margin-top:0px}
.abc-standalone [data-acc-body]{display:block;padding:0}
.abc-standalone [data-acc-btn] > span:first-child{font-size:16.5px}

/* Pages that bring their own script (about.php, club.php) open their FAQ by
   animating max-height. style.css hides [data-acc-body] outright for the
   site's own accordion, so the page's script measures a hidden element,
   gets a height of 0, and the answer never appears. */
[data-own-js] [data-acc-body]{display:block;padding:0}
/* style.css also pads that element, and padding still shows when the panel
   is collapsed to max-height:0, leaving a sliver under every question. */

/* about.php, pass 1 */
[data-own-js="about"] section.section-flex-rel-1{gap:normal}
[data-own-js="about"] video.abc-hero-bgvideo{position:static}
[data-own-js="about"] div.div-rel-2{padding-top:120px;padding-right:24px;padding-bottom:80px;padding-left:24px}
[data-own-js="about"] div.div-3 > p{line-height:19.2px}
[data-own-js="about"] h1.h1-1{margin-top:0px}
[data-own-js="about"] h1.h1-1 > em{color:rgb(233, 205, 191)}
[data-own-js="about"] em{font-weight:500}
[data-own-js="about"] p.abc-herolead{margin-top:0px;color:rgba(255, 255, 255, 0.86);line-height:28.8px}
[data-own-js="about"] p.abc-herokick{color:rgb(233, 205, 191);font-weight:400;line-height:38.4px;letter-spacing:normal}
[data-own-js="about"] div.div-flex-3{align-items:normal}
[data-own-js="about"] a.btn-link{gap:normal}
[data-own-js="about"] p.brandline{line-height:35.2px}
[data-own-js="about"] p.lead-serif{margin-top:0px}
[data-own-js="about"] p.body-lg{margin-top:0px;line-height:27.2px}
[data-own-js="about"] p.ice-lbl{line-height:18.4px}
[data-own-js="about"] p.ice-note{line-height:30.4px}
[data-own-js="about"] div.qhead > p{line-height:19.2px}
[data-own-js="about"] h2{margin-top:0px}
[data-own-js="about"] div.q-old.qcard{padding-top:44px;padding-right:40px;padding-bottom:44px;padding-left:40px;background-color:rgba(0, 0, 0, 0)}
[data-own-js="about"] div.q-new.qcard{padding-top:44px;padding-right:40px;padding-bottom:44px;padding-left:40px}
[data-own-js="about"] p.qfoot{color:rgba(255, 255, 255, 0.8);line-height:28.8px}
[data-own-js="about"] h2.h2-3{margin-top:0px}
[data-own-js="about"] div.why-c > p{line-height:24px}
[data-own-js="about"] div > p{line-height:19.2px}
[data-own-js="about"] p.trust-lead{margin-top:0px;line-height:28.8px}
[data-own-js="about"] div.checks > h3{font-family:Inter, system-ui, -apple-system, sans-serif;line-height:19.2px}
[data-own-js="about"] p.checks-foot{line-height:22.4px}
[data-own-js="about"] div.flow-col.flow-in > h3{font-family:Inter, system-ui, -apple-system, sans-serif;line-height:19.2px}
[data-own-js="about"] div.flow-col.flow-out > h3{font-family:Inter, system-ui, -apple-system, sans-serif;line-height:19.2px}
[data-own-js="about"] p.flow-note{line-height:22.4px}
[data-own-js="about"] section.section-3{position:static}
[data-own-js="about"] div.abc-ab-grid{margin-top:0px}
[data-own-js="about"] div.abc-ab-card{padding-top:32px;padding-right:26px;padding-bottom:32px;padding-left:26px}
[data-own-js="about"] div.abc-ab-card > h3{line-height:51.2px;letter-spacing:normal}
[data-own-js="about"] div.abc-ce-stats{gap:normal;padding-top:0px}
[data-own-js="about"] span{font-weight:400}
[data-own-js="about"] div.abc-ce-stat > span{letter-spacing:normal;text-transform:none}
[data-own-js="about"] section.section-grid-1{gap:normal;align-items:normal}
[data-own-js="about"] div.div-flex-6{align-items:normal;gap:normal}
[data-own-js="about"] div.div-flex-6 > p{line-height:19.2px}
[data-own-js="about"] h2.h2-1{margin-top:0px}
[data-own-js="about"] p.p-11{margin-top:0px}
[data-own-js="about"] p.p-22{line-height:19.2px}
[data-own-js="about"] p.p-23{margin-top:0px;line-height:24px}
[data-own-js="about"] div.div-flex-13{align-items:normal}
[data-own-js="about"] div.div-flex-13 > a.btn-link{text-align:start}
[data-own-js="about"] div.abc-ladder{padding-top:0px;margin-top:0px;text-align:start}
[data-own-js="about"] div.abc-ladder-i{text-align:start}
[data-own-js="about"] div.abc-ladder-i > h3{line-height:48px;letter-spacing:normal;text-align:start}
[data-own-js="about"] div.abc-ladder-i > p{text-align:start}
[data-own-js="about"] div.wrap > p{line-height:19.2px}
[data-own-js="about"] div.div-flex-12{align-items:normal;gap:normal}
[data-own-js="about"] div.div-flex-12 > p{line-height:19.2px}
[data-own-js="about"] h2.h2-5{margin-top:0px}
[data-own-js="about"] p.p-37{margin-top:0px;font-size:18px;line-height:28.8px}
[data-own-js="about"] div.div-flex-15{align-items:normal}
[data-own-js="about"] div.div-flex-15 > a.btn-link{text-align:start}
[data-own-js="about"] div.div-flex-24{display:block;align-items:normal;gap:normal;margin-top:30px}
[data-own-js="about"] span.txt-1{display:inline}
[data-own-js="about"][data-own-js="about"] p.abc-herolead{color:rgba(255, 255, 255, 0.86);line-height:28.8px}
[data-own-js="about"][data-own-js="about"] p.abc-herokick{color:rgb(233, 205, 191);line-height:38.4px}
[data-own-js="about"][data-own-js="about"] p.lead-serif{line-height:43.52px}
[data-own-js="about"][data-own-js="about"] p.qfoot{line-height:28.8px}
[data-own-js="about"][data-own-js="about"] p.trust-quote{line-height:32.4px}
[data-own-js="about"][data-own-js="about"] p.flow-note{line-height:22.4px}
[data-own-js="about"][data-own-js="about"] div.abc-ab-card > p{line-height:24px}
[data-own-js="about"][data-own-js="about"] p.p-11{line-height:28.8px}
[data-own-js="about"][data-own-js="about"] div.abc-ladder-i > p{line-height:24px}
[data-own-js="about"][data-own-js="about"] p.p-37{line-height:28.8px}

/* club.php, pass 1 */
[data-own-js="club"] section.section-flex-rel-1{gap:normal}
[data-own-js="club"] video.abc-hero-bgvideo{position:static}
[data-own-js="club"] div.div-rel-2{padding-top:120px;padding-right:24px;padding-bottom:80px;padding-left:24px}
[data-own-js="club"] div.div-3 > p{line-height:19.2px}
[data-own-js="club"] h1.h1-1{margin-top:0px}
[data-own-js="club"] h1.h1-1 > em{color:rgb(233, 205, 191)}
[data-own-js="club"] em{font-weight:500}
[data-own-js="club"] p.abc-herolead{margin-top:0px;color:rgba(255, 255, 255, 0.86);line-height:28.8px}
[data-own-js="club"] div.div-flex-3{align-items:normal}
[data-own-js="club"] a.btn-link{gap:normal;text-align:start}
[data-own-js="club"] section.abc-story{display:block;flex-direction:row;gap:normal;border-top-width:0px;border-top-style:none;border-top-left-radius:0px}
[data-own-js="club"] h2.h2-3{margin-top:0px}
[data-own-js="club"] section.section-3{position:static}
[data-own-js="club"] div.abc-cngrid{margin-top:0px;border-top-width:0px;border-top-style:none}
[data-own-js="club"] a.abc-cn{align-items:normal;position:static;overflow-x:visible}
[data-own-js="club"] span.abc-cn-k{line-height:17.6px}
[data-own-js="club"] span.abc-cn-h{margin-top:0px;letter-spacing:normal}
[data-own-js="club"] span.abc-cn-d{margin-top:0px;line-height:24px}
[data-own-js="club"] span.abc-cn-f{gap:normal}
[data-own-js="club"] span.abc-cn-price{font-size:14px;font-family:Inter, system-ui, -apple-system, sans-serif;line-height:22.4px}
[data-own-js="club"] span.abc-cn-go{display:block;align-items:normal;gap:normal;font-size:14px;line-height:22.4px}
[data-own-js="club"] span.abc-cn-go > em{display:inline-block;font-size:14px;line-height:22.4px}
[data-own-js="club"] h2.abc-vip-h{margin-top:0px}
[data-own-js="club"] p.abc-vip-lead{line-height:28.8px}
[data-own-js="club"] div.abc-vip-card{padding-top:28px;padding-bottom:28px}
[data-own-js="club"] h3{letter-spacing:normal}
[data-own-js="club"] p{margin-top:0px}
[data-own-js="club"] div.abc-vip-card > p{line-height:24px}
[data-own-js="club"] p.abc-vip-note{line-height:20.8px}
[data-own-js="club"] p.p-32{margin-bottom:22px;color:rgb(42, 21, 32);font-size:28px;font-weight:400;line-height:44.8px;letter-spacing:normal;text-transform:none}
[data-own-js="club"] div.div-flex-19{display:flex;gap:16px}
[data-own-js="club"] div.div-flex-19 > span{font-size:16px;line-height:25.6px}
[data-own-js="club"] p.p-33{padding-top:0px;margin-top:20px;border-top-width:0px;border-top-style:none}
[data-own-js="club"] div.div-flex-6{display:block;align-items:normal;gap:normal}
[data-own-js="club"] button{font-weight:400;line-height:normal}
[data-own-js="club"] span{font-weight:400}
[data-own-js="club"] button > span{line-height:normal}

/* club.php, pass 2 */
[data-own-js="club"][data-own-js="club"] p.abc-herolead{color:rgba(255, 255, 255, 0.86);line-height:28.8px}
[data-own-js="club"][data-own-js="club"] span.txt-11{font-weight:600}
[data-own-js="club"][data-own-js="club"] a.abc-cn{overflow-x:visible}
[data-own-js="club"][data-own-js="club"] span.abc-cn-k{font-weight:500}
[data-own-js="club"][data-own-js="club"] span.abc-cn-h{font-weight:500}
[data-own-js="club"][data-own-js="club"] span.abc-cn-price{font-weight:500}
[data-own-js="club"][data-own-js="club"] span.abc-cn-go{font-weight:500}
[data-own-js="club"][data-own-js="club"] p.abc-vip-note{margin-top:36px}
[data-own-js="club"][data-own-js="club"] span.abc-split-tag{font-weight:500}

/* style.css sets flex-shrink:0 on spans for its own components, which stops
   these flex items shrinking (a 73px label rendered 130px wide), and puts
   overflow on the card links. The supplied design uses the defaults. */
[data-own-js="club"][data-own-js] span.txt-10,
[data-own-js="club"][data-own-js] span.txt-11,
[data-own-js="club"][data-own-js] div.div-flex-4 > span,
[data-own-js="club"][data-own-js] span.abc-cn-go,
[data-own-js="club"][data-own-js] div.abc-cnfoot > span,
[data-own-js="club"][data-own-js] span.abc-split-tag,
[data-own-js="club"][data-own-js] p.abc-vip-lead,
[data-own-js="club"][data-own-js] div.abc-vip-cta,
[data-own-js="club"][data-own-js] div.abc-split-copy > a.btn-link{flex-shrink:1}
[data-own-js="club"][data-own-js] a.abc-cn{overflow:visible}

/* The join section must stay ink-dark: its heading and lead are white.
   Something in style.css/shop.css was flattening it to transparent, which
   left white text on a near-white background. */
[data-own-js="club"][data-own-js] section.abc-join-solo{background:#2A1520 !important}
/* !important because the page's own rule for this section resolves to
   transparent once the site stylesheets are also loaded, and I could not
   isolate which declaration wins. The heading and lead here are white, so
   a transparent section leaves them unreadable on the light page. */

/* ==================================================================
   BioLean / stand-alone page fixes.
   All four blocks belong together; an earlier package shipped only
   the last of them, which is why the videos went back to zero width.
   ================================================================== */

/* 1. Crop anchor -------------------------------------------------
   The supplied photographs are portrait (554x821, 558x690) but the
   .media slots are landscape on small screens. The page's own rule is
   object-fit:cover with the default centre anchor, which cuts the
   model's head off on biolean-what.jpg. 12% keeps the head and both
   inset circles. Specificity (0,2,1) beats ".div-rel-3 img" (0,1,1). */
.div-rel-3 img[src*="biolean-what"]{object-position:50% 12%}

/* 2. Three-chapter cards ----------------------------------------
   The cards go to a single column at 900px, so each becomes full
   width while .abc-step3-img stays fixed at 190px tall. That turns a
   1.82:1 photograph into a 4.4:1 letterbox and cuts the heads off
   both figures. Below that breakpoint keep the photo's own ratio. */
@media (max-width:900px){
  .abc-standalone .abc-step3-img{height:auto;aspect-ratio:312/171}
}

/* 3. THE ONE THAT MAKES THE VIDEOS VISIBLE ----------------------
   style.css has [data-sec] > *{max-width:1200px;margin-left:auto;
   margin-right:auto}. It cancels that for [data-g="split"] sections,
   but the BioLean .abc-hero-split sections ("Watched every day" and
   "Build the body you want to keep") carry data-sec without data-g,
   so they keep the auto margins. On a grid item, auto side margins
   absorb the free space and shrink the item to its content width -
   and the only child is an absolutely positioned <video>, whose
   content width is zero. The video loads and is playable, but is
   drawn 0px wide, so the half shows bare gradient.
   Scoped under .abc-standalone (0,2,0) to beat [data-sec] > *. */
.abc-standalone .abc-hero-split > *{max-width:none;margin-left:0;margin-right:0}

/* 4. Clinic cards on the page's own picker ----------------------
   The card was a <button>; it becomes an <a> so the patient lands on
   clinic.php, where the date and time are chosen. The page sets no
   display, which leaves an anchor inline and breaks the grid, and
   .abc-cc-img was a bare gradient tile with nowhere for a photo. */
.abc-standalone a.abc-clinic-card{display:block;color:inherit;text-decoration:none}
.abc-standalone .abc-clinic-card .abc-cc-img{position:relative;overflow:hidden}
.abc-standalone .abc-clinic-card .abc-cc-img img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block}

/* 5. Show the whole video frame, not a crop ---------------------
   The two BioLean split sections ("Watched every day" and "Build the
   body you want to keep") use object-fit:cover, which fills the half
   and throws away whatever does not fit. The clips are 1920x1080 in a
   749x577 slot, so at desktop width 278px of the frame is cut off the
   sides - taking the Aesthetics BioCare logo in the corner with it.

   contain fits the whole frame instead. Nothing is cropped; the cost
   is a band of the section's own gradient above and below:

        slot 749x577   cover 1026x577 (278px cut)   contain 749x421 (156px band)
        slot 749x540   cover  960x540 (212px cut)   contain 749x421 (119px band)

   This matches how the page looks on the local copy. It applies only
   to .abc-hs-media, so the full-bleed page hero still fills its space.
   Specificity (0,2,1) beats the page's own ".abc-hs-media video". */
.abc-standalone .abc-hs-media video{object-fit:contain}