/* ==========================================================================
   Trinity Peptides V47 — Membership / Special Black Vial Standard
   Fixes the remaining white/gold stack vials visible on Membership products.
   ========================================================================== */

/* The stack presentation itself: compact, centered, and consistent. */
body.trinity-storefront .membership-package-vials{
  display:grid!important;
  width:100%!important;
  max-width:420px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:12px 8px 8px!important;
  gap:10px!important;
  align-items:end!important;
  justify-content:center!important;
  justify-items:center!important;
  background:radial-gradient(circle at 50% 52%,rgba(198,154,58,.12),rgba(0,0,0,0) 62%)!important;
  overflow:visible!important;
}

/* 3 vials: same-size, single centered row. */
body.trinity-storefront .membership-package-vials[data-vial-count="3"]{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* 4 vials: readable 2 x 2 instead of squeezing four tiny vials across. */
body.trinity-storefront .membership-package-vials[data-vial-count="4"]{
  grid-template-columns:repeat(2,minmax(0,108px))!important;
  max-width:250px!important;
}

/* 5 vials: 3 + centered 2. */
body.trinity-storefront .membership-package-vials[data-vial-count="5"]{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  max-width:420px!important;
}
body.trinity-storefront .membership-package-vials[data-vial-count="5"]>.membership-component-vial:nth-child(1){grid-column:1/3!important}
body.trinity-storefront .membership-package-vials[data-vial-count="5"]>.membership-component-vial:nth-child(2){grid-column:3/5!important}
body.trinity-storefront .membership-package-vials[data-vial-count="5"]>.membership-component-vial:nth-child(3){grid-column:5/7!important}
body.trinity-storefront .membership-package-vials[data-vial-count="5"]>.membership-component-vial:nth-child(4){grid-column:2/4!important;transform:none!important}
body.trinity-storefront .membership-package-vials[data-vial-count="5"]>.membership-component-vial:nth-child(5){grid-column:4/6!important;transform:none!important}

/* Every membership bottle is now the same black template and same physical size. */
body.trinity-storefront .membership-package-vials .membership-component-vial.exact-vial-visual{
  position:relative!important;
  width:100%!important;
  max-width:108px!important;
  aspect-ratio:2/3!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto!important;
  overflow:visible!important;
  transform:none!important;
}

body.trinity-storefront .membership-package-vials .membership-component-vial .exact-vial-art{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Use the vial frame itself as the coordinate system. An older catalog rule
   expands exact-vial-overlay beyond the artwork; that shifts every membership
   name right and creates horizontal drift on narrow phones. */
body.trinity-storefront .membership-package-vials .membership-component-vial .exact-vial-overlay{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  overflow:visible!important;
}

/* Reassert one writing area for the small membership bottles.
   Full ingredient names stay centered; V46 may split a long name into two lines. */
body.trinity-storefront .membership-package-vials .membership-component-vial .exact-vial-name{
  left:19%!important;
  right:19%!important;
  top:68.3%!important;
  width:auto!important;
  height:7.4%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  padding:0!important;
  margin:0!important;
  color:#fff!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(5px,7.15cqw,10.5px)!important;
  font-weight:800!important;
  line-height:.89!important;
  letter-spacing:-.015em!important;
  text-align:center!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  overflow:visible!important;
  text-shadow:0 1px 2px #000,0 0 3px rgba(0,0,0,.8)!important;
}

body.trinity-storefront .membership-package-vials .membership-component-vial .exact-vial-name.v46-lines-2{
  top:66.4%!important;
  height:10.2%!important;
  font-size:clamp(4.6px,6.4cqw,9.4px)!important;
}

body.trinity-storefront .membership-package-vials .membership-component-vial .v46-vial-line{
  display:block!important;
  width:100%!important;
  text-align:center!important;
  white-space:nowrap!important;
}

body.trinity-storefront .membership-package-vials .membership-component-vial .exact-vial-dose{
  left:27%!important;
  right:27%!important;
  top:77.2%!important;
  width:auto!important;
  height:3.4%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  color:#e6b84f!important;
  font-size:clamp(4px,4.9cqw,7.4px)!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* The special Membership card should not inherit any old cream/white bottle art. */
body.trinity-storefront .membership-product-card .membership-package-vials .exact-vial-art,
body.trinity-storefront #membershipCardsGrid .membership-package-vials .exact-vial-art{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Catalog's two-column phone view needs a compact but legible 3-vial group. */
@media (max-width:700px){
  body.trinity-storefront .membership-product-card .membership-package-vials{
    max-width:280px!important;
    min-height:0!important;
    padding:10px 4px 6px!important;
    gap:5px!important;
  }

  body.trinity-storefront .membership-product-card .membership-package-vials[data-vial-count="3"]{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  body.trinity-storefront .membership-product-card .membership-package-vials .membership-component-vial.exact-vial-visual{
    max-width:82px!important;
  }

  body.trinity-storefront .membership-product-card .membership-package-vials[data-vial-count="4"]{
    grid-template-columns:repeat(2,minmax(0,82px))!important;
    max-width:185px!important;
    row-gap:5px!important;
  }

  body.trinity-storefront .membership-product-card .membership-package-vials[data-vial-count="5"]{
    max-width:250px!important;
    row-gap:5px!important;
  }
}

/* Narrow iPhones: keep the special card neat even when it shares a row. */
@media (max-width:430px){
  body.trinity-storefront .membership-product-card .membership-package-vials{
    max-width:245px!important;
    gap:3px!important;
  }
  body.trinity-storefront .membership-product-card .membership-package-vials .membership-component-vial.exact-vial-visual{
    max-width:72px!important;
  }
  body.trinity-storefront .membership-product-card .membership-package-vials[data-vial-count="4"]{
    grid-template-columns:repeat(2,minmax(0,72px))!important;
    max-width:160px!important;
  }
}

/* Larger dedicated Membership section can present the black bottles more prominently. */
@media (min-width:701px){
  body.trinity-storefront #membershipCardsGrid .membership-package-vials .membership-component-vial.exact-vial-visual{
    max-width:112px!important;
  }
}