/* vial.css v3 (wave 4: photo frame added by fix-shell; v2 by brand, wave 2c). The single source for the vial component: band wiring, illustration variables, type, paint and canvas sizing.
   Tokens only (build/tokens.css). No hex, no raw color literal. Shape geometry and gradients live in vial.svg.
   Pages: load after shared.css, and delete any page copy of these rules (the .elu-vial, .elv-* and .vial-canvas rules).
   Not tokens, kept inside vial.svg as presentation attributes: the glass tint, silver and stopper gray ramps (label-spec.md T-1). */

/* 1 variables. :root so gradient stops inside a hidden sprite svg resolve too (paint servers inherit from their own tree). */
:root,.elu-vial,.elu-vial-label{
  --elv-ink:var(--elu-ink);
  --elv-muted:var(--elu-ink-muted);
  --elv-paper:var(--elu-white);
  --elv-light:var(--elu-white);
  --elv-cake:var(--elu-cream);
  --elv-guide-a:var(--elu-teal-700);
  --elv-guide-b:var(--elu-error);
}

/* 2 band wiring. Per-card: a tone class sets --elu-band and --elu-band-ink and the vial follows it. data-band wins when present
   and also supplies the light-teal hairline (--band-edge). No data-band and no tone: burgundy. */
.elu-vial,.elu-vial-label{
  --band:var(--elu-band,var(--elu-burgundy-700));
  --band-ink:var(--elu-band-ink,var(--elu-white));
  --band-edge:transparent;
  display:block;width:auto;max-width:none;font-family:var(--elu-font);
}
.elu-vial{aspect-ratio:120 / 280}
.elu-vial[data-band="burgundy"],.elu-vial-label[data-band="burgundy"]{--band:var(--elu-burgundy-700);--band-ink:var(--elu-white);--band-edge:transparent}
.elu-vial[data-band="teal"],.elu-vial-label[data-band="teal"]{--band:var(--elu-teal-500);--band-ink:var(--elu-ink);--band-edge:transparent}
.elu-vial[data-band="copper"],.elu-vial-label[data-band="copper"]{--band:var(--elu-copper-500);--band-ink:var(--elu-ink);--band-edge:transparent}
.elu-vial[data-band="light-teal"],.elu-vial-label[data-band="light-teal"]{--band:var(--elu-teal-100);--band-ink:var(--elu-ink);--band-edge:var(--elu-teal-700)}

/* 3 type (Manrope only, weights 400/500/600/800; units are SVG user units, not px) */
.elu-vial text,.elu-vial-label text{font-family:inherit;font-variant-numeric:tabular-nums;text-transform:uppercase}
.elu-vial .elv-str,.elu-vial .elv-ruo,.elu-vial-label .elv-str,.elu-vial-label .elv-ruo{text-transform:none}
.elv-word{font-weight:800;font-size:8.6px;letter-spacing:.2em;fill:var(--elv-ink)}
.elv-name{font-weight:800;font-size:14px;letter-spacing:.01em;fill:var(--band-ink)}
.elv-str{font-weight:600;font-size:9px;letter-spacing:.02em;fill:var(--elv-ink)}
.elv-sub{font-weight:500;font-size:5.2px;letter-spacing:.06em;fill:var(--elv-muted)}
.elv-lot{font-weight:600;font-size:4px;letter-spacing:.06em;fill:var(--elv-muted)}
/* RUO text on the band: sentence case, decision B-01 (label-spec.md section 11) */
.elv-ruo{font-weight:500;font-size:8px;letter-spacing:.01em;fill:var(--band-ink)}

/* 4 paint. The strength box class is elv-strbox, not elv-pill: the consistency scan counts classes with "pill" in the name. */
.elv-plaque{fill:var(--band);stroke:var(--band-edge);stroke-width:.9}
.elv-bandfill{fill:var(--band)}
.elv-cap{fill:var(--band);stroke:color-mix(in srgb,var(--elu-ink) 22%,transparent);stroke-opacity:1;stroke-width:.6}
.elv-strbox{fill:var(--elv-paper);stroke:var(--elv-ink);stroke-width:.8}
.elv-qr{fill:var(--elv-ink)}
.elv-guides{display:none}
.guides-on .elv-guides{display:inline}

/* 5 canvas: 1:1 white; --canvas is the rendered width (232 card, 760 PDP; any size works).
   Vial = 92% of canvas height on cards, 76% on the PDP (B13); the viewBox is 280 tall and the vial is 262 of it. */
.vial-canvas{--canvas:232px;width:var(--canvas);height:var(--canvas);display:grid;place-items:center;background:var(--elu-white)}
.vial-canvas--card{--canvas:232px}
.vial-canvas--pdp{--canvas:760px}
.vial-canvas--card .elu-vial{height:calc(var(--canvas) * .982)}
.vial-canvas--pdp .elu-vial{height:calc(var(--canvas) * .812)}

/* 6 photo frame (wave 4, d-032). A text-free photoreal vial render (assets/web/shop-vial-<band>-v1-<640|1520>.jpg, brand) with the
   label drawn over it as vector, so every name, strength and RUO word stays exact page text and the band follows the tokens.
   Markup:  <figure class="elu-vial-photo" data-band= data-name= data-str= data-sub=>
              <img src="assets/web/shop-vial-<band>-v1-640.jpg" alt="..."> <svg class="elu-vial-label" ...> (label content, see gen_shop.py)
            </figure>
   Geometry is measured on the delivered renders (identical across the four bands): the blank label wraps the vial body, x 35.7% to 64.3%,
   y 43.2% to 78.2% of the frame. The label box matches it (--vp-w, --vp-h, --vp-top) and the label artwork fits inside it (meet).
   The render is zoomed (--vp-z) inside the square frame so the vial fills it like a shop photo; the label box scales with it.
   Tune per render with the custom properties on .elu-vial-photo (or on one figure).
   If the image fails to load, shell.js replaces the whole figure with the vector vial (svg.elu-vial, the fallback). */
.elu-vial-photo{--vp-z:1.18;--vp-y:0%;--vp-top:43.2%;--vp-h:35%;--vp-w:28.8%;position:relative;display:block;width:100%;height:100%;margin:0;aspect-ratio:1;overflow:hidden}
.elu-vial-photo > img{position:absolute;left:50%;top:calc(50% + var(--vp-y));display:block;width:calc(var(--vp-z) * 100%);height:calc(var(--vp-z) * 100%);max-width:none;transform:translate(-50%,-50%);mix-blend-mode:multiply}
.elu-vial-photo .elu-vial-label{position:absolute;left:50%;top:calc(50% + (var(--vp-top) - 50%) * var(--vp-z) + var(--vp-y));width:calc(var(--vp-w) * var(--vp-z));height:calc(var(--vp-h) * var(--vp-z));transform:translateX(-50%);overflow:visible;pointer-events:none}
/* named pro-tier renders (apply_renders.py): no overlay, the label is in the pixels; same framing as the blank base */
.elu-vial-photo--named > img{mix-blend-mode:normal}
.elu-card .elu-card__media .elu-vial-photo--named,.elu-card:not(.elu-card--plain) .elu-card__media .elu-vial-photo--named,.elu-card--plain .elu-card__media .elu-vial-photo--named{--vp-z:1.06;--vp-y:7%}
@media (min-width:768px){.elu-card .elu-card__media .elu-vial-photo--named,.elu-card:not(.elu-card--plain) .elu-card__media .elu-vial-photo--named,.elu-card--plain .elu-card__media .elu-vial-photo--named{--vp-z:1.06;--vp-y:7%}}