/* =========================================================
   PEPPERLABZ FIXES  —  v2
   Paste at the VERY BOTTOM of Additional CSS.

   If you already pasted the earlier "PEPPERLABZ FIXES" block,
   scroll to the very bottom, select from that comment all the
   way to the end of the file, and replace it with this.
   (Appending also works — later CSS wins — it just leaves the
   old block sitting there unused.)
========================================================= */

/* ---------------------------------------------------------
   1. VIAL IMAGE FIX
   Cancels the four "content: url(...)" rules higher up that
   force the GLP vial onto every product page.
--------------------------------------------------------- */

.plz-main-vial,
.plz-bundle-img img,
.plz-chrome-circle,
.plz-notice-chrome {
  content: normal !important;
}

/* ---------------------------------------------------------
   2. COA MODAL — EMBEDDED PDF
   Makes a PDF-based COA match the image-based GLP preview:
   same 34px frame, same 930px max width, same rounded corner
   and drop shadow, and no browser outline.
--------------------------------------------------------- */

.plz-coa-image-wrap:has(.plz-coa-preview-pdf) {
  padding: 34px !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.plz-coa-preview-pdf {
  display: block !important;
  flex: 0 1 auto !important;
  width: min(930px, 100%) !important;
  height: 100% !important;
  min-height: 0 !important;

  /* kill every browser-drawn edge */
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;

  /* match .plz-coa-preview-img exactly */
  background: #fff !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .plz-coa-image-wrap:has(.plz-coa-preview-pdf) {
    padding: 22px !important;
  }
}

/* Mobile — matches the modal's existing 14px mobile padding */
@media (max-width: 767px) {
  .plz-coa-image-wrap:has(.plz-coa-preview-pdf) {
    padding: 14px !important;
  }

  .plz-coa-preview-pdf {
    width: 100% !important;
  }
}

/* ---------------------------------------------------------
   3. SINGLE-BUNDLE LAYOUT
   Structural fix for any product with exactly one bundle tier
   (currently: Bacteriostatic Water) — the base bundle grid is a
   fixed 3-column track, which leaves a lone card stranded on the
   left. Keyed off card count, not a specific product, so it applies
   automatically if another single-tier product is ever added.
--------------------------------------------------------- */

.plz-bundle-grid:has(.plz-bundle-card:only-child) {
  grid-template-columns: minmax(0, 1fr) !important;
}

.plz-bundle-grid:has(.plz-bundle-card:only-child) .plz-bundle-card {
  max-width: 320px !important;
}

/* ---------------------------------------------------------
   4. BACTERIOSTATIC WATER — KEY PRODUCT DETAILS CARDS
   Three small stat cards (0.9% / Sterile / Lab) replacing the
   peptide COA card for the solution variant only. Reuses the
   same border/radius/shadow tokens as .plz-coa-card (see
   additional-css.css ~4896) so it matches the existing card
   language, just sized to sit three-across instead of alone.
   Scoped to these two new classes — .plz-coa-card's own rules
   are untouched, so GLP/GHK's COA card is unaffected.
--------------------------------------------------------- */

.plz-bacwater-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

.plz-bacwater-detail-card {
  width: 100% !important;
  text-align: center !important;
}

.plz-bacwater-detail-card h3 {
  font-size: 32px !important;
}

.plz-bacwater-detail-desc {
  display: block !important;
  text-align: center !important;
  color: #6d7280 !important;
  font-size: 14px !important;
}

@media (max-width: 767px) {
  .plz-bacwater-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------------------------------------------------------
   5. BACTERIOSTATIC WATER — PRODUCT INFO SUBTITLE + MINI CARDS
   Small subtitle under the "What Is Bacteriostatic Water?"
   heading, plus the three supporting info cards underneath
   (Preservative-Stabilized / Lab-Grade Formulation / Sterile,
   Filtered Supply). Sits inside the existing .plz-info-card,
   so it inherits that card's border/padding/shadow already.
--------------------------------------------------------- */

.plz-bacwater-card-subtitle {
  margin: -16px 0 18px !important;
  color: #6d7280 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.plz-bacwater-info-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

.plz-bacwater-info-card {
  background: #fafafa !important;
  border: 1px solid #e4e5e8 !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
}

.plz-bacwater-info-card strong {
  display: block !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
}

.plz-bacwater-info-card span {
  display: block !important;
  color: #566176 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------
   6. BACTERIOSTATIC WATER — WARNINGS BOX
   Bulleted warning list under the storage cards. A bordered
   box using the same background/border/radius as the existing
   .plz-spec-box so it reads as native PepperLabz design, not
   an Amino-style pill row.
--------------------------------------------------------- */

.plz-bacwater-warning-box {
  background: #fafafa !important;
  border: 1px solid #e4e5e8 !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  margin-top: 16px !important;
}

.plz-bacwater-warning-heading {
  display: block !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.plz-bacwater-warning-box ul {
  margin: 0 !important;
  padding-left: 18px !important;
  list-style: disc !important;
}

.plz-bacwater-warning-box li {
  color: #566176 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.plz-bacwater-warning-box li:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   7. GLP-3 RT — STRENGTH SELECTOR (10MG / 20MG)
   Rounded pill buttons above the price row on the GLP-3 RT page
   only (data-driven off a 'strengths' key that only exists on
   that product's registry entry — GHK-Cu, Bacteriostatic Water,
   and every other product render nothing here). Reuses the
   site's existing black/white pill language — same color tokens
   as .plz-pill-dark and the Add to Cart button, not a new style.
--------------------------------------------------------- */

.plz-strength-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
}

.plz-strength-btn {
  flex: 1 1 0 !important;
  min-width: 90px !important;
  padding: 12px 18px !important;
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #e4e5e8 !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease !important;
}

.plz-strength-btn:hover {
  border-color: #c9cbd0 !important;
}

.plz-strength-btn.is-active {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

@media (max-width: 767px) {
  .plz-strength-btn {
    min-width: 0 !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
}

/* ---------------------------------------------------------
   8. KLOW — THREE-LARGE-CARD COMPOUND INFORMATION GRID
   KLOW's Compound Information section only (data-driven off
   'product_kind' => 'peptide_blend' — GLP-3 RT, GHK-Cu, and
   Bacteriostatic Water are unaffected). Same fluid-column
   pattern already fixed sitewide for the hero/bundle/info grids
   — three equal columns that shrink fluidly and only stack at
   the real mobile breakpoint, never early on laptop widths.
--------------------------------------------------------- */

.plz-blend-info-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

@media (max-width: 767px) {
  .plz-blend-info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------------------------------------------------------
   9. KLOW — "NEW BATCH INCOMING SOON" MODAL
   Reuses the existing .plz-coa-modal open/close mechanics
   (backdrop, is-open class, Escape/backdrop-click close) but
   the base .plz-coa-modal-box is sized as a large COA viewer
   (1120px/92vh) — this scoped class overrides it to a small,
   centered confirmation card instead, only for this modal.
--------------------------------------------------------- */

.plz-comingsoon-modal-box {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(420px, calc(100vw - 32px)) !important;
  height: auto !important;
  background: #fff !important;
  display: block !important;
}

.plz-comingsoon-body {
  padding: 40px 32px !important;
  text-align: center !important;
}

.plz-comingsoon-body h2 {
  margin: 0 0 12px !important;
  color: #111 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.plz-comingsoon-body p {
  margin: 0 0 24px !important;
  color: #6d7280 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

.plz-comingsoon-close {
  width: 100% !important;
  margin-bottom: 14px !important;
}

@media (max-width: 767px) {
  .plz-comingsoon-body {
    padding: 32px 24px !important;
  }
}

/* ---------------------------------------------------------
   10. KLOW + WOLVERINE — SPEC-ROW WRAPPING FIX (Compound Information cards)
   The shared .plz-spec-box row uses grid-template-columns:
   minmax(0,1fr) auto — the "auto" value column doesn't wrap, so
   a long value like "Complementary cellular and peptide pathway
   investigation" collides with its label ("Research Context").

   The first attempt at this fix (.plz-blend-info-grid .plz-spec-box
   div, 2 classes + 1 element) never actually applied: the base rule
   in additional-css.css is `body.single-product .plz-spec-box div`
   (2 classes + 2 elements), which wins the specificity tiebreak even
   though both use !important. Prefixing with `body.single-product`
   here brings this rule to 3 classes + 2 elements, so it now beats
   the base rule for real. min-width: 0 on both the label and value
   is what actually lets a grid cell shrink and wrap instead of
   forcing its sibling out of the row.

   Scoped to .plz-blend-info-grid (both KLOW's and Wolverine's blend
   cards) so every other product's spec-box (short values, never had
   this problem) is untouched.
--------------------------------------------------------- */

body.single-product .plz-blend-info-grid .plz-spec-box div {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) !important;
  align-items: start !important;
  gap: 12px 16px !important;
}

body.single-product .plz-blend-info-grid .plz-spec-box span {
  min-width: 0 !important;
}

body.single-product .plz-blend-info-grid .plz-spec-box strong {
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
}

/* ---------------------------------------------------------
   11. WOLVERINE — 4TH "WHY WOLVERINE STACK?" CARD
   Wolverine's blend info grid renders a 4th .plz-info-card
   (KLOW never does — its registry entry has no extra_card_heading
   field, so the template never emits a 4th article there). Switch
   to a 2x2 layout only when a 4th card is actually present, so it
   lands directly next to the Storage/Stability card. KLOW's
   3-column layout (section 8 above) is untouched.
--------------------------------------------------------- */

.plz-blend-info-grid:has(> .plz-info-card:nth-child(4)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 767px) {
  .plz-blend-info-grid:has(> .plz-info-card:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------------------------------------------------------
   12. TESAMORELIN — DYNAMIC BUNDLE PRICE LABEL
   New, always-present but empty/hidden span next to the price
   (see pepperlabz-product-layout.php, plz-price-row). Only ever
   gets text/shown when a bundle button carries data-price-label
   (only Tesamorelin's bundles set that key), so this is inert on
   every other product page.
--------------------------------------------------------- */

.plz-bundle-price-label {
  display: block;
  color: #9aa9bd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ---------------------------------------------------------
   13. TESAMORELIN — SOURCES & REFERENCES GRID
   New section, only rendered when a product's registry entry sets
   'sources' (only Tesamorelin does today). Reuses the same fluid
   3-column card grid already used for Compound Information so it
   stays visually consistent, just with its own class in case a
   future product needs a different card count.
--------------------------------------------------------- */

.plz-sources-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

@media (max-width: 767px) {
  .plz-sources-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------------------------------------------------------
   14. SHARED TRUST/SHIPPING/SECURITY BAND — EVERY CUSTOM PRODUCT
   New full-width row between the purchase card and the COA section
   (see pepperlabz-product-layout.php, right after .plz-product-hero
   closes). Distinct from the small existing .plz-trust-row icons
   already inside the purchase card sidebar — new class name so
   there's no collision with that unrelated, untouched element.
   Fluid 3-column row; shrinks naturally, only stacks at the real
   mobile breakpoint already used everywhere else in this file.
--------------------------------------------------------- */

.plz-trust-band {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1200px !important;
  margin: 0 auto 48px !important;
  padding: 26px 32px !important;
  background: #fafafa !important;
  border: 1px solid #e4e5e8 !important;
  border-radius: 20px !important;
}

.plz-trust-band-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.plz-trust-band-icon {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #eef7f0 !important;
  overflow: hidden !important;
}

/* Chrome icon images. Base rule fills the icon tile edge-to-edge
   (100%/100%, object-fit: contain — aspect always preserved, never
   stretched) using the FULL source canvas as object-fit sees it. Each
   source PNG has a different amount of transparent padding baked in
   (measured directly from the actual files):
     - Iconpepper6.png (truck):  1254x1254 canvas, artwork fills ~100% w / 71% h
     - sheldchrome.png (shield): 1024x1536 canvas, artwork fills ~73% w / 61% h
     - chromelock.png  (lock):   1536x1024 canvas, artwork fills only ~34% w / 74% h
   So "100% box, contain" alone renders the truck fairly large but the
   shield and especially the lock much smaller — matching the reported
   bug. Each icon gets its own transform: scale() (computed from the
   measured padding, not guessed) so the VISIBLE artwork — not the
   canvas — converges to the same ~60% fill of the tile on all three.
   The extra transparent canvas margin this pushes past the tile edges
   is clipped by the icon box's overflow: hidden above; the real
   artwork stays safely inside the tile at every scale factor used
   here, so nothing is cropped. transform-origin stays centered so
   scaling keeps every icon centered both directions. */
.plz-trust-band-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transform-origin: center !important;
}

.plz-trust-band-icon-shipping img {
  /* Truck's canvas is square but its content is wide/flat (100% w x
     71% h) — the original 0.62 scale was normalized against its
     already-edge-to-edge WIDTH, while the shield/lock are normalized
     against HEIGHT, which is why the truck ended up visibly smaller.
     Re-normalized to match height instead: 0.62 (target) / 0.707 (base
     height fill) = 0.877 — this brings the truck's height to the same
     ~62% tile fill as the other two, and its width only reaches ~88%
     of the tile (still safely inside, no clipping). */
  transform: scale(0.877) !important;
}

.plz-trust-band-icon-shield img {
  transform: scale(1.02) !important;
}

.plz-trust-band-icon-lock img {
  transform: scale(1.26) !important;
}

.plz-trust-band-item div {
  min-width: 0 !important;
}

.plz-trust-band-item strong {
  display: block !important;
  color: #111 !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

.plz-trust-band-item span {
  display: block !important;
  color: #6d7280 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

@media (max-width: 900px) {
  .plz-trust-band {
    padding: 20px !important;
    gap: 14px !important;
  }

  .plz-trust-band-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 560px) {
  /* True mobile: stay a 3-column row (icon-over-text per column,
     structurally like the reference screenshot) instead of stacking
     full-width — this only changes the NEW .plz-trust-band section;
     the smaller .plz-trust-row inside the purchase card is untouched. */
  .plz-trust-band {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 16px 10px !important;
    gap: 6px !important;
  }

  .plz-trust-band-item {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    text-align: center !important;
  }

  .plz-trust-band-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .plz-trust-band-item strong {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .plz-trust-band-item span {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}

/* ---------------------------------------------------------
   15. MOBILE MENU / POPUP DRAWER REDESIGN
   Site-wide (this file loads on every page). The closed mobile
   header (logo, cart, account, hamburger arrangement) is now owned
   by the site owner's own Astra Header Builder configuration and is
   intentionally NOT touched here — everything below only styles what
   Astra renders AFTER the mobile menu trigger is tapped
   (.ast-mobile-popup-*, #ast-hf-mobile-menu, and the .plz-mobile-menu-*
   elements added by plz_mobile_menu_inject() in pepperlabz-account.php).
   15a is the one unscoped exception (site-wide floating-cart removal,
   unrelated to the header/menu). Everything else is scoped to
   @media (max-width: 1024px), this project's existing tablet
   breakpoint (see pepperlabz-account.css), so desktop navigation is
   never touched. Slide direction/animation is intentionally NOT
   handled here — it's controlled via Astra Customizer Off-Canvas
   settings, not CSS.
--------------------------------------------------------- */

/* 15a. Remove the green floating "Modern Cart" launcher everywhere.
   Scoped to the exact launcher button only — does not touch
   WooCommerce cart data or the Modern Cart plugin itself. */
.moderncart-floating-cart-button {
  display: none !important;
}

@media (max-width: 1024px) {

  /* 15b. Full-screen drawer sizing/positioning only — slide
     direction/transform is intentionally left untouched here; it's
     controlled via Astra Customizer Off-Canvas settings. display:flex
     column added so the header stays a natural-height row and
     .ast-mobile-popup-content (below) can fill the remaining height —
     needed so the copyright line (15h) can sit at the bottom via
     margin-top: auto instead of trailing right under Cart. */
  .ast-mobile-popup-inner {
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 15c. Drawer header row: logo on the left, close (X) on the right.
     .plz-mobile-menu-logo-link is inserted as the first child of this
     row by plz_mobile_menu_inject() — the close button already here
     is untouched aside from this container becoming a flex row. */
  .ast-mobile-popup-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #eceef1 !important;
  }

  .ast-mobile-popup-header .menu-toggle-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #f7f7f8 !important;
    border: 1px solid #e4e5e8 !important;
    color: #111 !important;
  }

  /* 15d. Logo — modest, fixed-height, aspect ratio preserved by the
     browser's default auto-width behavior on <img>; object-fit is
     redundant insurance, not load-bearing. */
  .plz-mobile-menu-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .plz-mobile-menu-logo {
    display: block !important;
    height: 46px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
  }

  /* flex:1 fills the remaining drawer height below the header row;
     flex-direction:column + min-height:0 lets .plz-mobile-menu-copyright
     (15h) use margin-top: auto to sit at the bottom instead of
     trailing immediately under Cart on a tall screen, while the nav
     itself still scrolls internally if it's ever taller than the
     viewport. */
  .ast-mobile-popup-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 8px 0 24px !important;
  }

  /* 15e. Remove the Astra mobile search entirely. This hides the
     whole builder-element wrapper (.ast-header-search), not just the
     input/button inside it, so no empty row or extra gap is left in
     the popup's flex flow. Scoped to the mobile popup only — Astra's
     class names for its search icon can also appear in the desktop
     header, which must stay untouched. */
  .ast-mobile-popup-content .ast-header-search,
  .ast-mobile-popup-content .ast-search-menu-icon,
  .ast-mobile-popup-content .search-form,
  .ast-mobile-popup-content .ast-search-icon {
    display: none !important;
  }

  /* 15f. Shared row styling for BOTH the real primary nav
     (#ast-hf-mobile-menu: Peppers / COAS & Test Results / About Us /
     Contact) and the secondary nav (.plz-mobile-menu-secondary: My
     Account / Cart, appended by plz_mobile_menu_inject()) — purposeful
     rows instead of default Astra blue links, one shared definition so
     both lists read as one consistent design language. */
  .ast-mobile-popup-content #ast-hf-mobile-menu,
  .ast-mobile-popup-content .plz-mobile-menu-secondary {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .ast-mobile-popup-content #ast-hf-mobile-menu .menu-item,
  .ast-mobile-popup-content .plz-mobile-menu-secondary .menu-item {
    border-bottom: 1px solid #eceef1 !important;
  }

  .ast-mobile-popup-content #ast-hf-mobile-menu .menu-item:last-child,
  .ast-mobile-popup-content .plz-mobile-menu-secondary .menu-item:last-child {
    border-bottom: none !important;
  }

  .ast-mobile-popup-content #ast-hf-mobile-menu .menu-link,
  .ast-mobile-popup-content .plz-mobile-menu-secondary .menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
  }

  .ast-mobile-popup-content #ast-hf-mobile-menu .menu-link:hover,
  .ast-mobile-popup-content #ast-hf-mobile-menu .menu-link:active,
  .ast-mobile-popup-content .plz-mobile-menu-secondary .menu-link:hover,
  .ast-mobile-popup-content .plz-mobile-menu-secondary .menu-link:active {
    background: #f7f7f8 !important;
  }

  /* Small right-facing chevron — purely decorative affordance on an
     already-real link, not a substitute for one. */
  .ast-mobile-popup-content #ast-hf-mobile-menu .menu-link::after,
  .ast-mobile-popup-content .plz-mobile-menu-secondary .menu-link::after {
    content: "\203A" !important;
    color: #b7bac1 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    margin-left: 12px !important;
  }

  /* 15g. Divider between the primary nav and the My Account / Cart
     row, inserted by plz_mobile_menu_inject(). */
  .plz-mobile-menu-divider {
    height: 1px !important;
    margin: 12px 20px !important;
    background: #eceef1 !important;
  }

  /* 15h. Copyright line, appended by plz_mobile_menu_inject(). A
     premium footer detail, not a nav item — no border/box, small
     light-gray text, pushed to the bottom of the drawer via
     margin-top: auto (see 15b/15c's flex-column setup above), so it
     never sits immediately under Cart on a tall screen. */
  .plz-mobile-menu-copyright {
    margin: auto 0 0;
    padding: 16px 20px 6px;
    border-top: 1px solid #eceef1;
    color: #9aa1ab;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
  }
}

/* ---------------------------------------------------------
   16. HOMEPAGE HERO — SHOP NOW BUTTON
   Mobile tap-reliability fix + chrome redesign. Elementor widget,
   custom CSS class "pepper-hero-btn" — no CSS anywhere in this
   project targeted that class before this section.
--------------------------------------------------------- */

/* 16a. Root cause of the unreliable mobile tap: .hero-vial (the
   floating vial bottle images in the Hero section above, position:
   absolute, z-index 3-6) never had pointer-events:none, unlike its
   sibling .hero-shadow one line below it in that same original block,
   which already uses this exact technique for the identical reason
   (a purely decorative absolutely-positioned image shouldn't be able
   to intercept clicks). On mobile .pepper-hero-art is only
   min-height:420px with overflow:visible, while .hero-vial-main alone
   is 220px wide with an auto-height tall bottle photo — its real
   bounding box, including transparent PNG padding around the bottle
   that's invisible but still real for hit-testing, very likely
   extends past the hero-art box and down over the Shop Now button
   below it, intercepting most taps before they reach the real anchor.
   Purely decorative at every breakpoint, so click-through everywhere,
   not just mobile — desktop just never happened to overlap the button
   with its different positioning. */
.pepper-hero-art .hero-vial {
  pointer-events: none !important;
}

/* 16b. Belt-and-suspenders on top of 16a: give the real anchor its
   own clean stacking context and make sure it fills the entire
   visible button (not just some inner slice of it), using the same
   defensive dual-selector approach as the existing .pepper-view-all-btn
   button elsewhere on this page (widget-wrapper class + descendant
   anchor) — plus a compound selector in case "pepper-hero-btn" turns
   out to sit directly on the anchor rather than a wrapper. z-index:7
   is one step above the highest z-index already used in the Hero
   section (.hero-vial-main's 6), not an arbitrary large number. */
.pepper-hero-btn {
  position: relative !important;
  z-index: 7 !important;
}

.pepper-hero-btn.elementor-button,
.pepper-hero-btn .elementor-button,
.pepper-hero-btn a {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  width: auto !important;
  pointer-events: auto !important;
  overflow: hidden !important;

  /* Liquid-chrome surface: multi-stop silver-to-graphite diagonal
     gradient, thin light-silver edge, soft inset highlight/shadow for
     dimension. Asymmetric corners (organic capsule, not a perfect
     pill) for the "premium, free-flowing" look instead of a generic
     SaaS pill button. */
  padding: 15px 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 30px 12px 30px 12px !important;
  background: linear-gradient(
    135deg,
    #f5f6f8 0%,
    #dcdee2 22%,
    #9a9fa7 48%,
    #c9ccd2 70%,
    #6e737b 100%
  ) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 6px rgba(0, 0, 0, 0.15) inset,
    0 10px 24px rgba(0, 0, 0, 0.18) !important;

  color: #14161a !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Soft diagonal reflection sheen — purely decorative, must never
   block the real click. */
.pepper-hero-btn.elementor-button::before,
.pepper-hero-btn .elementor-button::before,
.pepper-hero-btn a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0) 68%,
    rgba(255, 255, 255, 0.28) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.pepper-hero-btn .elementor-button-content-wrapper,
.pepper-hero-btn .elementor-button-icon,
.pepper-hero-btn .elementor-button-text {
  position: relative !important;
  z-index: 1 !important;
  color: #14161a !important;
}

.pepper-hero-btn .elementor-button-icon svg,
.pepper-hero-btn .elementor-button-icon i {
  color: #14161a !important;
  fill: #14161a !important;
}

/* Desktop-only hover — gated on (hover: hover) so a mobile tap can
   never get stuck showing a "hover" state. */
@media (hover: hover) {
  .pepper-hero-btn.elementor-button:hover,
  .pepper-hero-btn .elementor-button:hover,
  .pepper-hero-btn a:hover {
    transform: translateY(-2px) scale(1.015) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 -1px 6px rgba(0, 0, 0, 0.18) inset,
      0 16px 30px rgba(0, 0, 0, 0.22) !important;
  }
}

/* Mobile/all-devices tap feedback — does not depend on hover. */
.pepper-hero-btn.elementor-button:active,
.pepper-hero-btn .elementor-button:active,
.pepper-hero-btn a:active {
  transform: scale(0.97) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -1px 4px rgba(0, 0, 0, 0.2) inset,
    0 4px 12px rgba(0, 0, 0, 0.18) !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease !important;
}

/* ---------------------------------------------------------
   17. GLOBAL FOOTER — CUSTOM PEPPERLABZ FOOTER  (v3)
   .plz-site-footer is now a real, standalone, PHP-rendered footer
   (see plz_render_site_footer() in pepperlabz-footer.php, hooked to
   wp_footer) — it no longer depends on Astra Footer Builder widgets or
   menus at all. Same approved visual design as v2 (dark graphite base,
   blurred/masked chrome wave, large highlighted FDA panel, payment/
   trust rows), refactored onto PepperLabz's own markup instead of
   Astra's. The old Astra footer rows (.site-primary-footer-wrap /
   .site-below-footer-wrap) are hidden in the clearly separate block at
   the very end of this section — add that block only after confirming
   .plz-site-footer renders correctly on the live site.
--------------------------------------------------------- */

/* 17a. Footer base — dark graphite. The chrome-hexagon artwork is a
   full-bleed decorative layer (17a-i) with a dark gradient overlay on
   top for readability (17a-ii) — replaces the earlier blurred-wave +
   tiled-hexagon combo with one clean edge-to-edge layer, per the v4
   background rework. */
.plz-site-footer {
  position: relative !important;
  overflow: hidden !important;
  background: #111317 !important;
  padding: 0 48px !important;
}

/* 17a-i. Chrome hexagon/molecular artwork — belongs to the OUTER
   wrapper (not the max-width inner container) so it reaches the true
   edges/corners of the footer. background-size:100% 100% is the
   requested starting point since the source art is composed with
   molecular structures around the perimeter and open space in the
   middle — stretching to fill preserves that corner framing rather
   than cropping it via cover. Revisit if the live asset looks
   distorted. Light opacity + the gradient in 17a-ii keep it a subtle
   backdrop, not the focal point. */
.plz-site-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: url("https://pepperlabz.com/wp-content/uploads/2026/08/hexagonpattern-crhome-1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  opacity: 0.55 !important;
}

/* 17a-ii. Dark radial mask — darkest in the center, where the columns/
   FDA panel/payment/copyright content actually sits, easing off toward
   the outer edges and corners so the hexagon's perimeter framing stays
   visible there. A radial (not vertical) gradient because the footer's
   content spans full width, not just a vertical center band. */
.plz-site-footer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: radial-gradient(
    ellipse at center,
    rgba(17, 19, 23, 0.92) 0%,
    rgba(17, 19, 23, 0.82) 45%,
    rgba(17, 19, 23, 0.55) 100%
  ) !important;
}

.plz-site-footer-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 88px 0 56px !important;
}

/* 17b. Column grid — 4 columns desktop. */
.plz-site-footer-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}

/* 17c. Brand column — logo + description + social icons. */
.plz-site-footer-logo {
  max-width: 138px !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 20px !important;
}

.plz-site-footer-brand p {
  max-width: 300px !important;
  margin: 0 0 24px !important;
  color: #9aa0aa !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.plz-site-footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.plz-site-footer-social a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f5f6f8 0%, #dcdee2 40%, #9a9fa7 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.15s ease !important;
}

.plz-site-footer-social svg {
  width: 15px !important;
  height: 15px !important;
  fill: #22262b !important;
}

.plz-site-footer-social a:hover {
  transform: translateY(-2px) !important;
}

/* 17d. Nav columns — heading + link list. Headings get a restrained
   chrome/metallic treatment (same gradient family used on the
   Disclaimer page's title) — solid color set first as a fallback for
   browsers without background-clip: text support. Body links stay
   plain, per the "don't apply metallic gradients to normal copy"
   direction. */
.plz-site-footer-col-heading {
  margin: 0 0 22px !important;
  color: #d8dade !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e7e9ec 20%,
    #aeb2b9 45%,
    #f5f6f8 60%,
    #7d828a 80%,
    #c9ccd2 100%
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.plz-site-footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.plz-site-footer-links li {
  margin: 0 0 14px !important;
}

.plz-site-footer-links a {
  color: #9aa0aa !important;
  font-size: 14.5px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.plz-site-footer-links a:hover {
  color: #ffffff !important;
}

/* 17e. FDA / Research Disclaimer panel — output by
   plz_fda_disclaimer_panel_shortcode(), called directly inside
   plz_render_site_footer(). A deliberately large, highlighted band:
   darker graphite than the surrounding footer, chrome border, metallic
   accent edge (border-image, no extra markup needed). */
.plz-fda-panel {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
  max-width: 1240px !important;
  margin: 56px auto 0 !important;
  padding: 40px 44px !important;
  background: #0b0c0f !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(180deg, #f5f6f8, #9a9fa7, #5b5f66) 1 !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
  position: relative !important;
  z-index: 2 !important;
}

.plz-fda-panel-icon {
  flex: 0 0 auto !important;
  width: 48px !important;
  height: 48px !important;
  filter: brightness(1.4) !important;
}

.plz-fda-panel-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0.92 !important;
}

.plz-fda-panel-heading {
  margin: 0 0 14px !important;
  color: #d8dade !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e7e9ec 20%,
    #aeb2b9 45%,
    #f5f6f8 60%,
    #7d828a 80%,
    #c9ccd2 100%
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.plz-fda-panel-body p {
  margin: 0 !important;
  max-width: 760px !important;
  color: #b7bcc4 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.plz-fda-panel-link {
  display: inline-block !important;
  margin-top: 10px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* 17f. Payment row + copyright/trust row — real sibling divs in
   plz_render_site_footer(), stacked in natural document order. No
   grid-area workaround needed anymore (that only existed because
   Astra's 4 widget slots came in a fixed order this CSS didn't
   control). */
.plz-site-footer-payment-row {
  padding: 28px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-align: center !important;
}

.plz-site-footer-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 20px 0 36px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.plz-site-footer-copyright {
  color: #7d838c !important;
  font-size: 13px !important;
}

/* Payment row content ([pepperlabz_footer_payment]). */
.plz-footer-payment {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.plz-footer-payment-label {
  color: #7d838c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-right: 6px !important;
}

.plz-footer-pay-badge {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  color: #c7cad0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Trust row content ([pepperlabz_footer_trust]). */
.plz-footer-trust {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px 18px !important;
}

.plz-footer-trust-item {
  color: #9aa0aa !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* 17g. Mobile — background art switches off entirely (kept to the
   solid dark base only, for guaranteed readability + performance);
   stacked columns; the FDA panel and payment/trust rows stay full-
   width and legible; comfortable touch targets; no horizontal
   overflow. */
@media (max-width: 767px) {
  .plz-site-footer {
    padding: 0 20px !important;
  }

  .plz-site-footer-inner {
    padding: 52px 0 28px !important;
  }

  /* Mobile/tablet: switch from a full stretch (100% 100%, fine on wide
     desktop rows) to "cover" so the hexagon artwork scales
     proportionally instead of distorting on a much narrower, taller
     box — still full-bleed and edge-to-edge, just cropped rather than
     stretched. Slightly lower opacity keeps the smaller, denser-
     looking result from feeling busy on a small screen. */
  .plz-site-footer::before {
    background-size: cover !important;
    opacity: 0.4 !important;
  }

  .plz-site-footer::after {
    background: radial-gradient(
      ellipse at center,
      rgba(17, 19, 23, 0.94) 0%,
      rgba(17, 19, 23, 0.88) 50%,
      rgba(17, 19, 23, 0.65) 100%
    ) !important;
  }

  .plz-site-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .plz-site-footer-brand {
    text-align: center !important;
  }

  .plz-site-footer-logo,
  .plz-site-footer-brand p,
  .plz-site-footer-social {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }

  .plz-site-footer-links li {
    margin-bottom: 16px !important;
  }

  .plz-site-footer-links a {
    display: inline-block !important;
    padding: 4px 0 !important;
    font-size: 15px !important;
  }

  .plz-fda-panel {
    flex-direction: column !important;
    margin: 40px 0 0 !important;
    padding: 26px 22px !important;
  }

  .plz-site-footer-bottom-row {
    flex-direction: column !important;
    text-align: center !important;
    padding-bottom: 8px !important;
  }

  .plz-footer-trust {
    justify-content: center !important;
  }
}

/* ---------------------------------------------------------
   17h. HIDE THE OLD ASTRA FOOTER
   Do NOT add this block until you've confirmed .plz-site-footer is
   rendering correctly on the live site (see the approved plan,
   section 2/7) — otherwise there's a moment with no footer at all.
   This only hides the two real Astra footer-row wrappers; nothing
   else Astra-related (header, mobile drawer, any other builder zone)
   is touched, and their underlying menus/widgets are left alone in
   wp-admin — this is a display:none, not a deletion, so it's fully
   reversible.
--------------------------------------------------------- */
.site-primary-footer-wrap,
.site-below-footer-wrap {
  display: none !important;
}

/* ---------------------------------------------------------
   18. NEWSLETTER SIGNUP — MAILPOET, RESTYLED TO THE ORIGINAL
   PEPPERLABZ/WPFORMS DESIGN
   .plz-newsletter-wrap is the shared wrapper output by
   plz_render_newsletter_signup() (pepperlabz-product-layout.php), used
   identically on every product page AND the homepage. It replaces the
   old .plz-wpforms-email-wrap — same design values, retargeted from
   WPForms' class names onto MailPoet's REAL rendered markup (confirmed
   from live outerHTML, not guessed):
     form.mailpoet_form              -> the <form> itself
     .mailpoet_paragraph             -> each field's wrapper <div>
       (email field is the first, .mailpoet_paragraph.last wraps the
       submit button)
     input.mailpoet_text             -> the email <input>
     input[type="submit"].mailpoet_submit -> the submit button (a real
       <input type="submit">, not a <button>)
     .mailpoet_form_loading          -> the 3-dot loading state MailPoet
       shows/hides itself during submit — left alone, not toggled here
     .mailpoet_message / .mailpoet_validate_success /
       .mailpoet_validate_error      -> MailPoet's own success/error
       text, shown/hidden by MailPoet itself via inline style — this
       CSS never sets `display` on these, only color/spacing, so it
       can't fight MailPoet's own show/hide logic
     span[class*="mailpoet_error_"]  -> per-field validation message;
       MailPoet generates a random suffix per render
       (e.g. .mailpoet_error_i6w9f), so this is matched by attribute
       selector rather than a hardcoded class name
   MailPoet ships its own inline <style id="..."> block scoped to
   #mailpoet_form_N with plain (non-!important) rules — every rule below
   uses !important, the same convention already used everywhere else in
   this file, so precedence here doesn't depend on DOM/source order. */

.plz-newsletter-wrap {
  width: 100% !important;
}

.plz-newsletter-wrap .mailpoet_form_popup_overlay {
  display: none !important;
}

.plz-newsletter-wrap #mailpoet_form_1,
.plz-newsletter-wrap form.mailpoet_form {
  width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

.plz-newsletter-wrap form.mailpoet_form {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.plz-newsletter-wrap .mailpoet_paragraph {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.plz-newsletter-wrap .mailpoet_paragraph:not(.last) {
  flex: 1 1 auto !important;
  max-width: 430px !important;
}

.plz-newsletter-wrap .mailpoet_paragraph.last {
  flex: 0 0 auto !important;
}

/* Email input — MailPoet sets width:100% inline on the element itself,
   so this only needs the visual design, not width. */
.plz-newsletter-wrap input.mailpoet_text {
  height: 70px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.13) !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  padding: 0 34px !important;
  box-shadow: none !important;
  outline: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.plz-newsletter-wrap input.mailpoet_text::placeholder {
  color: rgba(0, 0, 0, 0.48) !important;
}

.plz-newsletter-wrap input.mailpoet_text:focus {
  border-color: rgba(0, 0, 0, 0.34) !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.045) !important;
}

/* Submit button — also has an inline width:100%/border-color:transparent
   from MailPoet; overridden the same way. */
.plz-newsletter-wrap input[type="submit"].mailpoet_submit {
  width: auto !important;
  height: 70px !important;
  min-width: 190px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 0 34px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease !important;
}

.plz-newsletter-wrap input[type="submit"].mailpoet_submit:hover {
  background: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
}

/* MailPoet's own 3-dot loading indicator — left functionally alone
   (MailPoet shows/hides it itself), just kept from breaking the pill
   layout while visible. */
.plz-newsletter-wrap .mailpoet_form_loading {
  position: absolute !important;
  right: 14px !important;
  bottom: -26px !important;
}

/* Success / error messages — MailPoet toggles `display` on these two
   itself; only color/spacing is set here, on purpose. */
.plz-newsletter-wrap .mailpoet_message {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  flex-basis: 100% !important;
}

.plz-newsletter-wrap .mailpoet_validate_success {
  margin: 0 !important;
  padding: 18px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(22, 163, 74, 0.25) !important;
  background: rgba(22, 163, 74, 0.08) !important;
  color: #087a39 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.plz-newsletter-wrap .mailpoet_validate_error {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: #d93025 !important;
  font-size: 13px !important;
}

.plz-newsletter-wrap span[class*="mailpoet_error_"] {
  display: block !important;
  margin-top: 6px !important;
  color: #d93025 !important;
  font-size: 13px !important;
}

/* Desktop / laptop layout helper — matches the original design's
   right-aligned, capped-width treatment. */
@media (min-width: 1025px) {
  .plz-email-section {
    align-items: center !important;
  }

  .plz-newsletter-wrap {
    max-width: 650px !important;
    margin-left: auto !important;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .plz-newsletter-wrap form.mailpoet_form {
    justify-content: flex-start !important;
    max-width: 100% !important;
  }

  .plz-newsletter-wrap .mailpoet_paragraph:not(.last) {
    max-width: none !important;
  }

  .plz-newsletter-wrap input.mailpoet_text {
    height: 62px !important;
    font-size: 16px !important;
    padding: 0 24px !important;
  }

  .plz-newsletter-wrap input[type="submit"].mailpoet_submit {
    height: 62px !important;
    min-width: 160px !important;
    font-size: 14px !important;
    padding: 0 28px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .plz-newsletter-wrap form.mailpoet_form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .plz-newsletter-wrap .mailpoet_paragraph {
    width: 100% !important;
    max-width: none !important;
  }

  .plz-newsletter-wrap input.mailpoet_text {
    width: 100% !important;
    height: 58px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    padding: 0 22px !important;
  }

  .plz-newsletter-wrap input[type="submit"].mailpoet_submit {
    width: 100% !important;
    height: 58px !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    font-size: 14px !important;
  }

  .plz-newsletter-wrap .mailpoet_form_loading {
    right: 50% !important;
    transform: translateX(50%) !important;
    bottom: -24px !important;
  }
}

/* Desktop widening — same values that already existed on live product
   pages (additional-css.css's old "FIX WPFORMS EMAIL INPUT WIDTH"
   block, scoped to body.single-product), now applied universally
   instead of body.single-product-only. Root cause of the homepage's
   collapsed input: .plz-email-section's BASE grid column is only
   440px (1fr 440px, set higher up in this file) — that's where the
   original WPForms design's numbers came from. Product pages only
   looked right because this exact override already widened their
   column to minmax(560px,720px); the homepage never got it, so its
   .plz-newsletter-wrap was stuck inside a 440px cell. Inside that cell,
   the base flex rule (form.mailpoet_form { display:flex }) has to fit
   the email paragraph (flex:1 1 auto, so IS allowed to shrink) next to
   the submit button (flex:0 0 auto, NOT allowed to shrink) — with
   ~440px total for a 190px+ button plus a 430px-max input plus a 14px
   gap, flex-shrink had nowhere to take space from except the input,
   collapsing it down to content-width (just enough for the caret).
   Widening the grid column removes the deficit entirely, and switches
   the form to the same explicit grid layout used on product pages
   (minmax(360px,1fr) 230px) where the input's track has a real 360px
   floor regardless of flex behavior. Applying this without the
   body.single-product prefix changes nothing for product pages (same
   selector target, same values, same !important) — it only reaches
   the homepage, which previously matched no widening rule at all. */
@media (min-width: 1025px) {
  .plz-email-section {
    grid-template-columns: minmax(420px, 1fr) minmax(560px, 720px) !important;
    gap: 48px !important;
  }

  .plz-newsletter-wrap {
    max-width: 720px !important;
  }

  .plz-newsletter-wrap form.mailpoet_form {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) 230px !important;
    gap: 18px !important;
  }

  .plz-newsletter-wrap .mailpoet_paragraph:not(.last) {
    max-width: none !important;
  }

  .plz-newsletter-wrap input[type="submit"].mailpoet_submit {
    width: 230px !important;
    min-width: 230px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1350px) {
  .plz-email-section {
    grid-template-columns: minmax(380px, 1fr) minmax(520px, 650px) !important;
    gap: 34px !important;
  }

  .plz-newsletter-wrap form.mailpoet_form {
    grid-template-columns: minmax(330px, 1fr) 210px !important;
    gap: 14px !important;
  }

  .plz-newsletter-wrap input[type="submit"].mailpoet_submit {
    width: 210px !important;
    min-width: 210px !important;
  }
}

/* ---------------------------------------------------------
   19. GLP-3 RT 20MG VIAL — SCALE COMPENSATION
   The 20mg vial source image (PL-RT-20mg-Transparent.webp) is 1024x1536 —
   a 2:3 portrait crop — while every other product's vial
   (including GLP-3 RT 10mg) is a 771x771 square. All of the
   .plz-main-vial / .plz-bundle-img img width+height:auto rules
   in Additional CSS were sized assuming a square image, so at
   the same width the 20mg vial renders 1.5x taller and visually
   overpowers the 10mg vial in the same spot.

   The strength-selector JS (pepperlabz-product-layout.php) adds
   the .plz-vial-20mg class to the main vial <img> and every
   bundle-card thumbnail <img> only while 20mg is selected. These
   overrides scale ONLY that state down by the exact 2/3 factor
   (1 / 1.5 aspect ratio) needed to match the 10mg vial's real
   rendered height at each breakpoint — not a guessed size.
--------------------------------------------------------- */

/* Desktop — matches "Desktop" block in Additional CSS (500px -> 333px) */
@media (min-width: 1025px) {
  body.single-product .plz-product-page .plz-main-vial.plz-vial-20mg {
    width: 333px !important;
    max-width: 52% !important;
    max-height: 467px !important;
  }
}

/* Smaller laptops — matches 440px -> 293px */
@media (min-width: 1025px) and (max-width: 1280px) {
  body.single-product .plz-product-page .plz-main-vial.plz-vial-20mg {
    width: 293px !important;
    max-width: 51% !important;
  }
}

/* Tablet — matches 385px -> 257px */
@media (min-width: 768px) and (max-width: 1024px) {
  body.single-product .plz-product-page .plz-main-vial.plz-vial-20mg {
    width: 257px !important;
    max-width: 49% !important;
  }
}

/* Mobile — matches 300px -> 200px */
@media (max-width: 767px) {
  body.single-product .plz-product-page .plz-main-vial.plz-vial-20mg {
    width: 200px !important;
    max-width: 55% !important;
  }
}

/* Bundle-card thumbnails: Additional CSS's max-width:54px already clamps
   the 10mg (square) thumbnail down to an effective 54x54 box regardless
   of the height value used per bundle size. The 20mg image isn't wide
   enough to hit that same max-width clamp, so its height needs to be
   set directly to that same effective 54px instead. */
.plz-bundle-img img.plz-vial-20mg {
  height: 54px !important;
  max-width: 54px !important;
}

/* ---------------------------------------------------------
   20. MOBILE STICKY PURCHASE BAR
   Mobile-only (<=767px). Shown/hidden by an IntersectionObserver
   in the product page's inline <script>, based on whether
   .plz-cart-form is in view — not scroll position. Mirrors the
   real purchase state and forwards clicks to the real controls;
   never duplicates strength/price/coming-soon logic. Deliberately
   uses its own classes (not .plz-strength-btn / .plz-add-cart-btn)
   so the existing strength/coming-soon click handlers' broad
   selectors keep matching only the real controls.
--------------------------------------------------------- */

.plz-sticky-bar {
  display: none !important;
}

@media (max-width: 767px) {
  .plz-sticky-bar {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9990 !important; /* below .plz-coa-modal's 999999 */
    background: #fff !important;
    border-top: 1px solid #e4e5e8 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
  }

  .plz-sticky-bar.is-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .plz-sticky-bar-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .plz-sticky-bar-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 10px !important;
  }

  .plz-sticky-bar-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .plz-sticky-bar-price {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .plz-sticky-compare-price {
    color: #999 !important;
    font-size: 12px !important;
    text-decoration: line-through !important;
    margin-right: 6px !important;
  }

  .plz-sticky-main-price {
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
  }

  .plz-sticky-bar-controls {
    display: flex !important;
    gap: 8px !important;
  }

  .plz-sticky-strength-row {
    display: flex !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .plz-sticky-strength-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e4e5e8 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
  }

  .plz-sticky-strength-btn.is-active {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
  }

  .plz-sticky-add-btn {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 2px solid #0e0e10 !important;
    background: #0e0e10 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 16px !important;
  }

  /* Products with no strength selector: Add becomes the only child
     of the controls row — let it fill the row instead of sitting
     small and left-aligned. */
  .plz-sticky-bar-controls .plz-sticky-add-btn:only-child {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Extra bottom clearance only while the bar is actually visible
     (toggled on <html>, same convention as .plz-modal-open) — avoids
     a permanent gap on scroll positions where the bar never shows.
     Needs !important + this specificity to beat .plz-product-page's
     existing 70px !important mobile padding (additional-css.css). */
  html.plz-sticky-bar-visible .plz-product-page {
    padding-bottom: calc(70px + var(--plz-sticky-bar-h, 92px) + env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plz-sticky-bar {
    transition: none !important;
  }
}

/* Conversion Event: product page savings/free-gift/countdown lines
   (Phase 7, 2026-09-13). Additive-only via pepperlabz-event-product-page.php's
   wp_footer DOM injection — matches hierarchy priority: dollar primary,
   percentage secondary. Inert today (event_active flag is false). */
.plz-event-savings-line {
  margin: 4px 0 0;
  font-size: 14px;
  color: #1C1F23;
}

.plz-event-savings-line strong {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
}

.plz-event-savings-line span {
  color: #79818A;
}

.plz-event-freegift-line {
  margin: 8px 0 12px;
  font-size: 13px;
  color: #79818A;
}

.plz-event-product-countdown {
  margin-top: 12px;
  font-size: 12px;
  color: #79818A;
  text-align: center;
}

.plz-event-product-countdown span {
  color: #1C1F23;
  font-weight: 800;
}

/* Conversion Event: shop archive savings badges (Phase 9, 2026-09-13).
   Gated by plz_flag('shop_savings_badges') — inert today. */
ul.products li.product {
  position: relative;
}

/* Conversion Event: package product Add to Cart button color fix
   (2026-09-15). Scoped to body.plz-package-product only (the two package
   products, resolved by slug in pepperlabz-event-packages.php) — no other
   product page is touched. These two products currently render on
   WooCommerce's default single-product template (inheriting its default
   green), pending the real custom package template that will supersede
   this default rendering entirely. */
body.plz-package-product .single_add_to_cart_button,
body.plz-package-product button[name="add-to-cart"],
body.plz-package-product a.add_to_cart_button {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

body.plz-package-product .single_add_to_cart_button:hover,
body.plz-package-product button[name="add-to-cart"]:hover,
body.plz-package-product a.add_to_cart_button:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

.plz-shop-savings-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #1C1F23;
  color: #FFFFFF;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 6px;
}

/* ---------------------------------------------------------
   22. PRODUCT PAGE — CHROME ICONS IN THE PURCHASE AREA
   (2026-10-01) Replace the colored emoji on the Add to Cart button,
   the trust row (shipping / protected checkout / COA), the mobile
   sticky Add button and the Certificate of Analysis heading. Each
   <img> sits inside the emoji's original <span>/<div>, so sizes are
   in em and follow that element's existing per-breakpoint font-size
   (17/15px button, 21/17px trust row, 14px sticky, 23/20px heading)
   — no breakpoint needs its own rule. Heights are set per icon so the
   VISIBLE artwork is ~1em like the emoji it replaces (the reused
   files have transparent padding: the truck fills 80% of its canvas
   width, the shield 61% and the dropper 69% of their heights), and
   never exceed the rows' existing 1.5em line-height, so no row
   changes height.
--------------------------------------------------------- */

.plz-product-page img.plz-chrome-icon {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  vertical-align: middle !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.plz-product-page img.plz-chrome-icon--cart {
  height: 1em !important;
}

.plz-product-page img.plz-chrome-icon--truck {
  height: 1.3em !important;
}

.plz-product-page img.plz-chrome-icon--shield,
.plz-product-page img.plz-chrome-icon--dropper {
  height: 1.5em !important;
}

/* The trust row's line-height is 1.5em on desktop but only 1.25em on
   mobile, where a 1.5em icon would make the row taller than it was with
   emoji. Each icon's span becomes a centered box exactly one line tall
   (1lh = that breakpoint's own line-height), so the icon keeps its
   visible size, overflows evenly above/below, and the row height is
   unchanged at every breakpoint. (Browsers without the lh unit just
   fall back to an auto height — a few px taller, nothing breaks.) */
.plz-product-page .plz-trust-row span:has(> img.plz-chrome-icon) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 1lh !important;
  overflow: visible !important;
}

/* ---------------------------------------------------------
   23. PRODUCT PAGE — NO GAP ABOVE THE PRODUCT
   (2026-10-01) The research strip was removed from the template; this
   also removes Astra's 4em (64px) #primary top margin on custom
   product pages so the product hero sits directly under the promo bar
   (or the header when the bar isn't shown). The hero's own top padding
   (46px desktop / 18px mobile) is the remaining, intended spacing.
   Scoped by body.plz-custom-product, which PHP adds only on pages the
   custom template renders — default WooCommerce product pages keep
   Astra's margin.
--------------------------------------------------------- */

body.plz-custom-product #primary {
  margin-top: 0 !important;
}