/* SkyBuds PDP kit — shared foundations for the redesigned product page sections
   (skybuds-pdp-*.liquid). Visual language: the September 2026 Instagram system.
   Phones first: 95% of product-page traffic is on a phone. */

/* The tokens. `.sbk` carries them without any layout: the site chrome (header, menu sheet,
   account card) sits outside `.pdp` and takes its colours from here, never from its own hex. */
.pdp, .sbk {
  /* --blue is #2F76CB, not #3178CE: white body text on it reads at 4.59:1 (4.46 before). */
  /* --orange-deep is the button's 3D edge; orange TEXT is --orange-ink, the one orange that reads at
     4.5:1 on white, cream, sky, yellow-soft, lavender and grass (--orange-deep is 3.4-4.25:1) */
  --navy: #173F79; --blue: #2F76CB; --orange: #FF6B4A; --orange-deep: #D9492B; --orange-ink: #B8381C;
  --cream: #FFF8E9; --yellow: #FFDF68; --yellow-soft: #FFEFC2; --sky: #E7F3FD; --sky-2: #9CCBF2;
  --lav: #EBDFF5; --grass: #DDEBC4; --tp: #00B67A; --line: #F0E4CF;
  --pop: cubic-bezier(.34, 1.56, .64, 1); --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: 20px;
}
.pdp { position: relative; font-family: Sora, system-ui, sans-serif; color: var(--navy); overflow: clip; }
/* The theme sets overflow-x: hidden on html and body, which turns body into a scroll
   container and silently disables position: sticky. clip hides the same overflow without that. */
html:has(.pdp), html:has(.pdp) body { overflow-x: clip; }
.pdp *, .pdp *::before, .pdp *::after { box-sizing: border-box; }
.pdp img { max-width: 100%; }
.pdp__inner { position: relative; width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.pdp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.pdp-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--navy);
  font-weight: 700; font-size: 16px; letter-spacing: .02em; box-shadow: 0 4px 14px -8px rgba(23, 63, 121, .35); }
.pdp-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: inline-block; }
.pdp-h2 { margin: 16px 0 0; font-weight: 800; font-size: clamp(38px, 9.8vw, 68px); line-height: 1.02; letter-spacing: -0.025em; color: inherit; text-wrap: balance; }
:where(.pdp) h3 { text-wrap: balance; } /* card titles never strand a short word ("Connect in the / app") */
.pdp-lede { margin: 16px 0 0; font-weight: 500; font-size: clamp(19px, 5vw, 23px); line-height: 1.5; opacity: .85; max-width: 34ch; text-wrap: pretty; }
.pdp-head { text-align: center; }
.pdp-head .pdp-lede { margin-left: auto; margin-right: auto; }
.pdp-mark { position: relative; display: inline-block; white-space: nowrap; z-index: 0; max-width: 100%; }
.pdp-mark--wrap { white-space: normal; }
.pdp-mark::after {
  content: ""; position: absolute; z-index: -1; left: -2%; right: -2%; bottom: -.16em; height: .22em;
  background: url('/cdn/sb-chat-underline.webp') center / 100% 100% no-repeat; transform-origin: 0 50%;
}
.pdp-mark--ink::after { background: none; border-radius: 99px; height: .12em; background-color: var(--orange); }
.pdp-js [data-pdp-reveal] .pdp-mark::after { transform: scaleX(0); transition: transform .9s var(--ease) .25s; }
.pdp-js [data-pdp-reveal].is-in .pdp-mark::after { transform: scaleX(1); }

/* buttons */
.pdp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 34px; border: 0; border-radius: 999px;
  background: var(--orange); color: #fff; font: 700 21px/1 Sora, system-ui, sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 var(--orange-deep); transition: transform .15s ease, box-shadow .15s ease;
}
.pdp-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--orange-deep); color: #fff; }
.pdp-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--orange-deep); }
.pdp-btn:focus-visible, .pdp-ghost:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.pdp-btn--xl { min-height: 72px; padding: 0 44px; font-size: 24px; }
.pdp-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2.5px solid var(--navy);
  background: transparent; color: var(--navy); font: 700 19px/1 Sora, system-ui, sans-serif; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease; }
/* Hover lifts like the orange button and fills white; only where a mouse is (a finger's tap
   would leave it stuck on a phone). */
@media (hover: hover) { .pdp-ghost:hover { transform: translateY(-2px); background: #fff; color: var(--navy); } }
.pdp-ghost:active { transform: translateY(2px); }

/* speech bubble */
.pdp-bubble { position: relative; display: inline-block; padding: 14px 20px; background: #fff; border: 3px solid var(--blue); border-radius: 24px;
  font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--navy); box-shadow: 0 10px 24px -14px rgba(23, 63, 121, .35); }
.pdp-bubble--orange { border-color: var(--orange); }
.pdp-bubble--tail-l { border-bottom-left-radius: 8px; }
.pdp-bubble--tail-r { border-bottom-right-radius: 8px; }

/* Trustpilot stars (the platform's own star shape and green) */
.pdp-tp { display: inline-flex; gap: 3px; }
.pdp-tp span { width: 22px; height: 22px; background: var(--tp); display: grid; place-items: center; }
.pdp-tp span svg { width: 70%; height: 70%; fill: #fff; }
.pdp-tp--sm span { width: 16px; height: 16px; }
.pdp-tp span.is-half { background: linear-gradient(90deg, var(--tp) 50%, #dcdce6 50%); }

/* waves between sections */
.pdp-wave { display: block; width: 100%; height: clamp(36px, 7vw, 90px); }
/* A top wave is filled with the colour of the section above, so tuck it 1px under that
   section: phones otherwise show a hairline of page background at the seam. */
.pdp > .pdp-wave:first-child, .pdp > span:first-child + .pdp-wave { margin-top: -1px; }
.pdp-proof { margin-bottom: -1px; }

/* reveal (only once the kit has marked the page as scripted, so content never hides without JS) */
.pdp-js [data-pdp-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.pdp-js [data-pdp-reveal="pop"] { transform: translateY(24px) scale(.86) rotate(var(--r, 0deg)); transition-timing-function: ease, var(--pop); }
.pdp-js [data-pdp-reveal].is-in { opacity: 1; transform: none; }
.pdp-js [data-pdp-reveal="pop"].is-in { transform: rotate(var(--r, 0deg)); }

/* floating bob */
@keyframes pdp-bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.pdp-bob { animation: pdp-bob 5s ease-in-out infinite; }

/* marquee */
.pdp-marquee { display: flex; width: max-content; animation: pdp-marquee var(--dur, 40s) linear infinite; }
.pdp-marquee--rev { animation-direction: reverse; }
.is-paused .pdp-marquee, .pdp-marquee-wrap:hover .pdp-marquee { animation-play-state: paused; }
@keyframes pdp-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .pdp-js [data-pdp-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pdp-bob, .pdp-marquee { animation: none !important; }
  .pdp-mark::after { transform: none !important; }
}
@media (min-width: 990px) {
  .pdp { --gutter: 40px; }
  .pdp-bubble { font-size: 23px; }
}

/* ---------- review toasts (skybuds-pdp.js reviewToasts): a real quote in a speech bubble ---------- */
.pdp-toast {
  --navy: #173F79; --orange: #FF6B4A; --yellow: #FFDF68; --cream: #FFF8E9; --tp: #00B67A;
  position: fixed; left: 16px; bottom: var(--lift, 16px); z-index: 9000; width: min(340px, calc(100% - 32px));
  font-family: 'Sora', sans-serif; color: var(--navy);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-16px, 24px) rotate(-3deg) scale(.86); transform-origin: 24px 100%;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, visibility .3s, bottom .35s ease;
}
.pdp-toast.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.pdp-toast__card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 38px 14px 12px; border-radius: 24px 24px 24px 8px;
  background: #fff; color: inherit; text-decoration: none; border: 2px solid var(--navy); box-shadow: 0 4px 0 var(--navy), 0 22px 40px -22px rgba(23, 63, 121, .6); overflow: hidden; }
.pdp-toast::after { content: ""; position: absolute; left: 0; bottom: -11px; width: 18px; height: 14px; background: var(--navy); clip-path: polygon(0 0, 100% 0, 0 100%); }
.pdp-toast__face { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow); display: grid; place-items: center; }
.pdp-toast__face img { width: 100%; height: 100%; object-fit: cover; }
.pdp-toast__face.is-tp { background: var(--tp); box-shadow: 0 0 0 3px #C9F0E1; }
.pdp-toast__face.is-tp svg { width: 28px; height: 28px; fill: #fff; }
.pdp-toast__body { display: grid; gap: 3px; min-width: 0; }
.pdp-toast__stars { display: flex; gap: 2px; }
.pdp-toast__stars svg { width: 14px; height: 14px; fill: var(--orange); }
.pdp-toast.is-on .pdp-toast__stars svg { animation: pdp-toast-star .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.pdp-toast.is-on .pdp-toast__stars svg:nth-child(2) { animation-delay: .06s; } .pdp-toast.is-on .pdp-toast__stars svg:nth-child(3) { animation-delay: .12s; }
.pdp-toast.is-on .pdp-toast__stars svg:nth-child(4) { animation-delay: .18s; } .pdp-toast.is-on .pdp-toast__stars svg:nth-child(5) { animation-delay: .24s; }
@keyframes pdp-toast-star { from { opacity: 0; transform: scale(.2) rotate(-40deg); } }
.pdp-toast__quote { font-weight: 800; font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdp-toast__who { font-size: 15px; font-weight: 500; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-toast__who strong { font-weight: 800; }
.pdp-toast__timer { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }
.pdp-toast.is-on .pdp-toast__timer { animation: pdp-toast-timer 6s linear both; }
@keyframes pdp-toast-timer { from { transform: scaleX(1); } }
.pdp-toast__card:hover { transform: translateY(-2px); }
.pdp-toast__card { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.pdp-toast__card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.pdp-toast__x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 50%; background: var(--cream); cursor: pointer; }
.pdp-toast__x svg { width: 100%; height: 100%; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; fill: none; }
.pdp-toast__x:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .pdp-toast { transform: none; transition: opacity .2s ease, visibility .2s; }
  .pdp-toast *, .pdp-toast.is-on * { animation: none !important; }
}
@media (min-width: 760px) { .pdp-toast { width: 380px; left: 24px; } .pdp-toast__quote { font-size: 18px; } }
.pdp-toast__card { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.pdp-toast__card img { -webkit-user-drag: none; pointer-events: none; }

/* ---------- photo-review timer (skybuds-pdp.js reviewsAuto) ---------- */
.pdp-ugc__timer { display: flex; justify-content: center; gap: 8px; margin: 2px auto 0; width: min(260px, 70%); }
.pdp-ugc__timer[hidden] { display: none; }
.pdp-ugc__timer i { flex: 1 1 0; height: 6px; border-radius: 6px; background: rgba(23, 63, 121, .15); overflow: hidden; }
.pdp-ugc__timer i::after { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--orange, #FF6B4A); transform-origin: 0 50%; transform: scaleX(0); }
.pdp-ugc__timer i.is-done::after { transform: scaleX(1); }
.pdp-ugc__timer i.is-now::after { animation: pdp-ugc-fill 3.5s linear forwards; }
.pdp-ugc__timer.is-paused i.is-now::after { animation-play-state: paused; }
@keyframes pdp-ugc-fill { to { transform: scaleX(1); } }

/* the toast's close button: a fixed circle the theme's button styles cannot stretch */
.pdp-toast button.pdp-toast__x { width: 28px; height: 28px; min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px; aspect-ratio: 1; flex: none;
  padding: 6px; margin: 0; display: grid; place-items: center; line-height: 0; border-radius: 50%; box-shadow: none; }
.pdp-toast button.pdp-toast__x svg { width: 16px; height: 16px; }
/* while someone swipes, each bar shows exactly how far the row has moved */
.pdp-ugc__timer.is-follow i::after { animation: none; transform: scaleX(var(--f, 0)); transition: transform .08s linear; }

/* review bars: the fill is the scroll position (--f); the timer animates only the next bar */
.pdp-ugc__timer i::after { transform: scaleX(var(--f, 0)); transition: transform .12s linear; animation: none; }
.pdp-ugc__timer i.is-now::after { transition: none; animation: pdp-ugc-next 3.5s linear forwards; }
@keyframes pdp-ugc-next { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Toasts, 2026-09-23: smaller, and a finger on one owns the gesture. A flick in any
   direction (up included) throws it away instead of scrolling the page underneath. */
.pdp-toast { width: min(290px, calc(100% - 96px)); }
.pdp-toast__card { gap: 9px; padding: 8px 30px 10px 8px; border-radius: 20px 20px 20px 7px; touch-action: none; }
.pdp-toast__face { width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--yellow); }
.pdp-toast__face.is-tp svg { width: 20px; height: 20px; }
.pdp-toast__stars svg { width: 11px; height: 11px; }
.pdp-toast__quote { font-size: 14.5px; line-height: 1.25; -webkit-line-clamp: 2; }
.pdp-toast__who { font-size: 12.5px; }
.pdp-toast__timer { height: 3px; }
.pdp-toast::after { bottom: -9px; width: 14px; height: 11px; }
.pdp-toast button.pdp-toast__x { top: 6px; right: 6px; width: 24px; height: 24px; min-width: 24px; min-height: 24px; max-width: 24px; max-height: 24px; padding: 5px; }
.pdp-toast button.pdp-toast__x::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.pdp-toast button.pdp-toast__x svg { width: 14px; height: 14px; }
.pdp-toast.is-flung { transition: transform .32s cubic-bezier(.2, .7, .3, 1), opacity .32s ease !important; }
@media (min-width: 760px) { .pdp-toast { width: 340px; } .pdp-toast__quote { font-size: 15px; -webkit-line-clamp: 2; } }
/* The lift above the buy pill moves by transform (the bottom offset stays put): no layout shift. */
.pdp-toast { bottom: 16px; translate: 0 calc(16px - var(--lift, 16px)); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, visibility .3s, translate .35s ease; }

/* Review bars follow the finger exactly: no easing lag while the row moves. */
.pdp-ugc__timer i::after { transition: none; }