/*
 * Generated by scripts/port-css.mjs from the CSS Modules that preceded
 * this theme. Edit the rules here — the generator is kept for reference,
 * not re-run against a moved target.
 */

/* ─── components/sections/BundleBuilder.module.css ─────────────────────────────────────── */
/*
 * ── The ground ──────────────────────────────────────────────────────
 *
 * This was a flat `--lilac-soft` (#f3eeff), which is a card tint: it is the
 * colour a product thumbnail sits *on*, sized for a 200px box on a white
 * page. Spread across a full-height section between two white ones it read as
 * white with a fingerprint on it, and the one section on the page that wants
 * to be played with was the quietest thing on it.
 *
 * So it is now a ground rather than a tint: a deeper lilac base with a pink
 * corner, a blue corner and a warm floor washed over it. The colour is what
 * carries the section — no border, no card, nothing added to the layout.
 *
 * The base only drops from ~87% to ~80% relative luminance, and that ceiling
 * is not arbitrary. The chips are the section: they are solid `--tint`
 * pastels sitting straight on this ground, and the darkest of them
 * (`--lilac`, 52%) is only 1.6:1 against the old background. Every point this
 * ground darkens is a point off the chips' edges. The corners are where the
 * colour goes instead — they land on the flanks the content leaves empty
 * (see `.decoSpiral` and friends for the measurements), so they add chroma
 * where nothing has to stay legible on top of them.
 */
.us-bb {
  position: relative;
  padding-block: clamp(5rem, 13vh, 10rem);
  background:
    radial-gradient(78% 62% at 6% -8%, #ffdcef 0%, rgba(255, 220, 239, 0) 58%),
    radial-gradient(70% 60% at 101% 6%, #cfe2fb 0%, rgba(207, 226, 251, 0) 62%),
    radial-gradient(120% 66% at 62% 112%, #fbe7c4 0%, rgba(251, 231, 196, 0) 64%),
    #ece3fb;
  overflow: hidden;
}

.us-bb-inner { position: relative; display: flex; flex-direction: column; gap: 2.4rem; }

.us-bb-sentence {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.16;
  font-size: clamp(1.6rem, 3.6vw, 3.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28em 0.34em;
  max-width: 30ch;
}

/* one authored word of the static copy — the reveal staggers these */
.us-bb-word { display: inline-block; }

/* the inline slot the chosen answer drops into */
.us-bb-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.14em 0.5em;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid transparent;
  font-size: 0.74em;
  min-width: 4em;
  justify-content: center;
  /* masks the answer rolling up into place */
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.us-bb-slot[data-filled='false'] { border-color: var(--lilac); color: var(--ink-30); }
.us-bb-slot[data-filled='true'] {
  background: var(--lilac-deep);
  border-color: var(--lilac-deep);
  color: var(--white);
}
.us-bb-slot-text {
  display: inline-block;
  white-space: nowrap;
  /* the words around the slot are flex items on a 0.34em gap; a plain space
     inside the slot reads tight next to them at this weight */
  word-spacing: 0.16em;
}

/*
 * ── Small print on a coloured ground ─────────────────────────────────
 *
 * Every label, count word and hint in this section is `--ink-60`, not the
 * `--grey` the same text uses on the white sections. `--grey` (#8b8496) was
 * already under AA on the old lilac tint at 3.17:1, and the deeper ground
 * takes it to 2.90:1; `--ink-60` over this ground lands at 4.60:1. The
 * eyebrow is a global class, so it is overridden here rather than retinted
 * for the whole site — and it has to be `:global`, or CSS Modules hashes the
 * name into a local class that nothing in the markup carries.
 */
.us-bb .eyebrow { color: var(--ink-60); }

.us-bb-rails { display: flex; flex-direction: column; gap: 1.2rem; }

.us-bb-rail { display: flex; flex-direction: column; gap: 0.65rem; }
.us-bb-rail-label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); }
.us-bb-rail-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.us-bb-result {
  /* Positioning context for `.decoRow`, which hangs the line-up off the
     rule at this element's top edge. Without it the row resolves against the
     section and lands 600px up the page. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(20, 16, 26, 0.1);
}

.us-bb-result-count { display: flex; align-items: baseline; gap: 0.6rem; }
.us-bb-result-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.us-bb-result-word { font-size: 0.86rem; color: var(--ink-60); }

/**
 * The fewer the matches, the bigger the thumbnails — a narrowed-down result
 * should read as a look at the products, not a row of stamps.
 *
 * `min-height` is tied to the same variable because Flip runs with
 * `absolute: true`: during the tween every card leaves the flow, and without a
 * floor the row would collapse to nothing and bounce the whole summary line.
 * The height eases while Flip scales the cards into it; the *width* must not
 * be transitioned — Flip measures it and animates the difference itself.
 */
.us-bb-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  --card: clamp(58px, 7vw, 88px);
  min-height: calc(var(--card) / 0.9);
  transition: min-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.us-bb-preview[data-count='4'] { --card: clamp(72px, 9vw, 112px); }
.us-bb-preview[data-count='3'] { --card: clamp(88px, 11vw, 146px); }
.us-bb-preview[data-count='2'] { --card: clamp(104px, 13vw, 178px); }
.us-bb-preview[data-count='1'] { --card: clamp(120px, 15vw, 200px); }

.us-bb-preview-card { width: var(--card); }

/* the four thumbnails are a taste, not the result — say so */
.us-bb-preview-more {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

/* stands in for the preview row when the combination yields nothing */
.us-bb-empty {
  font-size: 0.9rem;
  color: var(--ink-60);
  max-width: 26ch;
}

.us-bb-reset {
  font-size: 0.78rem;
  color: var(--ink-60);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.us-bb-reset:hover { color: var(--ink); }

@media (max-width: 899px) {
  .us-bb-sentence { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .us-bb-preview { transition: none; }
}

/* ── Decoration ──────────────────────────────────────────────────────
   Absolutely placed inside the section box and behind everything. The wrapper
   takes no pointer events so nothing here can steal a chip click. */
.us-bb-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* ScrollSmoother's `data-speed` moves these on the Y axis, so give them room
     to travel without extending the section's own scroll height. */
  overflow: hidden;
}

.us-bb-deco > * { position: absolute; }

/* Placed in the clear zones the content actually leaves, measured rather than
   guessed: the eyebrow owns the top left, the headline runs the full width down
   to ~42%, and the chip rails fill the left half below that. That leaves the
   right flank and the gutter under the match count. */
.us-bb-deco-spiral { top: 46%; right: 7%; opacity: 0.45; }
.us-bb-deco-burst { top: 12%; right: 9%; opacity: 0.5; }
/* Was bottom-left, which is where the live match count sits. */
.us-bb-deco-loop { top: 30%; right: 26%; opacity: 0.45; }

/* The section's own content has to sit above the decoration. */
.us-bb-inner { position: relative; z-index: 1; }

@media (max-width: 899px) {
  /* Two of the three only: at phone width the section is much narrower than it
     is tall, and three marks around a wall of chips reads as clutter rather
     than as decoration. */
  .us-bb-deco-loop { display: none; }
  .us-bb-deco-spiral { top: 40%; right: 2%; }
  .us-bb-deco-burst { top: 8%; right: 3%; }
}

@media (max-width: 399px) {
  /* Below 400px the chip rails wrap one line further and the sentence takes a
     fourth line, and both marks end up on them — `stress:overlap` puts the
     burst 20% over the sentence at 320. There is no column left to move them
     to at this width, so they come off. */
  .us-bb-deco-spiral, .us-bb-deco-burst { display: none; }
}

/* ── The stage ───────────────────────────────────────────────────────
 * Whoever the theme chip has called up, standing on the rule above
 * `.result`. Seven groups are stacked in this one box and exactly one is
 * visible; the component owns which, and how each member arrives.
 *
 * The row lives inside `.result`, not in `.deco` with the doodles, and that
 * is what makes it hold: `bottom: 100%` puts every pair of feet on that rule
 * at any width and in any state. See the note in the component.
 *
 * This is the only tinted landing section, and since the ground was deepened
 * (see `.wrap`) a cut-out with any white matte around it shows here in a way
 * it never would on the white sections — more so than before, not less.
 * Check any addition against this ground rather than against white.
 */
.us-bb-deco-row {
  position: absolute;
  left: 0;
  right: 0;
  /* Zero-height, so the row *is* the rule: members hang off it upward and
     nothing here can add to `.result`'s own box. */
  bottom: 100%;
  height: 0;
  pointer-events: none;
}

/* Every group occupies the same zero-height line. Stacking is what lets the
   swap crossfade in place instead of reflowing. */
.us-bb-deco-group { position: absolute; inset: 0; }

/*
 * `bottom` is set per member from the table in the component — 0 for anything
 * standing on the rule, and a lift for the three Marvel characters, none of
 * whom are on the ground.
 *
 * `will-change` because every one of these is transformed on every theme
 * change, and the swap is the one moment in this section where a dropped
 * frame is visible.
 */
.us-bb-deco-member {
  position: absolute;
  /* The default pivot: feet. `pop`, `bounce`, `rear` and `stomp` all turn or
     scale about the floor, which is where a body's weight is. */
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.us-bb-deco-member img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Spider-Man's swing pivots at the *top* of his box, not his feet.
 *
 * His art carries its own web strand running out of the top edge, so that
 * edge is where he is attached. Swinging him about his feet is a man doing a
 * cartwheel; swinging him about the strand is a man on a rope. One rule, keyed
 * off the move rather than the character, so anything else that swings gets it
 * for free.
 */
.us-bb-deco-member[data-move='swing'] { transform-origin: 50% 0%; }

/*
 * The one that drops does so out of the top of the section, and `.result` is
 * near the bottom of it — so a -280px `y` on a member anchored 124px above the
 * rule starts him well outside this box. Nothing clips him: `.decoRow` sets no
 * overflow, and `.deco` (which does clip) is a different layer entirely.
 */

@media (max-width: 899px) {
  /*
   * The stage goes.
   *
   * The chip rails fill the whole width at this size, so the band the row
   * stands in does not exist — and unlike the old single Stitch, this is a
   * three-abreast composition that cannot be reduced to a corner without
   * becoming a different thing. The section keeps its doodles, its rolling
   * count and its reward beat on the count itself; what it loses is a
   * decoration that had nowhere to stand.
   */
  .us-bb-deco-row { display: none; }
}