/* Type utilities */
.bx .mono { font-family: var(--bx-font-mono); font-size: var(--bx-text-xs); letter-spacing: 0; }
.bx .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
/* Big numeric label used for top-line totals on cart, checkout, receipt,
   invite share, and the builder sidebar. Pairs the display font with the
   token-driven type scale so no caller inlines a literal font-size. */
.bx .bx-num-xl {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-3xl);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bx .num.dim { color: var(--bx-ink-4); }
.bx .eyebrow {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bx-ink-3);
}
.bx .muted { color: var(--bx-ink-3); }
.bx .muted-2 { color: var(--bx-ink-4); }

.bx .scroll-fake { overflow: hidden; }
.bx .strike { text-decoration: line-through; color: var(--bx-ink-4); }

/* Hero paper-tex retired in favor of soft cyan/teal radial */
.bx .paper-tex {
  background:
    radial-gradient(circle at 12% 10%, rgba(var(--bx-accent-rgb),0.08), transparent 50%),
    radial-gradient(circle at 88% 80%, rgba(var(--bx-teal-rgb),0.08), transparent 50%);
}

.bx .hint { font-size: var(--bx-text-xs); color: var(--bx-ink-3); }

.bido-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bido-row,
.bido-money-row,
.bido-inline-avatars,
.bido-wallet-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bido-row.baseline-row {
  align-items: baseline;
  gap: 6px;
}

.bido-row-after {
  margin-top: 4px;
}

.bido-money-row {
  justify-content: space-between;
}

.bido-money-row + .bido-money-row {
  margin-top: 4px;
}

.bido-grid-two,
.bido-grid-two-aside,
.bido-grid-three,
.bido-grid-four,
.bido-grid-five,
.bido-catalog-grid {
  display: grid;
  gap: 14px;
}

/* Content-based columns (Rule 7): auto-fit + minmax reflows the column count
   when a cell would get narrower than its min — 3→2→1 happens by itself, so
   these grids need no device breakpoints. min(100%, …) guarantees a clean
   single column once the container is narrower than one cell. */
.bido-grid-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.bido-grid-two-aside { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.bido-grid-three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
/* Catalog cards carry a photo carousel + title + meta — a wider floor keeps
   wide desktops at ~4 columns instead of packing 6-7 truncated tiles. */
.bido-catalog-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.bido-grid-four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px; }
.bido-grid-five { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 10px; }

/* The aside grid is asymmetric (content + rail), so it stacks at one point —
   keyed to where the rail can no longer hold its content, not a device. */
@media (max-width: 48rem) {
  /* minmax(0, 1fr), not a bare 1fr (= minmax(auto, 1fr)): the auto floor sizes
     the single track to its content's min-content, so an unbreakable child (a
     /ref/CODE link, the affiliate ledger table) blows the track past the padded
     column and scrolls the whole page ~16px on ≤375px phones. Zero floor pins
     the track to the column width; overflow stays inside each card. */
  .bido-grid-two-aside { grid-template-columns: minmax(0, 1fr); }
}

.bido-grid-kpis {
  margin-bottom: 16px;
}

.bido-grid-after-header {
  margin-top: 16px;
}

.bido-grid-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bido-card-pad { padding: 16px; }
.bido-card-pad-lg { padding: 18px; }

.bido-text-right { text-align: right; }
.bido-weight-medium { font-weight: 500; }
.bido-weight-strong { font-weight: 600; }
.bido-accent-text { color: var(--bx-accent); }
.bido-ink-text { color: var(--bx-ink); }
.bido-small { font-size: var(--bx-text-sm); }
.bido-xsmall,
.bx .bido-xsmall {
  font-size: var(--bx-text-2xs);
}

.bido-money-row.accent { color: var(--bx-accent); }
.bido-money-row.warn { color: var(--bx-warn); }
.bido-money-row.compact { font-size: var(--bx-text-sm); padding: 4px 0; }
.bido-money-row.total { font-weight: 600; }
.bido-money-row.total-lg { font-size: var(--bx-text); font-weight: 600; }
.bido-summary-total { font-size: var(--bx-text-md); }

/* Shared bundle-savings line (see BidoHelper#bundle_savings_row). The accent
   modifier is present only for a real discount, so a zero-discount trip reads
   as a muted upsell nudge instead of an emphasized "-$0". */
.bx .bido-savings-row.accent { color: var(--bx-accent); }
.bx .bido-savings-row:not(.accent) { color: var(--bx-ink-3); }

.bido-rule-sm { margin: 8px 0 !important; }
.bido-rule { margin: 10px 0 !important; }

.bido-summary-eyebrow { margin-bottom: 8px; }
.bido-summary-section { margin-top: 22px; margin-bottom: 8px; }
.bido-summary-subtitle { font-size: var(--bx-text-sm); }
.bido-summary-count { font-size: var(--bx-text-sm); }
.bido-per-person { font-size: var(--bx-text-lg); }
.bido-selected-meta { font-size: var(--bx-text-2xs); }
.bido-selected-price { font-size: var(--bx-text-sm); }

.bido-full-width-action,
.bido-cart-cta,
.bido-checkout-cta {
  width: 100%;
  justify-content: center;
}

/* Screen-reader-only text — for labels whose visual form is decorative
   glyphs (e.g. the ★★★★★ rating rows). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}