/* ============ Shop v2 (/shop2/) — conversion-focused shop page ============
   Reuses the main.css system (tokens, .card, .grid, .designfilter, .shelf,
   aurora). This file only adds the page-specific pieces:
   hero, proof strip, mood tiles, sticky toolbar, facts band, bench strip. */

/* ---- Catalog blocks ---- */
.shop2-catalog {
  padding-bottom: 0;
}
/* The catalog opens with a world__rule heading; trim its default top margin
   so the light section doesn't start with a large empty band. */
.shop2-catalog .container > .world__rule:first-child {
  margin-top: clamp(1.25rem, 3vh, 2rem);
}
/* ---- Mood tiles (choose-by-identity) ---- */
.shop2-moods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  margin-top: 2.4rem;
}
.shop2-mood {
  display: flex;
  flex-direction: column;
  background: var(--snow);
  border: 1px solid color-mix(in srgb, var(--c-muted) 22%, transparent);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.shop2-mood:hover {
  border-color: var(--moss);
  transform: translateY(-3px);
}
.shop2-mood__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--birch);
}
.shop2-mood__media img,
.shop2-mood__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.shop2-mood:hover .shop2-mood__media img {
  transform: scale(1.03);
}
.shop2-mood__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.15rem 1.25rem;
}
/* Three category doors on the landing page, rather than the four collection
   tiles above them. Same card, wider tracks. */
.shop2-moods--cats {
  grid-template-columns: repeat(3, 1fr);
}
/* A cover that is a shot mockup already sits on #EEEDE8, so the tile's own
   birch panel would show as a second, slightly different rectangle behind it.
   Match the card treatment: no panel, and let the garment sit on the page. */
.shop2-mood__media--onbg {
  background: transparent;
}
.shop2-mood__media--onbg :is(img, picture) {
  object-fit: contain;
}

.shop2-mood__title {
  font-size: 1.25rem;
  margin: 0 0 0.4rem;
}
.shop2-mood__blurb {
  color: var(--c-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
}
.shop2-mood__cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--moss);
}

/* ---- Sticky topic nav (scroll-spy) ---- */
.shop2-topicnav {
  position: sticky;
  top: 3.4rem; /* clears the fixed nav once it goes solid */
  z-index: 20;
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem 0;
  margin-top: 2rem;
  background: var(--c-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--c-muted) 28%, transparent);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shop2-topicnav::-webkit-scrollbar {
  display: none;
}
.shop2-topicnav a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--c-muted) 55%, transparent);
  border-radius: 999px;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.shop2-topicnav a:hover,
.shop2-topicnav a.is-on {
  border-color: var(--moss);
  color: var(--moss);
}
.shop2-topicnav__count {
  margin-left: 0.5em;
  color: var(--c-muted);
}

/* ---- Collection shelves ---- */
.shop2-shelf {
  /* Anchor jumps land clear of the fixed site nav + the sticky topic nav.
     Still correct on /de/shop/ and /fi/shop/, which is where that nav now
     only lives. */
  scroll-margin-top: 7.5rem;
}
/* The category pages lost the topic nav (2026-08-13), so there is 120px of
   compensation here for a bar that no longer exists: an anchor arrival sat
   162px below the site nav. 5rem clears the 62px nav with air to spare and
   works for a banded and an unbanded shelf alike. */
.catpage .shop2-shelf {
  scroll-margin-top: 5rem;
}
.shop2-shelfhead__blurb {
  color: var(--c-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: -0.4rem 0 1.4rem;
  max-width: 46ch;
}

/* ---- Shelf divider: a hard-cut dark slab (Alex, 2026-08-13) ----
   Same device as the homepage voucher banner. No gradient and no dawn scrub
   at its edges: the abrupt cut IS the effect, and softening it would put the
   seam back where it was.

   Full-bleed from inside .container using the pattern .uspbar and .band__inner
   already use, then each child is re-gutter'd to the same measure, so the type
   stays on the site's single left edge and only the colour runs wide.

   The palette vars are set locally rather than the colours hard-coded, so
   every child (title, count, blurb) flips in one step and keeps using the
   same tokens as everywhere else. The page around it stays light, which is
   what keeps the cards below on the birch ground. */
/* Trimmed 2026-08-13 (Alex): the slab read as too heavy for what it carries.
   Measured before and after on a 375px phone — 203px tall with a three-line
   blurb, 156px now with the padding cut and the blurb capped at two lines.
   Desktop went 131px → 101px. The band still divides; it no longer dominates. */
.shop2-shelfhead--band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: clamp(2.2rem, 5vh, 3.6rem) clamp(1.4rem, 3vh, 2.2rem);
  padding-block: clamp(1.3rem, 3vh, 2rem);
  background: var(--norr-black);
  --c-text: var(--birch);
  --c-muted: var(--fog);
  color: var(--c-text);
}
.shop2-shelfhead--band > * {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Both children carry their own margins, and the shorthand in
   .shop2-shelfhead__blurb sets the inline ones to 0. Restated here rather than
   left to a specificity tie, which has cost this project time three times. */
.shop2-shelfhead--band .shelf__head {
  margin-bottom: 0.6rem;
}
/* Two lines, hard cap (Alex, 2026-08-13). The blurbs themselves were shortened
   to fit — the clamp is the guard, not the mechanism, so a longer one added
   later can never grow the slab back. If an ellipsis ever appears, that is the
   copy asking to be cut, not the CSS misbehaving. */
.shop2-shelfhead--band .shop2-shelfhead__blurb {
  margin-block: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* The first shelf sits directly under the sticky topic nav, so it would
   otherwise open with a slab and no air above it. */
.shop2-shelf:first-of-type .shop2-shelfhead--band {
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
/* The phone wrap fix this band exposed turned out to affect every shelf on the
   site, so it lives with .shelf__head in main.css rather than here. */

/* ---- Facts band ---- */
.shop2-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 2.4rem;
}
.shop2-fact {
  background: var(--snow);
  border: 1px solid color-mix(in srgb, var(--c-muted) 22%, transparent);
  padding: 1.6rem 1.5rem 1.4rem;
}
.shop2-fact__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--moss);
  margin: 0 0 0.9rem;
}
.shop2-fact__title {
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}
.shop2-fact__body {
  color: var(--c-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- On the bench (coming soon, condensed) ---- */
.shop2-bench {
  margin-top: clamp(3rem, 7vh, 5rem);
}
.shop2-bench__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-muted) 32%, transparent);
}
.shop2-bench__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-muted) 32%, transparent);
}
.shop2-bench__title {
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}
.shop2-bench__note {
  color: var(--c-muted);
  font-size: 0.88rem;
  margin: 0;
}
.shop2-bench__pill {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-muted);
  border: 1px dashed color-mix(in srgb, var(--c-muted) 55%, transparent);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
}
.shop2-bench__hint {
  color: var(--c-muted);
  font-size: 0.88rem;
  margin: 1.2rem 0 0;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .shop2-moods {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .shop2-facts {
    grid-template-columns: 1fr;
  }
  .shop2-topicnav {
    top: 3rem;
  }
}
@media (max-width: 560px) {
  .shop2-moods {
    grid-template-columns: 1fr;
  }
  .shop2-bench__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shop2-mood,
  .shop2-mood__media img {
    transition: none;
  }
}

/* ---- Category pages (/shop/t-shirts/, /hoodies/, /cabin-goods/) ---- */
.catpage {
  padding-top: clamp(7rem, 15vh, 10rem);
  padding-bottom: 0;
}
.catpage__crumb {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-muted);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.catpage__crumb a {
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.catpage__crumb a:hover {
  color: var(--c-text);
  border-bottom-color: currentColor;
}
/* The page's own h1 sits in a world__rule; drop the rule's default top margin
   so the heading does not start with an empty band under the breadcrumb. */
.catpage__head {
  margin-top: 1.4rem;
}
/* Not sticky, unlike the old in-page topic nav: these are links to other
   pages, so there is nothing to scroll-spy and nothing to follow you down. */
/* .catpage__switch removed 2026-08-13 with the category-page pill nav it
   unstuck. .shop2-topicnav itself stays: /de/shop/ and /fi/shop/ still use it. */
@media (max-width: 1100px) {
  .shop2-moods--cats {
    grid-template-columns: 1fr;
  }
}

/* ---- Category page header ---------------------------------------------
   Photograph behind the type, same machinery as the shop hero (.hero__img
   carries the one-shot zoom-out, .hero__shade the scrim), but 62vh rather
   than a full screen: this is an interior page and the product should not
   sit two screens down. Change the clamp if it should match the landing. */
.cathero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 82vh, 900px);
  display: flex;
  align-items: flex-end;
  padding-top: clamp(7rem, 16vh, 11rem);
  /* Lifts the title off the foot of the frame to match /shop/ (Alex,
     2026-08-13). Measured before: the landing hero's type sits 177px off the
     bottom because a lede follows it, while this one ended 68px off it and
     read as sitting on the edge. The eyebrow and lede were removed from this
     hero earlier, so the title became the last element and inherited the
     padding directly. On the tee hero the extra height also puts the type
     over the water rather than the boardwalk. */
  padding-bottom: clamp(5rem, 17vh, 10.5rem);
}
.cathero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ---- Nav over the category hero (Alex, 2026-08-13) ----
   The page palette is LIGHT from load — that is what keeps the content below
   the hero white at every scroll position, including scrolling back up. But a
   light palette means dark nav text, and the top strip of this photograph is
   bright water on the left and near-black trees on the right, so dark text
   vanished on the right-hand menu.

   Fix is scoped to the nav, not the page: while the bar is still transparent,
   override its palette vars to the dark-theme values so every child (wordmark,
   links, cart, language switcher) goes light in one step, and lay a short
   scrim behind it for contrast over the bright side. The moment .nav--solid
   turns on (scrollY > 24) both drop away and the bar uses the page palette
   again, which by then sits above white content.

   Do NOT solve this by flipping the page palette back to dark — that is what
   turned the area under the hero black when scrolling up. */
.cathero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(130px, 20vh, 220px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(12, 17, 16, 0.5) 0%,
    rgba(12, 17, 16, 0.24) 50%,
    rgba(12, 17, 16, 0) 100%
  );
}
/* ---- Scrim behind the title (Alex, 2026-08-14) ----
   ::before above only covers the nav strip. Nothing sat behind the title, so
   it relied on the photograph happening to be dark where the type lands. That
   held for the tee and hoodie heroes (foliage, blue-hour snow) and broke on
   Beanies & totes, which is a snow scene: measured on a 390px phone, the title
   sat on a backdrop of 142 against ivory type at 238, versus 90 and 105 on the
   other two. Alex could not read it.

   A mobile crop alone was not enough. In the cropped frame the title's middle
   falls on the black tote (mean 23) but its first words land on snow at 75
   with highlights to 243, and the right side reads 124. So the type still
   changed contrast mid-line.

   This gradient guarantees the floor whatever photograph goes in, which is the
   point: the next hero will not need re-measuring. It is bottom-anchored and
   fades to nothing by the midpoint, so it never touches the sky or the
   subject's face. .cathero__inner is already z-index 2, so the type sits above
   it. On the tee and hoodie heroes this darkens ground that was already dark
   and is not visible in a side-by-side. */
.cathero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  /* Tall enough to reach the breadcrumb, which sits ABOVE the title at roughly
     62% down the hero. The first version stopped at 52% and had faded to ~0.18
     by then, so the breadcrumb still measured 3.63:1 while the title beside it
     was fine. The extra stop at 68% is what carries that band. */
  height: 64%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(12, 17, 16, 0.72) 0%,
    rgba(12, 17, 16, 0.54) 38%,
    rgba(12, 17, 16, 0.3) 68%,
    rgba(12, 17, 16, 0) 100%
  );
}

body:has(.cathero) .nav:not(.nav--solid) {
  --c-text: var(--birch);
  --c-muted: var(--fog);
  color: var(--c-text);
}
/* ...but NOT inside the mobile drawer (Alex, 2026-08-13). Under 820px
   .nav__links stops being a row in the bar and becomes a panel that paints its
   own solid background from --c-bg, which is the LIGHT page colour. The rule
   above was handing that cream panel cream text, so the open menu rendered
   blank. The bar itself still needs light text — it is over the photograph —
   so the reset is scoped to the drawer alone.
   Custom properties substitute where they are declared, so this has to
   re-declare --c-text/--c-muted outright; redefining an intermediate variable
   deeper in the tree would not take. */
@media (max-width: 820px) {
  body:has(.cathero) .nav:not(.nav--solid) .nav__links {
    --c-text: var(--ink);
    --c-muted: #6b716d;
    color: var(--c-text);
  }
}
/* No max-width here. .container centres itself, so capping this block would
   centre the type in the page instead of leaving it on the site's one left
   edge — the same mistake the newsletter made. Cap the children instead. */
.cathero__inner {
  position: relative;
  z-index: 2;
  /* .cathero is a flex container, so this .container shrink-wraps to its
     content and its auto margins then centre it. width:100% restores the
     normal container behaviour — the same fix .shop-hero__grid carries. */
  width: 100%;
}
.cathero__title {
  font-family: var(--font-display);
  /* Was clamp(2.2rem, 5vw, 4.2rem), which rendered 67px against the landing
     hero's 112px. Deliberately still smaller than /shop/: that is the top of
     the shop and this is a level below it, and these titles are longer strings
     on one line where "Choose your north." gets two. */
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--birch);
  margin: 0.3rem 0 0.7rem;
  max-width: 20ch;
}
.cathero__lede {
  color: var(--fog);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.6;
  max-width: 44ch;
  margin: 0;
}
/* Birch, not fog (Alex, 2026-08-14 — he could not read it on his phone).
   Fog is the muted tone for body copy on a solid dark panel. This is the
   smallest, thinnest type on the page, 10.9px mono, and it sits over a
   photograph. Measured on a 390px viewport against the backdrop it actually
   lands on, rgb(101,100,99): fog gives 2.67:1, which fails the 4.5:1 WCAG
   needs at this size, and birch gives 5.04:1. The title beside it runs at
   9.87:1, so fog was carrying roughly a quarter of the title's contrast.
   Size and letter-spacing keep the hierarchy; the colour was never what
   separated them. */
.catpage__crumb--onhero {
  color: var(--birch);
  margin-bottom: 0.9rem;
}
.catpage__crumb--onhero a {
  color: var(--birch);
}
.catpage__crumb--onhero a:hover {
  color: var(--birch);
}
/* With a hero above it the shelves start straight in, so the page does not
   need the tall top padding that stands in for a header. */
.catpage--hashero {
  padding-top: clamp(2.5rem, 6vh, 4rem);
}