/*
 * 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/chrome/Nav.module.css ─────────────────────────────────────── */
.us-nav {
  position: fixed;
  inset: 0 var(--rail) auto 0;
  z-index: 80;
  /* 1fr auto 1fr, not space-between: the mark must stay centred no matter how
     wide "Shop" or the Bag pill get. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem var(--gutter);
  /* No overflow:hidden anywhere on this element — Logo's charms are absolutely
     positioned ~2em outside the lockup and would be clipped off. */
}

.us-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Solid, to match .panel exactly. A translucent + blurred bar read as a
     frosted mask laid over the page, and against the opaque white panel
     hanging off its bottom edge the two surfaces never matched. */
  background: var(--white);
  border-bottom: 1px solid var(--ink-12);
  opacity: 0;
  z-index: -1;
  /* `right` reverts only after the panel has finished closing, so the bar
     never snaps narrow while the panel below it is still full width. */
  transition: opacity 0.35s ease, right 0s linear 0.45s;
}

/* Only ever on while the panel is open: the bar itself stays transparent over
   the page, but a white panel can't hang off a transparent bar. While open it
   also reaches over the rail, so bar and panel read as one full-width surface
   instead of stepping in at the top-right corner. */
.us-nav[data-open='true']::before {
  opacity: 1;
  right: calc(var(--rail) * -1);
  transition: opacity 0.35s ease, right 0s linear 0s;
}

/* ── Left: the Shop trigger and its panel ──────────────────────────── */
/* Deliberately static: the panel inside it is absolutely positioned and needs
   to resolve against .nav (the nearest positioned ancestor) so it can span the
   full bar width, not just this grid cell. */
.us-nav-shop-zone { position: static; justify-self: start; }

.us-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.3rem 0;
}

/* ── The character roll ────────────────────────────────────────────── */
/* Two stacked copies in a one-line mask; both roll up so the tinted ghost
   lands where the real one was. Shared by the trigger and every panel link. */
.us-nav-roll,
.us-roll {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.5;
  height: 1.5em;
}
.us-nav-roll-real,
.us-roll__real { display: block; }
.us-nav-roll-ghost,
.us-roll__ghost { display: block; color: var(--roll-ghost, var(--lilac-deep)); }

.us-nav-chevron { color: var(--ink-30); transform-origin: center; }

/* ── The mega panel ────────────────────────────────────────────────── */
.us-nav-panel {
  position: absolute;
  /* .nav is inset by --rail on the right for SectionRail; the panel reaches
     back over that strip so it covers the full viewport width. Negative right
     lands exactly on the viewport edge — it adds no horizontal overflow, and
     --rail is 0 below 900px so this is a no-op there. */
  left: 0;
  right: calc(var(--rail) * -1);
  top: 100%;
  /* Opaque, not translucent: clip-path defeats backdrop-filter here, so a
     translucent panel let the hero headline read straight through it. Plain
     white — the colour lives in the feature card and the hover tints, not in
     the surface. */
  background: var(--white);
  border-bottom: 1px solid var(--ink-12);
  box-shadow: 0 18px 40px -28px rgba(20, 16, 26, 0.45);
  pointer-events: none;
  clip-path: inset(0% 0% 100% 0%);
}

.us-nav[data-open='true'] .us-nav-panel { pointer-events: auto; }

/* Reduced motion: GSAP writes no inline clip-path, so this rule is what opens
   the panel. With motion on, GSAP's inline style wins and drives it instead. */
.us-nav[data-open='true'] .us-nav-panel { clip-path: inset(0% 0% 0% 0%); }

.us-nav-panel-inner {
  display: grid;
  /* Three text columns, then the feature card holding the right edge. */
  grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(200px, 260px);
  gap: 2.4rem;
  align-items: start;
  padding: 2.6rem var(--gutter) 3rem;
}

.us-nav-col { display: flex; flex-direction: column; gap: 1.1rem; }

/* The panel's stagger targets. This class carries no style of its own — it
   exists so `s.reveal` resolves to a real hashed name. It used to be absent,
   which made `s.reveal` `undefined`: the JSX emitted `class="… undefined"` and
   the selector `.undefined` then matched those same elements by accident. That
   worked only for as long as nothing else emitted an undefined class.
   The declaration is not decorative: an empty rule can be dropped by the
   minifier, which would make the class name undefined all over again. */
.us-nav-reveal { will-change: transform, opacity; }

.us-nav-col-title {
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  width: fit-content;
}

.us-nav-list { display: flex; flex-direction: column; gap: 0.72rem; }

/* Plain text rows. On hover the label rolls up to a ghost in the row's own
   tint and the count fades in — the count's box is always in flow, so
   revealing it can't nudge the row. */
.us-nav-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  width: fit-content;
  /* Takes the row from 23px to 29px — over the 24px pointer-target minimum
     without opening up the column's rhythm. */
  padding-block: 3px;
  font-size: 0.95rem;
  color: var(--ink-60);
  /* Each row's ghost copy carries its own theme colour. */
  --roll-ghost: var(--tint-deep, var(--lilac-deep));
}

.us-nav-item-count {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--grey);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.us-nav-item:hover .us-nav-item-count,
.us-nav-item:focus-visible .us-nav-item-count { opacity: 1; }

/* ── Feature card ──────────────────────────────────────────────────── */
.us-nav-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  justify-self: end;
  width: 100%;
}

.us-nav-feature-card {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--lilac-soft);
  overflow: hidden;
}

.us-nav-feature-card img {
  width: 74%;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.us-nav-feature:hover .us-nav-feature-card img { transform: scale(1.06) rotate(-3deg); }

.us-nav-feature-link {
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

/* The rule sits on the mask, not on the text: text-decoration doesn't reach
   into an inline-flex child, and a border here also stays put while the
   characters roll behind it. */
.us-nav-feature-link .us-nav-roll {
  border-bottom: 1px solid var(--ink-30);
  transition: border-color 0.3s ease;
}
.us-nav-feature:hover .us-nav-feature-link .us-nav-roll { border-color: var(--lilac-deep); }

/* ── Right: the Bag ────────────────────────────────────────────────── */
.us-nav-mark { justify-self: center; transform: translateX(calc(var(--rail) / 2)); }

.us-nav-actions { display: flex; align-items: center; gap: 0.7rem; justify-self: end; }

.us-nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.us-nav-cart { min-height: 40px; }

.us-nav-count {
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.3rem;
  border-radius: 999px;
  background: var(--pink);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* An empty bag reads as a quiet outline; the first item makes the pip pop. */
.us-nav-count[data-filled='false'] { background: rgba(255, 255, 255, 0.22); color: var(--white); }
.us-nav-count[data-filled='true'] { background: var(--pink); color: var(--ink); }

/* ══ Mobile menu ════════════════════════════════════════════════════════
   Hidden at desktop widths, where the hover mega panel does this job. */
.us-nav-menu-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  font-weight: 500;
}

.us-nav-burger { display: grid; gap: 4px; width: 17px; }
.us-nav-burger > span {
  display: block;
  height: 1.6px;
  width: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
/* The three bars fold into a cross. */
.us-nav-burger[data-open='true'] > span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.us-nav-burger[data-open='true'] > span:nth-child(2) { opacity: 0; }
.us-nav-burger[data-open='true'] > span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.us-nav-sheet-scrim,
.us-nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 78;
  background: rgba(20, 16, 26, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.us-nav-sheet-scrim[data-open='true'],
.us-nav-scrim[data-open='true'] { opacity: 1; pointer-events: auto; }

.us-nav-sheet {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 79;
  width: min(20rem, 88vw);
  height: 100dvh;
  background: var(--white);
  box-shadow: 18px 0 48px -32px rgba(20, 16, 26, 0.5);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.us-nav-sheet[data-open='true'] { transform: translateX(0); }

.us-nav-sheet-inner { display: flex; flex-direction: column; gap: 1.6rem; padding: 5.2rem 1.4rem 2rem; }
.us-nav-sheet-group { display: flex; flex-direction: column; gap: 0.2rem; }

.us-nav-sheet-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  padding-block: 0.5rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.us-nav-sheet-list { display: flex; flex-direction: column; }

.us-nav-sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding-block: 0.55rem;
  font-size: 0.94rem;
  color: var(--ink-60);
  border-bottom: 1px solid var(--ink-12);
}
.us-nav-sheet-item:active { color: var(--tint-deep, var(--lilac-deep)); }
.us-nav-sheet-count { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--grey); }

.us-nav-sheet-cta {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .us-nav-sheet, .us-nav-sheet-scrim, .us-nav-burger > span { transition: none; }
}

@media (max-width: 1199px) {
  /* Tighten rather than drop the card — the panel is hidden outright below
     900px, so there is no width at which losing it leaves a better layout. */
  .us-nav-panel-inner { gap: 1.8rem; grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(170px, 210px); }
}

@media (max-width: 899px) {
  /* Hover doesn't exist on touch — Shop stays a plain link. */
  .us-nav-panel { display: none; }
  .us-nav-chevron { display: none; }
  .us-nav { padding-inline: var(--gutter); gap: 1rem; }
  /* The hover trigger gives way to the tap menu at this width. */
  .us-nav-trigger { display: none; }
  .us-nav-menu-btn { display: inline-flex; }
  .us-nav-sheet, .us-nav-sheet-scrim { display: block; }

  .us-nav[data-scrolled='true']::before {
    right: 0;
    opacity: 1;
    transition: opacity 0.25s ease;
  }

  /* The sheet is a child of .nav, so both live in the stacking context .nav
     creates — and a positioned child with a z-index paints over static
     siblings regardless of the bar's own z-index. Without this the sheet
     covered its own close button and the bag pill. Scoped to this width
     because at desktop widths the same lift would push the mega panel
     underneath the centred mark. */
  .us-nav-menu-btn, .us-nav-mark, .us-nav-actions { position: relative; z-index: 81; }
}

@media (max-width: 419px) {
  /* At this width the mark, "Shop" and the Bag pill stop fitting comfortably
     on one row; tightening the pill is enough to keep them on it. */
  .us-nav { gap: 0.5rem; }
  .us-nav-cart { padding: 0.5rem 0.7rem 0.5rem 0.62rem; font-size: 0.74rem; }
}

/* ─── components/chrome/Logo.module.css ─────────────────────────────────────── */
.us-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  isolation: isolate;
}

/**
 * Height-driven off `--logo-size`, the knob the nav already passes in, with
 * `width: auto` so the 2.1:1 artwork sets its own width. The multiplier is
 * generous because the mark is a two-line lockup — script over a spaced
 * -STORE- — so matching it to the old cap-height would have rendered the
 * second line as a grey smudge.
 */
.us-logo-wordmark,
.us-logo__wordmark,
.us-logo img {
  height: calc(var(--logo-size, 1.05rem) * 2.4);
  width: auto;
  object-fit: contain;
  display: block;
  transform-origin: center;
}

/* ─── components/chrome/CursorBlob.module.css ─────────────────────────────────────── */
.us-blob {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle at 35% 30%, var(--lilac), var(--pink) 70%);
  mix-blend-mode: multiply;
  display: grid;
  place-items: center;
  opacity: 0;
}

.us-blob-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
}

.us-blob-plus {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
}
.us-blob-plus line { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }

@media (hover: none), (max-width: 899px) {
  .us-blob { display: none; }
}

/* ─── components/chrome/SectionRail.module.css ─────────────────────────────────────── */
.us-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--rail);
  z-index: 70;
  display: flex;
  pointer-events: none;
  /* Opaque, so section content passing underneath never shows through and
     clashes with the labels — the pastel fills read as colour arriving on a
     clean strip as you move down the page. */
  background: var(--white);
  border-left: 1px solid var(--ink-12);
}

.us-rail-col {
  position: relative;
  flex: 1;
  min-width: 0; /* vertical labels otherwise push the four columns past --rail */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* the pastel bar that fills as its section passes */
.us-rail-fill {
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  background: var(--bar);
  transform: scaleY(0);
  transform-origin: bottom;
}

.us-rail-label {
  position: relative;
  writing-mode: vertical-rl;
  max-height: 100%;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--ink);
  mix-blend-mode: multiply;
  white-space: nowrap;
  padding: 1rem 0;
}


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

/* ─── components/cart/CartDrawer.module.css ─────────────────────────────────────── */
/* Rendered outside #smooth-content, so `position: fixed` is honoured here —
   inside ScrollSmoother's transformed wrapper it would scroll with the page. */
.us-cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 16, 26, 0.34);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.us-cart-scrim[data-open='true'] { opacity: 1; pointer-events: auto; }

.us-cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  width: min(27rem, 100vw);
  height: 100dvh;
  background: var(--white);
  box-shadow: -18px 0 48px -32px rgba(20, 16, 26, 0.5);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  /* The close button and the checkout bar must clear the notch and the home
     indicator on a phone. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.us-cart-panel[data-open='true'] { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .us-cart-scrim, .us-cart-panel { transition: none; }
}

.us-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem var(--gutter-drawer);
  border-bottom: 1px solid var(--ink-12);
  flex: 0 0 auto;
}

.us-cart-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.4rem; }
.us-cart-title-count { color: var(--ink-30); }

.us-cart-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.6rem;
  border-radius: 999px;
  color: var(--ink-60);
  transition: background 0.25s ease, color 0.25s ease;
}
.us-cart-close:hover { background: var(--lilac-soft); color: var(--ink); }

/* ── Lines ─────────────────────────────────────────────────────────── */
.us-cart-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.6rem var(--gutter-drawer) 1rem;
}

.us-cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ink-12);
}
.us-cart-line:last-child { border-bottom: 0; }

.us-cart-line-media { width: 64px; }

.us-cart-line-name { font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
/* Block, so the stepper below starts a new line — as an inline span it shared
   a line with the stepper and the brand name was painted over. */
.us-cart-line-brand { display: block; font-size: 0.72rem; color: var(--ink-30); }
.us-cart-line-price { font-size: 0.8rem; color: var(--grey); font-variant-numeric: tabular-nums; }

.us-cart-qty {
  display: inline-flex;
  /* Keeps the stepper's box off the text baseline above it. */
  vertical-align: top;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.45rem;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  padding: 0.1rem;
}

.us-cart-qty-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--ink-60);
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.us-cart-qty-btn:hover:not(:disabled) { background: var(--lilac-soft); color: var(--ink); }
.us-cart-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.us-cart-qty-value {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.us-cart-line-end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }

.us-cart-remove-btn {
  font-size: 0.7rem;
  color: var(--ink-30);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.35rem 0;
  transition: color 0.25s ease;
}
.us-cart-remove-btn:hover { color: var(--pink-deep); }

/* ── Empty ─────────────────────────────────────────────────────────── */
.us-cart-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 2rem var(--gutter-drawer);
  text-align: center;
}
.us-cart-empty-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; letter-spacing: -0.02em; }
.us-cart-empty-note { font-size: 0.86rem; color: var(--ink-60); max-width: 22ch; }

/* ── Foot ──────────────────────────────────────────────────────────── */
.us-cart-foot {
  flex: 0 0 auto;
  padding: 1.1rem var(--gutter-drawer) 1.3rem;
  border-top: 1px solid var(--ink-12);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.us-cart-totals { display: flex; align-items: baseline; justify-content: space-between; }
.us-cart-totals-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.us-cart-totals-value { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.us-cart-checkout {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 600;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.us-cart-checkout:hover { transform: translateY(-2px); }

.us-cart-foot-note { font-size: 0.7rem; color: var(--ink-30); text-align: center; }

.us-cart-clear-all {
  align-self: center;
  font-size: 0.74rem;
  color: var(--ink-30);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem;
}
.us-cart-clear-all:hover { color: var(--ink); }

.us-cart-panel { --gutter-drawer: 1.4rem; }

@media (max-width: 479px) {
  .us-cart-panel { --gutter-drawer: 1.1rem; width: 100%; }
  .us-cart-line { grid-template-columns: 54px 1fr auto; gap: 0.7rem; }
  .us-cart-line-media { width: 54px; }
}