/* Storefront layer over the shared design system (styles.css is shared with
   the admin, which never loads this file). Page-specific rules stay in their
   page stylesheets; this file holds what several storefront pages share. */

/* ---------- product photographs ----------
   A photograph carries the page color, so it fills its frame instead of
   floating with a drawn shadow the way the cut-out renders do. */
picture:has(>.pmedia){display:contents}
.pmedia.pmedia--photo{inset:0;width:100%;height:100%;padding:0;object-fit:cover;object-position:50% 50%;filter:none;transform:none}
.pdp__stage:has(.pmedia--photo)::before,.pdp__stage:has(.pmedia--photo)::after,.card__media:has(.pmedia--photo)::after{display:none}
/* Photo frames fade into the page at their edges. A photograph's ground is
   the page color, but browsers decode the dark JPEGs a level off it, and the
   ground light can reach a crop; a page-colored fade over the outer few
   percent hides both, in either theme. */
.pdp__stage:has(.pmedia--photo)::after,.card__media:has(.pmedia--photo,.home-tile)::before{content:"";display:block;position:absolute;inset:0;width:auto;height:auto;z-index:1;transform:none;filter:none;border-radius:0;pointer-events:none;background:linear-gradient(to right,var(--paper),transparent 6%,transparent 94%,var(--paper)),linear-gradient(to bottom,var(--paper),transparent 5%,transparent 93%,var(--paper))}
.pdp__stage .pdp__origin{z-index:2}
.home-spot__media{position:relative;display:block}
.home-spot__media::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:100%;transform:translateX(-50%);pointer-events:none;background:linear-gradient(to right,var(--paper),transparent 6%,transparent 94%,var(--paper)),linear-gradient(to bottom,var(--paper),transparent 5%,transparent 93%,var(--paper))}
@media(max-width:760px){.home-spot__media::after{width:86%}}
.card__media:has(.pmedia--photo){background:var(--paper)}
/* Small and overlapping vials: every vial photograph shares one framing, so a
   single silhouette (--vial-mask, inlined so it also works from file://) cuts the photo to the vial and
   it sits on any surface with no tile or frame. The vial spans 78% of the
   photo's height, so the image is drawn at 118% to fill 92% of its slot. */
.citem__img{border:0;border-radius:0;background:none}
:root{--vial-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 990' preserveAspectRatio='none'%3E%3Cpath d='M449.5 112.5 372.5 115 369.5 117 354.5 118 343.5 121 332.5 122 318.5 125 317.5 126 319.5 128 325.5 129 326.5 130 326.5 133 323.5 135 321.5 138 316.5 140 317.5 142 316.5 144 282.5 145 281.5 146 280.5 148 280.5 160 279.5 161 279.5 176 278.5 177 278.5 182 279.5 183 290.5 184 292.5 186 292.5 189 291.5 190 291.5 248 293.5 252 298.5 257 302.5 259 326.5 265 326.5 283 327.5 284 326.5 314 321.5 318 321.5 320 322.5 321 333.5 322 334.5 323 331.5 326 328.5 327 314.5 328 306.5 332 299.5 333 287.5 344 281.5 354 281.5 356 279.5 360 279.5 363 278.5 364 278.5 389 285.5 392 280.5 394 278.5 396 278.5 794 282.5 797 282.5 800 280.5 803 280.5 808 282.5 811 281.5 819 283.5 821 283.5 823 281.5 826 281.5 829 283.5 831 283.5 838 285.5 842 290.5 847 293.5 851 294.5 854 297.5 857 314.5 864 331.5 868 351.5 871 389.5 872 393.5 873 398.5 876 449.5 881.5 449.5 881.5 500.5 876 505.5 873 509.5 872 547.5 871 567.5 868 584.5 864 601.5 857 604.5 854 605.5 851 608.5 847 613.5 842 615.5 838 615.5 831 617.5 829 617.5 826 615.5 823 615.5 821 617.5 819 616.5 811 618.5 808 618.5 803 616.5 800 616.5 797 620.5 794 620.5 396 618.5 394 613.5 392 620.5 389 620.5 364 619.5 363 619.5 360 617.5 356 617.5 354 611.5 344 599.5 333 592.5 332 584.5 328 570.5 327 567.5 326 564.5 323 565.5 322 576.5 321 577.5 320 577.5 318 572.5 314 571.5 284 572.5 283 572.5 265 596.5 259 600.5 257 605.5 252 607.5 248 607.5 190 606.5 189 606.5 186 608.5 184 619.5 183 620.5 182 620.5 177 619.5 176 619.5 161 618.5 160 618.5 148 617.5 146 616.5 145 582.5 144 581.5 142 582.5 140 577.5 138 575.5 135 572.5 133 572.5 130 573.5 129 579.5 128 581.5 126 580.5 125 566.5 122 555.5 121 544.5 118 529.5 117 526.5 115 449.5 112.5Z'/%3E%3C/svg%3E")}
:is(.citem__img,.search-ov__thumb,.upsell__img,.gapoffer__img,.pdp-bundle__art) .pmedia--photo{-webkit-mask:var(--vial-mask) 0 0/100% 100% no-repeat;mask:var(--vial-mask) 0 0/100% 100% no-repeat;object-fit:fill}
:is(.citem__img,.search-ov__thumb,.upsell__img,.gapoffer__img) .pmedia--photo{inset:auto;top:50%;left:50%;width:auto;max-width:none;height:118%;aspect-ratio:900/990;transform:translate(-50%,-50%)}
.pdp-bundle__art .pmedia--photo{inset:auto;bottom:-5px;left:50%;width:auto;max-width:none;height:46px;aspect-ratio:900/990;transform:translateX(-50%)}
.pdp-bundle__art[data-vials="2"]>picture:first-child>.pmedia--photo{height:41px;bottom:-4.5px}
.pdp-bundle__art[data-vials="3"]>picture:first-child>.pmedia--photo,.pdp-bundle__art[data-vials="3"]>picture:nth-child(2)>.pmedia--photo{height:40px;bottom:-4.4px}
/* a contact shadow on the slot; the large renders' soft shadow reads as a grey tile at this size */
:is(.citem__img,.search-ov__thumb,.upsell__img,.gapoffer__img,.pdp-bundle__art) .pmedia:not(.pmedia--photo){filter:none}
:is(.citem__img,.search-ov__thumb,.upsell__img,.gapoffer__img,.pdp-bundle__art):has(.pmedia){filter:drop-shadow(0 1px 1.5px color-mix(in srgb,var(--inverse-bg) 18%,transparent))}

/* ---------- product cards: the vial stands on the page, no box ----------
   The catalog and the related rail share the home rail's card. Phones keep
   the catalog's compact two-column metrics from styles.css. */
.card,.card:hover{transform:none}
.card__media,.card:hover .card__media{border:0;border-radius:0;background:transparent;box-shadow:none}
.card__media>picture,.card__media>picture img{display:block;width:100%;height:100%}
.card__media .pmedia--photo{transition:transform .6s var(--ease)}
@media(hover:hover){.card:hover .card__media .pmedia--photo{transform:scale(1.03)}}
.card__body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;grid-template-areas:"name price" "desc add";gap:4px 16px;align-items:start;padding:16px 0 0;min-height:0}
.card__name{grid-area:name;font-family:var(--font-sans);font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.card__desc{grid-area:desc;font-family:var(--font-sans);font-style:normal;font-size:13.5px;line-height:1.4;color:var(--muted);display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.card__foot{display:contents}
.card__foot .price{grid-area:price;display:block;text-align:right;white-space:nowrap;transform:none;font-family:var(--font-sans);font-size:15px;line-height:1.3}
.card__from{display:inline;margin-right:4px;font-size:13px;color:var(--muted);text-transform:lowercase}
.card__amount,.card__oos{font-size:15px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.card__foot .card__add,.card__foot .card__notify{grid-area:add;justify-self:end;width:36px;height:36px;min-height:36px;margin:0;padding:0;border-radius:999px;border:1px solid var(--line-2);background:transparent}
.card__add::before,.card__notify::before{content:"";position:absolute;inset:-4px 0 -4px -8px}
.card__add svg{width:16px;height:16px}
.card__add:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.card__notify span{display:none}
#shop-grid .card:not(.is-oos) .price{transform:none}
#featured-grid .card__body,#related-grid .card__body{min-height:0}
/* the card photograph keeps headroom for the home rail; in a grid that
   headroom reads as a gap between rows, so the grids crop into it */
#shop-grid .card__media,#related-grid .card__media{aspect-ratio:600/660}
#shop-grid .card__media .pmedia--photo,#related-grid .card__media .pmedia--photo{object-position:50% 88%}
/* the subheading gets two lines rather than an ellipsis */
#shop-grid .card__desc,#related-grid .card__desc{-webkit-line-clamp:2;align-self:start}
/* catalog and related cards read name, then the subheading, then one row: the
   price on the left, centered on the add button at the right. The row sits on
   the card's bottom edge so a row of cards lines its prices up, and a price too
   long for a narrow card wraps inside its own column instead of under the button */
:is(#shop-grid,#related-grid) .card__body{grid-template-rows:auto auto 1fr;grid-template-areas:"name name" "desc desc" "price add";column-gap:12px}
:is(#shop-grid,#related-grid) .card__foot .price{align-self:end;display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;column-gap:4px;min-width:0;min-height:36px;margin-top:10px;text-align:left;white-space:normal;line-height:1.2}
:is(#shop-grid,#related-grid) .card__from{margin-right:0;white-space:nowrap}
:is(#shop-grid,#related-grid) .card__amount{white-space:nowrap}
:is(#shop-grid,#related-grid) .card__foot :is(.card__add,.card__notify){align-self:end;margin-top:10px}
/* the catalog's vials sit a touch larger, grown from just below center so the
   cap and the base stay clear of the frame's edge fade */
#shop-grid .card__media .pmedia--photo{transform:scale(1.04);transform-origin:50% 55%}
@media(hover:hover){#shop-grid .card:hover .card__media .pmedia--photo{transform:scale(1.055)}}
/* out of stock is already said in the price row; on a photograph the tag would sit on the cap */
.card__media:has(.pmedia--photo) .card__tag.is-oos{display:none}
/* where names can wrap, each catalog row sizes to its own cards: one height
   for every row left a gap above the price on each card with a short name */
@media(max-width:1080px){
  #shop-grid{grid-auto-rows:auto}
}
@media(max-width:760px){
  .card__body{grid-template-rows:auto auto 1fr;grid-template-areas:"name name" "desc desc" "price add";gap:4px 8px}
  /* the price sits on the add button's baseline: their bottoms align */
  .card__foot .price{align-self:end;text-align:left;line-height:1}
  .card__amount{display:inline-block;line-height:1;vertical-align:bottom}
  :is(#shop-grid,#related-grid) .card__body{column-gap:8px}
}
/* phones keep the catalog's compact metrics: square media, 44px controls */
@media(max-width:460px){
  #shop-grid .card__media{aspect-ratio:1}
  /* the vial grows downward from the cap, and the top fade is thinner, so the
     cap stays clear of it in the square frame */
  #shop-grid .card__media .pmedia--photo{object-position:50% 76%;transform-origin:50% 0}
  #shop-grid .card__media:has(.pmedia--photo)::before{background:linear-gradient(to right,var(--paper),transparent 6%,transparent 94%,var(--paper)),linear-gradient(to bottom,var(--paper),transparent 2%,transparent 93%,var(--paper))}
  #shop-grid .card__desc{-webkit-line-clamp:1}
  #shop-grid .card__foot .card__add,#shop-grid .card__foot .card__notify{width:44px;height:44px;min-height:44px;margin-top:4px}
  #shop-grid .card__foot .price{min-height:44px;margin-top:4px}
  /* the older phone rule stacks the label over the price; keep them on one line */
  #shop-grid .card__from{display:inline;margin:0;font-size:12px;line-height:inherit}
  /* a one-line name sets the card; the skeleton reserves the same */
  #shop-grid .skeleton-card__body,#shop-grid .card__body{min-height:98px}
}
/* the narrowest phones: the label and a three-figure price still share a line */
@media(max-width:360px){
  #shop-grid .card__body{column-gap:6px}
  #shop-grid .card__from{font-size:11px}
  #shop-grid :is(.card__amount,.card__oos){font-size:14px}
  #shop-grid .card__foot .price{column-gap:3px}
}
/* photographs carry the page color, so the related rail sits on the page
   rather than on a tinted band, divided by a hairline instead */
#related-products.bg-soft{background:transparent;border-top:1px solid var(--line)}
/* a tinted band just above the tonal footer would merge into it */
main>.bg-soft:last-child{background:transparent;border-top:1px solid var(--line)}

/* ---------- dispatch timing: a pill, same footprint as before ---------- */
.dispatch-preview{grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;padding:10px 20px 10px 10px;border-radius:30px}
.dispatch-preview__status strong{margin-inline:0}
.dispatch-preview__icon{width:38px;height:38px;border:0;background:var(--surface);color:var(--ink)}
.dispatch-preview__icon svg{width:17px;height:17px}

/* ---------- tonal footer (every storefront page) ---------- */
.site-footer{background:var(--paper-2);color:var(--muted);padding-top:48px}
.footer-brand .brand,.footer-brand .brand .star{color:var(--ink)}
.footer-proof__usa{border-color:var(--line-2);color:var(--ink)}
/* the mark's top meets the column headings (the link keeps its 48px target);
   mark -> origin badge 24px, badge -> payment marks 12px */
.footer-brand .brand{margin-top:-12px}
.footer-proof{margin-top:12px}
.footer-proof__payments{margin-top:12px}
.footer-col h2{color:var(--ink)}
.footer-col a{color:var(--muted)}
.footer-col a:hover,.footer-note__link:hover,.footer-legal a:hover{color:var(--ink)}
.footer-note,.footer-note__link{color:var(--muted)}
.footer-bottom{border-top-color:var(--line-2);color:var(--muted)}
.footer-legal a{color:var(--muted);text-decoration-color:var(--line-2)}
.site-footer a:focus-visible,.site-footer button:focus-visible{outline-color:var(--ink)}

@media(max-width:420px){
  .dispatch-preview{grid-template-columns:30px minmax(0,1fr);gap:9px;padding:10px 12px 10px 10px}
  .dispatch-preview__icon{width:30px;height:30px}
  .dispatch-preview__icon svg{width:15px;height:15px}
}

/* ---------- About: the quiet page head, then the admin's sections ----------
   The sections come from AstralStore.About in the order the admin set; each
   layout is restyled here, never rewritten into the markup. */
.about .container{max-width:1080px}
/* Hold the footer below the fold until the stored sections land: an empty #about let it paint in view, then the skeleton and the sections each pushed it down (CLS 0.5-0.8). */
.about[aria-busy="true"]{min-height:100vh}
/* Stored sections replace the placeholder with a short fade, not a cut. */
@keyframes fadeIn{from{opacity:0}}
@media(prefers-reduced-motion:no-preference){.about[aria-busy="false"]>*{animation:fadeIn .35s var(--ease)}}
/* Before the cart renders, #cart-lines holds the empty-cart notice's height (272px at every width) so the footer does not paint at the top and get pushed down. */
#cart-lines:empty{min-height:272px}
/* While empty and while it holds the sign-in card, #account keeps the card's height so the footer never moves when it arrives. */
#account{min-height:62vh}
/* separate rules: a browser without :has() drops a whole selector list, :empty included */
#account:empty{min-height:max(62vh,610px)}
#account:has(>.acct-gate){min-height:max(62vh,610px)}
@media(max-width:430px){#account:empty{min-height:650px}#account:has(>.acct-gate){min-height:650px}}
@media(prefers-reduced-motion:no-preference){.acct-gate{animation:acctIn .3s var(--ease) both}}
/* hairlines run the width of the text column, not the window */
.about__sec,main>.page-hero+.about>.about__sec:first-child{padding-block:0}
.about__sec+.about__sec{border-top:0}
.about__sec>.container{position:relative;padding-block:clamp(40px,4.5vw,56px)}
.about__sec+.about__sec>.container::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
.about .about__sec:first-of-type .about__body p:first-child::first-letter{float:none;padding:0;font:inherit;line-height:inherit;color:inherit}
.about .eyebrow{margin:0 0 12px;padding:0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.about .eyebrow::before{content:none}
.about__split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px clamp(32px,5vw,72px)}
.about__split .about__h,.about__h{margin:0;font-size:clamp(1.625rem,1.3rem + .8vw,2rem);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.about__split .about__body{max-width:none}
.about__body p{font-size:16.5px;line-height:1.7}
/* the figures: three numbers between two hairlines */
.about__sec--stats{background:none}
.about__sec--stats>.container{padding-block:clamp(8px,1.5vw,16px)}
.about__sec+.about__sec--stats>.container::before,.about__sec--stats+.about__sec>.container::before{content:none}
.about__stats{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0;border-block:1px solid var(--line)}
.about__stat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 16px 34px;text-align:center}
.about__stat+.about__stat{border-left:1px solid var(--line)}
.about__stat-n{font-family:var(--font-sans);font-size:clamp(2.5rem,1.8rem + 2vw,3.5rem);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.about__stat-k{margin:0;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted)}
/* commitments: a hairline list, not boxed cards */
.about__cards{gap:28px clamp(24px,3vw,40px);margin-top:32px}
.about__card,.about__sec.bg-soft .about__card{padding:20px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.about__card-ic{display:block;width:20px;height:20px;margin-bottom:12px;border-radius:0;background:none;color:var(--ink)}
.about__card-ic svg{width:20px;height:20px}
.about__card h3{font-family:var(--font-sans);font-size:16px}
.about__card p{font-size:14.5px;line-height:1.6}
.about__quote{font-family:var(--font-sans);font-style:normal;font-weight:500;letter-spacing:-.025em}
@media(max-width:820px){
  .about__split{grid-template-columns:1fr;gap:16px}
}
/* phones keep the About figures' established rhythm: three across, wrapping 2+2 / 3+2 / 3+3 */
@media(max-width:640px){
  .about__stats{grid-template-columns:repeat(6,minmax(0,1fr))}
  .about__stat{padding:20px 6px 22px}
  .about__stat-n{font-size:clamp(1.7rem,9vw,2.1rem)}
  .about__stat-k{margin-top:4px;font-size:12px;line-height:1.45}
}

/* ---------- inner page heads: a quiet title block ----------
   Title with its summary beneath, left-aligned; the hairline is inset to the
   content column. Server-rendered heads
   (.seo-hero, shipping included) use the same treatment. */
.page-hero,.seo-hero,.shipping-hero{padding:clamp(28px,3.4vw,48px) 0 0;border-bottom:0;background:none}
.page-hero>.container,.seo-hero>.container{position:relative;padding-bottom:clamp(18px,2vw,26px)}
.page-hero>.container::after,.seo-hero>.container::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--line)}
/* About's sections sit in a 1080px column; its head lines up with them */
/* About's head is the headline alone: a little more room under it balances the top */
.page-hero:has(+.about)>.container{max-width:1080px;padding-bottom:clamp(22px,2.6vw,34px)}
.page-hero .display,.seo-hero h1,.shipping-hero h1{max-width:none;margin:0;font-family:var(--font-display);font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);font-weight:500;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.page-hero .lede,.seo-hero .lede,.shipping-hero .lede,.policy-hero .lede{max-width:64ch;margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink-3);text-wrap:pretty}
.page-hero .policy-hero__effective{margin-top:10px}
.seo-hero .seo-breadcrumb{margin-bottom:16px}
.seo-hero .eyebrow{margin:0 0 10px}
.seo-hero .seo-aka{margin:8px 0 0}
.seo-hero .seo-actions,.shipping-hero .seo-actions{margin-top:20px}
/* section headings under a quiet head stay a step below its title */
.policy__section h2,main>.page-hero~.section .h2{font-size:clamp(1.375rem,1rem + 1vw,2rem)}
.seo-page main:has(.seo-hero) .h2{font-size:clamp(1.5rem,1.1rem + 1.1vw,2rem)}
.seo-page .seo-guide-sections h2{font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem)}

/* ---------- COA library: one hairline row per lot, grouped by compound ----------
   Scoped to the library; the product page keeps its certificate cards. */
#coa-lib-list .coa-lib__group{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:8px 32px;margin:0;padding-block:20px;border-top:1px solid var(--line)}
#coa-lib-list .coa-lib__group h2{margin:12px 0 0;font-family:var(--font-sans);font-size:16px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
#coa-lib-list .coa-grid{grid-template-columns:minmax(0,1fr);gap:0}
#coa-lib-list .coa-card{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:12px 0;border:0;border-radius:0;background:none;box-shadow:none}
#coa-lib-list .coa-card+.coa-card{border-top:1px dashed var(--line)}
#coa-lib-list .coa-card::before{content:none}
#coa-lib-list .coa-card__head{flex-direction:column;align-items:flex-start;gap:6px;padding:0;border:0}
#coa-lib-list .coa-card__batch{font-family:var(--font-mono);font-size:13px;font-weight:600}
#coa-lib-list .coa-card__no{margin-top:2px;font-size:11.5px}
#coa-lib-list .coa-badge{padding:3px 9px;font-size:10px}
#coa-lib-list .coa-lib__group:first-child{border-top:0;padding-top:0}
/* fixed columns so every lot's fields line up down the page */
#coa-lib-list .coa-fields,#coa-lib-list .coa-panels{display:grid;grid-template-columns:72px 110px 110px minmax(0,1fr);gap:10px 16px}
#coa-lib-list .coa-field span{white-space:nowrap}
#coa-lib-list .coa-panels{grid-column:2}
#coa-lib-list .coa-panels:not(:has(.coa-field)){display:none}
#coa-lib-list .coa-field span{font-size:10.5px}
#coa-lib-list .coa-card__foot{grid-column:3;grid-row:1;margin:0;padding:0}
#coa-lib-list .coa-card__foot .btn{min-height:40px;padding:0 16px;font-size:13px}
@media(max-width:760px){
  #coa-lib-list .coa-lib__group{grid-template-columns:1fr;gap:4px}
  #coa-lib-list .coa-lib__group h2{margin:0}
  #coa-lib-list .coa-card{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
  #coa-lib-list .coa-fields,#coa-lib-list .coa-panels{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
  #coa-lib-list .coa-card__foot{grid-column:2;grid-row:1}
}

/* ---------- FAQ page and the contact page's questions: hairline rows ---------- */
#faq-list .faq-group+.faq-group{margin-top:48px}
#faq-support .faq{border-top:1px solid var(--line)}
#faq-support .faq summary{padding:20px 0;font-family:var(--font-sans);font-size:16px;font-weight:500;letter-spacing:-.005em}
#faq-support .faq summary .ic{width:20px;height:20px;border:0;border-radius:0}
#faq-support .faq summary:hover .ic{background:none;color:var(--ink-2)}
#faq-support .faq .ans{padding:0 0 24px;font-size:15px}
#faq-list .faq-group__h{margin:0 0 8px;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#faq-list .faq{margin-top:0;border-top:1px solid var(--line)}
#faq-list .faq summary{padding:20px 0;font-family:var(--font-sans);font-size:16px;font-weight:500;letter-spacing:-.005em}
#faq-list .faq summary .ic{width:20px;height:20px;border:0;border-radius:0}
#faq-list .faq summary:hover .ic{background:none;color:var(--ink-2)}
#faq-list .faq .ans{padding:0 0 24px;font-size:15px}

/* ---------- contact: the form sits on the page; the side notes are tiles ---------- */
.contact__form{border:0;border-radius:0;background:none;overflow:visible}
.contact__head{padding:0 0 20px}
.contact__body{padding:20px 0 0}
.contact__foot{margin-top:20px;padding:20px 0 0;background:none}
.contact__card{border:0;background:var(--paper-2)}
.contact__card:hover{transform:none;background:var(--paper-3)}
.contact__card-ic{background:var(--paper)}
.contact__facts{border:0;border-radius:0;border-block:1px solid var(--line)}
.contact__fact{padding:14px 0;background:none}
.contact__fact .v{font-family:var(--font-sans)}

/* ---------- calculator: the solvent it assumes, as one product row ---------- */
.calc-product{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:24px;align-items:center;padding-block:8px;border-block:1px solid var(--line)}
.calc-product img{display:block;width:120px;height:150px;object-fit:cover}
.calc-product__title{margin:0;font-family:var(--font-sans);font-size:18px;font-weight:500;letter-spacing:-.01em}
.calc-product__lede{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
@media(max-width:600px){
  .calc-product{grid-template-columns:88px minmax(0,1fr);gap:8px 16px}
  .calc-product img{width:88px;height:110px}
  .calc-product .btn{grid-column:1 / -1;justify-self:stretch;margin-bottom:12px}
}

/* ---------- research library: compounds as a hairline list ---------- */
.seo-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.seo-library-card{min-height:0;padding:22px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.seo-library-card h2{margin:4px 0 8px;font-family:var(--font-sans);font-size:18px;line-height:1.3;letter-spacing:-.01em}
.seo-library-card p{margin:0 0 10px;font-size:14px;line-height:1.55}
@media(max-width:719px){.seo-library-grid{grid-template-columns:1fr}}

/* ---------- shipping: services as hairline rows ---------- */
.shipping-service-list{display:block;overflow:visible;padding:0;border-radius:0;background:none;border-top:1px solid var(--line)}
.shipping-service-card{align-items:center;padding:20px 0;border-bottom:1px solid var(--line);background:none}
.shipping-service-card h3{font-family:var(--font-sans);font-size:20px;letter-spacing:-.015em}
.shipping-service__price strong{font-family:var(--font-sans);font-size:20px}
@media(max-width:520px){.shipping-service-card{align-items:flex-start}}

/* ---------- free-shipping progress (cart and drawer): a line, not a tile ---------- */
.cship--lead{display:block;padding:0;border:0;border-radius:0;background:none}
.cship--lead .cship__ic{display:none}
.cship--lead .cship__k{margin-bottom:10px;font-size:13.5px;color:var(--muted)}
.cship--lead .cship__k strong{font-family:var(--font-sans);font-size:1em;font-weight:600;color:var(--ink)}
.cship--lead .cship__bar{height:4px;border-radius:99px;background:var(--line)}
.cship--lead .cship__bar::after{content:none}
.cship--lead .cship__bar span{border-radius:99px;background:var(--ink)}
.cship--lead .cship__tick{top:50%;bottom:auto;width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);transform:translate(-50%,-50%)}
.cship--lead .cship__stages{margin-top:8px;font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none}

/* ---------- account: the same layout, quieter surfaces ---------- */
.acct-nav{border:0;border-radius:0;padding:0;background:none}
.acct-tab,.acct-out{border-radius:12px}
.acct-out:hover{background:var(--paper-2)}
.acct-role{color:var(--ink-2);background:var(--paper-2);font-weight:600;letter-spacing:.1em}
/* the identity card keeps its weight; the Astral star replaces the corner glow */
.rw-hero::after{content:"\2726";top:auto;right:-14px;bottom:-78px;width:auto;height:auto;border-radius:0;background:none;font-size:210px;line-height:1;color:var(--inverse-fg);opacity:.06}
/* the figures read as a hairline row, not three boxes */
.rw-stats{gap:0;margin-top:24px;background:none;border:0;border-block:1px solid var(--line);border-radius:0}
.rw-stat{padding:22px 20px 24px 0;background:none}
.rw-stat+.rw-stat{padding-left:20px;border-left:1px solid var(--line)}
.rw-stat .n{font-family:var(--font-sans);font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);letter-spacing:-.03em}
.rw-stat .k{margin-top:4px;font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
.acct-empty{border:0;border-radius:16px}
.acct-empty b{font-family:var(--font-sans)}
.order,.support-ticket{border-radius:14px}
@media(max-width:640px){
  .rw-stat,.rw-stat+.rw-stat{padding:16px 0;border-left:0}
  .rw-stat+.rw-stat{border-top:1px solid var(--line)}
}

/* ---------- quieter edges ---------- */
/* the closed drawer sits off-screen; its shadow must not tint the page edge */
.drawer:not(.open){box-shadow:none}
/* the message box matches the form's other fields */
.prt-brief textarea{background:var(--paper)}
/* a short checkout page ends on the footer color, not a strip of page */
html:has(.co-header){background:var(--paper-2)}

/* ---------- cart drawer: a tighter head and compact line items ---------- */
.drawer__head{padding-block:6px}
.drawer__body{padding-top:2px}
.drawer__body .citem{grid-template-columns:44px minmax(0,1fr) minmax(72px,auto);gap:0 14px;align-items:center;padding-block:12px}
.drawer__body .citem__img{width:44px;height:56px}
/* name on top; strength and the stepper share the second row, and the stepper
   keeps its column when a long strength wraps */
.drawer__body .citem>div:nth-child(2){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;min-width:0}
.drawer__body .citem__name{grid-column:1/-1;font-size:15px;line-height:1.3}
.drawer__body .citem__meta,.drawer__body .citem__qty,.drawer__body .citem__stock{margin:0}
.drawer__body .citem__qty{grid-row:2;grid-column:2}
.drawer__body .citem__stock{grid-row:3;grid-column:1/-1;justify-self:start}
.drawer__body .citem__rm{min-height:28px}
.drawer__body .citem__right{align-self:stretch}
.drawer__body .citem__price{font-size:15px;line-height:1.3}
/* the free-shipping line sits close to the subtotal it describes (the total
   row below is drawn 12px low, so the gap closes from above) */
.drawer__foot .cship--lead{margin-bottom:-12px}
/* An applied code is a line of the receipt, not a caption of the meter: a rule closes the meter, and the code chip sits directly on Subtotal. The subtotal-to-toggle gap stays what it is without a code. */
.drawer__totals--discounted{display:grid;gap:4px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.drawer__totals--discounted .csum__row--discount{min-height:0;padding:0}
.drawer__totals--discounted .drawer__row.total{margin:0;padding:0;border:0;transform:none}
.drawer__totals--discounted + .promo__toggle{margin-top:-20px}
.drawer__totals .promo__applied{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:2px 2px 2px 9px;border:1px solid var(--line-2);border-radius:100px;background:var(--sage-soft);color:var(--sage)}
.drawer__totals .promo__code{margin:0;padding:0;background:none;font-weight:600;letter-spacing:.04em}
.drawer__totals .promo__rm{position:relative;flex:none;width:44px;height:44px;margin:-12px;padding:0;border-radius:50%;font-size:0;color:inherit;text-decoration:none}
.drawer__totals .promo__rm::before{content:"";position:absolute;inset:18px;background:linear-gradient(45deg,transparent calc(50% - .7px),currentColor 0 calc(50% + .7px),transparent 0),linear-gradient(-45deg,transparent calc(50% - .7px),currentColor 0 calc(50% + .7px),transparent 0)}
.drawer__totals .promo__rm:hover{color:var(--accent)}
.drawer__totals .promo__rm:focus-visible{outline-offset:-10px;border-radius:50%}
.drawer__foot .promo__msg.is-ok{display:none}

/* ---------- buttons: quieter, squarer, lighter ----------
   One radius with the cards and fields, medium-weight labels, no lift or glow. */
.btn{min-height:44px;gap:8px;padding:12px 24px;border-radius:var(--radius);font-weight:500;letter-spacing:.01em;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{transform:none}
.btn:active{transform:translateY(1px)}
.btn--accent:hover{box-shadow:none;--bg:color-mix(in srgb,var(--accent-action) 86%,var(--inverse-bg));--bd:var(--bg)}
.btn--sm{padding:9px 16px}
/* account and saved-address utility actions keep their own compact size */
.btn.set-mini{min-height:0;padding:7px 12px}
.btn.set-card__act{min-height:0;padding:9px 16px}
/* the Pay button keeps the height of its loading placeholder so nothing moves when it arrives */
.co-pay__btn{padding-block:16px}
.co-pay__btn-skeleton,.skeleton-button,.skeleton-pdp__buy .skeleton-shape:last-child,.co-transition__line:nth-child(n+2){border-radius:var(--radius)}
@media(prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* phones: the floating drawer sits a touch higher, wider and lower */
@media(max-width:620px){
  .drawer{top:max(2px,env(safe-area-inset-top));bottom:max(2px,env(safe-area-inset-bottom));width:min(400px,calc(100% - 26px))}
}

/* stacked product stage: the photograph keeps its own proportions, centered
   (a wide tablet stage used to crop it through the label), steps down so the
   origin badge clears the cap, and fades into the page on every edge. The
   fade overlay takes exactly the photograph's box so it lands on its edges */
@media(max-width:900px){
  .pdp__stage:has(.pmedia--photo)::after,.pdp__stage .pmedia--photo{inset:0 auto auto 50%;width:auto;max-width:100%;height:100%;aspect-ratio:900/990;transform:translateX(-50%) scale(.9);transform-origin:50% 89%}
  .pdp__stage:has(.pmedia--photo)::after{background:linear-gradient(to right,var(--paper),transparent 12%,transparent 88%,var(--paper)),linear-gradient(to bottom,var(--paper),transparent 5%,transparent 95%,var(--paper))}
  .pdp__stage .pmedia--photo{-webkit-mask:linear-gradient(to bottom,transparent,var(--ink) 8%,var(--ink) 90%,transparent);mask:linear-gradient(to bottom,transparent,var(--ink) 8%,var(--ink) 90%,transparent)}
}

/* Catalog continuation belongs with storefront cards, not the shared admin skin. */
.catalog-preview{
  --catalog-preview-columns:4;
  --catalog-preview-gap:26px;
  --catalog-preview-blur:8px;
  --catalog-preview-height:320px;
  --catalog-preview-pad:16px;
  --catalog-preview-veil:color-mix(in srgb,var(--paper) 40%,transparent);
}
#shop-grid:has(.catalog-preview:not(.is-unlocked)){grid-auto-rows:auto}
#shop-grid .card{order:var(--catalog-order,0)}
.catalog-preview{position:relative;grid-column:1/-1;order:2147483647;min-width:0;max-height:var(--catalog-preview-height);overflow:hidden;border-radius:var(--radius-lg)}
.catalog-preview__products{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--catalog-preview-gap);filter:blur(var(--catalog-preview-blur));pointer-events:none;user-select:none}
.catalog-preview:not(.is-unlocked) .card{flex:none;width:calc((100% - (var(--catalog-preview-columns) - 1)*var(--catalog-preview-gap))/var(--catalog-preview-columns))}
.catalog-preview__action{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--catalog-preview-pad);background:linear-gradient(var(--catalog-preview-veil),var(--catalog-preview-veil) 60%,var(--paper))}
.catalog-preview__action .btn{min-height:48px;max-width:100%;white-space:normal;text-align:center;line-height:1.5}
.catalog-preview__action[hidden]{display:none}
.catalog-preview.is-unlocked,.catalog-preview.is-unlocked .catalog-preview__products{display:contents;filter:none;pointer-events:auto;user-select:auto}
@media(max-width:1080px){.catalog-preview{--catalog-preview-columns:3}}
@media(max-width:760px){.catalog-preview{--catalog-preview-columns:2;--catalog-preview-gap:20px}}
@media(max-width:460px){.catalog-preview{--catalog-preview-gap:12px}}

/* Keep native font metrics and line breaking; only the visible ink is SVG. */
.product-name-outlined{position:relative;user-select:none;-webkit-user-select:none}
.product-name-outlined>.product-name-source{color:transparent}
.product-name-paths{width:100%;height:100%;position:absolute;left:0;top:0;overflow:visible;fill:currentColor;pointer-events:none;max-width:none}
@media print{.product-name-outlined>.product-name-source{color:inherit}.product-name-paths{display:none}}

/* Empty inline anchors retain the font's native baseline without name text. */
.listing-name-word{display:inline-block;white-space:nowrap;font:inherit;letter-spacing:normal;user-select:none;-webkit-user-select:none}
.listing-name-word::before{content:"\200b"}
.listing-name-anchor{display:inline-block;position:relative;width:0;height:0;vertical-align:baseline}
.listing-name-anchor svg{position:absolute;left:0;bottom:0;height:1em;overflow:visible;fill:currentColor;max-width:none;pointer-events:none}