/* Bar & Cocoa — Passport (styles)
 * Drop into assets/ and add to theme.liquid:
 *   {{ 'bc-passport.css' | asset_url | stylesheet_tag }}
 */

/* ── Custom properties ─────────────────────────────────────── */
:root {
  --bc-green:       #1F3B2E;
  --bc-ink:         #14281F;
  --bc-cream:       #F6F1E7;
  --bc-cream-soft:  #FAF6EC;
  --bc-paper:       #FFFDF7;
  --bc-mandarin:    #F28E5E;
  /* Deeper orange for button rollover, matching the storefront PDP
     primary-button hover. */
  --bc-mandarin-hover: #FC7D54;
  /* Darker mandarin variant for text. The brand mandarin (#F28E5E) is a
     ~2.3:1 contrast on cream — fails WCAG AA (4.5:1) for normal text
     and AA-Large (3:1) too. This rust-mandarin reads at ~5.2:1 on cream
     so eyebrow labels, pull-quote titles, and numeric ranks are
     readable for low-vision users while staying within the brand
     palette. Use --bc-mandarin only for backgrounds, borders, icons. */
  --bc-mandarin-deep: #B8412E;
  --bc-cocoa:       #6B3A1F;
  /* Antique gold — reserved for the ICA award seal so the accolade reads
     as a medal without fighting the cream/green brand. */
  --bc-gold:        #C9A227;
  /* Secondary/label text. Darkened from the old #6B6B62, which read
     too light on cream for list descriptions, tags, and counts. This
     value clears WCAG AA on both cream and paper backgrounds. */
  --bc-muted:       #57564C;
  --bc-rule:        rgba(31, 59, 46, 0.18);
  /* Title/display font. Uses the storefront's subheading face (PT Serif)
     so Passport titles match the rest of the site; falls back to PT
     Serif then web-safe serifs where the theme var isn't present. */
  --bc-display:     var(--font-subheading--family, 'PT Serif'), Georgia, 'Times New Roman', serif;
  --bc-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Responsive layout tokens. Sized to keep editorial pages legible
     at small-desktop (≈1080-1180px) viewports without losing the
     generous feel at full desktop (≥1280px). The clamps degrade
     smoothly so a viewport doesn't snap between layouts. */
  --bc-section-pad-x:        clamp(20px, 4vw, 64px);
  --bc-section-pad-x-tight:  clamp(20px, 3vw, 40px);
  --bc-content-max:          1280px;
  --bc-sidebar-width:        clamp(280px, 28%, 380px);
}

/* ── Reset for bc scope ────────────────────────────────────── */
.bc-passport-page *,
.bc-passport-page *::before,
.bc-passport-page *::after { box-sizing: border-box; }
.bc-passport-page img { display: block; max-width: 100%; }
.bc-passport-page button { font-family: var(--bc-body); }

/* The storefront theme styles every <a> in the page with the brand
   mandarin orange — fine for navigation, but mandarin/cream is ~2.3:1
   (fails WCAG AA 4.5:1) and underlining the title link doesn't lift
   contrast. Override anchor color inside the Passport surface so
   in-row links read in the row's ink color (~17:1) and meet WCAG AA.
   Buttons (.bc-btn*) keep their own color rules.
   `color: inherit` was getting beaten by the theme's anchor rules in
   the Lighthouse audit (measured 2.51:1 link contrast); using an
   explicit color with !important wins the cascade unambiguously. */
.bc-passport-page a:not(.bc-btn) { color: var(--bc-ink) !important; }

/* ── Page wrapper ──────────────────────────────────────────── */
.bc-passport-page {
  background: var(--bc-paper);
  color: var(--bc-ink);
  font-family: var(--bc-body);
  /* Viewport safety net. Without this, any single descendant that
     overflows its column (a long unbroken word in an imported
     wishlist title, a long share URL inside a too-tight flex parent,
     a stray min-width on a grid child) drags the whole page wider
     than the phone viewport and lets the body scroll horizontally.
     Belt-and-braces: child elements still get explicit overflow-wrap
     rules below, but this stops a regression in any future component
     from breaking the page layout entirely. */
  overflow-x: hidden;
}

/* ── Typography helpers ────────────────────────────────────── */
.bc-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bc-mandarin-deep);
  font-weight: 600;
  /* Reset native heading margins so an h2.bc-eyebrow used as a section
     label (e.g. "The list · 5 chocolates" above the items) inherits
     the same flat layout as the div/span variants. */
  margin: 0;
}
/* Inline link inside an eyebrow (e.g. "...· Your account" on the
   dashboard masthead). Inherits the eyebrow color so it doesn't
   clash with the storefront's <a> color rules; underline gives the
   visual cue that it's clickable. */
.bc-eyebrow-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bc-eyebrow-link:hover,
.bc-eyebrow-link:focus-visible {
  color: var(--bc-ink);
  text-decoration-thickness: 2px;
}
.bc-display {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
}

/* ── Buttons ───────────────────────────────────────────────── */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--bc-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  border: none;
  text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.bc-btn:hover { opacity: 0.88; }
.bc-btn:disabled { opacity: 0.4; cursor: default; }
.bc-btn--solid   { background: var(--bc-ink); color: var(--bc-cream); }
/* Mandarin CTA (add-to-cart, add-all), matching the storefront PDP
   primary button: mandarin fill, deeper orange on hover. The color
   shift (not the generic opacity fade) is the PDP's hover behavior. */
.bc-btn--primary { background: var(--bc-mandarin); color: var(--bc-ink); }
.bc-btn--primary:hover { background: var(--bc-mandarin-hover); opacity: 1; }
.bc-btn--ghost   { background: transparent; color: var(--bc-ink); border: 1px solid var(--bc-ink); }
.bc-btn--ghost-inv { background: transparent; color: var(--bc-cream); border: 1px solid rgba(246,241,231,0.4); }

/*
 * Filled-button text colors — CSS variable override technique.
 *
 * The storefront theme ships this rule (specificity 0,18,0 + !important
 * — 18 chained :not() pseudo-classes):
 *
 *   :not(.button):not(.frcp-btn):not(.full-unstyled-link):...
 *     { color: rgb(var(--color-link)) !important; }
 *
 * No reasonable class chain on our side can beat 0,18,0 specificity.
 * BUT — the rule resolves its color via `var(--color-link)`, and CSS
 * custom properties don't compete on selector specificity in the usual
 * way: they cascade to the most-specific declaration of the variable
 * itself for each element.
 *
 * So instead of fighting the `color` declaration, we redefine
 * `--color-link` inside our buttons. The storefront's rule still
 * "wins" the color cascade, but it computes against OUR value of the
 * variable, not the theme's.
 *
 * --bc-cream  = #F6F1E7 = rgb(246, 241, 231)
 * --bc-ink    = #14281F = rgb(20,  40,  31)
 *
 * Color property is also declared as a normal fallback in case the
 * storefront ever drops its global <a> rule. The `!important` is
 * defensive but doesn't fight specificity — it just keeps the fallback
 * authoritative if the variable trick is ever insufficient.
 */
/* Layer 1: --color-link variable override.
   Beats storefront rules of the form `color: rgb(var(--color-link)) !important`
   by changing what the variable resolves to inside our buttons — no
   specificity fight needed. */
.bc-passport-page .bc-btn--solid     { --color-link: 246, 241, 231; }
.bc-passport-page .bc-btn--primary   { --color-link:  20,  40,  31; }
.bc-passport-page .bc-btn--ghost     { --color-link:  20,  40,  31; }
.bc-passport-page .bc-btn--ghost-inv { --color-link: 246, 241, 231; }

/* Layer 2: tripled-class color overrides at specificity 0,5,0 + !important.
   Beats storefront rules that set `color: <fixed>` directly, where the
   variable trick can't help. The doubled-class hack `.x.x.x` is valid
   CSS — each instance counts toward specificity per spec. Together
   with the .bc-passport-page parent, that's 1 + 3 = 4 classes; with
   the explicit element selector (anchor/button) the storefront tends
   to use, our chain still wins. */
.bc-passport-page .bc-btn--solid.bc-btn--solid.bc-btn--solid,
.bc-passport-page .bc-btn--solid.bc-btn--solid.bc-btn--solid:link,
.bc-passport-page .bc-btn--solid.bc-btn--solid.bc-btn--solid:hover,
.bc-passport-page .bc-btn--solid.bc-btn--solid.bc-btn--solid:focus,
.bc-passport-page .bc-btn--solid.bc-btn--solid.bc-btn--solid:focus-visible,
.bc-passport-page .bc-btn--solid.bc-btn--solid.bc-btn--solid:active,
.bc-passport-page .bc-btn--solid.bc-btn--solid.bc-btn--solid:visited {
  color: var(--bc-cream) !important;
}

.bc-passport-page .bc-btn--primary.bc-btn--primary.bc-btn--primary,
.bc-passport-page .bc-btn--primary.bc-btn--primary.bc-btn--primary:link,
.bc-passport-page .bc-btn--primary.bc-btn--primary.bc-btn--primary:hover,
.bc-passport-page .bc-btn--primary.bc-btn--primary.bc-btn--primary:focus,
.bc-passport-page .bc-btn--primary.bc-btn--primary.bc-btn--primary:focus-visible,
.bc-passport-page .bc-btn--primary.bc-btn--primary.bc-btn--primary:active,
.bc-passport-page .bc-btn--primary.bc-btn--primary.bc-btn--primary:visited {
  color: var(--bc-ink) !important;
}

.bc-passport-page .bc-btn--ghost.bc-btn--ghost.bc-btn--ghost,
.bc-passport-page .bc-btn--ghost.bc-btn--ghost.bc-btn--ghost:link,
.bc-passport-page .bc-btn--ghost.bc-btn--ghost.bc-btn--ghost:hover,
.bc-passport-page .bc-btn--ghost.bc-btn--ghost.bc-btn--ghost:focus,
.bc-passport-page .bc-btn--ghost.bc-btn--ghost.bc-btn--ghost:focus-visible,
.bc-passport-page .bc-btn--ghost.bc-btn--ghost.bc-btn--ghost:active,
.bc-passport-page .bc-btn--ghost.bc-btn--ghost.bc-btn--ghost:visited {
  color: var(--bc-ink) !important;
}

.bc-passport-page .bc-btn--ghost-inv.bc-btn--ghost-inv.bc-btn--ghost-inv,
.bc-passport-page .bc-btn--ghost-inv.bc-btn--ghost-inv.bc-btn--ghost-inv:link,
.bc-passport-page .bc-btn--ghost-inv.bc-btn--ghost-inv.bc-btn--ghost-inv:hover,
.bc-passport-page .bc-btn--ghost-inv.bc-btn--ghost-inv.bc-btn--ghost-inv:focus,
.bc-passport-page .bc-btn--ghost-inv.bc-btn--ghost-inv.bc-btn--ghost-inv:focus-visible,
.bc-passport-page .bc-btn--ghost-inv.bc-btn--ghost-inv.bc-btn--ghost-inv:active,
.bc-passport-page .bc-btn--ghost-inv.bc-btn--ghost-inv.bc-btn--ghost-inv:visited {
  color: var(--bc-cream) !important;
}
/* "Sold out" state: muted, non-interactive. Replaces the "Add to cart"
   button when Shopify reports the variant as not currently buyable.
   Border + muted text reads as disabled without going as low as the
   stock .bc-btn:disabled opacity (0.4), which loses too much contrast
   for accessibility. */
.bc-btn--soldout {
  background: var(--bc-cream);
  color: var(--bc-muted);
  border: 1px solid var(--bc-rule);
  cursor: not-allowed;
  opacity: 1 !important;
}
.bc-btn--soldout:hover { opacity: 1; }
.bc-btn--sm      { padding: 7px 12px; font-size: 10px; }
.bc-btn--full    { width: 100%; }

/* ── Filter chips ──────────────────────────────────────────── */
.bc-filter-chip {
  padding: 9px 16px;
  border: 1px solid var(--bc-rule);
  background: transparent;
  color: var(--bc-ink);
  font-family: var(--bc-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bc-filter-chip--active,
.bc-filter-chip:hover {
  border-color: var(--bc-ink);
  background: var(--bc-ink);
  color: var(--bc-cream);
}

/* ── Meta chips ────────────────────────────────────────────── */
.bc-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bc-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bc-muted);
  background: transparent;
  border: 1px solid var(--bc-rule);
  border-radius: 2px;
}
.bc-meta-chip--strong {
  font-weight: 600;
  color: var(--bc-ink);
  background: var(--bc-cream-soft);
}
/* Chips that link out (origin page, award collection, % search) keep the
   chip look; hover hints they're clickable. */
a.bc-meta-chip {
  text-decoration: none;
  cursor: pointer;
}
a.bc-meta-chip:hover,
a.bc-meta-chip:focus-visible {
  border-color: var(--bc-ink);
  color: var(--bc-ink);
}

/* ── ICA award seal ─────────────────────────────────────────────
   The International Chocolate Awards judges' score. Sits in the same
   meta row as the chips but is deliberately a filled medallion, not an
   outlined chip: a third-party accolade should out-rank the descriptive
   cacao/origin chips and read at a glance as "this was awarded," never as
   a plain stat. Deep-green fill + gold ring + gold medal glyph keeps it
   on-brand while still feeling like a medal. Non-interactive by design —
   it's a credential, not a filter. */
.bc-ica-seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bc-cream);
  background: var(--bc-ink);
  border: 1px solid var(--bc-gold);
  border-radius: 2px;
  white-space: nowrap;
}
.bc-ica-seal__medal { color: var(--bc-gold); flex: none; }
.bc-ica-seal__label { opacity: 0.82; }
.bc-ica-seal__score {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bc-gold);
}

/* ── List picker modal (save-to-list, copy-to-list) ─────────── */
.bc-list-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
}
.bc-list-picker__option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--bc-rule);
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--bc-ink);
}
.bc-list-picker__option:hover,
.bc-list-picker__option:focus-visible {
  border-color: var(--bc-ink);
  background: var(--bc-cream-soft);
}
.bc-list-picker__option:disabled { opacity: 0.55; cursor: wait; }
/* Normal weight reads better in the picker (Pashmina 2026-06-12: 600 was
   too heavy); the bordered row already carries the affordance. */
.bc-list-picker__title { font-weight: 400; }
.bc-list-picker__new { margin-top: 16px; }
.bc-list-picker__new-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.bc-list-picker__new-row .bc-modal__input { flex: 1; }

/* ── Author line ───────────────────────────────────────────── */
.bc-author { display: inline-flex; align-items: center; gap: 10px; }
.bc-author__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: var(--bc-ink);
  color: var(--bc-cream);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.bc-author__avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.bc-author__name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Bylines are always green (--bc-green). Without this, the
     storefront's default <a> color (mandarin) leaks into the byline
     because list cards are <a class="bc-list-card"> wrappers and the
     :not(.bc-btn) inherit override doesn't always win against the
     storefront cascade. Explicit color here makes the brand green
     authoritative on every surface where authorHTML renders. */
  color: var(--bc-green);
}
.bc-author__role { font-size: 11px; color: var(--bc-muted); margin-top: 2px; }
/* Renamed from .bc-badge to avoid collision with the BadgesBlock card
   styling further down this file (a 16px-padded bordered tile), which was
   overriding the small uppercase chip used in the byline. */
.bc-role-pill {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
}
.bc-role-pill--staff { background: var(--bc-ink); color: var(--bc-cream); }
.bc-role-pill--guest { background: var(--bc-mandarin); color: var(--bc-ink); }
.bc-role-pill--guestcurator { background: var(--bc-mandarin); color: var(--bc-ink); }
.bc-role-pill--chocolatemaker { background: var(--bc-cocoa); color: var(--bc-cream); }

/* ── Status + priority tags ────────────────────────────────── */
.bc-status-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
}
.bc-status-tag--low-stock { background: #FFEFE3; color: #8A4418; }
.bc-status-tag--limited   { background: #F1E9DC; color: #5E4B2B; }

.bc-priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.bc-priority__dot { width: 7px; height: 7px; border-radius: 99px; display: inline-block; }
.bc-priority--most { color: var(--bc-mandarin); }
.bc-priority--most .bc-priority__dot { background: var(--bc-mandarin); }
.bc-priority--high { color: var(--bc-green); }
.bc-priority--high .bc-priority__dot { background: var(--bc-green); }

/* ── Skeleton loader ───────────────────────────────────────── */
.bc-skeleton {
  background: linear-gradient(90deg, var(--bc-cream) 25%, var(--bc-cream-soft) 50%, var(--bc-cream) 75%);
  background-size: 200% 100%;
  animation: bc-shimmer 1.4s ease-in-out infinite;
  border-radius: 2px;
}
@keyframes bc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Toast ─────────────────────────────────────────────────── */
.bc-toast {
  position: fixed;
  bottom: 24px;
  right: 104px;
  background: var(--bc-ink);
  color: var(--bc-cream);
  padding: 12px 20px;
  border-radius: 3px;
  font-family: var(--bc-body);
  font-size: 14px;
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}
.bc-toast--visible { transform: translateY(0); opacity: 1; }

@media (max-width: 749px) {
  .bc-toast {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}

/* ── Modal ─────────────────────────────────────────────────── */
.bc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 31, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bc-modal {
  background: var(--bc-paper);
  border-radius: 4px;
  padding: 40px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(20, 40, 31, 0.3);
}
.bc-modal__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 24px;
}
.bc-modal__field { display: grid; gap: 6px; margin-bottom: 16px; }
.bc-modal__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bc-muted);
  font-weight: 500;
}
.bc-modal__input {
  font-family: var(--bc-body);
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--bc-rule);
  border-radius: 2px;
  background: var(--bc-cream);
  color: var(--bc-ink);
  outline: none;
}
.bc-modal__input:focus { border-color: var(--bc-ink); }
.bc-modal__actions { display: flex; gap: 10px; margin-top: 24px; }

/* ── Section padding ───────────────────────────────────────── */
/* Horizontal padding scales with viewport via clamp() so a 1080px
   small-desktop screen doesn't lose ~128px of width to fixed 64px
   gutters. Full desktop still sees the generous 64px feel. */
.bc-section         { padding: 48px var(--bc-section-pad-x) 0; }
.bc-section--header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

/* ── Centered content column ───────────────────────────────────
   Cap the content width and center it so views don't sprawl
   edge-to-edge on very wide monitors (e.g. 30"+), where unbounded
   line lengths and giant cards read as broken. The page background
   (--bc-paper on .bc-passport-page) stays full-bleed behind this
   centered column. Each block here gutters via its own horizontal
   padding (or padded children), so the cap only bites above
   --bc-content-max; below it nothing changes. #bc-single-list-root
   is capped (not .bc-single-list) so the detail layout AND its
   sibling sticky add-to-cart bar center together. */
.bc-section,
.bc-passport-masthead,
.bc-dashboard__masthead,
#bc-single-list-root {
  max-width: var(--bc-content-max);
  margin-inline: auto;
}

/* ════════════════════════════════════════════════════════════ */
/* LISTS INDEX                                                  */
/* ════════════════════════════════════════════════════════════ */

.bc-passport-masthead {
  padding: 64px var(--bc-section-pad-x) 32px;
  border-bottom: 1px solid var(--bc-rule);
}
.bc-passport-masthead__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: end;
}
.bc-passport-masthead__headline {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  /* Scales 56px (small-desktop floor) -> ~70px (1080) -> 76px (cap on
     wide desktop). The previous fixed 88px felt visually heavy on a
     12" laptop and was the largest type on the page by a wide margin. */
  font-size: clamp(56px, 6.5vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
}
.bc-passport-masthead__body {
  font-size: 17px;
  line-height: 1.55;
  max-width: 440px;
  padding-bottom: 8px;
}
.bc-passport-filters {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  flex-wrap: wrap;
  align-items: center;
}

/* Featured card */
.bc-feature-card {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bc-cream);
  border: 1px solid var(--bc-rule);
  border-radius: 3px;
  overflow: hidden;
}
.bc-feature-card__image { aspect-ratio: 5 / 4; overflow: hidden; }
.bc-feature-card__image img { width: 100%; height: 100%; object-fit: cover; }
.bc-feature-card__body {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bc-feature-card__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
}
.bc-feature-card__intro { font-size: 17px; line-height: 1.55; margin: 0; }
.bc-feature-card__stats {
  display: flex;
  gap: 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bc-muted);
}
.bc-feature-card__actions { display: flex; gap: 10px; }

/* List card grid */
.bc-passport-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.bc-list-card {
  background: var(--bc-paper);
  border: 1px solid var(--bc-rule);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.bc-list-card__image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bc-cream); }
.bc-list-card__image img { width: 100%; height: 100%; object-fit: cover; }
.bc-list-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bc-list-card__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  margin: 12px 0 6px;
}
.bc-list-card__subtitle { font-size: 13px; color: var(--bc-muted); line-height: 1.5; margin: 0; flex: 1; }
.bc-list-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bc-rule);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bc-muted);
}

/* Start a list card */
.bc-start-list-card {
  border: 1px dashed var(--bc-rule);
  border-radius: 3px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  background: var(--bc-cream-soft);
}
.bc-start-list-card__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════ */
/* SINGLE LIST PAGE — sidebar + dense rows                     */
/* ════════════════════════════════════════════════════════════ */

.bc-single-list {
  display: grid;
  /* Sidebar adapts to viewport: 280px floor on small-desktop,
     ~28% of viewport in the middle range, 380px ceiling on wide
     screens. Prevents the sidebar from eating 35%+ of a 1080px
     viewport while keeping the editorial feel at ≥1280px. */
  grid-template-columns: var(--bc-sidebar-width) 1fr;
  min-height: 800px;
}

.bc-single-list__sidebar {
  background: var(--bc-cream);
  padding: 56px clamp(28px, 3vw, 40px);
  border-right: 1px solid var(--bc-rule);
}

/* Back-to-hub link at the top of the sidebar, above the kindLabel
   eyebrow. Rendered as a chiclet pill in the brand green so it reads
   clearly as navigation against the cream sidebar (the previous
   muted-text version inherited the storefront's mandarin link color
   and was hard to read). Explicit color + background prevents the
   storefront's default <a> color from leaking through on hover. */
/* Back-to-hub link sits at the top of the sidebar, above the
   kindLabel eyebrow. Rendered as .bc-btn .bc-btn--solid .bc-btn--sm
   so it visually matches the rest of the system's filled CTAs
   (cream text on ink background) instead of introducing a fourth
   button color. This class only adds the bottom spacing that
   separates the back-link from the eyebrow that follows. */
.bc-back-link { margin-bottom: 22px; }

.bc-single-list__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  /* Scales with the sidebar, which is itself clamp(280px, 28%, 380px).
     The previous fixed 52px broke long words ("Malagasy", "Chocolate")
     mid-letter at small-desktop widths because the narrower sidebar
     couldn't fit them on one line. Floor 32px keeps mobile readable;
     cap 47px preserves the wide-desktop feel. */
  font-size: clamp(32px, 4vw, 47px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 16px 0 20px;
}
.bc-single-list__intro { font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.bc-sidebar__author-wrap {
  padding: 16px 0 20px;
  border-top: 1px solid var(--bc-rule);
  border-bottom: 1px solid var(--bc-rule);
}
.bc-sidebar__stats { margin-top: 22px; display: grid; gap: 12px; }
.bc-sidebar__stat {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bc-rule);
}
.bc-sidebar__stat-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bc-muted); }
.bc-sidebar__stat-value { font-size: 14px; font-weight: 500; }
/* minmax(0, 1fr) lets the single column shrink below its content's
   min width; without it an auto track grows to the widest button's
   min-content and (since .bc-btn is white-space:nowrap) the long
   "Add available to cart · $price" button overflows the fixed-width
   sidebar into the list at narrow breakpoints. */
.bc-sidebar__actions { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Allow these full-width sidebar CTAs to wrap to a second line instead
   of forcing the column wide. Scoped here so item-row buttons keep
   their single-line nowrap. */
.bc-sidebar__actions .bc-btn { white-space: normal; min-width: 0; }
.bc-sidebar__note { font-size: 11px; color: var(--bc-muted); margin-top: 18px; line-height: 1.5; }

/* Dense item rows */
/* Inner padding scales: tight at small-desktop (~24px) so the title
   column gets real estate; full 56px on wide desktop. */
.bc-list-items { padding: 48px clamp(24px, 3vw, 56px); }
.bc-list-items__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.bc-item-row {
  display: grid;
  /* Intrinsic sizing instead of fixed pixels.
     - num/image columns: stay close to original (32px and 110px) so
       visual rhythm holds.
     - title column: minmax(220px, 1fr) guarantees the title never
       gets squeezed below readable width even if other columns
       expand under their own content.
     - price column: clamp(140px, 14%, 180px) tightens on narrower
       viewports without losing the "Add to cart" affordance. */
  grid-template-columns: 32px 110px minmax(220px, 1fr) clamp(140px, 14%, 180px);
  gap: clamp(16px, 2vw, 28px);
  padding: 22px 0;
  border-bottom: 1px solid var(--bc-rule);
  align-items: center;
}
.bc-item-row:first-of-type { border-top: 1px solid var(--bc-rule); }
.bc-item-row__num {
  font-family: var(--bc-display);
  font-size: 32px;
  font-style: italic;
  color: var(--bc-mandarin-deep);
  line-height: 1;
}
.bc-item-row__image {
  background: var(--bc-cream);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
}
.bc-item-row__image img { width: 100%; height: 100%; object-fit: cover; }
.bc-item-row__maker { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bc-muted); }
.bc-item-row__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  margin: 4px 0 6px;
}
/* Product titles are not underlined at rest (merchant preference, to
   match the storefront's product links). Hover/focus adds the
   underline so there's still a pointer + keyboard affordance. */
.bc-item-row__title a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.bc-item-row__title a:hover,
.bc-item-row__title a:focus-visible {
  text-decoration: underline;
}
/* "Best By" date printed after a short-dated product's title. Mirrors the
   storefront treatment (theme snippet best-by.liquid): body font rather
   than the italic display face, secondary grey, sized off the title it
   sits in with a floor so small cards stay legible. Its own class rather
   than the theme's .best-by-date so Passport pages don't depend on theme
   CSS that isn't guaranteed to be loaded here. */
.bc-best-by {
  font-family: var(--bc-body);
  font-style: normal;
  font-weight: 400;
  font-size: max(0.75rem, 0.65em);
  white-space: nowrap;
  color: var(--bc-muted);
}
.bc-item-row__note {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--bc-mandarin);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  max-width: 560px;
}
.bc-item-row__note-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bc-mandarin-deep);
  font-style: normal;
  font-weight: 600;
  margin-right: 8px;
}
.bc-item-row__price-col { text-align: right; }
.bc-item-row__price-value {
  font-family: var(--bc-body);
  font-size: 18px;
  font-style: normal;
}
.bc-item-row__price-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* Greyed tile for an item whose product has been deleted, archived, or
   unpublished in Shopify. Position is preserved so the owner's curation
   stays visible and numbering doesn't shift; just dim the card and drop
   the cart/save affordances. */
.bc-item-row--unavailable { opacity: 0.55; }
.bc-item-row--unavailable .bc-item-row__image { background: var(--bc-rule, #e5e5e5); }
.bc-item-row--unavailable .bc-item-row__title { text-decoration: line-through; text-decoration-thickness: 1px; }
.bc-item-row--unavailable .bc-item-row__maker { color: var(--bc-mandarin); font-weight: 600; }

/* Related lists */
.bc-related-lists { margin-top: 56px; }
.bc-related-lists__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; }

/* Add-all bar */
.bc-add-all-bar {
  position: sticky;
  bottom: 16px;
  margin: 32px var(--bc-section-pad-x) 0;
  padding: 18px 28px;
  background: var(--bc-ink);
  color: var(--bc-cream);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  box-shadow: 0 18px 40px -20px rgba(20, 40, 31, 0.5);
}
.bc-add-all-bar__title { font-family: var(--bc-display); font-style: italic; font-size: 22px; }
/* Use rgba on the foreground rather than `opacity` on the element so
   axe-core/Lighthouse compute contrast against the bar's dark ink
   background (12:1+) instead of blending the cream text against the
   page's paper background (1.07:1, fails). */
.bc-add-all-bar__sub { font-size: 13px; color: rgba(246, 241, 231, 0.85); margin-top: 2px; }
.bc-add-all-bar__actions { display: flex; gap: 10px; }

/* ════════════════════════════════════════════════════════════ */
/* MY LISTS DASHBOARD                                          */
/* ════════════════════════════════════════════════════════════ */

.bc-dashboard__masthead {
  padding: 56px var(--bc-section-pad-x) 32px;
  border-bottom: 1px solid var(--bc-rule);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.bc-dashboard__heading {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  margin: 14px 0 0;
}
/* Allow the sub-line to use the natural column width — old 520px max
   forced an awkward wrap where only "private." dropped to a 2nd line. */
.bc-dashboard__sub { font-size: 15px; color: var(--bc-muted); margin-top: 10px; max-width: 720px; }
.bc-dashboard__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.bc-my-list-card {
  background: var(--bc-paper);
  border: 1px solid var(--bc-rule);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bc-my-list-card__image { aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: var(--bc-cream); }
.bc-my-list-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.bc-my-list-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}
.bc-my-list-card__image-link:hover img { transform: scale(1.03); }
.bc-my-list-card__title-link {
  color: inherit;
  text-decoration: none;
}
.bc-my-list-card__title-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bc-my-list-card__visibility {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
}
.bc-my-list-card__visibility--shared  { background: var(--bc-mandarin); color: var(--bc-ink); }
.bc-my-list-card__visibility--private { background: var(--bc-ink); color: var(--bc-cream); }
.bc-my-list-card__body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.bc-my-list-card__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  margin: 0;
  /* Imported wishlist titles can be long unbroken strings (slugified
     URLs, IDs, etc.). Without this they overflow the card on phones
     and force horizontal page scroll. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bc-my-list-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bc-muted);
}
.bc-my-list-card__actions { display: flex; gap: 6px; margin-top: 12px; }

.bc-new-list-card {
  border: 1px dashed var(--bc-rule);
  border-radius: 3px;
  background: var(--bc-cream-soft);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 280px;
}
.bc-new-list-card__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════ */
/* PDP HEART BUTTON                                            */
/* ════════════════════════════════════════════════════════════ */

.bc-pdp-form-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bc-heart-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bc-rule);
  color: var(--bc-ink);
  border-radius: 99px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.bc-heart-btn:hover { border-color: var(--bc-ink); }
.bc-heart-btn--active {
  color: var(--bc-mandarin);
  border-color: var(--bc-mandarin);
  transform: scale(1.04);
}
.bc-heart-btn svg { pointer-events: none; }

/* ── Save-to-list heart link (per-item) ─────────────────────
   Heart + label styled to match the PDP save heart: ink at rest,
   brand mandarin on hover/active. Uppercase label per merchant
   preference. */
.bc-save-link {
  background: none;
  border: 0;
  color: var(--bc-ink);
  font-family: var(--bc-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  margin-top: 10px;
  text-decoration: none;
  transition: color 160ms ease;
  align-self: flex-end;
}
.bc-save-link:hover { color: var(--bc-mandarin-deep); }
.bc-save-link:disabled { color: var(--bc-muted); cursor: default; text-decoration: none; }

/* ── Responsive grid helpers ───────────────────────────────── */
.bc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ── Lists showcase (PDP + arbitrary-page section block) ──── */
.bc-showcase {
  padding: 32px 32px 40px;
  background: var(--bc-paper);
  color: var(--bc-ink);
  font-family: var(--bc-body);
}
.bc-showcase__heading {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 20px;
}
.bc-showcase__grid {
  display: grid;
  gap: 20px;
}
.bc-showcase__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bc-showcase__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.bc-showcase__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.bc-showcase__grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 960px) {
  .bc-showcase { padding: 24px 20px 32px; }
  .bc-showcase__heading { font-size: 28px; }
  .bc-showcase__grid--cols-3,
  .bc-showcase__grid--cols-4,
  .bc-showcase__grid--cols-5,
  .bc-showcase__grid--cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bc-showcase__grid--cols-3,
  .bc-showcase__grid--cols-4,
  .bc-showcase__grid--cols-5,
  .bc-showcase__grid--cols-6 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════ */
/* RESPONSIVE — tablet (≤ 960px)                               */
/* ════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* Global section padding */
  .bc-section,
  .bc-passport-masthead,
  .bc-dashboard__masthead { padding-left: 32px; padding-right: 32px; }

  /* Masthead stacks */
  .bc-passport-masthead__grid { grid-template-columns: 1fr; gap: 24px; }
  .bc-passport-masthead__headline { font-size: 56px; }
  .bc-dashboard__heading { font-size: 52px; }

  /* Feature card stacks */
  .bc-feature-card { grid-template-columns: 1fr; }
  .bc-feature-card__body { padding: 28px; }
  .bc-feature-card__title { font-size: 40px; }

  /* Grids collapse from 4-up to 2-up */
  .bc-grid-4, .bc-grid-3,
  .bc-passport-grid, .bc-dashboard__grid,
  .bc-related-lists__grid { grid-template-columns: repeat(2, 1fr); }

  /* Single list stacks: sidebar on top, items below */
  .bc-single-list { grid-template-columns: 1fr; }
  .bc-single-list__sidebar {
    padding: 40px 32px;
    border-right: none;
    border-bottom: 1px solid var(--bc-rule);
  }
  .bc-single-list__title { font-size: 42px; }
  .bc-list-items { padding: 32px; }

  /* Item row simplifies: image + body stacked with price on right */
  .bc-item-row {
    grid-template-columns: 90px 1fr 130px;
    gap: 18px;
  }
  .bc-item-row__num {
    display: none; /* number moves to image overlay on mobile — keep simple */
  }
  .bc-item-row__title { font-size: 20px; }

  /* Sticky add-all bar margins */
  .bc-add-all-bar { margin: 24px 32px 0; padding: 16px 20px; gap: 16px; }
}

/* ════════════════════════════════════════════════════════════ */
/* RESPONSIVE — phone (≤ 640px)                                */
/* ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .bc-section,
  .bc-passport-masthead,
  .bc-dashboard__masthead { padding-left: 20px; padding-right: 20px; }

  .bc-passport-masthead { padding-top: 40px; padding-bottom: 24px; }
  .bc-passport-masthead__headline { font-size: 40px; line-height: 1.05; }
  .bc-dashboard__masthead { flex-direction: column; align-items: flex-start; }
  .bc-dashboard__heading { font-size: 40px; }

  .bc-feature-card__title { font-size: 32px; }
  .bc-feature-card__body { padding: 24px 20px; }

  /* All grids collapse to single column */
  .bc-grid-4, .bc-grid-3,
  .bc-passport-grid, .bc-dashboard__grid,
  .bc-related-lists__grid { grid-template-columns: 1fr; }

  /* Single list sidebar shrinks */
  .bc-single-list__sidebar { padding: 32px 20px; }
  .bc-single-list__title { font-size: 36px; }
  .bc-list-items { padding: 24px 20px; }

  /* Item row on phone: 2 columns — image+price stacked left (110px),
     body+actions stacked right. Image is row 1 col 1, price+remove are
     row 2 col 1 stacked centered below the image. Body content
     (maker, title, chips, note) lives in col 2 spanning both rows so
     it reads top-to-bottom on the right. */
  .bc-item-row {
    grid-template-columns: 110px 1fr;
    column-gap: 14px;
    row-gap: 8px;
    padding: 18px 0;
    align-items: start;
  }
  .bc-item-row__num { display: none; }
  .bc-item-row__image { grid-column: 1; grid-row: 1; width: 110px; }
  /* Body div: 3rd direct child of the row (num | image | body | price).
     Span both grid rows so its full content fills the right column. */
  .bc-item-row > div:nth-of-type(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
  }
  .bc-item-row__title { font-size: 16px; line-height: 1.2; margin: 4px 0 6px; }
  .bc-item-row__maker { font-size: 9px; }
  .bc-item-row__note { font-size: 12px; padding: 8px 12px; }
  .bc-item-row__add-note { font-size: 12px; padding: 8px 12px; }
  /* Purchase-summary swap: hide the verbose desktop chips and show the
     compact mobile chips so 2-3 fit per row in the narrow body column.
     The JS emits both strips; CSS picks which one is visible. Doubled-
     class selectors (specificity 0,2,0) so these rules win against the
     standalone `--mobile { display: none }` default below regardless of
     source order — the default rule appears LATER in this stylesheet,
     and without the specificity bump the cascade tiebreak made the
     default win on mobile and hid both strips. */
  .bc-purchase-summary.bc-purchase-summary--desktop { display: none; }
  .bc-purchase-summary.bc-purchase-summary--mobile  { display: flex; }
  /* Price + remove stack centered directly under the product image
     (pinned to the 110px-wide left column). Remove sits below the
     price as a small underline link, both center-aligned so the eye
     reads down the column: image -> price -> remove. */
  .bc-item-row__price-col {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
  }
  .bc-item-row__price-value {
    font-family: var(--bc-body);
    font-style: normal;
    font-size: 16px;
  }
  .bc-item-row__price-actions {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  /* Sticky add-all bar — keep it from dominating the phone viewport.
     Smaller padding, smaller display title, single column of buttons.
     The previous side-by-side row left "Add all to cart" pushed past
     the right edge: .bc-btn has white-space:nowrap, so two long labels
     ("Add most-wanted" + "Add available to cart") together exceeded
     iPhone viewport width. flex:1 can't shrink a flex item below its
     min-content with nowrap text, so the primary button got clipped by
     the page's overflow-x:hidden and looked invisible. Stacking is the
     same single-column pattern the rest of the page uses below 640px. */
  .bc-add-all-bar {
    grid-template-columns: 1fr;
    margin: 16px 16px 0;
    padding: 12px 16px;
    gap: 8px;
    /* Respect iOS home-indicator / browser-chrome safe area so the bar
       isn't partially hidden behind the system UI on iPhones. */
    bottom: max(8px, env(safe-area-inset-bottom));
    /* Hard clamp so a long sub-line or future content can never push
       the bar wider than the viewport — outer margin already accounts
       for the 16px gutters either side. */
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
  }
  .bc-add-all-bar__title { font-size: 16px; }
  .bc-add-all-bar__sub   { font-size: 12px; word-break: break-word; }
  .bc-add-all-bar__actions {
    flex-direction: column;
    gap: 8px;
  }
  .bc-add-all-bar__actions .bc-btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 11px;
    /* Allow the label to wrap on extremely narrow screens rather than
       overflowing the button silently. */
    white-space: normal;
    line-height: 1.25;
  }

  /* Filter chips: hide on phone — too noisy */
  .bc-passport-filters .bc-filter-chip { padding: 8px 12px; font-size: 10px; }

  /* Modal full-bleed on phone */
  .bc-modal { padding: 28px 20px; }
  .bc-modal__title { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════
 * Badges / progress
 * ══════════════════════════════════════════════════════════════ */

.bc-badge-shelf { padding: 24px 0; }
.bc-badge-shelf__heading {
  font-family: var(--bc-display);
  font-size: 32px;
  margin: 8px 0 20px;
}
.bc-badge-shelf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.bc-badge-shelf__empty {
  color: var(--bc-muted);
  font-style: italic;
}
.bc-badge {
  border: 1px solid var(--bc-rule);
  border-radius: 3px;
  padding: 16px;
  background: var(--bc-paper);
  text-align: center;
}
.bc-badge--locked { opacity: 0.4; filter: grayscale(0.5); }
.bc-badge__icon { font-size: 28px; margin-bottom: 8px; }
.bc-badge__title { font-weight: 600; margin-bottom: 4px; }
.bc-badge__desc { font-size: 12px; color: var(--bc-muted); }

.bc-progress { padding: 24px 0; }
.bc-progress__heading {
  font-family: var(--bc-display);
  font-size: 32px;
  margin: 8px 0 20px;
}
.bc-progress__empty {
  color: var(--bc-muted);
  font-style: italic;
}
.bc-progress-row { padding: 10px 0; border-bottom: 1px solid var(--bc-rule); }
.bc-progress-row--earned .bc-progress-row__title { color: var(--bc-ink); }
.bc-progress-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.bc-progress-row__title { font-weight: 600; }
.bc-progress-row__count { font-size: 12px; color: var(--bc-muted); }
.bc-progress-row__bar {
  height: 6px;
  background: var(--bc-rule);
  border-radius: 3px;
  overflow: hidden;
}
.bc-progress-row__bar > span {
  display: block;
  height: 100%;
  background: var(--bc-mandarin);
  transition: width 0.3s ease;
}
.bc-progress-row__desc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--bc-muted);
}

/* ════════════════════════════════════════════════════════════ */
/* DASHBOARD EDITOR — masthead, toolbar, inline edit, modals    */
/* ════════════════════════════════════════════════════════════ */

/* "← All lists" + "+ New list" pair sits at the very top of the editor
   so users always have a clear way back. The dashboard masthead is
   hidden when the editor is open (data-bc-grid-only), so this row is
   the only nav at the top. */
.bc-editor-back-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 24px;
  gap: 12px;
}

/* Masthead with cover preview on the right */
.bc-editor-masthead {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--bc-rule);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 16px;
}
.bc-editor-masthead__main { min-width: 0; }
.bc-editor-cover {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.bc-editor-cover__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bc-muted);
  font-weight: 500;
}
.bc-editor-cover__frame {
  position: relative;
  width: 220px;
  height: 220px;
  background: var(--bc-cream);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--bc-rule);
}
.bc-editor-cover__frame img { width: 100%; height: 100%; object-fit: cover; }
.bc-editor-cover__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--bc-muted);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bc-editor-cover__pin {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(20, 40, 31, 0.92);
  color: var(--bc-cream);
  border: 0;
  padding: 7px 11px;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--bc-body);
}
.bc-editor-cover__pin:disabled { opacity: 0.5; cursor: not-allowed; }

/* Inline editable title + intro */
.bc-editor-title {
  font-size: 51px;
  cursor: text;
  position: relative;
  padding: 4px 0;
  margin: 14px 0 0;
  outline: none;
  border-radius: 3px;
  /* Long unbroken titles (especially after wishlist imports where the
     source titles aren't always sentence-cased) would otherwise force
     horizontal page scroll on phones. Wrap inside the column instead. */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.bc-editor-title:hover .bc-editor-edit-hint,
.bc-editor-title:focus-visible .bc-editor-edit-hint { opacity: 0.7; }
.bc-editor-title:focus-visible {
  outline: 2px dashed var(--bc-mandarin);
  outline-offset: 4px;
}
.bc-editor-title__text { display: inline; }
.bc-editor-edit-hint {
  display: inline-block;
  margin-left: 14px;
  font-family: var(--bc-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bc-muted);
  font-style: normal;
  font-weight: 500;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s;
}
/* Description (intro) editor — same dashed-border treatment as the
   per-item "+ Add a note" button so the two long-text affordances read
   the same. Both surface through openInlineLongTextEditor on click. */
.bc-editor-intro-wrap { margin-top: 18px; max-width: 640px; }
.bc-editor-intro,
.bc-editor-intro-add {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px dashed var(--bc-rule);
  border-radius: 2px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bc-editor-intro:hover,
.bc-editor-intro-add:hover { border-color: var(--bc-ink); }
.bc-editor-intro:hover { background: var(--bc-cream-soft); }
.bc-editor-intro__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bc-mandarin-deep);
  font-weight: 600;
  margin-bottom: 6px;
}
.bc-editor-intro__text {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bc-ink);
  font-style: italic;
  /* Match the title's wrap behavior — imported descriptions can be
     long unbroken strings that would otherwise overflow on phones. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bc-editor-intro__edit {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bc-muted);
}
.bc-editor-intro-add {
  color: var(--bc-muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 10px 14px;
}
.bc-editor-intro-add:hover { color: var(--bc-ink); }
.bc-editor-input {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--bc-ink);
  background: var(--bc-cream-soft);
  border: 1px dashed var(--bc-mandarin);
  border-radius: 3px;
  padding: 8px 12px;
  outline: none;
  resize: none;
}
.bc-editor-input--multiline {
  min-height: 84px;
  resize: vertical;
  font-family: var(--bc-body);
  font-style: normal;
  font-size: 15px;
}
.bc-editor-editing { background: transparent; padding: 0; }

/* Toolbar with sharing status + actions */
.bc-editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bc-rule);
  flex-wrap: wrap;
}
.bc-editor-toolbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.bc-editor-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bc-editor-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bc-muted);
  font-weight: 600;
}
.bc-editor-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--bc-muted);
}
.bc-editor-status--public { color: var(--bc-green); }
.bc-editor-status--public .bc-editor-status__dot { background: var(--bc-mandarin); }
.bc-editor-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bc-muted);
  font-weight: 600;
}
.bc-editor-sort__select {
  min-width: 154px;
  font-family: var(--bc-body);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bc-ink);
  background: var(--bc-paper);
  border: 1px solid var(--bc-rule);
  border-radius: 3px;
  padding: 8px 30px 8px 10px;
}
.bc-editor-share-url {
  padding: 7px 12px;
  background: var(--bc-paper);
  border: 1px solid var(--bc-rule);
  border-radius: 3px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--bc-ink);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Item-row affordances added in v3 */
.bc-item-row__cover-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--bc-mandarin);
  color: var(--bc-ink);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 2px;
}
.bc-item-row__image { position: relative; }

.bc-item-row__note-wrap { margin-top: 12px; }

.bc-purchase-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--bc-ink);
}
.bc-purchase-summary span {
  border: 1px solid var(--bc-rule);
  background: var(--bc-cream-soft);
  border-radius: 2px;
  padding: 4px 7px;
}
/* Two parallel chip strips render on every Purchased-list row. The
   default-shown one is `--desktop` (full sentences: "2 items purchased",
   "last purchased 6 years ago", "first purchased 6 years ago"). On
   phones the body column is too narrow for those, so the mobile media
   query below (≤640px) hides the desktop strip and shows the compact
   `--mobile` strip ("2 bought · 6y ago") instead. */
.bc-purchase-summary--mobile { display: none; }

/* Purchased-list review-request row — "Email me a review link" affordance.
   Scoped to the Purchased list (the JS only renders the wrapper when
   the list is the generated_purchase_history). Reuses existing
   .bc-btn--ghost styling for the button; the helper text below it is
   a muted hint in the same ink/cream palette as the rest of the editor. */
.bc-item-row__review-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.bc-item-row__review-hint {
  margin: 0;
  font-size: 11px;
  color: var(--bc-muted);
  line-height: 1.4;
  max-width: 48ch;
}
.bc-item-row__review-sent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bc-ink);
  background: var(--bc-cream-soft);
  border: 1px solid var(--bc-rule);
  border-radius: 2px;
  padding: 6px 10px;
  line-height: 1.4;
  max-width: 48ch;
}
/* Small text-style "Resend" affordance shown next to the success
   message. Looks like a quiet link rather than a button so the
   confirmation stays the primary signal; backend 24h cooldown decides
   whether a click actually re-sends or just re-confirms. */
.bc-item-row__review-resend {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: 11px;
  color: var(--bc-muted);
  text-decoration: underline;
  cursor: pointer;
  line-height: 1;
}
.bc-item-row__review-resend:hover { color: var(--bc-ink); }
.bc-item-row__review-resend:disabled { opacity: 0.45; cursor: progress; }

/* "Reviewed" state — shown when Judge.me already has a review by this
   customer for this product. Quieter than the active button, and reads
   as a confirmation rather than an action. Stars use the mandarin
   accent so a glance at the row tells the customer what they rated. */
.bc-item-row__review-done {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--bc-muted);
  line-height: 1.4;
  max-width: 56ch;
}
.bc-item-row__review-stars {
  color: var(--bc-mandarin-deep);
  font-size: 13px;
  letter-spacing: 1px;
}
.bc-item-row__review-done-label {
  color: var(--bc-ink);
  font-weight: 500;
}
.bc-item-row__review-done-link {
  color: var(--bc-muted);
  text-decoration: underline;
}
.bc-item-row__review-done-link:hover { color: var(--bc-ink); }

/* Verified-purchase / verified-buyer pill rendered next to the stars on
   the "Reviewed" state. Same eyebrow vocabulary as .bc-meta-chip but
   tuned smaller so it sits inline with the star row without dominating
   it. `--strong` variant is for buyer / verified-purchase / confirmed-
   buyer (the trust signals Bar & Cocoa actually cares about). */
.bc-item-row__review-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bc-muted);
  background: transparent;
  border: 1px solid var(--bc-rule);
  border-radius: 2px;
  line-height: 1.4;
}
.bc-item-row__review-badge--strong {
  font-weight: 600;
  color: var(--bc-ink);
  background: var(--bc-cream-soft);
}
.bc-editor-intro--locked {
  margin: 0;
  cursor: default;
}

/* Note view (when set). The editor surface renders the note as a
   <button> so the whole pill is keyboard-focusable and clickable to
   open the inline editor. The public list page renders the same
   class as a <div> so notes are read-only there.
   Scope the interactive styles (cursor: pointer, hover) to the
   <button> form so the public surface doesn't get a misleading
   pointer cursor or hover state on text the customer can't act on. */
.bc-item-row__note {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bc-cream-soft);
  border: 0;
  border-left: 2px solid var(--bc-mandarin);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--bc-ink);
  position: relative;
  max-width: 560px;
}
button.bc-item-row__note { cursor: pointer; }
button.bc-item-row__note:hover { background: #F0E8D6; }
.bc-item-row__note-text { display: block; }
.bc-item-row__note-edit {
  position: absolute;
  top: 8px;
  right: 10px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bc-muted);
}
.bc-item-row__add-note {
  background: transparent;
  border: 1px dashed var(--bc-rule);
  color: var(--bc-muted);
  padding: 9px 14px;
  border-radius: 2px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s, border-color 0.15s;
}
.bc-item-row__add-note:hover { color: var(--bc-ink); border-color: var(--bc-ink); }

/* Inline note editor */
.bc-note-editor {
  padding: 12px 14px;
  background: var(--bc-cream-soft);
  border-left: 2px solid var(--bc-mandarin);
  border-radius: 2px;
  max-width: 560px;
}
.bc-note-editor__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bc-mandarin-deep);
  font-weight: 600;
  margin-bottom: 8px;
}
.bc-note-editor__input {
  width: 100%;
  border: 1px solid var(--bc-rule);
  background: var(--bc-paper);
  font-family: inherit;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  padding: 10px 12px;
  color: var(--bc-ink);
  border-radius: 2px;
  resize: vertical;
  outline: none;
}
.bc-note-editor__input:focus { border-color: var(--bc-ink); }
.bc-note-editor__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.bc-note-editor__count {
  font-size: 11px;
  color: var(--bc-muted);
  font-style: normal;
}
.bc-note-editor__count--warn { color: #B8412E; }
.bc-note-editor__actions { display: flex; gap: 8px; }

/* Confirm + cover-picker modals */
.bc-modal--confirm { max-width: 460px; }
.bc-modal--cover   { max-width: 620px; }
.bc-modal__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--bc-muted);
  margin: 8px 0 0;
}
.bc-modal__actions--split { justify-content: space-between; }
.bc-eyebrow--danger { color: #B8412E; }
.bc-btn--danger { background: #B8412E; color: var(--bc-cream); }
.bc-btn--danger-link {
  color: var(--bc-muted);
  border: none;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
}
.bc-btn--danger-link:hover { color: #B8412E; }

.bc-cover-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0 0;
  max-height: 320px;
  overflow-y: auto;
}
.bc-cover-custom-active {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 10px;
  border: 1px solid var(--bc-rule);
  border-radius: 4px;
  background: var(--bc-cream);
}
.bc-cover-custom-active img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
}
.bc-cover-custom-active > div { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bc-cover-picker__tile {
  position: relative;
  padding: 0;
  background: var(--bc-cream);
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.bc-cover-picker__tile img { width: 100%; height: 100%; object-fit: cover; }
.bc-cover-picker__tile:hover { border-color: var(--bc-rule); }
.bc-cover-picker__tile--active { border-color: var(--bc-mandarin); }
.bc-cover-picker__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--bc-mandarin);
  color: var(--bc-ink);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 2px;
}

/* Empty saved-lists state */
.bc-saved-empty {
  grid-column: 1 / -1;
  padding: 36px 32px;
  background: var(--bc-cream-soft);
  border: 1px dashed var(--bc-rule);
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.bc-saved-empty__title {
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 6px;
}
.bc-saved-empty__body {
  font-size: 14px;
  color: var(--bc-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 460px;
}

.bc-saved-list-card { position: relative; }
.bc-saved-list-card__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 20, 20, 0.72);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 120ms ease, transform 120ms ease;
}
.bc-saved-list-card__remove:hover { background: rgba(20, 20, 20, 0.92); transform: scale(1.05); }
.bc-saved-list-card__remove:focus-visible { outline: 2px solid var(--bc-mandarin, #d97a2c); outline-offset: 2px; }

.bc-saved-browse-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--bc-muted);
  text-decoration: underline;
}
.bc-saved-browse-link:hover { color: var(--bc-ink, #1a1a1a); }

@media (max-width: 960px) {
  .bc-editor-masthead { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .bc-editor-cover { align-items: flex-start; }
  .bc-editor-title { font-size: 40px; }
  .bc-cover-picker { grid-template-columns: repeat(3, 1fr); }
  .bc-saved-empty { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .bc-editor-toolbar__left { width: 100%; }
  .bc-editor-toolbar__right { width: 100%; }
  .bc-cover-picker { grid-template-columns: repeat(2, 1fr); }
  .bc-editor-share-url { max-width: 100%; }
}

/* Report this list — collapsed link in sidebar that expands inline. */
.bc-report-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bc-rule);
}
.bc-report-link {
  background: none;
  border: 0;
  color: var(--bc-muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.bc-report-link:hover { color: var(--bc-ink); }
.bc-report-form__label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bc-muted);
  margin-bottom: 4px;
}
.bc-report-form__select,
.bc-report-form__notes {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--bc-rule);
  border-radius: 4px;
  padding: 8px;
  background: #fff;
  margin-bottom: 8px;
}
.bc-report-form__notes { min-height: 60px; resize: vertical; }
.bc-report-form__actions { display: flex; gap: 8px; }

/* ════════════════════════════════════════════════════════════ */
/* DASHBOARD PRODUCT PICKER                                     */
/* ════════════════════════════════════════════════════════════ */
.bc-product-picker {
  position: relative;
  z-index: 20000;
  display: grid;
  gap: 6px;
}
.bc-product-picker__search { display: flex; gap: 8px; align-items: center; }
.bc-product-picker__input { width: 100%; }
.bc-product-picker__results {
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 0;
  right: 0;
  /* Sits above storefront footer / newsletter block. JS caps max-height to
     the viewport-available space; this fallback applies if scripts fail. */
  z-index: 20001;
  margin-top: 4px;
  margin-bottom: 0;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--bc-rule);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(20, 40, 31, 0.12);
}
.bc-product-picker__results[data-bc-product-picker-portal="true"] {
  position: fixed;
  top: auto;
  bottom: auto;
  left: 0;
  right: auto;
  margin: 0;
  z-index: 2147483000;
}
/* Flip the dropdown above the input when there is not enough room below. */
.bc-product-picker__results--up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
  box-shadow: 0 -8px 24px rgba(20, 40, 31, 0.12);
}
.bc-product-picker__empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--bc-muted);
}
.bc-product-picker__item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--bc-rule);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.bc-product-picker__item:last-child { border-bottom: 0; }
.bc-product-picker__item:hover:not(:disabled),
.bc-product-picker__item:focus-visible:not(:disabled),
.bc-product-picker__item--active:not(:disabled) {
  background: var(--bc-cream);
  outline: none;
}
.bc-product-picker__item--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.bc-product-picker__item--loading { opacity: 0.5; }
.bc-product-picker__thumb {
  width: 48px; height: 48px;
  background: var(--bc-cream);
  border-radius: 3px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bc-product-picker__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bc-product-picker__meta { display: grid; gap: 2px; min-width: 0; }
.bc-product-picker__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--bc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc-product-picker__sub {
  font-size: 12px;
  color: var(--bc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc-product-picker__price {
  font-size: 13px;
  color: var(--bc-muted);
  white-space: nowrap;
}

/* ── List strip (editorial embed) ─────────────────────────────
   Horizontal teaser for one list inside content pages. Designed to
   live INSIDE a theme section wrapper (Horizon "Section" / _blocks):
   the wrapper owns the background color scheme, padding, and width,
   so the strip is transparent and inherits the scheme's CSS custom
   properties (--color-foreground etc.), falling back to Passport
   brand tokens on themes that don't define them. NOT inside
   .bc-passport-page, so it carries its own box-sizing + link-color
   rules (the theme styles bare anchors brand-mandarin, which fails
   contrast — same rationale as the .bc-passport-page override
   above). */
.bc-strip,
.bc-strip *,
.bc-strip *::before,
.bc-strip *::after { box-sizing: border-box; }

.bc-strip {
  position: relative;
  background: transparent;
  font-family: var(--font-body--family, var(--bc-body));
  color: var(--color-foreground, var(--bc-ink));
  /* Never exceed the section's content width — the CTA tile must not
     hang off the page edge. Overflow scrolls inside the scroller. */
  max-width: 100%;
}
/* Horizon's Section wrapper aligns items flex-start, which sizes
   children to max-content — the strip's unwrapped card row would push
   past the page width and clip at the viewport edge. Pin the app-block
   wrapper to the section's content width so the row scrolls inside it
   instead. */
.shopify-app-block:has(> .bc-strip) {
  width: 100%;
  min-width: 0;
}

.bc-strip__scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Hide the scrollbar — arrows + touch swipe are the affordance. */
  scrollbar-width: none;
}
.bc-strip__scroller::-webkit-scrollbar { display: none; }

.bc-strip__intro {
  flex: 0 0 clamp(220px, 24vw, 300px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 8px;
}
.bc-strip__eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary, var(--bc-mandarin-deep));
  font-weight: 600;
  margin-bottom: 10px;
}
.bc-strip__title {
  /* PT Serif italic, matching the list/index card titles (via
     --bc-display). Ink foreground rather than the scheme's grey
     heading accent. */
  font-family: var(--bc-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  margin: 0 0 10px;
}
.bc-strip__title a {
  color: var(--color-foreground, var(--bc-ink)) !important;
  text-decoration: none;
}
.bc-strip__title a:hover { text-decoration: underline; }
.bc-strip__desc {
  font-size: 13.5px;
  line-height: 1.55;
  /* Scheme foreground at reduced strength; falls back to the brand
     muted grey (107 107 98) where the theme defines no scheme vars. */
  color: rgb(var(--color-foreground-rgb, 107 107 98) / 0.72);
  margin: 0;
}

/* Flat cards, like the theme's own product-carousel cards: image on
   the section background, text below, no box or border. */
.bc-strip__card {
  /* Grow to fill the row exactly at desktop widths (no partial tile
     hanging at the edge); when the row genuinely doesn't fit,
     flex-shrink stays 0 so cards hold 170px and the row scrolls. */
  flex: 1 0 170px;
  max-width: 214px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: var(--color-foreground, var(--bc-ink)) !important;
}
.bc-strip__card-img {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgb(var(--color-foreground-rgb, 20 40 31) / 0.04);
}
.bc-strip__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bc-strip__card-body { padding: 10px 2px 0; }
.bc-strip__card-maker {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb, 107 107 98) / 0.65);
  margin-bottom: 4px;
}
.bc-strip__card-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.bc-strip__card-price {
  margin-top: 6px;
  font-size: 12.5px;
  color: rgb(var(--color-foreground-rgb, 107 107 98) / 0.72);
}

/* CTA tile: a square the same size as the card images, in the brand
   green so it reads as the strip's one button. Fixed green (not the
   scheme's button color) by merchant preference. */
.bc-strip__card--cta {
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px;
  border-radius: 6px;
  background: var(--bc-green);
  border: 1px solid var(--bc-green);
  color: var(--bc-cream) !important;
}
.bc-strip__cta-label { font-weight: 600; font-size: 14px; }
.bc-strip__cta-sub { font-size: 12px; opacity: 0.78; }
.bc-strip__card--cta:hover .bc-strip__cta-label { text-decoration: underline; }

.bc-strip__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border, var(--bc-rule));
  background: var(--color-background, var(--bc-paper));
  color: var(--color-foreground, var(--bc-ink));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 1;
}
/* display:flex above would otherwise beat the UA's [hidden] rule, so
   restate it: hidden arrows must actually disappear. */
.bc-strip__arrow[hidden] { display: none; }
.bc-strip__arrow--prev { left: 8px; }
.bc-strip__arrow--next { right: 8px; }
/* Touch devices scroll the strip directly — arrows are desktop chrome. */
@media (hover: none) {
  .bc-strip__arrow { display: none; }
}

.bc-handle-settings {
  padding-top: 8px;
  padding-bottom: 0;
}
.bc-handle-settings__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid var(--color-border, var(--bc-rule));
  border-radius: 6px;
  background: var(--color-background, var(--bc-paper));
}
/* When the editor panel is open it butts against the summary card, so the
 * card's bottom corners square off to read as one attached surface. */
.bc-handle-settings__summary:has(+ .bc-handle-settings__editor:not([hidden])) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bc-handle-settings__value {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bc-handle-settings__help {
  margin: 5px 0 0;
  color: var(--bc-muted);
  font-size: 12px;
  line-height: 1.5;
}
.bc-handle-settings__editor {
  padding: 18px 20px;
  border: 1px solid var(--color-border, var(--bc-rule));
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--color-background, var(--bc-paper));
}
.bc-handle-settings__editor[hidden],
.bc-handle-settings__error[hidden] {
  display: none;
}
.bc-handle-settings__label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
}
.bc-handle-settings__input {
  width: 100%;
  max-width: 480px;
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--color-border, var(--bc-rule));
  border-radius: 4px;
  background: var(--color-background, var(--bc-paper));
  color: var(--color-foreground, var(--bc-ink));
  font: inherit;
}
.bc-handle-settings__input:focus {
  outline: 2px solid var(--bc-green);
  outline-offset: 2px;
}
.bc-handle-settings__error {
  margin: 8px 0 0;
  color: #9c2e2e;
  font-size: 12px;
}
.bc-handle-settings__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .bc-handle-settings__summary {
    align-items: flex-start;
    flex-direction: column;
  }
}