/* Hallmark · macrostructure: Index-First · tone: technical editorial · anchor hue: emerald
   genre: editorial · Index-First (reference),
   Catalogue (commerce), Long Document (reading) · design-system: design.md
   designed-as-app: Causa · N1b=existing cluster/no dropdown/always-solid
   Ft3=real sitemap/no bullets · F6=square/3-up/Add · F3=2 columns/row rules
   C3=solid underline/colour shift/arrow · H2=6:6/photo/negative-space
   pre-emit critique: P4 H4 E4 S5 R4 V4
   Additive layer: no changes to checkout, payment, order or cart logic. */

body{font-size:var(--text-base);line-height:var(--leading-body);}
h1,h2,h3{font-style:normal;min-width:0;overflow-wrap:anywhere;}
:is(.fine,.section-lede,.foot-note,.foot-legal,.form-note){line-height:1.65;}
.fine{font-size:var(--text-sm);}
.section-lede{max-width:65ch;font-size:var(--text-lg);}
:is(a,button,input,select,textarea,summary):focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--space-1);}
.btn,.icon-btn,.filter,.menu-btn{min-height:var(--control-height);}
.icon-btn{min-width:var(--control-height);}
.btn{font-size:var(--text-sm);letter-spacing:var(--tracking-ui);white-space:nowrap;}
.btn:active{transform:translateY(var(--rule-hair));}
.nav-links{gap:var(--space-md);}
.nav-links a{font-size:var(--text-sm);min-height:var(--control-height);display:inline-flex;align-items:center;position:relative;}
.nav-links a[aria-current="page"]{color:var(--color-ink);}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;bottom:var(--space-1);height:var(--rule-fine);background:var(--color-accent);left:0;right:0;}
.mobile-nav a{min-height:var(--control-height);display:flex;align-items:center;font-size:var(--text-base);}
.mobile-nav a[aria-current="page"]{color:var(--color-accent);}
.mobile-nav a,.foot nav a,.nav-links a{white-space:nowrap;}
.icon-btn:active{background:var(--color-paper-2);}
.icon-btn:disabled{opacity:.55;cursor:not-allowed;}
.announce p{font-size:var(--text-xs);line-height:1.5;}
.crumbs .wrap{font-size:var(--text-xs);gap:var(--space-2);flex-wrap:wrap;}
.foot{padding-top:var(--space-2xl);}
.foot-grid{gap:var(--space-xl);}
.foot-note{font-size:var(--text-sm);max-width:35ch;}
.foot nav h3{font-size:var(--text-xs);}
.foot nav a{font-size:var(--text-sm);min-height:var(--control-height);display:flex;align-items:center;}
.foot nav{gap:0;}
.foot-legal,.ruo-block{font-size:var(--text-xs);line-height:1.7;}
.prose{max-width:var(--max-w-prose);}
.prose p,.guide-sec p{font-size:var(--text-base);line-height:1.75;}
.facts dt{font-size:var(--text-xs);letter-spacing:0;}
.facts dd{font-size:var(--text-base);overflow-wrap:anywhere;}
.facts,.prose-aside{min-width:0;}
.complist a{display:inline-flex;align-items:center;min-height:var(--control-height);}
.prose-grid{gap:var(--space-xl);}
/* Compound and comparison tables were unstyled. Keep scroll inside a table,
   never the page; SKU rows become labelled records on phones. */
.tw{max-width:100%;overflow-x:auto;margin-block:var(--space-md);overscroll-behavior-inline:contain;}
.lots{width:100%;border-collapse:collapse;line-height:1.55;font-size:var(--text-sm);}
.lots th,.lots td{padding:var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-rule);text-align:left;vertical-align:top;}
.lots th{font:600 var(--text-xs)/1.5 var(--font-ui);color:var(--color-muted);background:var(--color-paper-2);}
.lots td{overflow-wrap:anywhere;}
.lots a{color:var(--color-accent);text-decoration:underline;text-underline-offset:var(--space-1);}
.lots .num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.lots .slug{display:block;font:400 var(--text-xs)/1.6 var(--font-outlier);color:var(--color-muted);}

/* The directory is the content: one scanable row per molecule, not a wall of
   product cards. Chemistry stays separate from commerce. */
.compound-directory{padding-block:var(--space-xl) var(--space-2xl);}
.directory-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-lg);padding-bottom:var(--space-lg);}
.directory-heading>div{min-width:0;}
.directory-heading h1{font-size:var(--directory-title);margin-bottom:var(--space-xs);letter-spacing:var(--track-display);}
.directory-heading>div>p:last-child{max-width:55ch;color:var(--color-muted);}
.directory-total{flex:none;color:var(--color-muted);font-size:var(--text-sm);padding-bottom:var(--space-1);}
.directory-total b{color:var(--color-ink);font-size:var(--text-2xl);font-family:var(--font-strong);margin-right:var(--space-1);font-variant-numeric:tabular-nums;}
.directory-total span{display:block;text-align:right;}
.directory-controls{padding:var(--space-md);background:var(--color-paper-2);border-radius:var(--radius-input);}
.directory-search{max-width:42rem;}
.directory-search>label{display:block;font:600 var(--text-sm)/1.5 var(--font-ui);margin-bottom:var(--space-2);}
.directory-search-field{display:flex;align-items:center;gap:var(--space-xs);min-height:56px;padding-inline:var(--space-sm);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-input);background:var(--color-paper);}
.directory-search-field:focus-within{border-color:var(--color-accent);}
.directory-search-field>svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--color-muted);stroke-width:1.5;}
.directory-search input{min-width:0;width:100%;height:var(--control-height);border:0;background:transparent;color:var(--color-ink);font:400 var(--text-base)/1.5 var(--font-body);padding:0;border-radius:0;}
.directory-search input::placeholder{color:var(--color-muted);}
.directory-search input:focus-visible{outline-offset:0;}
.directory-search input:disabled{opacity:.55;cursor:not-allowed;}
.directory-search button{flex:none;min-height:var(--control-height);min-width:var(--control-height);font:600 var(--text-sm)/1.5 var(--font-ui);color:var(--color-accent);background:none;border:0;cursor:pointer;}
.directory-search button:active{color:var(--color-ink);}
.directory-search button:disabled{opacity:.55;cursor:not-allowed;}
.directory-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-sm);}
.directory-mobile-filter{display:none;}
.directory-mobile-filter select{display:block;width:100%;min-height:48px;margin-top:var(--space-2);padding:var(--space-xs);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--space-2);background:var(--color-paper);color:var(--color-ink);font:400 var(--text-base)/1.5 var(--font-body);}
.directory-mobile-filter select:hover,.directory-mobile-filter select:active{border-color:var(--color-accent);}
.directory-mobile-filter select:disabled{opacity:.55;cursor:not-allowed;}
.directory-filters button{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-height);padding:var(--space-2) var(--space-xs);font:600 var(--text-sm)/1.4 var(--font-ui);color:var(--color-ink);background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--space-2);cursor:pointer;white-space:nowrap;transition:background var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out);}
.directory-filters button span{color:var(--color-muted);font-weight:400;font-variant-numeric:tabular-nums;}
.directory-filters button[aria-pressed="true"]{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent);}
.directory-filters button[aria-pressed="true"] span{color:inherit;}
.directory-filters button:active{transform:translateY(var(--rule-hair));}
.directory-filters button:disabled{opacity:.55;cursor:not-allowed;}
.directory-result-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding-block:var(--space-md) var(--space-sm);font-size:var(--text-sm);color:var(--color-muted);}
.directory-result-bar>a,.directory-reference{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-height);white-space:nowrap;color:var(--color-accent);}
.directory-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.35fr);gap:var(--space-lg);padding-block:var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule);align-items:start;}
.directory-row>*{min-width:0;}
.directory-class{font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-2);}
.directory-name h2{font:700 var(--directory-name)/1.3 var(--font-strong);letter-spacing:var(--tracking-ui);margin:0;overflow-wrap:anywhere;}
.directory-name h2 a{color:var(--color-ink);display:inline-block;min-height:var(--control-height);}
.directory-reference{font-size:var(--text-sm);margin-top:var(--space-1);}
.directory-reference:active,.directory-result-bar>a:active{color:var(--color-ink);}
.directory-reference[aria-disabled="true"],.directory-result-bar>a[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none;}
.directory-facts{display:grid;gap:var(--space-xs);}
.directory-facts dt,.directory-details dt,.directory-size-label{font:500 var(--text-xs)/1.5 var(--font-ui);color:var(--color-muted);margin-bottom:var(--space-1);}
.directory-facts dd,.directory-details dd{font:400 var(--text-sm)/1.6 var(--font-outlier);overflow-wrap:anywhere;color:var(--color-ink);}
.directory-chemistry details{margin-top:var(--space-2);}
.directory-chemistry summary{font-size:var(--text-sm);color:var(--color-muted);cursor:pointer;min-height:var(--control-height);padding-block:var(--space-xs);}
.directory-chemistry details[open] summary{color:var(--color-ink);}
.directory-details{display:grid;gap:var(--space-sm);padding:var(--space-sm);background:var(--color-paper-2);border-radius:var(--space-2);}
.directory-sizes nav{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-xs);}
.directory-sizes nav a{display:flex;align-items:center;gap:var(--space-xs);min-height:var(--control-height);padding:var(--space-2) var(--space-xs);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--space-2);color:var(--color-ink);font:600 var(--text-sm)/1.5 var(--font-ui);font-variant-numeric:tabular-nums;white-space:nowrap;transition:border-color var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out);}
.directory-sizes nav a:active{background:var(--color-paper-2);}
.directory-sizes nav a[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none;}
.directory-sizes nav a span{color:var(--color-muted);font-weight:400;}
.directory-empty{padding-block:var(--space-xl);border-top:var(--rule-hair) solid var(--color-rule);}
.directory-empty h2{font-size:var(--text-xl);}
.directory-empty p{color:var(--color-muted);margin-block:var(--space-xs) var(--space-md);}
.directory-notice{font-size:var(--text-xs);color:var(--color-muted);line-height:1.7;border-top:var(--rule-hair) solid var(--color-rule);padding-top:var(--space-md);}
[data-directory-row][hidden],[data-directory-controls][hidden],[data-directory-clear][hidden],[data-directory-empty][hidden]{display:none;}

/* Shared shop geometry. Preserve product-selector and cart data attributes. */
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg) var(--space-md);margin-top:var(--space-lg);}
.card{border-radius:var(--radius-card);background:transparent;transition:border-color var(--dur-short) var(--ease-out);}
.card:hover{transform:none;}
.card-link{height:auto;flex:1;}
.card-media{aspect-ratio:1;overflow:hidden;background:var(--color-photo);}
.card-art{display:block;width:100%;height:100%;object-fit:contain;}
.card-body{flex:1;gap:var(--space-2);padding:var(--space-md);}
.card-name{font-size:var(--text-lg);min-height:2.6em;line-height:1.3;}
.card-verif,.card-unit,.card-bulk,.remain,.card-kit{font-size:var(--text-xs);}
.card-price{margin-top:var(--space-xs);}
.card-price b{font-family:var(--font-strong);font-size:var(--text-xl);}
.card-unit{flex-basis:100%;line-height:1.5;}
.card-foot{margin-top:auto;padding-top:var(--space-sm);}
.card .card-add{margin:var(--space-xs) var(--space-md) var(--space-md);width:calc(100% - var(--space-md)*2);font-size:var(--text-sm);min-height:48px;}
.home-storefront .band{padding-block:var(--section-y);}
.home-storefront .home-category-shop{padding-block:var(--space-lg);}
.home-storefront .home-popular{padding-top:var(--space-md);}
.home-category-grid{gap:var(--space-md);}
.home-category-label{font-size:var(--text-sm);}
.home-category-tile small{font-size:var(--text-xs);}
.home-storefront .home-product-proof p,.home-product-assay,.home-product-pending,.home-product-lead,.home-product-details{font-size:var(--text-xs);line-height:1.6;}
.home-storefront .home-product h3{font-size:var(--text-lg);min-height:2.6em;}
.home-product-add{min-height:48px;}
.home-product-details{min-height:var(--control-height);display:flex;justify-content:center;align-items:center;margin-top:var(--space-2);}
.home-category-art,.home-product-art,.home-featured-art,.product-art,.bundle-art,.bx-tile-art,.bx-slot img,.pbx-vials img,.co-offer-art{object-fit:contain;}
.product-plate{padding:0;background:var(--color-photo);overflow:hidden;border-radius:var(--radius-card);}
.product-art{width:100%;aspect-ratio:1;height:auto;display:block;}
.product-main h1{font-size:var(--text-3xl);line-height:1.2;}
/* The existing selected-tier pseudo-label was a mojibake "¹3". The selected
   border/fill and aria-pressed already communicate the state. */
.tier[aria-pressed="true"]::after{content:none;}
.product-detail p,.product-detail ul.plain{font-size:var(--text-base);line-height:1.65;}
.bundle{gap:var(--space-sm);border-radius:var(--radius-card);}
.bundle-blurb,.bundle-parts,.bundle-lead,.bundle-save{font-size:var(--text-sm);line-height:1.6;}
.bundle .btn{width:100%;min-height:48px;align-self:stretch;}
.bx-tile-body{padding:var(--space-xs);gap:var(--space-1);}
.bx-tile-meta,.bx-ship,.bx-cta-note,.pbx-fine{font-size:var(--text-xs);line-height:1.6;}
.bx-tile-name{font-size:var(--text-sm);}
.bx-slot-x{width:var(--control-height);height:var(--control-height);}
.home-hero-media img{object-fit:contain;}

@media(hover:hover){
  .directory-name h2 a:hover{color:var(--color-accent);}
  .directory-reference:hover,.directory-result-bar>a:hover{text-decoration:underline;text-underline-offset:var(--space-1);}
  .directory-filters button:not([aria-pressed="true"]):hover{border-color:var(--color-accent);}
  .directory-sizes nav a:hover{border-color:var(--color-accent);background:var(--color-paper-2);}
}
@media(max-width:1199px){
  .nav-links{display:none;}
  .menu-btn{display:grid;}
  .nav-inner{justify-content:space-between;}
  .nav-tools{display:flex;margin-left:auto;}
  .mobile-nav:not([hidden]){display:flex!important;}
  .mobile-nav[hidden]{display:none!important;}
}
@media(max-width:899px){
  .directory-row{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--space-md);}
  .directory-chemistry{grid-column:1;grid-row:2;margin-top:calc(-1 * var(--space-sm));}
  .directory-sizes{grid-column:2;grid-row:1/3;}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-category-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:599px){
  .nav-inner{gap:var(--space-2);}
  .nav-tools{gap:var(--space-2);}
  .nav-tools>:not(.cart-link){display:none;}
  .nav-tools .cart-link{padding-inline:var(--space-sm);}
  .menu-btn{margin-left:0;}
  .directory-heading{display:block;padding-bottom:var(--space-md);}
  .directory-total{display:flex;align-items:baseline;gap:var(--space-2);margin-top:var(--space-sm);}
  .directory-total span{display:inline-block;text-align:left;margin-left:var(--space-2);}
  .directory-controls{padding:var(--space-sm);}
  .directory-search input{font-size:var(--text-base);}
  .directory-search-field>svg{display:none;}
  .directory-search-field{gap:var(--space-2);padding-inline:var(--space-xs);}
  .directory-filters{display:none;}
  .directory-mobile-filter{display:block;margin-top:var(--space-sm);font:600 var(--text-sm)/1.5 var(--font-ui);color:var(--color-ink);}
  .directory-result-bar{flex-wrap:wrap;gap:0;padding-block:var(--space-sm);}
  .directory-row{grid-template-columns:minmax(0,1fr);gap:var(--space-sm);padding-block:var(--space-md);}
  .directory-chemistry,.directory-sizes{grid-column:auto;grid-row:auto;margin-top:0;}
  .directory-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .directory-name{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-xs);}
  .directory-class{grid-column:1/-1;}
  .directory-reference{font-size:var(--text-xs);margin-top:0;}
  .directory-name h2{align-self:center;}
  .directory-name h2 a{min-height:0;}
  .directory-size-label{margin-top:var(--space-1);}
  .directory-notice{padding-top:var(--space-sm);}
  .compound-directory{padding-top:var(--space-md);}
  .directory-heading h1{overflow-wrap:anywhere;}
  .cards{grid-template-columns:minmax(0,1fr);}
  .home-storefront .home-products{grid-template-columns:minmax(0,1fr);}
  .home-storefront .home-product h3{min-height:0;}
  .home-storefront .home-product-image{max-width:none;}
  .home-category-grid{grid-auto-flow:initial;grid-auto-columns:initial;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:var(--space-md);}
  .home-category-label{font-size:var(--text-xs);}
  .product-plate{max-width:none;}
  .product-main h1{overflow-wrap:anywhere;}
  .facts{padding-inline:var(--space-sm);}
  .sku-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .sku-table tbody,.sku-table tr,.sku-table td{display:block;}
  .sku-table tr{padding:var(--space-sm);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--space-2);margin-bottom:var(--space-sm);}
  .sku-table td{padding:var(--space-2) 0;border-bottom:0;}
  .sku-table td[data-label]{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-xs);}
  .sku-table td[data-label]::before{content:attr(data-label);font:400 var(--text-sm)/1.5 var(--font-body);color:var(--color-muted);}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);}
  .foot-grid>div:first-child{grid-column:1/-1;}
}
@media(max-width:399px){.foot-grid{grid-template-columns:minmax(0,1fr);}}
/* Comfortable phone text and tap areas without changing desktop density. */
@media(max-width:680px){
  .order-form input:not([type=radio]):not([type=checkbox]),
  .order-form select,.order-form textarea,.sortwrap select{font-size:1rem;}
  .sortwrap select,.order-form .choice{min-height:44px;}
  .home-answers summary,.prose summary,.co-offers-more summary{min-height:44px;padding-block:9px;}
}
@media(prefers-reduced-motion:reduce){
  .directory-filters button,.directory-sizes nav a{transition:none;}
  .card:hover,.btn:active,.directory-filters button:active{transform:none;}
}

/* Shared customer control shape. Content cards and text links keep their layout. */
body :is(button,.btn),.directory-sizes nav a,.strengths a,.acct-nav a,
.home-vial-stops>a{border-radius:var(--radius-pill);}
.drawer-remove,.drawer-secondary button,.drawer-secondary a,.cart-remove{
  min-height:44px;padding:8px 16px;border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.drawer-secondary{flex-wrap:wrap;}
.drawer-controls{flex-wrap:wrap;}
.drawer-fulfillment{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.home-vial-stops>a{border:1px solid var(--border-subtle);}
.home-vial-stops>a[aria-current="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--accent-fg);text-decoration:none;
}

/* Keep native radio semantics, arrow keys, validation, and change events. */
:is(.order-form,#checkout-form) label.choice:not([hidden]):has(>input[type=radio]),
.drawer-fulfillment label{
  position:relative;display:flex;align-items:center;justify-content:center;gap:0;
  min-width:0;max-width:100%;min-height:48px;padding:12px 30px;
  border:1px solid var(--border-strong);border-radius:var(--radius-pill);
  background:var(--surface-page);color:var(--text-primary);
  font:600 .875rem/1.5 var(--font-ui);letter-spacing:0;text-transform:none;
  text-align:center;cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
}
.drawer-fulfillment label{padding-inline:22px;white-space:nowrap;}
:is(.order-form,#checkout-form) label.choice:has(>input[type=radio])>input[type=radio],
.drawer-fulfillment input[type=radio]{
  position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
:is(.order-form,#checkout-form) label.choice:has(>input[type=radio])::before,
.drawer-fulfillment label::before{
  content:'';position:absolute;left:14px;top:50%;width:.65rem;height:.35rem;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-65%) rotate(-45deg);opacity:0;
}
.drawer-fulfillment label::before{left:9px;}
:is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:checked),
.drawer-fulfillment label:has(input:checked){
  background:var(--accent);color:var(--accent-fg);border-color:var(--accent);
}
:is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:checked)::before,
.drawer-fulfillment label:has(input:checked)::before{opacity:1;}
:is(.order-form,#checkout-form) label.choice:has(>input[type=radio]) b{color:inherit;}
:is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:checked) .choice-note{color:inherit;}
:is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:focus-visible),
.drawer-fulfillment label:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px;}
:is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:disabled),
.drawer-fulfillment label:has(input:disabled){opacity:.45;cursor:not-allowed;}
@media(hover:hover){
  :is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:not(:disabled)):hover,
  .drawer-fulfillment label:has(input:not(:disabled)):hover{border-color:var(--accent);}
}
@media(prefers-reduced-motion:reduce){
  :is(.order-form,#checkout-form) label.choice:has(>input[type=radio]),
  .drawer-fulfillment label{transition:none;}
}