/*
 * Bento configurator — storefront stylesheet.
 *
 * Design (2026 refresh): ONE calm surface, not a stack of boxes. The widget is
 * a single card; compartments are hairline-divided rows; when a step opens its
 * products appear as a borderless, image-forward grid that uses the full width;
 * selection is shown by a ring + drawn check, never another box. Ink is the
 * default action colour (CTA); green (tatami) means only "done / saved".
 *
 * All rules scoped under .bento-configurator so the widget cannot leak into
 * the host theme. Tokens come from bento.css (loaded by the Liquid block); the
 * --bc-* chain prefers the merchant's theme custom properties, then Bento, so
 * the widget still feels native on any theme.
 *
 * The dashboard preview (app/styles/admin.css + BentoPreview.tsx) mirrors this
 * exact language so the merchant sees what customers see. Keep the two in step.
 */

.bento-configurator {
  /* Theme-inheritance fallback chain: theme tokens first, then Bento. */
  --bc-text:       var(--color-base-text, var(--bento-ink-900));
  --bc-text-mute:  var(--color-base-text-subdued, var(--bento-ink-500));
  --bc-bg:         var(--color-base-background-1, var(--bento-paper-50));
  --bc-surface:    var(--color-base-background-2, var(--bento-paper-0));
  --bc-border:     var(--color-base-border, var(--bento-paper-200));
  /* A theme with no accent gets Bento ink, never Bento's own brand red: the
     builder should look like the store, not like Bento. */
  --bc-accent:     var(--color-base-accent-1, var(--bento-ink-900));
  --bc-success:    var(--bento-tatami-500);
  /* CTA colour is set inline by the Liquid block (merchant setting, default
     ink). --bc-cta / --bc-cta-text just add a safety fallback. */
  --bc-cta:        var(--bc-cta-bg, var(--bento-ink-900));
  --bc-cta-text:   var(--bc-cta-fg, #ffffff);

  container-type: inline-size;
  container-name: bento;
  /* No TOP margin on a product page: the widget sits in the theme's product
     info column, and its own top margin dropped the card below the top of the
     product media, which reads as an accidental misalignment. Hug the top of
     the column; keep the bottom margin for separation from anything below.
     Off-product placements (--hero / --featured) re-add the top margin just
     after this rule, so homepage/collection spacing is unchanged. */
  margin: 0 0 var(--bento-space-6);
  padding: var(--bento-space-6);
  border: 1px solid var(--bc-border);
  border-radius: var(--bento-radius-xl);
  background: var(--bc-surface);
  box-shadow: var(--bento-shadow-md);
  color: var(--bc-text);
  font-family: var(--bento-font-sans), var(--font-body-family, inherit);
  font-feature-settings: "cv11", "ss03";
  font-size: var(--bento-text-base);
  line-height: var(--bento-leading-normal);
}
@container bento (min-width: 700px) {
  .bento-configurator { padding: var(--bento-space-8); }
}
/* Off-product placements (homepage / collection feature layouts) are full
   sections, not a product-info-column block, so they keep the top margin the
   product-page rule above removed. */
.bento-configurator--hero,
.bento-volume--featured {
  margin-top: var(--bento-space-6);
}

/* ─── OFF-PRODUCT HERO "FEATURE" (mix-match on homepage / collection) ────────
   A pitch column on the LEFT (fixed-shape image + name + value prop + perks)
   and the working builder on the RIGHT. The image has a FIXED 4:3 aspect,
   decoupled from the builder's height, so it always looks good and never jumps
   when a compartment expands. The pitch is sticky, so it stays beside the tall
   builder as the shopper scrolls. Narrow container: everything stacks (pitch on
   top, builder below). */
.bento-configurator__hero-grid {
  display: grid;
  grid-template-columns: 1fr; /* stacked by default (narrow container) */
  gap: var(--bento-space-6);
}
.bento-configurator__pitch { min-width: 0; }
.bento-configurator__pitch-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--bento-radius-lg);
  overflow: hidden;
  background: var(--bc-bg);
}
.bento-configurator__pitch-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Scoped under --hero so these beat the base .bento-configurator__title /
   __lede rules (which set margin:0 and appear LATER in the file at equal
   specificity — that's why earlier margin-top bumps here silently lost). */
.bento-configurator--hero .bento-configurator__pitch-title { margin-top: 40px; }
.bento-configurator--hero .bento-configurator__pitch-lede { margin-top: 14px; }
.bento-configurator__pitch-perks {
  list-style: none;
  margin: var(--bento-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bento-space-2);
}
.bento-configurator__pitch-perk {
  display: flex;
  align-items: center;
  gap: var(--bento-space-2);
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-medium);
  color: var(--bc-text);
}
.bento-configurator__pitch-perk-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--bc-text);
}
.bento-configurator__builder { min-width: 0; }
/* The builder side is a single column: parts, then the running total + CTA
   below. The parts/summary two-column split is only for the on-product page. */
.bento-configurator--hero .bento-progress { margin-top: 0; }
.bento-configurator--hero .bento-configurator__layout {
  display: flex;
  flex-direction: column;
  gap: var(--bento-space-6);
  /* The base 700px rule sets align-items:start (for the on-product grid); reset
     it so the parts + receipt STRETCH to fill the builder column, no dead gap. */
  align-items: stretch;
}
.bento-configurator--hero .bento-stack { padding-right: 0; }
.bento-configurator--hero .bento-summary {
  padding-left: 0;
  border-left: none;
  position: static;
  border-top: 1px solid var(--bc-border);
  padding-top: var(--bento-space-6);
}
@container bento (min-width: 700px) {
  .bento-configurator__hero-grid {
    grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
    align-items: start; /* top-aligned so the pitch can stay sticky */
    gap: var(--bento-space-8);
  }
  .bento-configurator__pitch {
    position: sticky;
    top: var(--bento-space-6);
  }
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */

.bento-configurator__header {
  display: flex;
  flex-direction: column;
  gap: var(--bento-space-2);
  margin-bottom: var(--bento-space-5);
}
.bento-configurator__title {
  font-family: var(--bento-font-display), var(--font-heading-family, inherit);
  font-optical-sizing: auto;
  font-size: var(--bento-text-xl);
  font-weight: var(--bento-font-semi);
  letter-spacing: var(--bento-tracking-tight);
  line-height: var(--bento-leading-tight);
  color: var(--bc-text);
  margin: 0;
}
.bento-configurator__lede {
  margin: 0;
  font-size: var(--bento-text-sm);
  color: var(--bc-text-mute);
  line-height: var(--bento-leading-snug);
}

/* Segmented progress + label (or the "All packed" chip on completion), inline. */
.bento-progress {
  display: flex;
  align-items: center;
  gap: var(--bento-space-3);
  margin-top: var(--bento-space-3);
}
.bento-progress__segments {
  display: flex;
  gap: 4px;
  flex: 1;
}
.bento-progress__seg {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--bento-paper-200);
  transition: background var(--bento-dur-base) var(--bento-ease-out);
}
.bento-progress__seg--done {
  /* Ink by default (monochrome/premium); merchant --bc-progress still overrides. */
  background: var(--bc-progress, var(--bento-ink-900));
}
.bento-progress__label {
  font-size: var(--bento-text-xs);
  font-weight: var(--bento-font-semi);
  color: var(--bc-text-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bento-packed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: var(--bento-paper-100);
  color: var(--bc-text);
  font-size: var(--bento-text-xs);
  font-weight: var(--bento-font-bold);
  line-height: 1;
  white-space: nowrap;
}
.bento-packed__check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--bento-ink-900);
  color: #fff;
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
/* Narrow (product-info column): single column, summary below the steps.
   Wide (full-width placement): steps | summary with a hairline between,
   summary sticky. Container query, so it adapts to wherever it's dropped.  */

.bento-configurator__layout {
  display: flex;
  flex-direction: column;
}
@container bento (min-width: 700px) {
  .bento-configurator__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
  .bento-stack { padding-right: var(--bento-space-10); }
  .bento-summary {
    padding-left: var(--bento-space-10);
    border-left: 1px solid var(--bc-border);
    position: sticky;
    top: var(--bento-space-6);
  }
}

/* ─── STEPS (hairline rows; open state gently grouped) ───────────────────── */

.bento-stack { display: flex; flex-direction: column; }

.compartment {
  border-top: 1px solid var(--bc-border);
  transition: background var(--bento-dur-base) var(--bento-ease-out);
}
.compartment:first-child { border-top: none; }
.compartment--open {
  /* Theme-adaptive wash so the "open" grouping is visible on any surface,
     including pure-white themes where --bc-bg would blend into the card. */
  background: color-mix(in srgb, var(--bc-text) 5%, var(--bc-surface));
  border-radius: var(--bento-radius-lg);
  border-top-color: transparent;
  margin: 2px 0;
}
.compartment--open + .compartment { border-top-color: transparent; }
.compartment--skipped { border-style: dashed; }

.compartment__trigger {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--bento-space-4);
  width: 100%;
  padding: var(--bento-space-4) var(--bento-space-3);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--bento-radius-lg);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--bento-dur-fast) var(--bento-ease-out);
}
.compartment:not(.compartment--open) .compartment__trigger:hover {
  background: color-mix(in srgb, var(--bc-text) 3.5%, var(--bc-surface));
}
.compartment__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bc-accent);
}

/* Numbered step badge; becomes a solid green check when picked. */
.compartment__step {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bento-paper-100);
  color: var(--bento-ink-500);
  font-family: var(--bento-font-display);
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-semi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition:
    background var(--bento-dur-base) var(--bento-ease-out),
    color      var(--bento-dur-base) var(--bento-ease-out);
}
.compartment--open .compartment__step {
  background: var(--bento-ink-900);
  color: #fff;
}
.compartment--picked .compartment__step {
  background: var(--bento-ink-900);
  color: #fff;
  font-family: inherit;
}
.compartment--skipped .compartment__step {
  background: transparent;
  color: var(--bento-ink-400);
  box-shadow: inset 0 0 0 1px var(--bc-border);
}

.compartment__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.compartment__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bento-space-3);
  flex-wrap: wrap;
}
.compartment__title {
  font-size: var(--bento-text-md);
  font-weight: var(--bento-font-semi);
  letter-spacing: var(--bento-tracking-tight);
  line-height: var(--bento-leading-tight);
  color: var(--bc-text);
}
.compartment__from {
  font-size: var(--bento-text-xs);
  color: var(--bento-ink-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compartment__sub {
  font-size: var(--bento-text-sm);
  color: var(--bc-text-mute);
  line-height: var(--bento-leading-snug);
}
.compartment__muted { color: var(--bento-ink-400); }

/* Preview thumbnails inside a collapsed, undecided compartment. */
.compartment__preview {
  display: flex;
  align-items: center;
  gap: var(--bento-space-2);
  margin-top: 3px;
}
.compartment__preview-img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--bento-radius-sm);
  background: var(--bento-paper-100);
  display: block;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 16, 0.05);
}
.compartment__preview-blank { background: var(--bento-paper-100); }
.compartment__preview-more {
  font-size: var(--bento-text-xs);
  font-weight: var(--bento-font-semi);
  color: var(--bento-ink-400);
  white-space: nowrap;
}

/* Picked line: chosen product shown inline. */
.compartment__line {
  display: flex;
  align-items: center;
  gap: var(--bento-space-3);
}
.compartment__pick-image {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--bento-radius-md);
  background: var(--bento-paper-100);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 16, 0.05);
}
.compartment__pick-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compartment__pick-title {
  font-size: var(--bento-text-md);
  font-weight: var(--bento-font-semi);
  letter-spacing: var(--bento-tracking-tight);
  color: var(--bc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compartment__pick-sub {
  font-size: var(--bento-text-xs);
  color: var(--bento-ink-500);
  font-weight: var(--bento-font-semi);
}

/* Right column: chevron (rotates on open) or "Change" text (picked). */
.compartment__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--bento-ink-400);
  transition:
    transform var(--bento-dur-base) var(--bento-ease-out),
    color     var(--bento-dur-base) var(--bento-ease-out);
}
.compartment:hover .compartment__chevron { color: var(--bc-text); }
.compartment--open .compartment__chevron {
  transform: rotate(90deg);
  color: var(--bc-text);
}
.compartment__change {
  flex-shrink: 0;
  font-size: var(--bento-text-xs);
  font-weight: var(--bento-font-semi);
  color: var(--bc-accent);
}

/* ─── OPEN PICKER (borderless image grid, full width) ────────────────────── */

.compartment__picker {
  padding: 0 var(--bento-space-3) var(--bento-space-4);
  animation: bento-reveal var(--bento-dur-mid) var(--bento-ease-out);
}
@keyframes bento-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
/* Explicit column counts (not auto-fill) so a narrow product-info column never
   collapses to a single giant option per row. Always at least 2 across. */
.compartment__scroller {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bento-space-5) var(--bento-space-4);
  padding: 6px 0 2px;
  /* Cap the list so a large collection (50+ products) scrolls WITHIN the
     compartment instead of growing the card and forcing the whole page to
     scroll. overscroll-behavior keeps the scroll from chaining to the page
     once you hit the ends; the scrollbar only appears when it overflows, so
     short lists are unaffected. */
  max-height: min(56vh, 540px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding-right: 6px;
}
@container bento (min-width: 520px) {
  .compartment__scroller { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container bento (min-width: 820px) {
  .compartment__scroller { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A lone option shouldn't stretch across the whole row. */
.compartment__scroller:has(> .compartment__option:only-child) {
  grid-template-columns: minmax(0, 200px);
}

.compartment__option {
  display: flex;
  flex-direction: column;
  gap: var(--bento-space-2);
  padding: 0;
  background: none;
  border: none;
  color: var(--bc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.compartment__option:focus-visible {
  outline: 2px solid var(--bc-accent);
  outline-offset: 3px;
  border-radius: 16px;
}
.compartment__option:disabled { opacity: 0.45; cursor: not-allowed; }

.compartment__option-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bento-paper-100);
}
.compartment__option-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  transition: transform var(--bento-dur-base) var(--bento-ease-out);
}
.compartment__option-image--blank { background: var(--bento-paper-100); }
.compartment__option:hover:not(:disabled) .compartment__option-image {
  transform: scale(1.045);
}
/* Ring lives on a wrapper ::after so it sits cleanly over the image and any
   theme background (inset box-shadow on <img> is unreliable). */
.compartment__option-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 16, 0.07);
  transition: box-shadow var(--bento-dur-fast) var(--bento-ease-out);
}
.compartment__option:hover:not(:disabled) .compartment__option-media::after {
  box-shadow: inset 0 0 0 1.5px var(--bento-ink-300);
}
.compartment__option--chosen .compartment__option-media::after {
  box-shadow: inset 0 0 0 2px var(--bento-ink-900);
}
.compartment__option-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bento-ink-900);
  color: #fff;
  display: none;
  place-items: center;
  box-shadow: 0 2px 6px rgba(14, 14, 16, 0.22);
}
.compartment__option--chosen .compartment__option-check { display: grid; }

/* The variant name in text: only the list layout shows it (the grid shows the
   chip on the photo instead). */
.compartment__option-variant-text { display: none; font-weight: var(--bento-font-regular); color: var(--bento-ink-500); }

/* List layout: compact rows (small photo, name, price) for compartments with
   many choices, or products that are told apart by name more than by photo.
   Chosen by the merchant; the photo tile grid is the default. */
.compartment__scroller--list,
.compartment__scroller--list:has(> .compartment__option:only-child) {
  grid-template-columns: 1fr;
  gap: 0;
}
.compartment__scroller--list .compartment__option {
  flex-direction: row;
  align-items: center;
  gap: var(--bento-space-3);
  padding: var(--bento-space-2);
  border-radius: 12px;
}
.compartment__scroller--list .compartment__option + .compartment__option { margin-top: 2px; }
.compartment__scroller--list .compartment__option:hover:not(:disabled) { background: var(--bento-paper-50); }
.compartment__scroller--list .compartment__option--chosen { background: var(--bento-paper-100); }
.compartment__scroller--list .compartment__option-media { flex: none; width: 56px; border-radius: 10px; }
.compartment__scroller--list .compartment__option:hover:not(:disabled) .compartment__option-image { transform: none; }
.compartment__scroller--list .compartment__option-variant { display: none; }
.compartment__scroller--list .compartment__option-info { top: 3px; left: 3px; width: 18px; height: 18px; font-size: 10px; }
.compartment__scroller--list .compartment__option-variant-text { display: inline; }
.compartment__scroller--list .compartment__option-check { top: 50%; right: 50%; transform: translate(50%, -50%); width: 22px; height: 22px; }
.compartment__scroller--list .compartment__option-body {
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--bento-space-3);
}
.compartment__scroller--list .compartment__option-title { -webkit-line-clamp: 2; }
.compartment__scroller--list .compartment__option-price { grid-column: 2; grid-row: 1; text-align: right; }
.compartment__scroller--list .compartment__option-choose { grid-column: 1; }

.compartment__option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compartment__option-title {
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-semi);
  line-height: 1.3;
  letter-spacing: var(--bento-tracking-tight);
  color: var(--bc-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compartment__option-price {
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-medium);
  color: var(--bento-ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Cue on a multi-variant tile so a tap reads as "you'll choose" rather than a
   silent cheapest-variant add. Quiet accent with a small chevron. */
.compartment__option-choose {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--bento-text-xs);
  font-weight: var(--bento-font-semi);
  color: var(--bc-accent);
  letter-spacing: 0.01em;
}
.compartment__option-choose::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
  margin-top: -3px;
}

/* Pinned-variant pill on the option image (e.g. "1kg") when the compartment
   narrowed the product to a single variant. Ink chip, white text, legible on any
   photo. */
.compartment__option-variant {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 1;
  max-width: calc(100% - 14px);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(14, 14, 16, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: var(--bento-font-semi);
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(14, 14, 16, 0.28);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Info dot — the opt-in peek affordance, shown on every tile (all devices). The
   peek opens only when this is tapped, never on hover, so browsing stays quiet.
   Quiet by default; lifts on hover/focus so it reads as tappable. */
.compartment__option-info {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--bento-ink-700);
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(14, 14, 16, 0.18);
  cursor: pointer;
  transition:
    background var(--bento-dur-fast) var(--bento-ease-out),
    color var(--bento-dur-fast) var(--bento-ease-out),
    transform var(--bento-dur-fast) var(--bento-ease-out);
}
.compartment__option-info:hover {
  background: var(--bento-ink-900);
  color: #fff;
  transform: scale(1.06);
}

.compartment__empty {
  margin: 0;
  padding: var(--bento-space-4) 0 var(--bento-space-2);
  font-size: var(--bento-text-sm);
  color: var(--bc-text-mute);
  text-align: center;
}
.compartment__picker-footer {
  padding: var(--bento-space-3) 0 0;
  display: flex;
  gap: var(--bento-space-5);
  flex-wrap: wrap;
}
.compartment__inline-action {
  background: transparent;
  border: none;
  font: inherit;
  font-size: var(--bento-text-sm);
  color: var(--bc-text-mute);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--bento-space-1) 0;
}
.compartment__inline-action:hover { color: var(--bc-text); }
/* Skip on the collapsed card for an optional step. */
.compartment__skip-inline {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  text-align: right;
  background: transparent;
  border: none;
  font: inherit;
  font-size: var(--bento-text-sm);
  color: var(--bc-text-mute);
  text-decoration: underline;
  cursor: pointer;
  padding: 0 var(--bento-space-3) var(--bento-space-4);
}
.compartment__skip-inline:hover { color: var(--bc-text); }

/* ─── SUMMARY (the receipt) ──────────────────────────────────────────────── */

.bento-summary {
  display: flex;
  flex-direction: column;
  gap: var(--bento-space-4);
  padding-top: var(--bento-space-5);
  padding-bottom: 2px;
  border-top: 1px solid var(--bc-border);
  margin-top: 6px;
}
@container bento (min-width: 700px) {
  .bento-summary { border-top: none; margin-top: 0; padding-top: 0; }
}
.bento-summary__title {
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-semi);
  color: var(--bc-text-mute);
  margin: 0;
}
.bento-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bento-space-3);
}
.bento-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bento-space-3);
  font-size: var(--bento-text-sm);
}
.bento-summary__item--anchor { flex-wrap: wrap; }
.bento-summary__name {
  color: var(--bento-ink-700);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bento-space-1) var(--bento-space-2);
  min-width: 0;
}
.bento-summary__item--empty .bento-summary__name,
.bento-summary__item--skipped .bento-summary__name {
  color: var(--bento-ink-400);
}
.bento-summary__pill,
.bento-summary__hint {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--bento-text-xs);
  font-weight: var(--bento-font-semi);
  line-height: 1.5;
}
.bento-summary__pill { background: var(--bento-paper-100); color: var(--bento-ink-500); }
.bento-summary__item--required .bento-summary__hint {
  background: var(--bento-paper-200);
  color: var(--bento-ink-900);
}
.bento-summary__item--optional .bento-summary__hint {
  background: var(--bento-paper-100);
  color: var(--bento-ink-500);
}
.bento-summary__price {
  color: var(--bento-ink-500);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.bento-summary__variant { color: var(--bento-ink-400); font-weight: var(--bento-font-regular); }
.bento-summary__discount {
  font-size: var(--bento-text-xs);
  color: var(--bc-success);
  font-weight: var(--bento-font-semi);
}

/* Perks — quiet "also comes with" list, no box. */
.bento-summary__perks {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bento-summary__perks-intro {
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-semi);
  color: var(--bc-text-mute);
}
.bento-summary__perks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bento-summary__perk {
  display: flex;
  align-items: center;
  gap: var(--bento-space-2);
  font-size: var(--bento-text-sm);
  color: var(--bc-text);
  line-height: var(--bento-leading-snug);
}
.bento-summary__perk-icon { color: var(--bento-ink-900); flex-shrink: 0; }

/* Built-in free-gift note: what unlocks the gift, then a confirmation once it's
   the shopper's. Quiet paper chip; the confirmed state firms the ink + shows a
   check. */
.bento-summary__gift-note {
  margin-top: var(--bento-space-3);
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--bento-paper-100, #f3efe6);
  color: var(--bento-ink-700, #2a2620);
  font-size: var(--bento-text-sm);
  font-weight: 600;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: var(--bento-space-2);
}
.bento-summary__gift-note--on {
  color: var(--bento-ink-900, #15110d);
}
.bento-summary__gift-check {
  display: inline-flex;
  color: var(--bc-cta, #17181b);
  flex-shrink: 0;
}

/* Money block — the one ruled separator, so the eye lands on the total. */
.bento-summary__money {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: var(--bento-space-4);
  border-top: 1px solid var(--bc-border);
}
.bento-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bento-space-3);
}
.bento-summary__total-label {
  font-size: var(--bento-text-sm);
  color: var(--bento-ink-500);
  font-weight: var(--bento-font-semi);
}
.bento-summary__total-amounts {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bento-summary__total-was {
  font-size: var(--bento-text-base);
  color: var(--bento-ink-400);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.bento-summary__total-figure {
  font-family: var(--bento-font-display), inherit;
  font-optical-sizing: auto;
  font-size: var(--bento-text-2xl);
  font-weight: var(--bento-font-bold);
  letter-spacing: var(--bento-tracking-tight);
  line-height: 0.95;
  color: var(--bc-text);
  font-variant-numeric: tabular-nums;
}
.bento-summary__savings {
  display: inline-flex;
  align-items: center;
  gap: var(--bento-space-2);
  flex-wrap: wrap;
}
.bento-summary__savings-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bento-tatami-100);
  color: #5a6730;
  font-size: var(--bento-text-xs);
  font-weight: var(--bento-font-bold);
  font-variant-numeric: tabular-nums;
}
.bento-summary__savings-note {
  font-size: var(--bento-text-xs);
  color: var(--bc-text-mute);
}

/* Savings-led hero (off-product / anchorless placement). */
.bento-summary__hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--bento-space-4);
  border-top: 1px solid var(--bc-border);
}
.bento-summary__hero-figure {
  font-family: var(--bento-font-display), inherit;
  font-optical-sizing: auto;
  font-size: var(--bento-text-2xl);
  font-weight: var(--bento-font-bold);
  letter-spacing: var(--bento-tracking-tight);
  line-height: 1.05;
  color: var(--bc-success);
  font-variant-numeric: tabular-nums;
}
.bento-summary__hero-figure--muted {
  color: var(--bc-text);
  font-size: var(--bento-text-xl);
}
.bento-summary__hero-sub {
  font-size: var(--bento-text-xs);
  color: var(--bc-text-mute);
  font-variant-numeric: tabular-nums;
}

.bento-summary__cta {
  position: relative;
  overflow: hidden;
  margin-top: var(--bento-space-1);
  padding: 15px var(--bento-space-5);
  background: var(--bc-cta);
  color: var(--bc-cta-text);
  border: none;
  border-radius: var(--bento-radius-md);
  font: inherit;
  font-size: var(--bento-text-base);
  font-weight: var(--bento-font-semi);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(14, 14, 16, 0.08);
  transition:
    background var(--bento-dur-base) var(--bento-ease-out),
    transform  var(--bento-dur-fast) var(--bento-ease-out),
    box-shadow var(--bento-dur-base) var(--bento-ease-out);
}
.bento-summary__cta:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bc-cta), #fff 14%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 14, 16, 0.18);
}
.bento-summary__cta:active:not(:disabled) { transform: translateY(0); }
.bento-summary__cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--bc-cta) 34%, transparent),
    0 2px 6px rgba(14, 14, 16, 0.08);
}
.bento-summary__cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.bento-summary__cta--loading { cursor: progress; }
.bento-summary__cta--loading:disabled { opacity: 0.7; }

.bento-summary__reassure {
  margin: 0;
  font-size: var(--bento-text-xs);
  color: var(--bento-ink-500);
  text-align: left;
  line-height: var(--bento-leading-snug);
}

.bento-summary__error {
  margin: 0;
  padding: var(--bento-space-3);
  background: var(--bento-shoyu-100);
  color: var(--bento-shoyu-700);
  border: 1px solid color-mix(in srgb, var(--bento-shoyu-700) 18%, transparent);
  border-radius: var(--bento-radius-md);
  font-size: var(--bento-text-sm);
}

/* ─── DETAIL PEEK ─────────────────────────────────────────────────────────── */
/* Portaled to <body>; styled with the global --bento-* tokens (on :root). A
   small hover popover on desktop; a centred mini-popover with a scrim on touch.
   Never blocks picking — the tile click still adds; only a variant chip commits
   here. position:fixed coords come from the anchored tile (set inline in JS). */

.bento-peek {
  position: fixed;
  z-index: 2147483001;
  width: min(300px, calc(100vw - 24px));
  /* Never exceed the viewport; if a card is unusually tall it scrolls inside
     itself rather than running off an edge. The JS positioner keeps it clamped
     on-screen; this is the last-resort cap. */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: var(--bento-paper-0);
  border: 1px solid var(--bento-paper-200);
  border-radius: var(--bento-radius-xl);
  box-shadow: 0 18px 50px rgba(14, 14, 16, 0.2), 0 4px 14px rgba(14, 14, 16, 0.1);
  overflow-x: hidden;
  font-family: var(--bento-font-sans), -apple-system, system-ui, sans-serif;
  animation: bento-peek-in var(--bento-dur-fast) var(--bento-ease-out);
}
.bento-peek--touch {
  width: min(360px, calc(100vw - 24px));
  box-shadow: 0 24px 64px rgba(14, 14, 16, 0.28);
}
.bento-peek__scrim {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(14, 14, 16, 0.28);
  animation: bento-peek-fade var(--bento-dur-base) var(--bento-ease-out);
}
.bento-peek__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bento-ink-700);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(14, 14, 16, 0.2);
}
.bento-peek__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bento-paper-100);
}
.bento-peek__body {
  padding: var(--bento-space-3) var(--bento-space-4) var(--bento-space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bento-peek__title {
  font-family: var(--bento-font-display), inherit;
  font-size: var(--bento-text-md);
  font-weight: var(--bento-font-semi);
  letter-spacing: var(--bento-tracking-tight);
  line-height: 1.25;
  color: var(--bento-ink-900);
}
.bento-peek__price {
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-semi);
  color: var(--bento-ink-700);
  font-variant-numeric: tabular-nums;
}
.bento-peek__variant { color: var(--bento-ink-400); font-weight: var(--bento-font-regular); }
.bento-peek__desc {
  margin: 6px 0 0;
  font-size: var(--bento-text-sm);
  line-height: var(--bento-leading-normal);
  color: var(--bento-ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "View product page" link: quiet inline action, opens the full PDP in a new
   tab so the shopper keeps their bundle progress. */
.bento-peek__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--bento-text-sm);
  font-weight: 600;
  color: var(--bento-ink-900);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  line-height: 1.3;
  align-self: flex-start;
}
.bento-peek__link:hover { color: var(--bento-ink-900); }
.bento-peek__link svg { flex: none; }
.bento-peek__chips { display: flex; flex-wrap: wrap; gap: var(--bento-space-2); margin-top: 10px; }
.bento-peek__chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--bento-paper-300);
  background: var(--bento-paper-0);
  color: var(--bento-ink-900);
  font: inherit;
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-semi);
  cursor: pointer;
  transition:
    border-color var(--bento-dur-fast) var(--bento-ease-out),
    background var(--bento-dur-fast) var(--bento-ease-out),
    color var(--bento-dur-fast) var(--bento-ease-out);
}
.bento-peek__chip:hover:not(:disabled) {
  border-color: var(--bento-ink-900);
  background: var(--bento-ink-900);
  color: #fff;
}
.bento-peek__chip:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
@keyframes bento-peek-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bento-peek-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bento-peek, .bento-peek__scrim { animation: none; }
}

/* ─── VOLUME WIDGET ──────────────────────────────────────────────────────── */
/* One product, packed deep. Tier cards set the quantity; a stepper fine-tunes;
   the nudge points at the next rung. Reuses .bento-summary__cta + __error. */

.bento-volume__header { margin-bottom: var(--bento-space-4); }
.bento-volume__title {
  margin: 0;
  font-size: var(--bento-text-lg);
  font-weight: var(--bento-font-semi);
  color: var(--bc-text);
  line-height: var(--bento-leading-tight);
}
.bento-volume__lede {
  margin: 2px 0 0;
  font-size: var(--bento-text-sm);
  color: var(--bc-text-mute);
}
.bento-volume__perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--bento-space-2) 0 0;
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-medium);
  color: var(--bc-text);
}
.bento-volume__perk-check { flex: 0 0 auto; color: var(--bc-text); }
/* ── FEATURED off-product (homepage / collection): a product hero ───────────
   ONE layout that looks right for any image: the image sits in a fixed panel and
   is cover-cropped to fill it edge to edge (never stretched, never a gap, never
   white space), whatever the source shape or size. The merchant is advised in
   the admin to upload a square image so nothing important gets cropped.

     • wide container  → two columns, the image panel on the left stretched to
       the FULL content height (cover). Because the panel always matches the
       content's height, there is never a gap under it, however long the
       description or however many tiers.
     • narrow container → stacks, the image a 3:2 banner across the top (cover).

   These rules key off .bento-volume--featured alone, so the layout never depends
   on any client-side shape detection. */
.bento-volume--featured.bento-configurator {
  padding: 0; /* the image bleeds to the card edge */
  overflow: hidden; /* clip it to the card's rounded corners */
}
.bento-volume__layout {
  display: grid;
  grid-template-columns: 1fr; /* stacked by default (narrow container) */
}
.bento-volume__media {
  position: relative;
  background: var(--bc-bg);
  aspect-ratio: 3 / 2; /* a banner across the top when stacked */
}
.bento-volume__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bento-volume__content { min-width: 0; }
.bento-volume--featured .bento-volume__content { padding: var(--bento-space-6); }
/* Wide enough: image panel beside the content, stretched to the full content
   height so it always fills cleanly with no gap and no dead space. */
@container bento (min-width: 620px) {
  .bento-volume--featured .bento-volume__layout {
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    align-items: stretch; /* image panel fills the content's height */
  }
  .bento-volume--featured .bento-volume__media {
    aspect-ratio: auto; /* height comes from the row, not a fixed ratio */
  }
  .bento-volume--featured .bento-volume__content { padding: var(--bento-space-8); }
  .bento-volume--featured .bento-volume__title { font-size: var(--bento-text-xl); }
}
/* The product description (off-product). Wraps to the content width, but capped
   for readability so a long body doesn't become a wall of text. */
.bento-volume__desc {
  margin: var(--bento-space-3) 0 0;
  font-size: var(--bento-text-sm);
  line-height: var(--bento-leading-normal);
  color: var(--bc-text-mute);
  max-width: 62ch;
}
.bento-volume__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--bento-space-3);
}
.bento-volume__tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--bento-space-4) var(--bento-space-3);
  text-align: left;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bento-radius-lg);
  cursor: pointer;
  font: inherit;
  color: var(--bc-text);
  transition:
    border-color var(--bento-dur-base) var(--bento-ease-out),
    box-shadow   var(--bento-dur-base) var(--bento-ease-out),
    transform    var(--bento-dur-fast) var(--bento-ease-out),
    background   var(--bento-dur-base) var(--bento-ease-out);
}
.bento-volume__tier:hover {
  border-color: var(--bento-ink-300);
  transform: translateY(-1px);
}
.bento-volume__tier--active {
  border-color: var(--bc-cta);
  background: color-mix(in srgb, var(--bc-cta) 8%, var(--bc-surface));
  box-shadow: inset 0 0 0 1px var(--bc-cta);
}
.bento-volume__tier:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-cta) 32%, transparent);
}
.bento-volume__best {
  position: absolute;
  top: -9px;
  right: var(--bento-space-3);
  padding: 2px 8px;
  background: var(--bc-cta);
  color: var(--bc-cta-text);
  border-radius: 999px;
  font-size: var(--bento-text-xs);
  font-weight: var(--bento-font-semi);
  white-space: nowrap;
}
.bento-volume__tier-qty { font-size: var(--bento-text-base); font-weight: var(--bento-font-semi); }
.bento-volume__tier-save {
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-semi);
  color: var(--bc-success);
}
.bento-volume__tier-save--muted { color: var(--bc-text-mute); font-weight: var(--bento-font-regular); }
.bento-volume__tier-unit { font-size: var(--bento-text-sm); color: var(--bc-text-mute); font-variant-numeric: tabular-nums; }
/* List layout: full-width rows. Buy N on the left, saving and price each on the
   right. Chosen by the merchant; the tile grid is the default. */
.bento-volume__tiers--list { grid-template-columns: 1fr; gap: var(--bento-space-2); }
.bento-volume__tiers--list .bento-volume__tier {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "qty best save" "qty best unit";
  align-items: center;
  column-gap: var(--bento-space-3);
  row-gap: 2px;
  padding: var(--bento-space-3) var(--bento-space-4);
}
.bento-volume__tiers--list .bento-volume__tier-qty { grid-area: qty; }
.bento-volume__tiers--list .bento-volume__tier-save { grid-area: save; text-align: right; }
.bento-volume__tiers--list .bento-volume__tier-unit { grid-area: unit; text-align: right; }
.bento-volume__tiers--list .bento-volume__best { grid-area: best; position: static; justify-self: start; }
.bento-volume__nudge {
  margin: 0;
  padding: var(--bento-space-3) var(--bento-space-4);
  background: var(--bc-bg);
  border-radius: var(--bento-radius-md);
  font-size: var(--bento-text-sm);
  font-weight: var(--bento-font-semi);
  color: var(--bc-text);
  /* Always present + a floor height that fits two lines, so the stepper +
     Add-to-cart below hold a constant position whatever the nudge text is. */
  min-height: 3.4rem;
  display: flex;
  align-items: center;
}
/* Summary is a full-width vertical STACK (was a cramped row beside the stepper).
   Giving each line the full width means the text wraps predictably, so nothing
   below it moves as the shopper steps the quantity. */
.bento-volume__summary {
  display: flex;
  flex-direction: column;
  gap: var(--bento-space-3);
  margin-top: var(--bento-space-4);
  padding-top: var(--bento-space-4);
  border-top: 1px solid var(--bc-border);
}
.bento-volume__price {
  display: flex;
  align-items: baseline;
  gap: var(--bento-space-2);
}
.bento-volume__qty {
  display: inline-flex;
  align-items: center;
  gap: var(--bento-space-2);
  border: 1px solid var(--bc-border);
  border-radius: var(--bento-radius-md);
  padding: 2px;
  /* Sits on its own row in the stacked summary, left-aligned. */
  align-self: flex-start;
}
.bento-volume__step {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--bc-text);
  font-size: var(--bento-text-lg);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--bento-radius-sm);
}
.bento-volume__step:hover:not(:disabled) { background: var(--bc-bg); }
.bento-volume__step:disabled { opacity: 0.35; cursor: not-allowed; }
.bento-volume__qty-value { min-width: 28px; text-align: center; font-weight: var(--bento-font-semi); font-variant-numeric: tabular-nums; }
.bento-volume__was { text-decoration: line-through; color: var(--bc-text-mute); font-size: var(--bento-text-base); font-variant-numeric: tabular-nums; }
/* Kept in the DOM to hold the row height when there's no saving. */
.bento-volume__was--placeholder { visibility: hidden; }
.bento-volume__now { font-size: var(--bento-text-xl); font-weight: var(--bento-font-bold); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
.bento-volume__save-note { margin: 0; font-size: var(--bento-text-sm); color: var(--bc-text-mute); font-variant-numeric: tabular-nums; }
.bento-volume__per-unit { color: var(--bc-text-mute); }
.bento-volume__save-figure { display: inline-block; color: var(--bc-success); font-weight: var(--bento-font-semi); font-variant-numeric: tabular-nums; }
.bento-volume__save-figure--surge { animation: bento-save-surge 600ms var(--bento-ease-spring); }
@keyframes bento-save-surge { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.bento-volume__save-figure--best { font-weight: var(--bento-font-bold); text-shadow: 0 0 12px color-mix(in srgb, var(--bc-success) 45%, transparent); }
.bento-volume__cta { width: 100%; }

/* ─── STICKY PRICE BAR ───────────────────────────────────────────────────── */
/* PORTALED to <body> by BentoConfigurator so position:fixed pins to the
   viewport, not a transformed theme ancestor. Theme tokens + merchant CTA
   colours are copied inline onto it in JS; show/hide is JS-driven. */

.bento-mobilebar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  align-items: center;
  gap: var(--bento-space-4);
  padding: var(--bento-space-3) var(--bento-space-4);
  padding-bottom: calc(var(--bento-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bc-surface);
  border-top: 1px solid var(--bc-border);
  box-shadow: 0 -4px 20px rgba(14, 14, 16, 0.1);
  transform: translateY(110%);
  transition: transform var(--bento-dur-mid) var(--bento-ease-out);
  font-family: var(--bento-font-sans), -apple-system, system-ui, sans-serif;
}
.bento-mobilebar--show { transform: translateY(0); }
.bento-mobilebar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bento-mobilebar__amounts { display: flex; align-items: baseline; gap: var(--bento-space-2); }
.bento-mobilebar__was { font-size: var(--bento-text-sm); color: var(--bento-ink-400); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.bento-mobilebar__now {
  font-family: var(--bento-font-display), inherit;
  font-size: var(--bento-text-lg);
  font-weight: var(--bento-font-bold);
  letter-spacing: var(--bento-tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--bc-text);
}
.bento-mobilebar__note { font-size: var(--bento-text-xs); color: var(--bc-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento-mobilebar__cta {
  flex: 0 0 auto;
  padding: 11px var(--bento-space-4);
  background: var(--bc-cta-bg, var(--bento-ink-900));
  color: var(--bc-cta-fg, #fff);
  border: none;
  border-radius: var(--bento-radius-md);
  font: inherit;
  font-size: var(--bento-text-base);
  font-weight: var(--bento-font-semi);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.bento-mobilebar__cta:disabled { opacity: 0.5; cursor: not-allowed; }
.bento-mobilebar__cta--loading { cursor: progress; opacity: 0.7; }

/* ─── MOBILE TWEAKS ──────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .compartment__trigger { padding: var(--bento-space-3); gap: var(--bento-space-3); }
  .compartment__step { width: 24px; height: 24px; font-size: var(--bento-text-xs); }
  .bento-mobilebar { flex-wrap: wrap; gap: var(--bento-space-2); }
  .bento-mobilebar__info { flex: 1 1 auto; }
  .bento-mobilebar__cta { flex: 1 1 100%; white-space: normal; }
}

/* ─── COMPLETION MOMENT + FEEL (motion only, theme-safe) ─────────────────── */

.compartment {
  animation: bento-rise var(--bento-dur-slow) var(--bento-ease-out) both;
  animation-delay: calc(var(--bento-i, 0) * 70ms);
}
@keyframes bento-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.compartment--just-picked .compartment__step {
  animation: bento-pop 420ms var(--bento-ease-spring) both;
}
.compartment--just-picked .compartment__trigger {
  animation: bento-fill-flash 600ms var(--bento-ease-out);
}
@keyframes bento-pop { 0% { transform: scale(0.5); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes bento-fill-flash {
  from { background: color-mix(in srgb, var(--bento-ink-900) 8%, transparent); }
  to   { background: transparent; }
}
.bento-summary__cta--ready { animation: bento-cta-rise 520ms var(--bento-ease-spring) both; }
@keyframes bento-cta-rise {
  0%   { transform: translateY(2px) scale(0.992); }
  55%  { transform: translateY(-2px) scale(1.012); }
  100% { transform: none; }
}
.bento-summary__cta--ready::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.42) 48%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  animation: bento-sheen 760ms var(--bento-ease-out) 120ms 1;
  pointer-events: none;
}
@keyframes bento-sheen { to { transform: translateX(120%); } }
.bento-summary--sealed { animation: bento-seal 720ms var(--bento-ease-out); }
@keyframes bento-seal {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bento-ink-900) 40%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--bento-ink-900) 0%, transparent); }
}
.bento-packed--in { animation: bento-pop 460ms var(--bento-ease-spring) both; }
.bento-progress__segments.is-complete { animation: bento-bar-shimmer 700ms var(--bento-ease-out); }
@keyframes bento-bar-shimmer { 0%, 100% { filter: none; } 50% { filter: brightness(1.08); } }
.bento-volume__tier {
  animation: bento-rise var(--bento-dur-slow) var(--bento-ease-out) backwards;
  animation-delay: calc(var(--bento-i, 0) * 60ms);
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .compartment__picker { animation: none; }
  .bento-mobilebar { transition: none; }
  .bento-progress__seg { transition: none; }
  .compartment,
  .compartment__trigger,
  .compartment__step,
  .compartment__chevron,
  .compartment__option-image,
  .compartment__option-media::after,
  .bento-summary__cta,
  .compartment--just-picked .compartment__step,
  .compartment--just-picked .compartment__trigger,
  .bento-summary__cta--ready,
  .bento-summary--sealed,
  .bento-packed--in,
  .bento-volume__tier,
  .bento-volume__save-figure--surge,
  .bento-progress__segments.is-complete { animation: none; transition: none; }
  .compartment__option:hover .compartment__option-image { transform: none; }
  .bento-summary__cta--ready::after { display: none; }
}