/*
 * 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/shop/ShopBrowser.module.css ─────────────────────────────────────── */
.us-shop { padding-top: 8.5rem; padding-bottom: clamp(4rem, 10vh, 8rem); }

.us-shop-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.4rem; }
.us-shop-title { position: relative; display: inline-block; width: fit-content; }
.us-shop-title h1 { display: block; }

.us-shop-filters {
  /* Deliberately not pinned and not sticky: the rails stay at the top of the
     page and scroll away with it. (Sticky would not work here anyway —
     ScrollSmoother's wrapper is the nearest scrollport and never scrolls — but
     the point is that a filter bar riding down over the grid was the wrong
     call: it sat on top of the products with a translucent panel and the two
     read as one broken layer.) */
  position: relative;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-block: 1.1rem;
  margin-bottom: 2rem;
  background: var(--white);
  border-bottom: 1px solid var(--ink-12);
}

.us-shop-rail { display: flex; align-items: center; gap: 0.7rem; }
.us-shop-rail-label {
  flex: 0 0 auto;
  width: 4.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.us-shop-rail-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.us-shop-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.us-shop-count { font-size: 0.86rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.us-shop-clear { font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; color: var(--grey); }
.us-shop-clear:hover { color: var(--ink); }

.us-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  /* The filter transition flips cards with `absolute: true`; without a
     positioned container they resolve against #smooth-content (transformed by
     ScrollSmoother) and animate in from ~1200px away. */
  position: relative;
}

.us-shop-card { position: relative; display: block; }
.us-shop-card-media { position: relative; border-radius: var(--radius); overflow: hidden; }
.us-shop-card-media > * { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.us-shop-card:hover .us-shop-card-media > * { transform: scale(1.055); }

.us-shop-card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; padding-top: 0.7rem; }
.us-shop-card-name { font-size: 0.83rem; font-weight: 600; line-height: 1.3; }
.us-shop-card-brand { font-size: 0.72rem; color: var(--ink-30); }
.us-shop-card-price { font-size: 0.8rem; color: var(--grey); font-variant-numeric: tabular-nums; }

.us-shop-empty {
  grid-column: 1 / -1;
  padding: clamp(3rem, 9vw, 6rem) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 1099px) { .us-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .us-shop { padding-top: 7rem; }
  .us-shop-filters { position: static; }
  .us-shop-rail { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .us-shop-rail-label { width: auto; }
}

/* Two-up is kept all the way down: a 27-product grid as a single column is a
   very long scroll, and the cards stay legible at ~133px. What does not
   survive is the name and price sharing a baseline row — the name is squeezed
   into a third of the card and wraps three times — so below this they stack. */
@media (max-width: 419px) {
  .us-shop-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding-top: 0.55rem;
  }
  .us-shop-card-price { font-size: 0.82rem; color: var(--ink); font-weight: 600; }
  .us-shop-grid { gap: 12px 10px; }
}

/* ── Decoration ──────────────────────────────────────────────────────
   Confined to the header band. The grid below is dense and full-width, and a
   mark drifting over a product photo reads as a rendering fault, not as art. */
/*
 * No `overflow: hidden` here, deliberately.
 *
 * `data-speed` offsets an element the instant ScrollSmoother initialises, not
 * gradually as you scroll — the squiggle was written to `translateY(-56px)` on
 * the first frame, which put it above a clipping band and it simply never
 * appeared. Absolutely-positioned children contribute nothing to layout, so
 * there is no page-height or overflow reason to clip; the speeds below are kept
 * near 1 instead, which is what actually keeps a mark in its zone.
 */
/*
 * The head row only.
 *
 * `.filters` below it carries an opaque white background at `z-index: 40`, so
 * anything decorative behind that band is simply painted over — half a star was
 * disappearing under it. The head row is the one genuinely clear strip on this
 * page: "Shop" is a single short word, so everything right of it is empty at
 * any desktop width.
 */
.us-shop-deco {
  position: absolute;
  /* Offset to where the head *content* actually is, not to the top of the
     section: the first 120px of this page is the fixed header's territory, and
     marks placed there sit behind the wordmark and the Bag pill. Measured from
     the rendered box, not guessed. */
  top: 125px;
  left: 0;
  right: 0;
  height: 150px;
  pointer-events: none;
  z-index: 0;
}

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

/* "Shop" is one short word, so the right of the head row is empty at any width. */
/*
 * Beside the filter rails, not up in the title row.
 *
 * The title row is only ~120px tall and sits under the fixed header, so marks
 * placed there are gone the moment anyone scrolls. The filter block is the
 * genuine clear zone on this page: three short chip rails occupy the left two
 * thirds and the right ~500px is empty at every desktop width.
 */
/*
 * All three stay out of the right 16% of the page, which is the fixed Bag
 * pill's column — the header scrolls under the transparent nav like any other
 * content, and a decorative arc tangling with the Bag button on the way past
 * reads as a bug rather than as decoration.
 */
.us-shop-deco-star { top: 12%; right: 36%; opacity: 0.5; }
.us-shop-deco-arc { top: 30%; right: 22%; opacity: 0.5; }
.us-shop-deco-squiggle { top: 62%; right: 46%; opacity: 0.4; }

/* Only the head needs lifting above the decoration. `.filters` already sets its
   own `z-index: 40` deliberately, and overriding it here changed stacking the
   section had reasoned about. */
.us-shop-head { position: relative; z-index: 1; }

@media (max-width: 899px) {
  /* The head stacks and the filter rails wrap, so the clear band closes up. */
  .us-shop-deco-squiggle, .us-shop-deco-arc { display: none; }
  .us-shop-deco-star { top: 10%; right: 6%; }
}

/* ── The cast ────────────────────────────────────────────────────────
 * Three characters, on the two screens this page can be in.
 *
 * This is the one page that does not follow the landing page's "one licence
 * per section" rule, and deliberately: the shop is every theme at once, which
 * is exactly what the grid under these three already looks like.
 */

/*
 * Elsa, presenting the row of marks to her right.
 *
 * In the `.deco` band, which is 150px tall and pinned to where the head
 * content actually is (see the note on `.deco`), so her height is measured
 * against a fixed band rather than against a page whose length depends on how
 * many products survive the filter.
 *
 * 32% is where her palm lands just short of `.decoSquiggle`, with the star and
 * the arc carrying on to the right of it — the three marks read as a row she
 * is presenting. It also clears "Shop", which is one short word but is set at
 * display size and runs to ~305px with its drawn underline.
 *
 * `bottom` is negative on purpose. She is a half-figure cut off flat at the
 * waist, and 0 would park that cut in open white 10px above the filter block.
 * `.filters` is opaque and sits at `z-index: 40`, so running her past the band
 * hides the cut behind it — the same rule that swallowed half a star when the
 * marks were placed lower is what finishes her here.
 *
 * How far past is the fiddly part, and it needs the breakpoint below. `.deco`
 * is a fixed band (top 125, height 150) but `.filters` is not: the heading
 * shrinks as the page narrows and the block rides up with it, from 285px at
 * 1440 to 263px at 1000. A single offset therefore buries a different amount
 * of her at every width — and she is *also* shortest at 1000, so -36px there
 * took half of her instead of a fifth. Both ends move; the offset has to move
 * with them.
 */
.us-shop-deco-elsa {
  left: 32%;
  bottom: -36px;
}

@media (max-width: 1099px) {
  /* `.filters` is ~22px higher here. Same cut, measured: about a fifth of her
     behind the block at 1000 as at 1920, rather than half. */
  .us-shop-deco-elsa { bottom: -22px; }
}

/*
 * Deadpool, leaning on the empty state.
 *
 * `.empty` is a centred flex column, so it needs `position: relative` to
 * anchor him — that is the one layout change here, and it moves nothing.
 * He sits on the left of the block with the copy centred beside him.
 */
.us-shop-empty { position: relative; }

.us-shop-deco-deadpool {
  left: 4%;
  bottom: 18%;
}

/*
 * Steve and Alex, standing on the filter block's bottom rule.
 *
 * `bottom: 0` is that rule — `.filters` is the positioned ancestor here (it
 * already carries `position: relative` for its own stacking), so this is a
 * real floor line and not a guess at one, and the pair stands on it at every
 * width without a single percentage.
 *
 * `right` is measured from the block's own right edge, which is the page
 * gutter, and their `width` clamp is what keeps them out of the rails.
 *
 * The chips are fixed-size and ranged left, so each rail ends at very nearly
 * the same distance from the *left* gutter at every width — 905px at 1920,
 * 891px at 1440, 873px at 1000 for the longest of the three — while the block
 * keeps shrinking around them. So the clear zone to their right closes from
 * 875px to 19px across that range, and the pair cannot simply hold a column.
 *
 * What does hold is the vertical: the block is 173px tall at every desktop
 * width, the type rail ends 119px above its bottom border, and the two rails
 * below it run out at 584px and 351px from the gutter — nowhere near the right
 * edge. Standing on the floor at 90-146px tall, the pair clears the type rail
 * by height where it cannot clear it by width, and clears the other two by a
 * wide margin at every width. Both halves of that are measured.
 */
.us-shop-deco-duo {
  position: absolute;
  right: 2%;
  bottom: 0;
}

@media (max-width: 899px) {
  /* All three are `mobile="off"`; this only guards against that changing. The
     head stacks, the rails go vertical, and the empty block runs edge to edge
     at this width. */
  .us-shop-deco-elsa, .us-shop-deco-duo, .us-shop-deco-deadpool { display: none; }
}