/* apotheekhofdael skin — "Hofdael Clinical" v3 (AH-0014, 2026-08-10).
   Layers on the shared build. Spec: doc/design/home/claude/ApotheekHofdael.dc.html
   (case 12: the mockup is the spec), assets doc/design/home/{logo,hero-image}.png.
   White clinical base, steel-blue structure, pale-blue section bands, mint review
   band, pill-shaped blue CTAs, photo hero, ONE-ROW white header (v2's solid blue
   nav strip is retired), leader-dot table of contents, light footer with seals. */
@import url("/static/common/css/main.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ── tokens ── */
:root{
  --ah-primary:#1e3a52;          /* deep steel — headings, wordmark */
  --ah-blue:#2b7cb0;             /* buttons, links, active nav */
  --ah-blue-deep:#24688f;
  --ah-blue-bright:#3d8fc4;
  --ah-blue-num:#2b6b96;         /* section number discs + table CTAs */
  --ah-blue-head:#2f7cb5;        /* hero headline steel blue */
  --ah-blue-pale:#e9f2f8;        /* treatment-options band */
  --ah-hero-tint:#e9f4f7;        /* hero wash */
  --ah-mint:#cfe5df;             /* reviews band */
  --ah-stat:#dcefe6;             /* NL-incidence callout */
  --ah-stat-line:#b9dbcb;
  --ah-teal:#2f9e8f;
  --ah-teal-deep:#1f7a6d;
  --ah-teal-tint:#d9f2ee;
  --ah-blue-tint:#dcecf5;
  --ah-surface:#ffffff;
  --ah-surface-low:#f5fafc;
  --ah-outline:#e2ecf1;
  --ah-outline-soft:#eef3f6;
  --ah-ink:#24333d;
  --ah-ink-soft:#5b6b76;
  --ah-star:#f0a92f;
  --ah-radius:.65rem;
  --ah-shadow:0 4px 18px -4px rgba(29,61,82,.10);
  --ah-shadow-hover:0 10px 26px -6px rgba(29,61,82,.16);

  /* aliases the SHARED components read */
  --site-primary:           var(--ah-primary);
  --site-primary-container: #234a63;
  --site-secondary:         var(--ah-blue);
  --site-secondary-bright:  var(--ah-blue-bright);
  --site-teal:              var(--ah-teal);
  --site-surface:           var(--ah-surface);
  --site-surface-low:       var(--ah-surface-low);
  --site-container:         var(--ah-blue-pale);
  --site-outline:           var(--ah-outline);
  --site-outline-soft:      var(--ah-outline-soft);
  --site-ink:               var(--ah-ink);
  --site-ink-soft:          var(--ah-ink-soft);
  --site-action:            var(--ah-blue);   /* mockup: blue CTAs, sitewide */
}

/* ── base ── */
body{background:var(--ah-surface);color:var(--ah-ink);font-family:Inter,-apple-system,"Segoe UI",sans-serif;overflow-x:clip}
a:hover{color:#1d5c85}
::selection{background:var(--ah-blue-pale);color:var(--ah-primary)}
h1,h2,h3,h4,h5,h6{font-family:Inter,sans-serif;color:var(--ah-primary)}
/* the shared build rules every h1 with an olive hairline — recolour, don't remove,
   so the underline keeps its role and lands on the v3 palette */
h1{font-weight:800;letter-spacing:-.02em;border-bottom-color:var(--ah-outline)}
h2{font-weight:700;letter-spacing:-.01em}
a{color:var(--ah-blue)}
a:hover{color:var(--ah-blue-deep)}

/* pill-shaped blue actions (mockup CTAs + cart buttons) */
.btn-primary,.btn-success,.add-prod-btn{background:var(--ah-blue);border-color:var(--ah-blue);border-radius:999px;font-weight:600}
.btn-primary:hover,.btn-primary:focus,.btn-success:hover,.btn-success:focus,.add-prod-btn:hover{background:var(--ah-blue-deep);border-color:var(--ah-blue-deep)}
.btn-primary:active,.btn-success:active{transform:scale(.97)}

/* ── header: ONE white row — lockup left, nav inline beside it (v3). The v2 blue
   strip is gone; the row keeps clearance on the right for the fixed cart FAB. ── */
.header-desk{background:#fff;border-bottom:1px solid #e6edf1;box-shadow:none;padding:.9rem 0}
/* the restack targets ONLY the outer row — nav itself is also a .row and must stay
   a flex line (a bare `.header-desk .row` catches both and wraps the links) */
/* margin-inline:0 cancels the bootstrap .row gutter so the lockup starts on the
   same x as the hero band below it, rather than 12px outside it */
.header-desk > .row{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.6rem;row-gap:.7rem;
  margin-inline:0;padding-right:6.5rem}
.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}
.site-lockup{display:inline-flex;align-items:center;gap:.5rem}
.site-lockup-mark img,.site-lockup-mark svg{width:52px;height:52px;object-fit:contain;display:block}
.site-lockup-word svg{height:46px;display:block}
/* the link row */
.header-desk nav{background:transparent;border-radius:0;margin-bottom:0!important;
  justify-content:flex-start!important;padding:0;box-shadow:none;column-gap:1rem;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{display:inline-flex;align-items:center;gap:.45rem;
  color:var(--ah-ink);font-weight:500;font-size:.8rem;line-height:1.3;padding:0 0 2px;
  border-bottom:2px solid transparent}
.header-desk nav a:hover,.header-desk .dropdown>a:hover{color:var(--ah-blue);text-decoration:none;
  border-bottom-color:var(--ah-blue)}
/* tilted capsule swatches marking the two money pages, per the mock */
.header-desk nav a[href$="/viagra"]::before,.header-desk nav a[href$="/cialis"]::before{
  content:"";flex:0 0 auto;width:17px;height:11px;border-radius:50%;transform:rotate(-20deg);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.12)}
.header-desk nav a[href$="/viagra"]::before{background:linear-gradient(160deg,#7fb2dd 0%,#3f7fbe 100%)}
.header-desk nav a[href$="/cialis"]::before{background:linear-gradient(160deg,#f7c46a 0%,#e08a2b 100%)}
#mobile-header{background:#fff;border-bottom:1px solid var(--ah-outline-soft)}
/* cart FAB: fleet-standard disc + count badge, recoloured to the v3 palette */
.my-cart-icon.cart-fab{background:var(--ah-blue);box-shadow:0 6px 18px rgba(24,72,104,.22)}
.my-cart-icon.cart-fab:hover{background:var(--ah-blue-deep)}
.qty-badge-header{background:var(--ah-teal)}
.folded-ribbon .foreground.ribbon{background:var(--ah-teal)}
.folded-ribbon .background.trapezoid{border-color:transparent transparent #1f7a6d}

/* ── hero: home_base renders it as .header-hero (.col-md-5 copy + an EMPTY
   .col-md-7 — the photo's canvas). Photo right, copy left.

   The band is BOUNDED, not full-bleed: the mock caps the whole page at 1280px and
   the tinted band stops with it. `margin-inline:0` cancels the bootstrap .row
   gutter so the band's edges land exactly on the header bar's above it, and the
   copy is inset from the band edge the way the mock's clamp(24px,6vw,80px) is. ── */
.page-home .header-hero{position:relative;isolation:isolate;min-height:500px;
  margin-inline:0;padding-inline:clamp(1rem,4.2vw,4rem);
  padding-top:5.25rem;padding-bottom:5.25rem;align-items:center;
  background:linear-gradient(100deg,var(--ah-hero-tint) 0%,var(--ah-hero-tint) 42%,#dfeef3 100%)}
/* Photo pane, then a veil feathering its left edge into the wash so the copy always
   sits on flat colour. Both are position:absolute — a static pseudo-element would
   join the flex row as a third column and shove the layout sideways. `isolation`
   makes .header-hero a stacking context, so z-index:-1 paints them above its own
   background but still under the two content columns. */
.page-home .header-hero::before,.page-home .header-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.page-home .header-hero::before{inset:0 0 0 34%;
  background:url("/images/hero-pharmacist.jpg") right center/cover no-repeat}
/* the veil starts LEFT of the photo and holds full opacity past its edge — a veil
   that is already fading where the photo begins leaves a visible vertical seam */
.page-home .header-hero::after{inset:0 0 0 30%;
  background:linear-gradient(90deg,var(--ah-hero-tint) 0%,var(--ah-hero-tint) 18%,rgba(233,244,247,.72) 42%,rgba(233,244,247,0) 78%)}
/* text-wrap:balance rather than a hard max-width — it lands the mock's two even
   lines without pinning the break to this particular headline's length */
.page-home .header-hero .header-title{font-size:2.75rem;line-height:1.16;font-weight:700;letter-spacing:-.5px;
  text-wrap:balance;
  color:var(--ah-blue-head);-webkit-text-fill-color:var(--ah-blue-head);border-bottom:0;margin-bottom:1.6rem}
.page-home .hero-subline{font-size:1.03rem;line-height:1.6;color:#3a4c58;max-width:24em;margin:0 0 2.1rem}
.page-home .btn.hero-cta,.page-home .header-hero .btn{background:var(--ah-blue);border-color:var(--ah-blue);color:#fff;font-weight:500;
  font-size:.91rem;padding:.81rem 1.63rem;border-radius:24px;box-shadow:var(--ah-shadow)}
.page-home .btn.hero-cta:hover,.page-home .header-hero .btn:hover{background:var(--ah-blue-deep);border-color:var(--ah-blue-deep);color:#fff;box-shadow:var(--ah-shadow-hover)}
/* ── mobile clearance (same fix as francemeds FR-0020): the shared #mobile-header
   is position:fixed, and the shared build only compensates with `main{padding-top:70px}`.
   That leaves anything BEFORE <main> — the home hero, inner-page breadcrumbs — sitting
   under the bar, while <main>'s stand-in gap doubles up below it. Pushing <body> down
   by the bar's height clears every page, so main keeps only a normal content gap. ── */
@media (max-width: 991.98px){
  body{padding-top:69px}
  main{padding-top:1.25rem}
}
@media (max-width: 768px){
  /* The mock's cap is min(1280px, 100vw) — on a phone that is the full screen, so
     the band goes edge to edge again rather than sitting inset inside the two
     nested .container paddings. bootstrap's .py-4 is !important, so the hero's own
     block padding has to be too. */
  .page-home .header-hero{min-height:0;padding-block:2.5rem!important;
    margin-inline:calc(50% - 50vw);padding-inline:clamp(1.25rem,6vw,2rem)}
  /* one stacked pane on phones: photo across the whole band, veiled top-to-bottom */
  .page-home .header-hero::before{inset:0}
  .page-home .header-hero::after{inset:0;
    background:linear-gradient(180deg,rgba(233,244,247,.93) 0%,rgba(233,244,247,.76) 100%)}
  .page-home .header-hero .header-title{font-size:2rem}
}

/* ── home: content column goes full width; bands manage their own canvas ── */
.ah-band{padding:3.25rem 0 3.5rem}
.ah-band--blue,.ah-band--mint,.ah-band--faq{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
.ah-band--blue{background:var(--ah-blue-pale)}
/* padding-BLOCK only: the shorthand would reset the padding-inline that gives the
   full-bleed band its content inset, and the cards would run off both edges */
.ah-band--mint{background:var(--ah-mint);padding-block:3rem 3.38rem}
#intro{padding-bottom:.5rem}
#oorzaken-intro{padding-bottom:0}
#oorzaken-intro h2,#kopen h2{font-size:1.31rem;font-weight:700;letter-spacing:-.2px;margin-bottom:.88rem}
#oorzaken-intro p,#kopen p{font-size:.88rem;line-height:1.8;color:#4c5f6b}
#oorzaken-intro p{margin-bottom:1.5rem}
.ah-section-title{margin-bottom:1.6rem;font-size:1.5rem;font-weight:700;letter-spacing:-.3px;
  display:flex;align-items:center;gap:.85rem}
.ah-num{display:inline-grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--ah-blue-num);color:#fff;font-size:.81rem;font-weight:700}
.ah-center{text-align:center;display:block}

/* ── table of contents: numbered rows with dotted leaders (v3 replaces the v2
   pill chips). Numbers come from a CSS counter so the markup stays a plain <ol>
   and the printed 01/02 can never drift out of step with the list. ── */
.ah-toc-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;
  max-width:760px;padding-bottom:.85rem;border-bottom:2px solid var(--ah-primary)}
.ah-page-kicker{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ah-primary);margin:0}
.ah-toc-label{font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:#93a5b0}
.ah-toc{list-style:none;counter-reset:ah-toc;padding:0;margin:0 0 2rem;max-width:760px}
/* the shared build gives every `.block li` a blue disc and a 20px indent; the TOC
   draws its own numbers, so both are cancelled here */
.ah-toc li{counter-increment:ah-toc;padding-left:0;border-bottom:1px solid var(--ah-outline-soft)}
.ah-toc li::before{content:none}
/* right padding reserves the arrow's lane so the leader stops short of it */
.ah-toc a{display:flex;align-items:baseline;gap:1rem;padding:.94rem 1.9rem .94rem 0;
  color:var(--ah-primary);font-size:.91rem;font-weight:600;text-decoration:none}
.ah-toc a::before{content:counter(ah-toc,decimal-leading-zero);flex:0 0 auto;width:22px;
  font-size:.75rem;font-weight:700;letter-spacing:.5px;color:#9db3c1}
/* the leader eats the slack between label and arrow, so rows align at both ends */
.ah-toc a::after{content:"";flex:1 1 auto;height:1px;border-bottom:1px dotted #cddbe4;
  transform:translateY(-4px)}
.ah-toc a:hover{color:var(--ah-blue);text-decoration:none}
.ah-toc li{position:relative}
.ah-toc li::after{content:"\2193";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  color:#9db3c1;font-size:.75rem;pointer-events:none}

/* factor list */
.ah-factor-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
@media (max-width: 900px){.ah-factor-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 576px){.ah-factor-list{grid-template-columns:1fr}}
.ah-factor-list li{display:flex;align-items:flex-start;gap:.75rem;padding:1.13rem 1.25rem;
  background:#f6fafc;border:1px solid #e6eff4;border-radius:.5rem;
  font-size:.84rem;line-height:1.55;color:#34505f}
/* position:static is the repair — the shared `.block li::before` absolutely
   positions its bullet, which drops out of this flex row and parks at the card's
   left edge instead of leading the text */
.ah-factor-list li::before{content:'';position:static;flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--ah-blue);margin-top:.44rem;transform:none}

/* 4-card info grid (mockup) */
.ah-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media (max-width: 992px){.ah-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 576px){.ah-cards{grid-template-columns:1fr}}
.ah-card{background:#fff;border:1px solid var(--ah-outline);border-radius:.63rem;padding:1.5rem 1.38rem 1.63rem;transition:box-shadow .15s}
.ah-card:hover{box-shadow:var(--ah-shadow)}
.ah-card-avatar{width:66px;height:66px;border-radius:50%;object-fit:cover;margin-bottom:1.13rem;border:2px solid var(--ah-blue-pale)}
.ah-card h3{font-size:.94rem;font-weight:700;line-height:1.35;margin-bottom:.75rem}
.ah-card p{font-size:.81rem;line-height:1.75;color:var(--ah-ink-soft);margin:0;overflow-wrap:break-word;hyphens:auto}

/* treatment options 2x2 with line icons */
.ah-options{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width: 768px){.ah-options{grid-template-columns:1fr}}
.ah-option{background:#fff;border:0;border-radius:.63rem;padding:1.5rem 1.63rem 1.63rem}
.ah-option h3{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:.75rem;margin-bottom:1.13rem}
.ah-icon{width:26px;height:26px;flex:0 0 auto}
.ah-option p{font-size:.84rem;line-height:1.75;color:var(--ah-ink-soft);margin:0}

/* NL-stat callout */
.ah-stat{background:var(--ah-stat);border:1px solid var(--ah-stat-line);border-left:1px solid var(--ah-stat-line);
  border-radius:.63rem;padding:1.63rem 2.13rem 1.38rem;margin:1.63rem 0 0;text-align:center}
.ah-stat p{margin:0 0 .63rem;font-size:.88rem;line-height:1.75;color:#2a4a3d}
.ah-stat footer{font-size:.78rem;font-style:italic}
.ah-stat footer a{color:var(--ah-blue-num)}

/* comparison table (mockup module): tinted label rail on the left, the two drug
   columns carrying their pack shot in the header */
.ah-compare{background:#fff;border:1px solid var(--ah-outline);border-radius:.75rem;box-shadow:none;
  overflow:hidden;margin-bottom:2.1rem}
.ah-compare-table{width:100%;border-collapse:collapse}
.ah-compare-table th{background:var(--ah-surface-low);padding:1.63rem 1rem 1.25rem;text-align:center}
.ah-compare-table th:first-child{width:220px}
/* the pack shots are JPEGs on white — multiply drops that square into the tinted
   header instead of stamping a white tile on it */
.ah-compare-table th img{width:120px;height:92px;object-fit:contain;display:block;margin:0 auto .75rem;mix-blend-mode:multiply}
.ah-compare-table th span{color:var(--ah-primary);font-weight:700;font-size:.88rem}
.ah-compare-table td{padding:.94rem 1rem;border-top:1px solid var(--ah-outline-soft);text-align:center;
  font-size:.84rem;color:#4c5f6b}
.ah-compare-table td:first-child{width:220px;text-align:left;padding-left:1.25rem;font-weight:700;
  color:var(--ah-primary);background:var(--ah-surface-low)}
/* the design tints by COLUMN (label rail / drug A / drug B); the sitewide
   `tr:nth-child(even) td` zebra stripe cuts across that, so column 2 restates
   its own white — first/last-child already outrank the stripe */
.ah-compare-table td:nth-child(2){background:#fff}
.ah-compare-table td:last-child{background:#fbfdfe}
.ah-compare-table tr:last-child td{padding:1.25rem 1rem}
.btn.ah-compare-cta{background:var(--ah-blue-num);border-color:var(--ah-blue-num);
  padding:.69rem 2.13rem;border-radius:22px;font-size:.84rem;font-weight:600}
.btn.ah-compare-cta:hover{background:#235b81;border-color:#235b81}
@media (max-width: 700px){
  .ah-compare{overflow-x:auto}
  .ah-compare-table th:first-child,.ah-compare-table td:first-child{width:auto}
}

/* aspect prose, two columns */
.ah-aspects{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 2rem}
@media (max-width: 768px){.ah-aspects{grid-template-columns:1fr}}
.ah-aspects h3{font-size:.94rem;font-weight:600;color:#2b5b7d;margin:0 0 .5rem}
.ah-aspects p{font-size:.84rem;line-height:1.7;color:var(--ah-ink-soft);margin:0}

/* closing note under the comparison, ruled off from the aspect grid */
#comparison > h2.mt-4{font-size:1.19rem;font-weight:700;margin-top:2.75rem!important;padding-top:1.9rem;
  border-top:1px solid var(--ah-outline-soft)}
#comparison > h2.mt-4 + p{font-size:.88rem;line-height:1.75;color:#4c5f6b}

/* FAQ: two-column details accordions (native, no JS). Multi-column rather than a
   grid — a grid couples the two columns row by row, so a two-line question on the
   left would open a gap beside the one-line question on its right. Columns also
   keep document order reading top-to-bottom, then over. */
.ah-faq{columns:2;column-gap:2rem}
@media (max-width: 768px){.ah-faq{columns:1}}
.ah-faq-item{break-inside:avoid}
.ah-faq-item{background:#fff;border:1px solid #dde7ec;border-radius:.5rem;padding:0;margin-bottom:.75rem;overflow:hidden}
.ah-faq-item summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--ah-primary);
  padding:.94rem 2.75rem .94rem 1.13rem;list-style:none;position:relative}
.ah-faq-item summary::-webkit-details-marker{display:none}
.ah-faq-item summary::after{content:'▾';position:absolute;right:1.13rem;top:.94rem;color:var(--ah-primary);
  font-size:.75rem;transition:transform .15s}
.ah-faq-item[open] summary::after{transform:rotate(180deg)}
.ah-faq-item p{padding:0 1.13rem 1rem;margin:0;color:var(--ah-ink-soft);font-size:.84rem;line-height:1.7}

/* reviews: mint band, three white cards, gold stars (source ratingValue: 5) */
.ah-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media (max-width: 992px){.ah-reviews{grid-template-columns:1fr}}
.ah-review{background:#fff;border:0;border-radius:.63rem;
  padding:1.38rem 1.5rem 1.5rem;box-shadow:none;position:relative;
  display:flex;flex-direction:column;gap:1rem}
.ah-review::after{content:'\201D';position:absolute;top:.5rem;right:1rem;font-size:2.4rem;color:#d7e3e7;font-family:Georgia,serif;line-height:1}
.ah-stars{color:var(--ah-star);letter-spacing:.15em;font-size:.94rem;display:block}
.ah-review p{font-size:.84rem;line-height:1.7;color:#3a4c58;margin:0;max-width:90%}
.ah-review strong{color:var(--ah-primary);font-size:.84rem;margin-top:auto}
#reviews .ah-section-title{color:#1d3b3d}

/* ── generic content furniture (inner pages) ── */
.card,.panel,.newsItem{background:#fff;border:1px solid var(--ah-outline);border-radius:var(--ah-radius);box-shadow:none}
.card:hover{box-shadow:var(--ah-shadow)}
.card-header,.panel-heading{background:transparent;border-bottom:1px solid var(--ah-outline-soft);font-weight:700;color:var(--ah-primary)}
article.hentry,#main-content{max-width:1024px;margin:0 auto}
table{border-color:var(--ah-outline)}
th{background:var(--ah-blue-pale);color:var(--ah-primary)}
td,th{border-color:var(--ah-outline-soft)}
tr:nth-child(even) td{background:var(--ah-surface-low)}
.price-table .btn,.prices .btn{border-radius:999px}
.uc-price{color:var(--ah-primary);font-weight:700}
.faq-accordion .accordion-item,.accordion-item{border:1px solid var(--ah-outline);border-radius:var(--ah-radius);overflow:hidden}
.accordion-button{font-weight:600;color:var(--ah-primary)}
.accordion-button:not(.collapsed){background:var(--ah-blue-pale);color:var(--ah-primary)}
.reviews-wall{background:var(--ah-mint);border-radius:var(--ah-radius);padding:1.5rem}
.reviews-wall .card{background:#fff;border:1px solid var(--ah-outline-soft)}
.rating .fa-star,.stars,.review-stars{color:var(--ah-star)}
.contact-form-fields input,.contact-form-fields textarea{border:1px solid var(--ah-outline);border-radius:var(--ah-radius);padding:.55rem .75rem}
.contact-form-fields input:focus,.contact-form-fields textarea:focus{outline:2px solid var(--ah-blue-bright);border-color:var(--ah-blue-bright)}
.contact-form-sent{background:var(--ah-mint);border:1px solid var(--ah-teal);border-radius:var(--ah-radius);color:var(--ah-primary)}
.contact-form .btn{border-radius:999px}
.hentry img{max-width:100%;height:auto;border-radius:var(--ah-radius)}
blockquote{border-left:4px solid var(--ah-blue);background:var(--ah-blue-pale);padding:.75rem 1rem;border-radius:0 var(--ah-radius) var(--ah-radius) 0}

/* ── footer: pale plate, structured columns, seals (mockup) ── */
footer.section.footer,.footer{background:#f7fafc;color:#4c5f6b;border-top:1px solid #e6edf1;padding-top:2.88rem}
.footer .h3,.footer h4,.footer .footer-title{display:block;color:var(--ah-primary);font-weight:700;font-size:.84rem;margin-bottom:1.13rem}
.footer a,.footer-link a{color:#4c5f6b;font-size:.81rem}
.footer a:hover,.footer-link a:hover{color:var(--ah-blue)}
.footer-link{list-style:none;padding-left:0}
.footer-link li{padding:.34rem 0;font-size:.81rem}
/* 267px = three 82px tiles plus two gaps, so five seals sit 3 + 2 rather than
   wrapping 2 / 2 / 1; max-width lets it fall back to two per row in a narrow column */
.footer-seals{display:flex;flex-wrap:wrap;gap:.63rem;align-items:center;width:267px;max-width:100%;margin-top:.5rem}
/* Explicit box: these SVGs expose no intrinsic ratio as <img>, width:auto collapses.
   No padding — each seal is drawn on its own 82x46 canvas with the mock's internal
   spacing baked in, so the tile chrome here is only the plate around it. */
.footer-seals img{width:82px;height:46px;object-fit:contain;background:#fff;border:1px solid #e2e9ee;border-radius:.38rem;box-shadow:0 1px 2px rgba(30,58,82,.05)}
.footer .copy{border-top:1px solid #e6edf1;margin-top:2.5rem;padding:1.13rem 0 1.5rem;font-size:.78rem;color:#6b7f8b;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}

.ship-chip a{display:inline-block;font-size:.82rem;color:var(--ah-teal-deep);background:var(--ah-teal-tint);border-radius:999px;padding:.4rem .9rem;text-decoration:none;margin-bottom:1rem}
.ship-chip a:hover{background:#bfe5dd;color:var(--ah-teal-deep)}
.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 */
.price-panel .ship-chip{margin:1.25rem 0 0}
.price-panel .ship-chip a{margin-bottom:0}
.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}
  main .col-12.col-md-9{flex:0 0 100%;max-width:1048px}  /* 1024px content + col padding */
  .container:has(> nav[aria-label=breadcrumb]){max-width:1048px}
  /* home trust strip breaks out of the 958 band to match the hero width */
  .trust-panel{width:min(1116px,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 two families asked for:
   products are page-product, wiki is page-guide plus the 31 page-hub landings. ── */
:is(.page-product,.page-guide,.page-hub) .article-body ul{list-style:none;padding-left:0;margin:2rem 0 2rem 1rem}
:is(.page-product,.page-guide,.page-hub) .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) .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) .article-body ul ul{padding-left:1rem;margin:.7rem 0 0}
:is(.page-product,.page-guide,.page-hub) .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) .article-body ol{padding-left:2rem;margin:2rem 0 2rem 1rem}
:is(.page-product,.page-guide,.page-hub) .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) .article-body ol li::marker{color:var(--ah-blue);font-weight:700}
:is(.page-product,.page-guide,.page-hub) .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) .article-body .article-toc ul{margin:0;padding-left:0}
:is(.page-product,.page-guide,.page-hub) .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) .article-body .article-toc li::before{content:none}
:is(.page-product,.page-guide,.page-hub) .article-body .article-toc li ul{margin-left:.9rem;padding-left:0}


/* secondary CTA (hero + product hero): outline pill — pairs with the blue primary */
.btn.hero-cta2{border:2px solid var(--ah-primary);color:var(--ah-primary);font-weight:700;
  padding:.6rem 1.3rem;background:#fff;border-radius:999px}
.btn.hero-cta2:hover,.btn.hero-cta2:focus{background:var(--ah-primary);color:#fff}