/* Peptico product gate — the invitations. Tier-neutral (loaded whenever the gate applies), so it
   carries its own tokens: the same palette, radii and type the code pages use. One component in
   four shapes (banner, tile, strip, line), a carousel card, and the corner card. */

.pp-gate, .pp-gate-toast {
  --ink: #111111; --ink-2: #2b2b2b; --muted: #5f5f58; --faint: #8a8a83; --green: #004f42;
  --mint: #e6f0ed; --sage: #dfe7d9; --olive: #e7ebc9; --lavender: #e3e4f4; --tan: #eee6d8; --paper: #f7f6f2; --sky: #dbe7f2;
  --line: rgba(17, 17, 17, 0.08); --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font); color: var(--ink); box-sizing: border-box;
}
.pp-gate *, .pp-gate-toast * { box-sizing: border-box; }
.pp-gate p { margin: 0; }

/* ---- shapes ---------------------------------------------------------------------------- */
.pp-gate { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.pp-gate--banner { padding: 26px 28px; border-radius: 26px; }
.pp-gate--tile   { padding: 16px 20px; border-radius: 18px; }
.pp-gate--strip  { padding: 12px 16px; border-radius: 14px; gap: 10px 20px; }
.pp-gate--line   { display: block; padding: 0; text-align: center; }
.pp-gate--card   { flex-direction: column; align-items: flex-start; justify-content: space-between; height: 100%; min-height: 300px; padding: 22px; border-radius: 22px; }
.pp-gate__body { min-width: 0; flex: 1 1 320px; }
.pp-gate--card .pp-gate__body { flex: 0 0 auto; }
.pp-gate__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin: 0 0 6px !important; }
.pp-gate__head { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 6px !important; }
.pp-gate--card .pp-gate__head { font-size: 20px; }
.pp-gate__line { font-size: 15px; line-height: 1.5; color: var(--muted); }
.pp-gate--tile .pp-gate__line, .pp-gate--strip .pp-gate__line { font-size: 15px; font-weight: 500; color: var(--ink); }
.pp-gate--strip .pp-gate__line { font-size: 14px; }
.pp-gate--line .pp-gate__line { font-size: 13.5px; color: var(--muted); }
.pp-gate--line a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* tints */
.pp-gate--mint { background: var(--mint); }
.pp-gate--sage { background: var(--sage); }
.pp-gate--olive { background: var(--olive); }
.pp-gate--lavender { background: var(--lavender); }
.pp-gate--tan { background: var(--tan); }
.pp-gate--paper { background: var(--paper); box-shadow: 0 0 0 1px var(--line) inset; }

/* actions */
.pp-gate__actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.pp-gate__btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--ink) !important; color: #fff !important; font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none !important; border: 0; white-space: nowrap; transition: transform 120ms var(--ease), background-color 160ms var(--ease);
}
.pp-gate__btn:hover { background: var(--ink-2) !important; color: #fff !important; }
.pp-gate__btn.is-pressed { transform: scale(0.97); }
.pp-gate__btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.pp-gate__link { color: var(--ink) !important; font-size: 14px; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }
.pp-gate--strip .pp-gate__btn { height: 38px; padding: 0 16px; font-size: 13px; }

/* ---- placements ------------------------------------------------------------------------ */
/* Elementor archive template: in front of the search bar */
.pp-gate[data-pp-gate="shop"], .pp-gate[data-pp-gate="category"], .pp-gate[data-pp-gate="category-empty"], .pp-gate[data-pp-gate="search"] { margin: 0 0 22px; }
body.pp-gate-on .e-loop-nothing-found-message { display: none !important; }   /* the banner explains the empty grid */
/* product page: in front of the data tabs, whose first tab is Additional Information */
.pp-gate[data-pp-gate="product"] { margin: 0 0 26px; }
/* the COA vault: above the groups */
.pp-gate[data-pp-gate="coa"] { margin: 0 0 28px; }
/* bundles page: a pastel-blue band edge to edge, right under the hero and before the first sheet */
.pp-gate--sky { background: var(--sky); }
.pp6-gate { background: #dbe7f2; padding: 34px 0; }
.pp6-gate .pp-gate { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
@media (max-width: 560px) { .pp6-gate { padding: 26px 0; } }
/* partner page: under the claims */
.pp-gate[data-pp-gate="affiliate"] { margin: 18px 0 0; }
/* sign-in card and the /sign-in/ page */
.pp-gate[data-pp-gate="signin"] { margin: 18px 0 0; }
/* the side menu's signed-out card */
.pp-mcard__gate { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--green, #004f42); }
/* the cart drawer's empty state */
.pp9-empty__gate { display: block; margin-top: 10px; font-size: 13px; color: #5f5f58; }
.pp9-empty__gate a { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* the GLP chip we put back in Elementor's filter row: a link dressed as its neighbours */
a.e-filter-item.pp-gate-chip { text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; }
/* alias lines: in the search popup and under the COA vault's search */
.pp-gate--line[data-pp-gate="popup-alias"] { margin: 0 0 12px; text-align: left; }
.pp-gate--line[data-pp-gate="vault-alias"] { margin: 14px 0 0; text-align: left; }
.pp-gate--line[data-pp-gate="vault-alias"] .pp-gate__line { color: #004f42; font-weight: 500; }
/* the search popup's empty state */
.peptico-search-popup-empty .pp-gate--line { margin-top: 10px; }
/* homepage research-area tile */
.pp3-area.pp-gate-area { background: var(--mint, #e6f0ed); box-shadow: 0 0 0 1px rgba(0, 79, 66, 0.12) inset; }
.pp3-area.pp-gate-area .pp3-area__meta { color: #004f42; font-weight: 600; }

/* ---- the corner card ------------------------------------------------------------------- */
.pp-gate-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 9500; width: min(320px, calc(100vw - 32px));
  padding: 16px 18px 16px; border-radius: 22px;
  background: rgba(247, 246, 242, 0.86); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 20px 50px rgba(17, 17, 17, 0.16);
  opacity: 0; transform: translate3d(0, 28px, 0) scale(0.96); filter: blur(var(--pp-blur, 0px));
  will-change: transform, opacity; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none;
}
.pp-gate-toast.is-dragging { cursor: grabbing; }
.pp-gate-toast p { margin: 0; }
.pp-gate-toast__kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 4px !important; padding-right: 32px; }
.pp-gate-toast__head { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.pp-gate-toast__line { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 3px 0 12px !important; }
.pp-gate-toast .pp-gate__actions { gap: 14px; }
.pp-gate-toast__x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17, 17, 17, 0.06); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 120ms var(--ease), background-color 160ms var(--ease);
}
.pp-gate-toast__x svg { width: 14px; height: 14px; }
.pp-gate-toast__x:hover { background: rgba(17, 17, 17, 0.12); }
.pp-gate-toast__x.is-pressed { transform: scale(0.9); }
.pp-gate-toast:focus-visible { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 20px 50px rgba(17, 17, 17, 0.16), 0 0 0 3px rgba(0, 79, 66, 0.18); }

/* The side menu's z-index is trapped inside the sticky header's stacking context, so the card would
   draw over an open menu. While the menu, the cart drawer or the search popup is open, the card
   steps aside (the JS-driven inline opacity loses to !important here, as intended). */
body.peptico-search-popup-open .pp-gate-toast,
body:has(.peptico-mobile-side-menu.is-open) .pp-gate-toast,
body:has(.elementor-menu-cart--shown) .pp-gate-toast,
body:has(.elementor-menu-cart__container[aria-hidden="false"]) .pp-gate-toast { opacity: 0 !important; pointer-events: none; }

@media (max-width: 560px) {
  .pp-gate-toast { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .pp-gate--banner { padding: 22px 20px; border-radius: 22px; }
  .pp-gate__head { font-size: 19px; }
  .pp-gate__actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-gate-toast { transform: none; transition: opacity 200ms ease; filter: none; }
  .pp-gate__btn, .pp-gate-toast__x { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .pp-gate-toast { background: #f7f6f2; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .pp-gate-toast { background: #fff; border-color: #111; }
  .pp-gate--paper, .pp-gate--mint, .pp-gate--sage, .pp-gate--olive, .pp-gate--lavender { box-shadow: 0 0 0 1px #111 inset; }
}