/* Design tokens load first as their own stylesheet (zbc-tokens, versioned); see Assets::register(). */

/* ==========================================================================
   Zamplebox Club — component stylesheet
   Consumes tokens.css only (no hard-coded colors). Mobile-first from 320px;
   breakpoints 640 / 900 / 1200. BEM-ish, every class prefixed `zbc-`.

   Contents
     00  Local derived properties
     01  Base, reset, typography, utilities
     02  App chrome: topbar, wordmark, nav, avatar, tab bar, footer, layout
     03  Buttons
     04  Badges, pills, chips, category accents
     05  Cards, panels, stat tiles, notices
     06  Forms: fields, inputs, selects, checks, switch, range, segmented, choice cards, quantity
     07  Stepper and progress
     08  Sheet / dialog, toast, skeleton, countdown, empty state, action bar
     09  Product tile, bottle placeholder, grid
     10  Summary lists, note chips, slot bar, plan cards
     11  Join flow layout
     12  Status panels (loading, error, coming soon)
     13  Motion, reduced motion, forced colors, print
     14  Member pages: shared (page head, thumbnails, stars, ring, timeline, activity, tabs, menus,
         action tiles, sheets: picker, offers, date change, quote, saved cards)
     15  Member: dashboard (welcome, attention, next box hero, cards)
     16  Member: next box (item lines, extras, build, summary)
     17  Member: flavor profile
     18  Member: queue and lists
     19  Member: past boxes and ratings
     20  Member: manage membership and payment
   ========================================================================== */

/* 00 Local derived properties ------------------------------------------------ */
.zbc {
  --zbc-tabbar-h: 64px;
  --zbc-topbar-offset: calc(var(--zbc-bar-h) + var(--zbc-safe-top));
  --zbc-bottom-offset: 0px;
  --zbc-card-bg: linear-gradient(180deg, var(--zbc-surface-2), var(--zbc-surface));
  --zbc-card-highlight: inset 0 1px 0 var(--zbc-line);
  --zbc-focus-outline: 2px solid transparent; /* visible in forced-colors mode */
  --zbc-actionbar-safe: var(--zbc-safe-bottom);
  --zbc-toast-offset: 0px;
}

.zbc-body.zbc-has-actionbar { --zbc-toast-offset: 92px; }

.zbc-body.zbc-has-tabbar,
.zbc-body:has(> .zbc-tabbar) {
  --zbc-bottom-offset: calc(var(--zbc-tabbar-h) + var(--zbc-safe-bottom));
  --zbc-actionbar-safe: 0px;
}

@media (min-width: 900px) {
  .zbc-body.zbc-has-tabbar,
  .zbc-body:has(> .zbc-tabbar) {
    --zbc-bottom-offset: 0px;
    --zbc-actionbar-safe: var(--zbc-safe-bottom);
  }
}

/* 01 Base -------------------------------------------------------------------- */
html.zbc-html {
  background: var(--zbc-canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--zbc-topbar-offset) + var(--zbc-s4));
}

html.zbc-scroll-lock {
  overflow: hidden;
}

body.zbc {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--zbc-font);
  font-size: var(--zbc-fs-md);
  line-height: var(--zbc-lh);
  font-weight: 450;
  color: var(--zbc-text);
  background:
    radial-gradient(900px 480px at 8% -8%, var(--zbc-brand-wash), transparent 62%),
    radial-gradient(720px 420px at 96% -4%, var(--zbc-lime-wash), transparent 60%),
    var(--zbc-canvas);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" on, "cv11" on;
}

.zbc *,
.zbc *::before,
.zbc *::after {
  box-sizing: border-box;
}

.zbc :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, fieldset) {
  margin: 0;
}

.zbc :where(ul, ol)[role="list"],
.zbc :where(ul, ol).zbc-list-reset {
  list-style: none;
  padding: 0;
}

.zbc :where(img, svg, video) {
  display: block;
  max-width: 100%;
}

.zbc :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.zbc :where(button) {
  cursor: pointer;
}

.zbc :where(fieldset) {
  border: 0;
  padding: 0;
  min-width: 0;
}

.zbc :where(legend) {
  padding: 0;
}

.zbc :where(a) {
  color: var(--zbc-lime-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc :where(a):hover {
  color: var(--zbc-lime-text);
  text-decoration: underline;
}

.zbc :where(strong, b) {
  font-weight: 700;
}

.zbc ::selection {
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
}

.zbc :focus {
  outline: none;
}

.zbc :focus-visible {
  outline: var(--zbc-focus-outline);
  outline-offset: 2px;
  box-shadow: var(--zbc-ring);
  border-radius: var(--zbc-radius-xs);
}

.zbc [hidden] {
  display: none !important;
}

/* Typography ----------------------------------------------------------------- */
.zbc-h1,
.zbc-h2,
.zbc-h3,
.zbc-h4 {
  font-weight: 800;
  line-height: var(--zbc-lh-tight);
  letter-spacing: var(--zbc-tracking-tight);
  color: var(--zbc-text);
  text-wrap: balance;
}

.zbc-h1 { font-size: var(--zbc-fs-3xl); }
.zbc-h2 { font-size: var(--zbc-fs-2xl); }
.zbc-h3 { font-size: var(--zbc-fs-xl); letter-spacing: -0.02em; }
.zbc-h4 { font-size: var(--zbc-fs-lg); letter-spacing: -0.01em; }

.zbc-h1:focus,
.zbc-h2:focus,
.zbc [tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

.zbc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--zbc-s2);
  font-size: var(--zbc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
  color: var(--zbc-lime-text);
}

.zbc-eyebrow--muted { color: var(--zbc-muted); }

.zbc-lead {
  font-size: var(--zbc-fs-lg);
  color: var(--zbc-text-2);
  max-width: 60ch;
  text-wrap: pretty;
}

.zbc-text { color: var(--zbc-text); }
.zbc-text-2 { color: var(--zbc-text-2); }
.zbc-muted { color: var(--zbc-muted); }
.zbc-small { font-size: var(--zbc-fs-sm); }
.zbc-xsmall { font-size: var(--zbc-fs-xs); }
.zbc-strong { font-weight: 700; }
.zbc-center { text-align: center; }
.zbc-nowrap { white-space: nowrap; }

.zbc-num,
.zbc-price,
.zbc-date {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" on, "lnum" on;
}

.zbc-price {
  display: inline-flex;
  align-items: flex-start;
  gap: 1px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--zbc-text);
}

.zbc-price__sym,
.zbc-price__cents {
  font-size: 0.5em;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.zbc-price__sym { color: var(--zbc-text-2); margin-right: 1px; }
.zbc-price--xl { font-size: clamp(2.5rem, 6vw + 1rem, 3.5rem); }
.zbc-price--lg { font-size: 2.25rem; }
.zbc-price--md { font-size: 1.5rem; }

.zbc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--zbc-s1);
  min-height: var(--zbc-touch);
  padding: 0;
  border: 0;
  background: none;
  color: var(--zbc-lime-text);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.zbc-link:hover { color: var(--zbc-lime-text); text-decoration: underline; }
.zbc-link--muted { color: var(--zbc-text-2); font-weight: 600; }
.zbc-link--muted:hover { color: var(--zbc-text); }
.zbc-link--inline { min-height: 0; display: inline; }

.zbc-divider {
  height: 1px;
  border: 0;
  margin: var(--zbc-s5) 0;
  background: var(--zbc-line);
}

.zbc-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  display: inline-block;
  vertical-align: -0.25em;
}

.zbc-icon--sm { width: 1em; height: 1em; vertical-align: -0.125em; }
.zbc-icon--lg { width: 1.5em; height: 1.5em; }

/* Utilities ------------------------------------------------------------------ */
.zbc-sr-only,
.zbc-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.zbc-stack { display: flex; flex-direction: column; gap: var(--zbc-s4); }
.zbc-stack--sm { gap: var(--zbc-s2); }
.zbc-stack--lg { gap: var(--zbc-s6); }
.zbc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zbc-s3); }
.zbc-row--sm { gap: var(--zbc-s2); }
.zbc-row--between { justify-content: space-between; }
.zbc-row--end { justify-content: flex-end; }
.zbc-grow { flex: 1 1 auto; min-width: 0; }
.zbc-mt-0 { margin-top: 0 !important; }
.zbc-mt-2 { margin-top: var(--zbc-s2); }
.zbc-mt-4 { margin-top: var(--zbc-s4); }
.zbc-mt-5 { margin-top: var(--zbc-s5); }
.zbc-mt-6 { margin-top: var(--zbc-s6); }

.zbc-skip {
  position: absolute;
  z-index: 100;
  top: calc(var(--zbc-safe-top) + var(--zbc-s2));
  left: var(--zbc-s2);
  padding: var(--zbc-s3) var(--zbc-s4);
  border-radius: var(--zbc-pill);
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--zbc-s6)));
  transition: transform var(--zbc-dur) var(--zbc-ease-out);
}

.zbc-skip:focus,
.zbc-skip:focus-visible {
  transform: none;
  color: var(--zbc-lime-ink);
}

.zbc-noscript {
  margin: var(--zbc-s6) auto;
  padding: var(--zbc-s5);
  max-width: 560px;
  border: 1px solid var(--zbc-line-strong);
  border-radius: var(--zbc-radius);
  background: var(--zbc-surface);
  color: var(--zbc-text-2);
}

/* 02 App chrome ---------------------------------------------------------------- */
.zbc-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: var(--zbc-safe-top);
  background: var(--zbc-glass);
  border-bottom: 1px solid var(--zbc-line);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}

.zbc-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--zbc-s4);
  height: var(--zbc-bar-h);
  max-width: var(--zbc-max);
  margin: 0 auto;
  padding: 0 var(--zbc-gutter);
}

.zbc-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--zbc-s2);
  margin-left: auto;
}

/* "Back to store": the one obvious way out of the club and back to the normal site. Always visible in the
   header (the logo also returns to the store); on narrow screens the label shortens to "Store". */
.zbc-topbar__shop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--zbc-touch);
  padding: 0 var(--zbc-s3);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-pill);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.zbc-topbar__shop:hover {
  color: var(--zbc-text);
  background: var(--zbc-surface-hover);
  text-decoration: none;
}

.zbc-topbar__shop-icon,
.zbc-topbar__shop-icon svg {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.zbc-topbar__shop-short {
  display: none;
}

@media (max-width: 640px) {
  .zbc-topbar__shop-text {
    display: none;
  }
  .zbc-topbar__shop-short {
    display: inline;
  }
}

/* Narrow phones: the header holds logo + CLUB + toggle + Store + account, so every item tightens up a notch
   (the logo drops to 28 px, buttons lose some padding) and below 400 px the store link is its arrow only. */
@media (max-width: 480px) {
  .zbc-topbar__inner { gap: var(--zbc-s3); }
  .zbc-topbar__actions { gap: 6px; }
  .zbc-wordmark { gap: var(--zbc-s2); }
  .zbc-logo { height: 28px !important; }
  .zbc-wordmark__club { padding: 2px 6px; font-size: 0.62rem; }
  .zbc-topbar__shop { padding: 0 10px; }
  .zbc-topbar__actions .zbc-btn--sm { padding: 0 10px; }
}

/* Signed-out header has a "Sign in" button instead of the avatar, which is what tips a 390 px phone over;
   guests get the arrow on its own there (labelled), members keep "← Store". */
@media (max-width: 400px) {
  .zbc-body--guest .zbc-topbar__shop { width: var(--zbc-touch); padding: 0; justify-content: center; }
  .zbc-body--guest .zbc-topbar__shop-short { display: none; }
}

/* Wordmark. With a logo configured (Settings → Branding) the real Zamplebox logo is shown, one file per
   theme; otherwise a plain type wordmark. Nothing here invents a mark for the brand. */
.zbc-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--zbc-s3);
  min-height: var(--zbc-touch);
  color: var(--zbc-text);
  text-decoration: none;
  white-space: nowrap;
}

.zbc-wordmark:hover { color: var(--zbc-text); text-decoration: none; }

.zbc-logo { display: none; width: auto; max-width: 180px; object-fit: contain; }
:root:not([data-theme="dark"]) .zbc-logo--light { display: block; }
[data-theme="dark"] .zbc-logo--dark { display: block; }

.zbc-wordmark__club {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
}

/* Light / dark toggle */
.zbc-theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-pill);
  background: var(--zbc-surface-2);
  color: var(--zbc-text-2);
  cursor: pointer;
  transition: background var(--zbc-dur-fast) var(--zbc-ease), color var(--zbc-dur-fast) var(--zbc-ease), border-color var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-theme-toggle:hover { background: var(--zbc-surface-hover); color: var(--zbc-text); border-color: var(--zbc-line-strong); }
.zbc-theme-toggle:focus-visible { outline: none; box-shadow: var(--zbc-ring); }

.zbc-theme-toggle__icon {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition: opacity var(--zbc-dur) var(--zbc-ease), transform var(--zbc-dur-slow) var(--zbc-ease-out);
}

/* sun: a ring with rays; moon: a crescent — both drawn with currentColor */
.zbc-theme-toggle__icon--sun {
  background:
    radial-gradient(circle at center, currentColor 0 4.5px, transparent 5px),
    conic-gradient(from 0deg, currentColor 0 12deg, transparent 12deg 45deg, currentColor 45deg 57deg, transparent 57deg 90deg, currentColor 90deg 102deg, transparent 102deg 135deg, currentColor 135deg 147deg, transparent 147deg 180deg, currentColor 180deg 192deg, transparent 192deg 225deg, currentColor 225deg 237deg, transparent 237deg 270deg, currentColor 270deg 282deg, transparent 282deg 315deg, currentColor 315deg 327deg, transparent 327deg 360deg);
  -webkit-mask: radial-gradient(circle at center, #000 0 4.5px, transparent 5px 6.5px, #000 7px 9px, transparent 9.5px);
  mask: radial-gradient(circle at center, #000 0 4.5px, transparent 5px 6.5px, #000 7px 9px, transparent 9.5px);
  border-radius: 50%;
}

.zbc-theme-toggle__icon--moon {
  border-radius: 50%;
  background: currentColor;
  -webkit-mask: radial-gradient(circle at 65% 35%, transparent 0 7px, #000 7.5px);
  mask: radial-gradient(circle at 65% 35%, transparent 0 7px, #000 7.5px);
}

:root:not([data-theme="dark"]) .zbc-theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root:not([data-theme="dark"]) .zbc-theme-toggle__icon--moon { opacity: 1; transform: none; }
[data-theme="dark"] .zbc-theme-toggle__icon--sun { opacity: 1; transform: none; }
[data-theme="dark"] .zbc-theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

.zbc-wordmark__text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.zbc-wordmark__text strong {
  font-weight: 800;
  color: var(--zbc-brand);
}

.zbc-wordmark__text em {
  display: inline-block;
  margin-left: var(--zbc-s1);
  padding: 2px 8px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
  vertical-align: 2px;
}

@media (max-width: 359px) {
  .zbc-wordmark__text em { display: none; }
}

/* Primary nav (desktop) */
.zbc-nav {
  display: none;
  align-items: center;
  gap: var(--zbc-s1);
  margin-left: var(--zbc-s4);
}

.zbc-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--zbc-s3);
  border-radius: var(--zbc-pill);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--zbc-dur-fast) var(--zbc-ease), background-color var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-nav a:hover {
  color: var(--zbc-text);
  background: var(--zbc-surface-hover);
}

.zbc-nav a[aria-current="page"],
.zbc-nav a.is-active {
  color: var(--zbc-lime-text);
  background: var(--zbc-lime-wash);
}

@media (min-width: 900px) {
  .zbc-nav { display: flex; }
}

.zbc-avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--zbc-surface-3), var(--zbc-surface-2));
  border: 1px solid var(--zbc-line-strong);
  color: var(--zbc-lime-text);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  transition: box-shadow var(--zbc-dur) var(--zbc-ease), border-color var(--zbc-dur) var(--zbc-ease);
}

.zbc-avatar:hover {
  color: var(--zbc-lime-text);
  border-color: var(--zbc-lime-text);
  box-shadow: var(--zbc-glow);
}

.zbc-avatar--lg { width: 56px; height: 56px; font-size: var(--zbc-fs-xl); }

/* Bottom tab bar (mobile) */
.zbc-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: calc(var(--zbc-tabbar-h) + var(--zbc-safe-bottom));
  padding: var(--zbc-s1) var(--zbc-s2) calc(var(--zbc-s1) + var(--zbc-safe-bottom));
  background: var(--zbc-glass);
  border-top: 1px solid var(--zbc-line);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}

.zbc-tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  border-radius: var(--zbc-radius-sm);
  color: var(--zbc-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-tabbar a:hover { color: var(--zbc-text); }

.zbc-tabbar__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 26px;
  border-radius: var(--zbc-pill);
  transition: background-color var(--zbc-dur) var(--zbc-ease);
}

.zbc-tabbar__icon svg { width: 22px; height: 22px; }

.zbc-tabbar a[aria-current="page"],
.zbc-tabbar a.is-active {
  color: var(--zbc-lime-text);
}

.zbc-tabbar a[aria-current="page"] .zbc-tabbar__icon,
.zbc-tabbar a.is-active .zbc-tabbar__icon {
  background: var(--zbc-lime-wash);
}

@media (min-width: 900px) {
  .zbc-tabbar { display: none; }
}

/* Main + containers */
.zbc-main {
  flex: 1 0 auto;
  width: 100%;
  /* Slide-in and shake animations briefly push content past the right edge; on phones Chrome and Safari
     widen the layout viewport for that instant and never shrink it back, so the page could be nudged
     sideways. `clip` cuts that off without creating a scroll container (sticky bars keep working). */
  overflow-x: clip;
}

.zbc-app {
  width: 100%;
  max-width: var(--zbc-max);
  margin: 0 auto;
  padding: var(--zbc-s5) var(--zbc-gutter) var(--zbc-s8);
}

@media (min-width: 900px) {
  .zbc-app { padding-top: var(--zbc-s7); }
}

.zbc-container { width: 100%; max-width: var(--zbc-max); margin: 0 auto; }
.zbc-container--narrow { max-width: 760px; }
.zbc-container--form { max-width: 560px; }

.zbc-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s3);
  margin-bottom: var(--zbc-s6);
}

.zbc-section {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s4);
}

.zbc-section + .zbc-section { margin-top: var(--zbc-s7); }

.zbc-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zbc-s2) var(--zbc-s4);
}

.zbc-section__title {
  font-size: var(--zbc-fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.zbc-section__hint {
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-sm);
}

/* Two-column layout: content + sticky aside */
.zbc-layout {
  display: grid;
  gap: var(--zbc-s5);
  align-items: start;
}

@media (min-width: 900px) {
  .zbc-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--zbc-s6); }
  .zbc-layout__aside {
    position: sticky;
    top: calc(var(--zbc-topbar-offset) + var(--zbc-s5));
  }
}

@media (min-width: 1200px) {
  .zbc-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--zbc-s7); }
}

/* Footer */
.zbc-footer {
  width: 100%;
  max-width: var(--zbc-max);
  margin: 0 auto;
  padding: var(--zbc-s6) var(--zbc-gutter) calc(var(--zbc-s6) + var(--zbc-bottom-offset));
  border-top: 1px solid var(--zbc-line);
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-sm);
}

.zbc-footer__warning {
  margin-bottom: var(--zbc-s4);
  padding: var(--zbc-s3) var(--zbc-s4);
  border: 1px solid var(--zbc-line-strong);
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-surface);
  color: var(--zbc-text);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}

.zbc-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--zbc-s4);
}

.zbc-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--zbc-touch);
  color: var(--zbc-text-2);
  font-weight: 600;
  text-decoration: none;
}

.zbc-footer__links a:hover { color: var(--zbc-text); text-decoration: underline; }

.zbc-footer__legal {
  margin-top: var(--zbc-s2);
  max-width: 72ch;
  font-size: var(--zbc-fs-xs);
}

/* 03 Buttons ------------------------------------------------------------------- */
.zbc-btn {
  --zbc-btn-bg: var(--zbc-surface-3);
  --zbc-btn-fg: var(--zbc-text);
  --zbc-btn-border: var(--zbc-line-strong);
  --zbc-btn-hover-bg: var(--zbc-surface-hover);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zbc-s2);
  min-height: var(--zbc-touch);
  padding: 0 var(--zbc-s5);
  border: 1px solid var(--zbc-btn-border);
  border-radius: var(--zbc-pill);
  background: var(--zbc-btn-bg);
  color: var(--zbc-btn-fg);
  font-size: var(--zbc-fs-md);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--zbc-dur) var(--zbc-ease),
    border-color var(--zbc-dur) var(--zbc-ease),
    color var(--zbc-dur) var(--zbc-ease),
    box-shadow var(--zbc-dur) var(--zbc-ease),
    transform var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-btn:hover {
  background: var(--zbc-btn-hover-bg);
  color: var(--zbc-btn-fg);
}

.zbc-btn:active { transform: translateY(1px) scale(0.99); }

.zbc-btn:focus-visible {
  border-radius: var(--zbc-pill);
  box-shadow: var(--zbc-ring);
}

.zbc-btn .zbc-icon { width: 1.15em; height: 1.15em; }

.zbc-btn--primary {
  --zbc-btn-bg: var(--zbc-lime);
  --zbc-btn-fg: var(--zbc-lime-ink);
  --zbc-btn-border: var(--zbc-lime);
  --zbc-btn-hover-bg: var(--zbc-lime-2);
  box-shadow: 0 8px 24px var(--zbc-lime-wash);
}

.zbc-btn--primary:hover { box-shadow: var(--zbc-glow); }
.zbc-btn--primary:focus-visible { box-shadow: var(--zbc-ring), var(--zbc-glow); }

.zbc-btn--secondary {
  --zbc-btn-bg: var(--zbc-surface-2);
  --zbc-btn-border: var(--zbc-line-strong);
}

.zbc-btn--brand {
  --zbc-btn-bg: var(--zbc-brand);
  --zbc-btn-fg: var(--zbc-lime-ink);
  --zbc-btn-border: var(--zbc-brand);
  --zbc-btn-hover-bg: var(--zbc-lime-2);
}

.zbc-btn--ghost {
  --zbc-btn-bg: transparent;
  --zbc-btn-fg: var(--zbc-text-2);
  --zbc-btn-border: transparent;
  --zbc-btn-hover-bg: var(--zbc-surface-hover);
}

.zbc-btn--ghost:hover { --zbc-btn-fg: var(--zbc-text); }

.zbc-btn--outline {
  --zbc-btn-bg: transparent;
  --zbc-btn-border: var(--zbc-line-strong);
  --zbc-btn-hover-bg: var(--zbc-surface-hover);
}

.zbc-btn--danger {
  --zbc-btn-bg: var(--zbc-danger-wash);
  --zbc-btn-fg: var(--zbc-danger);
  --zbc-btn-border: var(--zbc-danger-wash);
  --zbc-btn-hover-bg: var(--zbc-danger-wash);
}

.zbc-btn--danger:hover { --zbc-btn-border: var(--zbc-danger); }

.zbc-btn--sm {
  min-height: 36px;
  padding: 0 var(--zbc-s3);
  gap: 6px;
  font-size: var(--zbc-fs-sm);
}

.zbc-btn--sm::after {
  /* keeps a 44px hit area while the button looks compact */
  content: "";
  position: absolute;
  inset: -4px;
}

.zbc-btn--lg {
  min-height: 56px;
  padding: 0 var(--zbc-s6);
  font-size: var(--zbc-fs-lg);
}

.zbc-btn--block {
  display: flex;
  width: 100%;
}

.zbc-btn--icon {
  width: var(--zbc-touch);
  min-width: var(--zbc-touch);
  padding: 0;
}

.zbc-btn--icon.zbc-btn--sm {
  width: 36px;
  min-width: 36px;
}

.zbc-btn--icon .zbc-icon { width: 20px; height: 20px; }

.zbc-btn:disabled,
.zbc-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.zbc-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.zbc-btn.is-loading > * { visibility: hidden; }

.zbc-btn.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid var(--zbc-btn-fg);
  border-right-color: transparent;
  animation: zbc-spin 0.7s linear infinite;
}

.zbc-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s2);
}

.zbc-btn-group--end { justify-content: flex-end; }
.zbc-btn-group--stretch > .zbc-btn { flex: 1 1 0; }

/* 04 Badges, pills, chips, category accents ------------------------------------------ */

/* Category accent carrier: any element with data-cat / zbc-cat--* exposes --zbc-accent */
[data-cat="fruit"],
.zbc-cat--fruit { --zbc-accent: var(--zbc-cat-fruit); }
[data-cat="dessert"],
.zbc-cat--dessert { --zbc-accent: var(--zbc-cat-dessert); }
[data-cat="tobacco"],
.zbc-cat--tobacco { --zbc-accent: var(--zbc-cat-tobacco); }
[data-cat="menthol"],
.zbc-cat--menthol { --zbc-accent: var(--zbc-cat-menthol); }

.zbc-badge {
  --zbc-badge-fg: var(--zbc-text-2);
  --zbc-badge-bg: var(--zbc-surface-3);
  --zbc-badge-border: transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 10px;
  border: 1px solid var(--zbc-badge-border);
  border-radius: var(--zbc-pill);
  background: var(--zbc-badge-bg);
  color: var(--zbc-badge-fg);
  font-size: var(--zbc-fs-xs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zbc-badge .zbc-icon { width: 13px; height: 13px; }
.zbc-badge--caps { text-transform: uppercase; letter-spacing: var(--zbc-tracking-caps); font-size: 0.6875rem; }
.zbc-badge--lime { --zbc-badge-bg: var(--zbc-lime); --zbc-badge-fg: var(--zbc-lime-ink); }
.zbc-badge--lime-soft { --zbc-badge-bg: var(--zbc-lime-wash); --zbc-badge-fg: var(--zbc-lime-text); }
.zbc-badge--brand { --zbc-badge-bg: var(--zbc-brand-wash); --zbc-badge-fg: var(--zbc-ok); }
.zbc-badge--ok { --zbc-badge-bg: var(--zbc-ok-wash); --zbc-badge-fg: var(--zbc-ok); }
.zbc-badge--warn { --zbc-badge-bg: var(--zbc-warn-wash); --zbc-badge-fg: var(--zbc-warn); }
.zbc-badge--danger { --zbc-badge-bg: var(--zbc-danger-wash); --zbc-badge-fg: var(--zbc-danger); }
.zbc-badge--info { --zbc-badge-bg: var(--zbc-info-wash); --zbc-badge-fg: var(--zbc-info); }
.zbc-badge--violet { --zbc-badge-bg: var(--zbc-violet-wash); --zbc-badge-fg: var(--zbc-violet); }
.zbc-badge--outline { --zbc-badge-bg: transparent; --zbc-badge-border: var(--zbc-line-strong); }
.zbc-badge--glass {
  --zbc-badge-bg: var(--zbc-glass);
  --zbc-badge-fg: var(--zbc-text);
  --zbc-badge-border: var(--zbc-line-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.zbc-badge--cat {
  --zbc-badge-fg: var(--zbc-accent, var(--zbc-text-2));
  --zbc-badge-bg: var(--zbc-surface-3);
  --zbc-badge-bg: color-mix(in srgb, var(--zbc-accent, var(--zbc-muted)) 15%, transparent);
  --zbc-badge-border: color-mix(in srgb, var(--zbc-accent, var(--zbc-muted)) 28%, transparent);
}

.zbc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--zbc-accent, var(--zbc-muted));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zbc-accent, var(--zbc-muted)) 22%, transparent);
}

/* Chip: small interactive pill (filters, notes, removable tokens) */
.zbc-chip {
  --zbc-chip-bg: var(--zbc-surface-2);
  --zbc-chip-fg: var(--zbc-text-2);
  --zbc-chip-border: var(--zbc-line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--zbc-s3);
  border: 1px solid var(--zbc-chip-border);
  border-radius: var(--zbc-pill);
  background: var(--zbc-chip-bg);
  color: var(--zbc-chip-fg);
  font-size: var(--zbc-fs-sm);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--zbc-dur-fast) var(--zbc-ease),
    border-color var(--zbc-dur-fast) var(--zbc-ease),
    color var(--zbc-dur-fast) var(--zbc-ease),
    box-shadow var(--zbc-dur) var(--zbc-ease),
    transform var(--zbc-dur-fast) var(--zbc-ease);
}

button.zbc-chip { cursor: pointer; }
button.zbc-chip::after { content: ""; position: absolute; inset: -4px 0; }
button.zbc-chip:hover { --zbc-chip-border: var(--zbc-muted); --zbc-chip-fg: var(--zbc-text); }
button.zbc-chip:active { transform: scale(0.97); }
.zbc-chip:focus-visible { border-radius: var(--zbc-pill); }
.zbc-chip .zbc-icon { width: 15px; height: 15px; }

.zbc-chip--static { min-height: 28px; font-size: var(--zbc-fs-xs); padding: 0 10px; }
.zbc-chip--selected,
.zbc-chip[aria-pressed="true"] {
  --zbc-chip-bg: var(--zbc-lime-wash);
  --zbc-chip-fg: var(--zbc-lime-text);
  --zbc-chip-border: color-mix(in srgb, var(--zbc-lime-text) 55%, transparent);
}

.zbc-chip--danger {
  --zbc-chip-bg: var(--zbc-danger-wash);
  --zbc-chip-fg: var(--zbc-danger);
  --zbc-chip-border: transparent;
}

.zbc-chip__remove {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.zbc-chip__remove:hover { background: var(--zbc-surface-hover); }
.zbc-chip__remove .zbc-icon { width: 14px; height: 14px; }

.zbc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s2);
}

.zbc-chips--tight { gap: 6px; }

/* 05 Cards, panels, stat tiles, notices ------------------------------------------ */
.zbc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s4);
  padding: var(--zbc-s5);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight), var(--zbc-shadow-sm);
  min-width: 0;
}

@media (min-width: 640px) {
  .zbc-card { padding: var(--zbc-s5) var(--zbc-s6); }
}

.zbc-card--flush { padding: 0; overflow: hidden; }
.zbc-card--tight { padding: var(--zbc-s4); gap: var(--zbc-s3); }
.zbc-card--glass {
  background: var(--zbc-glass);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
}
.zbc-card--muted { background: var(--zbc-canvas-2); box-shadow: none; }
.zbc-card--highlight {
  border-color: var(--zbc-lime-wash);
  box-shadow: var(--zbc-card-highlight), var(--zbc-glow);
}

.zbc-card--interactive {
  cursor: pointer;
  transition: transform var(--zbc-dur) var(--zbc-ease-out), border-color var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--zbc-line-strong);
  box-shadow: var(--zbc-card-highlight), var(--zbc-shadow);
}

.zbc-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--zbc-s3);
}

.zbc-card__heading {
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  min-width: 0;
}

.zbc-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
}

.zbc-card__icon .zbc-icon { width: 20px; height: 20px; }

.zbc-card__title {
  font-size: var(--zbc-fs-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.zbc-card__subtitle {
  margin-top: 2px;
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-sm);
}

.zbc-card__body { display: flex; flex-direction: column; gap: var(--zbc-s4); min-width: 0; }

.zbc-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zbc-s3);
  padding-top: var(--zbc-s4);
  border-top: 1px solid var(--zbc-line);
}

/* Stat tiles */
.zbc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zbc-s3);
}

@media (min-width: 900px) {
  .zbc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--zbc-s4); }
}

.zbc-stat {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s1);
  padding: var(--zbc-s4);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight);
  min-width: 0;
}

.zbc-stat__label {
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
}

.zbc-stat__value {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--zbc-text);
  overflow-wrap: anywhere;
}

.zbc-stat__meta { color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); }
.zbc-stat--accent { border-color: var(--zbc-lime-wash); }
.zbc-stat--accent .zbc-stat__value { color: var(--zbc-lime-text); }

/* Notices / alerts */
.zbc-notice {
  --zbc-notice-fg: var(--zbc-info);
  --zbc-notice-bg: var(--zbc-info-wash);
  display: flex;
  align-items: flex-start;
  gap: var(--zbc-s3);
  padding: var(--zbc-s3) var(--zbc-s4);
  border: 1px solid transparent;
  border-left: 3px solid var(--zbc-notice-fg);
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-notice-bg);
  color: var(--zbc-text);
  font-size: var(--zbc-fs-sm);
}

.zbc-notice > .zbc-icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--zbc-notice-fg);
}

.zbc-notice__body { display: flex; flex-direction: column; gap: var(--zbc-s1); min-width: 0; flex: 1; }
.zbc-notice__title { font-weight: 800; color: var(--zbc-text); }
.zbc-notice__actions { display: flex; flex-wrap: wrap; gap: var(--zbc-s2); margin-top: var(--zbc-s2); }
.zbc-notice--ok { --zbc-notice-fg: var(--zbc-ok); --zbc-notice-bg: var(--zbc-ok-wash); }
.zbc-notice--warn { --zbc-notice-fg: var(--zbc-warn); --zbc-notice-bg: var(--zbc-warn-wash); }
.zbc-notice--danger { --zbc-notice-fg: var(--zbc-danger); --zbc-notice-bg: var(--zbc-danger-wash); }
.zbc-notice--lime { --zbc-notice-fg: var(--zbc-lime-text); --zbc-notice-bg: var(--zbc-lime-wash); }
.zbc-notice--neutral { --zbc-notice-fg: var(--zbc-muted); --zbc-notice-bg: var(--zbc-surface-2); }

/* Nicotine / legal warning block */
.zbc-warning {
  padding: var(--zbc-s3) var(--zbc-s4);
  border: 2px solid var(--zbc-text);
  border-radius: var(--zbc-radius-xs);
  background: var(--zbc-canvas);
  color: var(--zbc-text);
  font-size: var(--zbc-fs-sm);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}

/* 06 Forms ------------------------------------------------------------------------ */
.zbc-form { display: flex; flex-direction: column; gap: var(--zbc-s4); }

.zbc-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s3);
}

@media (min-width: 640px) {
  .zbc-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--zbc-s3) var(--zbc-s3); }
  .zbc-form-grid > * { grid-column: span 6; }
  .zbc-form-grid > .zbc-span-3 { grid-column: span 3; }
  .zbc-form-grid > .zbc-span-2 { grid-column: span 2; }
  .zbc-form-grid > .zbc-span-4 { grid-column: span 4; }
}

.zbc-fieldset { display: flex; flex-direction: column; gap: var(--zbc-s3); }

.zbc-legend,
.zbc-fieldset > legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zbc-s1) var(--zbc-s3);
  width: 100%;
  margin-bottom: var(--zbc-s3);
  font-size: var(--zbc-fs-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.zbc-legend__hint {
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
}

.zbc-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.zbc-field__label {
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 700;
}

.zbc-field__optional { color: var(--zbc-muted); font-weight: 500; }

.zbc-field__hint {
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
}

.zbc-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--zbc-danger);
  font-size: var(--zbc-fs-sm);
  font-weight: 600;
}

.zbc-field__error:empty { display: none; }
.zbc-field__error .zbc-icon { width: 16px; height: 16px; margin-top: 2px; }

.zbc-input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0 var(--zbc-s4);
  border: 1px solid var(--zbc-line-strong);
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-canvas-2);
  color: var(--zbc-text);
  font-size: var(--zbc-fs-md); /* 16px: prevents iOS zoom */
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--zbc-dur-fast) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease), background-color var(--zbc-dur) var(--zbc-ease);
}

textarea.zbc-input { min-height: 112px; padding: var(--zbc-s3) var(--zbc-s4); resize: vertical; }
.zbc-input::placeholder { color: var(--zbc-muted); opacity: 1; }
.zbc-input:hover { border-color: var(--zbc-muted); }

.zbc-input:focus,
.zbc-input:focus-visible {
  border-color: var(--zbc-lime-text);
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-surface);
  box-shadow: 0 0 0 3px var(--zbc-lime-wash);
  outline: var(--zbc-focus-outline);
}

.zbc-input:disabled { opacity: 0.55; cursor: not-allowed; }

.zbc-input:-webkit-autofill,
.zbc-input:-webkit-autofill:hover,
.zbc-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--zbc-text);
  caret-color: var(--zbc-text);
  box-shadow: 0 0 0 1000px var(--zbc-surface-2) inset;
  transition: background-color 9999s ease-out 0s;
}

.zbc-input[aria-invalid="true"],
.zbc-field.is-invalid .zbc-input {
  border-color: var(--zbc-danger);
  background: var(--zbc-canvas-2);
}

.zbc-input[aria-invalid="true"]:focus,
.zbc-field.is-invalid .zbc-input:focus {
  box-shadow: 0 0 0 3px var(--zbc-danger-wash);
}

.zbc-field.is-valid .zbc-input { border-color: var(--zbc-brand); }

/* Select: native control with a CSS-drawn chevron */
.zbc-select { position: relative; display: block; }
.zbc-select .zbc-input { padding-right: var(--zbc-s7); cursor: pointer; }
.zbc-select .zbc-input option { background: var(--zbc-surface); color: var(--zbc-text); }
.zbc-select .zbc-input option:disabled { color: var(--zbc-muted); }

.zbc-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--zbc-s4);
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--zbc-muted);
  border-bottom: 2px solid var(--zbc-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Floating label variant: <div class="zbc-field zbc-field--float"><input placeholder=" "><label></div> */
.zbc-field--float { gap: 0; }
.zbc-field--float .zbc-input { min-height: 56px; padding-top: 20px; padding-bottom: 4px; }
.zbc-field--float .zbc-field__label {
  position: absolute;
  top: 0;
  left: var(--zbc-s4);
  right: var(--zbc-s4);
  height: 56px;
  display: flex;
  align-items: center;
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-md);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--zbc-dur) var(--zbc-ease-out), color var(--zbc-dur) var(--zbc-ease);
}

.zbc-field--float .zbc-input::placeholder { color: transparent; }
.zbc-field--float .zbc-input:focus::placeholder { color: var(--zbc-muted); }

.zbc-field--float .zbc-input:focus ~ .zbc-field__label,
.zbc-field--float .zbc-input:not(:placeholder-shown) ~ .zbc-field__label,
.zbc-field--float .zbc-input:-webkit-autofill ~ .zbc-field__label,
.zbc-field--float.is-filled .zbc-field__label,
.zbc-field--float .zbc-select ~ .zbc-field__label {
  transform: translateY(-11px) scale(0.78);
  color: var(--zbc-text-2);
  font-weight: 700;
}

.zbc-field--float .zbc-input:focus ~ .zbc-field__label { color: var(--zbc-lime-text); }
.zbc-field--float.is-invalid .zbc-field__label,
.zbc-field--float.is-invalid .zbc-input:focus ~ .zbc-field__label { color: var(--zbc-danger); }
.zbc-field.is-invalid .zbc-field__hint { display: none; }
.zbc-field--float .zbc-field__hint,
.zbc-field--float .zbc-field__error { margin-top: 6px; }

/* Input with trailing button/adornment */
.zbc-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--zbc-s2);
}

.zbc-input-group > .zbc-input,
.zbc-input-group > .zbc-field { flex: 1 1 auto; min-width: 0; }
.zbc-input-group > .zbc-btn { flex: none; min-height: 50px; border-radius: var(--zbc-radius-sm); }

.zbc-input-adorn {
  position: absolute;
  top: 0;
  right: var(--zbc-s1);
  height: 56px;
  display: flex;
  align-items: center;
}

.zbc-field--adorned .zbc-input { padding-right: 64px; }

/* Checkbox / radio row: <label class="zbc-check"><input class="zbc-check__input"><span class="zbc-check__box"></span><span>text</span></label> */
.zbc-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--zbc-s3);
  min-height: var(--zbc-touch);
  padding: 10px 0;
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  line-height: 1.45;
  cursor: pointer;
}

.zbc-check__input {
  position: absolute;
  top: 10px;
  left: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.zbc-check__box {
  position: relative;
  pointer-events: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1.5px solid var(--zbc-muted);
  border-radius: 7px;
  background: var(--zbc-canvas-2);
  transition: background-color var(--zbc-dur-fast) var(--zbc-ease), border-color var(--zbc-dur-fast) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-check__box::after {
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border-right: 2.5px solid var(--zbc-lime-ink);
  border-bottom: 2.5px solid var(--zbc-lime-ink);
  transform: rotate(45deg) scale(0);
  transition: transform var(--zbc-dur) var(--zbc-ease-out);
}

.zbc-check--radio .zbc-check__box { border-radius: 50%; }
.zbc-check--radio .zbc-check__box::after {
  width: 10px;
  height: 10px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--zbc-lime-ink);
  transform: scale(0);
}

.zbc-check:hover .zbc-check__box { border-color: var(--zbc-text-2); }
.zbc-check__input:checked + .zbc-check__box { background: var(--zbc-lime); border-color: var(--zbc-lime-text); }
.zbc-check__input:checked + .zbc-check__box::after { transform: rotate(45deg) scale(1); }
.zbc-check--radio .zbc-check__input:checked + .zbc-check__box::after { transform: scale(1); }
.zbc-check__input:focus-visible + .zbc-check__box { box-shadow: var(--zbc-ring); }
.zbc-check__input[aria-invalid="true"] + .zbc-check__box { border-color: var(--zbc-danger); box-shadow: 0 0 0 3px var(--zbc-danger-wash); }
.zbc-check__input:disabled + .zbc-check__box { opacity: 0.45; }
.zbc-check__label { padding-top: 2px; min-width: 0; }
.zbc-check__label a { font-weight: 700; }

/* Toggle switch: <label class="zbc-switch"><input type="checkbox" role="switch" class="zbc-switch__input"><span class="zbc-switch__track"></span><span class="zbc-switch__label"></span></label> */
.zbc-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--zbc-s3);
  min-height: var(--zbc-touch);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.zbc-switch__input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 46px;
  height: 28px;
  margin: -14px 0 0;
  opacity: 0;
  cursor: pointer;
}

.zbc-switch__track {
  position: relative;
  pointer-events: none;
  width: 46px;
  height: 28px;
  flex: none;
  border-radius: var(--zbc-pill);
  background: var(--zbc-surface-3);
  border: 1px solid var(--zbc-line-strong);
  transition: background-color var(--zbc-dur) var(--zbc-ease), border-color var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--zbc-text-2);
  box-shadow: var(--zbc-shadow-sm);
  transition: transform var(--zbc-dur) var(--zbc-ease-out), background-color var(--zbc-dur) var(--zbc-ease);
}

.zbc-switch__input:checked + .zbc-switch__track { background: var(--zbc-lime); border-color: var(--zbc-lime-text); }
.zbc-switch__input:checked + .zbc-switch__track::after { transform: translateX(18px); background: var(--zbc-lime-ink); }
.zbc-switch__input:focus-visible + .zbc-switch__track { box-shadow: var(--zbc-ring); }
.zbc-switch__input:disabled + .zbc-switch__track { opacity: 0.45; }
.zbc-switch:hover .zbc-switch__track { border-color: var(--zbc-muted); }

/* Range slider: <div class="zbc-range"><div class="zbc-range__head">…</div><input type="range" class="zbc-range__input" style="--zbc-fill:50%"><div class="zbc-range__ends">…</div></div> */
.zbc-range {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s1);
  transition: opacity var(--zbc-dur) var(--zbc-ease);
}

.zbc-range.is-disabled { opacity: 0.45; }

.zbc-range__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zbc-s3);
}

.zbc-range__label { font-weight: 700; color: var(--zbc-text); }

.zbc-range__value {
  padding: 2px 10px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zbc-range__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--zbc-s3);
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
  font-weight: 600;
}

.zbc-range__input {
  --zbc-fill: 50%;
  width: 100%;
  height: var(--zbc-touch);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.zbc-range__input:focus-visible { box-shadow: none; }
.zbc-range__input:disabled { cursor: not-allowed; }

.zbc-range__input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--zbc-pill);
  background:
    linear-gradient(90deg, var(--zbc-brand), var(--zbc-lime)) 0 0 / var(--zbc-fill) 100% no-repeat,
    var(--zbc-surface-3);
}

.zbc-range__input::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: 4px solid var(--zbc-lime);
  border-radius: 50%;
  background: var(--zbc-canvas);
  box-shadow: var(--zbc-shadow-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: transform var(--zbc-dur-fast) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-range__input:active::-webkit-slider-thumb { transform: scale(1.12); }
.zbc-range__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--zbc-ring), var(--zbc-glow); }

.zbc-range__input::-moz-range-track {
  height: 8px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-surface-3);
}

.zbc-range__input::-moz-range-progress {
  height: 8px;
  border-radius: var(--zbc-pill);
  background: linear-gradient(90deg, var(--zbc-brand), var(--zbc-lime));
}

.zbc-range__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 4px solid var(--zbc-lime);
  border-radius: 50%;
  background: var(--zbc-canvas);
  box-shadow: var(--zbc-shadow-sm);
}

.zbc-range__input:focus-visible::-moz-range-thumb { box-shadow: var(--zbc-ring), var(--zbc-glow); }

/* Segmented control: radio group styled as a pill switcher */
.zbc-segmented {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
}

.zbc-segmented__option {
  position: relative;
  display: flex;
  min-width: 0;
}

.zbc-segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.zbc-segmented__label {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: var(--zbc-s2) var(--zbc-s2);
  border-radius: var(--zbc-radius-sm);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
  transition: background-color var(--zbc-dur) var(--zbc-ease), color var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-segmented__label small {
  color: var(--zbc-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  transition: color var(--zbc-dur) var(--zbc-ease);
}

.zbc-segmented__option:hover .zbc-segmented__label { color: var(--zbc-text); background: var(--zbc-surface-2); }

.zbc-segmented__input:checked + .zbc-segmented__label {
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  box-shadow: 0 6px 18px var(--zbc-lime-wash);
}

.zbc-segmented__input:checked + .zbc-segmented__label small { color: var(--zbc-lime-ink); }
.zbc-segmented__input:focus-visible { box-shadow: none; }
.zbc-segmented__input:focus-visible + .zbc-segmented__label { box-shadow: var(--zbc-ring); }

/* Choice cards (radio / checkbox) */
.zbc-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s3);
}

.zbc-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zbc-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zbc-s2); }

@media (min-width: 640px) {
  .zbc-choices--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zbc-choices--3 { gap: var(--zbc-s3); }
}

@media (min-width: 900px) {
  .zbc-choices--auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .zbc-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zbc-choice {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
}

.zbc-choice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.zbc-choice__input:disabled { cursor: not-allowed; }
.zbc-choice__input:focus-visible { box-shadow: none; }

.zbc-choice__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--zbc-s2);
  min-width: 0;
  min-height: var(--zbc-touch);
  padding: var(--zbc-s4);
  padding-right: calc(var(--zbc-s4) + 30px);
  border: 1px solid var(--zbc-line-strong);
  border-radius: var(--zbc-radius);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight);
  pointer-events: none;
  overflow: hidden;
  transition:
    border-color var(--zbc-dur) var(--zbc-ease),
    box-shadow var(--zbc-dur) var(--zbc-ease),
    background-color var(--zbc-dur) var(--zbc-ease),
    transform var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-choice__body::before {
  /* optional category accent rail */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--zbc-accent, transparent);
  opacity: 0.9;
}

.zbc-choice__check {
  position: absolute;
  top: var(--zbc-s4);
  right: var(--zbc-s4);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--zbc-muted);
  border-radius: 50%;
  background: var(--zbc-canvas-2);
  transition: background-color var(--zbc-dur) var(--zbc-ease), border-color var(--zbc-dur) var(--zbc-ease);
}

.zbc-choice__check::after {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border-right: 2.5px solid var(--zbc-lime-ink);
  border-bottom: 2.5px solid var(--zbc-lime-ink);
  transform: rotate(45deg) scale(0);
  transition: transform var(--zbc-dur) var(--zbc-ease-out);
}

.zbc-choice--checkbox .zbc-choice__check { border-radius: 7px; }

.zbc-choice__title {
  display: flex;
  align-items: center;
  gap: var(--zbc-s2);
  color: var(--zbc-text);
  font-size: var(--zbc-fs-md);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.zbc-choice__desc { color: var(--zbc-muted); font-size: var(--zbc-fs-sm); line-height: 1.4; }
.zbc-choice__meta { margin-top: auto; }

.zbc-choice__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-surface-3);
  color: var(--zbc-accent, var(--zbc-text-2));
}

.zbc-choice__icon .zbc-icon { width: 20px; height: 20px; }

.zbc-choice:hover .zbc-choice__body { border-color: var(--zbc-muted); }
.zbc-choice:active .zbc-choice__body { transform: scale(0.995); }

.zbc-choice__input:checked + .zbc-choice__body {
  border-color: var(--zbc-lime-text);
  background: linear-gradient(180deg, var(--zbc-lime-wash), transparent 70%), var(--zbc-surface);
  box-shadow: var(--zbc-card-highlight), var(--zbc-glow);
}

.zbc-choice__input:checked + .zbc-choice__body .zbc-choice__desc,
.zbc-choice__input:checked + .zbc-choice__body .zbc-plan__per,
.zbc-choice__input:checked + .zbc-choice__body .zbc-plan__price small { color: var(--zbc-text-2); }
.zbc-choice__input:checked + .zbc-choice__body .zbc-choice__check { background: var(--zbc-lime); border-color: var(--zbc-lime-text); }
.zbc-choice__input:checked + .zbc-choice__body .zbc-choice__check::after { transform: rotate(45deg) scale(1); }
.zbc-choice__input:focus-visible + .zbc-choice__body { box-shadow: var(--zbc-ring), var(--zbc-card-highlight); }
.zbc-choice__input:disabled + .zbc-choice__body { opacity: 0.42; }
.zbc-choice__input[aria-invalid="true"] + .zbc-choice__body { border-color: var(--zbc-danger); }

/* compact centered variant (e.g. nicotine strength) */
.zbc-choice--center .zbc-choice__body {
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--zbc-s4) var(--zbc-s2);
  text-align: center;
}

.zbc-choice--center .zbc-choice__check { top: var(--zbc-s2); right: var(--zbc-s2); width: 18px; height: 18px; }
.zbc-choice--center .zbc-choice__check::after { width: 4px; height: 8px; border-width: 2px; }
.zbc-choice__big {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--zbc-text);
}

.zbc-choice__big small { font-size: 0.5em; letter-spacing: 0; color: var(--zbc-text-2); margin-left: 2px; }

/* Quantity stepper */
.zbc-qty {
  display: inline-flex;
  align-items: center;
  gap: var(--zbc-s1);
  padding: 4px;
  border: 1px solid var(--zbc-line-strong);
  border-radius: var(--zbc-pill);
  background: var(--zbc-canvas-2);
}

.zbc-qty__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--zbc-surface-3);
  color: var(--zbc-text);
  transition: background-color var(--zbc-dur-fast) var(--zbc-ease), transform var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-qty__btn:hover:not(:disabled) { background: var(--zbc-lime); color: var(--zbc-lime-ink); }
.zbc-qty__btn:active:not(:disabled) { transform: scale(0.94); }
.zbc-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.zbc-qty__btn:focus-visible { border-radius: 50%; }
.zbc-qty__btn .zbc-icon { width: 18px; height: 18px; }

.zbc-qty__value {
  min-width: 3ch;
  font-size: var(--zbc-fs-xl);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 07 Stepper and progress ------------------------------------------------------------ */
.zbc-stepper {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s3);
}

.zbc-stepper__list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: zbc-step;
}

.zbc-stepper__item {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.zbc-stepper__item + .zbc-stepper__item::before {
  /* connector from the previous index */
  content: "";
  position: absolute;
  top: 17px;
  right: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 2px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-line-strong);
}

.zbc-stepper__item.is-done + .zbc-stepper__item::before,
.zbc-stepper__item.is-done + .zbc-stepper__item.is-current::before {
  background: linear-gradient(90deg, var(--zbc-brand), var(--zbc-lime));
}

.zbc-stepper__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: var(--zbc-touch);
  padding: 0 2px;
  border: 0;
  border-radius: var(--zbc-radius-sm);
  background: none;
  color: var(--zbc-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: default;
}

button.zbc-stepper__btn:not(:disabled) { cursor: pointer; }
button.zbc-stepper__btn:not(:disabled):hover { color: var(--zbc-text); }
button.zbc-stepper__btn:disabled { opacity: 1; }

.zbc-stepper__index {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--zbc-line-strong);
  border-radius: 50%;
  background: var(--zbc-canvas);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--zbc-dur) var(--zbc-ease), border-color var(--zbc-dur) var(--zbc-ease), color var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-stepper__index .zbc-icon { width: 18px; height: 18px; }

.zbc-stepper__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zbc-stepper__item.is-done .zbc-stepper__index {
  border-color: var(--zbc-brand);
  background: var(--zbc-brand);
  color: var(--zbc-lime-ink);
}

.zbc-stepper__item.is-done .zbc-stepper__btn { color: var(--zbc-text-2); }

.zbc-stepper__item.is-current .zbc-stepper__index {
  border-color: var(--zbc-lime-text);
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  box-shadow: var(--zbc-glow);
}

.zbc-stepper__item.is-current .zbc-stepper__btn { color: var(--zbc-text); }

@media (min-width: 640px) {
  .zbc-stepper__btn { font-size: var(--zbc-fs-sm); }
}

/* Progress bar */
.zbc-progress {
  --zbc-value: 0%;
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--zbc-pill);
  background: var(--zbc-surface-3);
}

.zbc-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--zbc-value);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--zbc-brand), var(--zbc-lime));
  box-shadow: 0 0 12px var(--zbc-lime-wash);
  transition: width var(--zbc-dur-slow) var(--zbc-ease-out);
}

.zbc-progress--thin { height: 3px; }

/* 08 Sheet / dialog ------------------------------------------------------------------
   <dialog class="zbc-sheet"> covers the viewport (it is its own scrim, so no ::backdrop
   custom-property issues); .zbc-sheet__panel is a bottom sheet on phones and a centered
   dialog from 640px. JS toggles .is-open after showModal() so both directions animate. */
dialog.zbc-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--zbc-s6) 0 0;
  border: 0;
  background-color: transparent;
  color: var(--zbc-text);
  overflow: hidden;
  overscroll-behavior: contain;
  transition: background-color var(--zbc-dur) var(--zbc-ease), -webkit-backdrop-filter var(--zbc-dur) var(--zbc-ease), backdrop-filter var(--zbc-dur) var(--zbc-ease);
}

dialog.zbc-sheet[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

dialog.zbc-sheet::backdrop { background: transparent; }

dialog.zbc-sheet.is-open {
  background-color: var(--zbc-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.zbc-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - var(--zbc-s6) - var(--zbc-safe-top));
  border: 1px solid var(--zbc-line-strong);
  border-bottom: 0;
  border-radius: var(--zbc-radius-xl) var(--zbc-radius-xl) 0 0;
  background: linear-gradient(180deg, var(--zbc-surface-2), var(--zbc-surface) 140px);
  box-shadow: var(--zbc-shadow-lg), var(--zbc-card-highlight);
  transform: translateY(100%);
  transition: transform var(--zbc-dur-slow) var(--zbc-ease-out), opacity var(--zbc-dur) var(--zbc-ease);
}

dialog.zbc-sheet.is-open .zbc-sheet__panel { transform: none; }

.zbc-sheet__handle {
  width: 40px;
  height: 4px;
  margin: var(--zbc-s2) auto 0;
  flex: none;
  border-radius: var(--zbc-pill);
  background: var(--zbc-line-strong);
}

.zbc-sheet__header {
  display: flex;
  align-items: flex-start;
  gap: var(--zbc-s3);
  padding: var(--zbc-s3) var(--zbc-s3) var(--zbc-s3) var(--zbc-s5);
  flex: none;
}

.zbc-sheet__titles { flex: 1; min-width: 0; padding-top: 8px; }

.zbc-sheet__title {
  font-size: var(--zbc-fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.zbc-sheet__title:focus { box-shadow: none; }

.zbc-sheet__subtitle {
  margin-top: var(--zbc-s1);
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-sm);
}

.zbc-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--zbc-s2) var(--zbc-s5) var(--zbc-s5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.zbc-sheet__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--zbc-s2);
  flex: none;
  padding: var(--zbc-s3) var(--zbc-s5) calc(var(--zbc-s3) + var(--zbc-safe-bottom));
  border-top: 1px solid var(--zbc-line);
  background: var(--zbc-surface);
}

.zbc-sheet__footer:empty { display: none; }

@media (max-width: 639px) {
  .zbc-sheet__footer > .zbc-btn { flex: 1 1 0; }
  .zbc-sheet__body:last-child { padding-bottom: calc(var(--zbc-s5) + var(--zbc-safe-bottom)); }
}

@media (min-width: 640px) {
  dialog.zbc-sheet { padding: var(--zbc-s6) var(--zbc-s4); }
  dialog.zbc-sheet[open] { align-items: center; }
  .zbc-sheet__panel {
    max-width: 560px;
    max-height: min(760px, calc(100dvh - var(--zbc-s8)));
    border-bottom: 1px solid var(--zbc-line-strong);
    border-radius: var(--zbc-radius-xl);
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  dialog.zbc-sheet.is-open .zbc-sheet__panel { opacity: 1; }
  .zbc-sheet__handle { display: none; }
  .zbc-sheet__header { padding-top: var(--zbc-s4); }
  .zbc-sheet__footer { padding-bottom: var(--zbc-s4); border-radius: 0 0 var(--zbc-radius-xl) var(--zbc-radius-xl); }
  .zbc-sheet--wide .zbc-sheet__panel { max-width: 880px; }
  .zbc-sheet--narrow .zbc-sheet__panel { max-width: 440px; }
}

/* Toasts ---------------------------------------------------------------------------- */
.zbc-toasts {
  position: fixed;
  left: var(--zbc-s4);
  right: var(--zbc-s4);
  bottom: calc(var(--zbc-bottom-offset) + var(--zbc-toast-offset) + var(--zbc-s4) + var(--zbc-actionbar-safe));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zbc-s2);
  pointer-events: none;
}

@media (min-width: 900px) {
  .zbc-toasts {
    left: auto;
    right: var(--zbc-s5);
    bottom: calc(var(--zbc-toast-offset) + var(--zbc-s5));
    align-items: flex-end;
  }
}

.zbc-toast {
  --zbc-toast-accent: var(--zbc-info);
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  width: 100%;
  max-width: 440px;
  min-height: 52px;
  padding: var(--zbc-s2) var(--zbc-s2) var(--zbc-s2) var(--zbc-s4);
  border: 1px solid var(--zbc-line-strong);
  border-radius: var(--zbc-radius);
  background: var(--zbc-surface-2);
  color: var(--zbc-text);
  box-shadow: var(--zbc-shadow-lg);
  font-size: var(--zbc-fs-sm);
  font-weight: 600;
  pointer-events: auto;
  animation: zbc-toast-in var(--zbc-dur-slow) var(--zbc-ease-out) both;
}

.zbc-toast.is-leaving { animation: zbc-toast-out var(--zbc-dur) var(--zbc-ease) both; }
.zbc-toast > .zbc-icon { width: 20px; height: 20px; color: var(--zbc-toast-accent); }
.zbc-toast__msg { flex: 1; min-width: 0; padding: var(--zbc-s1) 0; }
.zbc-toast__action { flex: none; }
.zbc-toast__close { flex: none; }
.zbc-toast--ok { --zbc-toast-accent: var(--zbc-ok); }
.zbc-toast--success { --zbc-toast-accent: var(--zbc-ok); }
.zbc-toast--warn { --zbc-toast-accent: var(--zbc-warn); }
.zbc-toast--error { --zbc-toast-accent: var(--zbc-danger); border-color: var(--zbc-danger-wash); }
.zbc-toast--lime { --zbc-toast-accent: var(--zbc-lime); }

@keyframes zbc-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes zbc-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* Skeletons ------------------------------------------------------------------------- */
.zbc-skeleton {
  display: block;
  border-radius: var(--zbc-radius-xs);
  background: linear-gradient(90deg, var(--zbc-surface-2) 25%, var(--zbc-surface-3) 37%, var(--zbc-surface-2) 63%);
  background-size: 400% 100%;
  animation: zbc-shimmer 1.4s ease-in-out infinite;
}

.zbc-skeleton--text { height: 0.9em; margin: 0.25em 0; width: 100%; }
.zbc-skeleton--text:last-child:not(:first-child) { width: 64%; }
.zbc-skeleton--title { height: 1.5em; width: 55%; }
.zbc-skeleton--pill { height: 28px; width: 88px; border-radius: var(--zbc-pill); }
.zbc-skeleton--circle { border-radius: 50%; }
.zbc-skeleton--btn { height: var(--zbc-touch); width: 140px; border-radius: var(--zbc-pill); }
.zbc-skeleton--block { height: 120px; border-radius: var(--zbc-radius); }
.zbc-skeleton--media { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--zbc-radius); }

.zbc-skeleton-group { display: flex; flex-direction: column; gap: var(--zbc-s2); }

@keyframes zbc-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Countdown chip -------------------------------------------------------------------- */
.zbc-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--zbc-s3);
  border: 1px solid var(--zbc-lime-wash);
  border-radius: var(--zbc-pill);
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
  font-size: var(--zbc-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.zbc-countdown .zbc-icon { width: 15px; height: 15px; }
.zbc-countdown__value { font-weight: 800; letter-spacing: -0.01em; }
.zbc-countdown--urgent { border-color: var(--zbc-warn-wash); background: var(--zbc-warn-wash); color: var(--zbc-warn); }
.zbc-countdown--done { border-color: var(--zbc-line); background: var(--zbc-surface-2); color: var(--zbc-muted); }

/* Empty state ----------------------------------------------------------------------- */
.zbc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s7) var(--zbc-s5);
  border: 1px dashed var(--zbc-line-strong);
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-canvas-2);
  text-align: center;
}

.zbc-empty__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--zbc-s2);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--zbc-lime-wash), var(--zbc-surface-2));
  color: var(--zbc-lime-text);
  box-shadow: inset 0 0 0 1px var(--zbc-line-strong);
}

.zbc-empty__icon .zbc-icon { width: 28px; height: 28px; }
.zbc-empty__title { font-size: var(--zbc-fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.zbc-empty__text { max-width: 44ch; color: var(--zbc-text-2); }
.zbc-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zbc-s2); margin-top: var(--zbc-s2); }

/* Sticky bottom action bar ---------------------------------------------------------- */
.zbc-actionbar {
  position: sticky;
  bottom: var(--zbc-bottom-offset);
  z-index: 30;
  margin: var(--zbc-s6) calc(-1 * var(--zbc-gutter)) calc(-1 * var(--zbc-s8));
  padding: var(--zbc-s3) var(--zbc-gutter) calc(var(--zbc-s3) + var(--zbc-actionbar-safe));
  border-top: 1px solid var(--zbc-line);
  background: var(--zbc-glass);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}

.zbc-actionbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zbc-s3);
  max-width: var(--zbc-max);
  margin: 0 auto;
}

.zbc-actionbar__summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.zbc-actionbar__label {
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zbc-actionbar__value {
  color: var(--zbc-text);
  font-size: var(--zbc-fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.zbc-actionbar__actions {
  display: flex;
  align-items: center;
  gap: var(--zbc-s2);
  flex: none;
}

.zbc-actionbar__actions { min-width: 0; }
.zbc-btn__text--short { display: none; }

@media (max-width: 639px) {
  .zbc-actionbar__actions .zbc-btn--back { width: var(--zbc-touch); min-width: var(--zbc-touch); padding: 0; }
  .zbc-actionbar__actions .zbc-btn--back .zbc-btn__text { display: none; }
  .zbc-actionbar__actions .zbc-btn--next { padding: 0 var(--zbc-s4); }
  .zbc-actionbar__actions .zbc-btn__text--long { display: none; }
  .zbc-actionbar__actions .zbc-btn__text--short { display: inline; }
}

@media (min-width: 900px) {
  .zbc-actionbar {
    bottom: var(--zbc-s4);
    margin: var(--zbc-s7) 0 0;
    padding: var(--zbc-s3) var(--zbc-s3) var(--zbc-s3) var(--zbc-s5);
    border: 1px solid var(--zbc-line-strong);
    border-radius: var(--zbc-radius-xl);
    box-shadow: var(--zbc-shadow-lg);
  }
}

/* 09 Product tile ---------------------------------------------------------------------
   Horizontal (media left) on phones, vertical card from 640px. The family accent comes from
   data-cat on the article; images fall back to the tinted bottle drawing (.zbc-bottle). */
.zbc-product:not([data-cat]) { --zbc-accent: var(--zbc-lime); }

.zbc-product {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--zbc-s3);
  padding: var(--zbc-s3);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight), var(--zbc-shadow-sm);
  min-width: 0;
  transition: border-color var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease), transform var(--zbc-dur) var(--zbc-ease-out), opacity var(--zbc-dur) var(--zbc-ease);
}

.zbc-product:hover { border-color: var(--zbc-line-strong); }
.zbc-product.is-selected { border-color: var(--zbc-lime-text); box-shadow: var(--zbc-card-highlight), var(--zbc-glow); }
.zbc-product.is-busy { opacity: 0.55; pointer-events: none; }
.zbc-product.is-new { animation: zbc-pop var(--zbc-dur-slow) var(--zbc-ease-out) both; }

.zbc-product__media {
  position: relative;
  display: grid;
  place-items: center;
  align-self: start;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--zbc-radius);
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--zbc-accent) 24%, transparent), transparent 68%),
    var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
}

.zbc-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--zbc-dur-slow) var(--zbc-ease-out);
}

.zbc-product:hover .zbc-product__img { transform: scale(1.03); }

.zbc-product__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 10% 14%;
}

.zbc-product__flags {
  position: absolute;
  top: var(--zbc-s2);
  left: var(--zbc-s2);
  right: var(--zbc-s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s1);
}

.zbc-product__source-inline { display: inline-flex; }
.zbc-product__flags .zbc-product__source { display: none; }

@media (min-width: 640px) {
  .zbc-product__source-inline { display: none; }
  .zbc-product__flags .zbc-product__source { display: inline-flex; }
}

.zbc-product__strength {
  position: absolute;
  right: var(--zbc-s2);
  bottom: var(--zbc-s2);
  padding: 1px 8px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-glass);
  color: var(--zbc-text);
  font-size: 0.6875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--zbc-line-strong);
}

.zbc-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  min-width: 0;
}

.zbc-product__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--zbc-s2);
  min-width: 0;
}

.zbc-product__brand {
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.zbc-product__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--zbc-text);
  font-size: var(--zbc-fs-md);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.zbc-product__name a { color: inherit; text-decoration: none; }
.zbc-product__name a:hover { text-decoration: underline; }

.zbc-product__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-product__notes .zbc-chip { min-height: 24px; padding: 0 8px; font-size: 0.6875rem; }

.zbc-product__reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-xs);
  line-height: 1.45;
}

.zbc-product__reason .zbc-icon { width: 14px; height: 14px; margin-top: 1px; color: var(--zbc-lime-text); }

.zbc-product__price {
  color: var(--zbc-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zbc-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s2);
  margin-top: auto;
  padding-top: var(--zbc-s1);
}

.zbc-product__actions .zbc-btn { flex: 1 1 auto; }

.zbc-product.is-out .zbc-product__media::after {
  content: attr(data-out-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--zbc-scrim);
  color: var(--zbc-text);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .zbc-product {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    padding: var(--zbc-s3) var(--zbc-s3) var(--zbc-s4);
  }
  .zbc-product__body { padding: 0 var(--zbc-s1); }
  .zbc-product__placeholder { padding: 12% 24%; }
  .zbc-product__notes .zbc-chip { min-height: 26px; }
}

/* Compact row variant (pickers, lists) */
.zbc-product--row {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-rows: none;
  align-items: center;
  padding: var(--zbc-s2);
  border-radius: var(--zbc-radius);
}

.zbc-product--row .zbc-product__media { aspect-ratio: 1; border-radius: var(--zbc-radius-sm); }
.zbc-product--row .zbc-product__placeholder { padding: 10%; }
.zbc-product--row .zbc-product__body { padding: 0; gap: 4px; }
.zbc-product--row .zbc-product__name { font-size: var(--zbc-fs-sm); }
.zbc-product--row .zbc-product__actions { margin: 0; padding: 0; flex-wrap: nowrap; }
.zbc-product--row .zbc-product__reason {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.zbc-product--row .zbc-product__reason .zbc-icon { display: none; }
.zbc-product--row .zbc-product__more { display: none; }
.zbc-product--row .zbc-product__flags,
.zbc-product--row .zbc-product__strength { display: none; }

@media (min-width: 640px) {
  .zbc-product--row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    padding: var(--zbc-s2) var(--zbc-s3) var(--zbc-s2) var(--zbc-s2);
  }
}

/* Bottle drawing (placeholder art) */
.zbc-bottle {
  width: 100%;
  height: 100%;
  max-height: 180px;
  overflow: visible;
  filter: drop-shadow(0 10px 18px var(--zbc-scrim));
}

.zbc-bottle__shadow { fill: var(--zbc-scrim); }
.zbc-bottle__bulb { fill: var(--zbc-surface-hover); stroke: var(--zbc-line-strong); stroke-width: 1; }
.zbc-bottle__cap { fill: var(--zbc-surface-3); stroke: var(--zbc-line-strong); stroke-width: 1; }
.zbc-bottle__ridge { stroke: var(--zbc-line-strong); stroke-width: 1.5; stroke-linecap: round; }
.zbc-bottle__neck { fill: color-mix(in srgb, var(--zbc-accent) 30%, var(--zbc-surface-3)); }
.zbc-bottle__glass {
  fill: color-mix(in srgb, var(--zbc-accent) 10%, var(--zbc-surface-2));
  stroke: color-mix(in srgb, var(--zbc-accent) 45%, transparent);
  stroke-width: 1.5;
}
.zbc-bottle__liquid { fill: color-mix(in srgb, var(--zbc-accent) 62%, transparent); }
.zbc-bottle__label { fill: var(--zbc-canvas); fill-opacity: 0.86; }
.zbc-bottle__mark { fill: var(--zbc-accent); }
.zbc-bottle__line { fill: var(--zbc-line-strong); }
.zbc-bottle__shine { fill: none; stroke: var(--zbc-text); stroke-opacity: 0.22; stroke-width: 3; stroke-linecap: round; }

/* Disposable device drawing */
.zbc-device__body { fill: color-mix(in srgb, var(--zbc-accent, var(--zbc-lime)) 18%, var(--zbc-surface-2)); stroke: color-mix(in srgb, var(--zbc-accent, var(--zbc-lime)) 50%, transparent); stroke-width: 1.5; }
.zbc-device__tip { fill: var(--zbc-surface-hover); stroke: var(--zbc-line-strong); }
.zbc-device__window { fill: color-mix(in srgb, var(--zbc-accent, var(--zbc-lime)) 60%, transparent); }
.zbc-device__led { fill: var(--zbc-accent, var(--zbc-lime)); }

/* Grid: 1 → 2 → 3 → 4 columns */
.zbc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s3);
}

@media (min-width: 640px) {
  .zbc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zbc-s4); }
}

@media (min-width: 900px) {
  .zbc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .zbc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zbc-grid--max3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.zbc-grid--list { grid-template-columns: minmax(0, 1fr) !important; gap: var(--zbc-s2); }

@media (min-width: 900px) {
  .zbc-grid--list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 10 Summary lists ---------------------------------------------------------------------- */
.zbc-summary {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  margin: 0;
}

.zbc-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zbc-s3);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
}

.zbc-summary__row dt { min-width: 0; }
.zbc-summary__row dd { margin: 0; color: var(--zbc-text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zbc-summary__row--muted dd { color: var(--zbc-muted); font-weight: 600; white-space: normal; }
.zbc-summary__row--discount dd { color: var(--zbc-ok); }

.zbc-summary__row--total {
  align-items: center;
  margin-top: var(--zbc-s2);
  padding-top: var(--zbc-s3);
  border-top: 1px solid var(--zbc-line-strong);
  color: var(--zbc-text);
  font-size: var(--zbc-fs-md);
  font-weight: 800;
}

.zbc-summary__row--total dd {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.zbc-kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--zbc-s2) var(--zbc-s4);
  margin: 0;
  font-size: var(--zbc-fs-sm);
}

.zbc-kv dt { color: var(--zbc-muted); }
.zbc-kv dd { margin: 0; color: var(--zbc-text); font-weight: 600; text-align: right; }

/* Line items (summary product lines) */
.zbc-lines { display: flex; flex-direction: column; gap: var(--zbc-s3); margin: 0; padding: 0; list-style: none; }
.zbc-line { display: flex; align-items: center; gap: var(--zbc-s3); min-width: 0; }
.zbc-line__thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-surface-3);
  color: var(--zbc-lime-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.zbc-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zbc-line__title { font-weight: 700; color: var(--zbc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zbc-line__meta { color: var(--zbc-muted); font-size: var(--zbc-fs-xs); }
.zbc-line__value { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Flavor-note preference chips (tap to cycle) ------------------------------------------ */
.zbc-notes-group { display: flex; flex-direction: column; gap: var(--zbc-s2); }

.zbc-notes-group__title {
  display: flex;
  align-items: center;
  gap: var(--zbc-s2);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
}

.zbc-note {
  --zbc-note-bg: var(--zbc-surface-2);
  --zbc-note-fg: var(--zbc-text-2);
  --zbc-note-border: var(--zbc-line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--zbc-s3) 0 10px;
  border: 1px solid var(--zbc-note-border);
  border-radius: var(--zbc-pill);
  background: var(--zbc-note-bg);
  color: var(--zbc-note-fg);
  font-size: var(--zbc-fs-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background-color var(--zbc-dur-fast) var(--zbc-ease), color var(--zbc-dur-fast) var(--zbc-ease), border-color var(--zbc-dur-fast) var(--zbc-ease), transform var(--zbc-dur-fast) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-note::after { content: ""; position: absolute; inset: -2px 0; }
.zbc-note:hover { --zbc-note-border: var(--zbc-muted); --zbc-note-fg: var(--zbc-text); }
.zbc-note:active { transform: scale(0.96); }
.zbc-note:focus-visible { border-radius: var(--zbc-pill); }

.zbc-note__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--zbc-surface-3);
  color: var(--zbc-muted);
}

.zbc-note__icon .zbc-icon { width: 13px; height: 13px; }

.zbc-note__state {
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid currentColor;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}

.zbc-note[data-level="neutral"] .zbc-note__state { display: none; }

.zbc-note[data-level="love"] {
  --zbc-note-bg: var(--zbc-lime);
  --zbc-note-fg: var(--zbc-lime-ink);
  --zbc-note-border: var(--zbc-lime);
  box-shadow: 0 6px 18px var(--zbc-lime-wash);
}

.zbc-note[data-level="love"] .zbc-note__icon { background: var(--zbc-lime-ink); color: var(--zbc-lime-text); }

.zbc-note[data-level="like"] {
  --zbc-note-bg: var(--zbc-lime-wash);
  --zbc-note-fg: var(--zbc-lime-text);
  --zbc-note-border: color-mix(in srgb, var(--zbc-lime-text) 30%, transparent);
}

.zbc-note[data-level="like"] .zbc-note__icon { background: var(--zbc-lime-wash); color: var(--zbc-lime-text); }

.zbc-note[data-level="dislike"] {
  --zbc-note-bg: var(--zbc-warn-wash);
  --zbc-note-fg: var(--zbc-warn);
  --zbc-note-border: var(--zbc-warn-wash);
}

.zbc-note[data-level="dislike"] .zbc-note__icon { background: var(--zbc-warn-wash); color: var(--zbc-warn); }

.zbc-note[data-level="never"] {
  --zbc-note-bg: var(--zbc-danger-wash);
  --zbc-note-fg: var(--zbc-danger);
  --zbc-note-border: var(--zbc-danger);
}

.zbc-note[data-level="never"] .zbc-note__name { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.zbc-note[data-level="never"] .zbc-note__icon { background: var(--zbc-danger); color: var(--zbc-canvas); }
.zbc-note.is-bumped { animation: zbc-pop var(--zbc-dur) var(--zbc-ease-out); }

.zbc-note-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zbc-s2);
  padding: var(--zbc-s3);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
}

.zbc-note-legend .zbc-note { min-height: 28px; padding: 0 10px 0 6px; font-size: var(--zbc-fs-xs); pointer-events: none; }
.zbc-note-legend .zbc-note__icon { width: 16px; height: 16px; }
.zbc-note-legend .zbc-note__state { display: none; }
.zbc-note-legend__arrow { color: var(--zbc-faint); }

/* Slot bar: one pip per bottle, colored by category ------------------------------------- */
.zbc-slots {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  padding: var(--zbc-s4);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
}

.zbc-slots__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--zbc-s1) var(--zbc-s3); }
.zbc-slots__title { color: var(--zbc-text-2); font-size: var(--zbc-fs-xs); font-weight: 800; letter-spacing: var(--zbc-tracking-caps); text-transform: uppercase; }
.zbc-slots__text { color: var(--zbc-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.zbc-slots__bar { display: flex; gap: 4px; }

.zbc-slots__pip {
  flex: 1 1 0;
  height: 10px;
  min-width: 0;
  border-radius: var(--zbc-pill);
  background: var(--zbc-accent, var(--zbc-surface-3));
  transition: background-color var(--zbc-dur) var(--zbc-ease), transform var(--zbc-dur) var(--zbc-ease-out);
}

.zbc-slots__pip:not([data-cat]) { background: var(--zbc-surface-3); }

/* Plan cards (extend .zbc-choice) ------------------------------------------------------- */
.zbc-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s3);
}

@media (min-width: 640px) {
  .zbc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zbc-s4); }
}

@media (min-width: 1200px) {
  .zbc-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zbc-plan .zbc-choice__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "count name price"
    "count per price";
  align-items: center;
  gap: 2px var(--zbc-s3);
  padding: var(--zbc-s4);
  padding-right: var(--zbc-s4);
}

.zbc-plan .zbc-choice__check { display: none; }

.zbc-plan__count {
  grid-area: count;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--zbc-radius);
  background: linear-gradient(160deg, var(--zbc-surface-3), var(--zbc-canvas-2));
  box-shadow: inset 0 0 0 1px var(--zbc-line-strong);
  color: var(--zbc-text);
  line-height: 1;
  text-align: center;
}

.zbc-plan__count strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.zbc-plan__count small { display: block; margin-top: 2px; color: var(--zbc-muted); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.zbc-plan__name { grid-area: name; align-self: end; color: var(--zbc-text); font-size: var(--zbc-fs-md); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.zbc-plan__per { grid-area: per; align-self: start; color: var(--zbc-muted); font-size: var(--zbc-fs-sm); font-variant-numeric: tabular-nums; }
.zbc-plan__per strong { color: var(--zbc-text-2); font-weight: 700; }
.zbc-plan__price { grid-area: price; justify-self: end; text-align: right; }
.zbc-plan__price .zbc-price { font-size: 1.75rem; }
.zbc-plan__price small { display: block; margin-top: 2px; color: var(--zbc-muted); font-size: var(--zbc-fs-xs); }
.zbc-plan__features { display: none; }

.zbc-plan__ribbon {
  position: absolute;
  top: 0;
  right: var(--zbc-s4);
  padding: 3px 10px;
  border-radius: 0 0 var(--zbc-radius-xs) var(--zbc-radius-xs);
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zbc-plan.is-popular .zbc-choice__body { padding-top: var(--zbc-s5); }
.zbc-plan .zbc-choice__input:checked + .zbc-choice__body .zbc-plan__count {
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  box-shadow: none;
}
.zbc-plan .zbc-choice__input:checked + .zbc-choice__body .zbc-plan__count small { color: var(--zbc-lime-ink); }

@media (min-width: 640px) {
  .zbc-plan .zbc-choice__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "count" "name" "price" "per" "features";
    align-items: start;
    gap: var(--zbc-s2);
    padding: var(--zbc-s5);
  }
  .zbc-plan.is-popular .zbc-choice__body { padding-top: var(--zbc-s6); }
  .zbc-plan__count { width: 64px; height: 64px; margin-bottom: var(--zbc-s2); }
  .zbc-plan__name { font-size: var(--zbc-fs-lg); }
  .zbc-plan__price { justify-self: start; text-align: left; margin-top: var(--zbc-s2); }
  .zbc-plan__price .zbc-price { font-size: 2.5rem; }
  .zbc-plan__features {
    grid-area: features;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: var(--zbc-s3) 0 0;
    padding: var(--zbc-s3) 0 0;
    border-top: 1px solid var(--zbc-line);
    list-style: none;
    color: var(--zbc-text-2);
    font-size: var(--zbc-fs-sm);
  }
  .zbc-plan__features li { display: flex; gap: var(--zbc-s2); align-items: flex-start; }
  .zbc-plan__features .zbc-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--zbc-lime-text); }
  .zbc-plan .zbc-choice__check { display: grid; top: var(--zbc-s5); right: var(--zbc-s5); }
}

/* 11 Join flow ------------------------------------------------------------------------------ */
.zbc-join { display: flex; flex-direction: column; gap: var(--zbc-s5); }

@media (min-width: 900px) {
  .zbc-join { gap: var(--zbc-s6); }
  .zbc-join .zbc-stepper { max-width: 760px; width: 100%; margin: 0 auto; }
}

.zbc-join__step {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s6);
  animation: zbc-step-in var(--zbc-dur-slow) var(--zbc-ease-out) both;
}

.zbc-join__step.is-back { animation-name: zbc-step-in-back; }

.zbc-join__header { display: flex; flex-direction: column; gap: var(--zbc-s3); }
.zbc-join__header .zbc-h1 { font-size: var(--zbc-fs-2xl); }

@media (min-width: 900px) {
  .zbc-join__header .zbc-h1 { font-size: var(--zbc-fs-3xl); }
}

.zbc-join__block { display: flex; flex-direction: column; gap: var(--zbc-s3); }
.zbc-join__block-title { font-size: var(--zbc-fs-lg); font-weight: 800; letter-spacing: -0.015em; }
.zbc-join__block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--zbc-s1) var(--zbc-s3); }

.zbc-join__options {
  display: grid;
  gap: var(--zbc-s5);
}

@media (min-width: 900px) {
  .zbc-join__options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.zbc-join__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zbc-s3);
}

.zbc-join__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s2) var(--zbc-s4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 600;
}

.zbc-join__trust li { display: inline-flex; align-items: center; gap: var(--zbc-s2); }
.zbc-join__trust .zbc-icon { width: 18px; height: 18px; color: var(--zbc-lime-text); }

.zbc-join__illustration {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--zbc-s5);
  overflow: hidden;
}

.zbc-join__devices {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--zbc-s3);
  min-height: 180px;
  padding: var(--zbc-s5);
  border-radius: var(--zbc-radius-lg);
  background: radial-gradient(circle at 50% 40%, var(--zbc-lime-wash), transparent 70%), var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
}

.zbc-join__devices svg { width: 56px; height: auto; filter: drop-shadow(0 12px 20px var(--zbc-scrim)); }
.zbc-join__devices svg:nth-child(2) { width: 64px; transform: translateY(-10px); }

@media (min-width: 640px) {
  .zbc-join__illustration { grid-template-columns: 280px minmax(0, 1fr); }
}

.zbc-join__summary-card { gap: var(--zbc-s4); }
.zbc-join__summary-card .is-updating,
.zbc-disclosure .is-updating {
  opacity: 0.55;
  transition: opacity var(--zbc-dur) var(--zbc-ease);
}

.zbc-join__recurring { color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); }
.zbc-join__recurring strong { color: var(--zbc-text); }

/* Collapsible order summary (phones) */
.zbc-disclosure {
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight);
}

.zbc-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zbc-s3);
  min-height: 56px;
  padding: 0 var(--zbc-s4);
  border-radius: var(--zbc-radius-lg);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.zbc-disclosure > summary::-webkit-details-marker { display: none; }
.zbc-disclosure > summary .zbc-icon { transition: transform var(--zbc-dur) var(--zbc-ease); }
.zbc-disclosure[open] > summary .zbc-icon--chevron { transform: rotate(180deg); }
.zbc-disclosure__body { padding: 0 var(--zbc-s4) var(--zbc-s4); }

@media (min-width: 900px) {
  .zbc-join__mobile-only { display: none !important; }
}

@media (max-width: 899px) {
  .zbc-join__desktop-only { display: none !important; }
}

/* Card fields (NMI Collect.js iframes mount inside these) */
.zbc-card-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zbc-s3);
}

.zbc-card-fields > .zbc-field:first-child { grid-column: 1 / -1; }

.zbc-card-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 var(--zbc-s2) 0 var(--zbc-s4);
  border: 1px solid var(--zbc-line-strong);
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-canvas-2);
  overflow: hidden;
  transition: border-color var(--zbc-dur-fast) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-card-field iframe { width: 100% !important; height: 48px !important; border: 0 !important; }
.zbc-card-field:focus-within { border-color: var(--zbc-lime-text); box-shadow: 0 0 0 3px var(--zbc-lime-wash); }
.zbc-field.is-invalid .zbc-card-field { border-color: var(--zbc-danger); }
.zbc-field.is-valid .zbc-card-field { border-color: var(--zbc-brand); }
.zbc-card-field.is-loading::after {
  content: "";
  position: absolute;
  inset: 12px var(--zbc-s4);
  border-radius: var(--zbc-radius-xs);
  background: linear-gradient(90deg, var(--zbc-surface-2) 25%, var(--zbc-surface-3) 37%, var(--zbc-surface-2) 63%);
  background-size: 400% 100%;
  animation: zbc-shimmer 1.4s ease-in-out infinite;
}

.zbc-secure-note {
  display: flex;
  align-items: center;
  gap: var(--zbc-s2);
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
}

.zbc-secure-note .zbc-icon { width: 14px; height: 14px; color: var(--zbc-ok); }

.zbc-testmode .zbc-badge { flex: none; }

.zbc-testmode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s4);
  border: 1px dashed var(--zbc-warn);
  border-radius: var(--zbc-radius);
  background: var(--zbc-warn-wash);
  color: var(--zbc-text);
  font-size: var(--zbc-fs-sm);
}

/* Panel states for checkout sections */
.zbc-panel-state {
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s3) var(--zbc-s4);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
  font-size: var(--zbc-fs-sm);
}

.zbc-panel-state__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--zbc-surface-3);
  color: var(--zbc-text-2);
}

.zbc-panel-state__icon .zbc-icon { width: 18px; height: 18px; }
.zbc-panel-state--ok .zbc-panel-state__icon { background: var(--zbc-ok-wash); color: var(--zbc-ok); }
.zbc-panel-state--warn .zbc-panel-state__icon { background: var(--zbc-warn-wash); color: var(--zbc-warn); }
.zbc-panel-state--danger .zbc-panel-state__icon { background: var(--zbc-danger-wash); color: var(--zbc-danger); }

.zbc-shake { animation: zbc-shake 0.42s var(--zbc-ease) both; }
.zbc-card.is-error { border-color: var(--zbc-danger); box-shadow: var(--zbc-card-highlight), 0 0 0 3px var(--zbc-danger-wash); }

/* Success overlay */
.zbc-success {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--zbc-s5);
  background: var(--zbc-scrim);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: zbc-fade-in var(--zbc-dur) var(--zbc-ease) both;
}

.zbc-success__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zbc-s3);
  max-width: 420px;
  padding: var(--zbc-s7) var(--zbc-s6);
  border: 1px solid var(--zbc-lime-wash);
  border-radius: var(--zbc-radius-xl);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-glow), var(--zbc-shadow-lg);
  text-align: center;
  animation: zbc-pop var(--zbc-dur-slow) var(--zbc-ease-out) both;
}

.zbc-success__mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  box-shadow: var(--zbc-glow);
}

.zbc-success__mark .zbc-icon { width: 36px; height: 36px; }

/* 12 Status panels ------------------------------------------------------------------------- */
.zbc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s8) var(--zbc-gutter);
  color: var(--zbc-muted);
}

.zbc-spinner {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--zbc-line-strong);
  border-top-color: var(--zbc-lime-text);
  animation: zbc-spin 0.8s linear infinite;
}

.zbc-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

.zbc-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zbc-s3);
  max-width: 640px;
  margin: var(--zbc-s6) auto;
  padding: var(--zbc-s7) var(--zbc-s5);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-xl);
  background:
    radial-gradient(420px 200px at 50% 0%, var(--zbc-lime-wash), transparent 70%),
    var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight), var(--zbc-shadow);
  text-align: center;
}

.zbc-status__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--zbc-s2);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--zbc-surface-3), var(--zbc-canvas-2));
  color: var(--zbc-lime-text);
  box-shadow: inset 0 0 0 1px var(--zbc-line-strong), var(--zbc-glow);
}

.zbc-status__icon .zbc-icon { width: 32px; height: 32px; }
.zbc-status__title { font-size: var(--zbc-fs-2xl); font-weight: 800; letter-spacing: var(--zbc-tracking-tight); line-height: var(--zbc-lh-tight); }
.zbc-status__text { max-width: 46ch; color: var(--zbc-text-2); }
.zbc-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zbc-s2); margin-top: var(--zbc-s3); }
.zbc-status--error .zbc-status__icon { color: var(--zbc-danger); box-shadow: inset 0 0 0 1px var(--zbc-line-strong); }

.zbc-coming-soon__list {
  display: grid;
  gap: var(--zbc-s2);
  width: 100%;
  max-width: 420px;
  margin: var(--zbc-s3) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.zbc-coming-soon__list li {
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s3) var(--zbc-s4);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
}

.zbc-coming-soon__list .zbc-icon { color: var(--zbc-lime-text); }

/* 13 Motion -------------------------------------------------------------------------------- */
@keyframes zbc-spin { to { transform: rotate(360deg); } }

@keyframes zbc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zbc-pop {
  0% { opacity: 0; transform: scale(0.94); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: none; }
}

@keyframes zbc-step-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes zbc-step-in-back {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

@keyframes zbc-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .zbc *,
  .zbc *::before,
  .zbc *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .zbc-skeleton,
  .zbc-card-field.is-loading::after { animation: none !important; }
  .zbc-spinner,
  .zbc-btn.is-loading::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  .zbc-shake { animation: none !important; }
}

@media (forced-colors: active) {
  .zbc {
    --zbc-focus-outline: 2px solid CanvasText;
  }
  .zbc-btn,
  .zbc-chip,
  .zbc-note,
  .zbc-choice__body,
  .zbc-card,
  .zbc-input,
  .zbc-card-field { border-color: CanvasText; }
  .zbc-choice__input:checked + .zbc-choice__body,
  .zbc-segmented__input:checked + .zbc-segmented__label,
  .zbc-note[aria-pressed="true"] { outline: 3px solid Highlight; }
  .zbc-check__box,
  .zbc-switch__track { border-color: CanvasText; }
}

@media print {
  .zbc-topbar,
  .zbc-tabbar,
  .zbc-actionbar,
  .zbc-toasts,
  .zbc-skip { display: none !important; }
  body.zbc { background: none; }
}

/* 14 Member pages: shared ---------------------------------------------------------------------
   Page head, meta items, status pills, thumbnails, stars, completeness ring, box timeline, activity feed,
   tabs, menus, action tiles and the sheet parts shared by the member modules (member.js, actions.js,
   picker.js, payment-methods.js). */
@property --zbc-ring-value {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.zbc-member {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s6);
  min-width: 0;
}

@media (min-width: 900px) {
  .zbc-member { gap: var(--zbc-s7); }
}

.zbc-member > .zbc-actionbar { margin-top: 0; }

/* Floating labels are flex rows, which drop the space before "(optional)" (address and billing forms). */
.zbc-field--float .zbc-field__optional { margin-left: 0.3em; }

/* Page head */
.zbc-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s3);
}

.zbc-page-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zbc-s3) var(--zbc-s5);
}

.zbc-page-head__titles {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  min-width: 0;
}

.zbc-page-head__title { font-size: var(--zbc-fs-2xl); }
.zbc-page-head__back { align-self: flex-start; min-height: 36px; margin: calc(-1 * var(--zbc-s2)) 0 0; font-size: var(--zbc-fs-sm); }

@media (max-width: 639px) {
  .zbc-page-head__row { display: contents; }
  .zbc-page-head__lead { order: 2; }
  .zbc-page-head__actions { order: 3; }
  .zbc-page-head__meta { order: 4; }
  .zbc-page-head > .zbc-page-head__extra { order: 5; }
}
.zbc-page-head__lead { font-size: var(--zbc-fs-md); }
.zbc-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--zbc-s2); }

.zbc-page-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zbc-s2) var(--zbc-s4);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
}

@media (min-width: 640px) {
  .zbc-page-head__lead { font-size: var(--zbc-fs-lg); }
}

@media (min-width: 900px) {
  .zbc-page-head__title { font-size: clamp(2.25rem, 1.5vw + 1.5rem, 3rem); }
}

.zbc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.zbc-meta-item .zbc-icon { width: 16px; height: 16px; color: var(--zbc-muted); }
.zbc-status-pill { min-height: 26px; padding: 3px 10px; }
.zbc-card__header > .zbc-card__heading { flex: 1 1 auto; }
.zbc-card__header > .zbc-card__heading ~ * { flex: none; }

.zbc-sheet-section__title {
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
}

.zbc-empty--compact { padding: var(--zbc-s5) var(--zbc-s4); }

/* Thumbnails: product image or tinted bottle/device drawing */
.zbc-thumb {
  --zbc-thumb: 48px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--zbc-thumb);
  height: var(--zbc-thumb);
  flex: none;
  overflow: hidden;
  border-radius: var(--zbc-radius-sm);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--zbc-accent, var(--zbc-lime)) 28%, transparent), transparent 70%),
    var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
}

.zbc-thumb:not([data-cat]) { --zbc-accent: var(--zbc-lime); }
.zbc-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.zbc-thumb > svg { width: 100%; height: 100%; max-height: none; padding: 12% 20%; filter: drop-shadow(0 4px 8px var(--zbc-scrim)); }
.zbc-thumb--device > svg { padding: 10% 24%; }
.zbc-thumb--sm { --zbc-thumb: 40px; border-radius: var(--zbc-radius-xs); }
.zbc-thumb--md { --zbc-thumb: 52px; }
.zbc-thumb--lg { --zbc-thumb: 64px; border-radius: var(--zbc-radius); }
.zbc-thumb--xl { --zbc-thumb: 72px; border-radius: var(--zbc-radius); }

@media (min-width: 640px) {
  .zbc-thumb--xl { --zbc-thumb: 96px; }
}

.zbc-thumb--more {
  background: var(--zbc-surface-3);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zbc-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-thumbs > li { display: block; }

/* Stars (read-only average) */
.zbc-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--zbc-warn);
}

.zbc-stars .zbc-icon { width: 15px; height: 15px; }
.zbc-stars .zbc-icon.is-off { color: var(--zbc-faint); }

.zbc-stars__value {
  margin-left: 6px;
  color: var(--zbc-text);
  font-size: var(--zbc-fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Completeness ring */
.zbc-ring {
  --zbc-ring-size: 64px;
  --zbc-ring-width: 6px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--zbc-ring-size);
  height: var(--zbc-ring-size);
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--zbc-lime) calc(var(--zbc-ring-value) * 1%), var(--zbc-surface-3) 0);
  transition: --zbc-ring-value var(--zbc-dur-slow) var(--zbc-ease-out);
}

.zbc-ring::before {
  content: "";
  position: absolute;
  inset: var(--zbc-ring-width);
  border-radius: 50%;
  background: var(--zbc-surface);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
}

.zbc-ring__value {
  position: relative;
  font-size: var(--zbc-fs-sm);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.zbc-ring--lg { --zbc-ring-size: 76px; --zbc-ring-width: 7px; }
.zbc-ring--lg .zbc-ring__value { font-size: var(--zbc-fs-lg); }

/* Box status timeline: vertical on phones, horizontal from 640px */
.zbc-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-timeline__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  min-height: 36px;
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-sm);
  font-weight: 700;
}

.zbc-timeline__step + .zbc-timeline__step::before {
  content: "";
  position: absolute;
  left: 11px;
  top: -6px;
  width: 2px;
  height: 12px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-line-strong);
}

.zbc-timeline__step.is-done + .zbc-timeline__step::before { background: var(--zbc-brand); }

.zbc-timeline__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid var(--zbc-line-strong);
  border-radius: 50%;
  background: var(--zbc-canvas);
  color: var(--zbc-lime-ink);
}

.zbc-timeline__dot .zbc-icon { width: 14px; height: 14px; }
.zbc-timeline__step.is-done { color: var(--zbc-text-2); }
.zbc-timeline__step.is-done .zbc-timeline__dot { border-color: var(--zbc-brand); background: var(--zbc-brand); }
.zbc-timeline__step.is-current { color: var(--zbc-text); }
.zbc-timeline__step.is-current .zbc-timeline__dot { border-color: var(--zbc-lime-text); background: var(--zbc-lime); box-shadow: var(--zbc-glow); }
.zbc-timeline__step.is-problem { color: var(--zbc-danger); }
.zbc-timeline__step.is-problem .zbc-timeline__dot { border-color: var(--zbc-danger); background: var(--zbc-danger); color: var(--zbc-canvas); }

@media (min-width: 640px) {
  .zbc-timeline {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .zbc-timeline__step {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--zbc-s2);
    min-height: 0;
    text-align: center;
    font-size: var(--zbc-fs-xs);
  }
  .zbc-timeline__step + .zbc-timeline__step::before {
    left: auto;
    top: 11px;
    right: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 2px;
  }
}

/* Activity feed */
.zbc-activity {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-activity__item {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--zbc-s3);
  padding: var(--zbc-s2) 0 var(--zbc-s3);
}

.zbc-activity__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 44px;
  bottom: -2px;
  width: 2px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-line);
}

.zbc-activity__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--zbc-surface-3);
  color: var(--zbc-text-2);
}

.zbc-activity__icon .zbc-icon { width: 16px; height: 16px; }
.zbc-activity__item.is-danger .zbc-activity__icon { background: var(--zbc-danger-wash); color: var(--zbc-danger); }
.zbc-activity__body { min-width: 0; padding-top: 5px; }
.zbc-activity__title { color: var(--zbc-text); font-size: var(--zbc-fs-sm); font-weight: 700; }
.zbc-activity__detail { color: var(--zbc-muted); font-size: var(--zbc-fs-xs); overflow-wrap: anywhere; }

.zbc-activity__time {
  padding-top: 6px;
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
  .zbc-activity__item { grid-template-columns: 32px minmax(0, 1fr); row-gap: 0; }
  .zbc-activity__time { grid-column: 2; padding-top: 0; }
  .zbc-activity__item:not(:last-child)::after { top: 44px; }
}

/* Key/value list with row rules */
.zbc-kv--stacked { gap: 0; }

.zbc-kv--stacked > dt,
.zbc-kv--stacked > dd {
  padding: var(--zbc-s2) 0;
  border-bottom: 1px solid var(--zbc-line);
}

.zbc-kv--stacked > dd { padding-left: var(--zbc-s4); }

.zbc-kv--stacked > dt:last-of-type,
.zbc-kv--stacked > dd:last-of-type { border-bottom: 0; }

/* Tabs (ARIA tablist) */
.zbc-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-pill);
  background: var(--zbc-canvas-2);
  scrollbar-width: none;
}

.zbc-tabs::-webkit-scrollbar { display: none; }

.zbc-tab {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--zbc-s2);
  min-height: var(--zbc-touch);
  padding: 0 var(--zbc-s4);
  border: 0;
  border-radius: var(--zbc-pill);
  background: transparent;
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--zbc-dur) var(--zbc-ease), color var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-tab .zbc-icon { width: 16px; height: 16px; }
.zbc-tab:hover { color: var(--zbc-text); background: var(--zbc-surface-2); }
.zbc-tab:focus-visible { border-radius: var(--zbc-pill); }

.zbc-tab[aria-selected="true"] {
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  box-shadow: 0 6px 18px var(--zbc-lime-wash);
}

.zbc-tab__count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-surface-3);
  color: var(--zbc-text);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  text-align: center;
}

.zbc-tab[aria-selected="true"] .zbc-tab__count { background: var(--zbc-lime-ink); color: var(--zbc-lime-text); }

.zbc-tab__short { display: none; }

@media (max-width: 479px) {
  .zbc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--zbc-radius); }
  .zbc-tab { flex-direction: column; gap: 2px; min-height: 52px; padding: var(--zbc-s1); border-radius: var(--zbc-radius-sm); line-height: 1.1; }
  .zbc-tab:focus-visible { border-radius: var(--zbc-radius-sm); }
  .zbc-tab .zbc-icon { display: none; }
  .zbc-tab__long { display: none; }
  .zbc-tab__short { display: inline; }
  .zbc-tab__count { padding: 0 6px; }
}

/* Menu list (overflow sheets) */
.zbc-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-menu__item {
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--zbc-s3);
  border: 0;
  border-radius: var(--zbc-radius-sm);
  background: transparent;
  color: var(--zbc-text);
  font-size: var(--zbc-fs-md);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-menu__item:hover:not(:disabled) { background: var(--zbc-surface-hover); color: var(--zbc-text); }
.zbc-menu__item:focus-visible { border-radius: var(--zbc-radius-sm); }
.zbc-menu__item .zbc-icon { width: 20px; height: 20px; color: var(--zbc-lime-text); }
.zbc-menu__item:disabled { color: var(--zbc-muted); cursor: default; }
.zbc-menu__item:disabled .zbc-icon { color: var(--zbc-muted); }
.zbc-menu__label { flex: 1; min-width: 0; }
.zbc-menu__hint { color: var(--zbc-muted); font-size: var(--zbc-fs-xs); font-weight: 600; }
.zbc-menu__item--danger,
.zbc-menu__item--danger .zbc-icon { color: var(--zbc-danger); }

/* "Kept"-style pressed button */
.zbc-btn--kept {
  --zbc-btn-bg: var(--zbc-lime-wash);
  --zbc-btn-fg: var(--zbc-lime-text);
  --zbc-btn-border: color-mix(in srgb, var(--zbc-lime-text) 40%, transparent);
  --zbc-btn-hover-bg: var(--zbc-lime-wash);
}

/* Mini list (dashboard queue) */
.zbc-mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-mini-list__item { display: flex; align-items: center; gap: var(--zbc-s3); min-width: 0; }

.zbc-mini-list__pos,
.zbc-queue__pos {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zbc-mini-list__body { min-width: 0; }
.zbc-mini-list__title { overflow: hidden; color: var(--zbc-text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.zbc-mini-list__meta { color: var(--zbc-muted); font-size: var(--zbc-fs-xs); }

/* Action tiles (manage) */
.zbc-actions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s2);
}

@media (min-width: 640px) {
  .zbc-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.zbc-action {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--zbc-s3);
  width: 100%;
  min-height: 68px;
  padding: var(--zbc-s3) var(--zbc-s4);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
  color: var(--zbc-text);
  text-align: left;
  transition: border-color var(--zbc-dur) var(--zbc-ease), background-color var(--zbc-dur) var(--zbc-ease), transform var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-action:hover:not(:disabled) { border-color: var(--zbc-line-strong); background: var(--zbc-surface-hover); }
.zbc-action:active:not(:disabled) { transform: scale(0.995); }
.zbc-action:focus-visible { border-radius: var(--zbc-radius); }

.zbc-action__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
}

.zbc-action__icon .zbc-icon { width: 20px; height: 20px; }
.zbc-action__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zbc-action__title { color: var(--zbc-text); font-weight: 800; letter-spacing: -0.01em; }

.zbc-action__value {
  display: -webkit-box;
  overflow: hidden;
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.zbc-action__reason { color: var(--zbc-warn); font-size: var(--zbc-fs-xs); font-weight: 600; }
.zbc-action__chevron { color: var(--zbc-muted); }
.zbc-action__chevron .zbc-icon { width: 18px; height: 18px; }
.zbc-action:disabled { background: transparent; cursor: not-allowed; }
.zbc-action:disabled .zbc-action__icon { background: var(--zbc-surface-2); color: var(--zbc-muted); }
.zbc-action:disabled .zbc-action__title { color: var(--zbc-text-2); }
.zbc-action:disabled .zbc-action__chevron { visibility: hidden; }
.zbc-action--danger .zbc-action__icon { background: var(--zbc-danger-wash); color: var(--zbc-danger); }
.zbc-action--danger .zbc-action__title { color: var(--zbc-danger); }

/* Sheets: product picker */
.zbc-sheet--picker .zbc-sheet__panel { height: calc(100dvh - var(--zbc-s6) - var(--zbc-safe-top)); }

@media (min-width: 640px) {
  .zbc-sheet--picker .zbc-sheet__panel { height: min(760px, calc(100dvh - var(--zbc-s8))); }
}

.zbc-picker { display: flex; flex-direction: column; gap: var(--zbc-s3); }

.zbc-picker__controls {
  position: sticky;
  top: calc(-1 * var(--zbc-s2));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s3);
  margin: calc(-1 * var(--zbc-s2)) calc(-1 * var(--zbc-s5)) 0;
  padding: var(--zbc-s2) var(--zbc-s5) var(--zbc-s3);
  border-bottom: 1px solid var(--zbc-line);
  background: var(--zbc-glass);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

.zbc-picker__filters { display: flex; flex-direction: column; gap: var(--zbc-s2); min-width: 0; }

.zbc-picker__chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--zbc-s5));
  padding: 2px var(--zbc-s5);
  scrollbar-width: none;
}

.zbc-picker__chips::-webkit-scrollbar { display: none; }
.zbc-picker__chips .zbc-chip { flex: none; }

@media (min-width: 640px) {
  .zbc-picker__chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

.zbc-picker__status { min-height: 1.2em; color: var(--zbc-muted); font-size: var(--zbc-fs-xs); font-weight: 600; }
.zbc-picker__more { align-self: center; }

.zbc-picker__footer {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--zbc-s2) var(--zbc-s3);
}

.zbc-picker__counter { font-weight: 800; font-variant-numeric: tabular-nums; }
.zbc-picker__counter.is-complete { color: var(--zbc-lime-text); }

/* Scoped to the footer so the list reset (.zbc [role="list"]) does not zero the padding */
.zbc-picker__footer .zbc-picker__picked {
  display: flex;
  flex: none;
  width: calc(100% + 2 * var(--zbc-s5));
  min-width: 0;
  gap: var(--zbc-s2);
  margin: 0 calc(-1 * var(--zbc-s5));
  padding: 4px var(--zbc-s5);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  scroll-padding-inline: var(--zbc-s5);
}

.zbc-picker__picked::-webkit-scrollbar { display: none; }
.zbc-picker__picked > li { flex: none; }
.zbc-picker__picked .zbc-chip { max-width: 15rem; }
.zbc-picker__picked-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 640px) {
  .zbc-picker__footer .zbc-picker__picked { flex-wrap: wrap; width: 100%; max-height: calc(2 * 36px + 3 * var(--zbc-s2)); margin: 0; padding: var(--zbc-s2) 2px; overflow-y: auto; }
}

@media (max-width: 639px) {
  .zbc-picker__footer .zbc-btn-group { flex: 1 1 100%; }
  .zbc-picker__footer .zbc-btn-group > .zbc-btn { flex: 1 1 0; }
}

/* Sheets: shared bits */
.zbc-sheet-error:empty { display: none; }

.zbc-datechange {
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s3) var(--zbc-s4);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
}

.zbc-datechange__item { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }

.zbc-datechange__label {
  color: var(--zbc-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
}

.zbc-datechange__date { color: var(--zbc-text); font-size: var(--zbc-fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.zbc-datechange__item.is-struck .zbc-datechange__date { color: var(--zbc-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.zbc-datechange__item.is-next .zbc-datechange__date { color: var(--zbc-lime-text); }
.zbc-datechange__arrow { flex: none; color: var(--zbc-muted); }

.zbc-quote {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s3);
  padding: var(--zbc-s4);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
  transition: opacity var(--zbc-dur) var(--zbc-ease);
}

.zbc-quote.is-updating { opacity: 0.6; }
.zbc-quote .zbc-notice { margin: calc(-1 * var(--zbc-s2)); }
.zbc-quote__headline { display: flex; align-items: flex-start; gap: var(--zbc-s2); color: var(--zbc-text); font-weight: 700; }
.zbc-quote__headline .zbc-icon { margin-top: 2px; color: var(--zbc-lime-text); }

/* Compact plan cards inside the "Change your box" sheet */
@media (min-width: 640px) {
  .zbc-plans--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zbc-s3); }
  .zbc-plans--compact .zbc-plan .zbc-choice__body {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "count name price";
    align-items: center;
    gap: var(--zbc-s3);
    padding: var(--zbc-s3) var(--zbc-s4);
  }
  .zbc-plans--compact .zbc-plan__count { width: 52px; height: 52px; margin-bottom: 0; }
  .zbc-plans--compact .zbc-plan__name { align-self: center; font-size: var(--zbc-fs-md); }
  .zbc-plans--compact .zbc-plan__price { justify-self: end; margin-top: 0; text-align: right; }
  .zbc-plans--compact .zbc-plan__price .zbc-price { font-size: 1.5rem; }
  .zbc-plans--compact .zbc-plan .zbc-choice__check { display: none; }
}

/* Cancel flow */
.zbc-offers {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-offer {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: var(--zbc-s2) var(--zbc-s3);
  padding: var(--zbc-s3) var(--zbc-s4);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-card-bg);
}

.zbc-offer > .zbc-btn { grid-column: 2; justify-self: start; }

@media (min-width: 480px) {
  .zbc-offer { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .zbc-offer > .zbc-btn { grid-column: auto; }
}

.zbc-offer__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
}

.zbc-offer__icon .zbc-icon { width: 20px; height: 20px; }
.zbc-offer__body { min-width: 0; }
.zbc-offer__title { color: var(--zbc-text); font-weight: 800; }
.zbc-offer__text { color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); }
.zbc-offer-cancel { margin: 0 auto; }

.zbc-reasons .zbc-check { padding: var(--zbc-s2) 0; border-bottom: 1px solid var(--zbc-line); }
.zbc-reasons .zbc-check__input { top: var(--zbc-s2); }
.zbc-cancel-done { align-items: center; text-align: center; }

.zbc-cancel-done__mark.zbc-success__mark {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  background: var(--zbc-surface-3);
  color: var(--zbc-text);
  box-shadow: inset 0 0 0 1px var(--zbc-line-strong);
}

.zbc-cancel-done__mark .zbc-icon { width: 28px; height: 28px; }

/* Saved cards */
.zbc-pm { display: flex; flex-direction: column; gap: var(--zbc-s3); }

.zbc-pm-list {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-pm__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark body" "buttons buttons";
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s3) var(--zbc-s4);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
}

@media (min-width: 480px) {
  .zbc-pm__item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark body buttons"; }
}

.zbc-pm__item.is-default { border-color: color-mix(in srgb, var(--zbc-lime) 35%, transparent); }
.zbc-pm__item.is-expired .zbc-cardmark { opacity: 0.55; }

.zbc-cardmark {
  grid-area: mark;
  display: grid;
  place-items: center;
  width: 52px;
  height: 36px;
  border-radius: var(--zbc-radius-xs);
  background: linear-gradient(135deg, var(--zbc-surface-3), var(--zbc-surface-hover));
  box-shadow: inset 0 0 0 1px var(--zbc-line-strong);
  color: var(--zbc-text);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.zbc-pm__body { grid-area: body; min-width: 0; }
.zbc-pm__label { color: var(--zbc-text); font-weight: 800; font-variant-numeric: tabular-nums; }

.zbc-pm__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zbc-s2);
  margin-top: 4px;
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
}

.zbc-pm__hint { margin-top: 4px; color: var(--zbc-muted); font-size: var(--zbc-fs-xs); line-height: 1.4; }
.zbc-pm__buttons { grid-area: buttons; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--zbc-s2); }

.zbc-pm__empty {
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s4);
  border: 1px dashed var(--zbc-line-strong);
  border-radius: var(--zbc-radius);
}

.zbc-pm__actions { display: flex; flex-wrap: wrap; gap: var(--zbc-s2); }

/* 15 Member: dashboard ------------------------------------------------------------------------- */
.zbc-dash-attention .zbc-attention { border-radius: var(--zbc-radius); }

.zbc-welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s4);
  padding: var(--zbc-s5);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--zbc-lime) 30%, transparent);
  border-radius: var(--zbc-radius-xl);
  background:
    radial-gradient(520px 260px at 0% 0%, var(--zbc-lime-wash), transparent 70%),
    radial-gradient(460px 240px at 100% 100%, var(--zbc-brand-wash), transparent 70%),
    var(--zbc-card-bg);
  box-shadow: var(--zbc-glow), var(--zbc-shadow);
  animation: zbc-pop var(--zbc-dur-slow) var(--zbc-ease-out) both;
}

.zbc-welcome:focus { outline: none; }

@media (min-width: 640px) {
  .zbc-welcome { grid-template-columns: auto minmax(0, 1fr); gap: var(--zbc-s5); padding: var(--zbc-s6); }
}

.zbc-welcome__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  box-shadow: var(--zbc-glow);
}

.zbc-welcome__mark .zbc-icon { width: 28px; height: 28px; }
.zbc-welcome__body { display: flex; flex-direction: column; gap: var(--zbc-s3); min-width: 0; }

.zbc-welcome__title {
  color: var(--zbc-text);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.125rem);
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-tight);
  line-height: var(--zbc-lh-tight);
  text-wrap: balance;
}

.zbc-welcome__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s2);
  margin: var(--zbc-s2) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .zbc-welcome__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zbc-s3); }
}

@media (min-width: 1200px) {
  .zbc-welcome__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zbc-welcome__step {
  display: flex;
  align-items: flex-start;
  gap: var(--zbc-s3);
  padding: var(--zbc-s3);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
}

.zbc-welcome__index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
  font-size: var(--zbc-fs-sm);
  font-weight: 800;
}

.zbc-welcome__step-title { display: flex; align-items: center; gap: 6px; color: var(--zbc-text); font-weight: 800; }
.zbc-welcome__step-title .zbc-icon { color: var(--zbc-lime-text); }
.zbc-welcome__step-text { margin-top: 2px; color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); }

/* Next box hero */
.zbc-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s5);
  padding: var(--zbc-s5);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--zbc-lime) 22%, transparent);
  border-radius: var(--zbc-radius-xl);
  background:
    radial-gradient(640px 320px at 100% 0%, var(--zbc-lime-wash), transparent 62%),
    radial-gradient(560px 300px at 0% 100%, var(--zbc-brand-wash), transparent 62%),
    var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight), var(--zbc-shadow);
}

.zbc-hero--quiet {
  border-color: var(--zbc-line);
  background: radial-gradient(560px 280px at 100% 0%, var(--zbc-brand-wash), transparent 62%), var(--zbc-card-bg);
}

.zbc-hero__main { display: flex; flex-direction: column; gap: var(--zbc-s3); min-width: 0; }

.zbc-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zbc-s2) var(--zbc-s3);
}

.zbc-hero__title {
  color: var(--zbc-text);
  font-size: clamp(1.625rem, 1.6vw + 1.1rem, 2.5rem);
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-tight);
  line-height: 1.08;
  text-wrap: balance;
}

.zbc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s1) var(--zbc-s4);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
}

.zbc-hero__lock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zbc-s2) var(--zbc-s3); }
.zbc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--zbc-s2); margin-top: var(--zbc-s2); }
.zbc-hero__art { display: none; min-width: 0; }
.zbc-hero__strip { margin-top: var(--zbc-s1); }
.zbc-hero__strip .zbc-thumbs { gap: 6px; }
.zbc-hero__strip .zbc-thumb { --zbc-thumb: 44px; }

@media (min-width: 480px) {
  .zbc-hero__strip .zbc-thumb { --zbc-thumb: 56px; }
}

@media (max-width: 639px) {
  .zbc-hero { padding: var(--zbc-s5) var(--zbc-s4); }
  .zbc-hero__actions > .zbc-btn { flex: 1 1 100%; }
}

@media (min-width: 900px) {
  .zbc-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--zbc-s6);
    padding: var(--zbc-s6) var(--zbc-s7);
  }
  .zbc-hero__art { display: block; }
  .zbc-hero__strip { display: none; }
  .zbc-hero__thumbs { display: grid; grid-template-columns: repeat(3, auto); gap: var(--zbc-s3); }
  .zbc-hero__thumbs .zbc-thumb { --zbc-thumb: 92px; border-radius: var(--zbc-radius-lg); }
  .zbc-hero__thumbs .zbc-thumb--more { font-size: var(--zbc-fs-xl); }
}

/* Cards */
.zbc-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s4);
}

@media (min-width: 900px) {
  .zbc-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zbc-s5); }
}

.zbc-dash-card > .zbc-card__footer { margin-top: auto; }

@media (min-width: 900px) {
  .zbc-dash-card--wide { grid-column: 1 / -1; }
  .zbc-dash-card--wide .zbc-recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zbc-s3); }
  .zbc-dash-card--wide .zbc-recent__item {
    padding: var(--zbc-s2) var(--zbc-s3);
    border: 1px solid var(--zbc-line);
    border-radius: var(--zbc-radius);
    background: var(--zbc-canvas-2);
  }
  .zbc-dash-card--wide .zbc-recent__item:last-child { border-bottom: 1px solid var(--zbc-line); }
}
.zbc-dash-profile { display: flex; align-items: center; gap: var(--zbc-s4); }
.zbc-dash-notes { display: flex; flex-direction: column; gap: 6px; }

.zbc-dash-notes .zbc-chip[data-level="love"] {
  --zbc-chip-bg: var(--zbc-lime-wash);
  --zbc-chip-fg: var(--zbc-lime-text);
  --zbc-chip-border: color-mix(in srgb, var(--zbc-lime-text) 35%, transparent);
}

.zbc-dash-notes .zbc-chip .zbc-icon { width: 12px; height: 12px; }

.zbc-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zbc-s2);
}

.zbc-stat--link {
  padding: var(--zbc-s3);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--zbc-dur) var(--zbc-ease), transform var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-stat--link:hover { border-color: var(--zbc-line-strong); color: inherit; }
.zbc-stat--link:focus-visible { border-radius: var(--zbc-radius); }
.zbc-stat--link .zbc-stat__label { display: flex; align-items: center; gap: 4px; letter-spacing: 0.06em; }
.zbc-stat--danger .zbc-stat__label .zbc-icon { color: var(--zbc-danger); }

@media (max-width: 479px) {
  .zbc-dash-stats { grid-template-columns: minmax(0, 1fr); }
  .zbc-dash-stats .zbc-stat--link { flex-direction: row; align-items: center; justify-content: space-between; min-height: var(--zbc-touch); padding: var(--zbc-s2) var(--zbc-s3); }
  .zbc-dash-stats .zbc-stat__value { font-size: var(--zbc-fs-xl); }
}

.zbc-recent {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-recent__item {
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s2) 0;
  border-bottom: 1px solid var(--zbc-line);
}

.zbc-recent__item:last-child { border-bottom: 0; }

.zbc-recent__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--zbc-s3);
  min-width: 0;
  min-height: var(--zbc-touch);
  border-radius: var(--zbc-radius-sm);
  color: inherit;
  text-decoration: none;
}

.zbc-recent__link:hover { color: inherit; }
.zbc-recent__link:hover .zbc-recent__title { text-decoration: underline; }

.zbc-recent__month {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-surface-3);
  color: var(--zbc-lime-text);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zbc-recent__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zbc-recent__title { color: var(--zbc-text); font-weight: 700; }
.zbc-recent__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zbc-s2); }

.zbc-dash-credit__value { font-size: 1.75rem; color: var(--zbc-lime-text); }

/* 16 Member: next box ------------------------------------------------------------------------- */
.zbc-nextbox__subs { margin-top: var(--zbc-s1); }

.zbc-boxlines {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-boxline {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "thumb body"
    "actions actions";
  gap: var(--zbc-s3);
  padding: var(--zbc-s3);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight), var(--zbc-shadow-sm);
  transition: border-color var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease), opacity var(--zbc-dur) var(--zbc-ease);
}

.zbc-boxline:hover { border-color: var(--zbc-line-strong); }
.zbc-boxline.is-kept { border-color: color-mix(in srgb, var(--zbc-lime) 30%, transparent); }
.zbc-boxline.is-busy { opacity: 0.6; }
.zbc-boxline.is-new { border-color: var(--zbc-lime-text); box-shadow: var(--zbc-card-highlight), var(--zbc-glow); animation: zbc-pop var(--zbc-dur-slow) var(--zbc-ease-out) both; }
.zbc-boxline__thumb { grid-area: thumb; align-self: start; }
.zbc-boxline__body { grid-area: body; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zbc-boxline__name { font-size: var(--zbc-fs-md); }
.zbc-boxline__kept .zbc-icon { width: 12px; height: 12px; }

.zbc-boxline__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zbc-s2);
  padding-top: var(--zbc-s3);
  border-top: 1px solid var(--zbc-line);
}

.zbc-boxline__actions > .zbc-btn:not(.zbc-btn--icon):not(.zbc-boxline__never) { flex: 1 1 0; }
.zbc-boxline__spinner { position: absolute; top: var(--zbc-s3); right: var(--zbc-s3); }

.zbc-boxline.is-out .zbc-boxline__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--zbc-scrim);
}

@media (max-width: 479px) {
  .zbc-boxline__never { width: 36px; min-width: 36px; padding: 0; }
  .zbc-boxline__never .zbc-btn__text { display: none; }
}

@media (min-width: 640px) {
  .zbc-boxline {
    grid-template-areas:
      "thumb body"
      "thumb actions";
    column-gap: var(--zbc-s4);
    padding: var(--zbc-s4);
  }
  .zbc-boxline__actions { padding-top: 0; border-top: 0; }
  .zbc-boxline__actions > .zbc-btn:not(.zbc-btn--icon):not(.zbc-boxline__never) { flex: 0 0 auto; }
}

/* Extras */
.zbc-extras {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-extra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s2) var(--zbc-s2) var(--zbc-s2) var(--zbc-s3);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
  transition: opacity var(--zbc-dur) var(--zbc-ease);
}

.zbc-extra.is-busy { opacity: 0.55; }
.zbc-extra.is-new { animation: zbc-pop var(--zbc-dur-slow) var(--zbc-ease-out) both; box-shadow: inset 0 0 0 1px var(--zbc-lime); }
.zbc-extra__body { min-width: 0; }
.zbc-extra__name { overflow: hidden; color: var(--zbc-text); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.zbc-extra__name a { color: inherit; text-decoration: none; }
.zbc-extra__name a:hover { text-decoration: underline; }
.zbc-extra__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--zbc-muted); font-size: var(--zbc-fs-xs); }
.zbc-extra__price { color: var(--zbc-text); font-weight: 800; }
.zbc-nextbox__extras .zbc-stack > .zbc-btn { align-self: flex-start; }

/* Build my own */
.zbc-build__progress { display: flex; align-items: center; gap: var(--zbc-s3); }
.zbc-build__progress .zbc-progress { flex: 1; height: 8px; }
.zbc-build__count { color: var(--zbc-lime-text); font-weight: 800; }

/* Summary */
.zbc-nextbox__summary { gap: var(--zbc-s4); }

.zbc-nextbox__charge {
  display: flex;
  align-items: flex-start;
  gap: var(--zbc-s2);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-sm);
}

.zbc-nextbox__charge .zbc-icon { margin-top: 3px; color: var(--zbc-lime-text); }
.zbc-nextbox__rate .zbc-card__header { align-items: center; flex-wrap: wrap; }

@media (min-width: 900px) {
  .zbc-nextbox__bar { display: none; }
  .zbc-body.zbc-actionbar-mobile-only { --zbc-toast-offset: 0px; }
}

/* 17 Member: flavor profile ------------------------------------------------------------------ */
.zbc-prefs__meter {
  display: flex;
  align-items: center;
  gap: var(--zbc-s4);
  max-width: 520px;
  padding: var(--zbc-s3) var(--zbc-s5) var(--zbc-s3) var(--zbc-s3);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight);
}

.zbc-prefs__groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zbc-s5); }

@media (min-width: 900px) {
  .zbc-prefs__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zbc-s5) var(--zbc-s6); }
}

.zbc-prefs__group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--zbc-s2); min-height: 36px; }

.zbc-prefs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zbc-s4); }

@media (min-width: 900px) {
  .zbc-prefs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zbc-s5); align-items: start; }
}

.zbc-prefs__family { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zbc-s2); }

@media (min-width: 480px) {
  .zbc-prefs__family { grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: var(--zbc-s3); }
}

.zbc-prefs__family-label { display: flex; align-items: center; gap: var(--zbc-s3); color: var(--zbc-text); font-weight: 800; }
.zbc-prefs__family .zbc-segmented__label { min-height: var(--zbc-touch); }
.zbc-prefs__family .zbc-choice__icon { width: 36px; height: 36px; }

.zbc-range.is-unset .zbc-range__value { background: var(--zbc-surface-3); color: var(--zbc-muted); }
.zbc-range.is-unset .zbc-range__input::-webkit-slider-runnable-track { background: var(--zbc-surface-3); }
.zbc-range.is-unset .zbc-range__input::-webkit-slider-thumb { border-color: var(--zbc-muted); }
.zbc-range.is-unset .zbc-range__input::-moz-range-thumb { border-color: var(--zbc-muted); }
.zbc-range.is-unset .zbc-range__input::-moz-range-progress { background: transparent; }
.zbc-prefs__slider .zbc-row { min-height: 36px; }
.zbc-prefs__bar.is-dirty .zbc-prefs__state { color: var(--zbc-warn); }
.zbc-prefs__state-short { display: none; }

@media (max-width: 639px) {
  .zbc-prefs__state-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zbc-prefs__state-short { display: inline; }
  .zbc-prefs__discard { width: var(--zbc-touch); min-width: var(--zbc-touch); padding: 0; }
  .zbc-prefs__discard .zbc-btn__text { display: none; }
}

/* 18 Member: queue and lists ------------------------------------------------------------------ */
.zbc-queue {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-queue__item {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "handle pos thumb body"
    "actions actions actions actions";
  align-items: center;
  gap: var(--zbc-s2) var(--zbc-s3);
  padding: var(--zbc-s2) var(--zbc-s3) var(--zbc-s2) var(--zbc-s2);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-card-bg);
  box-shadow: var(--zbc-card-highlight);
  transition: border-color var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease);
}

.zbc-queue__item.is-first { border-color: color-mix(in srgb, var(--zbc-lime) 30%, transparent); }

@media (min-width: 640px) {
  .zbc-queue__item {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "handle pos thumb body actions";
  }
}

.zbc-queue__handle {
  grid-area: handle;
  display: grid;
  place-items: center;
  width: 32px;
  height: var(--zbc-touch);
  padding: 0;
  border: 0;
  border-radius: var(--zbc-radius-xs);
  background: transparent;
  color: var(--zbc-muted);
  cursor: grab;
  touch-action: none;
}

.zbc-queue__handle:hover { background: var(--zbc-surface-hover); color: var(--zbc-text); }
.zbc-queue__handle .zbc-icon { width: 20px; height: 20px; }
.zbc-queue__pos { grid-area: pos; }
.zbc-queue__item.is-first .zbc-queue__pos { background: var(--zbc-lime); color: var(--zbc-lime-ink); }
.zbc-queue__item > .zbc-thumb { grid-area: thumb; }
.zbc-queue__body { grid-area: body; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zbc-queue__name { overflow: hidden; color: var(--zbc-text); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.zbc-queue__name a { color: inherit; text-decoration: none; }
.zbc-queue__name a:hover { text-decoration: underline; }
.zbc-queue__next .zbc-icon { width: 12px; height: 12px; }
.zbc-queue__actions { grid-area: actions; display: flex; justify-content: flex-end; gap: 4px; }

@media (max-width: 639px) {
  /* Phones: position number sits on the thumbnail corner; move/remove buttons line up under the name. */
  .zbc-queue__item {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "handle thumb body"
      "handle thumb actions";
    align-items: start;
    row-gap: var(--zbc-s1);
  }
  .zbc-queue__handle { align-self: center; }
  .zbc-queue__pos {
    grid-area: thumb;
    z-index: 1;
    align-self: start;
    justify-self: start;
    transform: translate(-8px, -6px);
    box-shadow: 0 0 0 2px var(--zbc-surface);
  }
  .zbc-queue__item > .zbc-thumb { align-self: start; margin-top: var(--zbc-s1); }
  .zbc-queue__actions { justify-content: flex-start; margin-left: -6px; }
}

.zbc-queue-card > .zbc-card__header { flex-wrap: wrap; }

@media (max-width: 639px) {
  .zbc-queue-card > .zbc-card__header > .zbc-badge { margin-left: calc(40px + var(--zbc-s3)); }
}

.zbc-queue.is-sorting { user-select: none; -webkit-user-select: none; }

.zbc-queue__item.is-dragging {
  z-index: 5;
  border-color: var(--zbc-lime-text);
  background: var(--zbc-surface-2);
  box-shadow: var(--zbc-glow), var(--zbc-shadow-lg);
  transition: none;
}

.zbc-queue__item.is-dragging .zbc-queue__handle { cursor: grabbing; color: var(--zbc-lime-text); }
.zbc-queue__item.is-moved { animation: zbc-flash 900ms var(--zbc-ease-out); }

@keyframes zbc-flash {
  from { border-color: var(--zbc-lime-text); box-shadow: var(--zbc-glow); }
}

/* Lists */
.zbc-lists__card { gap: var(--zbc-s5); }
.zbc-lists__panel { display: flex; flex-direction: column; gap: var(--zbc-s4); min-width: 0; }
.zbc-lists__panel:focus-visible { border-radius: var(--zbc-radius); }

.zbc-lists__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zbc-s3);
}

.zbc-lists__head > p .zbc-icon { color: var(--zbc-lime-text); }

.zbc-listrows {
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zbc-listrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "thumb body"
    "actions actions";
  align-items: center;
  gap: var(--zbc-s3);
  padding: var(--zbc-s3);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-canvas-2);
}

@media (min-width: 640px) {
  .zbc-listrow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "thumb body actions"; }
}

.zbc-listrow > .zbc-thumb { grid-area: thumb; }
.zbc-listrow__body { grid-area: body; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zbc-listrow__name { color: var(--zbc-text); font-weight: 800; }
.zbc-listrow__name a { color: inherit; text-decoration: none; }
.zbc-listrow__name a:hover { text-decoration: underline; }
.zbc-listrow__actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--zbc-s2); }
.zbc-listrow.is-never { border-left: 3px solid var(--zbc-danger); }
.zbc-listrow.is-never > .zbc-thumb { filter: grayscale(0.7); }

/* 19 Member: past boxes and ratings ------------------------------------------------------------ */
.zbc-history-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zbc-s4); }

@media (min-width: 900px) {
  .zbc-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zbc-s5); }
}

.zbc-boxcard > .zbc-card__footer { margin-top: auto; }
.zbc-boxcard__head { display: flex; align-items: flex-start; gap: var(--zbc-s3); }

.zbc-boxcard__cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 56px;
  flex: none;
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-surface-3);
  box-shadow: inset 0 0 0 1px var(--zbc-line-strong);
  line-height: 1;
}

.zbc-boxcard__cal span { color: var(--zbc-lime-text); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.zbc-boxcard__cal strong { margin-top: 4px; color: var(--zbc-text); font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.zbc-boxcard__rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zbc-s2) var(--zbc-s3); }
.zbc-boxcard__actions { justify-content: flex-start; }
.zbc-boxcard.is-skipped,
.zbc-boxcard.is-cancelled { background: var(--zbc-canvas-2); box-shadow: none; }
.zbc-boxcard.is-skipped .zbc-thumbs,
.zbc-boxcard.is-cancelled .zbc-thumbs { opacity: 0.55; }

.zbc-rates {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zbc-s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  .zbc-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--zbc-s5); }
}

.zbc-rate { gap: var(--zbc-s4); }
.zbc-rate.is-rated { border-color: color-mix(in srgb, var(--zbc-lime) 22%, transparent); }

.zbc-rate__head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--zbc-s3) var(--zbc-s4);
}

.zbc-rate__title { display: flex; flex-direction: column; gap: var(--zbc-s2); min-width: 0; padding-right: 64px; }

.zbc-rate__status {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--zbc-muted);
  font-size: var(--zbc-fs-xs);
  font-weight: 700;
}

.zbc-rate__status .zbc-icon { width: 14px; height: 14px; }
.zbc-rate__status .zbc-spinner { width: 12px; height: 12px; }
.zbc-rate__status[data-state="saved"] { color: var(--zbc-ok); }
.zbc-rate__status[data-state="failed"] { color: var(--zbc-danger); }
.zbc-rate__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zbc-s1) var(--zbc-s3); margin-left: -6px; }
.zbc-rate__stars { display: inline-flex; gap: 0; }

.zbc-rate__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.zbc-rate__star {
  display: grid;
  place-items: center;
  width: var(--zbc-touch);
  height: var(--zbc-touch);
  border-radius: var(--zbc-radius-sm);
  color: var(--zbc-muted);
  cursor: pointer;
  transition: color var(--zbc-dur-fast) var(--zbc-ease), transform var(--zbc-dur-fast) var(--zbc-ease);
}

.zbc-rate__star .zbc-icon { width: 30px; height: 30px; }
.zbc-rate__star:hover { transform: scale(1.08); }
.zbc-rate__star.is-on { color: var(--zbc-warn); }
.zbc-rate__input:focus-visible + .zbc-rate__star { box-shadow: var(--zbc-ring); }
.zbc-rate__word { color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); font-weight: 700; }
.zbc-rate__more { display: none; flex-direction: column; gap: var(--zbc-s2); }
.zbc-rate.is-rated .zbc-rate__more { display: flex; }
.zbc-rate__note { min-height: 76px; }

.zbc-rate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s2);
  padding-top: var(--zbc-s3);
  border-top: 1px solid var(--zbc-line);
}

.zbc-ratepage__progress { flex: 1; gap: 6px; }
.zbc-ratepage__progress .zbc-progress { width: 100%; max-width: 280px; }

@media (max-width: 479px) {
  .zbc-rate__head .zbc-thumb--xl { --zbc-thumb: 56px; }
  .zbc-rate__title { padding-right: 0; }
  .zbc-rate__status { position: static; grid-column: 1 / -1; }
}

/* Smallest phones: the five 44px stars get the full card width under the name. */
@media (max-width: 379px) {
  .zbc-rate__head { row-gap: var(--zbc-s1); }
  .zbc-rate__title { display: contents; }
  .zbc-rate__head > .zbc-thumb { grid-row: span 2; }
  .zbc-rate__title > .zbc-product__meta { grid-column: 2; align-self: end; }
  .zbc-rate__title > .zbc-product__name { grid-column: 2; }
  .zbc-rate__control { grid-column: 1 / -1; margin-top: var(--zbc-s2); }
}

/* 20 Member: manage membership and payment ------------------------------------------------------ */
.zbc-manage__sub { gap: var(--zbc-s5); }
.zbc-manage__sub.is-cancelled { background: var(--zbc-canvas-2); }
.zbc-manage__overview { display: flex; flex-direction: column; gap: var(--zbc-s3); }

.zbc-manage__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zbc-s2);
  margin: 0;
}

@media (min-width: 900px) {
  .zbc-manage__facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--zbc-s3); }
}

.zbc-manage__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--zbc-s3);
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-canvas-2);
  box-shadow: inset 0 0 0 1px var(--zbc-line);
}

.zbc-manage__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .zbc-manage__fact:last-child:nth-child(odd) { grid-column: auto; }
}

.zbc-manage__fact dt { color: var(--zbc-muted); font-size: 0.6875rem; font-weight: 800; letter-spacing: var(--zbc-tracking-caps); text-transform: uppercase; }
.zbc-manage__fact dd { margin: 0; color: var(--zbc-text); font-weight: 700; overflow-wrap: anywhere; }
.zbc-manage__group { display: flex; flex-direction: column; gap: var(--zbc-s2); }

.zbc-manage__group-title {
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
}

.zbc-manage__danger { padding-top: var(--zbc-s4); border-top: 1px solid var(--zbc-line); }
.zbc-manage__danger .zbc-action { background: transparent; }

@media (min-width: 640px) {
  .zbc-manage__danger .zbc-action { max-width: calc(50% - var(--zbc-s1)); }
}

.zbc-payment__card { max-width: 760px; }

@media (forced-colors: active) {
  .zbc-action,
  .zbc-boxline,
  .zbc-queue__item,
  .zbc-listrow,
  .zbc-pm__item { border-color: CanvasText; }
  .zbc-tab[aria-selected="true"],
  .zbc-rate__star.is-on { outline: 2px solid Highlight; }
  .zbc-ring { forced-color-adjust: none; }
}

/* ==========================================================================
   Vapor page transitions (assets/club/js/theme.js). When a member moves between club pages, a few
   pre-rendered vape clouds (assets/club/img/smoke-*.webp, made by tools/make-smoke.py) billow in from the
   left, cover the page for a moment and dissipate off the other side on the next page. Everything here is
   transform + opacity on textured layers — no blur or other filters, which is what keeps it cheap on big
   monitors and phones alike. Hidden and inert by default; reduced-motion visitors never see it.
   ========================================================================== */
.zbc-vapor {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  contain: layout paint;
}

/* A soft haze behind the clouds gives them depth against the page (plain gradient, painted once). */
.zbc-vapor__haze {
  position: absolute;
  inset: -20%;
  background: radial-gradient(55% 55% at 42% 58%, var(--zbc-vapor-haze) 0%, transparent 72%);
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
  will-change: transform, opacity;
}

.zbc-vapor__plume {
  position: absolute;
  width: min(110vmax, 1700px);
  aspect-ratio: 8 / 5;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transform: translate3d(-110%, 14%, 0) scale(0.82);
  will-change: transform, opacity;
}

.zbc-vapor__plume--1 { top: -28vmax; left: -8vmax; background-image: url("img/smoke-1.webp"); }
.zbc-vapor__plume--2 { top: 6vmax; left: -2vmax; width: min(130vmax, 2000px); background-image: url("img/smoke-2.webp"); }
.zbc-vapor__plume--3 { top: 26vmax; left: -18vmax; background-image: url("img/smoke-3.webp"); }
.zbc-vapor__plume--4 { top: 42vmax; left: 16vmax; width: min(92vmax, 1400px); background-image: url("img/smoke-1.webp"); }
.zbc-vapor__plume--5 { top: -12vmax; left: 34vmax; width: min(84vmax, 1300px); background-image: url("img/smoke-3.webp"); }

.zbc-vapor.is-in { opacity: 1; }
.zbc-vapor.is-in .zbc-vapor__haze { animation: zbc-haze-in var(--zbc-dur-vapor) var(--zbc-ease-out) forwards; }
.zbc-vapor.is-in .zbc-vapor__plume { animation: zbc-vapor-in var(--zbc-dur-vapor) var(--zbc-ease-out) forwards; }
.zbc-vapor.is-in .zbc-vapor__plume--2 { animation-delay: 40ms; }
.zbc-vapor.is-in .zbc-vapor__plume--3 { animation-delay: 20ms; }
.zbc-vapor.is-in .zbc-vapor__plume--4 { animation-delay: 70ms; }
.zbc-vapor.is-in .zbc-vapor__plume--5 { animation-delay: 90ms; }
.zbc-vapor[data-direction="back"].is-in .zbc-vapor__plume { animation-name: zbc-vapor-in-back; }
.zbc-vapor[data-direction="back"].is-in .zbc-vapor__haze { animation-name: zbc-haze-in-back; }

/* Static cover while the arriving page boots (html.zbc-arriving, set by the shell before first paint):
   the same clouds, painted once at their "covered" positions. */
html.zbc-arriving body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 199;
  pointer-events: none;
  background:
    url("img/smoke-2.webp") no-repeat 55% 42% / min(130vmax, 2000px) auto,
    url("img/smoke-1.webp") no-repeat 8% 10% / min(110vmax, 1700px) auto,
    url("img/smoke-3.webp") no-repeat 35% 92% / min(110vmax, 1700px) auto,
    radial-gradient(55% 55% at 45% 55%, var(--zbc-vapor-haze) 0%, transparent 72%);
  /* Safety: even if the script never runs, the cover clears on its own. */
  animation: zbc-cover-clear 420ms var(--zbc-ease) 900ms forwards;
}

@keyframes zbc-cover-clear {
  to { opacity: 0; visibility: hidden; }
}

.zbc-vapor.is-covered { opacity: 1; }
.zbc-vapor.is-covered .zbc-vapor__haze { opacity: 1; transform: translate3d(0, 0, 0); }
.zbc-vapor.is-covered .zbc-vapor__plume { opacity: 1; transform: translate3d(0, -6%, 0) scale(1.08); }
.zbc-vapor[data-direction="back"].is-covered .zbc-vapor__plume { transform: translate3d(0, -6%, 0) scale(1.08); }

.zbc-vapor.is-out { opacity: 1; }
.zbc-vapor.is-out .zbc-vapor__haze { animation: zbc-haze-out calc(var(--zbc-dur-vapor) * 1.3) var(--zbc-ease) forwards; }
.zbc-vapor.is-out .zbc-vapor__plume { animation: zbc-vapor-out calc(var(--zbc-dur-vapor) * 1.3) var(--zbc-ease) forwards; }
.zbc-vapor.is-out .zbc-vapor__plume--2 { animation-delay: 30ms; }
.zbc-vapor.is-out .zbc-vapor__plume--4 { animation-delay: 50ms; }
.zbc-vapor.is-out .zbc-vapor__plume--5 { animation-delay: 15ms; }
.zbc-vapor[data-direction="back"].is-out .zbc-vapor__plume { animation-name: zbc-vapor-out-back; }
.zbc-vapor[data-direction="back"].is-out .zbc-vapor__haze { animation-name: zbc-haze-out-back; }

/* Exhale: clouds billow in from the lower left, rising and swelling as they cover the page… */
@keyframes zbc-vapor-in {
  0% { opacity: 0; transform: translate3d(-110%, 14%, 0) scale(0.82); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, -6%, 0) scale(1.08); }
}

@keyframes zbc-vapor-in-back {
  0% { opacity: 0; transform: translate3d(110%, 14%, 0) scale(0.82); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, -6%, 0) scale(1.08); }
}

/* …and on the next page keep drifting up and away while they thin out. */
@keyframes zbc-vapor-out {
  0% { opacity: 1; transform: translate3d(0, -6%, 0) scale(1.08); }
  55% { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(70%, -26%, 0) scale(1.34); }
}

@keyframes zbc-vapor-out-back {
  0% { opacity: 1; transform: translate3d(0, -6%, 0) scale(1.08); }
  55% { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(-70%, -26%, 0) scale(1.34); }
}

@keyframes zbc-haze-in {
  0% { opacity: 0; transform: translate3d(-30%, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes zbc-haze-in-back {
  0% { opacity: 0; transform: translate3d(30%, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes zbc-haze-out {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(30%, -10%, 0); }
}

@keyframes zbc-haze-out-back {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(-30%, -10%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .zbc-vapor { display: none; }
  html.zbc-arriving body::before { display: none; }
}

/* ==========================================================================
   Landing page (templates/club/landing.php) — the club's public front door at /{base}/ for guests.
   Server-rendered; shares the header, footer, tokens and buttons with the app.
   ========================================================================== */
.zbc-landing {
  width: 100%;
  max-width: var(--zbc-max);
  margin: 0 auto;
  padding: var(--zbc-s6) var(--zbc-gutter) var(--zbc-s9);
  scroll-behavior: smooth;
}

.zbc-landing__hero {
  display: grid;
  gap: var(--zbc-s6);
  align-items: center;
  padding: var(--zbc-s6) 0 var(--zbc-s7);
}

@media (min-width: 900px) {
  .zbc-landing { padding-top: var(--zbc-s7); }
  .zbc-landing__hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--zbc-s8); padding: var(--zbc-s7) 0 var(--zbc-s8); }
}

.zbc-landing__title {
  margin: var(--zbc-s2) 0 var(--zbc-s4);
  font-size: var(--zbc-fs-3xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.zbc-landing__lead {
  max-width: 56ch;
  margin: 0 0 var(--zbc-s5);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-lg);
  line-height: 1.55;
}

.zbc-landing__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zbc-s3);
}

.zbc-landing__savings {
  display: inline-flex;
  align-items: center;
  gap: var(--zbc-s2);
  margin: var(--zbc-s4) 0 0;
  color: var(--zbc-lime-text);
  font-size: var(--zbc-fs-sm);
  font-weight: 700;
}

.zbc-landing__savings .zbc-icon { width: 16px; height: 16px; }

/* The four promises, as a soft card beside the hero copy */
.zbc-landing__points {
  display: grid;
  gap: var(--zbc-s3);
  margin: 0;
  padding: var(--zbc-s5);
  list-style: none;
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-lg);
  background: linear-gradient(160deg, var(--zbc-lime-wash), var(--zbc-surface) 60%);
  box-shadow: var(--zbc-shadow-sm);
}

.zbc-landing__points li {
  display: flex;
  align-items: center;
  gap: var(--zbc-s3);
  font-weight: 600;
}

.zbc-landing__point-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--zbc-pill);
  background: var(--zbc-surface);
  border: 1px solid var(--zbc-line);
  color: var(--zbc-lime-text);
}

.zbc-landing__point-icon .zbc-icon { width: 18px; height: 18px; }

.zbc-landing__section {
  padding: var(--zbc-s8) 0 0;
  scroll-margin-top: calc(var(--zbc-bar-h) + var(--zbc-s4));
}

.zbc-landing__section-head {
  max-width: 62ch;
  margin-bottom: var(--zbc-s6);
}

.zbc-landing__h2 {
  margin: var(--zbc-s2) 0 var(--zbc-s3);
  font-size: var(--zbc-fs-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Boxes */
.zbc-landing__plans {
  display: grid;
  gap: var(--zbc-s4);
}

@media (min-width: 640px) { .zbc-landing__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .zbc-landing__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zbc-s5); } }

.zbc-landing__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--zbc-s3);
  padding: var(--zbc-s5);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-surface);
  box-shadow: var(--zbc-shadow-sm);
  transition: transform var(--zbc-dur) var(--zbc-ease), box-shadow var(--zbc-dur) var(--zbc-ease), border-color var(--zbc-dur) var(--zbc-ease);
}

.zbc-landing__plan:hover { transform: translateY(-2px); box-shadow: var(--zbc-shadow); border-color: var(--zbc-line-strong); }
.zbc-landing__plan.is-popular { border-color: var(--zbc-lime-2); box-shadow: var(--zbc-glow); }

.zbc-landing__badge {
  position: absolute;
  top: -12px;
  right: var(--zbc-s4);
  padding: 4px 10px;
  border-radius: var(--zbc-pill);
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
  letter-spacing: var(--zbc-tracking-caps);
  text-transform: uppercase;
}

.zbc-landing__plan-count {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  min-width: 56px;
  padding: var(--zbc-s2) var(--zbc-s3);
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-surface-2);
  line-height: 1;
}

.zbc-landing__plan-count strong { font-size: var(--zbc-fs-xl); font-weight: 800; }
.zbc-landing__plan-count span { margin-top: 4px; font-size: 0.62rem; font-weight: 800; letter-spacing: var(--zbc-tracking-caps); text-transform: uppercase; color: var(--zbc-muted); }
.zbc-landing__plan.is-popular .zbc-landing__plan-count { background: var(--zbc-lime); color: var(--zbc-lime-ink); }
.zbc-landing__plan.is-popular .zbc-landing__plan-count span { color: var(--zbc-lime-ink); }

.zbc-landing__plan-name { margin: 0; font-size: var(--zbc-fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.zbc-landing__plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--zbc-s2); margin: 0; }
.zbc-landing__price { font-size: var(--zbc-fs-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.zbc-landing__per-item { flex-basis: 100%; margin-top: 4px; color: var(--zbc-muted); font-size: var(--zbc-fs-sm); }
.zbc-landing__plan-line { flex: 1; margin: 0; color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); }
.zbc-landing__plan .zbc-btn { width: 100%; }

/* How it works */
.zbc-landing__steps {
  display: grid;
  gap: var(--zbc-s4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 700px) { .zbc-landing__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .zbc-landing__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.zbc-landing__step {
  position: relative;
  padding: var(--zbc-s5);
  padding-top: var(--zbc-s6);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-surface);
}

.zbc-landing__step-index {
  position: absolute;
  top: var(--zbc-s4);
  right: var(--zbc-s4);
  color: var(--zbc-faint);
  font-size: var(--zbc-fs-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.zbc-landing__step-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--zbc-s3);
  border-radius: var(--zbc-radius-sm);
  background: var(--zbc-lime-wash);
  color: var(--zbc-lime-text);
}

.zbc-landing__step-icon .zbc-icon { width: 22px; height: 22px; }
.zbc-landing__step h3 { margin: 0 0 var(--zbc-s2); font-size: var(--zbc-fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.zbc-landing__step p { margin: 0; color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); line-height: 1.55; }

/* FAQ */
.zbc-landing__faq {
  display: grid;
  gap: var(--zbc-s2);
  max-width: 76ch;
}

.zbc-landing__faq-item {
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius);
  background: var(--zbc-surface);
}

.zbc-landing__faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zbc-s3);
  padding: var(--zbc-s4) var(--zbc-s5);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.zbc-landing__faq-item summary::-webkit-details-marker { display: none; }
.zbc-landing__faq-item summary:focus-visible { outline: none; box-shadow: var(--zbc-ring); border-radius: var(--zbc-radius); }
.zbc-landing__faq-chevron { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--zbc-muted); transition: transform var(--zbc-dur) var(--zbc-ease); }
.zbc-landing__faq-chevron .zbc-icon { width: 18px; height: 18px; }
.zbc-landing__faq-item[open] .zbc-landing__faq-chevron { transform: rotate(180deg); }
.zbc-landing__faq-item p { margin: 0; padding: 0 var(--zbc-s5) var(--zbc-s5); color: var(--zbc-text-2); line-height: 1.6; }

/* Closing call to action */
.zbc-landing__final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zbc-s3);
  margin-top: var(--zbc-s9);
  padding: var(--zbc-s7) var(--zbc-s5);
  text-align: center;
  border-radius: var(--zbc-radius-xl);
  background: radial-gradient(80% 120% at 50% 0%, var(--zbc-lime-wash), var(--zbc-surface-2) 70%);
  border: 1px solid var(--zbc-line);
}

.zbc-landing__final .zbc-text-2 { max-width: 48ch; margin: 0; }
.zbc-landing__final .zbc-btn { margin-top: var(--zbc-s2); }
.zbc-landing__final a:not(.zbc-btn) { color: var(--zbc-lime-text); font-weight: 700; }

/* ---- Perks: "On the house" band between the boxes and how it works ------------------------------- */
.zbc-landing__perks {
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: center;
  gap: var(--zbc-s6);
  margin-top: var(--zbc-s8);
  padding: var(--zbc-s6);
  border: 1px solid var(--zbc-line);
  border-radius: var(--zbc-radius-xl);
  background: linear-gradient(120deg, var(--zbc-lime-wash), var(--zbc-surface) 55%);
  box-shadow: var(--zbc-shadow-sm);
}

.zbc-landing__perks-art {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: var(--zbc-radius-lg);
  background: var(--zbc-lime);
  color: var(--zbc-lime-ink);
  box-shadow: var(--zbc-glow);
}

.zbc-landing__perks-art .zbc-icon { width: 64px; height: 64px; }
.zbc-landing__perks-copy .zbc-landing__h2 { margin: 0 0 var(--zbc-s3); }
.zbc-landing__perks-copy .zbc-text-2 { margin: var(--zbc-s3) 0 0; max-width: 60ch; }

.zbc-landing__perk-list {
  display: grid;
  gap: var(--zbc-s2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.zbc-landing__perk-list li { display: flex; align-items: center; gap: var(--zbc-s2); }
.zbc-landing__perk-list .zbc-icon { width: 18px; height: 18px; flex: none; color: var(--zbc-lime-text); }

@media (max-width: 640px) {
  .zbc-landing__perks { grid-template-columns: 1fr; gap: var(--zbc-s4); padding: var(--zbc-s5); }
  .zbc-landing__perks-art { width: 96px; height: 96px; }
  .zbc-landing__perks-art .zbc-icon { width: 44px; height: 44px; }
}

/* ---- Perks on the dashboard and the next-box page -------------------------------------------------- */
.zbc-thumb--gift { background: var(--zbc-lime); color: var(--zbc-lime-ink); }
.zbc-thumb--gift > svg { width: 100%; height: 100%; padding: 26%; filter: none; stroke-width: 1.6; }
.zbc-perk { display: grid; gap: var(--zbc-s2); padding: var(--zbc-s3) 0; border-top: 1px solid var(--zbc-line); }
.zbc-perk:first-of-type { border-top: 0; padding-top: 0; }
.zbc-perk__head { display: flex; align-items: center; justify-content: space-between; gap: var(--zbc-s3); }
.zbc-perk__name { font-weight: 800; }
.zbc-perk__status { margin: 0; color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); }
.zbc-perk__steps { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zbc-perk__steps li {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--zbc-pill);
  border: 1px solid var(--zbc-line);
  background: var(--zbc-surface-2);
  color: var(--zbc-text-2);
  font-size: var(--zbc-fs-xs);
  font-weight: 800;
}
.zbc-perk__steps li.is-done { background: var(--zbc-lime); border-color: transparent; color: var(--zbc-lime-ink); }
.zbc-perk__steps li.is-next { border-color: var(--zbc-lime-text); color: var(--zbc-lime-text); box-shadow: var(--zbc-ring); }
.zbc-perk__steps li.is-gift .zbc-icon { width: 14px; height: 14px; }
.zbc-perk__steps li.is-gift { background: var(--zbc-lime-wash); color: var(--zbc-lime-text); border-color: var(--zbc-lime-text); }
.zbc-perk__steps li.is-gift.is-done { background: var(--zbc-lime); color: var(--zbc-lime-ink); }
.zbc-boxline--gift { background: linear-gradient(90deg, var(--zbc-lime-wash), transparent 70%); }
.zbc-boxline--gift .zbc-badge { background: var(--zbc-lime); color: var(--zbc-lime-ink); border-color: transparent; }
.zbc-perk-note { display: flex; align-items: center; gap: var(--zbc-s2); margin: var(--zbc-s3) 0 0; padding: var(--zbc-s3) var(--zbc-s4); border: 1px dashed var(--zbc-line-strong); border-radius: var(--zbc-radius); color: var(--zbc-text-2); font-size: var(--zbc-fs-sm); }
.zbc-perk-note .zbc-icon { width: 18px; height: 18px; flex: none; color: var(--zbc-lime-text); }
.zbc-join__trust .zbc-join__perk { color: var(--zbc-lime-text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .zbc-landing { scroll-behavior: auto; }
  .zbc-landing__plan:hover { transform: none; }
}

/* ---- Biscuit, the sad puppy (cancellation screen) ------------------------------------------------ */
.zbc-puppy { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto 2px; }
.zbc-puppy svg { display: block; width: 132px; height: auto; overflow: visible; }
.zbc-puppy--sm svg { width: 92px; }
.zbc-puppy__caption { margin: 0; font-size: 14px; line-height: 1.4; color: var(--zbc-muted); text-align: center; font-style: italic; }
.zbc-puppy__shadow { fill: var(--zbc-text); opacity: 0.08; }
.zbc-puppy__head, .zbc-puppy__ear, .zbc-puppy__patch, .zbc-puppy__muzzle { stroke: #4a2e17; stroke-width: 2.4; stroke-linejoin: round; }
.zbc-puppy__head { fill: #dfa96b; }
.zbc-puppy__ear { fill: #a9672d; }
.zbc-puppy__patch { fill: #a9672d; stroke: none; opacity: 0.55; }
.zbc-puppy__muzzle { fill: #f4dcb8; }
.zbc-puppy__eye { fill: #26170d; }
.zbc-puppy__glint { fill: #fff; }
.zbc-puppy__brows path, .zbc-puppy__mouth { fill: none; stroke: #4a2e17; stroke-width: 2.6; stroke-linecap: round; }
.zbc-puppy__nose { fill: #2b1a0e; }
.zbc-puppy__tear { fill: #6fb7ee; opacity: 0.95; transform-box: fill-box; transform-origin: 50% 0; }
.zbc-puppy__collar { fill: none; stroke: var(--zbc-brand, #40a839); stroke-width: 5; stroke-linecap: round; }
.zbc-puppy__tag { fill: #ffd766; stroke: #b3891c; stroke-width: 1.4; }
.zbc-puppy--crying .zbc-puppy__mouth--smile, .zbc-puppy--calm .zbc-puppy__mouth--sad, .zbc-puppy--calm .zbc-puppy__tear { display: none; }
.zbc-puppy--calm .zbc-puppy__brows path { transform: rotate(0deg); }
.zbc-puppy--crying .zbc-puppy__tear { animation: zbc-tear 1.5s ease-in infinite; }
.zbc-puppy--crying .zbc-puppy__tear--2 { animation-delay: 0.75s; }
.zbc-puppy--crying .zbc-puppy__head, .zbc-puppy--crying .zbc-puppy__muzzle, .zbc-puppy--crying .zbc-puppy__eyes, .zbc-puppy--crying .zbc-puppy__brows, .zbc-puppy--crying .zbc-puppy__nose, .zbc-puppy--crying .zbc-puppy__mouth, .zbc-puppy--crying .zbc-puppy__patch { animation: zbc-sniffle 3.2s ease-in-out infinite; transform-box: view-box; transform-origin: 60px 52px; }
@keyframes zbc-tear {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 0.95; transform: translateY(2px) scale(1); }
  100% { transform: translateY(18px) scale(1); opacity: 0; }
}
@keyframes zbc-sniffle {
  0%, 84%, 100% { transform: translateY(0); }
  88% { transform: translateY(1.5px); }
  92% { transform: translateY(0); }
  96% { transform: translateY(1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .zbc-puppy--crying .zbc-puppy__tear, .zbc-puppy--crying .zbc-puppy__head, .zbc-puppy--crying .zbc-puppy__muzzle, .zbc-puppy--crying .zbc-puppy__eyes, .zbc-puppy--crying .zbc-puppy__brows, .zbc-puppy--crying .zbc-puppy__nose, .zbc-puppy--crying .zbc-puppy__mouth, .zbc-puppy--crying .zbc-puppy__patch { animation: none; }
  .zbc-puppy--crying .zbc-puppy__tear { transform: translateY(6px); opacity: 0.9; }
}