/* =============================================================
   Zoomi · shop-v2.css
   Production design pass — shop page (ZoomiTag™ Health PDP).

   Loads after design-tokens.css, components.css and home-v2.css.
   Reuses everything home-v2 already provides (nav, footer, bento,
   phone-mock, stories carousel, faq, sticky-buy, final-cta).
   Adds shop-specific blocks:

     1. Hero buy block        (.shop-hero, .shop-gallery2, .shop-buy)
     2. 3-step strip          (.shop-steps, .shop-step)
     3. Bento photo variant   (.zoomi-bento--photo, .shop-chip--float)
     4. Callout row           (.shop-callouts, .shop-callout)
     5. Tech & fit            (.shop-tech, .shop-spec, .shop-fit)
     6. Subscription modal    (.shop-sub-modal)
     7. Page-level shop fixes (.with-shop-v2)
   ============================================================= */


/* =============================================================
   0 · Page-level fixes (light page, solid nav from the start)
   ============================================================= */
.with-shop-v2 .nav--shop {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 var(--zoomi-hair);
}
.with-shop-v2 .nav--shop .nav__logo { color: var(--zoomi-ink); }
.with-shop-v2 .nav--shop .nav__logo img { filter: none; }
.with-shop-v2 .nav--shop .nav__links a { color: var(--zoomi-body); }
.with-shop-v2 .nav--shop .nav__links a:hover { color: var(--zoomi-ink); }
.with-shop-v2 .nav--shop .nav__cart {
  color: var(--zoomi-ink);
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
}
.with-shop-v2 .nav--shop .nav__hamburger {
  color: var(--zoomi-ink);
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
}
.with-shop-v2 .nav--shop .nav__hamburger span,
.with-shop-v2 .nav--shop .nav__hamburger span::before,
.with-shop-v2 .nav--shop .nav__hamburger span::after {
  background: var(--zoomi-ink);
}
.with-shop-v2 .nav--shop .zoomi-btn-primary {
  background: var(--zoomi-cta-bg);
  color: var(--zoomi-cta-text);
  box-shadow: none;
}

/* Header is sticky (in flow), so no offset needed — just normal section padding. */
.with-shop-v2 .shop-hero {
  padding-top: var(--s-2xl);
  padding-bottom: var(--s-3xl);
}

/* =============================================================
   Breadcrumbs — used above the product hero
   ============================================================= */
.breadcrumb {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  padding: var(--s-xl) 0 0;
}
.breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb__item + .breadcrumb__item::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px;
  border-top: 1.5px solid var(--zoomi-chev);
  border-right: 1.5px solid var(--zoomi-chev);
  transform: rotate(45deg);
  margin-right: 4px;
}
.breadcrumb__item a {
  color: var(--zoomi-body);
  text-decoration: none;
  transition: color .2s ease;
}
.breadcrumb__item a:hover { color: var(--zoomi-ink); }
.breadcrumb__item[aria-current="page"] { color: var(--zoomi-ink); }


/* =============================================================
   1 · Hero buy block
   ============================================================= */
.shop-hero {
  background: var(--zoomi-page);
}
.shop-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-3xl);
  align-items: flex-start;
}


/* ---------- Gallery ---------- */
.shop-gallery2 {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-md);
  align-items: flex-start;
  min-width: 0;
}
.shop-gallery2__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 96px;
}
.shop-gallery2__thumb {
  appearance: none;
  border: 1.5px solid transparent;
  background: var(--zoomi-bg);
  border-radius: 12px;
  padding: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.shop-gallery2__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-gallery2__thumb:hover { border-color: var(--zoomi-hair); }
.shop-gallery2__thumb.is-active {
  border-color: var(--zoomi-ink);
  transform: scale(1.02);
}
.shop-gallery2__thumb:focus-visible {
  outline: 2px solid var(--zoomi-link);
  outline-offset: 2px;
}

.shop-gallery2__viewport {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--zoomi-bg);
  min-width: 0;
}
.shop-gallery2__track {
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.shop-gallery2__track::-webkit-scrollbar { display: none; }

.shop-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 5 / 4;
  margin: 0;
  background: var(--zoomi-bg);
  overflow: hidden;
}
.shop-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback for browsers without aspect-ratio (iOS Safari < 15, older
   Android WebViews, older in-app browsers). Without it the slide
   collapses to 0 height and the gallery looks blank — only the thumbs
   render. Holds the same 5:4 box via the classic padding-top trick. */
@supports not (aspect-ratio: 1 / 1) {
  .shop-slide::before {
    content: "";
    display: block;
    padding-top: 80%; /* 4 / 5 */
  }
  .shop-slide__img {
    position: absolute;
    inset: 0;
  }
  .shop-slide--app::before { display: none; }
  .shop-slide--app { min-height: 320px; }
}

/* App-screen slide — phone-mock on tinted bg */
.shop-slide--app {
  background: linear-gradient(135deg, var(--accent-peach-soft), var(--accent-buttercup-soft));
  display: grid;
  place-items: center;
  padding: var(--s-2xl);
}
.shop-slide__phone {
  position: relative;
  display: grid;
  place-items: center;
}
.shop-slide__phone .phone-mock { width: 240px; }
.shop-slide__caption {
  position: absolute;
  left: var(--s-lg);
  right: var(--s-lg);
  bottom: var(--s-lg);
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  color: var(--zoomi-ink);
  letter-spacing: var(--track-heading);
}

/* Floating chips on slides (Tractive-style) */
.shop-slide__chip {
  position: absolute;
  display: flex;
  pointer-events: none;
}
.shop-slide__chip--bottom-left  { left: var(--s-lg); bottom: var(--s-lg); }
.shop-slide__chip--bottom-right { right: var(--s-lg); bottom: var(--s-lg); }
.shop-slide__chip--top-right    { right: var(--s-lg); top: var(--s-lg); }
.shop-slide__chip--top-left     { left: var(--s-lg); top: var(--s-lg); }

.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--zoomi-ink);
  font-family: var(--font-heading);
  font-size: var(--t-title-md);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16),
              0 1px 0 rgba(255, 255, 255, 0.6) inset;
  white-space: nowrap;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.shop-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.18);
  animation: shopPulse 1.8s infinite var(--ease-out);
}
@keyframes shopPulse {
  0%, 70%, 100% { box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.18); }
  35% { box-shadow: 0 0 0 9px rgba(255, 59, 48, 0); }
}

/* Gallery prev/next arrows (shown on all viewports) */
.shop-gallery2__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid var(--zoomi-hair);
  color: var(--zoomi-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.shop-gallery2__arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.shop-gallery2__arrow:focus-visible {
  outline: 2px solid var(--zoomi-link);
  outline-offset: 2px;
}
.shop-gallery2__arrow--prev { left: 12px; }
.shop-gallery2__arrow--next { right: 12px; }

.shop-gallery2__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: none;
  gap: 6px;
  justify-content: center;
  z-index: 2;
}
.shop-gallery2__dot {
  appearance: none;
  border: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.shop-gallery2__dot.is-active {
  background: #fff;
  transform: scale(1.4);
}


/* ---------- Purchase column ---------- */
.shop-buy {
  min-width: 0;
  position: sticky;
  top: 96px;
}
.shop-buy__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.shop-buy__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-buttercup-soft);
  color: #8a5b00;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.shop-buy__eyebrow svg { color: #C4842D; }
.shop-buy__eyebrow--coming {
  background: var(--accent-blossom-soft);
  color: #a31252;
}
.shop-buy__eyebrow--coming svg { color: #d4347b; }

/* Lede paragraph below H1 (used on coming-soon variants where there's no
   £ price + rating block above the bullets). */
.shop-buy__lede {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}


/* ----------------------------------------------------------------
   Waitlist form (cat page) — email input + submit + feedback row
   ---------------------------------------------------------------- */
.shop-waitlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--s-xs);
}
.shop-waitlist__label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-body);
}
.shop-waitlist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.shop-waitlist__input {
  appearance: none;
  width: 100%;
  font-family: inherit;
  font-size: var(--t-body-md);
  padding: 14px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--zoomi-hair);
  background: #fff;
  color: var(--zoomi-ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.shop-waitlist__input::placeholder { color: var(--zoomi-chev); }
.shop-waitlist__input:focus {
  outline: 0;
  border-color: var(--zoomi-ink);
  box-shadow: 0 0 0 3px rgba(20, 25, 40, 0.06);
}
.shop-waitlist__submit { white-space: nowrap; }
.shop-waitlist__submit.is-busy { opacity: 0.7; pointer-events: none; }
.shop-waitlist__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.shop-waitlist__feedback {
  margin: 4px 0 0;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  min-height: 1.2em;
  line-height: var(--lh-body);
}
.shop-waitlist__feedback.is-success {
  color: var(--tone-green-stroke);
  font-weight: 600;
}
.shop-waitlist__feedback.is-error {
  color: var(--tone-coral-stroke);
  font-weight: 600;
}
.shop-waitlist__note {
  margin: 0;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
}

/* Small at-launch / target pills used on the In-the-Box tab */
.shop-tabs__pill {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-blossom-soft);
  color: #a31252;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  vertical-align: middle;
}

.shop-buy__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--zoomi-ink);
}

.shop-buy__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
}
.shop-buy__stars {
  color: #f5a623;
  letter-spacing: 1px;
  font-size: 1rem;
}
.shop-buy__rating-text strong { color: var(--zoomi-ink); font-weight: 600; }
.shop-buy__rating-text a { color: var(--zoomi-body); text-decoration: underline; text-underline-offset: 3px; }

.shop-buy__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.shop-buy__price-now {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  line-height: 1;
}
.shop-buy__price-was {
  font-size: var(--t-body-lg);
  color: var(--zoomi-body);
  text-decoration: line-through;
}
.shop-buy__price-save {
  font-size: var(--t-title-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-peach-soft);
  color: #b54a1e;
  letter-spacing: 0.2px;
}

.shop-buy__sub {
  appearance: none;
  background: var(--zoomi-bg);
  border: 0;
  border-radius: var(--r-inner);
  padding: 10px 12px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  cursor: pointer;
  line-height: var(--lh-body);
}
.shop-buy__sub:hover { background: #ebebeb; }
.shop-buy__sub svg { flex: 0 0 auto; margin-top: 2px; opacity: 0.7; }
.shop-buy__sub em { font-style: normal; color: var(--zoomi-ink); font-weight: 600; }
.shop-buy__sub-link {
  color: var(--zoomi-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.shop-buy__bullets {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shop-buy__bullets li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
}
.shop-buy__bullets li svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  background: var(--zoomi-bg);
  color: var(--zoomi-ink);
}
.shop-buy__bullets li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-buy__bullets li strong {
  font-size: var(--t-body-md);
  font-weight: 600;
  color: var(--zoomi-ink);
  line-height: 1.3;
}
.shop-buy__bullets li span {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}

/* Compact bullet variant — title only, sits inline with icon */
.shop-buy__bullets--compact { gap: 10px; }
.shop-buy__bullets--compact li {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
}
.shop-buy__bullets--compact li svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 8px;
}
.shop-buy__bullets--compact li strong {
  font-size: var(--t-body-md);
  font-weight: 600;
  line-height: 1.3;
  display: block;
}

.shop-buy__rule {
  border: 0;
  border-top: 1px solid var(--zoomi-hair);
  margin: var(--s-sm) 0 0;
  width: 100%;
}


/* ----------------------------------------------------------------
   Colour picker — swatches + selected ring + "Coming Soon" pill.
   Photos swap via JS using data-src-<colour> attributes on thumbs +
   slides. Disabled-style CTA when a coming-soon colour is selected.
   ---------------------------------------------------------------- */
.shop-buy__colors {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.shop-buy__colors-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--zoomi-bg);
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  letter-spacing: 0;
}
.shop-buy__colors-label strong {
  color: var(--zoomi-ink);
  font-weight: 600;
}
.shop-buy__color-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.shop-color__caption {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  line-height: 1;
}
/* Circular swatch — chip with a small gap then a hairline ring when
   selected (no chunky background/border). Subtle, calm, design-system
   friendly. */
.shop-color {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px;            /* creates the gap between chip and ring */
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.shop-color:hover {
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
}
.shop-color.is-selected {
  box-shadow: inset 0 0 0 1.5px var(--zoomi-ink);
}
.shop-color:focus-visible {
  outline: 2px solid var(--zoomi-link);
  outline-offset: 2px;
}
.shop-color__chip {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--swatch, #ccc);
  /* Soft inner edge so light swatches still read on white */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  position: relative;
}

/* Coming-soon variant — muted chip with a diagonal strikethrough.
   Always visible (no hover required). Paired with the .shop-color__caption
   text rendered alongside the swatch row. */
.shop-color--soon { cursor: not-allowed; }
.shop-color--soon .shop-color__chip { opacity: 0.55; }
.shop-color--soon .shop-color__chip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  right: -3px;
  height: 1.5px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
}

/* CTA when coming-soon colour is selected — disabled but legible */
.shop-buy__cta--soon {
  background: var(--zoomi-bg) !important;
  color: var(--zoomi-body) !important;
  cursor: not-allowed;
}
.shop-buy__cta--soon:hover { transform: none !important; }

.shop-buy__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 4px;
}
.shop-buy__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--tone-green-container);
  color: var(--tone-green-stroke);
  font-size: var(--t-title-sm);
  font-weight: 600;
  letter-spacing: 0.1px;
}
.shop-buy__trust-item strong { color: var(--tone-green-stroke); font-weight: 700; }

.shop-buy__cta {
  width: 100%;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shop-buy__cta.is-busy {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}
.shop-buy__cta.is-busy::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: shopSpin 0.6s linear infinite;
  margin-left: 10px;
}
@keyframes shopSpin { to { transform: rotate(360deg); } }

.shop-buy__cta-error {
  background: var(--tone-coral-container);
  color: var(--tone-coral-stroke);
  border-radius: var(--r-inner);
  padding: 10px 12px;
  font-size: var(--t-body-sm);
  font-weight: 500;
}

.shop-buy__pay {
  margin-top: var(--s-xs);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
}
.shop-buy__pay-label { white-space: nowrap; opacity: 0.8; }
.shop-buy__pay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.shop-buy__pay li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 36px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--zoomi-hair);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--zoomi-body);
}

.shop-buy__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-sm);
}
.shop-buy__meta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  padding: 8px 10px;
  background: var(--accent-blossom-soft);
  border-radius: 10px;
  transition: background var(--dur-fast) var(--ease-out);
}
.shop-buy__meta-link:hover { background: var(--accent-blossom); color: var(--zoomi-ink); }
.shop-buy__meta-link strong { color: var(--zoomi-ink); font-weight: 600; }
.shop-buy__meta-note {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  margin: 0;
  line-height: var(--lh-body);
}


/* =============================================================
   2 · 3-step strip
   ============================================================= */
.shop-steps {
  background: var(--accent-buttercup-soft);
  padding: var(--s-3xl) 0;
}
.shop-steps__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-2xl);
}
.shop-steps__head .eyebrow { color: #8a5b00; }
.shop-steps__h2 {
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  margin: 8px 0 0;
  color: var(--zoomi-ink);
}
.shop-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-lg);
}
.shop-step {
  background: #fff;
  border-radius: var(--r-card);
  padding: var(--s-2xl) var(--s-lg) var(--s-lg);
  position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 8px 24px rgba(180, 130, 50, 0.08);
}
.shop-step__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-peach);
  display: block;
  margin-bottom: 8px;
}
.shop-step__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-headline-sm);
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: 0 0 6px;
}
.shop-step__sub {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}


/* =============================================================
   3 · Bento — new photo variant + floating-chip overlay
   ============================================================= */
.bento-grid--shop {
  /* slightly less aggressive on shop — first tile still dominant */
}

/* Photo-backdrop bento (e.g. waterproof lifestyle) */
.zoomi-bento--photo {
  position: relative;
  background: var(--zoomi-bg);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding: var(--s-lg);
}
.zoomi-bento__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.zoomi-bento__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.45) 100%),
    linear-gradient(105deg, rgba(0,0,0,0.20), transparent 55%);
  z-index: -1;
}
.zoomi-bento__copy--photo .zoomi-bento__label { color: rgba(255, 255, 255, 0.75); }
.zoomi-bento__copy--photo .zoomi-bento__title { color: #fff; }
.zoomi-bento__copy--photo .zoomi-bento__sub   { color: rgba(255, 255, 255, 0.85); }

/* Floating chip placed in a bento (Tractive-style) */
.shop-chip--float {
  position: absolute;
  right: var(--s-lg);
  bottom: var(--s-lg);
  z-index: 1;
  pointer-events: none;
}


/* =============================================================
   3b · Feature blocks · GPS tracking · Health insights
   Two large side-by-side cards. Phone screen up top, eyebrow +
   headline + lede + 3 sub-features below. Tractive-style.
   ============================================================= */
.shop-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-xl);
}

.shop-feature {
  position: relative;
  display: grid;
  /* Body gets a touch more room than the phone panel so the lede /
     sub-feature copy doesn't wrap awkwardly at half-width. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 8px 32px rgba(20, 25, 40, 0.06);
}

.shop-feature--gps    { background: var(--accent-peach-soft); }
.shop-feature--health { background: var(--accent-mint-soft); }

/* Visual area — phone sits centred (vertically + horizontally) in the
   panel so the whole screen is visible. Floating chip sits top-right. */
.shop-feature__visual {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-md);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.55), transparent 60%);
  overflow: hidden;
}
.shop-feature__visual .phone-mock {
  /* Override the home-v2 default (position:absolute; top:0) so the
     phone participates in the flex layout and can be centred. */
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 190px;
  flex: 0 0 auto;
  margin: 0;
  box-shadow: 0 24px 60px rgba(20, 25, 40, 0.18);
}
/* Hide the decorative pills inside the feature panels — feels noisy
   alongside the body copy. (Same float-badge class is still used in
   gallery slides elsewhere, so this is panel-scoped only.) */
.shop-feature__visual .float-badge { display: none; }
.shop-feature__visual .float-badge {
  position: absolute;
  top: 24px;
  right: var(--s-xl);
  background: rgba(255, 255, 255, 0.96);
  color: var(--zoomi-ink);
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-size: var(--t-title-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  white-space: nowrap;
}
.shop-feature__visual .float-badge--score {
  background: #fff;
}
.shop-feature--health .float-badge--score::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone-green-stroke);
  margin-right: 8px;
  vertical-align: middle;
}

/* Body — eyebrow + h3 + lede + 3 sub-features (left column) */
.shop-feature__body {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-sm);
  /* Tighter vertical rhythm, generous horizontal so copy can breathe. */
  padding: var(--s-lg) var(--s-xl);
  min-width: 0;
}
.shop-feature__body .zoomi-eyebrow-chip { width: fit-content; }
.shop-feature__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-headline-md);
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  line-height: var(--lh-tight);
}
.shop-feature__lede {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}

.shop-feature__list {
  list-style: none;
  margin: var(--s-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  border-top: 1px solid rgba(20, 25, 40, 0.08);
  padding-top: var(--s-md);
}
.shop-feature__list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
}
.shop-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--zoomi-ink);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(20, 25, 40, 0.04),
              0 4px 12px rgba(20, 25, 40, 0.04);
}
.shop-feature--gps    .shop-feature__icon { color: #b54a1e; }
.shop-feature--health .shop-feature__icon { color: #0a7a47; }

.shop-feature__list li div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.shop-feature__list li strong {
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  line-height: 1.25;
}
.shop-feature__list li span {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}


/* =============================================================
   4 · Callout row — 3 lifestyle/product cards with floating chips
   ============================================================= */
.shop-callouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-lg);
  margin-top: var(--s-2xl);
}
.shop-callout {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  background: #fff;
  border-radius: var(--r-bento);
  padding: var(--s-md);
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
}
.shop-callout__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-inner);
  overflow: hidden;
  background: var(--zoomi-bg);
}
.shop-callout__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-callout__media .shop-chip--float {
  right: 12px;
  bottom: 12px;
}
.shop-callout h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  line-height: 1.2;
}
.shop-callout p {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}

.shop-app-badges {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: var(--s-2xl);
}


/* =============================================================
   5 · Tech & fit
   ============================================================= */
.shop-tech {
  background: var(--zoomi-page);
}
.shop-tech__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-3xl);
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.shop-tech__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--zoomi-hair);
  border-radius: var(--r-card);
  overflow: hidden;
}
.shop-spec {
  background: #fff;
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shop-spec svg {
  width: 22px;
  height: 22px;
  color: var(--zoomi-body);
  margin-bottom: 2px;
}
.shop-spec strong {
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
}
.shop-spec span {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
}

.shop-fit {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  background: var(--accent-sky-soft);
  border-radius: var(--r-card);
  padding: var(--s-md);
}
.shop-fit__split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-inner);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--zoomi-bg);
}
.shop-fit__side {
  position: relative;
  overflow: hidden;
}
.shop-fit__side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-fit__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 12px;
  background: #fff;
  border-radius: var(--r-pill);
  font-size: var(--t-title-sm);
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--zoomi-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.shop-fit__divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
  z-index: 1;
}
.shop-fit__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px 6px;
}
.shop-fit__caption strong {
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
}
.shop-fit__caption span {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
}


/* =============================================================
   5b · Product details tabs — Description · Box · Specs · Shipping · FAQ
   Vertical layout: left column = eyebrow + heading + tab list;
   right column = active panel content. Stacks on mobile with
   a horizontal scrolling tab bar above the panel.
   ============================================================= */
/* The section sits in a narrower frame than the rest of the page so
   the aside pulls in toward the centre and the panel content lives
   to its right rather than stretching to the page edge. */
.zoomi-app .zoomi-container.shop-details__inner {
  max-width: 1120px;
}

.shop-tabs--vertical {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s-3xl);
  align-items: flex-start;
}

.shop-tabs__aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.shop-tabs__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
}
.shop-tabs__aside .eyebrow { margin-bottom: 4px; }

.shop-tabs__barwrap {
  margin-top: var(--s-md);
  /* horizontal scroll only kicks in on mobile via media query */
}
.shop-tabs__bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-tabs__tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 500;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-body);
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.shop-tabs__tab:hover {
  color: var(--zoomi-ink);
  background: var(--zoomi-bg);
}
.shop-tabs__tab.is-active {
  font-weight: 600;
  background: var(--zoomi-ink);
  color: #fff;
}
.shop-tabs__tab:focus-visible {
  outline: 2px solid var(--zoomi-link);
  outline-offset: 2px;
}

/* Right column — active panel */
.shop-tabs__main {
  min-width: 0;
  padding-top: 4px;
}

.shop-tabs__panel {
  animation: shopTabIn var(--dur-med) var(--ease-out);
}
.shop-tabs__panel[hidden] { display: none; }
@keyframes shopTabIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.shop-tabs__col {
  max-width: 720px;
}
.shop-tabs__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-xl);
}
.shop-tabs__faq {
  /* FAQs use the same width as other panel content */
}
.shop-tabs__panel h3 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: 0 0 var(--s-sm);
  line-height: 1.25;
}
/* Second-and-after h3 inside a single panel — used when one tab
   covers two related topics (e.g. Delivery + Returns) stacked. */
.shop-tabs__panel h3.shop-tabs__subhead {
  margin-top: var(--s-xl);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--zoomi-hair);
}
.shop-tabs__panel h4 {
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: var(--s-md) 0 var(--s-xs);
}
.shop-tabs__panel p {
  margin: 0 0 var(--s-sm);
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}
.shop-tabs__panel p strong { color: var(--zoomi-ink); font-weight: 600; }
.shop-tabs__panel a { color: var(--zoomi-link); text-decoration: underline; text-underline-offset: 3px; }

.shop-tabs__note {
  font-size: var(--t-body-sm) !important;
  color: var(--zoomi-body) !important;
  padding: 10px 12px;
  background: var(--zoomi-bg);
  border-radius: 10px;
  margin-top: var(--s-sm) !important;
}

.shop-tabs__bullets {
  list-style: none;
  margin: 0 0 var(--s-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-tabs__bullets li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}
.shop-tabs__bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zoomi-ink);
  opacity: 0.5;
}
.shop-tabs__bullets--ticks li::before {
  content: "";
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tone-green-container);
  opacity: 1;
}
.shop-tabs__bullets--ticks li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--tone-green-stroke);
  border-bottom: 2px solid var(--tone-green-stroke);
  transform: rotate(-45deg);
}

.shop-tabs__specs {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--r-inner);
  overflow: hidden;
  border: 1px solid var(--zoomi-hair);
}
.shop-tabs__specs > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--s-md);
  padding: 10px var(--s-md);
  border-top: 1px solid var(--zoomi-hair);
  align-items: baseline;
}
.shop-tabs__specs > div:first-child { border-top: 0; }
.shop-tabs__specs dt {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.shop-tabs__specs dd {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-ink);
  font-weight: 500;
}

.shop-tabs__faq {
  max-width: 720px;
}

/* FAQ inside the tabbed details — strip the auto-centring, and pull
   the card-style items leftward so the question text starts flush
   with the other panels' h3s instead of looking inset. */
.shop-tabs__panel .faq {
  margin: 0;
  max-width: 720px;
  gap: 4px;
}
.shop-tabs__panel .faq__item {
  margin-left: calc(-1 * var(--s-md));
  margin-right: calc(-1 * var(--s-md));
  padding: 0 var(--s-sm);
}
.shop-tabs__panel .faq__item summary {
  padding: var(--s-sm) var(--s-sm);
  font-size: var(--t-body-md);
}
.shop-tabs__panel .faq__item p {
  padding: 0 var(--s-sm) var(--s-sm);
}


/* =============================================================
   6 · Final CTA — shop variant (use a real image bg)
   ============================================================= */
.final-cta--shop {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
}
.final-cta--shop .final-cta__bg {
  position: absolute;
  inset: 0;
}
.final-cta--shop .final-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-cta--shop .final-cta__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(14, 15, 17, 0.78) 0%, rgba(14, 15, 17, 0.50) 50%, rgba(14, 15, 17, 0.15) 100%);
}
.final-cta--shop .final-cta__inner {
  position: relative;
  padding: var(--s-3xl) var(--s-2xl);
  max-width: 720px;
  color: #fff;
}
.final-cta--shop .final-cta__copy h2 {
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  margin: 8px 0 12px;
  color: #fff;
}
.final-cta--shop .final-cta__copy p {
  font-size: var(--t-body-lg);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--s-lg);
}
.final-cta--shop .final-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  flex-wrap: wrap;
}
.final-cta--shop .final-cta__price strong {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: #fff;
  line-height: 1;
}
.final-cta--shop .final-cta__price sup { font-size: 0.5em; opacity: 0.8; }
.final-cta--shop .final-cta__price span {
  display: block;
  font-size: var(--t-body-sm);
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}
.final-cta--shop .final-cta__trust {
  margin-top: var(--s-md);
  font-size: var(--t-body-sm);
  color: rgba(255, 255, 255, 0.7);
}


/* =============================================================
   7 · Subscription modal
   ============================================================= */
.shop-sub-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--s-md);
}
.shop-sub-modal[hidden] { display: none; }
.shop-sub-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 15, 17, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.shop-sub-modal__panel {
  position: relative;
  background: #fff;
  border-radius: var(--r-card);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--s-2xl) var(--s-xl) var(--s-xl);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.shop-sub-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--zoomi-bg);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--zoomi-ink);
}
.shop-sub-modal__close:hover { background: #eaeaea; }
.shop-sub-modal__eyebrow {
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-body);
  margin-bottom: 6px;
}
.shop-sub-modal__header h2 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-md);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  margin: 0 0 8px;
  color: var(--zoomi-ink);
}
.shop-sub-modal__intro {
  margin: 0 0 var(--s-md);
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}
.shop-sub-modal__plan {
  background: var(--accent-buttercup-soft);
  border-radius: var(--r-inner);
  padding: var(--s-md);
  margin-bottom: var(--s-md);
}
.shop-sub-modal__plan-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.shop-sub-modal__plan-label {
  font-size: var(--t-body-md);
  font-weight: 600;
  color: var(--zoomi-ink);
}
.shop-sub-modal__plan-pop {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--tone-amber-container);
  color: var(--tone-amber-stroke);
}
.shop-sub-modal__plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.shop-sub-modal__plan-amount {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
}
.shop-sub-modal__plan-period {
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
}
.shop-sub-modal__plan-meta {
  margin: 4px 0 0;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
}
.shop-sub-modal__features {
  list-style: none;
  margin: 0 0 var(--s-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-sub-modal__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-body-md);
  color: var(--zoomi-ink);
  line-height: var(--lh-body);
}
.shop-sub-modal__features svg {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--tone-green-stroke);
}
.shop-sub-modal__fine {
  margin: 0;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--zoomi-hair);
}


/* =============================================================
   8 · Sticky buy bar — make it a bottom bar across all sizes
   (home-v2 only enables on mobile; shop wants it persistent
   once past hero on any width)
   ============================================================= */
.with-shop-v2 .sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08), 0 -1px 0 var(--zoomi-hair);
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: 12px 16px;
  transform: translateY(110%);
  transition: transform var(--dur-med) var(--ease-out);
}
.with-shop-v2 .sticky-buy.is-shown { transform: translateY(0); }
.with-shop-v2 .sticky-buy__thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--zoomi-bg);
  flex: 0 0 auto;
}
.with-shop-v2 .sticky-buy__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.with-shop-v2 .sticky-buy__price {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.with-shop-v2 .sticky-buy__price strong {
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
}
.with-shop-v2 .sticky-buy__price sup { font-size: 0.55em; opacity: 0.75; }
.with-shop-v2 .sticky-buy__price span {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.with-shop-v2 .sticky-buy .zoomi-btn-primary {
  white-space: nowrap;
}

/* Desktop: float the pill 20px in from the bottom-left and dress it up
   as liquid glass — translucent fill, heavy backdrop blur + saturate,
   crisp inner highlight, soft layered shadow. */
@media (min-width: 721px) { /* non-canonical: +1 pair with max-width:720 to avoid 720px overlap */
  .with-shop-v2 .sticky-buy {
    left: 20px;
    right: auto;
    bottom: 20px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 0 0 1px rgba(20, 25, 40, 0.04),
      0 12px 32px rgba(20, 25, 40, 0.14),
      0 24px 60px rgba(20, 25, 40, 0.10);
  }
}


/* =============================================================
   9 · Responsive
   ============================================================= */

/* ---------- ≤ 1080px : reflow hero gallery (smaller thumbs) ---------- */
@media (max-width: 1080px) {
  .shop-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-2xl);
  }
  .shop-gallery2 { grid-template-columns: 64px minmax(0, 1fr); }
  .shop-gallery2__thumb { width: 64px; height: 64px; }
}

/* ---------- ≤ 880px : stack hero, gallery becomes mobile carousel ---------- */
@media (max-width: 880px) {
  .with-shop-v2 .shop-hero {
    padding-top: var(--s-lg);
    padding-bottom: var(--s-2xl);
  }
  .breadcrumb { padding-top: var(--s-lg); }
  .shop-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-xl);
  }
  .shop-gallery2 {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--s-md);
  }
  .shop-gallery2__thumbs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    min-width: 0;
    width: 100%;
  }
  .shop-gallery2__thumbs::-webkit-scrollbar { display: none; }
  .shop-gallery2__thumb { width: 56px; height: 56px; flex: 0 0 56px; }
  .shop-gallery2__dots { display: flex; }
  .shop-buy { position: static; }
  .shop-buy__h1 { font-size: 1.85rem; }
  .shop-buy__price-now { font-size: 1.9rem; }
  .shop-steps__list {
    grid-template-columns: 1fr;
    gap: var(--s-md);
  }
  .shop-steps__h2 { font-size: var(--t-headline-lg); }
  .shop-features {
    grid-template-columns: 1fr;
    gap: var(--s-lg);
  }
  .shop-feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .shop-feature__body  {
    grid-column: 1;
    grid-row: 1;
    padding: var(--s-xl) var(--s-lg) var(--s-md);
  }
  .shop-feature__visual {
    grid-column: 1;
    grid-row: 2;
    padding: var(--s-lg);
    align-items: center;
    justify-content: center;
    min-height: 320px;
  }
  .shop-feature__visual .phone-mock { width: 180px; margin: 0; }
  .shop-feature__visual .float-badge { top: 16px; right: var(--s-lg); left: auto; }
  .shop-feature__title { font-size: var(--t-headline-sm); }

  .shop-callouts {
    grid-template-columns: 1fr;
    gap: var(--s-md);
  }
  .shop-tech__grid {
    grid-template-columns: 1fr;
    gap: var(--s-xl);
  }
  .shop-tech__specs {
    grid-template-columns: 1fr 1fr;
  }
  .final-cta--shop .final-cta__inner {
    padding: var(--s-2xl) var(--s-lg);
  }
  .final-cta--shop .final-cta__copy h2 { font-size: var(--t-headline-lg); }
  .shop-tabs__split { grid-template-columns: 1fr; gap: var(--s-xl); }
  .shop-tabs__specs > div { grid-template-columns: 110px minmax(0, 1fr); }

  /* Vertical tabs collapse: heading + scrolling horizontal tab bar
     above content. */
  .shop-tabs--vertical {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-lg);
  }
  .shop-tabs__aside { position: static; gap: var(--s-sm); min-width: 0; }
  .shop-tabs__main { min-width: 0; }
  .shop-tabs__heading { font-size: var(--t-headline-lg); }
  .shop-tabs__barwrap {
    margin-top: var(--s-sm);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--zoomi-hair);
    padding-bottom: 4px;
  }
  .shop-tabs__barwrap::-webkit-scrollbar { display: none; }
  .shop-tabs__bar {
    flex-direction: row;
    gap: 2px;
    min-width: 100%;
  }
  .shop-tabs__tab {
    border-radius: 999px;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: var(--t-title-md);
  }
}

/* ---------- ≤ 520px : tight phone ---------- */
@media (max-width: 520px) {
  .shop-buy__h1 { font-size: 1.7rem; }
  .shop-buy__price-now { font-size: 1.7rem; }
  .shop-buy__bullets li svg { width: 32px; height: 32px; padding: 6px; }
  .shop-tech__specs { grid-template-columns: 1fr 1fr; }
  .shop-spec { padding: var(--s-md); }
  .shop-step { padding: var(--s-lg); }
  .shop-step__num { font-size: 2.4rem; }
  .shop-chip { font-size: var(--t-body-sm); padding: 8px 12px; }
  .shop-slide--app { padding: var(--s-md); }
  .shop-slide--app .phone-mock { width: 180px; }
  .shop-callout { padding: 10px; }
  .shop-callout h4 { font-size: var(--t-title-lg); }
  /* Waitlist email + button stack on phones for tap-target comfort */
  .shop-waitlist__row { grid-template-columns: 1fr; }
  .shop-waitlist__submit { width: 100%; }
  /* Subscription modal — full sheet on phones */
  .shop-sub-modal { align-items: end; padding: 0; }
  .shop-sub-modal__panel {
    border-radius: var(--r-card) var(--r-card) 0 0;
    max-height: 92vh;
  }
}


/* =============================================================
   10 · Body padding for sticky bar so it doesn't cover footer
   ============================================================= */
.with-shop-v2 main { padding-bottom: 0; }
@media (max-width: 880px) {
  .with-shop-v2 body { /* reserve a little space for the sticky bar's tap area */ }
}

/* URL-triggered exclusive offer banner (shown by assets/cart.js when ?offer= active) */
.shop-offer-banner{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1A1B1E;
  color: #FFFFFF;
  border-radius: 14px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .005em;
}
.shop-offer-banner[hidden]{ display: none; }
.shop-offer-banner__chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-peach, #FFB494);
  color: #3A1306;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  flex: none;
}
.shop-offer-banner__body{ min-width: 0; }
.shop-offer-banner__code{
  color: var(--accent-peach, #FFB494);
  font-weight: 800;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
@media (max-width: 480px) {
  .shop-offer-banner{ gap: 8px; padding: 9px 12px; font-size: 12px; }
  .shop-offer-banner__chip{ padding: 3px 7px; font-size: 9px; }
}