/* ==========================================================================
   OASIS INFLATABLES — site.css
   Shell: announcement bar, header/nav, cart drawer, footer, toasts, hero.
   ========================================================================== */

/* --- Announcement marquee ------------------------------------------------- */
/* Two rows now: the range, then the scrolling promises. The marquee carries
   its own clipping and fade so the deck row above it is never cut off. */
.announce {
  background: var(--deep);
  color: rgba(255,255,255,.92);
  display: block;
  position: relative;
  z-index: 60;
  /* The track inside is several thousand pixels wide by design. `overflow:
     hidden` on the marquee hides it visually but does not stop it widening the
     document, so on a 390px phone the layout viewport measured 435px and every
     full-width section sat 45px off centre — the whole page scrolled sideways.
     `clip` rather than `hidden` here, because hidden would make this box a
     scroll container and break the sticky header beneath it. */
  overflow-x: clip;
  max-width: 100vw;
}
.announce__marquee {
  height: 38px;
  /* The pause control is 44px for touch; the bar stays 38px and the control
     overhangs it symmetrically, so the header does not grow. */
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.announce__track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: marquee 42s linear infinite;
  will-change: transform;
  /* The whole track moves from the first frame, so the bar opens on whatever
     happens to be at the left edge — which was the tail of an item, mid-word
     ("e in the page, no code"). Starting the track one gutter in means the
     first frame shows the beginning of the first item, and the loop's wrap
     point is unchanged because the track translates by its own width. */
  padding-left: var(--gutter);
}
.announce:hover .announce__track { animation-play-state: paused; }
.announce__group { display: flex; align-items: center; flex: none; }
/* One item is one run of text.
 *
 * As `inline-flex` with a gap, every child became a flex item and the gap was
 * inserted between them — so the comma that follows a bolded word was spaced
 * away from it: "Every box has a pump , a backrest". The icon is the only thing
 * here that needs to be a box, so the item is an inline-block and the icon
 * aligns to the text baseline. */
.announce__item {
  display: inline-block;
  padding-inline: 1.6rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .02em;
  vertical-align: middle;
}
.announce__item > * { display: inline; }
.announce__item svg {
  width: 14px; height: 14px; opacity: .85;
  display: inline-block;
  vertical-align: -.15em;
  margin-right: .45rem;
}
.announce__item b { font-weight: 650; color: #fff; }
.announce__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); flex: none; }

/* --- Header --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--sand);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.header.is-stuck {
  background: rgba(250, 247, 242, .975);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}
.header.is-hidden { transform: translateY(-102%); }
.header { transition: transform .34s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }

.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  height: 74px;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand__mark { height: 42px; width: 42px; flex: none; transition: transform .5s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  font-stretch: 108%;
}
.brand__tag {
  font-size: 0.5625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.nav { display: flex; align-items: center; gap: clamp(.25rem, 1.4vw, 1.1rem); justify-content: center; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .7rem;
  font-family: var(--font-display);
  font-size: 0.90625rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  border-radius: var(--r-pill);
  transition: color .18s var(--ease), background-color .18s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--ink); background: rgba(23,20,15,.045); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .28rem;
  height: 2px; background: var(--orange); border-radius: 2px;
}
.nav__link .caret { transition: transform .22s var(--ease); opacity: .55; }
.has-menu[aria-expanded="true"] .caret { transform: rotate(180deg); }

.header__actions { display: flex; align-items: center; gap: .35rem; justify-self: end; }
.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover { background: rgba(23,20,15,.06); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 3px; right: 2px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.6875rem; font-weight: 700;
  border: 2px solid var(--sand);
  transform: scale(0);
  transition: transform .3s var(--ease);
}
.cart-count.is-on { transform: scale(1); }
.cart-count.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)} }

.burger { display: none; }

/* Mega menu */
.megamenu[inert] { pointer-events: none; }
.megamenu[aria-hidden="true"] { visibility: hidden; }
.megamenu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #FAF7F2;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  z-index: 65;
  overflow: hidden;
}
.megamenu.is-open { opacity: 1; visibility: visible; transform: none; }
.megamenu__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.25fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-block: 2.25rem 2.5rem;
}
.megamenu__col h4 {
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  font-weight: 700;
}
.megamenu__list { display: grid; gap: .1rem; }
.megamenu__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: background-color .16s var(--ease), color .16s var(--ease), padding-left .16s var(--ease);
}
.megamenu__list a:hover { background: rgba(23,20,15,.05); padding-left: .95rem; color: var(--orange); }
.megamenu__list small { color: var(--muted-2); font-size: var(--fs-xs); }
.megamenu__promo {
  position: relative;
  align-items: flex-start;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--deep);
  color: #fff;
  min-height: 210px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem;
  isolation: isolate;
}
.megamenu__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .62; }
.megamenu__promo .badge { align-self: flex-start; width: max-content; margin-bottom: .5rem; }
.megamenu__promo h5 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: .3rem; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.megamenu__promo p { font-size: var(--fs-xs); color: rgba(255,255,255,.9); margin-bottom: .9rem; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.megamenu__promo::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,33,31,.28) 0%, rgba(10,33,31,.82) 62%, rgba(10,33,31,.94) 100%);
}
.megamenu__promo img { opacity: .85; }

/* Search panel */
.searchpanel {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(23,20,15,.42);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .24s var(--ease), visibility .24s;
}
.searchpanel.is-open { opacity: 1; visibility: visible; }
.searchpanel__box {
  background: var(--sand);
  padding-block: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(-18px);
  transition: transform .3s var(--ease);
}
.searchpanel.is-open .searchpanel__box { transform: none; }
.searchpanel__form { display: flex; gap: .75rem; align-items: center; }
.searchpanel__form .input { flex: 1; font-size: 1.15rem; min-height: 62px; border-radius: var(--r-pill); padding-inline: 1.5rem; }
.searchpanel__hint { margin-top: 1rem; font-size: var(--fs-xs); color: var(--muted); display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.searchpanel__hint button {
  padding: .35rem .8rem; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); transition: all .16s var(--ease);
}
.searchpanel__hint button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Mobile drawer nav */
.mobnav {
  position: fixed; inset: 0; z-index: 130;
  background: var(--sand);
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto;
  visibility: hidden;
}
.mobnav.is-open { transform: none; visibility: visible; }
.mobnav[inert] { pointer-events: none; }
.mobnav__head { display: flex; align-items: center; justify-content: space-between; height: 74px; flex: none; }
.mobnav__list { display: grid; gap: .1rem; padding-block: 1rem 2rem; }
.mobnav__list a {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.mobnav__list a span { font-size: var(--fs-xs); color: var(--muted-2); font-weight: 400; letter-spacing: 0; }
.mobnav__foot { margin-top: auto; padding-block: 1.5rem 2rem; display: grid; gap: .75rem; }

/* --- Cart drawer ---------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(23,20,15,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
  backdrop-filter: blur(2px);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(432px, 92vw);
  z-index: 110;
  background: var(--sand);
  display: flex; flex-direction: column;
  transform: translateX(103%);
  transition: transform .4s var(--ease);
  box-shadow: var(--sh-4);
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer[inert] { pointer-events: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: .55rem; }
.drawer__title span { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0; }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.15rem 1.4rem; }
.drawer__foot { flex: none; border-top: 1px solid var(--line); padding: 1.15rem 1.4rem 1.4rem; background: var(--shell); }

.ship-bar { margin-bottom: 1.15rem; }
.ship-bar__label { font-size: var(--fs-xs); color: var(--muted); margin-bottom: .5rem; display: flex; justify-content: space-between; gap: 1rem; }
.ship-bar__label b { color: var(--ink); font-weight: 600; }
.ship-bar__track { height: 5px; border-radius: var(--r-pill); background: var(--sand-3); overflow: hidden; }
.ship-bar__fill { height: 100%; background: linear-gradient(90deg, var(--orange), #E08A3C); border-radius: var(--r-pill); width: 0; transition: width .6s var(--ease); }
.ship-bar.is-done .ship-bar__fill { background: linear-gradient(90deg, var(--ok), #3FA772); }

.cart-empty { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 3rem 1rem; }
.cart-empty svg { width: 54px; height: 54px; color: var(--sand-3); }

.lineitem { display: grid; grid-template-columns: 84px 1fr; gap: .95rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.lineitem:first-child { padding-top: 0; }
.lineitem__img {
  width: 84px; height: 84px; border-radius: var(--r-sm);
  background: var(--sand-2); object-fit: cover; overflow: hidden;
}
.lineitem__img img { width: 100%; height: 100%; object-fit: cover; }
.lineitem__top { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.lineitem__name { font-family: var(--font-display); font-weight: 650; font-size: 0.9375rem; line-height: 1.25; letter-spacing: -0.01em; }
.lineitem__opt { font-size: var(--fs-xs); color: var(--muted); margin-top: .18rem; }
.lineitem__price { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.lineitem__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; gap: .75rem; }
.lineitem__remove { font-size: var(--fs-xs); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; display: inline-flex; align-items: center; }
.lineitem__remove:hover { color: var(--orange); }
.qty--sm { height: 40px; }
.qty--sm button { width: 40px; font-size: 1rem; }
.qty--sm input { width: 40px; font-size: var(--fs-sm); }

.totals { display: grid; gap: .5rem; margin-bottom: 1rem; }
.totals__row { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); color: var(--muted); }
.totals__row--grand { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; padding-top: .6rem; border-top: 1px solid var(--line); }
.totals__note { font-size: var(--fs-xs); color: var(--muted-2); }

.drawer__perks { display: grid; gap: .45rem; margin-top: .9rem; }
.drawer__perk { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--muted); }
.drawer__perk svg { width: 14px; height: 14px; color: var(--sea); flex: none; }

/* Cross-sell rail inside drawer */
.xsell { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--line-2); }
.xsell__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.xsell__head h4 { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.xsell__list { display: grid; gap: .55rem; }

.addon-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .5rem .55rem .5rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--shell);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.addon-row:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }
.addon-row.is-added { border-color: rgba(30,122,76,.4); background: #F4FAF6; }
.addon-row__img { width: 52px; height: 52px; border-radius: var(--r-xs); overflow: hidden; background: var(--sand-2); flex: none; }
.addon-row__img img { width: 100%; height: 100%; object-fit: cover; }
.addon-row__name { font-size: var(--fs-sm); font-weight: 550; line-height: 1.25; }
.addon-row__meta { font-size: var(--fs-xs); color: var(--muted); }
.addon-row__price { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.addon-row__btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--ink); font-size: 1.1rem; line-height: 1;
  transition: all .18s var(--ease);
  flex: none;
}
.addon-row__btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: scale(1.06); }
.addon-row.is-added .addon-row__btn { background: var(--ok); border-color: var(--ok); color: #fff; }

.bundle-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem;
  background: var(--orange-050);
  border: 1px solid var(--orange-100);
  border-radius: var(--r-sm);
  margin-bottom: .9rem;
}
.bundle-bar p { font-size: var(--fs-xs); color: var(--orange-700); font-weight: 550; }

/* --- Toasts --------------------------------------------------------------- */
.toasts {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 200; display: grid; gap: .5rem; width: max-content; max-width: min(92vw, 460px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .7rem;
  background: var(--ink); color: #fff;
  padding: .8rem 1.1rem;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  font-size: var(--fs-sm); font-weight: 500;
  animation: toast-in .4s var(--ease);
  pointer-events: auto;
}
.toast svg { width: 17px; height: 17px; flex: none; }
.toast--ok svg { color: #6FD3A0; }
.toast--error { background: #7A1B14; }
.toast--error svg { color: #FFB4AD; }
.toast b { font-weight: 650; }
.toast.is-out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* --- Footer --------------------------------------------------------------- */
.footer {
  background: #06110F;                 /* deliberately darker than --deep so the
                                          CTA band and the footer read as two */
  color: rgba(255,255,255,.72);
  padding-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer a { color: rgba(255,255,255,.72); transition: color .18s var(--ease); }
.footer a:hover { color: #fff; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(130px, 1fr)) minmax(260px, 1.25fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: 3rem;
}
.footer__brand { display: grid; gap: 1rem; align-content: start; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__tag { color: rgba(255,255,255,.5); }
.footer__blurb { font-size: var(--fs-sm); max-width: 34ch; }
.footer__col h4 { color: #fff; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 700; }
.footer__col ul { display: grid; gap: .6rem; font-size: var(--fs-sm); }
.footer__socials { display: flex; gap: .5rem; margin-top: .25rem; }
.footer__socials a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  transition: all .2s var(--ease);
}
.footer__socials a:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-2px); }
.footer__socials svg { width: 17px; height: 17px; }
/* Replaced the three social icons, which pointed at href="#" and so cost more
   trust than they bought. This is a real address a person answers. */
/* The quiet fourth option in the hero: read the build before choosing a deck. */
.hero__skip { margin-top: .9rem; font-size: var(--fs-sm); }
.hero__skip .link-arrow { color: var(--muted); }
.hero__skip .link-arrow:hover { color: var(--orange); }

.footer__ask { font-size: var(--fs-sm); margin-top: .35rem; line-height: 1.55; }
/* The mega-menu promo headline sits on a photograph with no scrim of its own,
   and `h1..h5 { color: var(--ink) }` outranks the white it inherits — so the
   bundle name was near-black on a dark image. */
.megamenu__promo h5 { color: #fff; }

/* The old rule, retired. It set the address to `--ink` on the dark footer —
   about 1.3:1 — and because it sat below the fix it also overrode it. Renaming
   it rather than deleting it kept it load-bearing; that is removed. */
.footer__ask a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.4);
  text-underline-offset: 3px;
  border-bottom: 0;
}
.footer__ask a:hover {
  color: var(--orange-300);
  text-decoration-color: currentColor;
}
.newsletter { display: grid; gap: .75rem; }
.newsletter__form { display: flex; gap: .5rem; flex-wrap: nowrap; }
.newsletter__form .input { flex: 1 1 auto; min-width: 0; }
.newsletter__form .btn { flex: 0 0 auto; padding-inline: 1.15rem; }
@media (max-width: 560px) {
  .newsletter__form { flex-wrap: wrap; }
  .newsletter__form .input, .newsletter__form .btn { flex: 1 1 100%; width: 100%; }
}
.footer .newsletter .input {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #fff;
  min-height: 48px;
}
.footer .newsletter .input::placeholder { color: rgba(255,255,255,.55); }
.footer .newsletter .input:focus { border-color: var(--orange-300); box-shadow: 0 0 0 3px rgba(204,92,31,.24); }
.footer .newsletter__note { font-size: var(--fs-xs); color: rgba(255,255,255,.62); }
.newsletter__form .btn { flex: none; }

.footer__pay { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.footer__pay span {
  /* 5px sat beside 6px siblings in the same footer. */
  padding: .35rem .6rem; border-radius: var(--r-xs);
  background: rgba(255,255,255,.08);
  font-size: 0.625rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.72);
}
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.5rem 1.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 8vw, 9.5rem);
  line-height: .82;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,.045);
  text-align: center;
  padding-block: 1rem 0;
  user-select: none;
  white-space: nowrap;
}

/* --- Sticky mobile buy bar / generic sticky bar --------------------------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(250,247,242,.93);
  backdrop-filter: blur(14px) saturate(170%);
  border-top: 1px solid var(--line);
  padding: .7rem 0;
  transform: translateY(110%);
  transition: transform .34s var(--ease);
}
.stickybar.is-on { transform: none; }
.stickybar__inner { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.stickybar__prod { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.stickybar__thumb { width: 48px; height: 48px; border-radius: var(--r-xs); object-fit: cover; background: var(--sand-2); flex: none; }
.stickybar__name { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-sm); line-height: 1.2; }
.stickybar__meta { font-size: var(--fs-xs); color: var(--muted); }
.stickybar__actions { display: flex; align-items: center; gap: .75rem; flex: none; }

@media (max-width: 1100px) {
  .nav { display: none; }
  .megamenu { display: none; }
  .burger { display: grid; }
  .header__inner { grid-template-columns: auto 1fr; }
  .header__actions { grid-column: 2; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__news { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .header__inner { height: 66px; }
  .brand__mark { height: 36px; width: 36px; }
  .footer__top { grid-template-columns: 1fr; }
  .mobnav__list a { font-size: 1.4rem; }
  .announce__item { padding-inline: 1rem; }
}


/* --- Checkout delivery details ------------------------------------------- */
.checkout-details {
  margin-top: 1.75rem;
  padding: 1.4rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.checkout-details__head { margin-bottom: 1.1rem; }
.checkout-details__head h2 { font-size: var(--fs-h4); margin-bottom: .2rem; }
.field__err { color: #8C1D18; font-size: var(--fs-xs); font-weight: 500; }
.field--error .input, .field--error .select { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
@media (max-width: 720px) { .checkout-details { padding: 1.1rem; } }


/* --- Review capture ------------------------------------------------------- */
.rating-input { display: flex; gap: .35rem; }
.rating-star {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--sand-3);
  transition: color .16s var(--ease), transform .16s var(--ease), background-color .16s var(--ease);
}
.rating-star:hover { transform: translateY(-2px); }
.rating-star.is-on { color: var(--star); }


/* ==========================================================================
   Deck switcher
   Three products, not three sizes. The same control sits in the top banner
   and in the buy box of every product page.
   ========================================================================== */
.announce__decks {
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.announce__decks-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: .4rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.announce__decks-label {
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}
.deck-picks { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.deck-pick {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .38rem .8rem;
  min-height: 34px;
  border-radius: var(--r-pill);
  color: rgba(255,255,255,.82);
  font-size: var(--fs-sm);
  line-height: 1;
  border: 1px solid transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.deck-pick:hover { background: rgba(255,255,255,.10); color: #fff; }
.deck-pick__name { font-weight: 600; }
.deck-pick__price { font-size: .75rem; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.deck-pick:hover .deck-pick__price { color: rgba(255,255,255,.8); }
.deck-pick.is-current {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.deck-pick.is-current .deck-pick__price { color: var(--muted); }

@media (max-width: 720px) {
  .announce__decks-inner { gap: .5rem; padding: .45rem var(--gutter); }
  .announce__decks-label { display: none; }
  .deck-pick { padding: .4rem .7rem; font-size: var(--fs-xs); }
  .deck-pick__price { display: none; }
  .deck-pick.is-current .deck-pick__price { display: inline; }
}

/* the same three options inside the buy box */
.radio-tile--link { text-decoration: none; color: inherit; cursor: pointer; }
.radio-tile--link.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.radio-tile__tag--save { background: var(--foam); color: var(--sea); }


/* --- Live stock ----------------------------------------------------------- */
[data-stock-note].is-out { color: #B3261E; font-weight: 600; }
[data-stock-note].is-low { color: var(--orange-700); font-weight: 600; }
.btn[data-soldout] { opacity: .6; cursor: not-allowed; }
.pcard.is-soldout .pcard__media img { opacity: .55; }
.pcard__soldout {
  position: absolute; left: .75rem; top: .75rem;
  padding: .3rem .65rem; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.pcard__media { position: relative; }


/* --- Delivery estimate ---------------------------------------------------- */
.shipmeter {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
}
.shipmeter--ask { background: var(--orange-050); border-color: var(--orange-100); }
.shipmeter__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.shipmeter__label { font-size: var(--fs-sm); color: var(--muted); }
.shipmeter__value { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.shipmeter__note { margin-top: .3rem; font-size: var(--fs-xs); color: var(--muted-2); }

/* The cancellation right leads the drawer's trust list, so it gets the weight
   to match — it is the answer to the pre-order objection, not a fourth item. */
.drawer__perk--lead { color: var(--ink); font-weight: 600; }
.drawer__perk--lead svg { color: var(--orange); }

/* --- The marquee's pause control ------------------------------------------
   The bar scrolls continuously, so WCAG 2.2.2 asks for a mechanism to stop
   it that is not hover. This is a real button, keyboard reachable, with
   aria-pressed, and it pauses the animation rather than removing it. */
.announce__pause {
  position: absolute;
  top: -3px; right: 0;
  z-index: 2;
  width: 44px;
  height: 44px;
  /* 44px is the smallest comfortable touch target, and this is the control a
     thumb has to find on a moving bar. The dividers make it read as a control
     rather than as a blank square of bar. */
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.72);
  background: var(--deep);
  border-left: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.announce__pause:hover { color: #fff; background: rgba(255,255,255,.08); }
.announce__pause svg { width: 14px; height: 14px; }
.announce__pause .announce__play-icon { display: none; }
.announce__pause[aria-pressed="true"] .announce__pause-icon { display: none; }
.announce__pause[aria-pressed="true"] .announce__play-icon { display: block; }
/* The marquee stops short of the control rather than running under it. */
.announce__marquee { padding-right: 44px; }
.announce.is-paused .announce__track { animation-play-state: paused; }

/* The announce items are inline-flex, so the comma that used to be a bare text
   node between two of them was spaced away from its word by the flex gap and
   rendered as "December 2026 , anywhere". It is inside the label now; this is
   the belt to that pair of braces. */
/* The comma after "December 2026" rendered as "December 2026 , anywhere in
   Australia", because `.announce__item` is a flex row with a gap: the comma was
   a text node between two flex items and the gap spaced it away from the word
   it belongs to. It is inside the label now, so the item is one run of text and
   only the icon is a box. */
html.announce-paused .announce__track { animation-play-state: paused; }

/* The drawer's delivery note. The drawer can price the decks and not the
   freight, so it says which of the two the figure above is. */
.totals__note {
  margin: .6rem 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   The last few targets, and the 44px rule applied honestly.

   Five nav links measured 43px — one pixel under — and the marquee's own link
   is 17px inside a 38px bar. The marquee link cannot be padded without moving
   the text it sits in, so it gets an invisible hit area instead: the anchor is
   inline, the tap target is a pseudo-element stretched to 44px around it. The
   text stays exactly where it was.
   -------------------------------------------------------------------------- */
.nav__link { padding-block: .65rem; }

.announce__item a { position: relative; }
.announce__item a::after {
  content: '';
  position: absolute;
  left: -.4rem; right: -.4rem;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   Standalone controls at 44px; inline text links left alone, deliberately.

   The rule this build follows: a control that stands on its own — a footer
   menu item, a header icon, a player button, the wordmark — is at least 44px
   in both directions. A link inside a sentence is not: "Read the returns
   answer" is part of a paragraph, WCAG's own target-size rule exempts it, and
   padding it to 44px would tear the paragraph's line rhythm apart. That
   distinction is why the list below names components rather than selecting
   every `a`.
   -------------------------------------------------------------------------- */
.footer__col a,
.footer__legal a,
.footer__ask a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
}
.brand { min-height: 44px; }
/* The player's own buttons: 44 in the direction a hand needs, without turning
   a slim pill into a block. */
.viewer__views button { min-height: 44px; padding-block: .6rem; }
.seg button { min-height: 44px; }


/* The review-card link contrast fix lives in blocks.css, not here. This file
   loads before blocks.css, which sets the same selector, so a rule written here
   loses — and did. See the note there. */