/* SkyBuds PDP hero: the buy box (sections/skybuds-product.liquid) in the September 2026
   Instagram look. Loaded only when the section's pdp_style setting is on. Every selector
   is scoped to .skybuds-product.sb-hero, so Pearl, Sprout and the quiz pages are untouched.
   Visual only: no ids, forms or scripts change. Phones first (breakpoint 768px, as the section). */

.skybuds-product.sb-hero {
  --h-navy: #173F79; --h-blue: #2F76CB; --h-orange: #FF6B4A; --h-orange-deep: #D9492B; --h-orange-ink: #B8381C;
  --h-cream: #FFF8E9; --h-yellow: #FFDF68; --h-yellow-soft: #FFEFC2; --h-sky: #E7F3FD; --h-tp: #00B67A;
  --h-pop: cubic-bezier(.34, 1.56, .64, 1);
  background: var(--h-cream);
  padding-bottom: 96px;
  color: var(--h-navy);
  font-family: Sora, system-ui, sans-serif;
}
/* A soft wave into the navy proof ribbon below. */
.skybuds-product.sb-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; background: var(--h-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V20C240 -6 480 -4 720 18S1200 44 1440 14V44z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V20C240 -6 480 -4 720 18S1200 44 1440 14V44z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.skybuds-product.sb-hero > p { color: var(--h-navy) !important; opacity: .8; position: relative; z-index: 1; }

/* The site header on this page: translucent cream with a rounded bottom, never a hard edge. */
html:has(.sb-hero) .skybuds-header { background: rgba(255, 248, 233, .9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-radius: 0 0 26px 26px; }

/* ---------- character picker ---------- */
.skybuds-product.sb-hero .skybuds-charpicker__label { color: var(--h-navy); opacity: .8; font-weight: 700; letter-spacing: .08em; }
/* the old landing CSS paints the species in a warm grey (#9A8C80, 3.3:1): the kit's navy */
.skybuds-product.sb-hero .skybuds-charpicker__species { color: var(--h-navy); opacity: .8; }
.skybuds-product.sb-hero .skybuds-charpicker__item { border: 2.5px solid #F0E4CF; border-radius: 20px; background: #fff; box-shadow: 0 8px 18px -14px rgba(23, 63, 121, .45); }
.skybuds-product.sb-hero .skybuds-charpicker__item.is-active { border-color: var(--h-orange); background: var(--h-yellow-soft); box-shadow: 0 10px 22px -14px rgba(255, 107, 74, .7); }
.skybuds-product.sb-hero .skybuds-charpicker__item { transition: transform .2s var(--h-pop), border-color .15s ease; }
@media (hover: hover) { .skybuds-product.sb-hero .skybuds-charpicker__item:not(.is-active):hover { transform: translateY(-2px); border-color: var(--h-yellow); } }
.skybuds-product.sb-hero .skybuds-charpicker__name { color: var(--h-navy); font-weight: 800; }
.skybuds-product.sb-hero .skybuds-charpicker__item.is-active .skybuds-charpicker__name { color: var(--h-orange-ink); }
.skybuds-product.sb-hero .skybuds-charpicker__avatar { background: #fff; box-shadow: inset 0 0 0 2px rgba(23, 63, 121, .06); }

/* ---------- rating: one light line over the title (Fred, 2026-09-24: less weight before the photo; it was a white pill) ---------- */
.skybuds-product.sb-hero .sb-hero__rating {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 0; border-radius: 0; background: none;
  color: var(--h-navy); font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: none;
  transition: transform .2s var(--h-pop);
}
.skybuds-product.sb-hero .sb-hero__rating:hover { transform: translateY(-2px); }
.skybuds-product.sb-hero .sb-hero__rating strong { font-weight: 800; }
.skybuds-product.sb-hero .sb-hero__stars { display: inline-flex; gap: 2px; }
.skybuds-product.sb-hero .sb-hero__stars > span { width: 17px; height: 17px; background: var(--h-tp); display: grid; place-items: center; }
.skybuds-product.sb-hero .sb-hero__stars > span.is-half { background: linear-gradient(90deg, var(--h-tp) 50%, #DCDCE6 50%); }
.skybuds-product.sb-hero .sb-hero__stars svg { width: 72%; height: 72%; fill: #fff; }
.skybuds-product.sb-hero .sb-hero__rating--mobile { display: none; }

/* ---------- title: "Meet Ash." ---------- */
.skybuds-product.sb-hero .skybuds-product__title { color: var(--h-navy); margin: 14px 0 0; line-height: 1; letter-spacing: -.03em; }
.skybuds-product.sb-hero .sb-hero__label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--h-orange-ink); margin-bottom: 10px; }
.skybuds-product.sb-hero .sb-hero__meet { display: block; font-size: clamp(52px, 6.2vw, 84px); font-weight: 800; }
.skybuds-product.sb-hero .sb-hero__name { position: relative; display: inline-block; z-index: 0; color: var(--h-navy); }
.skybuds-product.sb-hero .sb-hero__name::after {
  content: ""; position: absolute; z-index: -1; left: -2%; right: -4%; bottom: -.1em; height: .2em;
  background: url('/cdn/sb-chat-underline.webp') center / 100% 100% no-repeat; transform-origin: 0 50%; animation: sb-hero-draw .9s .35s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sb-hero-draw { from { transform: scaleX(0); } }

/* ---------- "I'm a toy that can talk!": a speech bubble that types itself, then "talk!" wiggles ---------- */
.skybuds-product.sb-hero .sb-hero__talk {
  position: relative; display: inline-flex; align-items: center; margin: 16px 0 0; padding: 12px 20px; min-height: 52px;
  border: 3px solid var(--h-orange); border-radius: 22px; border-bottom-left-radius: 8px; background: #fff; color: var(--h-navy);
  font-weight: 800; font-size: clamp(18px, 2vw, 22px); line-height: 1.2; box-shadow: 0 12px 24px -16px rgba(23, 63, 121, .5);
  transform-origin: 0 100%; animation: sb-hero-pop .55s .35s var(--h-pop) both;
}
.skybuds-product.sb-hero .sb-hero__talk::after { /* tail */
  content: ""; position: absolute; left: 18px; bottom: -12px; width: 18px; height: 18px; background: #fff;
  border-left: 3px solid var(--h-orange); border-bottom: 3px solid var(--h-orange); transform: skewY(-38deg); border-bottom-left-radius: 4px;
}
.skybuds-product.sb-hero .sb-hero__talk-words > span { display: inline-block; opacity: 0; transform: translateY(8px) scale(.8); animation: sb-hero-word .4s calc(1.5s + var(--w) * .12s) var(--h-pop) forwards; }
@keyframes sb-hero-word { to { opacity: 1; transform: none; } }
.skybuds-product.sb-hero .sb-hero__talk-emph { position: relative; color: var(--h-orange-ink); transform-origin: 50% 80%;
  animation: sb-hero-word .4s 2.1s var(--h-pop) forwards, sb-hero-wiggle 4s 2.8s ease-in-out infinite !important; }
@keyframes sb-hero-wiggle { 0%, 70%, 100% { opacity: 1; transform: none; } 76% { opacity: 1; transform: rotate(-8deg) scale(1.12); } 82% { opacity: 1; transform: rotate(7deg) scale(1.12); } 88% { opacity: 1; transform: rotate(-4deg) scale(1.05); } }
.skybuds-product.sb-hero .sb-hero__waves { position: absolute; right: -20px; top: 50%; width: 16px; height: 26px; margin-top: -13px; }
.skybuds-product.sb-hero .sb-hero__waves i { position: absolute; top: 0; bottom: 0; border: 3px solid var(--h-orange); border-left: 0; border-top-color: transparent; border-bottom-color: transparent; border-radius: 0 50% 50% 0; opacity: 0; animation: sb-hero-wave 2s 2.6s ease-out infinite; }
.skybuds-product.sb-hero .sb-hero__waves i:first-child { left: 0; width: 8px; } .skybuds-product.sb-hero .sb-hero__waves i:last-child { left: 4px; width: 14px; animation-delay: 2.9s; }
@keyframes sb-hero-wave { 0% { opacity: 0; transform: translateX(-4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(6px); } }
.skybuds-product.sb-hero .sb-hero__talk-words { margin-right: 18px; }
.skybuds-product.sb-hero .sb-hero__talk--mobile { display: none; }

/* ---------- "I'm a toy that can talk!" becomes a speech bubble ---------- */
.skybuds-product.sb-hero .skybuds-product__talk-row { margin-top: 18px; }
.skybuds-product.sb-hero .skybuds-product__talk-tagline { margin: 0; }
.skybuds-product.sb-hero .skybuds-product__talk-tagline-text {
  position: relative; display: inline-block; margin: 0; padding: 12px 20px; border: 3px solid var(--h-orange); border-radius: 22px; border-bottom-left-radius: 8px;
  background: #fff; color: var(--h-navy); font-weight: 800; font-size: clamp(18px, 2vw, 22px); box-shadow: 0 12px 24px -16px rgba(23, 63, 121, .5);
  animation: sb-hero-pop .6s .5s var(--h-pop) both;
}
.skybuds-product.sb-hero .skybuds-product__talk-tagline-emph { color: var(--h-orange-ink); }
.skybuds-product.sb-hero .skybuds-product__talk-scribble { display: none; }
@keyframes sb-hero-pop { from { opacity: 0; transform: translateY(10px) scale(.8); } }

/* ---------- gallery: a sticker-framed photo on a yellow card ---------- */
.skybuds-product.sb-hero .skybuds-product__main-image-wrap { isolation: isolate; }
.skybuds-product.sb-hero .skybuds-product__main-image-wrap::before {
  content: ""; position: absolute; inset: 14px -8px -10px 10px; z-index: -1; border-radius: 36px; background: var(--h-yellow); transform: rotate(3deg);
}
.skybuds-product.sb-hero .skybuds-product__slider { border-radius: 30px; border: 5px solid #fff; background: #fff; box-shadow: 0 26px 44px -30px rgba(23, 63, 121, .6); }
.skybuds-product.sb-hero .sb-hero__hi {
  position: absolute; z-index: 3; top: 18px; left: 16px; padding: 10px 16px; border-radius: 20px; border-bottom-left-radius: 6px; border: 3px solid var(--h-blue);
  background: #fff; color: var(--h-navy); font-weight: 800; font-size: 17px; box-shadow: 0 12px 24px -16px rgba(23, 63, 121, .6); pointer-events: none;
  animation: sb-hero-pop .6s .9s var(--h-pop) both, sb-hero-bob 5s 1.6s ease-in-out infinite;
}
@keyframes sb-hero-bob { 50% { transform: translateY(-6px); } }
/* its second line on the first photo: "I can talk!", "talk!" in orange with the old bubble's wiggle */
.skybuds-product.sb-hero .sb-hero__hi-talk { display: block; }
.skybuds-product.sb-hero .sb-hero__hi-talk em { display: inline-block; font-style: normal; color: var(--h-orange-ink); transform-origin: 50% 80%; animation: sb-hero-wiggle 4s 2.2s ease-in-out infinite; }
.skybuds-product.sb-hero .skybuds-product__nav { background: #fff; color: var(--h-navy); box-shadow: 0 6px 16px -8px rgba(23, 63, 121, .6); }
/* A short touch screen (an SE, a phone with Safari's bars out) has the photo's arrows where the order bar
   sits on the first screen, half under it at 320x568. There a finger swipes the photo and the dots show
   where it is, so the arrows step aside. */
@media (hover: none) and (max-height: 600px) { .skybuds-product.sb-hero .skybuds-product__nav { display: none; } }
.skybuds-product.sb-hero .skybuds-product__thumbnail { border-radius: 14px; border: 3px solid transparent; }
.skybuds-product.sb-hero .skybuds-product__thumbnail--active { border-color: var(--h-orange); }
.skybuds-product.sb-hero .skybuds-product__thumbnail { transition: border-color .15s ease; }
@media (hover: hover) { .skybuds-product.sb-hero .skybuds-product__thumbnail:not(.skybuds-product__thumbnail--active):hover { border-color: var(--h-yellow); } }

/* ---------- "Ash really talks" pointer: a navy live pill ---------- */
.skybuds-product.sb-hero .skybuds-product__talk-link { background: var(--h-navy); border: 0; border-radius: 999px; color: #fff; padding: 14px 20px; font-weight: 500; box-shadow: 0 12px 24px -16px rgba(23, 63, 121, .7); }
.skybuds-product.sb-hero .skybuds-product__talk-link strong { color: var(--h-yellow); }
.skybuds-product.sb-hero .skybuds-product__talk-link-icon { font-size: 0; width: 10px; height: 10px; border-radius: 50%; background: #FF4D4D; flex: 0 0 auto; animation: sb-hero-live 1.6s infinite; }
.skybuds-product.sb-hero .skybuds-product__talk-link-arrow { color: var(--h-yellow); }
@keyframes sb-hero-live { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 77, 77, 0); } }

/* ---------- buy card ---------- */
.skybuds-product.sb-hero .hero-reserve-card { border-radius: 30px; padding: 26px 22px 22px; border: 0; box-shadow: 0 30px 50px -34px rgba(23, 63, 121, .6); }
.skybuds-product.sb-hero .hero-reserve-card__product-label { color: var(--h-navy); opacity: .8; font-weight: 700; }
.skybuds-product.sb-hero .hero-reserve-card__batch { color: var(--h-orange-ink); font-weight: 700; }
.skybuds-product.sb-hero .hero-reserve-card__price { color: var(--h-navy); font-weight: 800; letter-spacing: -.03em; }
/* the struck-out price is 24px (large text, 3:1): 62% navy, not 45% (2.4:1) */
.skybuds-product.sb-hero .hero-reserve-card__price-original { color: var(--h-navy); opacity: .62; font-weight: 600; }
.skybuds-product.sb-hero .hero-reserve-card__cta {
  border-radius: 999px; background: var(--h-orange); color: #fff; font-family: Sora, system-ui, sans-serif; font-weight: 800; font-size: 20px; min-height: 64px;
  box-shadow: 0 6px 0 var(--h-orange-deep); transition: transform .15s ease, box-shadow .15s ease;
}
.skybuds-product.sb-hero .hero-reserve-card__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--h-orange-deep); }
.skybuds-product.sb-hero .hero-reserve-card__cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--h-orange-deep); }
.skybuds-product.sb-hero .hero-reserve-card__cta:focus-visible { outline: 3px solid var(--h-navy); outline-offset: 4px; }
.skybuds-product.sb-hero .hero-reserve-card__reassure { color: var(--h-navy); opacity: .8; }
.skybuds-product.sb-hero .hero-reserve-card__scarcity-left, .skybuds-product.sb-hero .hero-reserve-card__scarcity-text { color: var(--h-navy); }
.skybuds-product.sb-hero .hero-reserve-card__scarcity-pct { color: var(--h-orange-ink); font-weight: 700; }
.skybuds-product.sb-hero .hero-reserve-card__progress-bar { background: var(--h-yellow-soft); height: 10px; border-radius: 99px; }
.skybuds-product.sb-hero .hero-reserve-card__progress-fill { background: linear-gradient(90deg, var(--h-orange), #FFB347); border-radius: 99px; }
.skybuds-product.sb-hero .hero-reserve-card__trust li { color: var(--h-navy); font-weight: 600; }
.skybuds-product.sb-hero .hero-reserve-card__check { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--h-navy); color: #fff; stroke: #fff; flex: 0 0 auto; }
.skybuds-product.sb-hero .guarantee-badge { background: var(--h-sky); border: 0; border-radius: 20px; }
.skybuds-product.sb-hero .guarantee-badge__icon { background: var(--h-navy); color: #fff; }
.skybuds-product.sb-hero .guarantee-badge__title, .skybuds-product.sb-hero .guarantee-badge__text { color: var(--h-navy); }
.skybuds-product.sb-hero .guarantee-note { color: var(--h-navy); opacity: .8; }

@media (max-width: 767px) {
  .skybuds-product.sb-hero { padding-bottom: 88px !important; }
  /* The section's phone layout forces a white background and #1a1a1a title with !important. */
  .skybuds-product.sb-hero { background: var(--h-cream) !important; }
  .skybuds-product.sb-hero .skybuds-product__title--mobile { color: var(--h-navy) !important; }
  .skybuds-product.sb-hero .sb-hero__rating--mobile { display: inline-flex; order: 0; align-self: flex-start; justify-self: start; width: fit-content; margin: 16px 0 0; }
  .skybuds-product.sb-hero .sb-hero__rating--desktop { display: none; }
  .skybuds-product.sb-hero .sb-hero__talk--mobile { display: inline-flex; order: 0; align-self: flex-start; justify-self: start; width: fit-content; margin: 14px 0 6px; font-size: 18px; }
  .skybuds-product.sb-hero .sb-hero__talk--desktop { display: none; }
  .skybuds-product.sb-hero .skybuds-product__title--mobile { margin-top: 12px; }
  .skybuds-product.sb-hero .sb-hero__meet { font-size: clamp(50px, 15vw, 64px); }
  .skybuds-product.sb-hero .skybuds-charpicker__item { border-radius: 18px; }
  .skybuds-product.sb-hero .skybuds-product__main-image-wrap::before { inset: 12px -4px -8px 8px; }
  .skybuds-product.sb-hero .sb-hero__hi { font-size: 15px; top: 14px; left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .skybuds-product.sb-hero .sb-hero__name::after, .skybuds-product.sb-hero .skybuds-product__talk-tagline-text,
  .skybuds-product.sb-hero .sb-hero__hi, .skybuds-product.sb-hero .sb-hero__hi-talk em, .skybuds-product.sb-hero .skybuds-product__talk-link-icon { animation: none; }
  .skybuds-product.sb-hero .sb-hero__talk, .skybuds-product.sb-hero .sb-hero__talk-words > span, .skybuds-product.sb-hero .sb-hero__talk-emph { animation: none !important; opacity: 1; transform: none; }
  }

/* ---------- floating buy bar: a compact cream pill that springs up ---------- */
.skybuds-sticky-cta.sb-sticky {
  --h-navy: #173F79; --h-orange: #FF6B4A; --h-orange-deep: #D9492B; --h-orange-ink: #B8381C;
  width: min(560px, calc(100% - 24px)); padding: 8px 8px 8px 10px; border-radius: 999px;
  /* solid, not glass: from the first screen it floats over the price and body text, and the big "$139"
     showed through behind its own "Ash / $139" (2026-09-25) */
  background: #FFF8E9;
  box-shadow: 0 18px 40px -18px rgba(23, 63, 121, .55), 0 0 0 1.5px rgba(23, 63, 121, .08);
  transform: translate(-50%, 30px) scale(.94);
  transition: bottom .55s cubic-bezier(.34, 1.56, .64, 1), transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, visibility .3s;
}
.skybuds-sticky-cta.sb-sticky.skybuds-sticky-cta--visible { bottom: 16px; transform: translate(-50%, 0) scale(1); }
.skybuds-sticky-cta.sb-sticky.is-suppressed { bottom: -120px; opacity: 0; visibility: hidden; transform: translate(-50%, 30px) scale(.94); }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__left { gap: 10px; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image { width: 48px; height: 48px; border-radius: 50%; background: #FFDF68; box-shadow: 0 0 0 3px #fff; overflow: visible; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image img { width: 118%; height: 118%; margin: -14% 0 0 -9%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(23, 63, 121, .2)); }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__info { gap: 0; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__name { color: var(--h-navy); font-weight: 800; font-size: 16px; line-height: 1.15; }
.skybuds-sticky-cta.sb-sticky .sb-sticky__sub { color: var(--h-navy); opacity: .8; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__current { color: var(--h-orange-ink); font-weight: 800; font-size: 15px; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; min-height: 52px; border-radius: 999px;
  background: var(--h-orange); color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 5px 0 var(--h-orange-deep); transition: transform .15s ease, box-shadow .15s ease;
}
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--h-orange-deep); }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--h-orange-deep); }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: sb-sticky-shine 6s 2s ease-in-out infinite;
}
/* the shine moves by transform, not `left`: a moving `left` is a layout shift on every frame (0.025 on a phone
   on its side, 2026-09-26). 475% of its own 40% width = the button's -60% to 130% */
@keyframes sb-sticky-shine { 0%, 80% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }
@media (max-width: 480px) {
  .skybuds-sticky-cta.sb-sticky { width: calc(100% - 20px); padding: 7px 7px 7px 8px; }
  .skybuds-sticky-cta.sb-sticky.skybuds-sticky-cta--visible { bottom: 10px; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image { width: 44px; height: 44px; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn { padding: 0 18px; min-height: 48px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn::after { animation: none; display: none; } }

/* =====================================================================================
   2026-09-23 pass: bigger type, a tighter phone hero (buy box sooner), audio bars on the
   talk bubble, a bubble that speaks per photo, a tighter buy box and a bigger sticky pill.
   ===================================================================================== */
.skybuds-product.sb-hero { --sb-pm-size: 17px; }

/* "I'm a toy that can talk!": words pop in at once, then "talk!" wiggles. No audio bars: they read as sound playing. */
.skybuds-product.sb-hero .sb-hero__talk-words > span { animation-delay: calc(.45s + var(--w) * .1s); }
.skybuds-product.sb-hero .sb-hero__talk-emph { animation: sb-hero-word .4s 1s var(--h-pop) forwards, sb-hero-wiggle 4s 1.8s ease-in-out infinite !important; }
.skybuds-product.sb-hero .sb-hero__talk-words { margin-right: 0; }

/* The photo bubble changes line per photo */
.skybuds-product.sb-hero .sb-hero__hi { font-size: 19px; max-width: calc(100% - 90px); line-height: 1.25; transition: opacity .15s ease; }
.skybuds-product.sb-hero .sb-hero__hi.is-swapping, .skybuds-product.sb-hero .sb-hero__hi.is-hidden { opacity: 0; }
.skybuds-product.sb-hero .sb-hero__hi.is-said { animation: sb-hero-say .45s var(--h-pop) both, sb-hero-bob 5s .6s ease-in-out infinite; }
@keyframes sb-hero-say { from { opacity: 0; transform: translateY(8px) scale(.75) rotate(-4deg); } }
.skybuds-product.sb-hero .sb-gallery-dots { display: none; }

/* Buy box: tighter, bigger price and button */
.skybuds-product.sb-hero .hero-reserve-card { position: relative; padding: 22px 22px 22px; }
.skybuds-product.sb-hero .hero-reserve-card__header { position: absolute; top: 22px; right: 22px; margin: 0; }
.skybuds-product.sb-hero .hero-reserve-card__product-label { display: none; }
.skybuds-product.sb-hero .hero-reserve-card__batch { font-size: 15px; padding: 6px 12px; border-radius: 999px; background: #FFF1EC; }
.skybuds-product.sb-hero .hero-reserve-card__price-section { margin: 0; }
.skybuds-product.sb-hero .hero-reserve-card__price-row { align-items: baseline; gap: 12px; }
.skybuds-product.sb-hero .hero-reserve-card__price { font-size: 54px; line-height: 1; }
.skybuds-product.sb-hero .hero-reserve-card__price-original { font-size: 24px; }
/* Stripe's pay-later line (Stripe picks the plans and writes every word; the script asks for a US
   buyer's, the store's only market). It sits under the Order button's notes, in their small size, never
   between the price and the button (Fred, 2026-09-24: "i like the price and order button to be super
   close to each other"; it filled 71px there). The script mounts it into .sb-pay-later.
   Its words take the price's --sb-ink-soft (the kit's navy; a literal, because Stripe gets the raw
   value) and --sb-pm-size. Its frame cannot load our self-hosted Sora (no CORS on /assets fonts), so it
   keeps Stripe's system font beside the providers' own logos. */
.skybuds-product.sb-hero .hero-reserve-card__price { --sb-ink-soft: #173F79; --sb-pm-size: 13px; }
/* The slot holds the line's height from the first paint, so nothing under it moves when it arrives
   1-3s later: a placeholder until the script adds the line's box, then the box itself while Stripe
   draws. Only an empty answer or a failure gives the space back (a failure only once the slot is below
   the screen: skybuds-payment-messaging.js `fail()`). The slot and the box set their display
   on purpose: the theme hides every empty div (div:empty), and both are empty until Stripe mounts, which
   let the space collapse for a second on every load (2026-09-24).
   Heights are Stripe's line at 13px, measured on staging in Chromium and WebKit: its frame is live
   (Klarna) 26px on one line in a slot 353px or wider, 44px on two below; the test account (staging,
   marked by the staging Worker) puts its two providers' logos on a row of their own: 46px, 64px under
   272px. The frame's wrapper hangs 4px over each edge (negative margins, room for focus rings), so the
   words take the frame's height less 8px: that is what the slot holds. The box contains the wrapper's
   margins (flow-root), so its height is the same whether Stripe has drawn yet or not; with the margins
   collapsing through it, everything under the line moved 8px when it arrived (staging, 2026-09-25). */
.skybuds-product.sb-hero .sb-pay-later { display: block; container: sb-pay / inline-size; margin: 12px 0 0; }
.skybuds-product.sb-hero .sb-pay-later::after, .skybuds-product.sb-hero .sb-pay-later .sb-payment-message { --sb-pl-h: 36px; }
@container sb-pay (min-width: 353px) {
  .skybuds-product.sb-hero .sb-pay-later::after, .skybuds-product.sb-hero .sb-pay-later .sb-payment-message { --sb-pl-h: 18px; }
}
html[data-pay-later="test"] .skybuds-product.sb-hero .sb-pay-later::after, html[data-pay-later="test"] .skybuds-product.sb-hero .sb-pay-later .sb-payment-message { --sb-pl-h: 56px; }
@container sb-pay (min-width: 272px) {
  html[data-pay-later="test"] .skybuds-product.sb-hero .sb-pay-later::after, html[data-pay-later="test"] .skybuds-product.sb-hero .sb-pay-later .sb-payment-message { --sb-pl-h: 38px; }
}
html.js .skybuds-product.sb-hero .sb-pay-later:not(:has(> .sb-payment-message))::after { content: ""; display: block; height: var(--sb-pl-h); }
.skybuds-product.sb-hero .sb-pay-later .sb-payment-message { display: flow-root; margin: 0; min-height: var(--sb-pl-h); }
.skybuds-product.sb-hero .sb-pay-later .sb-payment-message[data-loading="true"] { margin: 0; height: auto; overflow: hidden; visibility: hidden; }
.skybuds-product.sb-hero .sb-pay-later .sb-payment-message[data-empty="true"] { margin: 0; min-height: 0; height: 0; overflow: hidden; visibility: hidden; }
.skybuds-product.sb-hero .sb-pay-later .sb-payment-message[hidden] { display: none; }
/* no line at all (no price, a failure, a private page): the slot gives its margin back too */
.skybuds-product.sb-hero .sb-pay-later:has(> .sb-payment-message[hidden]), .skybuds-product.sb-hero .sb-pay-later:has(> .sb-payment-message[data-empty="true"]) { margin: 0; }
.skybuds-product.sb-hero .skybuds-product__form { margin-top: 16px; }
.skybuds-product.sb-hero .hero-reserve-card__cta { min-height: 76px; font-size: 25px; letter-spacing: -.01em; gap: 12px; box-shadow: 0 7px 0 var(--h-orange-deep); }
.skybuds-product.sb-hero .hero-reserve-card__cta-arrow { font-size: 26px; }
.skybuds-product.sb-hero .sb-reassure { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.skybuds-product.sb-hero .sb-reassure li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--h-navy); }
.skybuds-product.sb-hero .sb-reassure svg { flex: 0 0 auto; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--h-sky); fill: none; stroke: var(--h-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skybuds-product.sb-hero .hero-reserve-card__scarcity { margin-top: 18px; }
.skybuds-product.sb-hero .hero-reserve-card__scarcity-text { font-size: 16px; }
.skybuds-product.sb-hero .hero-reserve-card__trust { margin-top: 16px; gap: 10px; }
.skybuds-product.sb-hero .hero-reserve-card__trust li { font-size: 18px; gap: 12px; line-height: 1.3; }
.skybuds-product.sb-hero .hero-reserve-card__check { width: 24px; height: 24px; padding: 4px; }
.skybuds-product.sb-hero .guarantee-badge { margin-top: 18px; padding: 16px 18px; }
.skybuds-product.sb-hero .guarantee-badge__title { font-size: 18px; }
.skybuds-product.sb-hero .guarantee-badge__text { font-size: 16px; line-height: 1.45; }
.skybuds-product.sb-hero .guarantee-note { font-size: 15px; }
.skybuds-product.sb-hero .sb-hero__rating { font-size: 16px; }
.skybuds-product.sb-hero .sb-hero__label { font-size: 15px; }
.skybuds-product.sb-hero .skybuds-charpicker__name { font-size: 17px; }
.skybuds-product.sb-hero .skybuds-charpicker__label { font-size: 14px; }
.skybuds-product.sb-hero .skybuds-product__talk-link { font-size: 17px; }
.skybuds-product.sb-hero > p { font-size: 15px !important; }

@media (max-width: 767px) {
  /* Phone: fit rating, name, photo, price and the Order button into the first screen or so */
  .skybuds-product.sb-hero { padding-top: 10px !important; }
  .skybuds-product.sb-hero .skybuds-product__container { gap: 10px !important; }
  .skybuds-product.sb-hero .skybuds-charpicker { gap: 0; }
  .skybuds-product.sb-hero .skybuds-charpicker__label { display: none; }
  .skybuds-product.sb-hero .skybuds-charpicker__items { gap: 8px; }
  .skybuds-product.sb-hero .skybuds-charpicker__item { flex-direction: row; justify-content: center; text-align: left; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; }
  .skybuds-product.sb-hero .skybuds-charpicker__avatar { width: 36px; height: 36px; }
  .skybuds-product.sb-hero .skybuds-charpicker__name { font-size: 16px; }
  .skybuds-product.sb-hero .skybuds-charpicker__species { display: none; }
  .skybuds-product.sb-hero .sb-hero__rating--mobile { margin: 2px 0 0; padding: 0; font-size: 15px; }
  .skybuds-product.sb-hero .skybuds-product__title--mobile { margin-top: 0 !important; }
  .skybuds-product.sb-hero .sb-hero__label { font-size: 13px; margin-bottom: 4px; }
  .skybuds-product.sb-hero .sb-hero__meet { font-size: clamp(44px, 12.5vw, 54px); }
  .skybuds-product.sb-hero .sb-hero__talk--mobile { margin: 2px 0 8px; padding: 8px 16px; min-height: 46px; font-size: 19px; }
  .skybuds-product.sb-hero .skybuds-product__main-image-wrap { margin-bottom: 0 !important; }
  .skybuds-product.sb-hero .skybuds-product__thumbnails { display: none !important; }
  .skybuds-product.sb-hero .sb-gallery-dots { display: flex; justify-content: center; gap: 7px; margin: 12px 0 0; }
  .skybuds-product.sb-hero .sb-gallery-dots i { width: 9px; height: 9px; border-radius: 99px; background: rgba(23, 63, 121, .2); transition: width .3s cubic-bezier(.22, 1, .36, 1), background .3s; cursor: pointer; }
  .skybuds-product.sb-hero .sb-gallery-dots i.is-on { width: 26px; background: var(--h-orange); }
  .skybuds-product.sb-hero .sb-hero__hi { font-size: 17px; top: 12px; left: 12px; padding: 8px 14px; }
  .skybuds-product.sb-hero .hero-reserve-card { padding: 20px 18px 20px; }
  .skybuds-product.sb-hero .hero-reserve-card__header { top: 20px; right: 18px; }
  .skybuds-product.sb-hero .hero-reserve-card__price { font-size: 50px; }
  .skybuds-product.sb-hero .hero-reserve-card__cta { min-height: 72px; font-size: 24px; }
}

/* Floating buy pill: bigger, and it glides in and out instead of jumping */
.skybuds-sticky-cta.sb-sticky {
  bottom: 16px !important; width: min(620px, calc(100% - 24px)); padding: 10px 10px 10px 12px;
  opacity: 0; visibility: hidden; transform: translate(-50%, calc(100% + 40px)) scale(.96);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .45s ease, visibility 0s linear .6s !important;
}
.skybuds-sticky-cta.sb-sticky.skybuds-sticky-cta--visible { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s !important; }
.skybuds-sticky-cta.sb-sticky.is-suppressed { bottom: 16px !important; opacity: 0; visibility: hidden; transform: translate(-50%, calc(100% + 40px)) scale(.96);
  transition: transform .5s cubic-bezier(.55, 0, .45, 1), opacity .35s ease, visibility 0s linear .5s !important; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image { width: 58px; height: 58px; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__name { font-size: 19px; }
.skybuds-sticky-cta.sb-sticky .sb-sticky__sub { font-size: 14px; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__current { font-size: 18px; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn { min-height: 62px; padding: 0 30px; font-size: 19px; }
@media (max-width: 480px) {
  .skybuds-sticky-cta.sb-sticky { bottom: 10px !important; width: calc(100% - 16px); padding: 8px 8px 8px 10px; }
  .skybuds-sticky-cta.sb-sticky.is-suppressed { bottom: 10px !important; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image { width: 50px; height: 50px; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__name { font-size: 18px; }
  .skybuds-sticky-cta.sb-sticky .sb-sticky__sub { font-size: 13px; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__current { font-size: 17px; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn { min-height: 56px; padding: 0 20px; font-size: 18px; }
}
/* 320-360px: the button gives back ~25px so the bud's name never truncates ("Spr…"). */
@media (max-width: 360px) {
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__left { gap: 8px; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image { width: 44px; height: 44px; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn { gap: 6px; padding: 0 16px; font-size: 16px; }
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .skybuds-sticky-cta.sb-sticky, .skybuds-sticky-cta.sb-sticky.skybuds-sticky-cta--visible, .skybuds-sticky-cta.sb-sticky.is-suppressed { transition: opacity .2s, visibility 0s !important; }
}
/* While the pill floats, a Tab stops above it, never under it (WCAG 2.4.11, qa/keys.mjs
   focus-under-fixed-bar): its 16px gap + its 82px + air. Phones: 10px + 72px + air. */
html:has(.skybuds-sticky-cta.sb-sticky.skybuds-sticky-cta--visible:not(.is-suppressed)) { scroll-padding-bottom: 116px; }
@media (max-width: 480px) { html:has(.skybuds-sticky-cta.sb-sticky.skybuds-sticky-cta--visible:not(.is-suppressed)) { scroll-padding-bottom: 100px; } }
/* keep the price clear of the Batch pill in the top-right corner */
.skybuds-product.sb-hero .hero-reserve-card__price-row { padding-right: 112px; flex-wrap: wrap; row-gap: 2px; }

/* ---------- Trustpilot collage slide in the gallery ---------- */
/* Two cards, the rating, two cards: the rating holds the middle of the photo, where the arrows are, so an arrow
   never sits on a quote (with the rating on top they covered the first card's words at every width, 2026-09-26).
   Each pair fills its half and meets the rating. Sizes follow the slide's own width (cqi), not the screen's: at
   900-1024 the gallery is narrower than a phone's, and the desktop sizes cut the cards there. The plain value
   before each clamp() is for a browser without container units. */
.skybuds-product.sb-hero .sb-proof-slide { position: relative; aspect-ratio: 1; container-type: inline-size; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(8px, 2.8%, 16px); padding: 4.5%; background: radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--h-cream) 60%, #FFEFC2 100%); overflow: hidden; }
.skybuds-product.sb-hero .sb-proof-slide__head { order: 2; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.skybuds-product.sb-hero .sb-proof-slide__stars { display: inline-flex; gap: 4px; }
.skybuds-product.sb-hero .sb-proof-slide__stars > span { width: 26px; width: clamp(20px, 7.5cqi, 38px); aspect-ratio: 1; display: grid; place-items: center; background: var(--h-tp); border-radius: 3px; }
.skybuds-product.sb-hero .sb-proof-slide__stars > span.is-half { background: linear-gradient(90deg, var(--h-tp) 50%, #DCDCE6 50%); }
.skybuds-product.sb-hero .sb-proof-slide__stars svg, .skybuds-product.sb-hero .sb-proof-slide__mini svg { width: 72%; height: 72%; fill: #fff; }
.skybuds-product.sb-hero .sb-proof-slide__score { font-size: 21px; font-size: clamp(17px, 6cqi, 28px); line-height: 1.2; font-weight: 600; color: var(--h-navy); }
.skybuds-product.sb-hero .sb-proof-slide__score strong { font-weight: 800; }
.skybuds-product.sb-hero .sb-proof-slide__cards { flex: 1 1 0; min-height: 0; list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 10px; gap: clamp(8px, 2.8cqi, 14px); }
.skybuds-product.sb-hero .sb-proof-slide__cards--top { order: 1; }
.skybuds-product.sb-hero .sb-proof-slide__cards--bottom { order: 3; align-items: flex-start; }
.skybuds-product.sb-hero .sb-proof-slide__cards li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 11px; padding: clamp(8px, 3cqi, 16px); border-radius: 18px;
  background: #fff; color: var(--h-navy); box-shadow: 0 14px 24px -18px rgba(23, 63, 121, .6); transform: rotate(var(--r)); }
.skybuds-product.sb-hero .sb-proof-slide__mini { display: inline-flex; gap: 2px; }
.skybuds-product.sb-hero .sb-proof-slide__mini > span { width: 15px; width: clamp(12px, 4.2cqi, 16px); aspect-ratio: 1; display: grid; place-items: center; background: var(--h-tp); border-radius: 2px; }
.skybuds-product.sb-hero .sb-proof-slide__cards p { margin: 0; font-weight: 800; font-size: 16px; font-size: clamp(13px, 4.6cqi, 20px); line-height: 1.22; }
.skybuds-product.sb-hero .sb-proof-slide__cards small { font-size: 14px; font-size: clamp(12px, 4cqi, 15px); opacity: .8; }
.skybuds-product.sb-hero .sb-proof-slide__cards small strong { font-weight: 800; }
/* the smallest phones (a 278px slide at 320): the rating's stars say it, so the cards drop their own */
@container (max-width: 300px) { .skybuds-product.sb-hero .sb-proof-slide__mini { display: none; } }
/* The cards drop in one by one the first time the slide is shown */
.skybuds-product.sb-hero .sb-proof-slide.is-seen .sb-proof-slide__cards li { animation: sb-proof-in .55s calc(var(--k) * .09s) var(--h-pop) both; }
@keyframes sb-proof-in { from { opacity: 0; transform: translateY(18px) rotate(calc(var(--r) * -2)) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .skybuds-product.sb-hero .sb-proof-slide.is-seen .sb-proof-slide__cards li { animation: none; } }

/* ---------- "Meet Ash." + what it is, big and bold ---------- */
.skybuds-product.sb-hero .sb-hero__kind { display: block; margin-top: 12px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; color: var(--h-orange-ink); }
@media (max-width: 767px) {
  .skybuds-product.sb-hero .sb-hero__kind { font-size: clamp(23px, 6.6vw, 28px); margin-top: 8px; }
}

/* =====================================================================================
   Calmer buy box (2026-09-23 pm): only the price and the Order button are big. A small
   label sits above the price, the rest is short, quiet and grouped.
   ===================================================================================== */
.skybuds-product.sb-hero .hero-reserve-card { padding: 22px 22px 20px; }
.skybuds-product.sb-hero .hero-reserve-card__header { top: 18px; right: 20px; }
.skybuds-product.sb-hero .hero-reserve-card__batch { font-size: 14px; padding: 5px 11px; }
.skybuds-product.sb-hero .sb-price-eyebrow { margin: 2px 0 6px; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--h-orange-ink); }
.skybuds-product.sb-hero .hero-reserve-card__price-row { padding-right: 0; }
.skybuds-product.sb-hero .skybuds-product__form { margin-top: 14px; }
.skybuds-product.sb-hero .sb-reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 12px 0 0; }
.skybuds-product.sb-hero .sb-reassure li { display: inline-flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 600; color: var(--h-navy); opacity: .75; }
.skybuds-product.sb-hero .sb-reassure li::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
  background: #2E9B57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.skybuds-product.sb-hero .hero-reserve-card__scarcity { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed rgba(23, 63, 121, .14); }
.skybuds-product.sb-hero .hero-reserve-card__scarcity-text { font-size: 15px; }
.skybuds-product.sb-hero .sb-perks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skybuds-product.sb-hero .sb-perks li { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 14px; background: var(--h-cream);
  font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--h-navy); }
.skybuds-product.sb-hero .sb-perks svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--h-orange-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skybuds-product.sb-hero .sb-guarantee { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--h-sky);
  font-size: 15.5px; line-height: 1.35; color: var(--h-navy); }
.skybuds-product.sb-hero .sb-guarantee svg { flex: 0 0 auto; width: 26px; height: 26px; fill: var(--h-navy); }
.skybuds-product.sb-hero .sb-guarantee strong { font-weight: 800; }
@media (max-width: 767px) {
  .skybuds-product.sb-hero .hero-reserve-card { padding: 20px 18px 18px; }
  .skybuds-product.sb-hero .hero-reserve-card__header { top: 16px; right: 16px; }
  .skybuds-product.sb-hero .sb-perks li { font-size: 14.5px; padding: 9px 8px; }
}
/* The perks on a 320px phone (2026-09-25): "psychology" (93px) did not fit beside its icon in a 122px
   column, so the grid grew 20px past the card's edge. A column never grows past its half now, and
   under 290px the icon sits above the words, which then have the tile's full width. */
.skybuds-product.sb-hero .sb-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); container-type: inline-size; }
@container (width < 290px) { .skybuds-product.sb-hero .sb-perks li { flex-direction: column; align-items: flex-start; gap: 5px; } }
/* The Batch 1 pill sits in the corner, on the label's line. Under 390px the two ran into each other
   ("FOUNDING FAMILY PRICE" under the pill at 320-375px, 2026-09-24): both a size smaller there, and
   under 350px the pill drops its dot */
@media (max-width: 389px) {
  .skybuds-product.sb-hero .sb-price-eyebrow { font-size: 13px; letter-spacing: .05em; }
  .skybuds-product.sb-hero .hero-reserve-card__batch { font-size: 13px; padding: 4px 9px; gap: 5px; }
}
@media (max-width: 349px) {
  .skybuds-product.sb-hero .sb-price-eyebrow { font-size: 12px; letter-spacing: .04em; }
  .skybuds-product.sb-hero .hero-reserve-card__batch { font-size: 12px; padding: 3px 8px; }
  .skybuds-product.sb-hero .hero-reserve-card__batch-dot { display: none; }
}
/* the price's place holds a number; when the live prices cannot load it says so in words ("Price
   unavailable", skybuds-checkout.js), set smaller so the words stay inside the card on a phone */
.skybuds-product.sb-hero .hero-reserve-card__price.is-words { font-size: 30px; line-height: 1.1; }

/* gallery autoplay: the active dot fills like a timer while it runs */
.skybuds-product.sb-hero .sb-gallery-dots i { position: relative; overflow: hidden; }
.skybuds-product.sb-hero .sb-gallery-dots.is-auto i.is-on { background: rgba(255, 107, 74, .32); }
.skybuds-product.sb-hero .sb-gallery-dots.is-auto i.is-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--h-orange);
  transform-origin: 0 50%; animation: sb-dot-fill 4.5s linear both; }
@keyframes sb-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* floating pill: the Bud sits dead centre in its circle, slightly larger than it */
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image { position: relative; overflow: visible; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image img { position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; max-width: none; margin: 0;
  object-fit: contain; object-position: 50% 50%; transform: translate(-50%, -54%); }
.skybuds-sticky-cta.sb-sticky .sb-sticky__sub { font-size: 14px; font-weight: 700; opacity: .8; }
/* On a phone the pill has ~120px for text: "Magical talking dragon" only ever showed as
   "Magical talk…", and the hero above already says what Ash is. Name + price + button. */
@media (max-width: 767px) { .skybuds-sticky-cta.sb-sticky .sb-sticky__sub { display: none; } }

/* Nothing dead in the middle of the floating bar (Fred, 2026-09-25: "the sticky CTA has a lot of dead
   space in the middle, USE IT to make the UI nicer ... move the price there or something"). One grid
   (the wrappers step aside): the name over the price, with the buy box's struck founding price beside
   it. On a phone the Order button takes the rest of the row; on a bar wide enough for more (500px
   inside, container sb-sticky: its own width, not the screen's), the Batch 1 meter fills the middle
   and the button keeps its size. Measured every 10px from 320 to 1280 for all three buds in both
   engines: nothing overlaps, nothing is cut, no gap over 16px. */
.skybuds-sticky-cta.sb-sticky { container: sb-sticky / inline-size; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__container { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "av name btn" "av price btn";
  align-items: center; column-gap: 12px; row-gap: 1px; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__left, .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__info { display: contents; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__image { grid-area: av; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__name { grid-area: name; align-self: end; }
.skybuds-sticky-cta.sb-sticky .sb-sticky__sub { display: none; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__price { grid-area: price; align-self: start; display: flex; align-items: baseline; gap: 6px; line-height: 1.1; white-space: nowrap; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__compare { font-size: 13px; font-weight: 600; color: var(--h-navy); opacity: .72; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.skybuds-sticky-cta.sb-sticky.is-price-words .skybuds-sticky-cta__compare { display: none; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn { grid-area: btn; justify-content: center; min-width: 0; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn svg { flex: none; }
.skybuds-sticky-cta.sb-sticky .sb-sticky__meter { grid-area: meter; display: none; min-width: 0; }
.skybuds-sticky-cta.sb-sticky .sb-sticky__meter-text { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--h-navy); white-space: nowrap; }
.skybuds-sticky-cta.sb-sticky .sb-sticky__meter-text b { font-weight: 800; color: var(--h-orange-ink); }
.skybuds-sticky-cta.sb-sticky .sb-sticky__meter-bar { display: block; height: 8px; margin-top: 8px; border-radius: 99px; background: #FFE9A8; overflow: hidden; }
.skybuds-sticky-cta.sb-sticky .sb-sticky__meter-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--h-orange), #FFB547); }
/* the meter's words shorten before they could run out of room: "83% claimed" from 500px of bar,
   "83% of Batch 1 claimed" from 560px; words in the price's place (a long "Price unavailable") drop it */
.skybuds-sticky-cta.sb-sticky .sb-sticky__meter-more { display: none; }
@container sb-sticky (width >= 500px) {
  .skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__container { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "av name meter btn" "av price meter btn"; column-gap: 16px; }
  .skybuds-sticky-cta.sb-sticky .sb-sticky__meter { display: block; padding-left: 16px; border-left: 1.5px solid rgba(23, 63, 121, .12); }
  .skybuds-sticky-cta.sb-sticky.is-price-words .sb-sticky__meter { visibility: hidden; }
}
@container sb-sticky (width >= 560px) { .skybuds-sticky-cta.sb-sticky .sb-sticky__meter-more { display: inline; } }
/* The Order button sits flush in the pill (Fred, 2026-09-25: "more padding on top ... not FLUSH with the
   container"). Its ledge hung 5px below its box, so the gap under it was half the gap above and at the end.
   The ledge is now drawn inside the button's own pill: the same gap above, below and at the end, and the
   two round ends share a centre. The label sits on the face, above the ledge; a press sinks it, and hover
   never lifts the button off its place. */
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn { padding-top: 0; padding-bottom: 5px; box-shadow: inset 0 -5px 0 var(--h-orange-deep);
  transition: background-color .15s ease, box-shadow .12s ease, padding .12s ease; }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn:hover { transform: none; background: #FF7C5E; box-shadow: inset 0 -5px 0 var(--h-orange-deep); }
.skybuds-sticky-cta.sb-sticky .skybuds-sticky-cta__btn:active { transform: none; padding-top: 3px; padding-bottom: 2px; box-shadow: inset 0 -2px 0 var(--h-orange-deep); }

/* The two notes under the Order button sit side by side, one line each (Fred, 2026-09-24: "i never
   want the cancel before it ships and free shipping over $200 to stack on top of each other";
   2026-09-25: "you can make the font scale down as well, its ugly when the lines stack on top of each
   other"). "Free shipping over $200" is the catalog's own line (skybuds-checkout.js), so it cannot get
   shorter: the type scales with the row instead. The pair is 27.5em wide (icons and gaps are in em
   too), so 100cqi / 28.2 always fits it with 2% to spare, up to 15px. Floor 10px (the harness's one
   exception to 12px, for a line that must not wrap): a row too narrow even for that (under 280px: the
   320px phone, Display Zoom) wraps each note inside its own half at a readable 12px instead of
   shrinking further. Probe rule `fit-line-wrapped` fails a note under 12px on two lines. */
.skybuds-product.sb-hero .sb-reassure { flex-wrap: nowrap; align-items: flex-start; gap: 0; container-type: inline-size; white-space: normal; }
.skybuds-product.sb-hero .sb-reassure li { flex: 0 1 auto; min-width: 0; font-size: 13px; font-size: clamp(10px, 100cqi / 28.2, 15px); line-height: 1.25; gap: .4em;
  letter-spacing: -.005em; text-wrap: balance; align-items: flex-start; }
.skybuds-product.sb-hero .sb-reassure li + li { margin-left: 1em; }
.skybuds-product.sb-hero .sb-reassure li::before { width: 1.15em; height: 1.15em; background-size: 58%; margin-top: .05em; }
@container (width < 280px) { .skybuds-product.sb-hero .sb-reassure li { font-size: 12px; } }

/* Batch bar: once it has filled, a soft light sweeps across it now and then. */
.skybuds-product.sb-hero .hero-reserve-card__progress-bar { overflow: hidden; }
.skybuds-product.sb-hero .hero-reserve-card__progress-fill { position: relative; overflow: hidden; }
.skybuds-product.sb-hero .hero-reserve-card__progress-fill.is-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); transform: translateX(-100%); animation: sb-batch-sweep 3.2s 0.4s ease-in-out infinite; }
@keyframes sb-batch-sweep { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skybuds-product.sb-hero .hero-reserve-card__progress-fill.is-full::after { animation: none; } }

/* The batch counter counts up every frame: fixed-width digits and a row that can never re-wrap
   mid-count (at 360px the changing width flipped the wrap and shook the whole buy box, CLS 2.0). */
.skybuds-product.sb-hero .hero-reserve-card__scarcity-text { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 10px;
  font-variant-numeric: tabular-nums; white-space: nowrap; font-size: clamp(13.5px, 4vw, 16px); }
.skybuds-product.sb-hero .hero-reserve-card__scarcity-text > span { min-width: 0; }


/* Three bud pills always fit the row with every name whole. Equal columns cut "Sprout" to
   "Spr…" on 360-412px phones: on a phone each pill is its content's width plus an equal share
   of what is left (flex 1 1 auto), and the pills tighten on the narrowest screens. The
   ellipsis stays only as a last resort. Measured at 320/360/375/390/412/430 in both engines. */
.skybuds-product.sb-hero .skybuds-charpicker__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skybuds-product.sb-hero .skybuds-charpicker__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .skybuds-product.sb-hero .skybuds-charpicker__items { display: flex; }
  .skybuds-product.sb-hero .skybuds-charpicker__item { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 380px) {
  .skybuds-product.sb-hero .skybuds-charpicker__items { gap: 6px; }
  .skybuds-product.sb-hero .skybuds-charpicker__item { gap: 5px; padding: 4px 8px 4px 4px; }
  .skybuds-product.sb-hero .skybuds-charpicker__avatar { width: 30px; height: 30px; }
  .skybuds-product.sb-hero .skybuds-charpicker__name { font-size: 14.5px; }
}
@media (max-width: 340px) {
  .skybuds-product.sb-hero .skybuds-charpicker__items { gap: 5px; }
  .skybuds-product.sb-hero .skybuds-charpicker__item { gap: 4px; padding: 3px 7px 3px 3px; }
  .skybuds-product.sb-hero .skybuds-charpicker__avatar { width: 27px; height: 27px; }
}

/* ---------- saved sign-up offer in the buy box (skybuds-capture.js showSavedOffer) ----------
   "$30 OFF automatically applied at checkout" / "+1 MONTH of SkyBuds+ added at checkout":
   a ticket in the kit (white, orange dashed edge, round check), not the old mint box. */
.skybuds-product.sb-hero .sbc-saved-offer {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px 12px 12px; border-radius: 20px;
  background: #fff; border: 2.5px dashed var(--h-orange, #FF6B4A); box-shadow: 0 4px 0 rgba(23, 63, 121, .08);
  font: 800 16px/1.3 Sora, system-ui, sans-serif; color: var(--h-navy, #173F79); text-wrap: balance;
}
.skybuds-product.sb-hero .sbc-saved-offer::before {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--h-orange, #FF6B4A) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 17px no-repeat;
}
/* Its place on top of the buy box (sections/skybuds-product.liquid, data-offer-slot): held from the
   first paint while the words are on their way, so nothing below it moves when they land. The
   ticket's height depends only on its width, never on which words it gets or the font they are
   drawn in: two lines' room below 480px (the longest words, "+3 MONTHS of SkyBuds+ added at
   checkout", need 389px + 75px of edges for one line in Sora 800 16px), one line above. Below
   340px the words step down to 15px so two lines always hold them. Measured 2026-09-25. */
.skybuds-product.sb-hero .sb-offer-slot { container-type: inline-size; margin: 0 0 14px; }
.skybuds-product.sb-hero .sb-offer-slot[hidden] { display: none; }
.skybuds-product.sb-hero .sb-offer-slot[data-offer-wait] { visibility: hidden; }
.skybuds-product.sb-hero .sb-offer-slot .sbc-saved-offer { box-sizing: border-box; margin: 0; min-height: 71px; }
.skybuds-product.sb-hero .sb-offer-slot:not([data-offer-wait]) .sbc-saved-offer { animation: sb-offer-in .45s var(--h-pop) both; }
@keyframes sb-offer-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@container (width < 340px) { .skybuds-product.sb-hero .sb-offer-slot .sbc-saved-offer { font-size: 15px; min-height: 68px; } }
@container (width >= 480px) { .skybuds-product.sb-hero .sb-offer-slot .sbc-saved-offer { min-height: 59px; } }
@media (prefers-reduced-motion: reduce) { .skybuds-product.sb-hero .sb-offer-slot .sbc-saved-offer { animation: none; } }