/* ═══════════════════════════════════════════════════════════════
   SkyBuds cart, redesigned look (PDP templates with sb_pdp only).
   Loaded after skybuds-cart-drawer.css and scoped to
   #sb-pdp-drawer[data-look="brand"], so the quiz drawer and the old
   product look are untouched. Same brand as the product page: Sora,
   navy ink, orange action, cream, yellow, sky and lavender, curvy
   edges, big type. Social proof comes from config.proof (real reviews).
   ═══════════════════════════════════════════════════════════════ */

#sb-pdp-drawer[data-look="brand"] {
  --navy: #173F79; --orange: #FF6B4A; --orange-deep: #D9492B; --orange-ink: #B8381C;
  --cream: #FFF8E9; --yellow: #FFDF68; --yellow-soft: #FFEFC2;
  --sky: #E7F3FD; --lav: #EBDFF5; --grass: #DDEBC4; --tp: #00B67A;
  --pop: cubic-bezier(.34, 1.56, .64, 1); --ease: cubic-bezier(.22, 1, .36, 1);
  /* re-point the base drawer tokens at the brand */
  --sb-ink: #173F79; --sb-ink-soft: #3E5D8C; --sb-ink-faint: #4F6D99; --sb-ink-ghost: #53719C; /* 76% and 74% navy: the faintest that read at 4.5:1 on white (were 3.8 and 2.1) */
  --sb-line: #E6DFCB; --sb-line-soft: #EFE8D6;
  --sb-accent: #FF6B4A; --sb-accent-deep: #B8381C; /* text and focus rings; the button's edge is --orange-deep */ --sb-accent-soft: #FFD2C4; --sb-accent-wash: #FFEFC2;
  --sb-cream: #FFFFFF; --sb-cream-shadow: #F3EEE1; --sb-cream-warm: #FFF8E9; --sb-cream-peach: #FFF1D6;
  --sb-shadow-card: 0 16px 30px -24px rgba(23, 63, 121, .55);
  --sb-r-md: 22px;
}
#sb-pdp-drawer[data-look="brand"] .sb-drawer__backdrop { background: rgba(23, 63, 121, .42); -webkit-backdrop-filter: none; backdrop-filter: none; }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__panel { background: var(--cream); max-width: 460px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
/* Phones: a sheet from the right that leaves a strip of the page showing, so a tap on
   that strip (the backdrop) closes it; a swipe to the right closes it too. */
@media (max-width: 767px) {
  #sb-pdp-drawer[data-look="brand"] .sb-drawer__panel { top: 0; bottom: 0; right: 0; left: auto; width: calc(100% - 34px); max-width: 440px; height: 100%; border-radius: 28px 0 0 28px; transform: translateX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  #sb-pdp-drawer[data-look="brand"][data-state="closed"] .sb-drawer__panel { transform: translateX(104%); }
}

/* ─── header: white top block that ends in a curvy wave ─── */
#sb-pdp-drawer[data-look="brand"] .sb-drawer__header { background: #fff; border-bottom: 0; padding: 20px 20px 8px; align-items: center; }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__heading-wrap { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__heading { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__badge { align-self: center; font-size: 11px; letter-spacing: .08em; padding: 6px 11px; color: var(--navy); background: var(--yellow); }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__badge::before { background: var(--orange); }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__close { width: 44px; height: 44px; background: var(--sky); color: var(--navy); transition: transform .3s var(--pop), background .2s ease; }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__close:hover { background: #D5E8FA; transform: rotate(90deg); }

/* header review line: one real Trustpilot quote at a time */
#sb-pdp-drawer[data-look="brand"] .sb-ticker { display: flex; align-items: center; gap: 10px; padding: 2px 20px 10px; background: #fff; flex: none; }
#sb-pdp-drawer[data-look="brand"] .sb-ticker__stars { flex: 0 0 auto; width: 84px; height: auto; display: block; }
#sb-pdp-drawer[data-look="brand"] .sb-ticker__win { position: relative; flex: 1; min-width: 0; height: 22px; overflow: hidden; }
#sb-pdp-drawer[data-look="brand"] .sb-ticker__item { position: absolute; inset: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px; line-height: 22px; font-weight: 700; color: var(--navy); opacity: 0; transform: translateY(100%);
  transition: transform .55s var(--ease), opacity .4s ease; }
#sb-pdp-drawer[data-look="brand"] .sb-ticker__item em { font-style: normal; font-weight: 500; color: var(--sb-ink-faint); }
#sb-pdp-drawer[data-look="brand"] .sb-ticker__item.is-on { opacity: 1; transform: none; }
#sb-pdp-drawer[data-look="brand"] .sb-ticker__item.is-off { opacity: 0; transform: translateY(-100%); }

/* free-shipping bar: chunky, with a little truck riding the fill */
#sb-pdp-drawer[data-look="brand"] .sb-shipbar { background: #fff; border-bottom: 0; padding: 4px 20px 14px; }
#sb-pdp-drawer[data-look="brand"] .sb-shipbar__text { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 9px; }
#sb-pdp-drawer[data-look="brand"] .sb-shipbar--unlocked .sb-shipbar__text { color: #2E7D46; }
#sb-pdp-drawer[data-look="brand"] .sb-shipbar__track { position: relative; height: 12px; background: var(--sky); overflow: visible; }
#sb-pdp-drawer[data-look="brand"] .sb-shipbar__track .sb-shipbar__fill { position: relative; min-width: 12px; background: linear-gradient(90deg, #FF8E6E, var(--orange)); }
#sb-pdp-drawer[data-look="brand"] .sb-shipbar__track .sb-shipbar__fill::after { content: ""; position: absolute; right: -6px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%);
  border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173F79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7h11v9h-11zM13.5 10h4l3 3v3h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 3px 8px -2px rgba(23, 63, 121, .35); }
#sb-pdp-drawer[data-look="brand"] .sb-shipbar--unlocked .sb-shipbar__fill { background: linear-gradient(90deg, #8FD9A0, #3FB66B); }
#sb-pdp-drawer[data-look="brand"] .sb-shipbar__nudge { font-size: 12.5px; line-height: 1.4; color: var(--sb-ink-soft); margin-top: 10px; }

/* the curvy seam between the white top and the cream body, pinned while
   the cart scrolls so cards slide under the wave, never a hard line */
#sb-pdp-drawer[data-look="brand"] .sb-drawer__body { background: var(--cream); padding: 0 18px 24px; gap: 16px; overscroll-behavior: contain; }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__main, #sb-pdp-drawer[data-look="brand"] .sb-drawer__proof { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__body::before { content: ""; position: sticky; top: 0; z-index: 3; flex: none; display: block; height: 20px; margin: 0 -18px -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0h400v8C330 22 260 20 200 11S70 -1 0 12z'/%3E%3C/svg%3E") top / 100% 100% no-repeat; }

/* ─── line item ─── */
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) { padding: 14px; gap: 14px; border: 0; border-radius: 26px; background: #fff; box-shadow: var(--sb-shadow-card); }
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__media { width: 92px; height: 92px; border-radius: 50%; background: var(--yellow-soft); overflow: visible; }
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__media img { width: 112%; height: 112%; margin-top: -8%; filter: drop-shadow(0 8px 8px rgba(23, 63, 121, .2)); }
#sb-pdp-drawer[data-look="brand"] .sb-line[data-char="pearl"] .sb-line__media, #sb-pdp-drawer[data-look="brand"] .sb-sibling[data-char="pearl"] .sb-sibling__media { background: var(--sky); }
#sb-pdp-drawer[data-look="brand"] .sb-line[data-char="sprout"] .sb-line__media, #sb-pdp-drawer[data-look="brand"] .sb-sibling[data-char="sprout"] .sb-sibling__media { background: var(--grass); }
#sb-pdp-drawer[data-look="brand"] .sb-sibling[data-char="ash"] .sb-sibling__media { background: var(--yellow-soft); }
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "kind kind" "price qty" "meta meta"; row-gap: 3px; column-gap: 8px; }
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body > .sb-line__top { grid-area: top; }
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body > .sb-line__kind { grid-area: kind; }
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body > .sb-line__pricing { grid-area: price; margin-top: 4px; }
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body > .sb-line__qty { grid-area: qty; margin-top: 4px; }
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body > .sb-line__meta { grid-area: meta; }
#sb-pdp-drawer[data-look="brand"] .sb-line__name { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); line-height: 1.1; text-wrap: balance; }
#sb-pdp-drawer[data-look="brand"] .sb-line__kind { margin: 0; font-size: 14px; font-weight: 600; color: var(--sb-ink-faint); line-height: 1.3; }
#sb-pdp-drawer[data-look="brand"] .sb-line__price { font-size: 22px; font-weight: 800; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-line__strike { font-size: 15px; color: var(--sb-ink-ghost); }
#sb-pdp-drawer[data-look="brand"] .sb-line__pricing .sb-line__save-pill { margin-left: 0; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--navy); background: var(--yellow); padding: 4px 10px; border-radius: 999px; font-weight: 800; }
#sb-pdp-drawer[data-look="brand"] .sb-line__meta { font-size: 13.5px; font-weight: 600; color: var(--sb-ink-soft); margin-top: 6px; }
#sb-pdp-drawer[data-look="brand"] .sb-line__meta::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #3FB66B; box-shadow: 0 0 0 3px #DDF3E3; vertical-align: 1px; }
#sb-pdp-drawer[data-look="brand"] .sb-line__qty { background: var(--cream); border: 0; border-radius: 999px; padding: 3px; }
#sb-pdp-drawer[data-look="brand"] .sb-drawer .sb-line__qty-btn, #sb-pdp-drawer[data-look="brand"] .sb-line__qty-btn { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 20px; font-weight: 700; box-shadow: 0 2px 0 var(--sb-line); }
#sb-pdp-drawer[data-look="brand"] .sb-line__qty-btn:hover:not(:disabled) { background: var(--yellow-soft); }
#sb-pdp-drawer[data-look="brand"] .sb-line__qty-val { min-width: 26px; font-size: 16px; font-weight: 800; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-line__remove { color: var(--sb-ink-faint); }

/* ─── free month bonus: lavender ribbon ─── */
#sb-pdp-drawer[data-look="brand"] .sb-line--bonus { border: 0; border-radius: 22px; background: var(--lav); box-shadow: none; padding: 12px 14px; }
#sb-pdp-drawer[data-look="brand"] .sb-line--bonus .sb-line__media { width: 46px; height: 46px; border-radius: 50%; background: #fff; }
#sb-pdp-drawer[data-look="brand"] .sb-line--bonus .sb-line__name { font-size: 15.5px; font-weight: 800; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-line--bonus .sb-line__free { color: #fff; background: var(--navy); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
/* on the lavender bonus line and the sky pass card the faint inks drop under 4.5:1 */
#sb-pdp-drawer[data-look="brand"] .sb-line--bonus .sb-line__strike, #sb-pdp-drawer[data-look="brand"] .sb-pass__strike { color: var(--sb-ink-soft); }

/* ─── photo review ─── */
#sb-pdp-drawer[data-look="brand"] .sb-review { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; margin: 4px 0 0; padding: 12px 16px 12px 12px;
  border-radius: 26px; background: var(--yellow-soft); animation: sb-fadeup .35s ease both; animation-delay: .06s; }
#sb-pdp-drawer[data-look="brand"] .sb-review__img { width: 112px; height: 132px; object-fit: cover; border-radius: 20px; transform: rotate(-3deg); box-shadow: 0 10px 18px -12px rgba(23, 63, 121, .6); border: 4px solid #fff; }
#sb-pdp-drawer[data-look="brand"] .sb-review__body { position: relative; display: grid; gap: 8px; }
#sb-pdp-drawer[data-look="brand"] .sb-review__body > svg { width: 30px; height: 30px; fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#sb-pdp-drawer[data-look="brand"] .sb-review__quote { margin: 0; padding: 0; border: 0; font-style: normal; quotes: none; font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-review__who { display: grid; font-size: 13px; line-height: 1.3; color: var(--sb-ink-soft); }
#sb-pdp-drawer[data-look="brand"] .sb-review__who strong { font-size: 14px; color: var(--navy); }

/* ─── add another Bud ─── */
#sb-pdp-drawer[data-look="brand"] .sb-section__title { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
#sb-pdp-drawer[data-look="brand"] .sb-section__sub { font-size: 14.5px; color: var(--sb-ink-soft); }
#sb-pdp-drawer[data-look="brand"] .sb-siblings { gap: 10px; }
#sb-pdp-drawer[data-look="brand"] .sb-drawer .sb-sibling, #sb-pdp-drawer[data-look="brand"] .sb-sibling { border: 0; border-radius: 22px; background: #fff; box-shadow: var(--sb-shadow-card); padding: 10px 12px; transition: transform .25s var(--pop), box-shadow .2s ease; }
#sb-pdp-drawer[data-look="brand"] .sb-sibling:hover { transform: translateY(-2px); }
#sb-pdp-drawer[data-look="brand"] .sb-sibling__media { width: 58px; height: 58px; border-radius: 50%; background: var(--sky); }
#sb-pdp-drawer[data-look="brand"] .sb-sibling__name { font-size: 16px; font-weight: 800; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-sibling__price { font-size: 14px; color: var(--sb-ink-soft); }
#sb-pdp-drawer[data-look="brand"] .sb-sibling__price-strong { color: var(--orange-ink); font-weight: 800; }
#sb-pdp-drawer[data-look="brand"] .sb-sibling__add { width: 36px; height: 36px; font-size: 22px; background: var(--orange); box-shadow: 0 3px 0 var(--orange-deep); }

/* ─── SkyBuds+ pass and protection ─── */
#sb-pdp-drawer[data-look="brand"] .sb-pass { border: 0; border-radius: 24px; background: var(--sky); box-shadow: none; }
#sb-pdp-drawer[data-look="brand"] .sb-pass--on { background: #D5E8FA; box-shadow: inset 0 0 0 2px var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-pass__title, #sb-pdp-drawer[data-look="brand"] .sb-pass__price { color: var(--navy); font-weight: 800; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__sub, #sb-pdp-drawer[data-look="brand"] .sb-pass__note { color: var(--sb-ink-soft); }
#sb-pdp-drawer[data-look="brand"] .sb-pass__switch input:checked + .sb-pass__slider { background: var(--orange); }
/* The pass is one thing to tick off (Fred, 2026-09-24: "much simpler and the toggle more satisfying. Make
   toggle bigger"): name and price on the left, a 60x36 switch on the right, the renewal terms as small print
   under them. The whole card flips the switch (skybuds-product-cart.js). Turning it on springs the knob
   across with a check in it, pops the card and sends a ring out of the knob. */
#sb-pdp-drawer[data-look="brand"] .sb-pass { padding: 14px 16px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__main { display: flex; align-items: center; gap: 12px; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__title { font-size: 17px; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__whole { white-space: nowrap; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__pricing { display: flex; align-items: baseline; gap: 8px; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__price { font-size: 16px; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__strike { font-size: 13px; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__note { margin: 8px 0 0; font-size: 12px; line-height: 1.35; text-wrap: balance; }
/* the (?) is a small ring after the name; its 32px box reaches into the space around it, not the words */
#sb-pdp-drawer[data-look="brand"] .sb-pass__info { align-self: center; margin: -6px -6px -6px -2px; border: 0; background: transparent; color: var(--navy); font-size: 11px; font-weight: 800; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__info::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .55; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__switch { width: 60px; height: 36px; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__slider { background: #C3D3E6; transition: background .25s ease; }
#sb-pdp-drawer[data-look="brand"] .sb-pass__slider::before {
  top: 4px; left: 4px; width: 28px; height: 28px; background: #fff center / 16px 16px no-repeat; box-shadow: 0 2px 6px rgba(23, 63, 121, .3);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
#sb-pdp-drawer[data-look="brand"] .sb-pass__switch input:checked + .sb-pass__slider::before {
  transform: translateX(24px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23FF6B4A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#sb-pdp-drawer[data-look="brand"] .sb-pass__slider::after { content: ""; position: absolute; top: 4px; left: 28px; width: 28px; height: 28px; border-radius: 50%; opacity: 0; pointer-events: none; }
#sb-pdp-drawer[data-look="brand"] .sb-pass--pop { animation: sb-pass-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
#sb-pdp-drawer[data-look="brand"] .sb-pass--pop .sb-pass__slider::after { animation: sb-pass-ring .65s ease-out; }
@keyframes sb-pass-pop { 35% { transform: scale(1.03); } }
@keyframes sb-pass-ring { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 107, 74, .6); } 100% { opacity: 0; box-shadow: 0 0 0 16px rgba(255, 107, 74, 0); } }
@media (hover: hover) { #sb-pdp-drawer[data-look="brand"] .sb-pass:not(.sb-pass--on):hover { background: #DDEEFC; } }
@media (prefers-reduced-motion: reduce) {
  #sb-pdp-drawer[data-look="brand"] .sb-pass--pop, #sb-pdp-drawer[data-look="brand"] .sb-pass--pop .sb-pass__slider::after { animation: none; }
  #sb-pdp-drawer[data-look="brand"] .sb-pass__slider::before { transition: none; }
}
#sb-pdp-drawer[data-look="brand"] .sb-protect { border: 0; border-radius: 18px; background: #fff; padding: 12px 14px; }
#sb-pdp-drawer[data-look="brand"] .sb-protect__title { color: var(--navy); font-weight: 700; font-size: 14.5px; }
/* Under 360px "Shipping Protection" and its price ran on under the (i) (320px, 2026-09-26): the name may wrap,
   the price may not. */
#sb-pdp-drawer[data-look="brand"] .sb-protect__title { white-space: normal; line-height: 1.25; }
#sb-pdp-drawer[data-look="brand"] .sb-protect__price { flex: none; white-space: nowrap; }

/* ─── summary ─── */
#sb-pdp-drawer[data-look="brand"] .sb-summary { border: 0; border-radius: 24px; background: #fff; box-shadow: var(--sb-shadow-card); padding: 16px 18px; }
#sb-pdp-drawer[data-look="brand"] .sb-summary__row { font-size: 15px; color: var(--sb-ink-soft); }
#sb-pdp-drawer[data-look="brand"] .sb-summary__row--savings { background: var(--yellow); color: var(--navy); border-radius: 14px; font-weight: 800; }
#sb-pdp-drawer[data-look="brand"] .sb-summary__divider { border-top: 2px dashed var(--sb-line); background: none; height: 0; }
#sb-pdp-drawer[data-look="brand"] .sb-summary__total { font-size: 21px; font-weight: 800; color: var(--navy); }

/* ─── trust badges ─── */
#sb-pdp-drawer[data-look="brand"] .sb-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; animation: sb-fadeup .35s ease both; animation-delay: .22s; }
#sb-pdp-drawer[data-look="brand"] .sb-badges__tile { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 18px; background: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-badges__tile svg { flex: 0 0 auto; width: 30px; height: 30px; padding: 5px; border-radius: 50%; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; background: var(--sky); }
#sb-pdp-drawer[data-look="brand"] .sb-badges__tile--guarantee svg { background: var(--yellow); }
#sb-pdp-drawer[data-look="brand"] .sb-badges__tile--kidsafe svg { background: #DDF3E3; stroke: #2E7D46; }
#sb-pdp-drawer[data-look="brand"] .sb-badges__tile--ship svg { background: var(--lav); }

/* ─── Trustpilot quote wall: a slow marquee of speech bubbles ─── */
#sb-pdp-drawer[data-look="brand"] .sb-quotes { margin: 2px -18px 0; animation: sb-fadeup .35s ease both; animation-delay: .26s; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 0 18px; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__score { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sb-ink-soft); white-space: nowrap; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__score img { width: 76px; height: auto; display: block; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__score strong { color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__view { overflow: hidden; padding: 12px 0 16px 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; animation: sb-quotes-run 36s linear infinite; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__view:hover .sb-quotes__track { animation-play-state: paused; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item { position: relative; flex: 0 0 auto; width: 210px; padding: 14px 16px 12px; border-radius: 22px; background: #fff; box-shadow: var(--sb-shadow-card); }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item::after { content: ""; position: absolute; left: 24px; bottom: -8px; width: 18px; height: 18px; background: inherit; border-radius: 0 0 6px 0; transform: rotate(45deg); }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item--1 { background: var(--sky); }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item--2 { background: var(--lav); }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item--3 { background: var(--yellow-soft); }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item p { margin: 0 0 6px; font-size: 16px; line-height: 1.3; font-weight: 800; color: var(--navy); }
/* soft, not faint: faint read 4.1:1 on the lavender card (2026-09-26) */
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item span { font-size: 13px; font-weight: 600; color: var(--sb-ink-soft); }
@keyframes sb-quotes-run { to { transform: translateX(calc(-50% - 6px)); } }

#sb-pdp-drawer[data-look="brand"] .sb-trust__note { color: var(--sb-ink-soft); }

/* ─── footer: white, curvy top edge, chunky orange button ─── */
#sb-pdp-drawer[data-look="brand"] .sb-drawer__footer { position: relative; background: #fff; border-top: 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 16V9C70 -2 150 0 210 7s130 10 190 1v8z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
#sb-pdp-drawer[data-look="brand"] .sb-checkout-btn { min-height: 70px; padding: 20px 16px; font-size: clamp(15px, 4.4vw, 20px); white-space: nowrap; touch-action: manipulation; letter-spacing: 0; background: var(--orange); box-shadow: 0 5px 0 var(--orange-deep), 0 16px 26px -14px rgba(217, 73, 43, .7); transition: transform .15s ease, box-shadow .15s ease; }
#sb-pdp-drawer[data-look="brand"] .sb-checkout-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 var(--orange-deep), 0 18px 30px -14px rgba(217, 73, 43, .75); }
#sb-pdp-drawer[data-look="brand"] .sb-checkout-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-deep), 0 8px 16px -12px rgba(217, 73, 43, .7); }
#sb-pdp-drawer[data-look="brand"] .sb-checkout-btn__total { font-size: inherit; }
/* "Continue to Checkout · $142.99" must fit inside the button: white text past its edge
   vanishes into the white sheet. Smaller type on phones; under 350px the total goes under. */
@media (max-width: 767px) {
  #sb-pdp-drawer[data-look="brand"] .sb-checkout-btn { font-size: clamp(14px, 4vw, 18px); padding-inline: 14px; gap: 6px; }
  /* Room for whole quotes in the review line (only quotes that fit take a turn). */
  #sb-pdp-drawer[data-look="brand"] .sb-ticker { gap: 8px; }
  #sb-pdp-drawer[data-look="brand"] .sb-ticker__stars { width: 64px; }
}
@media (max-width: 350px) {
  #sb-pdp-drawer[data-look="brand"] .sb-checkout-btn { flex-direction: column; gap: 0; padding-block: 11px; line-height: 1.2; }
  #sb-pdp-drawer[data-look="brand"] .sb-checkout-btn__sep { display: none; }
  #sb-pdp-drawer[data-look="brand"] .sb-ticker__stars { display: none; }
}
/* 44px tall on every page: Dawn's base.css gave every link that height on most pages, so the
   pages without it (landing pages, survey, cancel-order) had a 15px-tall link. */
#sb-pdp-drawer[data-look="brand"] .sb-cart-trustpilot { font-size: 12.5px; margin-top: 12px; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  #sb-pdp-drawer[data-look="brand"] .sb-quotes__view { overflow-x: auto; }
  #sb-pdp-drawer[data-look="brand"] .sb-quotes__track { animation: none; }
  #sb-pdp-drawer[data-look="brand"] .sb-quotes__item[aria-hidden="true"] { display: none; }
  #sb-pdp-drawer[data-look="brand"] .sb-ticker__item { transition: none; }
  #sb-pdp-drawer[data-look="brand"] .sb-drawer__close:hover { transform: none; }
}
@media (max-width: 479px) {
  #sb-pdp-drawer[data-look="brand"] .sb-drawer__badge { display: none; }
  #sb-pdp-drawer[data-look="brand"] .sb-drawer__header { padding-top: 16px; }
}
@media (max-width: 360px) {
  #sb-pdp-drawer[data-look="brand"] .sb-drawer__heading { font-size: 22px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__media { width: 72px; height: 72px; }
  #sb-pdp-drawer[data-look="brand"] .sb-review { grid-template-columns: 92px minmax(0, 1fr); }
  #sb-pdp-drawer[data-look="brand"] .sb-review__img { width: 92px; height: 112px; }
  #sb-pdp-drawer[data-look="brand"] .sb-review__quote { font-size: 17px; }
}

/* Card-in animations only when the cart opens, never on a quantity change. */
#sb-pdp-drawer[data-look="brand"]:not(.is-opening) .sb-line, #sb-pdp-drawer[data-look="brand"]:not(.is-opening) .sb-section, #sb-pdp-drawer[data-look="brand"]:not(.is-opening) .sb-protect,
#sb-pdp-drawer[data-look="brand"]:not(.is-opening) .sb-summary, #sb-pdp-drawer[data-look="brand"]:not(.is-opening) .sb-review { animation: none; }
/* The marquee rests while the cart is closed or a finger holds it. */
#sb-pdp-drawer[data-look="brand"][data-state="closed"] .sb-quotes__track, #sb-pdp-drawer[data-look="brand"] .sb-quotes__view:active .sb-quotes__track { animation-play-state: paused; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__track { will-change: transform; animation-duration: 60s; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item { width: 232px; padding: 13px 16px 13px; }
/* A row people swipe, not a marquee (Fred, 2026-09-24): the view scrolls sideways and snaps card to card;
   skybuds-product-cart.js moves it on by one card at a time and rests while it is touched. The copies that
   made the marquee loop are not shown. */
#sb-pdp-drawer[data-look="brand"] .sb-quotes__view { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; touch-action: pan-x pan-y; outline: none; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__view::-webkit-scrollbar { display: none; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__view:focus-visible { box-shadow: inset 0 0 0 2px var(--navy); border-radius: 22px; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__track, #sb-pdp-drawer[data-look="brand"] .sb-quotes__view:active .sb-quotes__track { animation: none; will-change: auto; padding-right: 18px; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item { scroll-snap-align: start; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item[aria-hidden="true"] { display: none; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__stars { display: block; width: 78px; height: auto; margin-bottom: 8px; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item p { font-size: 16px; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item span { display: grid; gap: 1px; font-size: 12.5px; }
#sb-pdp-drawer[data-look="brand"] .sb-quotes__item span strong { font-size: 13.5px; color: var(--navy); }
#sb-pdp-drawer[data-look="brand"] .sb-drawer__close { touch-action: manipulation; }

/* Narrow sheet on phones: the Bud card keeps its price, strike and saving on one line. */
@media (max-width: 767px) {
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) { padding: 12px; gap: 12px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__media { width: 76px; height: 76px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body { grid-template-areas: "top top" "kind kind" "price price" "meta qty"; }
  /* Price, strike and saving share a line when they fit; on a narrow phone the pill wraps under. */
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__pricing { flex-wrap: wrap; row-gap: 6px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line__meta { align-self: center; margin-top: 4px; font-size: 13px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line__meta::before { margin-right: 6px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line__pricing .sb-line__save-pill { white-space: nowrap; font-size: 12px; padding: 3px 8px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line__price { font-size: 21px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line__strike { font-size: 14px; }
}
@media (max-width: 767px) {
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body > .sb-line__qty { justify-self: end; margin-top: 6px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body > .sb-line__meta { margin-top: 6px; white-space: nowrap; }
  #sb-pdp-drawer[data-look="brand"] .sb-summary__row { font-size: 14px; gap: 10px; }
  #sb-pdp-drawer[data-look="brand"] .sb-summary__row span:first-child { min-width: 0; }
  #sb-pdp-drawer[data-look="brand"] .sb-pass__head { flex-wrap: nowrap; gap: 8px; }
}
@media (max-width: 767px) {
  #sb-pdp-drawer[data-look="brand"] .sb-badges__tile { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 12px 8px; font-size: 13px; }
}

/* 320-360px (2026-09-24): the Bud's name dropped to 14px (the drawer's generic small-screen rule
   outranked the brand look) and the free month's name had 49px beside its price: one word a line.
   The name keeps its size and the free month's price goes under its name. */
@media (max-width: 360px) {
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__name { font-size: 20px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line--bonus .sb-line__body { flex-wrap: wrap; row-gap: 6px; }
  #sb-pdp-drawer[data-look="brand"] .sb-line--bonus .sb-line__name { flex: 1 1 100%; }
}
/* "Ships Oct 5" ran under the quantity buttons on 320-375px phones (2026-09-25: "Ship" showed at
   320px, 4px to spare at 375px). When the Bud card's inside is under 290px (a container query reads
   the content box: 296px on a 390px phone, 19px to spare) the note takes its own row and the buttons
   go under it, lined up with the words. */
#sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) { container-type: inline-size; }
@container (width < 290px) {
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body { grid-template-areas: "top top" "kind kind" "price price" "meta meta" "qty qty"; }
  #sb-pdp-drawer[data-look="brand"] .sb-line:not(.sb-line--bonus) .sb-line__body > .sb-line__qty { justify-self: start; margin-top: 8px; }
}

/* The saved $30 code (skybuds-product-cart.js savedCodeHtml): the buy box's ticket, in the cart. */
#sb-pdp-drawer[data-look="brand"] .sb-offer-ticket {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px 12px 12px; border-radius: 22px;
  background: #fff; border: 2.5px dashed var(--orange); box-shadow: 0 4px 0 rgba(23, 63, 121, .08);
  font: 800 15px/1.3 Sora, system-ui, sans-serif; color: var(--navy); text-wrap: balance;
}
#sb-pdp-drawer[data-look="brand"] .sb-offer-ticket::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--orange) 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 / 16px no-repeat;
}

/* ─── leaving for checkout (PLAN 7.5; Fred, 2026-09-25: "the cart kind of be blurred out with a cute
   loading animation while we load the full checkout"). From the tap on Continue to Checkout until
   the checkout page takes over, the whole screen (the cart and the page behind it) blurs under a
   cream veil and Ash, Pearl and Sprout hop in the middle (assets/sb-buds-hop.svg,
   scripts/build-buds-loader.mjs). The checkout page opens on the same veil with the same Buds in
   the same place (skybuds-checkout-kit.css) and keeps them up until its payment form is there, so
   the two read as one wait. skybuds-product-cart.js syncLeaving sets .is-leaving. The veil takes
   every tap: the cart does not close or scroll halfway into a page change. ─── */
#sb-pdp-drawer[data-look="brand"] .sb-leave {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 24px; background: rgba(255, 248, 233, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s;
}
/* the Buds load with the open cart (a closed cart never fetches them) */
#sb-pdp-drawer[data-look="brand"] .sb-leave__buds { flex: none; width: 176px; height: 132px; background-position: center; background-size: contain; background-repeat: no-repeat; }
#sb-pdp-drawer[data-look="brand"][data-state="open"] .sb-leave__buds { background-image: url(/assets/sb-buds-hop.svg); }
#sb-pdp-drawer[data-look="brand"] .sb-leave__text { font: 800 20px/1.2 Sora, system-ui, sans-serif; letter-spacing: -.01em; color: var(--navy); text-align: center; }
#sb-pdp-drawer[data-look="brand"].is-leaving .sb-leave { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; }
/* the navy dim behind the cart turns cream with it, so the screen reads as one veil like the checkout's */
#sb-pdp-drawer[data-look="brand"].is-leaving .sb-drawer__backdrop { background: rgba(255, 248, 233, .5); transition: opacity .28s ease, background-color .2s ease; }
#sb-pdp-drawer[data-look="brand"] .sb-leave__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The page's named parts (skybuds-nav.liquid: the header, the sticky bar, the Bud picker) would be
   lifted above the veil in the hand-over to the checkout page and pop through it. */
html.sb-leaving .skybuds-kit-header, html.sb-leaving .sab, html.sb-leaving .skybuds-product.sb-hero .skybuds-charpicker { view-transition-name: none; }
@media (prefers-reduced-motion: reduce) {
  #sb-pdp-drawer[data-look="brand"][data-state="open"] .sb-leave__buds { background-image: url(/assets/sb-buds.svg); }
  #sb-pdp-drawer[data-look="brand"] .sb-leave, #sb-pdp-drawer[data-look="brand"].is-leaving .sb-leave,
  #sb-pdp-drawer[data-look="brand"].is-leaving .sb-drawer__backdrop { transition: none; }
}

/* Prices that did not load (PLAN 9.4): one quiet word on the line, and the error with its Retry pinned
   to the bottom of the scroll, right above the checkout button it explains, instead of under the fold. */
#sb-pdp-drawer[data-look="brand"] .sb-line__price--words { font-size: 16px; font-weight: 700; }
#sb-pdp-drawer[data-look="brand"] [data-cart-error] { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 12px 14px; border-radius: 16px; font-size: 14px; font-weight: 700; line-height: 1.35; box-shadow: 0 -12px 22px -16px rgba(23, 63, 121, .45); }
#sb-pdp-drawer[data-look="brand"] [data-cart-error][hidden] { display: none; }
#sb-pdp-drawer[data-look="brand"] [data-cart-error] button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; cursor: pointer; }
#sb-pdp-drawer[data-look="brand"] [data-cart-error] button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* While prices are on their way (role=status, not an error) the button says so with its spinner and each
   price reads "Loading...": the note is for screen readers then, not a red box pinned over the pass. */
#sb-pdp-drawer [data-cart-error][role="status"]:not([hidden]) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; box-shadow: none; }