/* Prime Peptides Child — floating chat button (inc/chat-fab.php, 2026-10-04).
   One navy round button bottom-right; the card above it lists LINE and
   WhatsApp in their own brand colours. Sits above the back-to-top button's
   corner, rises above the phone sticky buy bar, hides under the cart drawer. */
.pp-chat { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--sans, "Poppins", system-ui, sans-serif); transition: bottom .25s ease, opacity .2s ease; }
.pp-chat__btn { display: grid; place-items: center; width: 54px; height: 54px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--pp-navy, #0b1a2b); color: #fff; box-shadow: 0 10px 28px -10px rgba(6, 20, 38, .55); cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.pp-chat__btn:hover { background: var(--pp-blue-deep, #1e3a5c); transform: translateY(-1px); }
.pp-chat__btn:focus-visible { outline: 3px solid var(--pp-blue, #2d6cdf); outline-offset: 3px; }
.pp-chat__btn svg { width: 24px; height: 24px; }
.pp-chat__close { display: none; }
.pp-chat.is-open .pp-chat__open { display: none; }
.pp-chat.is-open .pp-chat__close { display: block; }
/* Astra's back-to-top button moves up to sit above the chat button. */
html body #ast-scroll-top { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
/* Phone sticky buy bar on product pages: rise above it. */
body.pp-stickybar-on .pp-chat { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* Under the cart drawer and its backdrop. */
body.ppcd-open .pp-chat, body.pp-cart-open .pp-chat { opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  .pp-chat { right: 16px; }
  .pp-chat__btn { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .pp-chat, .pp-chat__btn { transition: none; } }
/* Phones: the back-to-top arrow would sit on the chat button; the homepage
   already hides it on phones, so every page does now. */
@media (max-width: 921px) { html body #ast-scroll-top { display: none !important; } }

/* Fan-out (owner 2026-10-05): three round buttons rise above the main one,
   same size and spacing, each with a small label pill on its left. */
.pp-chat__fan { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pp-chat__fan li { margin: 0; padding: 0; }
.pp-chat__item { display: flex; align-items: center; gap: 10px; text-decoration: none !important; opacity: 0; transform: translateY(14px) scale(.6); transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.pp-chat.is-open .pp-chat__fan { pointer-events: auto; }
.pp-chat.is-open .pp-chat__item { opacity: 1; transform: none; }
.pp-chat.is-open .pp-chat__fan li:nth-last-child(1) .pp-chat__item { transition-delay: 0s; }
.pp-chat.is-open .pp-chat__fan li:nth-last-child(2) .pp-chat__item { transition-delay: .04s; }
.pp-chat.is-open .pp-chat__fan li:nth-last-child(3) .pp-chat__item { transition-delay: .08s; }
.pp-chat__lbl { padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px -8px rgba(6, 20, 38, .35), 0 0 0 1px rgba(11, 26, 43, .06); font: 600 13px/1 var(--sans, "Poppins", sans-serif); color: var(--pp-navy, #0b1a2b); white-space: nowrap; }
.pp-chat__dot { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(6, 20, 38, .5); }
.pp-chat__dot--brand { background: #fff; color: var(--pp-navy, #0b1a2b); box-shadow: 0 10px 24px -10px rgba(6, 20, 38, .5), inset 0 0 0 2px var(--pp-navy, #0b1a2b); }
.pp-chat__dot--brand svg { width: 24px; height: 28px; }
.pp-chat__dot--wa { background: #25D366; }
.pp-chat__dot--line { background: #06C755; }
.pp-chat__dot .pp-os-lg { width: 100%; height: 100%; background: transparent; border-radius: 50%; }
.pp-chat__dot .pp-os-lg svg { width: 30px; height: 30px; fill: #fff; }
.pp-chat__dot--wa .pp-os-lg svg { width: 27px; height: 27px; }
.pp-chat__item:hover .pp-chat__dot, .pp-chat__item:focus-visible .pp-chat__dot { transform: translateY(-1px); }
.pp-chat__item:focus-visible { outline: none; }
.pp-chat__item:focus-visible .pp-chat__dot { outline: 3px solid var(--pp-blue, #2d6cdf); outline-offset: 3px; }
.pp-chat.is-open .pp-chat__btn { background: var(--pp-navy, #0b1a2b); }
@media (max-width: 600px) {
  .pp-chat__dot { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .pp-chat__item { transition: opacity .1s linear; transform: none; } }
/* Contact page button: the current Prime Peptides mark on white. */
.pp-chat__dot--brand { background: #fff; color: var(--pp-navy, #0b1a2b); box-shadow: 0 10px 24px -10px rgba(6, 20, 38, .45), 0 0 0 1px rgba(11, 26, 43, .08); }
.pp-chat__dot--brand svg { width: 26px; height: 26px; }