/* ==========================================================================
   GTDI Supply — art.css (v2, A27): styles for the inline-SVG illustration system
   (inc/art.php, template-parts/product-art.php). Every fill/stroke is a token from tokens.css
   (--art-* palette); NO color literals (checked by tools/check_css.py).
   Palette classes (.pa--blue …) set the glove/band custom properties; parts use them.
   ========================================================================== */

/* ---------- Palettes: glove colour → base / shade / outline / highlight / ink on the colour band ---------- */
.pa, .pa--blue { --g: var(--art-blue); --g-sh: var(--art-blue-shade); --g-ol: var(--art-blue-deep); --g-hi: var(--art-blue-light); --band-ink: var(--on-dark); }
.pa--black  { --g: var(--art-black);  --g-sh: var(--art-black-shade);  --g-ol: var(--art-black-deep);  --g-hi: var(--art-black-light);  --band-ink: var(--on-dark); }
.pa--white  { --g: var(--art-white);  --g-sh: var(--art-white-shade);  --g-ol: var(--art-white-deep);  --g-hi: var(--art-white-light);  --band-ink: var(--art-print); }
.pa--clear  { --g: var(--art-clear);  --g-sh: var(--art-clear-shade);  --g-ol: var(--art-clear-deep);  --g-hi: var(--art-clear-light);  --band-ink: var(--art-print); }
.pa--purple { --g: var(--art-purple); --g-sh: var(--art-purple-shade); --g-ol: var(--art-purple-deep); --g-hi: var(--art-purple-light); --band-ink: var(--on-dark); }
.pa--pink   { --g: var(--art-pink);   --g-sh: var(--art-pink-shade);   --g-ol: var(--art-pink-deep);   --g-hi: var(--art-pink-light);   --band-ink: var(--art-print); }
.pa--green  { --g: var(--art-green);  --g-sh: var(--art-green-shade);  --g-ol: var(--art-green-deep);  --g-hi: var(--art-green-light);  --band-ink: var(--on-dark); }
.pa--orange { --g: var(--art-orange); --g-sh: var(--art-orange-shade); --g-ol: var(--art-orange-deep); --g-hi: var(--art-orange-light); --band-ink: var(--art-print); }
.pa--latex  { --g: var(--art-latex);  --g-sh: var(--art-latex-shade);  --g-ol: var(--art-latex-deep);  --g-hi: var(--art-latex-light);  --band-ink: var(--art-print); }
.pa--grey   { --g: var(--art-grey);   --g-sh: var(--art-grey-shade);   --g-ol: var(--art-grey-deep);   --g-hi: var(--art-grey-light);   --band-ink: var(--art-print); }
/* The colour band on a clear or white glove box needs a visible tint. */
.pa--clear .pa-band, .pa--clear .pa-band-s { fill: var(--art-clear-shade); }
.pa--white .pa-band, .pa--white .pa-band-s { fill: var(--art-white-shade); }

.pa { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Glove ---------- */
.pa-g, .pa-g rect, .pa-g path { fill: var(--g); }
.pa-g-ol, .pa-g-ol rect, .pa-g-ol path { fill: var(--g-ol); stroke: var(--g-ol); }
.pa-g-sh { fill: var(--g-sh); opacity: .55; }
.pa-g-ln { fill: none; stroke: var(--g-sh); stroke-width: 2; stroke-linecap: round; opacity: .9; }
.pa-g-hi { fill: none; stroke: var(--g-hi); stroke-width: 3.2; stroke-linecap: round; opacity: .75; }
.pa-g-tex { fill: none; stroke: var(--g-sh); stroke-width: 1.6; stroke-linecap: round; }
.pa-g-seam { fill: none; stroke: var(--g-ol); stroke-width: 1.4; stroke-dasharray: 2 3; opacity: .8; }
/* Translucent materials read as translucent. */
.pa--vinyl .pa-g, .pa--poly .pa-g { opacity: .88; }
.pa--vinyl .pa-g-hi, .pa--poly .pa-g-hi { stroke: var(--art-clear-light); opacity: 1; stroke-width: 4; }

/* ---------- Dispenser box ---------- */
.pa-box-f { fill: var(--art-box); }
.pa-box-t { fill: var(--art-box-top); }
.pa-box-s { fill: var(--art-box-side); }
.pa-box-e { fill: none; stroke: var(--art-box-edge); stroke-width: 1.2; stroke-linejoin: round; }
.pa-box-f, .pa-box-t, .pa-box-s { stroke: var(--art-box-edge); stroke-width: 1; stroke-linejoin: round; }
.pa-slot { fill: var(--art-slot); }
.pa-slot-lip { fill: none; stroke: var(--art-box-edge); stroke-width: 1.4; }
.pa-band { fill: var(--g); }
.pa-band-s { fill: var(--g-sh); }
.pa-band-key { fill: var(--art-print); opacity: .9; }
.pa-txt { font-family: var(--font-sans); font-weight: 700; letter-spacing: .06em; fill: var(--art-print); }
.pa-txt--mat { font-weight: 800; letter-spacing: .1em; }
.pa-txt--sub { font-weight: 600; letter-spacing: .12em; fill: var(--art-print-2); }
.pa-txt--mil { font-weight: 700; letter-spacing: .04em; }
.pa-txt--band { fill: var(--band-ink); letter-spacing: .14em; }
.pa-txt--end { fill: var(--art-print); font-weight: 800; letter-spacing: .02em; }
.pa-txt--case { fill: var(--art-print); font-weight: 800; letter-spacing: .04em; }
.pa-txt--case2 { fill: var(--art-print-2); font-weight: 600; letter-spacing: .1em; }
.pa-txt--size { fill: var(--on-dark); font-weight: 700; letter-spacing: 0; }
.pa-gauge-on { fill: var(--art-print); }
.pa-gauge-off { fill: var(--art-box-edge); }
.pa-size-tag { fill: var(--navy-900); }

/* ---------- Shipping case ---------- */
.pa-kraft-f { fill: var(--art-kraft); }
.pa-kraft-t { fill: var(--art-kraft-top); }
.pa-kraft-s { fill: var(--art-kraft-side); }
.pa-kraft-f, .pa-kraft-t, .pa-kraft-s { stroke: var(--art-kraft-edge); stroke-width: 1; stroke-linejoin: round; }
.pa-kraft-e { fill: none; stroke: var(--art-kraft-edge); stroke-width: 1.2; stroke-linecap: round; }
.pa-kraft-mark { fill: none; stroke: var(--art-kraft-edge); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pa-tape { fill: var(--art-tape); opacity: .9; }
.pa-label { fill: var(--art-sheet); stroke: var(--art-kraft-edge); stroke-width: .8; }
.pa-label-bar { fill: var(--navy-900); }

/* ---------- Shadows, stage ---------- */
.pa-st-sh { stop-color: var(--shadow-art); }
.pa-st-sh0 { stop-color: var(--shadow-art-clear); }

/* ---------- Documents ---------- */
.pa-sheet { fill: var(--art-sheet); stroke: var(--art-sheet-line); stroke-width: 1; }
.pa-sheet-sh { fill: var(--shadow-art); }
.pa-sheet-head { fill: var(--navy-900); }
.pa-sheet-ln { fill: none; stroke: var(--art-sheet-line); stroke-width: 3; stroke-linecap: round; }
.pa-check { fill: none; stroke: var(--art-check); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pa-sign { fill: none; stroke: var(--navy-700); stroke-width: 1.8; stroke-linecap: round; }

/* ---------- Gown, masks, bottles, rolls ---------- */
.pa-wire { fill: none; stroke: var(--art-metal-shade); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pa-gown { fill: var(--art-gown); }
.pa-gown-ol { fill: var(--art-gown-shade); stroke: var(--art-gown-shade); stroke-width: 4; stroke-linejoin: round; }
.pa-gown-sh { fill: var(--art-gown-shade); opacity: .45; }
.pa-gown-ln { fill: none; stroke: var(--art-gown-shade); stroke-width: 1.6; stroke-linecap: round; }
.pa-gown-tie { fill: none; stroke: var(--art-gown-shade); stroke-width: 2.4; stroke-linecap: round; }
.pa-gown-cuff { fill: var(--art-gown-shade); }
.pa-mask { fill: var(--art-mask); }
.pa-mask-ol { fill: var(--art-mask-shade); stroke: var(--art-mask-shade); stroke-width: 3.5; stroke-linejoin: round; }
.pa-mask-pl { fill: none; stroke: var(--art-mask-shade); stroke-width: 1.6; }
.pa-mask-edge { fill: none; stroke: var(--art-mask-shade); stroke-width: 4; }
.pa-loop, .pa-strap { fill: none; stroke: var(--art-strap); stroke-width: 2.2; stroke-linecap: round; }
.pa-n95 { fill: var(--art-n95); }
.pa-n95-ol { fill: var(--art-n95-shade); stroke: var(--art-n95-shade); stroke-width: 4; }
.pa-n95-sh { fill: var(--art-n95-shade); opacity: .6; }
.pa-n95-ln { fill: none; stroke: var(--art-n95-shade); stroke-width: 1.6; }
.pa-n95-clip { fill: var(--art-metal); }
.pa-pump { fill: var(--navy-900); }
.pa-bottle { fill: var(--art-bottle); }
.pa-bottle-ol { fill: var(--art-clear-deep); stroke: var(--art-clear-deep); stroke-width: 3; }
.pa-liquid { fill: var(--art-liquid); opacity: .85; }
.pa-bottle-label { fill: var(--art-sheet); stroke: var(--art-sheet-line); stroke-width: 1; }
.pa-bottle-hi { fill: none; stroke: var(--art-sheet); stroke-width: 3; stroke-linecap: round; opacity: .8; }
.pa-print-ln { fill: none; stroke: var(--art-sheet-line); stroke-width: 3; stroke-linecap: round; }
.pa-can { fill: var(--art-sheet); }
.pa-can-ol { fill: var(--art-box-edge); stroke: var(--art-box-edge); stroke-width: 3; }
.pa-can-lid { fill: var(--navy-700); }
.pa-can-band { fill: var(--art-blue-light); }
.pa-wipe { fill: var(--art-sheet); stroke: var(--art-sheet-line); stroke-width: 1.4; }
.pa-roll { fill: var(--art-sheet); stroke: var(--art-sheet-line); stroke-width: 1.4; }
.pa-roll-sh { fill: var(--art-box-side); }
.pa-roll-top { fill: var(--art-box-top); stroke: var(--art-sheet-line); stroke-width: 1.4; }
.pa-roll-core { fill: var(--art-kraft); }
.pa-roll-ln { fill: none; stroke: var(--art-sheet-line); stroke-width: 1.2; }

/* ---------- Shelf, counter ---------- */
.pa-metal { fill: var(--art-metal); }
.pa-metal-sh { fill: none; stroke: var(--art-metal-shade); stroke-width: 2; }
.pa-wood { fill: var(--art-wood); }
.pa-wood-sh { fill: var(--art-wood-shade); }
.pa-wood-ln { fill: none; stroke: var(--art-kraft-edge); stroke-width: 1; opacity: .5; }

/* ---------- Diagram (how accounts work) ---------- */
.pa-dia-line { fill: none; stroke: var(--brass-500); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.pa-dia-node { fill: var(--surface); stroke: var(--navy-900); stroke-width: 2; }
.pa-dia-node.is-first { fill: var(--navy-900); }
.pa-dia-ring { fill: none; stroke: var(--brass-500); stroke-width: 1; opacity: .7; }
.pa-dia-icon { fill: none; stroke: var(--navy-900); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pa-dia-node.is-first + .pa-dia-ring + .pa-dia-icon { stroke: var(--on-dark); }
.pa-dia-n { font-family: var(--font-display); font-weight: 600; fill: var(--brass-700); }

/* ---------- Brand plate (About) ---------- */
.pa-plate { fill: var(--navy-900); }
.pa-plate-sh { fill: var(--shadow-art); }
.pa-plate-rule { fill: none; stroke: var(--brass-300); stroke-width: 1.2; }
.pa-plate-pin { fill: var(--brass-300); }
.pa-plate-ln { fill: none; stroke: var(--on-dark-3); stroke-width: 1; opacity: .5; }
.pa-plate-mark .wm-tile { fill: var(--navy-800); }
.pa-txt--plate { fill: var(--on-dark-2); font-weight: 600; letter-spacing: .2em; }

/* ---------- Contact card ---------- */
.pa-card { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.pa-card-sh { fill: var(--shadow-art); }
.pa-card-av { fill: var(--navy-900); }
.pa-card-icon { fill: none; stroke: var(--on-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pa-card-icon2 { fill: none; stroke: var(--navy-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pa-card-l1 { fill: var(--navy-900); }
.pa-card-l2 { fill: var(--art-sheet-line); }
.pa-card-rule { fill: none; stroke: var(--brass-500); stroke-width: 1.5; }

/* ---------- Wrapper + caption ---------- */
.pa-fig { position: relative; display: block; margin: 0; overflow: hidden; border-radius: var(--r-3);
  background: radial-gradient(ellipse 72% 66% at 50% 44%, var(--surface) 0 34%, var(--paper-50) 52%, var(--paper-100) 100%); border: 1px solid var(--line-soft); }
.pa-fig .pa { padding: 6% 7% 9%; }
.pa-cap { position: absolute; left: .75rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .35rem; padding: .0625rem .5rem; border-radius: 3px; background: var(--surface); border: 1px solid var(--line-soft); font: 500 var(--fs-overline)/1.4 var(--font-sans); letter-spacing: .01em; color: var(--ink-600); }
.pa-fig--thumb { border-radius: var(--r-2); background: var(--paper-100); }
.pa-fig--thumb .pa { padding: 8%; }
.pa-fig--gallery .pa { padding: 8% 8% 11%; }