/*
 * ═══════════════════════════════════════════════════════════════════════════
 * Crossroads Theme — Commerce override layer
 *
 * Re-skins the Base public pages shipped by the five ecommerce packages:
 *   servingthebest/catalog        .stb-catalog*      (shop index, product detail)
 *   servingthebest/cart           .stb-cart*         (cart page)
 *   servingthebest/checkout       .stb-checkout*     (checkout, thank you)
 *   servingthebest/site-accounts  .stb-account*      (login, register, hub)
 *   servingthebest/orders         .stb-account-order*(history, order detail)
 *
 * Every selector below is a documented CSS hook on those packages' Base pages —
 * no invented class names. Visual spec: the nine `Shop *.dc.html` mocks in this
 * package.
 *
 * ── Why `!important` appears here ──────────────────────────────────────────
 * The Base pages ship Tailwind utilities inline in their markup (`bg-black`,
 * `bg-zinc-900`, `text-white`, `rounded`, `border`, `max-w-3xl`, `divide-y`…).
 * Those are single-class selectors, same specificity as ours, so only source
 * order would decide — and that is fragile. `!important` is used ONLY on the
 * properties a Tailwind utility also sets. Everything else is plain.
 *
 * Loaded via `@import` from theme.css, so it publishes and cache-busts with it.
 * Depends on the custom properties declared in theme.css.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
 * Shared commerce primitives
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-catalog,
.stb-catalog-detail,
.stb-cart-page,
.stb-checkout,
.stb-account {
  font-family: var(--font-body);
  color: var(--color-text);
  max-width: 1180px !important;   /* Base ships max-w-3xl / max-w-2xl */
  width: 100%;
  margin-inline: auto;
  padding: 3.25rem 2.5rem 6rem;
}

/* Page titles rendered by CheckoutShell / AccountShell. The theme's own
   interior hero band supplies the eyebrow; these titles carry the headline. */
.stb-checkout__title,
.stb-account__title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-text);
  margin: 0 0 1.75rem !important;
}

/* Card shell shared by every panel in the commerce surfaces. */
.stb-catalog-card,
.stb-checkout-pickup,
.stb-checkout-thankyou-fulfillment,
.stb-account-empty,
.stb-account-nav > li,
.stb-account-orders > li,
.stb-account-order-items,
.stb-account-fulfillment,
.stb-account-tracking,
.stb-account-shipping,
.stb-account-order-messages {
  background: var(--color-surface);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* Gold primary action — the single most important brand cue on these pages. */
.stb-cart-summary__checkout,
.stb-checkout-place,
.stb-account-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 2rem !important;
  background: var(--color-accent) !important;
  color: var(--color-accent-foreground) !important;
  border: 0;
  border-radius: var(--radius) !important;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(221, 146, 60, 0.30);
  cursor: pointer;
  transition: filter var(--duration-base) var(--ease-standard);
}

.stb-cart-summary__checkout:hover,
.stb-checkout-place:hover,
.stb-account-submit:hover {
  filter: brightness(0.96);
}

.stb-checkout-place:disabled,
.stb-account-submit:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}

/* Navy secondary action. */
.stb-checkout-save,
.stb-cart-promo button {
  min-height: 3rem;
  padding: 0 1.5rem !important;
  background: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
  border: 0;
  border-radius: var(--radius) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

/* Form fields. */
.stb-checkout-label,
.stb-account-field > label,
.stb-cart-line__qty-label,
.stb-cart-promo label,
.stb-catalog-variants__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.stb-checkout-input,
.stb-checkout-form textarea,
.stb-account-field input,
.stb-cart-promo input,
.stb-cart-line__qty input,
.stb-account-magic input {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.875rem !important;
  background: #FFFFFF;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
}

.stb-checkout-form textarea {
  min-height: 5.5rem;
  padding: 0.875rem !important;
  line-height: 1.6;
}

.stb-checkout-input:focus,
.stb-account-field input:focus,
.stb-cart-promo input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent) !important;
}

.stb-checkout-error,
.stb-checkout-field-error,
.stb-cart-page__error,
.stb-account-field p {
  color: var(--color-danger) !important;
  font-size: 0.875rem;
}

.stb-account-status {
  background: rgba(31, 138, 91, 0.10) !important;
  color: #186746 !important;
  border: 1px solid rgba(31, 138, 91, 0.28);
  border-radius: var(--radius) !important;
  padding: 0.875rem 1rem !important;
  font-size: 0.9375rem;
}

/* Empty states read as an invitation, not an error. */
.stb-catalog__empty,
.stb-cart-page__empty,
.stb-account-empty {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem !important;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--color-muted) !important;
}


/* ───────────────────────────────────────────────────────────────────────────
 * catalog — shop index
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 2rem;
}

.stb-catalog__filter {
  display: inline-flex;
  align-items: center;
  height: 2.375rem;
  padding: 0 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;   /* fixed-height pill: never wrap the label */
  transition: background var(--duration-fast), color var(--duration-fast);
}

.stb-catalog__filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.stb-catalog__filter[aria-current='true'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-foreground);
  font-weight: 600;
}

.stb-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1.75rem;
}

.stb-catalog-card {
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.stb-catalog-card:hover {
  box-shadow: 0 28px 70px -24px rgba(20, 40, 60, 0.22);
}

.stb-catalog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.stb-catalog-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-secondary);
}

.stb-catalog-card__image--placeholder {
  background: var(--color-secondary);
}

.stb-catalog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  flex: 1;
  padding: 1.375rem 1.375rem 1.5rem;
}

/* No .stb-catalog-detail__category rule here: ProductDetailPage renders the
 * category inside the breadcrumb, not as a standalone element, so that
 * selector would match nothing. */
.stb-catalog-card__category {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.stb-catalog-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

.stb-catalog-card__excerpt {
  margin: 0;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

.stb-catalog-card__pricing,
.stb-catalog-detail__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0.375rem 0 0;
}

.stb-catalog-card__price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.stb-catalog-card__compare-at,
.stb-catalog-detail__compare-at {
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.stb-catalog-card__soldout,
.stb-catalog-detail__soldout {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding: 0 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ───────────────────────────────────────────────────────────────────────────
 * catalog — product detail
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-catalog-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 2rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.stb-catalog-detail__breadcrumb a {
  color: var(--color-link-on-dark);
  text-decoration: none;
}

.stb-catalog-detail__breadcrumb a:hover {
  color: var(--color-accent);
}

.stb-catalog-detail__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 3.75rem;
  align-items: start;
}

.stb-catalog-detail__gallery {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Shows the whole product image. A 1:1 `cover` crop ate the edges of anything
   not square (ticket #12). The cap stops a tall poster from pushing the buy
   button off-screen; `contain` keeps the cap from re-cropping. Thumbnails keep
   `cover` on purpose — they are a uniform row. */
.stb-catalog-detail__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.stb-catalog-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.stb-catalog-detail__thumb {
  padding: 0;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}

.stb-catalog-detail__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.stb-catalog-detail__thumb[aria-pressed='true'] {
  border: 2px solid var(--color-accent);
}

.stb-catalog-detail__info {
  display: flex;
  flex-direction: column;
}

.stb-catalog-detail__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1.14;
  color: var(--color-text);
}

.stb-catalog-detail__price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.stb-catalog-detail__excerpt {
  margin: 1.5rem 0 0;
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--color-text);
  text-wrap: pretty;
}

/* Server-sanitized product HTML — same treatment as .cr-prose. */
.stb-catalog-detail__description {
  margin-top: 1.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.stb-catalog-detail__description h2,
.stb-catalog-detail__description h3 {
  font-family: var(--font-display);
  color: var(--color-text);
}

.stb-catalog-detail__description ul {
  padding-left: 1.25rem;
}

.stb-catalog-detail__description blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--color-accent);
  color: var(--color-text);
}

.stb-catalog-detail__sku {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* Variant picker — swatch/size buttons. */
.stb-catalog-variants {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  margin: 1.75rem 0 0;
}

.stb-catalog-variants__group {
  border: 0;
  margin: 0;
  padding: 0;
}

.stb-catalog-variants__label {
  padding: 0;
  margin-bottom: 0.75rem;
}

.stb-catalog-variants__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.stb-catalog-variants__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2.75rem;         /* 44px — never smaller (touch target) */
  padding: 0 1.125rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast);
}

.stb-catalog-variants__value:hover {
  border-color: var(--color-primary);
}

.stb-catalog-variants__value[aria-pressed='true'] {
  border: 2px solid var(--color-primary);
  font-weight: 600;
}


/* ───────────────────────────────────────────────────────────────────────────
 * cart
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-cart-page {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 2.75rem;
  align-items: start;
}

/* Error + empty states span both columns. */
.stb-cart-page__error,
.stb-cart-page__empty {
  grid-column: 1 / -1;
}

.stb-cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stb-cart-line {
  display: flex;
  align-items: flex-start;
  gap: 1.375rem;
  padding: 1.5rem 1.625rem;
  border-bottom: 1px solid var(--color-border);
}

.stb-cart-line:last-child {
  border-bottom: 0;
}

/* `flex: 0 0 auto` because a flex item's default `flex-shrink: 1` lets the
   thumbnail squash below its own 96px once the line runs out of room. */
.stb-cart-line__image {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: var(--color-secondary);
  border-radius: var(--radius);
}

/* An addon is a sub-line of its parent, so its thumbnail is deliberately much
   smaller than the parent's 96px — same treatment, subordinate weight, so the
   row still reads as belonging to the line above it rather than competing with
   it. Support ticket #70. */
.stb-cart-line__addon-image {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  object-fit: cover;
  background: var(--color-secondary);
  border-radius: var(--radius);
}

/* `flex: 1 1 auto` so the info column takes the rest of the line rather than
   shrink-wrapping its longest child, and `align-items: flex-start` because at
   the default `stretch` the Remove button spans the whole column and centres
   its own label.
   Both are also declared in `cart/resources/css/cart.css`; that duplication is
   deliberate. Do not remove these on the grounds that the package "already"
   has them — this sheet is link-injected after the bundle, so it is what the
   browser applies, and dropping them changes the rendering to whatever the
   package happens to say. (Before #360, cart.css never loaded at all:
   `theming.css_imports` had no consumer anywhere.) */
.stb-cart-line__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  min-width: 0;
}

.stb-cart-line__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-cart-line__variant,
.stb-cart-line__price,
.stb-cart-line__option,
.stb-cart-line__option-name,
.stb-cart-line__field-label {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.stb-cart-line__option-value {
  font-size: 0.875rem;
  color: var(--color-text);
  font-weight: 600;
}

.stb-cart-line__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stb-cart-line__qty input {
  width: 4.5rem;
  min-height: 2.75rem;
  text-align: center;
}

.stb-cart-line__total {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-cart-line__remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-link-on-dark);
  text-decoration: underline;
  cursor: pointer;
}

.stb-cart-line__remove:hover {
  color: var(--color-accent);
}

.stb-cart-summary {
  position: sticky;
  top: 1.75rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 24px 60px -28px rgba(20, 40, 60, 0.18);
}

.stb-cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4375rem 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.stb-cart-summary__row span:last-of-type {
  font-weight: 600;
  color: var(--color-text);
}

.stb-cart-summary__row--discount span:last-of-type {
  color: var(--color-success);
}

.stb-cart-summary__row--total {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  align-items: baseline;
}

.stb-cart-summary__row--total span:first-child {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-cart-summary__row--total span:last-of-type {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

.stb-cart-summary__promo-remove {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--color-link-on-dark);
  text-decoration: underline;
  cursor: pointer;
}

.stb-cart-summary__checkout {
  margin-top: 1.5rem;
}

/* Promo surface is inert until a promotions package binds a DiscountResolver —
   styled so it does not look broken if a tenant turns it on. */
.stb-cart-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.stb-cart-promo label {
  flex: 1 0 100%;
  margin-bottom: -0.25rem;
}

.stb-cart-promo input {
  flex: 1;
  min-width: 9rem;
}


/* ───────────────────────────────────────────────────────────────────────────
 * checkout
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-checkout-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr) !important;
  gap: 3rem !important;
  align-items: start;
}

/* The stepper's vertical rhythm, stated by the theme rather than inherited.
   Base already ships `flex flex-col gap-8` on this wrapper and those
   utilities do reach a themed tenant — the !important on the grid rule above
   is there because Base sets a COMPETING `grid` there, not because utilities
   fail to load. So this is not a repair: it is the theme owning the spacing
   between its two step panels, alongside the padding and border below. The
   2rem matches Base's `gap-8` exactly, so the two agree today; if Base ever
   restyles its wrapper, this theme's checkout keeps the spacing its panels
   were designed around. */
.stb-checkout-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.stb-checkout-contact,
.stb-checkout-summary {
  display: flex;
  flex-direction: column;
}

.stb-checkout-step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  background: var(--color-surface);
}

.stb-checkout-step__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.stb-checkout-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-family: var(--font-display);
  font-size: 0.8rem;
}

.stb-checkout-step__body {
  margin-top: 1.25rem;
}

.stb-checkout-step-summary {
  margin-top: 0.5rem;
  color: var(--color-muted);
}

.stb-checkout-step-locked {
  margin-top: 0.75rem;
  color: var(--color-muted);
}

.stb-checkout-step-edit {
  color: var(--color-primary);
}

/* Forced-registration escape hatch on step 1: "Already have an account? Log
   in". Left unstyled the anchor is only a shade off `--color-text`'s dark
   blue — two dark blues, barely distinguishable — and carries no underline.
   Same treatment as `.stb-add-to-cart__cart-link` and the other inline text
   controls on these pages: link colour plus underline, so the affordance
   survives even a weak colour contrast. */
.stb-checkout-account-note a {
  color: var(--color-link-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.stb-checkout-account-note a:hover {
  color: var(--color-accent);
}

/* A locked step should read as inactive without becoming invisible — the
   buyer needs to see that a payment step exists and what unlocks it.
   Scoped to the PAYMENT step, because `data-open='false'` means two
   opposite things: on step 2 it is "locked", but on step 1 it is "done and
   collapsed". Greying both made a completed step read as unavailable. */
.stb-checkout-payment-step[data-open='false'] .stb-checkout-step__number {
  background: var(--color-muted);
}

/* `.stb-checkout-step__header > h2` carries the two step headings. They used
   to be direct children of `.stb-checkout-contact`, but the stepper moved
   them inside the header row, so the contact selector stopped matching and
   only "Order summary" kept the theme's heading treatment. */
.stb-checkout-contact > h2,
.stb-checkout-step__header > h2,
.stb-checkout-summary > h2 {
  font-family: var(--font-display);
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--color-text);
  margin: 0 0 1.375rem !important;
}

/* …minus the bottom margin. In a step header the h2 shares a centre-aligned
   flex row with the Edit button, so a bottom margin would push the heading
   off-centre against it, and the gap under the header is already owned by
   `.stb-checkout-step__body`. Typography only here. */
.stb-checkout-step__header > h2 {
  margin: 0 !important;
}

.stb-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.stb-checkout-form label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Pickup panel — the gold left rule marks it as the one thing to read twice.
   A shop that ships shows the Delivery panel instead (styled below with the
   gateways it mirrors), and pickup becomes one of its choices. */
.stb-checkout-pickup,
.stb-checkout-thankyou-fulfillment,
.stb-account-fulfillment {
  border-left: 4px solid var(--color-accent) !important;
  padding: 1.375rem 1.5rem !important;
}

.stb-checkout-pickup h3,
.stb-checkout-thankyou-fulfillment h2,
.stb-account-fulfillment h2,
.stb-account-tracking h2 {
  margin: 0 0 0.625rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-checkout-pickup-instructions,
.stb-checkout-thankyou-fulfillment p,
.stb-account-fulfillment p,
.stb-account-tracking p {
  margin: 0;
  font-size: 0.9375rem !important;
  line-height: 1.7;
  color: var(--color-muted) !important;
}

.stb-checkout-summary {
  position: sticky;
  top: 1.75rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 24px 60px -28px rgba(20, 40, 60, 0.18);
}

.stb-checkout-items,
.stb-checkout-thankyou-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stb-checkout-item,
.stb-checkout-thankyou-items > li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8125rem 0 !important;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
  color: var(--color-text);
}

.stb-checkout-item:last-child,
.stb-checkout-thankyou-items > li:last-child {
  border-bottom: 0;
}

.stb-checkout-item span span,
.stb-checkout-thankyou-items span span {
  color: var(--color-muted) !important;
}

.stb-checkout-totals,
.stb-checkout-thankyou-totals,
.stb-account-order-totals {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.125rem !important;
  padding-top: 1.125rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.stb-checkout-totals > div,
.stb-checkout-thankyou-totals > div,
.stb-account-order-totals > div {
  display: flex;
  justify-content: space-between;
}

.stb-checkout-totals dt,
.stb-checkout-thankyou-totals dt,
.stb-account-order-totals dt {
  color: var(--color-muted);
}

.stb-checkout-totals dd,
.stb-checkout-thankyou-totals dd,
.stb-account-order-totals dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

/* The grand-total row is the last child in every totals list. */
.stb-checkout-totals > div:last-child,
.stb-checkout-thankyou-totals > div:last-child,
.stb-account-order-totals > div:last-child {
  align-items: baseline;
  margin-top: 0.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--color-border);
}

.stb-checkout-totals > div:last-child dt,
.stb-checkout-thankyou-totals > div:last-child dt,
.stb-account-order-totals > div:last-child dt {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-checkout-totals > div:last-child dd,
.stb-checkout-thankyou-totals > div:last-child dd,
.stb-account-order-totals > div:last-child dd {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-primary);
}

.stb-checkout-payment {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem !important;
}

/*
 * Shown INSTEAD of the payment-method chooser when the order total is $0 —
 * a 100%-off code, or a free product. It replaces a control the buyer would
 * otherwise use, so it has to read as a deliberate state rather than as the
 * gateway list having failed to load.
 *
 * Quiet, not alarming: nothing has gone wrong, there is simply nothing to pay.
 */
.stb-checkout-no-payment {
  margin: 0 0 0.5rem;
  padding: 0.875rem 1.125rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-muted);
}

.stb-checkout-gateways {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.stb-checkout-gateways legend {
  margin-bottom: 0.5rem;
}

.stb-checkout-gateways label {
  display: flex !important;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
}

.stb-checkout-gateways label:has(input:checked) {
  border: 2px solid var(--color-primary);
  background: var(--color-surface);
}

.stb-checkout-gateways input[type='radio'] {
  accent-color: var(--color-primary);
  width: 1.125rem;
  height: 1.125rem;
}

/*
 * Delivery — the address and the shipping choice, for a shop that ships
 * (packages#783). Same card as the pickup panel, same gold rule, and the
 * choices use the payment-method rows so the two decisions on this page look
 * like the same kind of control.
 */
.stb-checkout-shipping {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border) !important;
  border-left: 4px solid var(--color-accent) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.375rem 1.5rem !important;
}

.stb-checkout-shipping h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-checkout-shipping-address {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stb-checkout-shipping-address label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stb-checkout-shipping-save {
  align-self: flex-start;
  min-height: 3rem;
  padding: 0 1.5rem !important;
  background: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
  border: 0;
  border-radius: var(--radius) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.stb-checkout-shipping-summary {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.stb-checkout-shipping-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.stb-checkout-shipping-option {
  padding: 1.125rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
}

.stb-checkout-shipping-option:has(input:checked) {
  border: 2px solid var(--color-primary);
  background: var(--color-surface);
}

.stb-checkout-shipping-option input[type='radio'] {
  accent-color: var(--color-primary);
  width: 1.125rem;
  height: 1.125rem;
}

/* The resolver's own words ("too heavy to ship online"): read, not alarming. */
.stb-checkout-shipping-message,
.stb-checkout-shipping-hint {
  margin: 0;
  font-size: 0.9375rem !important;
  color: var(--color-muted) !important;
}

.stb-checkout-thankyou-address {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}


/* ───────────────────────────────────────────────────────────────────────────
 * storefront — coming soon (packages#860): what a visitor sees while the
 * shop is hidden. The page title treatment, centred.
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-storefront-coming-soon {
  text-align: center;
}

.stb-storefront-coming-soon__heading {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-storefront-coming-soon__line {
  font-size: 1.0625rem;
  color: var(--color-muted);
}


/* ───────────────────────────────────────────────────────────────────────────
 * checkout — thank you
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-checkout-thankyou {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
}

.stb-checkout-thankyou-number {
  margin: 0;
  font-size: 1.1875rem !important;
  line-height: 1.7;
  color: var(--color-muted);
}

.stb-checkout-thankyou-number strong {
  font-family: var(--font-display);
  color: var(--color-text);
}

.stb-checkout-thankyou-pending {
  background: rgba(221, 146, 60, 0.10) !important;
  border: 1px solid rgba(221, 146, 60, 0.42) !important;
  border-radius: var(--radius) !important;
  padding: 1rem 1.125rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.65;
  color: var(--color-text) !important;
}

.stb-checkout-thankyou-back {
  color: var(--color-link-on-dark) !important;
  font-size: 0.9375rem !important;
}

.stb-checkout-thankyou-back:hover {
  color: var(--color-accent) !important;
}


/* ───────────────────────────────────────────────────────────────────────────
 * site-accounts — sign in, register, account hub
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem !important;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.stb-account-header p {
  color: var(--color-muted) !important;
  font-size: 0.9375rem !important;
  margin: 0;
}

.stb-account-header button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.375rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none !important;
  cursor: pointer;
}

.stb-account-header button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.stb-account-form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.125rem;
  box-shadow: 0 24px 60px -28px rgba(20, 40, 60, 0.18);
}

.stb-account-form > div.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.stb-account-links {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem !important;
  font-size: 0.875rem;
}

.stb-account-links a {
  color: var(--color-link-on-dark);
}

.stb-account-links a:hover {
  color: var(--color-accent);
}

/* Magic-link block — the low-friction path, so it reads as an equal option. */
.stb-account-magic {
  margin-top: 1.75rem !important;
  padding: 1.75rem !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg);
}

.stb-account-magic h2 {
  margin: 0 0 0.375rem;
  font-family: var(--font-display);
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  color: var(--color-text);
}

.stb-account-magic form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem !important;
}

.stb-account-magic input {
  flex: 1;
  min-width: 11rem;
}

.stb-account-magic button {
  min-height: 3rem;
  padding: 0 1.375rem !important;
  background: transparent;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  cursor: pointer;
}

/* Account hub: the list of pages other packages contributed. */
.stb-account-nav,
.stb-account-orders {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
}

.stb-account-nav > li:hover,
.stb-account-orders > li:hover {
  border-color: var(--color-primary) !important;
}

.stb-account-nav > li > a {
  display: block;
  padding: 1.5rem 1.625rem !important;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none !important;
}


/* ───────────────────────────────────────────────────────────────────────────
 * orders — order history + order detail (mounted in the account area)
 * ─────────────────────────────────────────────────────────────────────────── */

.stb-account-orders > li {
  padding: 1.625rem 1.75rem !important;
}

.stb-account-orders > li > a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 1.5rem;
  align-items: center;
  color: inherit;
  text-decoration: none !important;
}

/* Order number, status, date, total — in the Base markup's own order. */
.stb-account-orders > li > a > span:nth-child(1) {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-account-orders > li > a > span:nth-child(2) {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.stb-account-orders > li > a > span:nth-child(3) {
  font-size: 0.875rem !important;
  color: var(--color-muted) !important;
  white-space: nowrap;
}

.stb-account-orders > li > a > span:nth-child(4) {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.stb-account-order-items {
  overflow: hidden;
}

.stb-account-order-items table {
  width: 100%;
  border-collapse: collapse;
}

.stb-account-order-items thead {
  background: var(--color-secondary);
}

.stb-account-order-items th {
  padding: 1rem 1.75rem !important;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.6875rem !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted) !important;
}

.stb-account-order-items td {
  padding: 1.25rem 1.75rem !important;
  border-top: 1px solid var(--color-border);
  font-size: 1rem;
  color: var(--color-text);
}

.stb-account-order-items td div {
  font-size: 0.8125rem !important;
  color: var(--color-muted) !important;
}

.stb-account-order-totals {
  max-width: 21rem !important;
  margin-left: auto !important;
}

.stb-account-shipping h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-account-shipping,
.stb-account-fulfillment,
.stb-account-tracking {
  padding: 1.375rem 1.5rem !important;
}

/* Immutable status-change trail. */
.stb-account-history {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.75rem 0 0 !important;
  padding: 1.75rem !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem !important;
  color: var(--color-muted) !important;
}

.stb-account-history > li:first-child {
  color: var(--color-text);
  font-weight: 600;
}


/* ───────────────────────────────────────────────────────────────────────────
 * Responsive — single column below the two-column breakpoint
 * ─────────────────────────────────────────────────────────────────────────── */

/* ---------------------------------------------------------------------------
   Configurable products: buyer-entered fields, addons, and add-to-cart.
   These elements are package-owned and carry stb-* BEM classes with no
   utility classes, so they skin here like every other commerce surface.
   --------------------------------------------------------------------------- */

.stb-config-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.stb-config-field__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.stb-config-field__input,
.stb-config-field__file {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.stb-config-field__input:focus,
.stb-config-field__file:focus {
  outline: none;
  border-color: var(--color-primary);
}

/*
 * The "Choose File" half of an upload field is the `::file-selector-button`
 * pseudo-element, and Tailwind preflight resets it along with real buttons —
 * zero border, zero padding, transparent background, `cursor: default`. The
 * box above makes the FIELD look like a field, but the button inside it still
 * renders as plain text a buyer has no reason to think is clickable (troop
 * reported that as ticket #16 on the same shared markup).
 *
 * Secondary, not primary: Add to Cart is the primary action on this page.
 */
.stb-config-field__file::file-selector-button {
  /* `margin-inline-end` only: preflight zeroes all four, and a top/bottom
     margin here would push the field's own box out of shape. */
  margin: 0 0.75rem 0 0;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-secondary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
  cursor: pointer;
}

.stb-config-field__file::file-selector-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.stb-config-field__file:disabled::file-selector-button {
  opacity: 0.5;
  cursor: not-allowed;
}

.stb-config-field__help,
.stb-config-field__filename {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.stb-config-field__error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: #b91c1c;
}

.stb-config-field__unavailable {
  padding: 0.625rem 0.75rem;
  border: 1px dashed var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.stb-addons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.stb-addons__heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.stb-addon__name { font-size: 0.9375rem; color: var(--color-text); }
.stb-addon__required { margin-left: 0.5rem; font-size: 0.75rem; color: var(--color-muted); }
/* Between the name and the price, muted like the price so the name stays the
   line's anchor. Support ticket #70: for an addon-only product this is the only
   description a buyer ever sees, because those products have no public page. */
.stb-addon__description { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--color-muted); }
.stb-addon__price { font-size: 0.8125rem; color: var(--color-muted); }

/* The addon's FULL description, collapsed (packages#749). The short
   description above stays the one-line summary; this is what an addon-only
   product would have shown on a page of its own, if it had one. */
.stb-addon__details { flex-basis: 100%; margin-top: 0.25rem; font-size: 0.8125rem; }
.stb-addon__details-toggle { cursor: pointer; font-weight: 600; color: var(--color-accent); }
.stb-addon__details-body { margin-top: 0.5rem; color: var(--color-muted); }

.stb-addon__quantity {
  width: 5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.stb-add-to-cart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.stb-add-to-cart__quantity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.stb-add-to-cart__quantity input {
  width: 5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
}


/* The buyer-priced amount field. It had NO rules at all, so the label butted
   straight against the value with no input box -- it read as "Amount0" and
   looked broken (STB ticket #29, reported on the troop theme; this theme had
   the identical gap). Column rather than the row used for quantity, because
   the range sentence belongs under the field, not beside it. */
.stb-add-to-cart__custom-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.stb-add-to-cart__custom-price input {
  width: 10rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
}

/* Only one of these is ever on screen -- the hint is suppressed while an error
   shows. Both drop the label's weight so they read as guidance, not headings. */
.stb-add-to-cart__custom-price-error,
.stb-add-to-cart__custom-price-hint {
  max-width: 24rem;
  font-size: 0.8125rem;
  font-weight: 400;
}

.stb-add-to-cart__custom-price-error {
  color: var(--color-danger);
}

.stb-add-to-cart__custom-price-hint {
  color: var(--color-muted);
}

/* Preset amounts under the field (#735). A preset only fills the input, so
   these are the variant chips' treatment, not the submit button's. Nothing
   stays selected: once tapped, the amount shows in the input. */
.stb-add-to-cart__custom-price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.stb-add-to-cart__custom-price-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2.75rem;         /* 44px — never smaller (touch target) */
  padding: 0 1.125rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast);
}

.stb-add-to-cart__custom-price-preset:hover {
  border-color: var(--color-primary);
}

.stb-add-to-cart__custom-price-preset:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.stb-add-to-cart__submit {
  align-self: flex-start;
  padding: 0.8125rem 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.stb-add-to-cart__submit:hover { opacity: 0.9; }

.stb-add-to-cart__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stb-add-to-cart__error { font-size: 0.875rem; color: #b91c1c; }
.stb-add-to-cart__done { font-size: 0.875rem; color: var(--color-primary); }

/* "Item added — go to your cart". Same treatment as the other inline text
   controls on these pages (`__remove`, `__promo-remove`): link blue plus an
   underline. Without it the anchor is only a shade off the sentence it sits in
   and reads as prose. catalog.css loads now (#360), but the colour here is
   brand-specific, so the rule stays theme-owned. */
.stb-add-to-cart__cart-link {
  color: var(--color-link-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.stb-add-to-cart__cart-link:hover {
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .stb-catalog,
  .stb-catalog-detail,
  .stb-cart-page,
  .stb-checkout,
  .stb-account {
    padding: 2.5rem 1.25rem 4rem;
  }

  .stb-cart-page,
  .stb-checkout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stb-cart-summary,
  .stb-checkout-summary {
    position: static;
  }

  .stb-account-orders > li > a {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.625rem;
  }

  .stb-catalog-detail__title { font-size: 2rem; }
}


/* ───────────────────────────────────────────────────────────────────────────
   Buyer fields: per-unit sets, choice groups and uploads

   The rest of the buyer-field surface was already styled here. These are the
   selectors added when configurable products gained multi-select, uploads and
   batch per-unit configuration (packages #188, #242) — no theme had them.
   ─────────────────────────────────────────────────────────────────────────── */

.stb-config-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Multi-select renders a checkbox group rather than a <select multiple>. */
.stb-config-field__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.stb-config-field__choice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    cursor: pointer;
}

.stb-config-field__upload {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* A per_unit product renders one field set per unit; they need to read as
   separate cards or the buyer cannot tell which fields belong to which item. */
.stb-add-to-cart__units {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stb-add-to-cart__unit {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.stb-add-to-cart__unit-legend {
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* A unit stacks its own variant picker, buyer fields and addons, so the
   spacing between them belongs to the unit rather than to any one child. */
.stb-add-to-cart__unit > * + * {
    margin-top: 1rem;
}

/* Why the add button is disabled — without it a variable product just looks
   broken until the buyer happens to click an option. */
.stb-add-to-cart__hint {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.stb-addon__info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.stb-catalog-detail__image--placeholder {
    /* An empty <span> with no intrinsic size, so it carries the ratio the
       image rule no longer does, or it collapses to nothing. */
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    color: var(--color-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Content-page product sections ────────────────────────────────────────── */

/*
 * `catalog.products` / `catalog.product` sections placed on a page-builder page
 * (servingthebest/catalog → ProductsSection.jsx / ProductSection.jsx).
 *
 * Cards inside reuse `.stb-catalog-card`, styled above; these rules cover only
 * the section wrappers, which have no other home — package JSX is not compiled
 * by tenant Vite, so the components ship structural class names only.
 */

.stb-catalog-section {
  padding: 3.5rem 0;
}

.stb-catalog-section__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.stb-catalog-section__title {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.15;
  color: var(--color-text);
}

.stb-catalog-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1.75rem;
}

.stb-catalog-section__foot {
  margin: 1.75rem 0 0;
}

.stb-catalog-section__cta,
.stb-catalog-single__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-weight: 700;
  text-decoration: none;
  transition: filter var(--duration-fast) var(--ease-standard);
}

.stb-catalog-section__cta:hover,
.stb-catalog-single__cta:hover {
  filter: brightness(0.92);
}

.stb-catalog-single {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 2rem;
  align-items: center;
}

.stb-catalog-single__image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.stb-catalog-single__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  line-height: 1.15;
  color: var(--color-text);
}

.stb-catalog-single__blurb {
  margin: 0 0 1rem;
  color: var(--color-muted);
}

.stb-catalog-single__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
}

.stb-catalog-single__price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.stb-catalog-single__compare-at {
  color: var(--color-muted);
}

.stb-catalog-single__soldout {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Ratings and reviews (packages#952). catalog.css lays the icons out; this
   gives them the theme's colour and rhythm. */
.stb-rating {
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.stb-catalog-card__body > .stb-rating {
  margin-top: 0.5rem;
}

.stb-rating__icons,
.stb-rating__icon,
.stb-rating__icon-fill {
  color: var(--color-accent);
}

.stb-rating__icon-empty {
  opacity: 0.4;
}

.stb-rating__average {
  font-weight: 700;
  color: var(--color-primary);
}

.stb-rating__count {
  font-size: 0.875rem;
}

.stb-reviews {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.stb-reviews__heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.75rem;
}

.stb-reviews__list {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.stb-reviews__item {
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.stb-reviews__body {
  margin: 0.625rem 0;
  line-height: 1.6;
  color: var(--color-primary);
  white-space: pre-line;
  text-wrap: pretty;
}

.stb-reviews__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.stb-reviews__author {
  font-weight: 700;
}

.stb-reviews__date {
  color: var(--color-muted);
}

.stb-reviews__more,
.stb-reviews__write {
  display: inline-block;
  margin: 1rem 1rem 0 0;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* ------------------------------------------- balance due (packages#986) --- */

/* The buyer's order page: a balance a change left owing, and its receipt lines. */
.stb-account-order-balance,
.stb-checkout-balance-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
}

.stb-account-order-balance-due {
  color: var(--color-primary);
  font-size: 1rem;
}

/* The "Pay the balance" page. */
.stb-checkout-balance {
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.stb-checkout-balance-none,
.stb-checkout-balance-receipt {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Settled: the same warm notice as the thank-you page's pending line. */
.stb-checkout-balance-done {
  background: rgba(221, 146, 60, 0.10) !important;
  border: 1px solid rgba(221, 146, 60, 0.42) !important;
  border-radius: var(--radius) !important;
  padding: 1rem 1.125rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.65;
}

.stb-checkout-balance-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Pay now / Pay $X: the gold primary action, as Place order. */
.stb-account-order-pay,
.stb-checkout-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 2rem !important;
  background: var(--color-accent) !important;
  color: var(--color-accent-foreground) !important;
  border: 0;
  border-radius: var(--radius) !important;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(221, 146, 60, 0.30);
  cursor: pointer;
  transition: filter var(--duration-base) var(--ease-standard);
}

.stb-account-order-pay:hover,
.stb-checkout-submit:hover {
  filter: brightness(0.96);
}

.stb-checkout-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}