/* ozpillsdirect skin — "Oz Direct" v2 (OZ-0013, 2026-08-10).
   Spec: doc/design/home/claude/dev/OzPills Homepage.dc.html (case 12: the mockup is
   the spec), assets doc/design/home/claude/{hero.png,dev/ozpills-logo.png}.
   Light navy-on-white system: announcement strip, fixed white header with centred
   nav, two-column hero with a capsule-rounded photo pane, blush USP strip, category
   rail + product-card grid, green buy CTAs, navy footer.
   Product panels = the fleet pattern (AH-0012), kept below. */
@import url("/static/common/css/main.css");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* ── tokens (from the mock) ── */
:root{
  --oz-navy:#0f1f45;             /* ink: headings, nav, body */
  --oz-navy-deep:#101f3f;        /* footer plate */
  --oz-blue:#1b3a8f;             /* cart disc */
  --oz-blue-hover:#16307a;
  --oz-red:#e2584b;              /* strip icons */
  --oz-red-badge:#e0342a;        /* cart count */
  --oz-green:#16803c;            /* buy CTA */
  --oz-green-hover:#126c32;
  --oz-announce:#eef1f7;
  --oz-star:#ffc53d;             /* announcement sticker */
  --oz-hero-a:#eff3f9;
  --oz-hero-b:#e9eff7;
  --oz-blush:#fdeceb;            /* USP strip */
  --oz-band:#e8eef8;             /* trust band */
  --oz-bg:#f6f9fc;
  --oz-gray:#5a6580;
  --oz-gray-soft:#8a93a8;
  --oz-body:#3d4a68;
  --oz-outline:#e3e8ef;
  --oz-outline-soft:#e6ebf2;
  --oz-ink:#0f1f45;
  --oz-band-max:1240px;          /* the mock caps the page here */
  --oz-radius:14px;
  --oz-radius-sm:9px;
  --oz-shadow:0 12px 26px rgba(15,31,69,.1);
  --oz-shadow-hover:0 14px 30px rgba(15,31,69,.14);

  /* aliases the SHARED components read */
  --site-primary:           var(--oz-navy);
  --site-primary-container: var(--oz-navy-deep);
  --site-secondary:         var(--oz-blue);
  --site-secondary-bright:  #2b4fb3;
  --site-teal:              var(--oz-green);
  --site-surface:           #ffffff;
  --site-surface-low:       var(--oz-bg);
  --site-container:         var(--oz-bg);
  --site-outline:           var(--oz-outline);
  --site-outline-soft:      var(--oz-outline-soft);
  --site-ink:               var(--oz-ink);
  --site-ink-soft:          var(--oz-gray);
  --site-action:            var(--oz-green);   /* the design's BUY NOW green */
}

/* panel tokens reused by the ported product-panel CSS */
:root{
  --ah-primary:var(--oz-navy);
  --ah-blue:var(--oz-blue);
  --ah-blue-deep:var(--oz-blue-hover);
  --ah-blue-bright:#2b4fb3;
  --ah-blue-pale:#eef2f9;
  --ah-blue-tint:#dde6f5;
  --ah-teal:var(--oz-green);
  --ah-teal-deep:var(--oz-green-hover);
  --ah-teal-tint:#dcf3e3;
  --ah-surface-low:var(--oz-bg);
  --ah-outline:var(--oz-outline);
  --ah-outline-soft:var(--oz-outline-soft);
  --ah-ink:var(--oz-ink);
  --ah-ink-soft:var(--oz-gray);
  --ah-radius:var(--oz-radius);
  --ah-shadow:var(--oz-shadow);
  --ah-shadow-hover:var(--oz-shadow-hover);
}

/* ── base ── */
body{background:#fff;color:var(--oz-ink);font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--oz-navy)}
h1{font-weight:800;letter-spacing:-.03em;border-bottom-color:var(--oz-outline)}
h2{font-weight:800;letter-spacing:-.02em}
/* the mock runs undecorated links throughout and signals hover with colour; prose
   links keep an underline so they stay findable inside a paragraph */
a{color:var(--oz-navy);text-decoration:none}
a:hover{color:#2b7fd4}
/* `main p a` alone left every link inside a list looking exactly like body text — no underline, and the list rule's own colour/weight override on the <li> swallowed the link colour too (OZ-0036). A link the reader cannot see is not a link; the TOC panel keeps its own plain treatment. */
.oz-generics-cols a,.oz-trust-item a,.oz-how-step p a,main p a,
.article-body li a:not(.oz-callout-cta){text-decoration:underline}
.article-body .article-toc li a{text-decoration:none}

/* GREEN buy actions (design: Buy now), white-outline secondary */
.btn-primary,.btn-success,.add-prod-btn{background:var(--oz-green);border-color:var(--oz-green);border-radius:var(--oz-radius-sm);font-weight:600}
.btn-primary:hover,.btn-primary:focus,.btn-success:hover,.btn-success:focus,.add-prod-btn:hover{background:var(--oz-green-hover);border-color:var(--oz-green-hover)}
.btn:focus,.btn:active{box-shadow:none!important}

/* ── announcement strip (base.html, opt-in via site.yml `announcement:`) ── */
/* Fixed height, not padding: the badge below is taller than the text line, and the
   header's own offsets (.header-desk top, body padding-top) are pinned to this strip
   being exactly 38px — letting content grow it would slide the header over the hero. */
.site-announce{background:var(--oz-announce);color:var(--oz-navy);
  display:flex;align-items:center;justify-content:center;gap:0;
  height:38px;padding:0 16px;font-size:.875rem;font-weight:600}
.site-announce i{color:var(--oz-red);margin-right:8px}
/* Starburst sticker. The 16-spike outline is a clip-path polygon rather than art, so
   it stays crisp at any zoom and recolours with one token; because the points are
   percentages it stretches with the label, which is what gives a wide badge the
   price-sticker look instead of a circular star. Amber deliberately: the strip is pale
   blue-grey, the truck is red and the cart disc is red, so a fourth red would have
   disappeared into the header. */
.site-announce-badge{display:inline-flex;align-items:center;justify-content:center;
  margin-left:14px;height:30px;padding:0 1.4rem;
  background:var(--oz-star);color:var(--oz-navy);
  font-size:.68rem;font-weight:800;letter-spacing:.02em;line-height:1;
  white-space:nowrap;cursor:default;transform:rotate(-3deg);
  filter:drop-shadow(0 1px 2px rgba(15,31,69,.22));
  /* Teeth walked around the PERIMETER, not stepped by angle: on a label this wide,
     uniform angle steps bunch the spikes at the two ends and stretch them ~3x
     horizontally, which reads as a splat rather than a sticker. Regenerate if the
     label length changes a lot — the percentages encode this badge's aspect.
     SIZE IS CONSTRAINED: getBoundingClientRect grows with the rotation, so the box a
     rotated badge really occupies is h*cos(a) + w*sin(a). At 132x30 and -3deg that is
     36.9px, inside the 38px strip. A longer label costs tilt: 'New design' fitted -4deg,
     'New site design' is 14px wider and needed -3. A bigger tilt or a taller sticker
     pushes the teeth under the fixed header, where they get covered. */
  clip-path:polygon(0.0% 0.0%,4.5% 15.0%,9.1% 0.0%,13.6% 15.0%,18.2% 0.0%,22.7% 15.0%,27.3% 0.0%,31.8% 15.0%,36.4% 0.0%,40.9% 15.0%,45.5% 0.0%,50.0% 15.0%,54.5% 0.0%,59.1% 15.0%,63.6% 0.0%,68.2% 15.0%,72.7% 0.0%,77.3% 15.0%,81.8% 0.0%,86.4% 15.0%,90.9% 0.0%,95.5% 15.0%,100.0% 0.0%,96.6% 25.0%,100.0% 50.0%,96.6% 75.0%,100.0% 100.0%,95.5% 85.0%,90.9% 100.0%,86.4% 85.0%,81.8% 100.0%,77.3% 85.0%,72.7% 100.0%,68.2% 85.0%,63.6% 100.0%,59.1% 85.0%,54.5% 100.0%,50.0% 85.0%,45.5% 100.0%,40.9% 85.0%,36.4% 100.0%,31.8% 85.0%,27.3% 100.0%,22.7% 85.0%,18.2% 100.0%,13.6% 85.0%,9.1% 100.0%,4.5% 85.0%,0.0% 100.0%,3.4% 75.0%,0.0% 50.0%,3.4% 25.0%)}
/* Phone widths are a fixed budget: the line has to hold the message AND the sticker
   on ONE row, because the strip's height is pinned (the mobile header is positioned
   against it) and a wrap spills straight into the header. At 375px the longer label
   needed 385px, so the type steps down here rather than the copy being cut. Checked
   at 360px too, the narrowest common Android width. */
@media (max-width: 991.98px){
  .site-announce{height:32px;padding:0 8px;font-size:.7rem;white-space:nowrap}
  .site-announce i{margin-right:6px}
  .site-announce-badge{margin-left:8px;font-size:.53rem;height:24px;padding:0 .9rem}
}
/* 320px (the oldest iPhone width) is 3px short even after that: drop the truck, which
   is decoration — the sentence beside it already says "free delivery". */
@media (max-width: 359.98px){.site-announce i{display:none}}

/* ── header: white bar pinned under the announcement strip, centred nav ──
   `.header-desk` sits inside two nested .containers, so it cannot be position:sticky
   (its parent box is only as tall as the header itself and there is nowhere to
   travel). Taking it out of flow instead gives the mock's sticky-top behaviour;
   <body> carries the matching padding so the hero still starts below it. */
.header-desk{background:#fff;border-bottom:1px solid #e9edf3;box-shadow:none;padding:10px 0}
.header-desk > .row{display:flex;flex-wrap:nowrap;align-items:center;
  max-width:var(--oz-band-max);margin-inline:auto;padding-inline:12px}
.header-desk > .row>.col-2:first-child{width:auto;max-width:none;flex:0 0 auto;padding:0}
.header-desk > .row>.col-8{width:auto;max-width:none;flex:1 1 auto;min-width:0;padding:0}
.header-desk > .row>.col-2:last-child{display:none}
.header-desk nav.row{display:flex;flex-wrap:wrap}
.header-desk nav{background:transparent;margin-bottom:0!important;
  justify-content:center!important;padding:0;column-gap:26px;row-gap:.4rem}
.header-desk nav .col-auto{border-right:0!important;padding:0}
.header-desk nav .border-end{border:0!important}
.header-desk nav a,.header-desk .dropdown>a{color:var(--oz-navy);font-weight:600;font-size:.94rem;
  padding:.25rem 0;display:inline-block}
.header-desk nav a:hover{color:#2b7fd4}
/* ── header category panel (OZ-0034 / OZ-0035) ──
   The top bar is four items, so the panel can be wide and centred rather than a
   narrow list hanging off one word.

   DISPLAY: common/main.css opens nav dropdowns on `:hover` with `display:block`, and
   that rule (0,3,1) outranks anything written at (0,2,0) — an earlier grid version
   therefore rendered as one stacked column on hover and only became a grid once
   clicked. Multi-column IS display:block, so the panel and the inherited rule now
   agree, and the seven groups (12 rows next to 1) pack instead of padding every grid
   cell out to the tallest. No max-height: a height-constrained multicol fills its
   columns sequentially instead of balancing them. */
.header-desk nav .nav-mega{position:static}
.header-desk .nav-link.dropdown-toggle::after{margin-left:.35em;vertical-align:.15em;
  border-top-color:currentColor;opacity:.65}
.header-desk nav .nav-mega:hover > .nav-link{color:#2b7fd4}
/* `.dropdown-menu` wins on specificity via bootstrap's [data-bs-popper] rule, so the
   centring has to be written at (0,2,0) or it is silently dropped. */
.dropdown-menu.desk-mega{border:1px solid var(--oz-outline);border-radius:14px;
  box-shadow:0 18px 44px rgba(15,31,69,.16);padding:26px 30px 20px;margin-top:12px;
  left:50%;transform:translateX(-50%);
  width:min(var(--oz-band-max),calc(100vw - 32px));
  columns:4;column-gap:34px;column-rule:1px solid var(--oz-outline-soft)}
@media (max-width:1199.98px){.dropdown-menu.desk-mega{columns:3;column-gap:26px}}
/* Hover bridge. The panel is a descendant of `.dropdown`, so hovering it keeps the
   menu open — but the 12px margin above it belongs to neither box, and crossing that
   strip closed the menu before the pointer could reach a link. This pad reclaims it
   for the panel; absolute, so it never becomes a column item. */
.dropdown-menu.desk-mega::before{content:"";position:absolute;left:0;right:0;
  top:-14px;height:14px}
.desk-mega .mega-col{break-inside:avoid;-webkit-column-break-inside:avoid;
  display:block;margin:0 0 26px}
.desk-mega .mega-col-title{display:block;font-size:.8rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--oz-navy);padding-bottom:9px;margin-bottom:9px;
  border-bottom:2px solid var(--oz-blush)}
/* `.header-desk nav a` hands every anchor in the bar .25rem of vertical padding and
   display:inline-block — inside the panel that made linked column headings taller
   than the unlinked ones, so the row of headings stepped. */
.desk-mega .mega-col-title a{font:inherit;letter-spacing:inherit;color:inherit;
  padding:0;display:inline}
.desk-mega .mega-col-title a:hover{color:#2b7fd4}
.desk-mega .mega-col-list{list-style:none;padding:0;margin:0}
.desk-mega .dropdown-item{display:block;padding:6px 10px;margin-left:-10px;border-radius:8px;
  font-size:.92rem;line-height:1.35;font-weight:500;color:var(--oz-body);white-space:normal;
  background:none;transition:background .14s ease,color .14s ease}
.desk-mega .dropdown-item:hover,.desk-mega .dropdown-item:focus{color:var(--oz-navy);
  background:var(--oz-blush)}
/* Pill thumbnails on the two money-page links. nav_icon() emits an empty <i> carrying
   the image as an inline `background` with a hardcoded 30x20 size — !important is the
   only way to give a 140x100 photo its real aspect back. */
.header-desk nav a > i[style],#category-holder .category-link > i[style]{
  display:inline-block;height:23px;width:32px;padding-left:0!important;
  background-size:contain!important;background-position:center!important;
  vertical-align:-6px;margin-right:.45em}
.site-lockup{display:inline-flex;align-items:center;gap:.5rem}
/* the lockup is one raster (flag roundel + wordmark): BOTH dimensions are set here
   because base.html no longer asserts an intrinsic size */
.site-lockup-mark img{width:135px;height:38px;object-fit:contain;display:block}
#mobile-header{background:#fff;border-bottom:1px solid #e9edf3}
/* ── mobile drawer (OZ-0034): the same four rows as the desktop bar. "By category"
   is a collapse, and has to LOOK like one — a boxed row with a caret that turns. ── */
/* The shared rule paints the drawer #fff, which is the same colour as the page it
   drops over — the panel had no edge. Tint it and float it instead. */
#nav-content{background:#eef2f8;border-bottom:1px solid #d9e1ee;
  box-shadow:0 14px 30px rgba(15,31,69,.18)}
#category-holder .category-link{color:var(--oz-navy);font-weight:600;font-size:.97rem}
/* the legacy rule paints every drawer row white; on the tinted panel those read as
   cards, so the toggle takes the blush fill to stay the odd one out */
.category-toggle{display:flex;align-items:center;justify-content:space-between;
  background:var(--oz-blush)!important;border:1px solid #e7c9c6;
  border-radius:var(--oz-radius-sm);padding:.6rem .8rem}
.category-toggle .category-caret{transition:transform .18s ease;font-size:.78rem;opacity:.7}
.category-toggle:not(.collapsed) .category-caret{transform:rotate(180deg)}
.category-mega .category-group{margin:0 0 1rem}
.category-mega .category-group-title{font-size:.7rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--oz-navy);padding:0 0 6px;margin:0 0 6px;
  border-bottom:1px solid var(--oz-outline-soft)}
.category-mega .category-group-title a{color:inherit}
/* Written at the #category-holder level on purpose: the legacy fleet rule that gives
   every drawer link 16px of padding lives there too, and at 30 product rows that is
   1,650px of thumb-scrolling. Half the padding, one notch smaller — the top-level
   rows above keep the full tap target. */
#category-holder .category-mega .collapse .category-link{font-weight:500;font-size:.94rem;
  color:var(--oz-body);padding:.5rem .75rem}

@media (min-width:992px){
  .site-announce{position:fixed;top:0;left:0;right:0;z-index:1031}
  .header-desk{position:fixed;top:38px;left:0;right:0;z-index:1030}
  /* announcement (38) + header (69); `main`'s own 70px stand-in gap is dropped so
     the two do not stack up into a void under the hero */
  body{padding-top:107px}
  main{padding-top:1.25rem}
  /* the hero CTAs jump to #treatments / #how — without this the fixed bars land on
     top of the target heading */
  [id]{scroll-margin-top:125px}
}

/* Below lg the shared #mobile-header is position:fixed at top:0, so an in-flow
   announcement strip would sit underneath it. Pin the strip and drop the header
   below it; <body> carries the combined height and main's 70px stand-in is
   dropped so the two do not stack into a void. */
@media (max-width: 991.98px){
  .site-announce{position:fixed;top:0;left:0;right:0;z-index:100}
  #mobile-header{top:32px}
  body{padding-top:101px}
  main{padding-top:1.25rem}
  [id]{scroll-margin-top:110px}
}

/* The 1.25rem above is breathing room under an inner page's breadcrumb strip. On
   the home page <main> opens straight onto the USP strip, which the mock butts
   flush against the hero — so the home page takes none of it. */
.page-home main{padding-top:0}

/* Sticky cart (OZ-0035): the francemeds/fleet button, not the mock's small navy disc —
   the shared 4rem disc, 2em glyph, navy count badge and pulse all come from
   common/main.css now, and the only thing overridden is the tint. It cannot simply
   inherit `--site-action`: on this site that token is the BUY-NOW green, and a green
   cart would read as one more buy button, so the fab takes the site's red. */
.my-cart-icon.cart-fab{background:var(--oz-red-badge)}
/* the shared badge already draws its white ring with a box-shadow; the border below
   would stack a second one inside a 26px circle */
.my-cart-icon.cart-fab .qty-badge-header{border:0}
@media (min-width:992px){
  /* The fleet rule pins it at top:1rem, which on this site lands under the fixed
     announcement strip (z-index 1031 vs the button's 1030). The 64px disc sits on the
     header band instead — which runs 38-103px, so it fills it almost exactly — held to
     the content band's right edge. */
  .my-cart-icon.cart-fab{top:39px;right:max(24px,calc((100vw - var(--oz-band-max))/2 + 12px))}
}
.qty-badge-header{background:var(--oz-red-badge);border:2px solid #fff}
.folded-ribbon .foreground.ribbon{background:var(--oz-red)}
.folded-ribbon .background.trapezoid{border-color:transparent transparent #b8483d}

/* ── hero: home_base renders it as .header-hero (.col-md-5 copy + an EMPTY
   .col-md-7 — the photo's canvas). Full-bleed wash, copy aligned to the 1240 band,
   photo pane on the right with the mock's capsule-rounded left edge. ── */
.page-home .header-hero{position:relative;isolation:isolate;min-height:420px;align-items:center;
  margin-inline:calc(50% - 50vw);
  padding-block:0!important;
  padding-left:max(24px,calc((100vw - var(--oz-band-max))/2 + 12px));padding-right:0;
  background:linear-gradient(180deg,var(--oz-hero-a),var(--oz-hero-b))}
.page-home .header-hero > .col-md-5{flex:0 0 50%;max-width:50%;padding-block:70px;padding-right:40px}
.page-home .header-hero > .col-md-7{flex:0 0 50%;max-width:50%;padding:0}
/* the photo pane: absolute so it can bleed to the viewport edge and keep the
   280px rounding independent of the flex row's padding */
.page-home .header-hero::before{content:"";position:absolute;z-index:-1;inset:0 0 0 50%;
  background:url("/images/hero-oz-pharmacist.jpg") center/cover no-repeat;
  border-radius:280px 0 0 280px}
.page-home .header-hero .header-title{font-size:3.25rem;line-height:1.08;font-weight:800;letter-spacing:-.03em;
  color:var(--oz-navy);-webkit-text-fill-color:var(--oz-navy);border-bottom:0;margin:0 0 30px;
  text-shadow:none;text-wrap:balance;max-width:560px}
.page-home .hero-subline{font-size:1.05rem;line-height:1.6;color:var(--oz-body);max-width:34em;margin:0 0 30px}
.page-home .hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.page-home .header-hero .btn.hero-cta{background:var(--oz-green);border-color:var(--oz-green);color:#fff;
  font-weight:600;font-size:1rem;padding:12px 24px;border-radius:var(--oz-radius-sm);box-shadow:none}
.page-home .header-hero .btn.hero-cta:hover{background:var(--oz-green-hover);border-color:var(--oz-green-hover);color:#fff}
.btn.hero-cta2{background:#fff;color:var(--oz-navy);font-weight:600;font-size:1rem;
  padding:12px 24px;border-radius:var(--oz-radius-sm);border:1px solid #d9e0ea}
.btn.hero-cta2:hover,.btn.hero-cta2:focus{background:#fff;border-color:var(--oz-navy);color:var(--oz-navy)}
@media (max-width: 991.98px){
  .page-home .header-hero{min-height:0;padding-inline:0;margin-inline:calc(50% - 50vw)}
  .page-home .header-hero > .col-md-5{flex:0 0 100%;max-width:100%;padding:2.5rem 1.25rem 2rem}
  .page-home .header-hero > .col-md-7{flex:0 0 100%;max-width:100%;height:230px}
  .page-home .header-hero::before{inset:auto 0 0 0;height:230px;border-radius:120px 0 0 0}
  .page-home .header-hero .header-title{font-size:2.1rem}
}

/* ── in-body callout (OZ-0036): a blush panel with the action CTA, for the one thing
   on a page the reader most needs to act on — currently the AusPost tracking link. ── */
.oz-callout{background:var(--oz-blush);border:1px solid #f0d3d0;
  border-left:4px solid var(--oz-red);border-radius:var(--oz-radius);
  padding:1.15rem 1.35rem;margin:1.5rem 0}
.oz-callout p{margin:0 0 .75rem}
.oz-callout p:last-child{margin-bottom:0}
.oz-callout-cta{display:inline-block;background:var(--oz-green);color:#fff;font-weight:600;
  border-radius:var(--oz-radius-sm);padding:.55rem 1.1rem;text-decoration:none}
.oz-callout-cta:hover,.oz-callout-cta:focus{background:var(--oz-green-hover);color:#fff}

/* ── USP strip: blush band, one centred row (design) ── */
.oz-usp{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
  background:var(--oz-blush);color:var(--oz-navy);padding-top:16px;padding-bottom:16px}
.oz-usp-inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 72px;max-width:var(--oz-band-max);margin:0 auto;font-size:.94rem;font-weight:600}
.oz-usp-item{display:inline-flex;align-items:center;gap:.5rem}
.oz-usp-item svg{width:19px;height:19px;flex:none;color:var(--oz-red)}
.oz-usp-item small{display:block;font-weight:400;font-size:.78rem;color:var(--oz-gray)}
/* the strip is full-bleed and the section under it opens straight onto a bordered
   card — without this they share an edge and read as one block */
.oz-usp{margin-bottom:2.5rem}
@media (max-width: 991.98px){.oz-usp{margin-bottom:1.75rem}}

/* ── treatments: category rail + product-card grid ── */
.oz-shop{display:grid;grid-template-columns:1fr 3fr;gap:1.5rem;margin:0 0 .5rem}
@media (max-width: 991.98px){.oz-shop{grid-template-columns:1fr}}
.oz-shop h2{font-size:1.81rem;margin:0 0 20px}
.oz-cats{border:1px solid var(--oz-outline);border-radius:var(--oz-radius);padding:24px 22px;
  align-self:start;position:sticky;top:130px;display:flex;flex-direction:column;gap:30px}
/* OZ-0034: desktop only. On a phone the rail used to unfold into a 30-link wall
   above the product grid; the header drawer carries the same tree one tap away. */
@media (max-width: 991.98px){.oz-cats{display:none}}
.oz-cats h3{font-size:.82rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--oz-navy);padding-bottom:9px;border-bottom:2px solid var(--oz-blush);margin:0 0 12px}
.oz-cats ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.oz-cats li{padding:0}
.oz-cats a{display:block;font-size:.95rem;line-height:1.35;color:var(--oz-body)}
.oz-cats a:hover{color:#2b7fd4}
.oz-cats h3 a{font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit}

/* product cards */
.oz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width: 1199.98px){.oz-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 575.98px){.oz-grid{grid-template-columns:1fr}}
.oz-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--oz-outline);
  border-radius:var(--oz-radius);padding:10px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.oz-card:hover{border-color:#c6d1e2;transform:translateY(-3px);box-shadow:var(--oz-shadow)}
.oz-card-media{position:relative;display:flex;align-items:center;justify-content:center;
  height:138px;background:linear-gradient(160deg,#f6f9fc,#e7eef7);border-radius:10px;margin-bottom:14px}
.oz-card-media img{max-height:104px;max-width:78%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.oz-card-badge{position:absolute;top:10px;left:10px;background:#fff;color:#41506e;
  font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;box-shadow:0 1px 2px rgba(15,31,69,.14)}
.oz-card h3{font-size:.94rem;font-weight:700;line-height:1.3;padding:0 4px;margin:0}
.oz-card-doses{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  gap:5px;padding:0 4px;margin-top:8px}
.oz-doses-label{font-size:.63rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--oz-gray-soft);margin-right:2px}
.oz-dose{font-size:.69rem;font-weight:600;color:#41506e;background:#f2f5fa;
  border:1px solid var(--oz-outline-soft);border-radius:6px;padding:3px 7px}
.oz-card-price{display:flex;align-items:baseline;gap:4px;padding:0 4px;margin-top:auto;padding-top:12px}
.oz-card-price span:first-child{font-size:.72rem;color:#7a839a;font-weight:600}
.oz-card-price strong{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.oz-card-price span:last-child{font-size:.75rem;color:var(--oz-gray)}
.oz-card-actions{display:flex;gap:8px;margin-top:12px}
.oz-card-actions a{text-align:center;font-size:.81rem;padding:10px;border-radius:var(--oz-radius-sm);
  display:inline-flex;align-items:center;justify-content:center}
.oz-buy{flex:1.6;background:var(--oz-green);color:#fff;font-weight:700}
.oz-buy:hover{background:var(--oz-green-hover);color:#fff}
.oz-details{flex:1;background:#fff;color:var(--oz-navy);font-weight:600;border:1px solid #dbe1ea}
.oz-details:hover{border-color:var(--oz-navy);color:var(--oz-navy)}

/* ── why-choose: four bordered icon tiles ── */
.oz-why{margin:2.75rem 0 0}
.oz-why h2{font-size:1.81rem;text-align:center;margin:0 0 26px}
.oz-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width: 767.98px){.oz-why-grid{grid-template-columns:repeat(2,1fr)}}
.oz-why-item{border:1px solid var(--oz-outline);border-radius:var(--oz-radius);padding:22px 16px;
  text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.oz-why-item svg{width:30px;height:30px;color:var(--oz-navy)}
.oz-why-item span{font-size:.84rem;font-weight:600;line-height:1.35;margin-top:14px}

/* ── customer reviews: the mock's tinted band (real testimonials ported from the
   live site, stored as Review rows via the page spec) ── */
.oz-reviews{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
  background:var(--oz-band);padding-block:2.75rem 3.25rem;margin-top:2.75rem}
.oz-reviews h2{font-size:1.81rem;text-align:center;margin:0 0 26px}
.oz-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width: 991.98px){.oz-reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 575.98px){.oz-reviews-grid{grid-template-columns:1fr}}
.oz-review{display:flex;flex-direction:column;gap:10px;
  background:#fff;border-radius:12px;padding:18px}
.oz-stars{color:#f5b400;font-size:1rem;letter-spacing:2px;line-height:1}
.oz-review p{font-size:.84rem;color:var(--oz-body);line-height:1.5;margin:0}
.oz-review strong{font-size:.81rem;font-weight:700;margin-top:auto}
.oz-reviews-verify{text-align:center;font-size:.81rem;color:var(--oz-gray);margin:26px 0 0}
.oz-reviews-verify a{text-decoration:underline}

/* ── how it works: outlined step numerals ── */
.oz-how{margin:3rem 0 0}
.oz-how h2{font-size:1.81rem;text-align:center;margin:0 0 30px}
.oz-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media (max-width: 767.98px){.oz-how-grid{grid-template-columns:1fr}}
.oz-how-step{display:flex;align-items:flex-start;gap:1rem}
.oz-how-step b{font-size:3.75rem;font-weight:800;line-height:.9;flex:none;
  color:#fff;-webkit-text-stroke:2px var(--oz-navy)}
.oz-how-step h3{font-size:.94rem;font-weight:700;margin:6px 0 3px}
.oz-how-step p{font-size:.84rem;color:var(--oz-gray);line-height:1.45;margin:0}

/* ── understanding generics: ruled off, two prose columns ── */
.oz-generics{margin:3rem 0 3.5rem;padding-top:2.13rem;border-top:1px solid var(--oz-outline)}
.oz-generics h2{font-size:1.81rem;margin:0 0 18px}
.oz-generics-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
  font-size:.84rem;color:var(--oz-body);line-height:1.6}
@media (max-width: 767.98px){.oz-generics-cols{grid-template-columns:1fr}}
.oz-generics-cols p{margin:0 0 14px}
.oz-generics-cols p:last-child{margin:0}

/* ── content furniture ── */
article.hentry,#main-content{max-width:var(--oz-band-max);margin:0 auto}
.card,.panel{background:#fff;border:1px solid var(--oz-outline);border-radius:var(--oz-radius)}
table{border-color:var(--oz-outline)}
th{background:var(--oz-bg);color:var(--oz-navy)}
td,th{border-color:var(--oz-outline-soft)}
blockquote{border-left:4px solid var(--oz-red);background:var(--oz-bg);padding:.75rem 1rem;border-radius:0 var(--oz-radius) var(--oz-radius) 0}
.contact-form-fields input,.contact-form-fields textarea{border:1px solid var(--oz-outline);border-radius:var(--oz-radius-sm);padding:.55rem .75rem}
.contact-form-sent{background:#dcf3e3;border:1px solid var(--oz-green);border-radius:var(--oz-radius-sm);color:var(--oz-navy)}

/* ── footer: navy plate, brand lockup, link columns, payment chips ── */
footer.section.footer,.footer{background:var(--oz-navy-deep);color:#c7d2e6;padding-top:2.75rem}
.footer .container{max-width:var(--oz-band-max)}
.footer .h3{display:block;color:#fff;font-weight:700;font-size:.94rem;margin-bottom:10px}
.footer a,.footer-link a{color:#c7d2e6;font-size:.84rem}
.footer a:hover,.footer-link a:hover{color:#fff}
.footer-link{list-style:none;padding-left:0}
.footer-link li{padding:.2rem 0;font-size:.84rem}
/* the brand plate is the flex row's first item — decorative, the site name is
   already stated in the copyright line below */
.footer .flex::before{content:"";flex:0 0 auto;align-self:flex-start;
  width:163px;height:60px;border-radius:10px;
  background:#fff url("/img/logo-lockup.png") center/135px auto no-repeat}
@media (max-width: 767.98px){.footer .flex::before{display:none}}
/* OZ-0034: four link columns + contacts. `space-between` alone let a 5-item column
   and a 8-item one claim the same width and drift apart; give every column the same
   basis and a real gap so the row reads as a grid at any wrap point. */
@media (min-width: 768px){
  .footer .flex{gap:1.75rem 2rem;align-items:flex-start}
  .footer .flex > div{flex:1 1 150px;min-width:140px}
  .footer .flex > .footer-seals-col{flex:0 0 100%}
}
@media (max-width: 767.98px){
  .footer .flex{gap:1.5rem}
  .footer .flex > div{flex:1 1 45%}
  /* the chips are a full-width strip at every width — without this they inherit the
     45% basis above and land in a 2x4 block beside the contacts column */
  .footer .flex > .footer-seals-col{flex:0 0 100%}
}
/* payment chips: the design runs them centred under a rule, below the link
   columns — the shared footer emits them as another column, so this one is pushed
   full-width and last. Its heading is kept for screen readers only. */
.footer-seals-col{flex:0 0 100%;order:9;border-top:1px solid #2a3a5e;margin-top:1.88rem;padding-top:1.25rem}
.footer-seals-col .h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.footer-seals{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  width:auto;margin:0}
/* explicit box: an SVG served as <img> exposes no usable intrinsic ratio here, so
   width:auto collapses it — every chip is drawn on the same 104x30 canvas */
.footer-seals img{width:54px;height:36px;object-fit:contain;background:transparent;border:0;padding:0}
/* the shared .copy rule already draws a rule; with the chips above it, drop the second */
.footer .copy{border-top:0;margin-top:1.25rem}
.footer .copy{border-top:1px solid #2a3a5e;margin-top:1.88rem;padding-top:1.25rem;font-size:.8rem;text-align:center}

/* ── AH-0012 (ported from francemeds FR-0020/0022): product panels — hero card, price panel, TOC ── */
.prod-hero{display:flex;gap:2rem;align-items:center;background:#fff;border:1px solid var(--ah-outline-soft);border-radius:1.25rem;box-shadow:var(--ah-shadow);padding:2rem;margin:1rem 0 2rem}
.prod-hero-copy{flex:1 1 55%}
.prod-hero-media{flex:1 1 45%;text-align:center}
.prod-hero-media img{max-width:100%;max-height:300px;object-fit:contain;border-radius:.75rem}
.prod-hero-badge{display:inline-block;font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ah-teal-deep);background:var(--ah-teal-tint);border-radius:999px;padding:.3rem .8rem;margin-bottom:.8rem}
.prod-hero-badge::before{content:'+ ';color:var(--ah-teal);font-weight:800}
.prod-hero h1{font-size:2rem;margin-bottom:.6rem}
.prod-hero-equiv{color:var(--ah-ink-soft);font-weight:600;font-size:1.2rem}
.prod-hero-desc{color:var(--ah-ink-soft);line-height:1.6}
.prod-price-from{font-family:Inter,sans-serif;font-size:1.3rem;color:var(--ah-blue-deep);margin:.6rem 0 .2rem}
.prod-hero-note{font-size:.8rem;color:var(--ah-ink-soft);font-style:italic}
.prod-hero-ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}

.prod-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.dosage-panel{background:var(--ah-surface-low);border-radius:1rem;padding:1.4rem 1.5rem;margin:1.5rem 0}
.dosage-panel h2{margin-top:0}
/* Breadcrumb strip: trail left, "mis à jour" right, on one line when they fit. The
   date used to be dragged onto that line with margin-top:-2.2rem, which simply
   printed it on top of the trail once a wiki title got long. Flex puts them in the
   same row properly, so a long trail pushes the date onto its own line instead. */
.container:has(> nav[aria-label=breadcrumb]){display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;column-gap:1.5rem}
/* 0 1 auto, not 1 1 auto: the trail must take only the width it needs, or it fills
   the row and pushes the date to a second line even on short pages. */
.container:has(> nav[aria-label=breadcrumb]) > nav{flex:0 1 auto;min-width:0}
.page-dates{flex:0 0 auto;margin-left:auto;text-align:right}
@media (max-width:767.98px){
  .prod-hero{flex-direction:column-reverse;padding:1.25rem}
  .prod-2col{grid-template-columns:1fr}
  .page-dates{margin-left:0;text-align:left}
}

/* ── compact price panel (AH-0012) ── */
.price-panel{background:#fff;border:1px solid var(--ah-outline-soft);border-radius:1.25rem;box-shadow:var(--ah-shadow);padding:1.75rem 1.75rem 1.25rem;margin:0 0 2.5rem}
.price-panel h2{margin-top:0;font-size:1.35rem}
.price-panel .prices-verified{margin-bottom:.4rem}
/* chip now follows the table, so the breathing room moves above it */
.pt-tabs{display:flex;flex-wrap:wrap;gap:.35rem;border-bottom:1px solid var(--ah-outline-soft);padding-bottom:.9rem;margin-bottom:0}
.pt-tabs .nav-link{color:var(--ah-ink);font-family:Inter,sans-serif;font-weight:700;font-size:.9rem;border-radius:.65rem;padding:.5rem 1.05rem;background:var(--ah-blue-pale)}
.pt-tabs .nav-link:hover{background:var(--ah-outline-soft);color:var(--ah-ink)}
.pt-tabs .nav-link.active{background:var(--ah-blue-bright);color:#fff}
.pt-wrap{border:0;border-radius:0;margin:0}
.pt-table{width:100%;border-collapse:collapse;font-size:.95rem}
.pt-table thead th{background:var(--ah-surface-low);color:var(--ah-ink-soft);font-family:Inter,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.6rem .75rem;text-align:left}
.pt-table tbody td{padding:.65rem .75rem;border-bottom:1px solid var(--ah-outline-soft);vertical-align:middle}
.pt-table tbody tr:last-child td{border-bottom:0}
.pt-table tbody tr:hover{background:var(--ah-surface-low)}
.pt-pill-holder{position:relative;display:inline-block}
.pt-pill-holder img{width:44px;height:44px;object-fit:contain}
.pt-qty{position:absolute;top:-7px;left:-10px;font-size:.62rem;font-weight:700;color:#fff;background:var(--ah-blue);border-radius:999px;padding:.1rem .45rem}
.pt-qty-cell{font-weight:600;color:var(--ah-primary);white-space:nowrap}
.pt-price{white-space:nowrap}
.pt-perpill strong{color:var(--ah-primary)}
.pt-bonus{color:var(--ah-blue-deep);white-space:nowrap}
.pt-action{text-align:right;white-space:nowrap}
.btn.pt-buy{padding:.45rem 1rem;border-radius:.6rem;font-size:.85rem;font-weight:700}
.btn.pt-buy .btn-label{white-space:nowrap}
.pt-save{display:block;font-size:.72rem;color:var(--ah-ink-soft);margin-top:.25rem;text-align:center}
/* ── Mobile price list (operator design: doc/design/product/price-mobile/code.html).
   The desktop table needs ~517px; at 375px it left the buy button 224px off-screen
   behind a horizontal scroll. Below 768px the same rows re-lay out as cards — CSS
   only, so the markup, the cart data-* attributes and the per-row schema.org Offer
   are untouched and desktop keeps the real table. ── */
@media (max-width:991.98px){
  .price-panel{padding:1.1rem 1rem}
  .pt-wrap{overflow-x:visible}
  .pt-table{display:block;font-size:1rem}
  .pt-table thead{display:none}
  .pt-table tbody{display:block}
  .pt-table tbody tr{
    display:grid;
    /* One fact per line down the middle: at 293px of card the four-across reading of
       the mock leaves the per-pill column ~55px, which breaks "€2.31 par pilule"
       over three lines. The savings line takes the free space above the button, on
       the right edge, rather than crowding the stacked facts on the left. */
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "pill price   save"
      "pill perpill action"
      "pill bonus   action";
    align-items:center;column-gap:.5rem;row-gap:.1rem;
    background:#fff;border:1px solid var(--ah-outline-soft);border-radius:.75rem;
    padding:.6rem .7rem;margin-bottom:.5rem;box-shadow:0 1px 3px rgba(29,61,82,.06)}
  .pt-table tbody tr:hover{background:#fff}
  .pt-table tbody td{display:block;padding:0;border-bottom:0}

  .pt-table td.pt-pill{grid-area:pill}
  /* the pack count is the xN badge and the dose is the active tab — the "10 × 200mg"
     cell would only repeat both */
  .pt-table td.pt-qty-cell{display:none}
  .pt-table td.pt-price{grid-area:price;font-size:1.15rem;font-weight:700;line-height:1.25;color:var(--ah-primary)}
  .pt-table td.pt-perpill{grid-area:perpill;font-size:.75rem;color:var(--ah-ink-soft)}
  .pt-table td.pt-perpill strong{font-weight:400;color:inherit}
  .pt-table td.pt-perpill::after{content:" " attr(data-unit)}
  .pt-table td.pt-bonus{grid-area:bonus;text-align:left;font-size:.72rem;line-height:1.25;color:var(--ah-teal-deep);white-space:nowrap}
  /* the action cell dissolves so the button and the save line can take their own
     grid areas — the save line sits above the button, the button below it */
  .pt-table td.pt-action{display:contents}
  .pt-table .pt-save{grid-area:save;justify-self:end;align-self:center;margin:0;text-align:right;
    font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ah-blue);white-space:nowrap}

  .pt-pill-holder{display:flex;align-items:center;justify-content:center;
    width:2.6rem;height:2.6rem;background:var(--ah-blue-tint);border-radius:50%}
  /* the pack shots are JPEGs on white — multiply drops that square out of the round
     chip instead of stamping a white tile on the tint */
  .pt-pill-holder img{width:30px;height:30px;mix-blend-mode:multiply}
  .pt-qty{top:-5px;left:-6px}

  /* Icon-only round CTA per the design. The label stays in the DOM, visually hidden,
     so the button keeps its accessible name. */
  .btn.pt-buy{grid-area:action;justify-self:end;align-self:center;
    position:relative;display:flex;align-items:center;justify-content:center;
    width:2.5rem;height:2.5rem;padding:0;border-radius:50%}
  .btn.pt-buy::before{content:"\f217";font-family:"Font Awesome 5 Free";font-weight:900;font-size:1rem}
  .btn.pt-buy .btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* Narrowest phones (320px): the savings line gets the full width above the button
   rather than sharing the top row with the price. */
@media (max-width:359.98px){
  .pt-table tbody tr{
    grid-template-areas:
      "pill save    save"
      "pill price   action"
      "pill perpill action"
      "pill bonus   action"}
}

/* ── content band (AH-0012, per francemeds FR-0024): content column = full container width, centered —
   same band as the header/hero, so breadcrumbs/date align naturally and the home
   trust strip matches the hero width. Product hero LARGE per mock. ── */
@media (min-width:768px){
  main .row{justify-content:center;margin-right:0}
  /* the content column carries the mock's 1240 band, so body sections line up with
     the header bar and the hero copy above them */
  main .col-12.col-md-9{flex:0 0 100%;max-width:var(--oz-band-max)}
  .container:has(> nav[aria-label=breadcrumb]){max-width:var(--oz-band-max)}
  .trust-panel{width:min(var(--oz-band-max),calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
}
.prod-hero{padding:2.25rem;gap:2.25rem;margin:.75rem 0 2rem}
.prod-hero h1{font-size:2.3rem}
.prod-hero-equiv{font-size:1.25rem}
.prod-hero-desc{font-size:1.05rem;line-height:1.6;max-width:34rem}
.prod-price-from{font-size:1.45rem;margin:.6rem 0 .2rem}
.prod-hero-media img{max-height:330px}
.prod-hero-ctas .btn{padding:.7rem 1.6rem;font-size:1rem}

/* ── TOC panel "Sur cette page" (operator design: doc/design/toc/code.html).
   One shared component (site/components/shared/article_body.html) renders it on
   every product and wiki page, so styling it here covers the whole site. Two
   columns from md up, one below; long headings are trimmed with an ellipsis so
   they cannot run into the next column. ── */
.article-toc.card{background:var(--ah-surface-low);border:1px solid var(--ah-outline-soft);
  border-radius:1.5rem;box-shadow:var(--ah-shadow);margin:0 0 2.5rem}
.article-toc .card-body{padding:1.5rem}
.article-toc > .card-body > strong{display:block;margin-bottom:1rem;
  font-family:Inter,sans-serif;font-size:1.25rem;font-weight:700;color:var(--ah-primary)}
.article-toc ul{list-style:none;padding-left:0;margin:0}
/* Column-wise flow, not row-wise: a table of contents is read in document order,
   so the left column must run 1-2-3 rather than 1-3-5. */
.article-toc > .card-body > ul{column-gap:2.5rem}
.article-toc li{break-inside:avoid}
.article-toc a{position:relative;display:block;padding:.4rem 1.25rem .4rem 0;
  border-bottom:1px solid rgba(219,229,234,.75);
  font-size:.875rem;line-height:1.35;color:var(--ah-ink-soft);text-decoration:none;
  transition:color .2s,border-color .2s}
.article-toc a:hover{color:var(--ah-blue);border-bottom-color:var(--ah-blue)}
/* chevron slides in on hover; it sits inside the padding reserved on the right, so
   the ellipsis never collides with it */
.article-toc a::after{content:"\f054";font-family:"Font Awesome 5 Free";font-weight:900;
  position:absolute;right:.15rem;top:50%;font-size:.68rem;color:var(--ah-blue);
  opacity:0;transform:translate(-8px,-50%);transition:opacity .2s,transform .2s}
.article-toc a:hover::after{opacity:1;transform:translate(0,-50%)}
/* H3 entries nested under an H2 */
.article-toc li ul{margin-left:.9rem}
.article-toc li ul a{font-size:.8rem;color:var(--ah-ink-soft);opacity:.85}
@media (min-width:768px){
  .article-toc > .card-body > ul{columns:2}
  /* Trim only where there IS a neighbouring column to run into — on one column a
     long heading should wrap rather than lose its ending. */
  .article-toc a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ── Content lists (operator design: doc/design/list/code.html) — the body lists on
   product and wiki pages: blue dot, navy medium text, relaxed leading, one clear
   line of air between items.

   Depth-agnostic on purpose: wiki bodies wrap some lists in a plain <div>, so a
   direct-child selector misses them. The TOC panel also lives inside .article-body,
   so it is fenced off explicitly below rather than with a :not() — a plain reset
   works in every browser, and a dropped selector here would silently unstyle the
   whole block. The page-type prefix keeps this to the families that need it:
   products are page-product, wiki is page-guide plus the page-hub landings, and
   page-info was added in OZ-0036 — 9 of the 17 service pages carry a <ul>, and with
   only the fleet's `list-style:none` reaching them their bullets rendered as bare,
   unindented lines that ran into the surrounding prose. ── */
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ul{list-style:none;padding-left:0;margin:2rem 0 2rem 1rem}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ul li{position:relative;padding-left:1.4rem;
  margin-bottom:1rem;color:var(--ah-primary);font-weight:500;line-height:1.625}
/* absolute dot rather than a flex row: an <li> here can contain a nested list or a
   block, and a flex item would push it alongside the text instead of under it */
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ul li::before{content:"";position:absolute;
  left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--ah-blue)}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ul ul{padding-left:1rem;margin:.7rem 0 0}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ul li:last-child{margin-bottom:0}

/* Ordered lists keep native numbering — content uses <ol start="N">, which a CSS
   counter would silently reset — so only the marker is recoloured. The explicit
   decimal is a repair: static/common/css/main.css sets `li{list-style-type:none}`
   for the whole fleet, which has been swallowing the numbers of every <ol>. */
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ol{padding-left:2rem;margin:2rem 0 2rem 1rem}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ol li{list-style-type:decimal;margin-bottom:1rem;
  color:var(--ah-primary);font-weight:500;line-height:1.625}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ol li::marker{color:var(--ah-blue);font-weight:700}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body ol li:last-child{margin-bottom:0}

/* Fence: the TOC is a nav inside the same article and keeps its own compact look.
   Carries the same page-type prefix as the rules above so it outranks them — without
   it the content rule is the more specific of the two and the TOC grows dots. */
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body .article-toc ul{margin:0;padding-left:0}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body .article-toc li{position:static;padding-left:0;
  margin-bottom:0;font-weight:400;line-height:normal}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body .article-toc li::before{content:none}
:is(.page-product,.page-guide,.page-hub,.page-info) .article-body .article-toc li ul{margin-left:.9rem;padding-left:0}

/* ── medical-reviewer byline (base.html, opt-in via site.yml `reviewer:`) ──
   A quiet credit line under the breadcrumb: portrait, name, role, review date.
   Uses the existing tokens only — no new palette. */
.page-reviewer{display:flex;align-items:center;gap:10px;margin:.35rem 0 0}
/* Horizontal alignment needs no rule: the byline renders inside the content column
   (base.html), so it starts exactly where the body does at every breakpoint.
   On mobile the "Updated on" line stacks directly above it — give the two some air. */
@media (max-width:991.98px){.page-reviewer{margin-top:.9rem}}
.page-reviewer-img{width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:1px solid var(--oz-outline);flex:none;background:#fff}
.page-reviewer-text{margin:0;font-size:.85rem;line-height:1.35;color:var(--oz-gray)}
.page-reviewer-text a{color:var(--oz-navy);font-weight:600;text-decoration:none}
.page-reviewer-text a:hover{color:#2b7fd4;text-decoration:underline}
.page-reviewer-date{color:var(--oz-gray-soft)}

/* profile page: portrait + credentials card */
.oz-profile{display:flex;gap:1.5rem;align-items:flex-start;background:#fff;
  border:1px solid var(--oz-outline);border-radius:var(--oz-radius);padding:1.5rem;margin:0 0 1.5rem}
.oz-profile img{width:140px;height:140px;border-radius:var(--oz-radius);object-fit:cover;flex:none}
.oz-profile-role{color:var(--oz-gray);margin:.15rem 0 .6rem}
.oz-profile h1{margin:0;border-bottom:0}
@media (max-width:575.98px){.oz-profile{flex-direction:column}.oz-profile img{width:100%;height:auto}}