@font-face{font-family:'Recoleta';src:url('assets/Recoleta-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:'Gilroy';src:url('assets/Gilroy-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Gilroy';src:url('assets/Gilroy-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:'Gilroy';src:url('assets/Gilroy-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

  :root{
    --navy:#22344B;
    --navy-2:#2F415A;
    --slate:#374A65;
    --steel:#5E6E85;
    --cream:#F8F4EA;
    --paper:#FFFFFF;
    --coral:#E56443;
    --coral-dark:#C9502F;
    --line:rgba(55,74,101,.16);
    --line-dark:rgba(255,255,255,.16);
    --maxw:1120px;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--paper);
    color:var(--slate);
    font-family:'Gilroy',Arial,Helvetica,sans-serif;
    font-size:17px;
    line-height:1.62;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;height:auto}
  a{color:inherit}

  h1,h2,h3{font-family:'Recoleta',Georgia,'Times New Roman',serif;font-weight:600;color:var(--navy);margin:0 0 .5em;line-height:1.14;letter-spacing:-.01em}
  h1{font-size:clamp(31px,7.6vw,58px)}
  h2{font-size:clamp(26px,5.6vw,42px)}
  h3{font-size:clamp(22px,4.6vw,31px)}
  p{margin:0 0 1.05em}
  strong{font-weight:700;color:var(--navy)}

  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
  .sec{padding:40px 0}
  @media(min-width:820px){.sec{padding:60px 0}}
  .sec--cream{background:var(--cream)}
  .sec--navy{background:var(--navy);color:#DDE5EE}
  .sec--navy h2,.sec--navy h3{color:#fff}
  .sec--navy strong{color:#fff}

  /* ---------- header ---------- */
  /* matches the live Eu Natural announcement bar: #4A91E2, 40px, 13-14px */
  .topbar{background:#2A6FC2;color:#fff;font-size:13px;line-height:1.3;text-align:center;padding:0 14px;height:40px;display:flex;align-items:center;justify-content:center;font-weight:500}
  @media(min-width:560px){.topbar{font-size:14px}}
  .head{border-bottom:1px solid var(--line);background:#fff}
  .head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;padding-bottom:14px}
  .head img{width:132px}
  .head .hnote{display:none;font-size:13.5px;color:var(--slate);font-weight:500}
  @media(min-width:760px){.head .hnote{display:block}}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-block;width:100%;text-align:center;
    background:#C9502F;color:#fff;text-decoration:none;
    font-family:'Gilroy',Arial,sans-serif;font-weight:700;font-size:18.8px;
    padding:17px 26px;border-radius:999px;border:0;cursor:pointer;
    box-shadow:0 6px 18px rgba(229,100,67,.24);
  }
  .btn:hover{background:var(--coral-dark)}
  .cta-center{text-align:center}
  .btn--ghost{background:transparent;color:var(--navy);border:1.6px solid var(--navy);box-shadow:none}
  .btn--ghost:hover{background:var(--navy);color:#fff}
  .btn--onnavy{background:#fff;color:var(--navy);box-shadow:none}
  .btn--onnavy:hover{background:var(--cream);color:var(--navy)}
  @media(min-width:640px){.btn{width:auto;min-width:330px}}
  .btnsub{font-size:14px;color:#4A5A6E;margin:12px 0 0;font-weight:500}
  .sec--navy .btnsub{color:#A9BCCF}

  /* ---------- hero ---------- */
  .hero{background:linear-gradient(180deg,#F4F7FA 0%,#FFFFFF 74%);padding:28px 0 44px}
  .hero h1{margin-bottom:16px}
  .hero .lede{font-size:clamp(16.5px,4.1vw,20px);color:var(--slate);margin-bottom:0}
  .hero-rest .lede{margin-bottom:20px}
  .hero-media{margin:20px 0 22px;border-radius:20px;overflow:hidden}
  .hero-media img{display:block;border-radius:20px;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 46%}
  .prodchip{display:flex;align-items:center;gap:14px;margin-top:22px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:14px}
  .prodchip img{width:54px;height:54px;object-fit:contain;flex:0 0 auto}
  .prodchip b{display:block;font-size:15px;line-height:1.3}
  .prodchip span{display:block;font-size:13.5px;color:var(--slate);margin-top:2px}
  .ticks{list-style:none;margin:26px 0 0;padding:0}
  .ticks li{position:relative;padding-left:30px;margin-bottom:11px;font-size:16px;font-weight:500;color:var(--slate)}
  .ticks li::before{
    content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;
    background:var(--coral);
  }
  .ticks li::after{
    content:"";position:absolute;left:5.5px;top:12px;width:7px;height:3.5px;
    border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
  }
  .rating{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:14.5px;font-weight:500;color:var(--slate)}
  @media(max-width:879px){.rating{flex-direction:column;gap:5px;text-align:center}}
  .stars{color:var(--coral);letter-spacing:2px;font-size:16px}
  @media(min-width:900px){
    .hero{padding:52px 0 64px}
    .hero .wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;
    column-gap:56px;row-gap:0;align-items:start}
  .hero-lead{grid-column:1;grid-row:1;align-self:end}
  .hero-media{grid-column:2;grid-row:1 / span 2;align-self:stretch;margin:0;padding:0;min-height:100%}
  .hero-media img{width:100%;height:100%;min-height:520px;aspect-ratio:auto;object-fit:cover;object-position:54% 52%}
  .hero-rest{grid-column:1;grid-row:2;padding-top:0}
  .hero-rest .lede{margin-bottom:22px}
    
    .hero-rest{padding-top:0}
    /* stretch, not centre: the photo now fills the full height of the hero column
       instead of floating as a small block against a tall text side */
    
    /* fills the column top to bottom; the regenerated source has enough headroom
       above the father that a taller crop no longer touches his hair */
    
    .ticks{margin-top:18px}
  }

  /* ---------- trust strip ---------- */
  /* ---------- the ask ---------- */
  .askband{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
  .askmedia{height:100%}
  .askmedia img{display:block;width:100%;height:100%;min-height:280px;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;border-radius:18px}
  .askcopy p{max-width:60ch}
  .steps{list-style:none;margin:24px 0;padding:0;border-left:2px solid rgba(255,255,255,.22)}
  .steps li{position:relative;padding:0 0 22px 24px;max-width:58ch}
  .steps li:last-child{padding-bottom:6px}
  .steps li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--coral);border:2px solid var(--navy)}
  .stepn{display:block;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9FB6CC;margin-bottom:4px}
  .steps li b{display:block;color:#fff;font-weight:700;margin-bottom:2px}
  @media(min-width:900px){
    /* stretch, not center: centering left 266px of empty navy under the photo */
    .askband{grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
  }

  /* the clinician proof reads better full width than squeezed into a media column */
  .clin-proof{width:100%}
  .reason-close{margin-top:30px;text-align:center}
  /* the offer on one line and what it costs on the next, so neither has to
     compete with a separator in the middle of the button */
  .btn-stack{display:inline-flex;flex-direction:column;align-items:center;gap:3px;
    line-height:1.22;padding-top:14px;padding-bottom:14px}
  .btn-stack-main{font-weight:700}
  .btn-stack-sub{font-size:.86em;font-weight:600;opacity:.86}
  /* fine print set the full width of the panel is a wall of 14px text; hold it
     to a readable measure and centre it under the seal it describes */
  .clin-proof-note{max-width:620px;text-align:center;margin-inline:auto}
  .reason-close p{max-width:52ch;margin:0 auto 16px}
  .reason-close .btnsub{margin:12px auto 0}

  .trust{background:var(--navy);color:#E6EDF4;padding:20px 0}
  .trust .wrap{display:grid;grid-template-columns:1fr;gap:12px}
  /* icons that mean something, in place of generic bullets */
  .trust div{font-size:14.5px;font-weight:500;line-height:1.4;display:flex;align-items:flex-start;gap:10px}
  .trust div svg,.trust div img,.trust .trust-ico{flex:0 0 auto;width:30px;height:30px;margin-top:-3px}
  .trust div img{background:#fff;border-radius:50%;padding:3px;object-fit:contain}
  .trust .trust-ico{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:50%}
  .trust .trust-ico svg{width:17px;height:17px}
  @media(min-width:760px){.trust .wrap{grid-template-columns:repeat(4,1fr);gap:22px}}

  /* ---------- generic media band ---------- */
  .band{display:grid;gap:26px}
  .band img{border-radius:20px;aspect-ratio:1/1;object-fit:cover;width:100%}
  /* the calendars are the whole point of this photo, so hold the source ratio
     instead of cropping them away into a square */
  .band img[src$="him-window-calendar.png"]{aspect-ratio:4/3;object-position:60% 40%}
  @media(min-width:880px){
    .band{grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  }

  /* ---------- reasons ---------- */
  .reason{display:grid;gap:20px;padding:38px 0;border-top:1px solid var(--line)}
  .reason:first-of-type{border-top:0;padding-top:8px}
  .rnum{
    flex:0 0 auto;display:inline-flex;align-items:center;background:var(--coral-dark);color:#fff;
    font-weight:700;font-size:13px;padding:5px 14px;border-radius:999px;margin:0;letter-spacing:.04em;
  }
  /* number and heading share a line at every width */
  .rhead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
  .rhead h3{margin:0;flex:1 1 200px}
  .rmedia img{border-radius:20px;aspect-ratio:1/1;object-fit:cover;width:100%}
  .rmedia img.shift-right{object-position:77% 50%}
  .rbody p:last-child{margin-bottom:0}
  .rbody ul{margin:0 0 1em;padding-left:20px}
  .rbody li{margin-bottom:8px}
  @media(min-width:880px){
    .reason{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:52px;row-gap:6px;padding:56px 0}
    .rhead{grid-column:1;grid-row:1;align-self:end;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
    .rbody{grid-column:1;grid-row:2}
    .rmedia{grid-column:2;grid-row:1 / span 2;align-self:center}
    .reason.flip .rhead,.reason.flip .rbody{grid-column:2}
    .reason.flip .rmedia{grid-column:1}
  }

  /* ---------- quotes ---------- */
  .quotes{display:grid;gap:18px}
  @media(min-width:760px){.quotes{grid-template-columns:1fr 1fr}}
  .qcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px}
  .sec--cream .qcard{background:#fff}
  .qcard .stars{display:block;margin-bottom:10px}
  .qcard p{font-size:16.5px;color:var(--slate);margin-bottom:14px}
  .qmeta{font-size:13.5px;font-weight:700;color:var(--navy);margin:0}
  .qsrc{font-size:13px;color:var(--steel);font-weight:500;margin:2px 0 0}
  .disclaim{font-size:13px;color:#4A5A6E;margin-top:22px;line-height:1.55}

  /* ---------- offer: compact radio-select buy box ---------- */
  /* Stacked selectable rows replace the old swipe cards. Nothing here scrolls
     sideways at any width. Scoped under .bb- so no other section shifts. */
  .bb{max-width:600px;margin:34px auto 0;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:24px 20px;box-shadow:0 10px 30px rgba(34,52,75,.08);text-align:left}
  /* product gallery: main image plus four fixed thumbnails, no sideways scroll */
  .bb-gallery{margin-bottom:18px}
  .bb-gallery-main{background:var(--cream);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .bb-gallery-main img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
  .bb-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
  .bb-thumb{padding:0;margin:0;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;overflow:hidden;display:block}
  .bb-thumb img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
  .bb-thumb.sel{border:2px solid var(--coral);box-shadow:0 3px 10px rgba(229,100,67,.18)}
  @media(min-width:900px){
    .bb{max-width:1040px;display:grid;grid-template-columns:2fr 3fr;gap:28px;align-items:start}
    .bb-gallery{margin-bottom:0}
  }
  .bb-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .bb-price{font-family:'Recoleta',Georgia,serif;font-size:2.1rem;color:var(--navy);line-height:1}
  .bb-was{font-size:16px;color:var(--steel);text-decoration:line-through}
  .bb-savechip{background:#FBEDE7;color:#B3472A;font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:999px}
  .bb-opts{display:grid;gap:10px;margin-bottom:14px}
  /* Siblings share one integer box geometry and vary only in colour. The old
     pairing (1.5px border + 15px padding against 2px + 14.5px) rounds
     inconsistently in an html.to.design capture and re-wraps the selected
     card's text. */
  .bb-opt{position:relative;display:block;border:2px solid var(--line);border-radius:14px;padding:14px 13px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}
  .bb-opt.sel{border:2px solid var(--coral);background:#FDF3EF;box-shadow:0 6px 18px rgba(229,100,67,.14)}
  .bb-opt input{position:absolute;opacity:0;pointer-events:none}
  .bb-badge{position:absolute;top:-11px;right:14px;background:#C9502F;color:#fff;font-weight:700;font-size:11.5px;padding:4px 11px;border-radius:999px;letter-spacing:.02em}
  .bb-badge.navy{background:var(--navy)}
  .bb-opt-row{display:flex;align-items:center;gap:11px}
  .bb-radio{width:20px;height:20px;border-radius:50%;border:2px solid #C4CFDB;flex:0 0 20px;position:relative}
  .bb-opt.sel .bb-radio{border-color:var(--coral-dark);background:var(--coral-dark)}
  .bb-opt.sel .bb-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
  .bb-opt-main{flex:1;min-width:0;text-align:left}
  .bb-opt-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .bb-opt-title b{color:var(--navy);font-size:15.5px}
  .bb-chip{background:var(--cream);color:var(--slate);font-weight:700;font-size:11.5px;padding:3px 9px;border-radius:999px;white-space:nowrap}
  .bb-opt-note{display:block;font-size:13px;color:#4A5A6E;margin-top:3px;text-align:left}
  .bb-opt-price{text-align:right;flex:0 0 auto}
  .bb-opt-now{font-weight:700;color:var(--navy);font-size:16.5px}
  .bb-opt-was{display:block;font-size:12.5px;color:var(--steel);text-decoration:line-through}
  .bb-refill{display:flex;gap:11px;align-items:flex-start;border:1.5px dashed var(--coral);border-radius:14px;padding:13px 14px;margin-bottom:16px;cursor:pointer;background:#FFFBF8;text-align:left}
  .bb-refill input{width:19px;height:19px;accent-color:var(--coral-dark);margin-top:1px;flex:0 0 19px}
  .bb-refill b{color:var(--navy);font-size:14.5px}
  .bb-refill p{font-size:12.5px;color:#4A5A6E;margin:2px 0 0;line-height:1.45}
  .bb-cta{width:100%;min-width:0;display:block}
  .bb-cta .bb-cta-price{font-weight:400;opacity:.9}
  .bb-guarantee{text-align:center;font-size:12.5px;color:#4A5A6E;margin:11px 0 0}
  .bb-guarantee b{color:var(--slate)}
  .bb-bundle{text-align:center;font-size:12.5px;color:#4A5A6E;margin:10px 0 0;line-height:1.45}
  .bb-bundle a{color:#BD4B2C;font-weight:700;text-decoration:underline;text-underline-offset:2px}

  /* ---------- faq ---------- */
  .faq{border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line);padding:6px 0}
  .faq summary{min-height:44px;display:flex;align-items:center;
    list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
    font-weight:700;color:var(--navy);font-size:17px;line-height:1.4;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"";position:absolute;right:6px;top:26px;width:10px;height:10px;
    border-right:2px solid var(--coral);border-bottom:2px solid var(--coral);transform:rotate(45deg);transition:transform .18s ease;
  }
  .faq details[open] summary::after{transform:rotate(-135deg);top:30px}
  .faq .ans{padding:0 0 20px;font-size:16px}
  .faq .ans p:last-child{margin-bottom:0}
  .faq blockquote{
    margin:14px 0 0;padding:16px 18px;background:var(--cream);border-radius:14px;
    font-size:15.5px;color:var(--slate);
  }
  .faq blockquote p{margin:0 0 8px}
  .faq blockquote cite{font-style:normal;font-weight:700;font-size:13px;color:var(--navy)}

  /* ---------- together ---------- */
  .together img{border-radius:20px;aspect-ratio:1/1;object-fit:cover;width:100%}

  /* ---------- final ---------- */
  .final{text-align:left}
  .final .btn{margin-top:6px}
  @media(min-width:880px){.final{text-align:center}.final .lede{max-width:720px;margin-left:auto;margin-right:auto}}

  /* ---------- footer ---------- */
  footer{background:#1A2839;color:#5E6E85;font-size:13px;padding:34px 0 96px;line-height:1.6}
  footer .wrap p{margin-bottom:10px}
  footer img{width:118px;opacity:.85;margin-bottom:16px}
  @media(min-width:640px){footer{padding-bottom:40px}}

  /* ---------- sticky bar ---------- */
  .sticky{
    position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(34,52,75,.10);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:14px;justify-content:space-between;
    transform:translateY(115%);transition:transform .25s ease;
  }
  .sticky.on{transform:translateY(0)}
  .sticky .sk{font-size:13px;font-weight:700;color:var(--navy);line-height:1.3}
  .sticky .sk span{display:block;font-weight:500;color:var(--steel);font-size:12px}
  .sticky .btn{width:auto;min-width:0;flex:1;max-width:260px;font-size:15px;padding:14px 16px}
  @media(min-width:900px){.sticky{display:none}}


/* ==========================================================================
   FrontrowMD widget identity. Static reproduction of the real FrontrowMD
   widgets that are embedded on the live Eu Natural product pages. Marks
   (caduceus wordmark, laurels, ribbon tails, verified check), typefaces
   (Lora + Open Sans), colours (#374a65 ink, #1C2B43, #757575, #DB9E18 gold)
   and geometry are taken verbatim from:
     https://app.thefrontrowhealth.com/api/widgets?presentation_type=sticker&product_id=1302
     https://app.thefrontrowhealth.com/api/widgets?presentation_type=qual&product_id=1302
     https://app.thefrontrowhealth.com/api/widgets?presentation_type=sticker&product_id=3821
   Nothing here is invented. See the HTML comment beside each block for the
   live embed snippet to swap in at Shopify deploy time.
   ========================================================================== */
.frmd{
  --frmd-ink:#374a65; --frmd-dark:#1C2B43; --frmd-mute:#757575;
  --frmd-gold:#DB9E18; --frmd-hair:rgba(33,33,33,.2);
  --frmd-sans:"Open Sans","Helvetica Neue",Arial,Helvetica,sans-serif;
  --frmd-serif:"Lora",Georgia,"Times New Roman",serif;
  font-family:var(--frmd-sans); color:var(--frmd-ink);
}
.frmd *,.frmd *::before,.frmd *::after{box-sizing:border-box}
.frmd-logo{display:block;line-height:0}
.frmd-logo svg{display:block;width:100%;height:auto}
.frmd-logo svg path{fill:currentColor}

/* ---- Clinicians' Choice seal (live "sticker" widget) ---- */
.frmd-seal{position:relative;width:238px;max-width:100%;margin:0;padding-bottom:26px;text-align:center;filter:drop-shadow(0 3px 7px rgba(0,0,0,.16))}
.frmd-seal-inner{position:relative;z-index:2;background:#fff;padding:16px 16px 20px}
.frmd-seal-logo{width:100%;display:flex;justify-content:center;margin:0 0 12px;color:var(--frmd-dark)}
  .frmd-seal-logo svg{width:104px;height:16.5px;flex:none}
.frmd-seal-mark{display:flex;align-items:center;justify-content:center;gap:5px}
.frmd-seal-mark p{margin:0;font-family:var(--frmd-serif);font-size:21px;font-weight:600;line-height:1.16;color:var(--frmd-ink)}
.frmd-laurel{display:block;width:15px;height:29px;flex:none}
.frmd-laurel svg{display:block;width:100%;height:100%}
.frmd-seal-count{margin:13px 0 0;font-size:13.5px;font-weight:600;line-height:1.5;color:var(--frmd-ink)}
.frmd-seal-desc{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--frmd-mute)}
.frmd-seal-learn{margin:10px 0 0;font-size:12px;font-weight:600;color:var(--frmd-mute);border-bottom:1px solid var(--frmd-mute);padding-bottom:2px;display:inline-block}
.frmd-seal-cta{margin:15px 0 0;display:inline-block;background:#F5F5F5;color:var(--frmd-dark);border-radius:100px;padding:10px 20px;font-size:12px;font-weight:600;letter-spacing:.2px}
.frmd-seal-tails{position:absolute;left:0;bottom:0;width:100%;height:26px;z-index:1;line-height:0}
.frmd-seal-tails svg{display:block;width:100%;height:100%}
.frmd-seal-tails svg path{fill:#fff}

/* ---- "Clinician Reviews" section rule (live "qual" widget header) ---- */
.frmd-cc-row{display:flex;align-items:center;gap:4px;width:100%}
.frmd-cc-row>p{margin:0;font-family:var(--frmd-serif);font-size:24px;font-weight:500;line-height:1.1;letter-spacing:.3px;color:currentColor;white-space:nowrap}
.frmd-rule{flex:1 1 auto;height:1px;min-width:12px;background:currentColor;opacity:.9}
.frmd-cc-row>.frmd-rule:first-child{margin-right:24px}
.frmd-cc-row>.frmd-rule:last-child{margin-left:24px}
.frmd-laurel-ink{display:block;width:14px;height:24px;flex:none}
.frmd-laurel-ink svg{display:block;width:100%;height:100%;fill:currentColor}
.frmd-laurel-ink svg path{stroke:none;fill:currentColor}
.frmd-caduceus{display:block;width:29px;height:22px;flex:none}
.frmd-caduceus svg{display:block;width:100%;height:100%}
.frmd-caduceus svg path{fill:currentColor}

/* ---- "Clinician reviews powered by frontrowMD" footer ---- */
.frmd-powered{display:flex;align-items:center;justify-content:center;gap:9px;margin:0;font-family:var(--frmd-sans);font-size:14px;line-height:1.4;color:currentColor;opacity:.8}
.frmd-powered .frmd-logo{width:113px;flex:none}
.frmd-verified{display:inline-flex;align-items:center;gap:6px}
.frmd-verified svg{display:block;width:16px;height:16px;flex:none}

/* ---- clinician evaluation note (live "qual" widget review row) ---- */
.frmd-notes{margin:0}
.frmd-note{display:flex;flex-direction:row;align-items:flex-start;gap:48px;padding:30px 0;border-bottom:1px solid var(--frmd-hair)}
.frmd-note:last-of-type{border-bottom:none}
.frmd-note-provider{flex:0 0 260px;max-width:260px}
.frmd-note-summary-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.frmd-note-img{width:48px;height:48px;flex:none;object-fit:cover;border-radius:100px;border:1px solid #EEE;background:linear-gradient(180deg,#FFF 0%,#EEE 100%);display:block}
.frmd-note-name{margin:0 0 6px;font-size:16px;font-weight:600;line-height:1.25;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;color:var(--frmd-ink)}
.frmd-note-verified{display:flex;align-items:center;gap:6px;margin:0;font-size:15px;font-weight:400;line-height:1;color:var(--frmd-ink);opacity:.75}
.frmd-note-verified svg{width:16px;height:16px;flex:none;display:block}
.frmd-note-verified svg path:first-of-type{fill:var(--frmd-ink);stroke:var(--frmd-ink);opacity:.5}
.frmd-note-meta{display:grid;grid-template-columns:1fr auto;gap:10px 12px;font-size:14.5px;color:var(--frmd-ink)}
.frmd-note-meta .dt{text-align:right;font-weight:600}
.frmd-note-meta hr{grid-column:1 / -1;width:100%;height:1px;border:0;margin:0;background:var(--frmd-hair)}
.frmd-note-body{flex:1 1 auto;min-width:220px}
.frmd-note-title{margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.44;color:var(--frmd-ink)}
.frmd-note-text{margin:0;font-size:16px;font-weight:400;line-height:1.62;color:var(--frmd-ink)}
.frmd-note-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:16px;font-size:15px;color:var(--frmd-ink)}
.frmd-note-tags b{font-weight:600}
.frmd-note-tags span{opacity:.9}
@media(max-width:860px){
  .frmd-note{flex-direction:column;gap:18px;padding:26px 0}
  .frmd-note-provider{flex:1 1 auto;max-width:none;width:100%}
  .frmd-note-meta{max-width:340px}
}
@media(max-width:640){}
@media(max-width:640px){
  .frmd-cc-row>p{font-size:19px;white-space:normal;text-align:center}
  .frmd-cc-row>.frmd-rule:first-child{margin-right:12px}
  .frmd-cc-row>.frmd-rule:last-child{margin-left:12px}
  .frmd-powered{font-size:13px}
}


  .clin-proof{display:flex;flex-direction:column;align-items:center;gap:22px;margin:24px 0 20px;
    padding:26px 22px;background:var(--cream);border:1px solid var(--line);border-radius:14px}
  .clin-proof-note{font-size:14px;line-height:1.62;color:var(--slate);margin:0}
  .clin-seal{flex:none}

/* ---------- footer, mirroring the live site ---------- */
.site-footer{background:#374A65;color:#fff;padding:44px 0 34px;text-align:left;border-top:0;font-size:14px}
.site-footer .wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.foot-top{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-bottom:30px}
.foot-logo{width:140px;margin:0;filter:brightness(0) invert(1)}
.foot-tag{font-size:15px;color:rgba(255,255,255,.86);margin:0;max-width:46ch}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
@media(min-width:820px){.foot-cols{grid-template-columns:2fr 1fr 1fr 1fr;gap:34px 40px}}
.foot-cols h4{font-size:22px;font-weight:700;color:#fff;margin:0 0 12px;font-family:"Recoleta",Georgia,serif}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin-bottom:2px}
/* 44px tap target without inflating the footer: inline-flex centres the
   label inside the min-height instead of stacking padding onto it. */
.foot-cols a{display:inline-flex;align-items:center;min-height:44px;line-height:1.25}
.foot-cols a{color:#fff;text-decoration:none;font-size:14px;opacity:.9}
.foot-cols a:hover{opacity:1;text-decoration:underline}
.foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22)}
.foot-legal p{font-size:12.5px;line-height:1.62;color:rgba(255,255,255,.74);max-width:80ch;margin:0 0 8px}
.foot-copy{letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.9)!important;margin-top:14px!important}


  /* review component, matched to the Conception for Her page */
.jm-summary{display:grid;gap:20px;padding-bottom:24px;margin-bottom:26px;border-bottom:1px solid var(--line)}
@media(min-width:760px){.jm-summary{gap:18px}}
.jm-score{text-align:left}
@media(min-width:760px){.jm-score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}}
.jm-avg{font-family:"Recoleta",Georgia,serif;font-size:3.2rem;line-height:1;color:var(--navy)}
.jm-stars{display:inline-flex;gap:2px;align-items:center;margin:8px 0 0}
.jm-stars svg{width:17px;height:17px;display:block}
.jm-count{font-size:.9rem;color:var(--slate);margin:8px 0 0}
.jm-summary-copy h2{margin:0 0 8px}
.jm-summary-copy p{margin:0;font-size:.97rem}
.jm-reviews{display:grid;gap:0}
.jm-review{padding:22px 0;border-bottom:1px solid var(--line)}
.jm-review-head{display:flex;align-items:center;gap:11px;margin-bottom:10px;flex-wrap:wrap}
.jm-avatar{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--sky);color:var(--blue-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;
}
.jm-who{flex:1 1 auto;min-width:0}
.jm-name{margin:0;font-weight:700;color:var(--navy);font-size:.96rem;line-height:1.3}
.jm-verified{margin:2px 0 0;font-size:.8rem;color:#1B7A48;display:flex;align-items:center;gap:5px;line-height:1.3}
.jm-verified svg{width:13px;height:13px;flex:0 0 auto}
.jm-date{font-size:.82rem;color:#7A8798;white-space:nowrap}
.jm-title{margin:8px 0 4px;font-weight:700;color:var(--navy);font-size:1rem}
.jm-body{margin:0;font-size:.98rem;line-height:1.62}
.jm-foot{margin:24px 0 0;text-align:center;font-size:.93rem}
.jm-foot a{color:var(--blue-ink);font-weight:700;display:inline-block;padding:8px 4px}

.rest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px;text-align:center}
@media(min-width:820px){.rest-grid{grid-template-columns:repeat(6,1fr);gap:20px 14px}}
.rest-item img{width:76px;height:76px;object-fit:contain;margin:0 auto 10px;display:block}
.rest-t{font-weight:700;font-size:14.5px;margin:0 0 4px;line-height:1.3}
.rest-s{font-size:13px;opacity:.75;margin:0;line-height:1.45}
/* qc-align: one heading alignment per page */
.sec h2{text-align:left}
  /* the closing band is centred as a whole, so its heading follows it */
  .sec.final h2{text-align:center}
.sec h2.center{text-align:center}
/* qc-tap: comfortable touch targets */
@media(max-width:640px){a.btn,a.cta,.head-cta,.header-cta,a.link-cta,summary{min-height:44px}
a.btn,a.cta,.head-cta,.header-cta{display:inline-flex;align-items:center;justify-content:center}}
/* mobile: centre the calls to action, matching the sibling pages */
@media(max-width:640px){
  .hero-rest, .reason-close, .sec--navy .wrap, .together .band > div{ text-align:center }
  a.btn:not(.head-cta){ margin-left:auto; margin-right:auto }
  .ticks{ display:inline-block; text-align:left }
  .rating{ justify-content:center }
}

  /* ROW-HEAD-MOBILE-SPACING: stacked, the heading needs more air above the photo
     than the grid gap gives it; the two column layout is unaffected */
  @media(max-width:899px){.rhead{margin-bottom:12px}}

  /* REVIEW-SLIDER: stacked, six reviews run to 1700px of scroll. As a swipe
     carousel they read the same way the price tiers do and cost one card of
     height instead of six. */
  @media(max-width:899px){
    .jm-reviews{
      grid-auto-flow:column;grid-auto-columns:82%;gap:14px;
      overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      padding:4px 20px 14px;margin-inline:-20px;scrollbar-width:none;
    }
    .jm-reviews::-webkit-scrollbar{display:none}
    .jm-reviews > *{scroll-snap-align:center}
    /* as cards they need an edge of their own, not a list divider */
    .jm-review{padding:18px;border:1px solid var(--line);border-radius:var(--radius)}
  }
  @media(min-width:900px){
    .jm-reviews{grid-template-columns:1fr 1fr;column-gap:44px}
  }

  /* On a phone this band reads heading, photo, then copy. The photo sits between
     them in the markup to get that order; at 880px the grid puts it back in its
     own column beside the text, unchanged. */
  @media(min-width:880px){
    .band-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;
      grid-template-areas:"head media" "copy media";gap:14px 52px;align-items:center}
    .band-stack .band-head{grid-area:head;align-self:end}
    .band-stack .band-media{grid-area:media}
    .band-stack .band-copy{grid-area:copy}
    .band-stack .band-head h2{margin-bottom:0}
  }

  /* CTA-CENTRE: flex rather than auto margins, which the Figma import drops */
  .cta-centre{display:flex;justify-content:center}
  .sfp-band{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.sfp-band{grid-template-columns:.9fr 1.1fr}}
  .diagram{position:relative;border-radius:14px;overflow:hidden}
  .diagram img{display:block;width:100%;height:auto}
  .diagram .dlabel{position:absolute;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#EAF1F8;line-height:1.3;max-width:11em}
  .diagram .dlabel small{display:block;font-weight:500;letter-spacing:0;opacity:.75}
  .diagram .dlabel i{display:inline-block}

  /* The reasons, the clinician proof card and the closing block used to render
     flush to both screen edges. Root cause was a stray </div> in reason 2 that
     closed .wrap early and ejected everything after it out of the gutter; that
     tag is gone, so the wrap now supplies the gutter as it does elsewhere.
     Only the first reason's top padding needed evening up: it carried 8px
     against 56px on reasons 2 to 5. */
  .wrap > .reason{ padding-top:56px; }

  /* Reason media was locked to 1/1 while four of the five source images are
     natively 4:3 (1200x896), so object-fit:cover was throwing away 25% of each
     one, including the labelled sperm diagram. Match the source ratio. */
  .rmedia img{ aspect-ratio:4/3 !important; }

  /* .rmedia was align-self:center, so on reasons whose copy runs longer than
     the photo (reason 2's nutrient list) the image floated down out of line
     with its heading. Top-align every reason image with its heading. */
  @media (min-width:880px){
    .rmedia{ align-self:start !important; }
  }

  /* The hero aggregate used ★ characters, which cannot show a half. Swapped for
     the same solid-path SVG the review stars use so 4.4 reads as four and a
     half rather than four. Partial star is two solid paths, never a gradient
     def (policy landersrx-figma-capture-svg-defs-flatten). */
  .stars.stars-svg{display:inline-flex;gap:2px;vertical-align:-2px;letter-spacing:normal}
  .stars.stars-svg svg{width:16px;height:16px;display:block}

  /* Second spec line in the hero product chip, on every breakpoint. */
  .prodchip .chip-line2{ display:block; }

  /* Option D's artwork sits on cream, so the label colour tuned for the old
     navy figure rendered near-invisible. Dark ink on the light plate instead. */
  .diagram--light .dlabel{ color:#3A2E17; }
  .diagram--light .dlabel small{ color:#3A2E17; opacity:.72; }

  @media(max-width:759px){
    /* At 335px the four labels would sit on top of the cell. Stack them under
       the figure instead, same treatment as the Purge diagram. */
    .diagram{ overflow:visible; }
    .diagram .dlabel{
      position:static; display:block; max-width:none; margin:16px 0 0;
      font-size:.82rem;
    }
    .diagram .dlabel small{ font-size:.92rem; line-height:1.5; opacity:.85; margin-top:3px; }
  }

  /* Section titles Daniel picked out for centring, plus their subtext. The hard
     listicle policy forbids building on the editorial advertorial system; it
     does not govern heading alignment, so centring these is compatible with it. */
  .sec h2.sec-centre,
  .section h2.sec-centre,
  h2.sec-centre{ text-align:center; }
  h2.sec-centre + p,
  h2.sec-centre + .sub,
  h2.sec-centre + .lede{ text-align:center; margin-left:auto; margin-right:auto; }
  @media (max-width:880px){
    /* On mobile Daniel wants every section title centred. */
    .sec h2, .section h2, .hero h1, h2{ text-align:center; }
  }

  /* --- Reason 2 figure -------------------------------------------------------
     The labels used to float over the artwork, which capped how large the image
     could be and left 249px of unused height in the media column. Move them into
     a strip beneath the figure: the image grows, nothing overlaps the cell, and
     the four nutrients read as a legend. */
  .reason .rmedia .diagram{ position:static; }
  .reason .rmedia .diagram img{
    aspect-ratio:5/4 !important;
    object-fit:cover;
    width:100%;
    border-radius:20px;
  }
  .reason .rmedia .diagram .dlabel{
    position:static !important;
    display:block; max-width:none; margin:0;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    font-size:12px; line-height:1.32;
  }
  .reason .rmedia .diagram{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  .reason .rmedia .diagram img{ grid-column:1; }
  /* the four labels sit in one row under the image on desktop */
  .reason .rmedia .diagram{
    grid-template-areas:"fig fig fig fig" "l1 l2 l3 l4";
    grid-template-columns:repeat(4,1fr);
    column-gap:14px; row-gap:16px;
  }
  .reason .rmedia .diagram img{ grid-area:fig; }
  .reason .rmedia .diagram .dlabel:nth-of-type(1){ grid-area:l1; }
  .reason .rmedia .diagram .dlabel:nth-of-type(2){ grid-area:l2; }
  .reason .rmedia .diagram .dlabel:nth-of-type(3){ grid-area:l3; }
  .reason .rmedia .diagram .dlabel:nth-of-type(4){ grid-area:l4; }
  .reason .rmedia .diagram .dlabel small{
    display:block; font-weight:500; letter-spacing:0; opacity:.75; margin-top:2px; font-size:11.5px;
  }
  @media (max-width:880px){
    /* two columns of two on mobile, as asked */
    .reason .rmedia .diagram{
      grid-template-areas:"fig fig" "l1 l2" "l3 l4";
      grid-template-columns:1fr 1fr;
      column-gap:16px; row-gap:18px;
    }
    .reason .rmedia .diagram .dlabel{ font-size:13px; }
    .reason .rmedia .diagram .dlabel small{ font-size:12.5px; }
  }

  @media (max-width:880px){
    /* All section titles centred on mobile, across the set. */
    h1, h2, .sec h2, .section h2, .art-body h2, .hero h1{ text-align:center; }
  }

  /* --- Buy-box cards: content centred on every page -------------------------
     Includes the product photo, the price row and the copy. text-align cannot
     position flex children, so the price and media rows need an explicit
     justify-content or they pack to the left inside a centred card. */
  .offer-card, .tier, .offers .offer{ text-align:center; }
  .offer-card img, .tier img, .offers .offer img{
    margin-left:auto; margin-right:auto; display:block;
  }
  .offer-card .btn, .tier .btn, .offers .offer .btn,
  .offer-card .cta, .tier .cta, .offers .offer .cta{
    margin-left:auto; margin-right:auto;
  }
  .offer-card .offer-flag, .offer-card .offer-tag,
  .tier .tier-flag, .tier .t-flag, .offers .offer .flag{
    margin-left:auto; margin-right:auto;
    display:block; width:fit-content;
  }
  .offer-card .offer-price,
  .offer-card .offer-media,
  .offer-card figure,
  .tier .price-row,
  .tier .t-price,
  .tier .t-shot,
  .tier .t-cta,
  .offers .offer .price,
  .offers .offer figure{
    justify-content:center !important;
    text-align:center;
  }

  /* --- Line-break polish ----------------------------------------------------
     Headings and short UI text (trust chips, proof bullets, offer labels,
     buttons) balance across their lines instead of dropping a single short
     word onto a line of its own. Body copy uses pretty, which avoids a
     one-word last line without re-balancing the whole paragraph. */
  h1, h2, h3, h4,
  .hero-trust span, .assurances li, .trust span, .rest-t, .rest-s,
  .offer-name, .offer-meta, .offer-save, .t-save, .tier-sub,
  .btn, .cta, figcaption, .dlabel{
    text-wrap:balance;
  }
  p, li{ text-wrap:pretty; }

  /* The hero product card doubles as a jump to the buy box, matching the
     treatment on the 7 Reasons page. */
  a.prodchip{ text-decoration:none; color:inherit; cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease; }
  a.prodchip:hover, a.prodchip:focus-visible{
    border-color:var(--coral-deep,#C9502F);
    box-shadow:0 6px 20px rgba(90,60,48,.10);
  }

  /* Hero bullet lists balance across their lines too, so a two-line bullet
     splits evenly instead of leaving a short trailing fragment. */
  .ticks li, .hero-bullets li, .hero-list li, .assurances li, .offer-list li{
    text-wrap:balance;
  }

/* ---- FAQ marker, capture-safe (2026-08-13) ---------------------------------
   The previous marker relied on a CSS transform. html.to.design emits a
   transformed pseudo-element as a nested frame whose rotated child measures
   wider than the box it is given, which pushed the summary row past its
   container and clipped the marker at the card edge. Because a capture forces
   every dropdown open, the [open] state fired on all of them at once.
   Replaced with static markers: no transform, explicit sizes, own flex cell.
   Renders the same live. */

.faq summary::after { content: none !important; }
.faq summary { justify-content: space-between; gap: 16px; padding-right: 8px; }
.faq .faq-q { flex: 1 1 auto; min-width: 0; }
.faq .faq-ico { flex: 0 0 14px; width: 14px; height: 9px; display: block; color: var(--coral); }
.faq .faq-ico svg { width: 14px; height: 9px; display: block; }
.faq .faq-ico .faq-chev-down { display: block; }
.faq .faq-ico .faq-chev-up { display: none; }
.faq details[open] .faq-ico .faq-chev-down { display: none; }
.faq details[open] .faq-ico .faq-chev-up { display: block; }

/* ---- Hero product chip, capture-safe (2026-08-13) --------------------------
   Same latent defect as the 7 Reasons chip: the flex text cell has the default
   min-width:auto, so html.to.design carries its desktop content width onto the
   390px frame and the card captures wider than the frame. The browser shrinks
   it either way, so this only shows up in the captured frame. */
.prodchip > div { min-width: 0; flex: 1 1 auto; }

/* ---- Buy box option rows on phones (2026-08-13) ----------------------------
   Brian's mobile note. At 390 the supply chip could not fit beside the pack
   title, so it wrapped and left the price floating in the middle of a two-line
   block with dead space beside the per-bottle note. Shrinking type to force one
   line was tested and abandoned: it still failed the six-bottle row at 390 and
   blew out every row at 360. Instead the row is top-aligned so the price sits
   on the title's own line, and the chip and note stack under the title. That
   holds at 320, 360, 390 and 430 with no horizontal overflow.
   Card padding and border are also squared off to whole pixels here, because
   the selected card was compensating a 2px border with 14.5px padding against
   its siblings' 1.5px and 15px, which html.to.design rounds inconsistently and
   captures at a different content width. */
@media(max-width:640px){
  .bb-opt,.bb-opt.sel{border-width:2px;padding:14px 12px}
  .bb-opt-row{align-items:flex-start;gap:9px}
  .bb-radio{margin-top:2px}
  .bb-opt-title{gap:6px}
  .bb-opt-title b{font-size:15px;line-height:1.25}
  .bb-chip{font-size:11px;padding:3px 8px}
  .bb-opt-note{font-size:12.5px;line-height:1.4;margin-top:5px}
  .bb-opt-now{font-size:16px;line-height:1.25}
  .bb-opt-was{font-size:11.5px}
}

/* The sticky price is now a span so the buy box can drive it, but the generic
   `.sticky .sk span` rule above styles every span as the small sub-label.
   Restore the large treatment on the price span only. */
.sticky .sk [data-role=sticky-price]{display:block;font-weight:700;color:var(--navy);font-size:13px}

/* Bundle upgrade link: a text link, but still a tap target. 44px min height. */
.bb-bundle a{display:inline-block;padding:6px 2px;min-height:44px;line-height:32px}

/* --- Daniel's pre-capture pass, 2026-08-14 -------------------------------
   Four fixes. Appended rather than edited in place so each original rule and
   the reason it exists stay readable above.
   ------------------------------------------------------------------------ */

/* 1. REASON 2 LEGEND, the clipped ZINC label.
   The caption is a <small> set to display:block inside an inline <span>, so it
   never inherited that span's 14px padding-left and began at x=0 of its grid
   cell while the nutrient word began at x=14. Column one sits flush on
   .diagram's own clip edge, so overflow:hidden shaved the leading glyph of
   "Supports count" and cut 3px off the ZINC dot's glow ring: exactly the two
   defects reported, and only on the label that sits in column one.
   The clip dates from when these labels floated over the artwork. They moved
   into a strip beneath it, so it now protects nothing, and the rounding it was
   paired with already lives on the image itself. */
.reason .rmedia .diagram{ overflow:visible; }
.reason .rmedia .diagram .dlabel small{ padding-left:14px; }

@media (max-width:880px){
  /* Centre both legend columns. Column one was hard against the 20px page
     gutter. Centred, the dot rides inline with the word instead of being
     pinned to a left edge the layout no longer has a use for. */
  .reason .rmedia .diagram .dlabel{ text-align:center; }
  .reason .rmedia .diagram .dlabel > span{ padding-left:0 !important; }
  .reason .rmedia .diagram .dlabel small{ padding-left:0; }
  .reason .rmedia .diagram .dlabel i{
    position:static !important;
    left:auto !important; top:auto !important;
    margin-right:6px; vertical-align:middle;
  }
}

/* 2. BUNDLE UPGRADE, text link to secondary CTA.
   An outlined pill, deliberately not a filled one: the primary CTA is filled
   coral with a drop shadow at 18.8px, this is 12.5px with a hairline border and
   no shadow, so it reads as the second option rather than competing.
   The colour is left to the .bb-bundle a rule above on purpose. That #BD4B2C
   was darkened to clear 4.99:1 against white, and a tinted pill fill would drag
   it back to 4.69:1, so the resting fill is the buy box's own white and the
   tint only appears on hover. The 44px tap target is preserved through
   min-height. Border and padding are whole pixels for the same reason the buy
   box option cards were squared off: html.to.design compensates sub-pixel
   siblings and re-wraps the box it does it to. This mirrors the pill already
   built on Conception for Her, in Him's coral rather than Her's blue. */
.bb-bundle{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.bb-bundle a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 18px;
  border:1px solid rgba(189,75,44,.55); border-radius:999px;
  background:#fff; box-shadow:none;
  text-decoration:none; line-height:1.2;
}
.bb-bundle a:hover{ background:rgba(229,100,67,.08); border-color:#BD4B2C; }

/* 3. REVIEW CAROUSEL that would not swipe.
   The strip could always scroll; it did not feel like it could. Snapping was
   `x mandatory` with the cards centred, which puts the snap points 270px apart
   and yanks any travel short of half a card straight back to where it started.
   Proximity snapping lets a short swipe settle, and aligning to the start makes
   each stop land the card against the gutter where the eye expects it. */
@media(max-width:899px){
  .jm-reviews{ scroll-snap-type:x proximity; scroll-padding-left:20px; cursor:grab; }
  .jm-reviews.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
  .jm-reviews > *{ scroll-snap-align:start; }
  .jm-reviews.is-dragging *{ pointer-events:none; }
}
/* The house standard for a mobile card set is a swipe hint; this strip never
   had one, which is its own part of why the affordance read as broken. */
.jm-swipe{
  display:none;
  margin:10px 0 0; text-align:center;
  font-size:12.5px; font-weight:600; color:#5E6E85;
}
.jm-swipe svg{ vertical-align:-2px; margin-left:5px; }
@media(max-width:899px){ .jm-swipe{ display:block; } }
/* ---- Round 3: pack-linked gallery strip, 2026-08-14 ----------------------
   Appended at the end so source order, not position, settles these. Only the
   selected pack's render is in the strip now, so the count of visible thumbs
   varies; auto-flow columns share the row evenly at whatever that count is,
   and .bb-thumb sets display:block, which the hidden attribute cannot beat on
   its own. */
.bb-thumbs{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none}
.bb-thumb[hidden]{display:none}