/*
  Banana Store - a meme of the Apple online Store
  Mobile-first and portrait-first. Liquid glass refraction (liquid-glass.js) is only used on the hero
  buttons, where there is colour behind them to bend; everything else is plain CSS so scrolling stays smooth.
*/

/* ========================================
   Design Tokens
   ======================================== */
:root {
  /* Apple system type: SF Pro on Apple devices, Inter (closest match) elsewhere */
  --bs-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;

  --bs-page: #f5f5f7;
  --bs-surface: #fff;
  --bs-text: #1d1d1f;
  --bs-text-muted: #6e6e73;
  --bs-link: #0066cc;
  --bs-blue: #0071e3;
  --bs-blue-hover: #0077ed;
  --bs-new: #bf4800;
  --bs-banana: #f3c623;
  --bs-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --bs-card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.14);

  /* Glass tints, layered over the refraction */
  --lg-tint-clear: rgba(255, 255, 255, 0.06);
  --lg-tint-dark: rgba(22, 22, 23, 0.5);
  --lg-tint-light: rgba(250, 250, 250, 0.78);
  --lg-rim: inset 0 0 4px 0 rgba(250, 250, 250, 0.55);
  --lg-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
  --lg-frost: blur(18px) saturate(180%);

  --bs-radius-card: 18px;
  --bs-radius-full: 9999px;
  --bs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --bs-nav-height: 48px;
  --bs-gutter: max(20px, env(safe-area-inset-left));

  --bs-z-nav: 50;
  --bs-z-modal: 1000;
  --bs-z-preloader: 2000;
}

/* ========================================
   Base
   ======================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--bs-nav-height);
  -webkit-text-size-adjust: 100%;
  background: var(--bs-page);
}

body {
  font-family: var(--bs-font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--bs-text);
  background: var(--bs-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--bs-link);
  text-decoration: none;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

sup {
  font-size: 0.6em;
}

:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: 3px;
}

/* ========================================
   Preloader
   ======================================== */
/* Fastlane's loading screen: blank white with a thin navy progress bar, driven by main.js */
.lg-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--bs-z-preloader);
  display: grid;
  place-items: center;
  background: #fff;
  transition: opacity 450ms ease;
  /* Failsafe: if the script never runs, the screen still clears itself instead of blocking the page.
     Later than main.js's 25s last resort, so it never cuts a slow download short. */
  animation: lg-preloader-failsafe 400ms ease 30s forwards;
}

.lg-loaded .lg-preloader {
  opacity: 0;
  pointer-events: none;
}

@keyframes lg-preloader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

body.lg-loading {
  overflow: hidden;
}

.lg-preloader-bar {
  width: 160px;
  height: 3px;
  border-radius: 3px;
  background: rgba(39, 48, 67, 0.12);
  overflow: hidden;
}

.lg-preloader-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: #273043;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ========================================
   Glass core (hero buttons)
   ======================================== */
.lg-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--lg-shadow);
  --lg-tint: var(--lg-tint-clear);
}

/* Refraction layer, injected by liquid-glass.js. Frosted by default; Chromium
   swaps in the displacement filter. Negative z-index keeps it under the text. */
.lg-refract {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: var(--lg-frost);
  backdrop-filter: var(--lg-frost);
}

/* WebKit and Firefox: liquid-glass.js redraws the hero wallpaper here with the edge bend.
   It sits over the frost and fades out toward the middle. */
.lg-mirror {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

/* While the mirror does the bending, keep the frost light so what's behind stays crisp, like the Chromium glass */
.lg-mirror-on > .lg-refract {
  -webkit-backdrop-filter: blur(1px) saturate(1.5) brightness(1.1);
  backdrop-filter: blur(1px) saturate(1.5) brightness(1.1);
}

/* Tint and rim, painted above the refraction */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--lg-tint);
  box-shadow: var(--lg-rim);
  pointer-events: none;
}

.lg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 50px;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--bs-radius-full);
  background: transparent;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 0 1px #fff, var(--lg-shadow);
  transition: scale 300ms var(--bs-ease), rotate 300ms var(--bs-ease);
}

.lg-button:active {
  scale: 0.96;
}

.lg-button-dark {
  --lg-tint: var(--lg-tint-dark);
}

.lg-button-light {
  --lg-tint: var(--lg-tint-light);
  color: #1d1d1f;
}

/* ========================================
   Global nav
   ======================================== */
.bs-globalnav {
  position: sticky;
  top: 0;
  z-index: var(--bs-z-nav);
  padding-top: env(safe-area-inset-top);
}

/* The glass bar is its own child element: backdrop-filter on the header itself would
   trap the fixed full-screen menu inside the 48px bar. */
.bs-globalnav-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  --lg-tint: rgba(250, 250, 252, 0.5);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 24px rgba(0, 0, 0, 0.08);
}

.bs-globalnav-inner {
  max-width: 1024px;
  height: var(--bs-nav-height);
  margin: 0 auto;
  padding: 0 calc(var(--bs-gutter) - 12px);
  display: flex;
  align-items: center;
}

.bs-logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: auto;
}

.bs-logo svg {
  width: 24px;
  height: 24px;
  fill: var(--bs-text);
}

/* Phone menu: a full-screen sheet with big links, like Apple's */
.bs-globalnav-links {
  position: fixed;
  top: calc(var(--bs-nav-height) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  padding: 12px var(--bs-gutter) 40px;
  background: rgba(250, 250, 252, 0.97);
  overflow-y: auto;
}

.bs-globalnav-links-open {
  display: flex;
}

body.bs-menu-open {
  overflow: hidden;
}

.bs-globalnav-links a {
  display: block;
  padding: 8px 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bs-text);
}

.bs-globalnav-actions {
  display: flex;
}

.bs-icon-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--bs-text);
  cursor: pointer;
  touch-action: manipulation;
}

/* Over the dark hero the glass goes clear and the icons turn white, like Apple's dark pages.
   store.js toggles .is-over-hero; an open phone menu keeps the light bar. */
body:not(.bs-menu-open) .bs-globalnav.is-over-hero .bs-globalnav-glass {
  /* Smoked glass: the wallpaper is bright in places, so white icons need a darker pane to sit on */
  --lg-tint: rgba(12, 16, 26, 0.42);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

body:not(.bs-menu-open) .bs-globalnav.is-over-hero .bs-logo svg {
  fill: #f5f5f7;
}

body:not(.bs-menu-open) .bs-globalnav.is-over-hero .bs-icon-button {
  color: #f5f5f7;
}

body:not(.bs-menu-open) .bs-globalnav.is-over-hero .bs-bag-count {
  background: #f5f5f7;
  color: var(--bs-text);
}

.bs-icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bs-bag-count {
  position: absolute;
  top: 8px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bs-text);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
}

.bs-bag-count[hidden] {
  display: none;
}

/* ========================================
   Hero: iPhone Duo floats in
   ======================================== */
.bs-hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Tuck the backdrop up under the sticky nav so its glass has colour to bend */
  margin-top: calc(-1 * (var(--bs-nav-height) + env(safe-area-inset-top)));
  padding: calc(28px + var(--bs-nav-height) + env(safe-area-inset-top)) var(--bs-gutter) 28px;
  text-align: center;
  color: #f5f5f7;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  /* How far the wallpaper is raised, so its colour swirl reaches up under the glass nav */
  --bs-hero-bg-lift: 0px;
}

/* The wallpaper sits on its own layer that starts above the hero, so raising it never bares a strip at the bottom */
.bs-hero::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--bs-hero-bg-lift)) 0 0;
  z-index: -1;
  background: url("assets/pro-mobile.webp") center / cover no-repeat;
  pointer-events: none;
}

/* Dim the backdrop so white type and the phone read clearly */
.bs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35) 12%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.bs-hero > * {
  position: relative;
}

/* Copy and buttons stay above the 3D phone's oversized frame */
.bs-hero-copy,
.bs-hero-actions {
  z-index: 1;
}

/* The landing intro, one thing at a time (initIntro in store.js steps through it with classes on <html>):
   the nav slides down, "Introducing" types itself out, "iPhone Duo" flips down letter by letter out of a
   blur, the phone flies in (bs-intro-phone), then the buttons and price rise up (bs-intro-rest).
   Everything is only hidden under bs-intro, so if store.js never runs the hero just shows. */
.bs-intro .bs-globalnav {
  translate: 0 -100%;
  transition: translate 1000ms var(--bs-ease-out);
}

.bs-intro.lg-loaded .bs-globalnav {
  translate: none;
}

.bs-intro .bs-hero-eyebrow .bs-char {
  opacity: 0;
}

.bs-intro .bs-hero-eyebrow .bs-char.is-typed {
  opacity: 1;
}

/* Typing caret. Negative margin so it never nudges the centred line while it moves along. */
.bs-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin: 0 -1px 0 -1px;
  vertical-align: -0.15em;
  background: currentColor;
  border-radius: 1px;
  animation: bs-caret 1s steps(1) infinite;
  transition: opacity 300ms var(--bs-ease);
}

.bs-caret.is-done {
  opacity: 0;
}

@keyframes bs-caret {
  50% {
    background: transparent;
  }
}

/* Each letter hangs from its top edge, tipped back and blurred, then swings down into place */
.bs-hero-title {
  perspective: 700px;
}

.bs-hero-title .bs-letter {
  display: inline-block;
}

.bs-intro .bs-hero-title .bs-letter {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(-0.35em) rotateX(-85deg);
  transform-origin: 50% 0;
  transition: opacity 700ms var(--bs-ease-out), filter 1000ms var(--bs-ease-out), transform 1100ms var(--bs-ease-out);
  transition-delay: calc(var(--i) * 60ms);
}

.bs-intro .bs-hero-title.is-in .bs-letter {
  opacity: 1;
  filter: none;
  transform: none;
}

.bs-intro .bs-hero-actions,
.bs-intro .bs-hero-price {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1000ms var(--bs-ease-out), transform 1000ms var(--bs-ease-out);
}

.bs-intro .bs-hero-price {
  transition-delay: 150ms;
}

.bs-intro-rest .bs-hero-actions,
.bs-intro-rest .bs-hero-price {
  opacity: 1;
  transform: none;
}

/* The nav drops in too, left to right. Phones only have the logo and icons up there. */
.bs-intro .bs-logo,
.bs-intro .bs-globalnav-actions > * {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 800ms var(--bs-ease-out), transform 800ms var(--bs-ease-out);
}

.bs-intro .bs-logo { transition-delay: 200ms; }
.bs-intro .bs-globalnav-actions > :nth-child(1) { transition-delay: 450ms; }
.bs-intro .bs-globalnav-actions > :nth-child(2) { transition-delay: 510ms; }
.bs-intro .bs-globalnav-actions > :nth-child(3) { transition-delay: 570ms; }

.lg-loaded .bs-logo,
.lg-loaded .bs-globalnav-actions > * {
  opacity: 1;
  transform: none;
}

.bs-hero-eyebrow {
  font-size: 17px;
  font-weight: 600;
  color: #ff9f0a;
}

.bs-hero-title {
  font-size: clamp(44px, 12vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.bs-hero-subtitle {
  margin-top: 6px;
  font-size: clamp(19px, 5vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.bs-hero-stage {
  position: relative;
  flex: 1;
  /* Bleed past the page gutters so the phone can fill the screen width */
  width: calc(100% + 2 * var(--bs-gutter));
  max-width: 1100px;
  min-height: max(380px, 52svh);
  margin: 0 calc(-1 * var(--bs-gutter));
}

.bs-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 1.5x the stage on every axis so the phone never clips when it turns. hero.js pulls the
   camera back by the same 1.5x, so the phone itself stays the stage's size. */
.bs-hero-duo {
  position: absolute;
  inset: -25%;
  width: 150%;
  height: 150%;
}

/* A still of the phone floats in straight away; the live 3D one takes over when it's ready */
.bs-hero-poster {
  object-fit: contain;
  padding: 2% 6%;
  opacity: 0;
  transform: translateY(120px) scale(0.9);
  transition: opacity 600ms var(--bs-ease);
}

.bs-intro-phone .bs-hero-poster {
  animation: bs-float-in 1400ms var(--bs-ease-out) forwards, bs-bob 4s ease-in-out 1400ms infinite;
}

/* Replace the bob outright: its keyframes pin opacity to 1, so a plain opacity: 0 never wins */
/* The live phone was ready when the preloader lifted, so it does the entrance and the still never shows */
.bs-hero-poster.is-skipped {
  display: none;
}

.bs-intro-phone .bs-hero-poster.is-hidden {
  animation: bs-fade-out 600ms var(--bs-ease) forwards;
  pointer-events: none;
}

@keyframes bs-fade-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: none;
  }
}

@keyframes bs-float-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bs-bob {
  from,
  to {
    opacity: 1;
    transform: none;
  }
  50% {
    opacity: 1;
    transform: translateY(-10px);
  }
}

.bs-hero-duo {
  border: 0;
  background: transparent;
  color-scheme: light;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--bs-ease);
}

/* Only grabbable once the live phone has taken over from the poster */
.bs-hero-duo.is-ready {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
}

/* Touch screens: the oversized frame stays out of the way so the page scrolls, and the stage
   turns sideways swipes into spins (store.js) */
.bs-touch .bs-hero-duo.is-ready {
  pointer-events: none;
}

.bs-touch .bs-hero-stage {
  touch-action: pan-y;
}

.bs-hero-actions {
  display: flex;
  gap: 12px;
}

.bs-hero-price {
  margin-top: 16px;
  font-size: 15px;
  color: #e8e8ed;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* Scroll entrances, set up by initReveal in store.js. Without JS (or with reduced motion) nothing gets the
   class, so nothing is ever hidden. The delay is per item so things that arrive together come in one by one. */
.bs-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 900ms var(--bs-ease-out), transform 1100ms var(--bs-ease-out);
  transition-delay: var(--bs-reveal-delay, 0ms);
}

/* Shelf rows slide in from the side as well as rising, like they're being dealt out */
.bs-shelf > ul > .bs-reveal {
  transform: translate(48px, 24px);
}

.bs-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ========================================
   Store header
   ======================================== */
.bs-store-head,
.bs-row-title,
.bs-quicklinks {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-gutter);
  padding-right: var(--bs-gutter);
}

.bs-store-head {
  padding-top: 48px;
  padding-bottom: 28px;
}

.bs-store-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.bs-store-title span {
  display: block;
  color: var(--bs-text-muted);
}

.bs-store-help {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.bs-store-help p:first-child {
  font-weight: 600;
}

/* ========================================
   Horizontal shelves
   ======================================== */
.bs-shelf {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--bs-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bs-shelf::-webkit-scrollbar {
  display: none;
}

.bs-shelf > ul {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 8px var(--bs-gutter) 32px;
}

.bs-shelf > ul > li {
  scroll-snap-align: start;
}

/* Product icon row */
.bs-products > ul {
  gap: 4px;
  padding-bottom: 24px;
}

.bs-products a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-text);
  text-align: center;
}

.bs-product-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 44px;
  line-height: 1;
}

/* Row headings */
.bs-row {
  padding-top: 28px;
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}

.bs-row-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.bs-row-title span {
  color: var(--bs-text-muted);
}

/* ========================================
   Cards
   ======================================== */
.bs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--bs-radius-card);
  background: var(--card-bg, var(--bs-surface));
  box-shadow: var(--bs-card-shadow);
  overflow: hidden;
  transition: scale 300ms var(--bs-ease), box-shadow 300ms var(--bs-ease);
}

.bs-card h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -0.01em;
}

.bs-card-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bs-text-muted);
}

.bs-new {
  color: var(--bs-new);
}

.bs-card-dark {
  --card-bg: #000;
  color: #f5f5f7;
}

.bs-card-dark .bs-card-eyebrow {
  color: #a1a1a6;
}

.bs-card-dark .bs-new {
  color: #ff9f0a;
}

.bs-card-price {
  margin-top: 8px;
  font-size: 14px;
}

/* "The latest" bento: a fixed-height grid of mixed tile sizes. Two columns on phones, four from tablets up. */
.bs-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 200px;
  grid-template-areas:
    "duo duo"
    "duo duo"
    "book book"
    "watch vision"
    "watch vision"
    "pods pods";
  gap: 12px;
  max-width: 1024px;
  margin: 0 auto;
  padding: 8px var(--bs-gutter) 32px;
}

.bs-bento-duo { grid-area: duo; }
.bs-bento-book { grid-area: book; }
.bs-bento-watch { grid-area: watch; }
.bs-bento-vision { grid-area: vision; }
.bs-bento-pods { grid-area: pods; }

.bs-bento .bs-card {
  height: 100%;
  padding: 20px 20px 0;
}

.bs-bento .bs-card h3 {
  font-size: 19px;
}

.bs-bento .bs-card-emoji {
  padding-bottom: 56px;
  font-size: 80px;
}

/* Wide tiles: copy on the left, the emoji off to the right */
.bs-bento-book .bs-card-copy,
.bs-bento-pods .bs-card-copy {
  max-width: 62%;
}

.bs-bento-book .bs-card-emoji,
.bs-bento-pods .bs-card-emoji {
  position: absolute;
  top: 50%;
  right: 24px;
  translate: 0 -60%;
  padding: 0;
}

/* The big tile: the phone photo takes whatever height the copy leaves */
.bs-bento-duo .bs-card h3 {
  font-size: 28px;
}

.bs-bento-duo img {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 8px 0 60px;
  object-fit: contain;
}

.bs-card-copy p:not(.bs-card-eyebrow) {
  margin-top: 6px;
  font-size: 15px;
}

.bs-card-emoji {
  display: grid;
  place-items: center;
  flex: 1;
  padding-bottom: 64px;
  font-size: 140px;
  line-height: 1;
}

.bs-card-emoji-sm {
  flex: none;
  padding: 0;
  margin-top: auto;
  font-size: 72px;
  justify-items: end;
}

.bs-card-buy {
  position: absolute;
  right: 20px;
  bottom: 20px;
  min-height: 34px;
  padding: 6px 16px;
  border: 0;
  border-radius: var(--bs-radius-full);
  background: var(--bs-blue);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}

.bs-card-buy:active,
.bs-button:active {
  scale: 0.96;
}

/* Blue liquid glass for the card and bag buttons */
.bs-card-buy.lg-glass,
.bs-button.lg-glass {
  --lg-tint: rgba(0, 113, 227, 0.72);
  background: transparent;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.8), 0 4px 14px rgba(0, 113, 227, 0.3);
  transition: scale 300ms var(--bs-ease);
}

.bs-button.lg-glass:disabled {
  --lg-tint: rgba(160, 160, 166, 0.6);
  box-shadow: none;
}

/* Help cards */
.bs-card-md {
  width: min(78vw, 320px);
  min-height: 280px;
  padding: 28px;
  gap: 8px;
}

.bs-card-md h3 {
  font-size: 21px;
}

/* Difference cards */
.bs-card-sm {
  width: min(64vw, 260px);
  min-height: 180px;
  padding: 24px;
  gap: 14px;
}

.bs-card-sm h3 {
  font-size: 19px;
}

.bs-card-icon {
  font-size: 34px;
  line-height: 1;
}

/* Accessory product cards */
.bs-card-product {
  width: min(62vw, 250px);
  min-height: 380px;
  padding: 0 22px 72px;
}

.bs-card-product .bs-card-emoji {
  flex: none;
  height: 190px;
  padding: 0;
  font-size: 96px;
}

.bs-card-product h3 {
  font-size: 17px;
  line-height: 1.24;
}

.bs-card-product .bs-card-eyebrow {
  margin-bottom: 4px;
}

/* ========================================
   Quick links
   ======================================== */
.bs-quicklinks {
  padding-top: 40px;
  padding-bottom: 64px;
}

.bs-quicklinks h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.bs-quicklinks ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bs-quicklinks a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid #d2d2d7;
  border-radius: var(--bs-radius-full);
  font-size: 14px;
  color: var(--bs-text);
}

/* ========================================
   Buttons
   ======================================== */
.bs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--bs-blue);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  touch-action: manipulation;
}

.bs-button:disabled {
  background: #d2d2d7;
  color: #fff;
  cursor: default;
}

.bs-button-wide {
  width: 100%;
}

/* ========================================
   Bag sheet
   ======================================== */
.lg-modal {
  position: fixed;
  inset: 0;
  z-index: var(--bs-z-modal);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.lg-modal.lg-modal-open {
  display: flex;
}

.lg-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  animation: bs-fade-in 250ms var(--bs-ease);
}

.lg-modal-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85svh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
  animation: bs-sheet-in 300ms var(--bs-ease);
}

@keyframes bs-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes bs-sheet-in {
  from {
    transform: translateY(40px);
  }
}

.lg-modal-header,
.lg-modal-body,
.lg-modal-footer {
  padding: 20px 24px;
}

.lg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0;
}

.lg-modal-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lg-modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #e8e8ed;
  color: var(--bs-text);
  cursor: pointer;
}

.lg-modal-close svg {
  width: 18px;
  height: 18px;
}

.lg-modal-footer {
  padding-top: 0;
  padding-bottom: 28px;
}

.bs-bag-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 14px 0;
  border-bottom: 1px solid #d2d2d7;
}

.bs-bag-remove {
  justify-self: start;
  border: 0;
  background: none;
  color: var(--bs-link);
  font-size: 14px;
  cursor: pointer;
}

.bs-bag-empty {
  color: var(--bs-text-muted);
}

.bs-bag-empty[hidden],
.bs-bag-total[hidden] {
  display: none;
}

.bs-bag-total {
  padding-top: 14px;
  font-size: 19px;
  font-weight: 600;
  text-align: right;
}

/* ========================================
   Footer
   ======================================== */
.bs-footer {
  background: var(--bs-page);
  border-top: 1px solid #d2d2d7;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: -0.01em;
  color: var(--bs-text-muted);
}

.bs-footer-inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px var(--bs-gutter) calc(24px + env(safe-area-inset-bottom));
}

.bs-footnote {
  padding-bottom: 10px;
}

.bs-footnote a {
  color: var(--bs-text);
  text-decoration: underline;
}

.bs-footer-columns {
  margin-top: 10px;
  border-top: 1px solid #d2d2d7;
}

.bs-footer-columns details {
  border-bottom: 1px solid #d2d2d7;
}

.bs-footer-columns summary {
  padding: 12px 0;
  font-weight: 600;
  color: var(--bs-text);
  cursor: pointer;
  list-style: none;
}

.bs-footer-columns summary::-webkit-details-marker {
  display: none;
}

.bs-footer-columns summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--bs-text-muted);
}

.bs-footer-columns details[open] summary::after {
  content: "−";
}

.bs-footer-columns ul {
  padding: 0 0 12px 12px;
  line-height: 2;
}

.bs-footer-columns a,
.bs-footer-legal a {
  color: var(--bs-text-muted);
}

.bs-footer-legal {
  display: grid;
  gap: 8px;
  padding-top: 16px;
}

.bs-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.bs-footer-legal-links a + a::before {
  content: "|";
  margin: 0 8px;
  color: #d2d2d7;
}

/* ========================================
   Larger screens
   ======================================== */
@media (min-width: 834px) {
  .bs-globalnav-inner {
    padding: 0 var(--bs-gutter);
  }

  .bs-logo {
    margin-right: 0;
  }

  .bs-globalnav-links {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 1;
    padding: 0 24px;
    background: none;
    overflow: visible;
  }

  .bs-globalnav-links a {
    padding: 0 8px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.8);
  }

  body:not(.bs-menu-open) .bs-globalnav.is-over-hero .bs-globalnav-links a {
    color: rgba(255, 255, 255, 0.85);
  }

  .bs-menu-button {
    display: none;
  }

  .bs-store-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-top: 72px;
  }

  .bs-store-title {
    font-size: 48px;
    max-width: 620px;
  }

  .bs-store-title span {
    display: inline;
  }

  .bs-store-help {
    margin: 0;
    text-align: right;
  }

  .bs-row-title {
    font-size: 28px;
  }

  .bs-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
      "duo duo book book"
      "duo duo watch vision"
      "pods pods watch vision";
    height: 760px;
    gap: 16px;
  }

  .bs-bento .bs-card {
    padding: 28px 28px 0;
  }

  .bs-bento .bs-card h3 {
    font-size: 22px;
  }

  .bs-bento-duo .bs-card h3 {
    font-size: 32px;
  }

  .bs-bento .bs-card-emoji {
    font-size: 96px;
  }

  .bs-shelf {
    scroll-padding-left: max(var(--bs-gutter), calc((100vw - 1024px) / 2 + var(--bs-gutter)));
  }

  .bs-shelf > ul {
    gap: 20px;
    padding-left: max(var(--bs-gutter), calc((100vw - 1024px) / 2 + var(--bs-gutter)));
    padding-right: max(var(--bs-gutter), calc((100vw - 1024px) / 2 + var(--bs-gutter)));
  }

  .lg-modal {
    align-items: center;
  }

  .lg-modal-content {
    border-radius: 24px;
  }

  .bs-footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #d2d2d7;
  }

  .bs-footer-columns details {
    border: 0;
  }

  .bs-footer-columns summary {
    pointer-events: none;
    padding: 0 0 8px;
  }

  .bs-footer-columns summary::after {
    content: none;
  }

  .bs-footer-columns ul {
    padding: 0;
  }

  .bs-footer-legal {
    grid-template-columns: auto 1fr auto;
    gap: 16px;
  }
}

@media (min-width: 834px) {
  .bs-intro .bs-globalnav-links > li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 800ms var(--bs-ease-out), transform 800ms var(--bs-ease-out);
    transition-delay: calc(240ms + var(--n) * 30ms);
  }

  .bs-globalnav-links > li:nth-child(1) { --n: 0; }
  .bs-globalnav-links > li:nth-child(2) { --n: 1; }
  .bs-globalnav-links > li:nth-child(3) { --n: 2; }
  .bs-globalnav-links > li:nth-child(4) { --n: 3; }
  .bs-globalnav-links > li:nth-child(5) { --n: 4; }
  .bs-globalnav-links > li:nth-child(6) { --n: 5; }
  .bs-globalnav-links > li:nth-child(7) { --n: 6; }
  .bs-globalnav-links > li:nth-child(8) { --n: 7; }
  .bs-globalnav-links > li:nth-child(9) { --n: 8; }

  .lg-loaded .bs-globalnav-links > li {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 1024px) {
  .bs-hero {
    padding-top: calc(56px + var(--bs-nav-height) + env(safe-area-inset-top));
  }

  .bs-hero::after {
    background-image: url("assets/pro.webp");
  }

  .bs-hero-stage {
    min-height: max(480px, 58vh);
  }
}

/* Hover only where there is a real pointer, so taps don't leave things stuck */
@media (hover: hover) and (pointer: fine) {
  .bs-card:hover {
    scale: 1.015;
    box-shadow: var(--bs-card-shadow-hover);
  }

  .bs-card-buy:hover,
  .bs-button:hover:not(:disabled) {
    --lg-tint: rgba(0, 119, 237, 0.85);
    scale: 1.04;
  }

  .lg-button:hover {
    scale: 1.05;
    rotate: -1deg;
  }

  .bs-store-help a:hover,
  .bs-footer a:hover {
    text-decoration: underline;
  }

  .bs-globalnav-links a:hover {
    color: #000;
  }

  .bs-quicklinks a:hover {
    border-color: var(--bs-text-muted);
  }
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .bs-intro-phone .bs-hero-poster {
    animation: none;
    opacity: 1;
    transform: none;
  }
}