/* ─────────────────────────────────────────────────────────────────────────
   coleman-vial.css — Auto-rendered branded peptide vial component.
   Renders a clear-glass borosilicate vial with a wrapped paper label
   carrying the Coleman & Co. neuron mark, brand wordmark, peptide name,
   dose, and a category-tinted accent bar.

   Markup (rendered by renderColemanVial in coleman-vial.js):

     <div class="cc-vial" data-category="Weight Loss" style="--cc-vial-scale:1">
       <div class="cc-vial__cap"></div>
       <div class="cc-vial__neck"></div>
       <div class="cc-vial__body">
         <div class="cc-vial__cake"></div>
         <div class="cc-vial__meniscus"></div>
       </div>
       <div class="cc-vial__label">
         <div class="cc-vial__label-inner">
           <div class="cc-vial__logo"></div>
           <div class="cc-vial__brand">Coleman &amp; Company</div>
           <div class="cc-vial__rule"></div>
           <div class="cc-vial__name">Retatrutide</div>
           <div class="cc-vial__dose">10 mg</div>
           <div class="cc-vial__footer">Store 2–8°C<br>Protect from light</div>
         </div>
         <div class="cc-vial__accent"></div>
       </div>
     </div>

   Sizing: the component is built at a 132×380 base size at scale=1.
   To shrink for catalog cards, set --cc-vial-scale on the wrapper.
───────────────────────────────────────────────────────────────────────── */

.cc-vial{
  /* Inner positions are authored at the natural 132×380 base size.
     Final box size = base × --cc-vial-scale. We zero out the inner box
     and apply a single transform on the wrapper so children keep their
     authored positions while the whole component scales uniformly. */
  position:relative;
  width: 132px;
  height: 380px;
  transform: scale(var(--cc-vial-scale, 1));
  transform-origin: center center;
  /* Reserve scaled space in the layout */
  margin: calc((var(--cc-vial-scale, 1) - 1) * 380px / 2) calc((var(--cc-vial-scale, 1) - 1) * 132px / 2);
}

/* ───── CAP — aluminum crimp seal ───── */
.cc-vial__cap{
  position:absolute;
  left:50%; top:0;
  width:62px; height:32px;
  margin-left:-31px;
  border-radius:4px 4px 3px 3px / 5px 5px 3px 3px;
  background:
    linear-gradient(90deg,
      #4d4633 0%, #8c8169 12%, #d6c89a 28%, #f3eedb 50%,
      #d6c89a 72%, #8c8169 88%, #4d4633 100%
    );
  box-shadow:
    inset 0 -4px 6px rgba(0,0,0,.45),
    inset 0 2px 2px rgba(255,255,255,.55),
    0 3px 6px rgba(0,0,0,.45);
}
.cc-vial__cap::before{
  /* center punch */
  content:"";
  position:absolute;
  left:50%; top:6px;
  width:18px; height:6px;
  margin-left:-9px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, #1a160c 0%, #0a0805 70%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
}
.cc-vial__cap::after{
  /* lower crimp ring */
  content:"";
  position:absolute;
  left:50%; bottom:-4px;
  width:54px; height:8px;
  margin-left:-27px;
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(90deg, #3a3320, #b5a572 25%, #f3eedb 50%, #b5a572 75%, #3a3320);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.45), 0 2px 3px rgba(0,0,0,.3);
}

/* ───── SHOULDER / NECK ───── */
.cc-vial__neck{
  position:absolute;
  left:50%; top:34px;
  width:54px; height:22px;
  margin-left:-27px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.45) 0%,
    rgba(255,255,255,.12) 12%,
    rgba(180,200,215,.10) 50%,
    rgba(255,255,255,.10) 88%,
    rgba(255,255,255,.40) 100%
  );
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.4);
}

/* ───── BODY — clear borosilicate glass cylinder ───── */
.cc-vial__body{
  position:absolute;
  left:50%; top:54px;
  width:108px; height:320px;
  margin-left:-54px;
  border-radius: 8px 8px 16px 16px / 14px 14px 18px 18px;
  background:
    /* specular highlights */
    linear-gradient(90deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.18) 5%,
      rgba(255,255,255,.05) 14%,
      rgba(255,255,255,0)   26%,
      rgba(255,255,255,0)   74%,
      rgba(255,255,255,.08) 86%,
      rgba(255,255,255,.32) 95%,
      rgba(255,255,255,.6)  100%
    ),
    /* faint cool tint of clear glass */
    linear-gradient(180deg,
      rgba(200,225,235,.10) 0%,
      rgba(180,210,225,.06) 50%,
      rgba(150,180,200,.04) 100%
    );
  box-shadow:
    inset 0 -10px 18px rgba(0,0,0,.35),
    inset 0  4px  6px rgba(255,255,255,.35),
    inset 4px 0 8px rgba(0,0,0,.25),
    inset -4px 0 8px rgba(0,0,0,.25),
    0 14px 30px rgba(0,0,0,.6);
}

/* lyophilized cake settled inside the glass */
.cc-vial__cake{
  position:absolute;
  left:8px; right:8px; bottom:6px;
  height:30px;
  border-radius: 2px 2px 10px 10px / 2px 2px 12px 12px;
  background: linear-gradient(180deg, #f7f3e6 0%, #ece6d2 45%, #d6cdb4 100%);
  box-shadow:
    inset 0 -3px 5px rgba(120,100,60,.35),
    inset 0  2px 2px rgba(255,255,255,.7),
    inset 4px 0 6px rgba(0,0,0,.18),
    inset -4px 0 6px rgba(0,0,0,.18);
}
.cc-vial__meniscus{
  position:absolute;
  left:10px; right:10px; bottom:34px;
  height:3px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  border-radius: 50%;
  filter: blur(.4px);
}

/* ───── LABEL — wraps cylindrically around the body ───── */
.cc-vial__label{
  position:absolute;
  left:50%; top:110px;
  width:108px; height:200px;
  margin-left:-54px;
  border-radius:1px;
  overflow:hidden;
  background:
    /* edge shading: cylindrical wrap */
    linear-gradient(90deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.32) 8%,
      rgba(0,0,0,.08) 22%,
      rgba(255,255,255,.05) 50%,
      rgba(0,0,0,.08) 78%,
      rgba(0,0,0,.32) 92%,
      rgba(0,0,0,.65) 100%
    ),
    /* warm-white paper base */
    linear-gradient(180deg, #fbf6e6 0%, #f1e8c8 60%, #e0d3a8 100%);
  box-shadow:
    0  1px 0 rgba(255,255,255,.45) inset,
    0 -1px 0 rgba(0,0,0,.25) inset;
}
.cc-vial__label::before{
  /* paper grain */
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(120,90,40,.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,90,40,.03) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  pointer-events:none;
}
.cc-vial__label::after{
  /* curve hint at top/bottom */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.12) 0%, transparent 6%,
    transparent 94%, rgba(0,0,0,.12) 100%);
  pointer-events:none;
}

.cc-vial__label-inner{
  position:relative;
  height:100%;
  padding: 8px 12px 10px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#1a1408;
  z-index:2;
}

.cc-vial__logo{
  width:80px; height:52px;
  margin:6px 0 2px;
  background-image: url('../images/coleman-mark-only.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink:0;
}

.cc-vial__brand{
  font-family: 'Marcellus', Georgia, serif;
  font-size:8px;
  letter-spacing:.06em;
  color:#1a1408;
  margin-top:1px;
  white-space:nowrap;
}

.cc-vial__rule{
  width:60%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(60,40,12,.55), transparent);
  margin:8px 0 6px;
}

.cc-vial__name{
  font-family: 'Marcellus', Georgia, serif;
  font-size:15px;
  font-weight:700;
  line-height:1.05;
  color:#0a0700;
  letter-spacing:.005em;
  /* allow wrap for long names but stay tight */
  white-space:normal;
  max-width:100%;
  word-break:break-word;
  hyphens:auto;
}
.cc-vial__name--long  { font-size:13px; line-height:1.04; }
.cc-vial__name--xlong { font-size:10px; line-height:1.05; }

.cc-vial__dose{
  margin-top:4px;
  font-family: 'Marcellus', Georgia, serif;
  font-size:11px;
  font-weight:400;
  color:#1a1408;
  letter-spacing:.02em;
  white-space:nowrap;
}

.cc-vial__footer{
  margin-top:auto;
  margin-bottom:5px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size:5.2px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(46,32,8,.78);
  line-height:1.5;
}

/* ───── ACCENT BAR — category-driven color ───── */
.cc-vial__accent{
  position:absolute;
  left:0; right:0; bottom:0;
  height:5px;
  z-index:4;
  box-shadow:
    inset  12px 0 12px rgba(0,0,0,.4),
    inset -12px 0 12px rgba(0,0,0,.4);
  background: linear-gradient(90deg,
    var(--cc-cat-deep, #3a3a3a),
    var(--cc-cat-bright, #6a6a6a),
    var(--cc-cat-deep,  #3a3a3a)
  );
}

/* ───── CATEGORY COLOR TOKENS ─────
   Set on the wrapper via data-category attribute selectors.
   --cc-cat-bright  is the centered highlight of the accent bar.
   --cc-cat-deep    is the edge of the accent bar.
   --cc-cat-glow    is the radial glow behind the vial on the catalog card. */
.cc-vial[data-category="Weight Loss"]                 { --cc-cat-bright:#5a9e90; --cc-cat-deep:#2e5a52; --cc-cat-glow: rgba(90,158,144,.32); }
.cc-vial[data-category="Body Repair & Muscle Growth"] { --cc-cat-bright:#5fa170; --cc-cat-deep:#2e5a3a; --cc-cat-glow: rgba(95,161,112,.30); }
.cc-vial[data-category="Body Repair"]                 { --cc-cat-bright:#5fa170; --cc-cat-deep:#2e5a3a; --cc-cat-glow: rgba(95,161,112,.30); }
.cc-vial[data-category="Growth Hormone"]              { --cc-cat-bright:#b8983f; --cc-cat-deep:#7a6520; --cc-cat-glow: rgba(184,152,63,.28); }
.cc-vial[data-category="Neuroprotection"]             { --cc-cat-bright:#7f6db8; --cc-cat-deep:#4d3f7a; --cc-cat-glow: rgba(127,109,184,.28); }
.cc-vial[data-category="Sleep"]                       { --cc-cat-bright:#5b6b9c; --cc-cat-deep:#2e3a66; --cc-cat-glow: rgba(91,107,156,.30); }
.cc-vial[data-category="Immune Support"]              { --cc-cat-bright:#3fa3a3; --cc-cat-deep:#1f5a5a; --cc-cat-glow: rgba(63,163,163,.28); }
.cc-vial[data-category="Immune"]                      { --cc-cat-bright:#3fa3a3; --cc-cat-deep:#1f5a5a; --cc-cat-glow: rgba(63,163,163,.28); }
.cc-vial[data-category="Sexual Health"]               { --cc-cat-bright:#c66478; --cc-cat-deep:#7a3848; --cc-cat-glow: rgba(198,100,120,.26); }
.cc-vial[data-category="Men's Health"]                { --cc-cat-bright:#4a7bc8; --cc-cat-deep:#28477a; --cc-cat-glow: rgba(74,123,200,.30); }
.cc-vial[data-category="Women's Health"]              { --cc-cat-bright:#b66ea0; --cc-cat-deep:#6e3a5e; --cc-cat-glow: rgba(182,110,160,.28); }
.cc-vial[data-category="Hair, Skin & Nails"]          { --cc-cat-bright:#c4a24e; --cc-cat-deep:#7a6128; --cc-cat-glow: rgba(196,162,78,.28); }
.cc-vial[data-category="Hair Skin Nails"]             { --cc-cat-bright:#c4a24e; --cc-cat-deep:#7a6128; --cc-cat-glow: rgba(196,162,78,.28); }
.cc-vial[data-category="Tanning"]                     { --cc-cat-bright:#cc7a3a; --cc-cat-deep:#7a3f18; --cc-cat-glow: rgba(204,122,58,.28); }
.cc-vial[data-category="Bioregulators"]               { --cc-cat-bright:#5fa170; --cc-cat-deep:#2e5a3a; --cc-cat-glow: rgba(95,161,112,.26); }
.cc-vial[data-category="HRT & Performance"]           { --cc-cat-bright:#b07835; --cc-cat-deep:#6e4a18; --cc-cat-glow: rgba(176,120,53,.28); }
.cc-vial[data-category="HRT Performance"]             { --cc-cat-bright:#b07835; --cc-cat-deep:#6e4a18; --cc-cat-glow: rgba(176,120,53,.28); }
.cc-vial[data-category="Hormonal Health"]             { --cc-cat-bright:#b08555; --cc-cat-deep:#6e4f2a; --cc-cat-glow: rgba(176,133,85,.26); }
.cc-vial[data-category="Peptide Blends"]              { --cc-cat-bright:#8a7fb0; --cc-cat-deep:#4f4878; --cc-cat-glow: rgba(138,127,176,.28); }
.cc-vial[data-category="Multi-peptide blend"]         { --cc-cat-bright:#8a7fb0; --cc-cat-deep:#4f4878; --cc-cat-glow: rgba(138,127,176,.28); }
.cc-vial[data-category="Supplies"]                    { --cc-cat-bright:#c4a24e; --cc-cat-deep:#5a9e90; --cc-cat-glow: rgba(196,162,78,.22); }
.cc-vial[data-category="Other"],
.cc-vial:not([data-category])                         { --cc-cat-bright:#6a8aa8; --cc-cat-deep:#3a4f6a; --cc-cat-glow: rgba(106,138,168,.24); }

/* ───── PEDESTAL — radial glow backdrop wrapping ─────
   Add .cc-vial-pedestal on the parent slot to get the dark gradient + tinted glow.
   Used in catalog card media area. */
.cc-vial-pedestal{
  position:relative;
  background:
    radial-gradient(70% 55% at 50% 60%, var(--cc-cat-glow, rgba(106,138,168,.20)), transparent 65%),
    radial-gradient(80% 60% at 50% 35%, rgba(255,255,255,.04), transparent 70%),
    linear-gradient(180deg, #0e1c36 0%, #0a142a 60%, #06101f 100%);
  border-radius:12px 12px 0 0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cc-vial-pedestal::after{
  /* faint molecular pattern */
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.05) 1.5px, transparent 2px),
    radial-gradient(circle at 78% 14%, rgba(255,255,255,.04) 1.5px, transparent 2px),
    radial-gradient(circle at 28% 78%, rgba(255,255,255,.04) 1.5px, transparent 2px),
    radial-gradient(circle at 86% 70%, rgba(255,255,255,.05) 1.5px, transparent 2px);
  background-size: 220px 220px;
  opacity:.85;
  pointer-events:none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}