/* ========================================================================
   Trinity Peptides V31 — vial image + alignment patch
   Loaded AFTER V30 and all legacy styles. This file is intentionally narrow:
   - restores the approved black Trinity vial template everywhere
   - puts peptide name/dose back inside the vial label
   - keeps all single vials the same rendered size
   - keeps 3/4/5-vial membership stacks centered and balanced
   - makes membership order buttons full-width and consistent
   ======================================================================== */

:root{
  --v31-vial-name-top:71.25%;
  --v31-vial-dose-top:77.35%;
  --v31-vial-name-left:24.25%;
  --v31-vial-name-right:24.25%;
}

/* ---------- ONE vial standard across catalog/search/detail/home ---------- */
body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) > .product-visual.exact-vial-visual,
body.trinity-storefront .tri-home-product .exact-vial-visual,
body.trinity-storefront .tri-related-products .exact-vial-visual,
body.trinity-storefront .tri-search-vial.exact-vial-visual,
body.trinity-storefront .tri-detail-vial.exact-vial-visual{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  container-type:inline-size!important;
  transform:none!important;
}

body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) .exact-vial-art,
body.trinity-storefront .tri-home-product .exact-vial-art,
body.trinity-storefront .tri-related-products .exact-vial-art,
body.trinity-storefront .tri-search-vial .exact-vial-art,
body.trinity-storefront .tri-detail-vial .exact-vial-art{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  margin:auto!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}

/* The approved black vial has its writable product-name line lower on the
   label than the cream template. These rules override the old V29/V30 label
   coordinates with enough specificity to win all !important collisions. */
body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) .exact-vial-overlay,
body.trinity-storefront .tri-home-product .exact-vial-overlay,
body.trinity-storefront .tri-related-products .exact-vial-overlay,
body.trinity-storefront .tri-search-vial .exact-vial-overlay,
body.trinity-storefront .tri-detail-vial .exact-vial-overlay,
body.trinity-storefront #membershipCardsGrid .membership-component-vial .exact-vial-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  transform:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}

body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) .exact-vial-name,
body.trinity-storefront .tri-home-product .exact-vial-name,
body.trinity-storefront .tri-related-products .exact-vial-name,
body.trinity-storefront .tri-search-vial .exact-vial-name,
body.trinity-storefront .tri-detail-vial .exact-vial-name,
body.trinity-storefront #membershipCardsGrid .membership-package-vials .membership-component-vial .exact-vial-name{
  position:absolute!important;
  left:var(--v31-vial-name-left)!important;
  right:var(--v31-vial-name-right)!important;
  top:var(--v31-vial-name-top)!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:5.8%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  color:#fff!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:6.45cqw!important;
  font-weight:800!important;
  line-height:.96!important;
  letter-spacing:-.012em!important;
  text-align:center!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  text-shadow:0 1px 2px #000!important;
}

body.trinity-storefront #cardCatalog .exact-vial-name.medium-name,
body.trinity-storefront .tri-home-product .exact-vial-name.medium-name,
body.trinity-storefront .tri-related-products .exact-vial-name.medium-name,
body.trinity-storefront .tri-search-vial .exact-vial-name.medium-name,
body.trinity-storefront .tri-detail-vial .exact-vial-name.medium-name,
body.trinity-storefront #membershipCardsGrid .exact-vial-name.medium-name{font-size:5.55cqw!important}
body.trinity-storefront #cardCatalog .exact-vial-name.long-name,
body.trinity-storefront .tri-home-product .exact-vial-name.long-name,
body.trinity-storefront .tri-related-products .exact-vial-name.long-name,
body.trinity-storefront .tri-search-vial .exact-vial-name.long-name,
body.trinity-storefront .tri-detail-vial .exact-vial-name.long-name,
body.trinity-storefront #membershipCardsGrid .exact-vial-name.long-name{font-size:4.7cqw!important}
body.trinity-storefront #cardCatalog .exact-vial-name.xlong-name,
body.trinity-storefront .tri-home-product .exact-vial-name.xlong-name,
body.trinity-storefront .tri-related-products .exact-vial-name.xlong-name,
body.trinity-storefront .tri-search-vial .exact-vial-name.xlong-name,
body.trinity-storefront .tri-detail-vial .exact-vial-name.xlong-name,
body.trinity-storefront #membershipCardsGrid .exact-vial-name.xlong-name{top:71.45%!important;font-size:3.9cqw!important}

body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) .exact-vial-dose,
body.trinity-storefront .tri-home-product .exact-vial-dose,
body.trinity-storefront .tri-related-products .exact-vial-dose,
body.trinity-storefront .tri-search-vial .exact-vial-dose,
body.trinity-storefront .tri-detail-vial .exact-vial-dose,
body.trinity-storefront #membershipCardsGrid .membership-package-vials .membership-component-vial .exact-vial-dose{
  position:absolute!important;
  left:27%!important;
  right:27%!important;
  top:var(--v31-vial-dose-top)!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  color:#efd18b!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:4.8cqw!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 1px 2px #000!important;
}

body.trinity-storefront #cardCatalog .exact-vial-dose::before,
body.trinity-storefront #cardCatalog .exact-vial-dose::after,
body.trinity-storefront .tri-home-product .exact-vial-dose::before,
body.trinity-storefront .tri-home-product .exact-vial-dose::after,
body.trinity-storefront #membershipCardsGrid .exact-vial-dose::before,
body.trinity-storefront #membershipCardsGrid .exact-vial-dose::after{
  content:"+"!important;
  color:#a92621!important;
  display:inline-block!important;
  margin:0 .28em!important;
  font:800 1.05em/1 Georgia,"Times New Roman",serif!important;
}

/* ---------- featured cards: same image size + equal baselines ---------- */
body.trinity-storefront .tri-home-product{
  grid-template-rows:238px auto auto auto!important;
  align-content:start!important;
}
body.trinity-storefront .tri-home-product .exact-vial-visual{
  width:180px!important;
  max-width:100%!important;
  height:232px!important;
  min-height:232px!important;
  margin:0 auto!important;
}
body.trinity-storefront .tri-home-product h3{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:4px 0 0!important;
}
body.trinity-storefront .tri-home-product .tri-home-dose{min-height:18px!important}

/* ---------- main catalog cards: same vial box on every peptide ---------- */
body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) > .product-visual.exact-vial-visual{
  width:182px!important;
  max-width:100%!important;
  height:255px!important;
  min-height:255px!important;
  margin:0 auto 8px!important;
}
body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) h3{
  min-height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

/* ---------- membership cards: full-width, example-style ordering ---------- */
body.trinity-storefront #membershipCardsGrid.membership-promo-cards{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:22px!important;
  max-width:1120px!important;
  margin:24px auto!important;
  overflow:visible!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-card{
  display:block!important;
  grid-column:1 / -1!important;
  grid-row:auto!important;
  width:100%!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:22px!important;
  overflow:hidden!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-main{
  display:grid!important;
  grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr)!important;
  gap:28px!important;
  align-items:center!important;
}

body.trinity-storefront #membershipCardsGrid .membership-package-vials{
  display:grid!important;
  grid-template-columns:repeat(3,118px)!important;
  grid-auto-rows:250px!important;
  justify-content:center!important;
  justify-items:center!important;
  align-items:end!important;
  column-gap:6px!important;
  row-gap:10px!important;
  width:100%!important;
  max-width:390px!important;
  min-height:270px!important;
  margin:0 auto!important;
  padding:10px 4px!important;
  overflow:visible!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="4"]{
  grid-template-columns:repeat(2,128px)!important;
  grid-auto-rows:250px!important;
  max-width:330px!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="3"] > .membership-component-vial,
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="4"] > .membership-component-vial{
  grid-column:auto!important;
  grid-row:auto!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="5"]{
  grid-template-columns:repeat(6,56px)!important;
  max-width:390px!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="5"] > .membership-component-vial:nth-child(1){grid-column:1/3!important}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="5"] > .membership-component-vial:nth-child(2){grid-column:3/5!important}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="5"] > .membership-component-vial:nth-child(3){grid-column:5/7!important}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="5"] > .membership-component-vial:nth-child(4){grid-column:2/4!important;transform:none!important}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="5"] > .membership-component-vial:nth-child(5){grid-column:4/6!important;transform:none!important}

body.trinity-storefront #membershipCardsGrid .membership-package-vials .membership-component-vial.exact-vial-visual{
  position:relative!important;
  width:118px!important;
  min-width:118px!important;
  max-width:118px!important;
  height:248px!important;
  min-height:248px!important;
  max-height:248px!important;
  margin:0!important;
  overflow:visible!important;
  container-type:inline-size!important;
  transform:none!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="4"] .membership-component-vial.exact-vial-visual{
  width:128px!important;min-width:128px!important;max-width:128px!important
}
body.trinity-storefront #membershipCardsGrid .membership-package-vials .membership-component-vial .exact-vial-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}

/* full-width order buttons, matching the supplied three-vial card example */
body.trinity-storefront #membershipCardsGrid .membership-package-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  width:100%!important;
  margin-top:14px!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-actions > button{
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  margin:0!important;
  grid-column:1 / -1!important;
}
body.trinity-storefront #membershipCardsGrid .membership-package-coa{
  width:100%!important;
  min-height:48px!important;
  grid-column:1 / -1!important;
}

/* ---------- tablet ---------- */
@media(max-width:900px){
  body.trinity-storefront .tri-home-featured-grid{
    display:flex!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    gap:10px!important;
  }
  body.trinity-storefront .tri-home-product{
    min-width:230px!important;
    grid-template-rows:225px auto auto auto!important;
  }
  body.trinity-storefront .tri-home-product .exact-vial-visual{
    width:174px!important;
    height:220px!important;
    min-height:220px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-main{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-copy{text-align:center!important}
  body.trinity-storefront #membershipCardsGrid .membership-package-stock{justify-content:center!important}
}

/* ---------- phone ---------- */
@media(max-width:560px){
  body.trinity-storefront .tri-home-product{
    min-width:220px!important;
    padding:12px 10px 12px!important;
    grid-template-rows:216px auto auto auto!important;
  }
  body.trinity-storefront .tri-home-product .exact-vial-visual{
    width:168px!important;
    height:212px!important;
    min-height:212px!important;
  }

  body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) > .product-visual.exact-vial-visual{
    width:160px!important;
    height:228px!important;
    min-height:228px!important;
  }

  body.trinity-storefront #membershipCardsGrid .membership-package-card{
    padding:14px 12px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-vials{
    grid-template-columns:repeat(3,104px)!important;
    grid-auto-rows:220px!important;
    column-gap:2px!important;
    row-gap:8px!important;
    max-width:324px!important;
    min-height:232px!important;
    padding:4px 0!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="4"]{
    grid-template-columns:repeat(2,112px)!important;
    grid-auto-rows:230px!important;
    max-width:246px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="5"]{
    grid-template-columns:repeat(6,50px)!important;
    grid-auto-rows:220px!important;
    max-width:312px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-vials .membership-component-vial.exact-vial-visual{
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
    height:218px!important;
    min-height:218px!important;
    max-height:218px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="4"] .membership-component-vial.exact-vial-visual{
    width:112px!important;min-width:112px!important;max-width:112px!important;
    height:228px!important;min-height:228px!important;max-height:228px!important
  }

  body.trinity-storefront #membershipCardsGrid .membership-package-prices{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-plan-price{
    min-height:104px!important;
    padding:10px 6px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-plan-price strong{font-size:29px!important}
  body.trinity-storefront #membershipCardsGrid .membership-package-actions > button{
    min-height:58px!important;
    font-size:13px!important;
  }
}

@media(max-width:380px){
  body.trinity-storefront #membershipCardsGrid .membership-package-vials{
    grid-template-columns:repeat(3,94px)!important;
    grid-auto-rows:202px!important;
    max-width:288px!important;
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-vials .membership-component-vial.exact-vial-visual{
    width:94px!important;min-width:94px!important;max-width:94px!important;
    height:200px!important;min-height:200px!important;max-height:200px!important
  }
  body.trinity-storefront #membershipCardsGrid .membership-package-vials[data-vial-count="5"]{
    grid-template-columns:repeat(6,45px)!important;
    max-width:276px!important;
  }
}