/* shared.css: storefront v2 components, ported from build/wave-2/mock/shared.css (wave 4) without redesign.
   Loaded on v2 full pages (home, shop, product) only, after tokens.css and chrome.css. Never on /new or account pages (R-14). Owner: Coder A. */
/* ==========================================================================
   Elutide storefront shell, wave 2a. ONE stylesheet. Mobile first.
   Colors, fonts, sizes, spacing, radii, shadows and widths come from tokens.css
   (enqueued before this file as elu-sf2-tokens, a copy of build/tokens.css;
   chrome.css carries the header, drawer, footer, icon and lockup rules). There is no hex value and no rgb() literal in this file.

   TOKENS USED
     color   : --elu-burgundy-700 -800 -100, --elu-copper-500 -600, --elu-teal-500 -700 -100,
               --elu-ink, --elu-ink-muted, --elu-cream, --elu-white, --elu-line, --elu-charcoal,
               --elu-error
     type    : --elu-font, --elu-fs-12 -14 -16 -18 -20 -24 -32 -40 -56
     space   : --elu-sp-1 .. --elu-sp-8, --elu-gutter, --elu-grid-gap, --elu-section
     shape   : --elu-r-sm -md -lg -pill, --elu-sh-1 -2
     width   : --elu-w-page, --elu-w-form
     control : --elu-btn-h, --elu-btn-h-l, --elu-chrome-bar, --elu-chrome-header
   NOT USED (and not requested): --elu-warn, --elu-w-read, --elu-w-checkout

   Literal lengths that are NOT tokens, all taken from design-system.md prose:
     1px / 1.5px / 2px borders (B6, B7), 6px card band strip (B8), 14 / 20 / 24px icons (B12),
     40px nav pill height (B10), drawer width 85.9vw (page-plan: 335px at 390).
   Everything else is derived from tokens with calc().

   Sections: 0 reset | 1 type | 2 icons | 3 chrome (announce, header, drawer) | 4 buttons
             5 pill, tile, chip, badge, status | 6 card | 7 shop page parts | 8 product parts
             (summary strip, sticky add bar, chat) | 9 footer | 10 motion
   ========================================================================== */


/* 0 reset ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--elu-font);font-size:var(--elu-fs-16);font-weight:400;line-height:1.6;color:var(--elu-ink);background:var(--elu-cream);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--elu-teal-700);outline-offset:2px}
::selection{background:var(--elu-burgundy-100);color:var(--elu-burgundy-800)}
.elu-skip{position:fixed;left:var(--elu-sp-4);top:var(--elu-sp-2);z-index:100;display:inline-flex;align-items:center;min-height:var(--elu-btn-h);padding:0 var(--elu-sp-4);border-radius:var(--elu-r-pill);background:var(--elu-white);color:var(--elu-burgundy-700);font-size:var(--elu-fs-14);font-weight:600;box-shadow:var(--elu-sh-2);transform:translateY(-200%)}
.elu-skip:focus{transform:none}
.elu-container{width:100%;max-width:var(--elu-w-page);margin-inline:auto;padding-inline:var(--elu-gutter)}

/* 1 type: the 9-step ramp, then roles ----------------------------------------- */
.elu-fs-12{font-size:var(--elu-fs-12)}
.elu-fs-14{font-size:var(--elu-fs-14)}
.elu-fs-16{font-size:var(--elu-fs-16)}
.elu-fs-18{font-size:var(--elu-fs-18)}
.elu-fs-20{font-size:var(--elu-fs-20)}
.elu-fs-24{font-size:var(--elu-fs-24)}
.elu-fs-32{font-size:var(--elu-fs-32)}
.elu-fs-40{font-size:var(--elu-fs-40)}
.elu-fs-56{font-size:var(--elu-fs-56)}
.elu-display{font-size:var(--elu-fs-56);font-weight:800;line-height:1.15}
.elu-h1{font-size:var(--elu-fs-40);font-weight:800;line-height:1.15}
.elu-h2{font-size:var(--elu-fs-32);font-weight:800;line-height:1.15}
.elu-h3{font-size:var(--elu-fs-24);font-weight:800;line-height:1.15}
.elu-h4{font-size:var(--elu-fs-20);font-weight:600;line-height:1.15}
.elu-lead{font-size:var(--elu-fs-18);line-height:1.6}
.elu-body{font-size:var(--elu-fs-16);line-height:1.6}
.elu-ui{font-size:var(--elu-fs-14);font-weight:500;line-height:1.6}
.elu-caption{font-size:var(--elu-fs-12);line-height:1.6}
.elu-eyebrow{font-size:var(--elu-fs-12);font-weight:600;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--elu-ink-muted)}
.elu-muted{color:var(--elu-ink-muted)}
.elu-num{font-variant-numeric:tabular-nums}

/* 2 icons (Lucide, 1.75 stroke, currentColor) --------------------------------- */


/* 4 buttons: three signatures, M 44 / L 52 ---------------------------------------- */
.elu-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--elu-sp-2);min-height:var(--elu-btn-h);padding:0 calc(var(--elu-sp-4) + var(--elu-sp-1));border:0;border-radius:var(--elu-r-pill);font-size:var(--elu-fs-14);font-weight:600;line-height:1;text-align:center;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.elu-btn--l{min-height:var(--elu-btn-h-l);font-size:var(--elu-fs-16)}
.elu-btn--primary{background:var(--elu-burgundy-700);color:var(--elu-white)}
.elu-btn--primary:hover{background:var(--elu-burgundy-800)}
.elu-btn--secondary{background:var(--elu-copper-500);color:var(--elu-ink)}
.elu-btn--secondary:hover{background:var(--elu-copper-600)}
.elu-btn--ghost{background:transparent;color:var(--elu-burgundy-700);border:1.5px solid var(--elu-burgundy-700)}
.elu-btn--ghost:hover{background:var(--elu-burgundy-100)}
.elu-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.elu-btn--block{display:flex;width:100%}

/* 5 pill, tile, chip, badge, status -------------------------------------------------- */
/* size pill */
.elu-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--elu-btn-h);padding:0 var(--elu-sp-4);border:1.5px solid var(--elu-line);border-radius:var(--elu-r-pill);background:transparent;color:var(--elu-ink);font-size:var(--elu-fs-14);font-weight:600;line-height:1;transition:background-color .15s,color .15s,border-color .15s}
.elu-pill:hover{border-color:var(--elu-burgundy-700)}
.elu-pill[aria-checked="true"],.elu-pill--selected{background:var(--elu-burgundy-700);border-color:var(--elu-burgundy-700);color:var(--elu-white)}
.elu-pill-group{display:flex;flex-wrap:wrap;gap:var(--elu-sp-2)}
/* pack tile (one pill signature) */
.elu-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--elu-sp-3)}
.elu-pill-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--elu-sp-1);min-height:calc(var(--elu-sp-6) * 3);padding:var(--elu-sp-3);border:1.5px solid var(--elu-line);border-radius:var(--elu-r-md);background:var(--elu-white);color:var(--elu-ink);text-align:left;line-height:1.15;transition:background-color .15s,border-color .15s,box-shadow .15s}
.elu-pill-tile:hover{border-color:var(--elu-burgundy-700)}
.elu-pill-tile[aria-checked="true"],.elu-pill-tile--selected{padding:calc(var(--elu-sp-3) - .5px);border-width:2px;border-color:var(--elu-burgundy-700);background:var(--elu-burgundy-100)}
.elu-pill-tile__name{font-size:var(--elu-fs-14);font-weight:600}
.elu-pill-tile__total{font-size:var(--elu-fs-18);font-weight:800;font-variant-numeric:tabular-nums}
.elu-pill-tile__pv{font-size:var(--elu-fs-12);font-weight:400;color:var(--elu-ink-muted);font-variant-numeric:tabular-nums}
.elu-pill-tile__check{position:absolute;top:var(--elu-sp-2);right:var(--elu-sp-2);display:none;color:var(--elu-burgundy-700)}
.elu-pill-tile[aria-checked="true"] .elu-pill-tile__check,.elu-pill-tile--selected .elu-pill-tile__check{display:block}
.elu-save{display:inline-flex;align-items:center;height:20px;padding:0 var(--elu-sp-2);border-radius:var(--elu-r-pill);background:var(--elu-copper-500);color:var(--elu-ink);font-size:var(--elu-fs-12);font-weight:600;line-height:1;margin-top:auto}
@media (min-width:768px){.elu-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* chip */
.elu-chips{display:flex;gap:var(--elu-sp-2);margin-inline:calc(var(--elu-gutter) * -1);padding:var(--elu-sp-1) var(--elu-gutter);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--elu-gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,black calc(100% - var(--elu-gutter)),transparent);mask-image:linear-gradient(to right,black calc(100% - var(--elu-gutter)),transparent)}
.elu-chips::-webkit-scrollbar{display:none}
.elu-chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:var(--elu-sp-2);min-height:var(--elu-btn-h);padding:0 var(--elu-sp-4);border:1.5px solid var(--elu-line);border-radius:var(--elu-r-pill);background:var(--elu-white);color:var(--elu-ink);font-size:var(--elu-fs-14);font-weight:500;line-height:1;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.elu-chip:hover{border-color:var(--elu-ink)}
.elu-chip__count{font-size:var(--elu-fs-12);font-weight:400;color:var(--elu-ink-muted);font-variant-numeric:tabular-nums}
.elu-chip[aria-pressed="true"]{background:var(--elu-ink);border-color:var(--elu-ink);color:var(--elu-white);font-weight:600}
.elu-chip[aria-pressed="true"] .elu-chip__count{color:color-mix(in srgb,var(--elu-white) 70%,transparent)}
@media (min-width:768px){.elu-chips{flex-wrap:wrap;margin-inline:0;padding-inline:0;overflow:visible;-webkit-mask-image:none;mask-image:none}}
/* COA badge: lot on line 1, shield + purity on line 2, so a lot code always fits a 2-up phone card.
   .elu-coa--line puts it on one line (product page, wide spaces). Source order stays "Lot X, then purity". */
.elu-coa{display:inline-grid;grid-template-columns:auto 1fr;column-gap:var(--elu-sp-1);align-items:center;max-width:100%;padding:var(--elu-sp-1) var(--elu-sp-3);border-radius:var(--elu-r-pill);background:var(--elu-teal-100);color:var(--elu-teal-700);font-size:var(--elu-fs-12);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.elu-coa .elu-icon{grid-column:1;grid-row:2}
.elu-coa__lot{grid-column:1 / -1;grid-row:1;min-width:0;overflow-wrap:anywhere}
.elu-coa__pct{grid-column:2;grid-row:2;min-width:0}
.elu-coa__sep{display:none}
.elu-coa--line,.elu-coa--nofig{display:inline-flex;align-items:center;gap:var(--elu-sp-1);white-space:nowrap}
.elu-coa--nofig .elu-icon{order:-1}
.elu-coa--line .elu-coa__sep{display:inline;white-space:pre}
.elu-coa--line .elu-icon{order:-1}
/* status label: icon + words, never color alone, never a count */
.elu-status{display:inline-flex;align-items:center;gap:var(--elu-sp-1);font-size:var(--elu-fs-12);font-weight:600;line-height:1.3}
.elu-status--in{color:var(--elu-teal-700)}
.elu-status--out{color:var(--elu-error)}
.elu-status--soon{color:var(--elu-ink-muted)}

/* 6 product card (B9) ----------------------------------------------------------------- */
.elu-tone--gp{--elu-band:var(--elu-burgundy-700);--elu-band-ink:var(--elu-white);--elu-eyebrow:var(--elu-burgundy-700)}
.elu-tone--rp{--elu-band:var(--elu-teal-500);--elu-band-ink:var(--elu-ink);--elu-eyebrow:var(--elu-teal-700)}
.elu-tone--bl{--elu-band:var(--elu-copper-500);--elu-band-ink:var(--elu-ink);--elu-eyebrow:var(--elu-ink-muted)}
.elu-tone--sm{--elu-band:var(--elu-teal-100);--elu-band-ink:var(--elu-ink);--elu-eyebrow:var(--elu-ink-muted)}
.elu-tone--ls,.elu-tone--soon{--elu-band:var(--elu-ink-muted);--elu-band-ink:var(--elu-white);--elu-eyebrow:var(--elu-ink-muted)}
.elu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--elu-grid-gap)}
@media (min-width:768px){.elu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.elu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1440px){.elu-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.elu-card{position:relative;display:flex;flex-direction:column;container-type:inline-size;padding:var(--elu-sp-4);overflow:hidden;background:var(--elu-white);border:1px solid var(--elu-line);border-radius:var(--elu-r-lg);box-shadow:var(--elu-sh-1);transition:box-shadow .2s,transform .2s}
.elu-card:hover,.elu-card:has(.elu-card__link:focus-visible){box-shadow:var(--elu-sh-2)}
.elu-card:has(.elu-card__link:focus-visible){outline:2px solid var(--elu-teal-700);outline-offset:2px}
.elu-card__band{display:block;height:6px;margin:calc(var(--elu-sp-4) * -1) calc(var(--elu-sp-4) * -1) var(--elu-sp-4);background:var(--elu-band)}
.elu-tone--sm .elu-card__band{box-shadow:inset 0 -1px 0 var(--elu-teal-700)}
.elu-card--plain{background:var(--elu-cream);box-shadow:none}
.elu-card--plain .elu-card__band{display:none}
.elu-card--plain:hover{box-shadow:var(--elu-sh-1)}
.elu-card__media{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--elu-r-md);background:radial-gradient(62% 56% at 50% 60%,var(--elu-cream),var(--elu-white) 100%);overflow:hidden}
.elu-card--plain .elu-card__media{background:radial-gradient(62% 56% at 50% 60%,var(--elu-white),var(--elu-cream) 100%)}
.elu-card__media .elu-vial{height:98.2%;width:auto;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.elu-card:hover .elu-vial,.elu-card:hover .elu-vial-photo{transform:translateY(-3px) scale(1.03)}
.elu-card__media .elu-vial-photo{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.elu-card--soon .elu-vial,.elu-card--soon .elu-vial-photo{filter:grayscale(1);opacity:.62}
.elu-card__media .elu-coa{position:absolute;z-index:1;top:var(--elu-sp-2);left:var(--elu-sp-2);margin:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--elu-teal-700) 28%,transparent)}
.elu-card__media .elu-vial-photo{--vp-z:.92;--vp-y:15%}
.elu-card--plain .elu-card__media .elu-vial-photo{--vp-z:1.1;--vp-y:0%}
/* container = card content box. 220px fits the one-line badge without its icon, 240px with it. Narrower cards keep the two-line stack
   and the render sits lower so the badge clears the cap. */
@container (max-width:139px){
  .elu-card__media .elu-coa{padding:var(--elu-sp-1) var(--elu-sp-2);border-radius:var(--elu-r-sm)}
  .elu-card__media .elu-coa .elu-icon,.elu-card__media .elu-coa__pct{display:none}
  .elu-card:not(.elu-card--plain) .elu-card__media .elu-vial-photo{--vp-z:.86;--vp-y:16%}
}
@container (min-width:220px){
  .elu-card__media .elu-coa{display:inline-flex;align-items:center;gap:var(--elu-sp-1);white-space:nowrap}
  .elu-card__media .elu-coa .elu-icon{display:none}
  .elu-card__media .elu-coa__sep{display:inline;white-space:pre}
  .elu-card:not(.elu-card--plain) .elu-card__media .elu-vial-photo{--vp-z:1;--vp-y:4%}
}
@container (min-width:240px){
  .elu-card__media .elu-coa .elu-icon{display:block;order:-1}
}
.elu-card__eyebrow{margin-top:var(--elu-sp-2);font-size:var(--elu-fs-12);font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--elu-eyebrow)}
.elu-card__name{margin-top:var(--elu-sp-1);font-size:var(--elu-fs-16);font-weight:600;line-height:1.15;color:var(--elu-ink);transition:color .15s;overflow-wrap:anywhere}
.elu-card__link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.elu-card__link:focus-visible{outline:0}
.elu-card:hover .elu-card__name{color:var(--elu-burgundy-700)}
.elu-card__sizes{margin-top:auto;padding-top:var(--elu-sp-2);font-size:var(--elu-fs-14);line-height:1.4;color:var(--elu-ink-muted)}
.elu-card__foot{display:flex;flex-direction:column;gap:var(--elu-sp-3);padding-top:var(--elu-sp-2)}
.elu-card__prices{min-width:0}
.elu-card__price{display:flex;align-items:baseline;gap:var(--elu-sp-1);white-space:nowrap}
.elu-card__from,.elu-card__per{font-size:var(--elu-fs-12);color:var(--elu-ink-muted)}
.elu-card__amt{font-size:var(--elu-fs-18);font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--elu-ink)}
.elu-card__kit{margin-top:var(--elu-sp-1);font-size:var(--elu-fs-12);line-height:1.4;color:var(--elu-ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.elu-card__kit b{font-weight:600;color:var(--elu-ink)}
.elu-card:hover .elu-btn--ghost{background:var(--elu-burgundy-100)}
@container (min-width:208px){
  .elu-card__foot{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--elu-sp-2)}
  .elu-card__foot .elu-btn{padding:0 var(--elu-sp-4)}
}
@media (min-width:768px){
  .elu-card__name{font-size:var(--elu-fs-18)}
  .elu-card__amt{font-size:var(--elu-fs-20)}
}
/* coming soon: 1-up row card on phone, normal card from 768 */
.elu-card--soon .elu-card__foot{display:none}
.elu-card__soonrow{margin-top:var(--elu-sp-3)}
@media (max-width:767.98px){
  .elu-grid--soon{grid-template-columns:minmax(0,1fr)}
  .elu-card--soon{display:grid;grid-template-columns:calc(var(--elu-sp-8) + var(--elu-sp-4)) minmax(0,1fr);column-gap:var(--elu-sp-4);align-items:center}
  .elu-card--soon .elu-card__media{grid-row:1 / span 2}
  .elu-card--soon .elu-card__eyebrow,.elu-card--soon .elu-card__name,.elu-card--soon .elu-card__soonrow{grid-column:2;margin-top:0}
  .elu-card--soon .elu-card__name{margin-top:var(--elu-sp-1)}
  .elu-card--soon .elu-card__soonrow{margin-top:var(--elu-sp-2)}
}
/* vial: all vial rules (illustration variables, band wiring, type, paint, canvas, photo frame) live in vial.css, the single source. */

/* 7 shop page parts ---------------------------------------------------------------------- */
.elu-coll{padding-block:var(--elu-sp-5) var(--elu-sp-3);background:linear-gradient(180deg,var(--elu-burgundy-100),var(--elu-cream) 100%)}
.elu-coll__eyebrow{color:var(--elu-burgundy-700)}
.elu-coll__title{margin-top:var(--elu-sp-1);font-size:var(--elu-fs-32);font-weight:800;line-height:1.15}
.elu-coll__count{margin-top:var(--elu-sp-2);font-size:var(--elu-fs-14);line-height:1.6;color:var(--elu-ink-muted)}
@media (min-width:1024px){.elu-coll__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--elu-sp-6)}.elu-coll__count{margin-top:0;text-align:right}}
.elu-toolbar{display:grid;gap:var(--elu-sp-2);margin-top:var(--elu-sp-4)}
.elu-toolbar__row{display:flex;gap:var(--elu-sp-2)}
.elu-search{position:relative;flex:1;min-width:0}
.elu-search__icon{position:absolute;left:var(--elu-sp-3);top:50%;transform:translateY(-50%);color:var(--elu-ink-muted);pointer-events:none}
.elu-search__input{display:block;width:100%;height:var(--elu-btn-h);padding:0 var(--elu-sp-4) 0 calc(var(--elu-sp-3) + 20px + var(--elu-sp-2));border:1.5px solid var(--elu-line);border-radius:var(--elu-r-sm);background:var(--elu-white);font-size:var(--elu-fs-16);line-height:1;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.elu-search__input::placeholder{color:var(--elu-ink-muted);opacity:1}
.elu-search__input::-webkit-search-cancel-button{-webkit-appearance:none}
.elu-search__input:hover{border-color:var(--elu-ink-muted)}
.elu-search__input:focus{border-color:var(--elu-teal-700)}
.elu-select{position:relative;flex:none;width:calc(var(--elu-sp-8) + var(--elu-sp-7))}
.elu-select__el{display:block;width:100%;height:var(--elu-btn-h);padding:0 var(--elu-sp-6) 0 var(--elu-sp-3);border:1.5px solid var(--elu-line);border-radius:var(--elu-r-sm);background:var(--elu-white);font-size:var(--elu-fs-14);font-weight:500;line-height:1;text-overflow:ellipsis;-webkit-appearance:none;appearance:none;transition:border-color .15s}
.elu-select__el:hover{border-color:var(--elu-ink-muted)}
.elu-select__chev{position:absolute;right:var(--elu-sp-3);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--elu-ink-muted)}
@media (min-width:768px){
  .elu-coll{padding-block:var(--elu-sp-6) var(--elu-sp-5)}
  .elu-coll__count{font-size:var(--elu-fs-16)}
  .elu-toolbar{margin-top:var(--elu-sp-5);gap:var(--elu-sp-3)}
  .elu-search{max-width:calc(var(--elu-w-form) - var(--elu-sp-4))}
  .elu-toolbar__row{justify-content:space-between}
  .elu-select{width:calc(var(--elu-sp-8) * 3)}
}
.elu-shop{padding-block:var(--elu-sp-2) var(--elu-section)}
.elu-sec{margin-top:var(--elu-sp-7)}
.elu-sec:first-of-type{margin-top:0}
.elu-sec__head{display:flex;align-items:center;gap:var(--elu-sp-3);margin-bottom:var(--elu-sp-3)}
.elu-sec__rule{width:6px;height:var(--elu-sp-5);border-radius:var(--elu-r-pill);background:var(--elu-band);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--elu-ink) 10%,transparent)}
.elu-tone--sm .elu-sec__rule{box-shadow:inset 0 0 0 1px var(--elu-teal-700)}
.elu-sec__title{font-size:var(--elu-fs-24);font-weight:800;line-height:1.15}
.elu-sec__count{margin-left:auto;font-size:var(--elu-fs-14);color:var(--elu-ink-muted);font-variant-numeric:tabular-nums}
.elu-empty{padding:var(--elu-sp-8) var(--elu-sp-4);text-align:center;color:var(--elu-ink-muted)}
.elu-empty .elu-btn{margin-top:var(--elu-sp-4)}
@media (min-width:768px){.elu-shop{padding-block:var(--elu-sp-4) var(--elu-section)}.elu-sec{margin-top:var(--elu-sp-8)}.elu-sec__head{margin-bottom:var(--elu-sp-5)}}
/* proof strip */
.elu-proof{display:grid;gap:var(--elu-sp-3);padding-bottom:var(--elu-sp-5)}
.elu-proof__tile{display:flex;align-items:center;gap:var(--elu-sp-3);padding:var(--elu-sp-4);background:var(--elu-white);border:1px solid var(--elu-line);border-radius:var(--elu-r-md)}
.elu-proof__icon{display:grid;place-items:center;width:var(--elu-sp-7);height:var(--elu-sp-7);flex:none;border-radius:var(--elu-r-pill);background:var(--elu-cream)}
.elu-proof__icon--teal{color:var(--elu-teal-700)}
.elu-proof__icon--copper{color:var(--elu-copper-600)}
.elu-proof__icon--burgundy{color:var(--elu-burgundy-700)}
.elu-proof__body{min-width:0}
.elu-proof__text{display:block;font-size:var(--elu-fs-16);font-weight:600;line-height:1.3}
.elu-proof__sub{display:block;margin-top:var(--elu-sp-1);font-size:var(--elu-fs-14);line-height:1.4;color:var(--elu-ink-muted)}
@media (min-width:768px){.elu-proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--elu-grid-gap)}}
/* packs callout and its generic surface twin */
.elu-callout{display:grid;gap:var(--elu-sp-2);padding:var(--elu-sp-5);border-radius:var(--elu-r-lg);background:var(--elu-copper-500);color:var(--elu-ink)}
.elu-callout__title{font-size:var(--elu-fs-24);font-weight:800;line-height:1.15}
.elu-callout__text{font-size:var(--elu-fs-16);line-height:1.6;max-width:var(--elu-w-form)}
@media (min-width:768px){.elu-callout{padding:var(--elu-sp-6) var(--elu-sp-7)}}
/* packs strip (d-024): sits under the toolbar, above the grid. Compact variant of the callout. */
.elu-packs{margin-bottom:var(--elu-sp-4)}
.elu-callout__note{font-size:var(--elu-fs-14);line-height:1.5}
/* text-style ghost link (B6: ghost doubles as the text-link style). A real <a> or <summary>, 44 tall so it is a tap target. */
.elu-textlink{display:inline-flex;align-items:center;min-height:var(--elu-btn-h);font-size:var(--elu-fs-14);font-weight:600;line-height:1.3;color:var(--elu-burgundy-700);text-decoration:underline;text-underline-offset:4px;cursor:pointer;list-style:none}
.elu-textlink::-webkit-details-marker{display:none}
.elu-textlink:hover{color:var(--elu-burgundy-800)}
.elu-packs__one{font-size:var(--elu-fs-14);line-height:1.5}
.elu-packs__how{font-size:var(--elu-fs-14);line-height:1.5}
.elu-packs__how > p + p{margin-top:var(--elu-sp-1)}
.elu-packs__how[open]{padding-bottom:var(--elu-sp-1)}
.elu-packs__long{display:none}
@media (min-width:768px){
  .elu-packs__short{display:none}
  .elu-packs__long{display:block}
}
.elu-callout--strip{padding:var(--elu-sp-3) var(--elu-sp-5) var(--elu-sp-1);gap:var(--elu-sp-1)}
.elu-callout--strip .elu-callout__title{font-size:var(--elu-fs-20)}
.elu-callout--strip .elu-callout__text{font-size:var(--elu-fs-14);line-height:1.5}
@media (min-width:768px){.elu-callout--strip{padding:var(--elu-sp-4) var(--elu-sp-6)}.elu-callout--strip .elu-callout__title{font-size:var(--elu-fs-24)}.elu-callout--strip .elu-callout__text{font-size:var(--elu-fs-16);line-height:1.6}}
@media (min-width:1024px){.elu-callout--strip{padding-block:var(--elu-sp-3);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--elu-sp-6)}.elu-callout--strip .elu-callout__text{max-width:none}}
.elu-mocknote{padding:var(--elu-sp-4) var(--elu-gutter);background:var(--elu-burgundy-100);color:var(--elu-ink);font-size:var(--elu-fs-12);font-weight:500;line-height:1.6;text-align:center}

/* 8 product-page parts (specimens live in components.html) ----------------------------- */
.elu-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--elu-sp-3);padding:var(--elu-sp-4);border-radius:var(--elu-r-md);background:var(--elu-teal-100)}
.elu-summary__cell{min-width:0}
.elu-summary__label{display:block;font-size:var(--elu-fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--elu-ink-muted)}
.elu-summary__value{display:block;margin-top:var(--elu-sp-1);font-size:var(--elu-fs-24);font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--elu-ink)}
.elu-addbar{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--elu-sp-4);min-height:var(--elu-sp-8);padding:var(--elu-sp-2) var(--elu-gutter) max(var(--elu-sp-2),env(safe-area-inset-bottom));background:var(--elu-white);border-top:1px solid var(--elu-line);box-shadow:var(--elu-sh-2);transform:translateY(110%);visibility:hidden;transition:transform .24s cubic-bezier(.2,.7,.2,1),visibility 0s .24s}
.elu-addbar.is-visible{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.elu-addbar__info{flex:1;min-width:0}
.elu-addbar__price{display:block;font-size:var(--elu-fs-18);font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.elu-addbar__pick{display:block;font-size:var(--elu-fs-12);line-height:1.4;color:var(--elu-ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elu-addbar .elu-btn{flex:none}
/* chat launcher placeholder: bottom-right only, lifted on product pages so it never covers the Add bar */
.elu-chat{position:fixed;z-index:35;right:var(--elu-sp-2);bottom:var(--elu-sp-2);display:none;place-items:center;width:var(--elu-sp-7);height:var(--elu-sp-7);border-radius:var(--elu-r-pill);background:var(--elu-burgundy-700);color:var(--elu-white);font-size:var(--elu-fs-14);font-weight:600;box-shadow:var(--elu-sh-2);transition:background-color .15s,bottom .24s,transform .24s,opacity .24s}
.elu-chat:hover{background:var(--elu-burgundy-800)}
@media (min-width:768px){.elu-chat{display:grid}}
.has-addbar .elu-chat{bottom:calc(var(--elu-sp-8) + var(--elu-sp-4))}
/* tucked: shell.js slides the launcher off the edge while it would sit on an Add button, input, pill or tile (C-07) */
.elu-chat.is-tucked{transform:translateX(calc(100% + var(--elu-sp-4)));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.elu-chat{transition:none}}
.elu-specimen{padding-block:var(--elu-sp-6);border-top:1px solid var(--elu-line)}
.elu-specimen__title{margin-bottom:var(--elu-sp-4)}
.elu-specimen__row{display:flex;flex-wrap:wrap;gap:var(--elu-sp-3);align-items:center}
.elu-specimen__bleed{max-width:var(--elu-w-form)}
.elu-specimen__spacer{height:calc(var(--elu-sp-9) * 5)}
.elu-specimen__surface{padding:var(--elu-sp-4);background:var(--elu-charcoal);border-radius:var(--elu-r-md)}

/* 10 motion --------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .elu-card:hover .elu-vial,.elu-card:hover .elu-vial-photo{transform:none}
}