* { box-sizing: border-box; }
html { scroll-padding-top: var(--header-height); }
body { margin: var(--zero); color: var(--color-ink); background: var(--color-paper); font: var(--font-size-body)/var(--leading-normal) var(--font-sans); }
body:has(dialog[open]) { overflow: hidden; }
[hidden] { display: none !important; }
img { display: block; max-width: var(--full); object-fit: contain; }
button, input { font: inherit; }
button, .button, input, nav a, .header-actions a, .brand { min-height: var(--touch); }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12); padding: var(--space-8) var(--space-16); border: var(--border-hair) solid var(--color-ink); border-radius: var(--radius-btn); color: var(--color-ink); background: var(--color-paper); text-decoration: none; cursor: pointer; }
button:hover, .button:hover { background: var(--color-mint); }
button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
a { color: var(--color-link); text-underline-offset: var(--space-4); }
a:hover { text-decoration-thickness: var(--border-thick); }
:focus-visible { outline: var(--border-rule) solid var(--color-focus); outline-offset: var(--space-4); }
input { width: var(--full); padding: var(--space-12); border: var(--border-hair) solid var(--color-line); border-radius: var(--radius-none); background: var(--color-paper); color: var(--color-ink); font-size: var(--font-size-body); }
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--color-teal); line-height: var(--leading-heading); font-weight: var(--font-weight-semibold); margin: var(--zero) var(--zero) var(--space-16); text-wrap: balance; }
h1 { font-size: var(--font-size-display-h1); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--font-size-display-h2); }
h3 { font-size: var(--font-size-display-h3); }
p { margin: var(--zero) var(--zero) var(--space-16); }
figure { margin: var(--zero); }
.caption, small { font-size: var(--font-size-xs); }
.eyebrow { font-size: var(--font-size-sm); letter-spacing: var(--tracking-wide); font-weight: var(--font-weight-semibold); }
.section { padding: var(--space-section-standard) var(--page-margin); }
.full { width: var(--full); }
.action { background: var(--color-action); color: var(--color-on-action); font-weight: var(--font-weight-semibold); }
.skip { position: fixed; top: var(--space-8); left: var(--space-8); z-index: var(--z-toast); padding: var(--space-12); background: var(--color-paper); transform: translateY(-200%); }
.skip:focus { transform: none; }
.announcement { display: flex; justify-content: space-between; gap: var(--space-16); background: var(--color-teal); color: var(--color-on-dark); padding: var(--space-8) var(--page-margin); font-size: var(--font-size-xs); }
.site-header { position: sticky; top: var(--zero); z-index: var(--z-header); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24); padding: var(--space-12) var(--page-margin); min-height: var(--header-height); background: var(--color-paper); border-bottom: var(--border-hair) solid var(--color-line); }
.site-header.compact { min-height: var(--header-compact); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: var(--logo-width); height: auto; }
.site-header nav, .header-actions, footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.site-header nav a, .header-actions a, footer nav a { display: inline-flex; align-items: center; text-decoration: none; font-size: var(--font-size-sm); white-space: nowrap; }
.header-actions { margin-left: auto; gap: var(--space-12); }
.header-actions a { gap: var(--space-4); }
.menu-toggle { display: none; }
.majority { padding: var(--space-12) var(--page-margin); background: var(--color-mist); display: flex; gap: var(--space-16); align-items: center; justify-content: space-between; border-bottom: var(--border-hair) solid var(--color-line); }
.majority p { margin: var(--zero); font-size: var(--font-size-sm); }
.majority div { display: flex; gap: var(--space-8); flex-shrink: 0; }
.majority button { font-size: var(--font-size-sm); }
.hero { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-mist); }
.hero-copy { padding: var(--space-section-standard) calc(var(--page-margin) * 2); align-self: center; }
.hero h1 { font-size: var(--font-size-display-hero); line-height: var(--leading-display); }
.hero-copy>p { max-width: var(--measure); }
.hero-copy .caption { margin-top: var(--space-32); }
.hero figure { position: relative; min-height: var(--hero-height); }
.hero img { width: var(--full); height: var(--full); position: absolute; object-fit: cover; }
.hero figcaption { position: absolute; bottom: var(--space-16); left: var(--space-16); padding: var(--space-8) var(--space-12); background: var(--color-paper); font-size: var(--font-size-xs); }
.reassurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); padding: var(--space-24) var(--page-margin); border-bottom: var(--border-hair) solid var(--color-line); }
.reassurance p { font-size: var(--font-size-sm); margin: var(--zero); }
.reassurance strong { display: block; color: var(--color-teal); font-size: var(--font-size-body); margin-bottom: var(--space-4); }
.editorial { background: var(--color-mint); }
.editorial p { max-width: var(--measure); }
.editorial h2 { color: var(--color-ink); }
.toolbar, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-24); }
.breadcrumb { display: flex; gap: var(--space-4); font-size: var(--font-size-sm); margin-bottom: var(--space-16); }
.breadcrumb a { text-decoration: none; }
.sort-field { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-sm); }
.sort-field select { min-height: var(--touch); border: var(--border-hair) solid var(--color-line); border-radius: var(--radius-none); padding: var(--space-8) var(--space-12); background: var(--color-paper); color: var(--color-ink); font: inherit; }
.site-header nav a[aria-current="page"] { border-bottom: var(--border-rule) solid var(--color-teal); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-40) var(--space-24); }
.cross-sell .grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.card { min-width: var(--zero); display: flex; flex-direction: column; }
.card-media { position: relative; display: block; background: var(--color-mist); border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--space-16); }
.card-media img { width: var(--full); height: auto; aspect-ratio: 5 / 4; object-fit: contain; padding: var(--space-12); mix-blend-mode: multiply; transition: transform var(--duration-feedback) var(--ease-out); }
.card-media:hover img { transform: scale(1.03); }
.media-placeholder { aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center; padding: var(--space-16); text-align: center; font-size: var(--font-size-sm); color: var(--color-stone); }
.card h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-8); }
.card h3 a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site-header nav a { min-width: var(--touch); }
.card p { font-size: var(--font-size-sm); margin-bottom: var(--space-8); }
.card>.button { margin-top: auto; }
.price { font-weight: var(--font-weight-semibold); }
.segment { margin-top: var(--space-48); }
.section-heading a.button { flex-shrink: 0; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((var(--full) - 3 * var(--space-24)) / 4); gap: var(--space-40) var(--space-24); }
.row-scroll { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-8); }
.row-scroll .card { scroll-snap-align: start; }
.dosages ul { list-style: none; margin: var(--zero) var(--zero) var(--space-16); padding: var(--zero); display: flex; flex-wrap: wrap; gap: var(--space-8); }
.dosages a { display: inline-flex; align-items: center; min-height: var(--touch); }
.adult-note { font-size: var(--font-size-xs); }
.badge { display: inline-block; border-radius: var(--radius-pill); padding: var(--space-4) var(--space-12); background: var(--color-mist); color: var(--color-teal); font-size: var(--font-size-xs); }
footer { background: var(--color-mist); border-top: var(--border-hair) solid var(--color-line); }
footer nav { flex-wrap: wrap; margin: var(--space-24) var(--zero); }
dialog { padding: var(--space-32); width: min(var(--dialog-width), calc(var(--full) - var(--space-32))); max-width: var(--full); max-height: var(--dialog-height); color: var(--color-ink); background: var(--color-paper); border: var(--border-hair) solid var(--color-line); }
dialog::backdrop { background: color-mix(in srgb, var(--color-teal) 65%, var(--color-transparent)); }
.close { display: flex; margin-left: auto; margin-bottom: var(--space-24); }
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-section-colonnes); }
.detail>figure { background: var(--color-mist); }
.detail>figure img, .detail>figure .media-placeholder { width: var(--full); max-height: var(--hero-height); aspect-ratio: 1; }
.detail>figure figcaption { padding: var(--space-16); font-size: var(--font-size-xs); }
.detail .buy { justify-content: space-between; margin: var(--space-16) var(--zero); }
.detail h2 { font-size: var(--font-size-display-h1); }
.tabs { display: flex; gap: var(--space-8); flex-wrap: wrap; border-bottom: var(--border-hair) solid var(--color-line); margin: var(--space-32) var(--zero) var(--space-16); }
.tabs [aria-selected="true"] { background: var(--color-teal); color: var(--color-paper); }
.tab-panel { padding: var(--space-16) var(--zero); }
.documents a { display: flex; align-items: center; min-height: var(--touch); }
.notice, .empty, .error { padding: var(--space-24); background: var(--color-mist); border: var(--border-hair) solid var(--color-line); margin-bottom: var(--space-24); }
.error { color: var(--color-alert); }
.drawer { margin: var(--zero) var(--zero) var(--zero) auto; width: min(var(--drawer-width),var(--full)); height: var(--viewport-height); max-height: var(--viewport-height); padding: var(--zero); }
.drawer[open] { display: flex; flex-direction: column; }
.drawer-heading { display: flex; gap: var(--space-12); align-items: center; justify-content: space-between; padding: var(--space-24); border-bottom: var(--border-hair) solid var(--color-line); }
.drawer-heading h2 { margin: var(--zero); font-size: var(--font-size-display-h3); }
.drawer-body { padding: var(--space-24); overflow-y: auto; flex: 1; }
.drawer-footer { padding: var(--space-16) var(--space-24); border-top: var(--border-hair) solid var(--color-line); background: var(--color-mist); }
.drawer-footer .upsell { display: flex; align-items: center; gap: var(--space-12); font-size: var(--font-size-sm); margin-bottom: var(--space-12); }
.cart-line { padding: var(--space-16) var(--zero); border-bottom: var(--border-hair) solid var(--color-line); display: grid; grid-template-columns: var(--space-80) 1fr; gap: var(--space-16); }
.cart-line img { width: var(--space-80); }
.cart-line h3 { font-size: var(--font-size-body); }
.stepper { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); }
.stepper button { min-width: var(--touch); }
progress { width: var(--full); accent-color: var(--color-teal); height: var(--space-12); }
form { display: grid; gap: var(--space-16); }
.search-form { grid-template-columns: 1fr auto; margin-bottom: var(--space-32); }
.search-form label { grid-column: 1 / -1; }
#toast { position: fixed; inset: auto auto var(--space-24) 50%; transform: translateX(-50%); margin: var(--zero); z-index: var(--z-toast); max-width: calc(var(--full) - var(--space-32)); width: max-content; border: var(--border-hair) solid var(--color-paper); padding: var(--space-16) var(--space-24); background: var(--color-teal); color: var(--color-on-dark); }
.skeleton { min-height: var(--hero-mobile); background: var(--color-mist); border-radius: var(--radius-card); }
.swatches { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-16); }
.swatch { padding: var(--space-24); border: var(--border-hair) solid var(--color-line); }
.swatch.teal { background: var(--color-teal); color: var(--color-paper); }
.swatch.mint { background: var(--color-mint); }
.swatch.coral { background: var(--color-coral); }
.sample-small { font-size: var(--font-size-sm); }
.sample-caption { font-size: var(--font-size-2xs); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.dosages h3 { font-size: var(--font-size-sm); font-family: var(--font-sans); font-weight: var(--font-weight-semibold); color: var(--color-ink); margin-bottom: var(--space-8); }
.dosages ul { display: flex; flex-wrap: wrap; gap: var(--space-12); list-style: none; padding: var(--zero); margin: var(--zero) var(--zero) var(--space-24); }
.dosages a { display: inline-flex; align-items: center; min-height: var(--space-44); }