/* Trinity V48 — final alignment, paint stability, and performance layer.
   Loaded last so it resolves cumulative V30–V47 layout collisions without
   changing the approved black-vial design or the established mobile hero. */

html,
body {
  overflow-x: clip;
}

img {
  background-color: transparent;
}

/* Keep the generated label coordinate system centered on the visible vial.
   The label, dose, and compound lines remain contoured to the approved art. */
body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) {
  min-width: 0;
}

body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) > .product-visual.exact-vial-visual {
  justify-self: center !important;
  align-self: start !important;
  margin-inline: auto !important;
  transform: none !important;
}

body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) > .product-visual.exact-vial-visual .exact-vial-overlay {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* The first five catalog entries are membership stacks but intentionally share
   the normal product-card shell. A legacy .product-visual rule changed their
   stack container to block layout, placing every component vial on a new row.
   Restore the approved horizontal group and let each vial flex to the available
   card width without losing its centered label coordinate system. */
body.trinity-storefront #cardCatalog > .product-card > .product-visual.membership-stack-visual.approved-membership-vials {
  display: flex !important;
  grid-column: 1 / -1 !important;
  align-items: flex-end !important;
  justify-content: center !important;
  justify-self: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 245px !important;
  min-height: 245px !important;
  margin: 0 auto 8px !important;
  padding: 26px 2px 8px !important;
  overflow: visible !important;
}

body.trinity-storefront #cardCatalog > .product-card .membership-mini-vial {
  flex: 0 1 31% !important;
  width: 31% !important;
  min-width: 0 !important;
  max-width: 62px !important;
  margin-left: -5% !important;
}

body.trinity-storefront #cardCatalog > .product-card .membership-mini-vial:first-child {
  margin-left: 0 !important;
}

body.trinity-storefront #cardCatalog > .product-card .membership-mini-vial span {
  left: 9% !important;
  right: 9% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2em !important;
  text-align: center !important;
  text-wrap: balance;
}

/* The live membership cards use the compact generated stack markup. Earlier
   desktop rules inherited a left-biased product column; this makes the entire
   group, not only each label, share the card's visual center. */
body.trinity-storefront #membershipCardsGrid .product-card .membership-stack-visual.approved-membership-vials {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin: 0 auto 8px !important;
  padding-inline: 14px !important;
  transform: none !important;
}

body.trinity-storefront #membershipCardsGrid .membership-mini-vial {
  flex: 0 1 84px !important;
}

body.trinity-storefront #membershipCardsGrid .membership-mini-vial span {
  left: 10% !important;
  right: 10% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.2em !important;
  text-align: center !important;
  text-wrap: balance;
}

/* Hidden optional-registration markup must not remain an invisible interaction
   layer after the visitor chooses the guest path. */
#trinityRegistrationChoice:not(.open),
.trinity-registration-choice:not(.open),
[data-registration-choice]:not(.open) {
  pointer-events: none !important;
}

/* Defer layout and paint work below the initial experience. */
.catalog-section,
.membership-promo-banner,
.tri-partner-teaser,
.rewards-promo-banner,
.tri-education-section,
.promo-panel,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

@media (max-width: 700px) {
  /* Keep the persistent research assistant available without covering the
     catalog's primary Add / View / COA actions on narrow two-column cards. */
  .knight-assistant-widget {
    --fab-size: 58px !important;
    right: 8px !important;
    bottom: 76px !important;
    transition: opacity .2s ease, transform .2s ease;
  }

  .knight-assistant-label {
    display: none !important;
  }

  .knight-assistant-widget.v48-catalog-clear {
    opacity: 0 !important;
    transform: translateX(120%) !important;
    pointer-events: none !important;
  }

  /* The phone catalog card's first grid column is narrower than the old
     hard-coded 160px frame. Fit the frame to its column so the image and its
     centered label no longer drift right. */
  body.trinity-storefront #cardCatalog > .product-card:not(.membership-product-card) > .product-visual.exact-vial-visual {
    width: min(100%, 142px) !important;
    max-width: 142px !important;
    height: 228px !important;
    min-height: 228px !important;
  }

  body.trinity-storefront #cardCatalog > .product-card > .product-visual.membership-stack-visual.approved-membership-vials {
    height: 228px !important;
    min-height: 228px !important;
    padding-inline: 0 !important;
  }

  body.trinity-storefront #membershipCardsGrid .product-card .membership-stack-visual.approved-membership-vials {
    grid-column: 1 / -1 !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    padding-inline: 4px !important;
  }

  body.trinity-storefront #membershipCardsGrid .membership-mini-vial {
    flex-basis: 66px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trinity-knight-main,
  .trinity-knight-depth,
  .trinity-knight-specular,
  .trinity-smoke-layer {
    animation: none !important;
  }
}