/* Category / Shop archive layout. Scoped: enqueued on shop + product taxonomies.
   Mirrors the <style> block from design-reference/src/category.body.html. */

.cat-intro { display: grid; gap: var(--mv-s5); }
.cat-intro h1 { font-size: clamp(4.5rem, 16vw, 10.5rem); line-height: 0.82; }
.cat-bar { display: flex; flex-wrap: wrap; gap: var(--mv-s4) var(--mv-s8); justify-content: space-between; align-items: center; padding-block: var(--mv-s4); border-top: 1px solid var(--mv-line); border-bottom: 1px solid var(--mv-line); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mv-mute); }
.cat-bar a, .cat-bar button { color: inherit; }
.cat-bar__end { display: flex; align-items: center; gap: var(--mv-s6); }
.cat-bar__count { color: var(--mv-highlight); }

/* Sort / filter disclosures.
   Built on <details> so the bar opens, closes and navigates with no JavaScript
   at all — mv-ui.js only adds outside-click / Escape closing on top. Brand
   styling: hairline borders, square corners, no shadow. */
.cat-menu { position: relative; }
.cat-menu__summary { display: inline-flex; align-items: center; gap: var(--mv-s2); cursor: pointer; list-style: none; color: var(--mv-default); transition: color var(--mv-dur-fg) var(--mv-ease); }
.cat-menu__summary::-webkit-details-marker { display: none; }
.cat-menu__summary:hover { color: var(--mv-highlight); }
.cat-menu__label { color: var(--mv-faint); }
.cat-menu__caret { color: var(--mv-highlight); }
.cat-menu__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; letter-spacing: 0; color: var(--mv-ink); background: var(--mv-highlight); }
.cat-menu[open] .cat-menu__summary { color: var(--mv-highlight); }

/* z-index: sits above the sections that follow, but below the sticky header
   (--mv-z-header: 50), so scrolling tucks an open panel under the bar. */
.cat-menu__panel { position: absolute; top: calc(100% + var(--mv-s4)); left: 0; z-index: 20; min-width: 220px; padding: var(--mv-s3) 0; background: var(--mv-coal); border: 1px solid var(--mv-line-strong); }
.cat-menu--end .cat-menu__panel { left: auto; right: 0; }
.cat-menu__opt { display: block; padding: 10px var(--mv-s5); color: var(--mv-mute); white-space: nowrap; transition: color var(--mv-dur-fg) var(--mv-ease), background var(--mv-dur-bg) var(--mv-ease); }
.cat-menu__opt:hover { color: var(--mv-highlight); background: var(--mv-hi-tint); }
.cat-menu__opt.is-active { color: var(--mv-highlight); }

.cat-menu__panel--filter { min-width: 260px; padding: var(--mv-s5); }
/* Each attribute is its own titled group, separated by a hairline rather than
   whitespace — with lengths running to six chips, a gap alone stopped reading
   as a boundary. */
.cat-menu__group + .cat-menu__group { margin-top: var(--mv-s5); padding-top: var(--mv-s5); border-top: 1px solid var(--mv-line); }
.cat-menu__title { margin: 0 0 var(--mv-s4); color: var(--mv-highlight); }
.cat-menu__chips { display: flex; flex-wrap: wrap; gap: var(--mv-s2); }
/* The chips are anchors here (Woo's layered nav is link-driven); .mv-chip is
   authored for <button>, so give them the same box an inline-flex button has. */
.cat-menu__chips .mv-chip { display: inline-flex; align-items: center; }
.cat-menu__clear { display: inline-block; margin-top: var(--mv-s4); color: var(--mv-faint); transition: color var(--mv-dur-fg) var(--mv-ease); }
.cat-menu__clear:hover { color: var(--mv-highlight); }

@media (max-width: 480px) {
  /* Span the panel across the whole bar instead of letting a 260px box hang off
     a narrow screen. Making .cat-menu static hands the panel's containing block
     to .cat-bar, so left/right resolve to the bar's edges, and `top` drops it
     below the bar rather than below the summary. */
  .cat-bar { position: relative; }
  .cat-menu { position: static; }
  .cat-menu__panel,
  .cat-menu--end .cat-menu__panel { left: 0; right: 0; min-width: 0; }
}
/* min-width:0 + max-width:100% cap the rail box; overscroll-behavior-x:contain
   keeps a swipe inside the rail so it can't pan the page on mobile. */
.cat-sig__rail { display: flex; gap: var(--mv-s4); min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; padding-right: var(--mv-gutter); }
.cat-sig__rail::-webkit-scrollbar { height: 0; }
.cat-sig__rail > .mv-card { flex: 0 0 64%; scroll-snap-align: start; }
/* mv-ui.js sets [hidden] on the arrows when the rail has nothing to scroll. The
   UA sheet's [hidden]{display:none} loses to .mv-iconbtn's display:inline-flex,
   so restate it — the same reason .mv-catbar__arrow[hidden] exists in the
   design system for the header's arrows. */
.cat-sig .mv-iconbtn[hidden] { display: none; }

@media (min-width: 768px) {
  .cat-intro { grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--mv-s12); }
  .cat-sig { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--mv-s10); align-items: center; }
  .cat-sig__rail > .mv-card { flex: 0 0 300px; }
}
@media (min-width: 1024px) {
  .cat-sig__rail > .mv-card { flex: 0 0 340px; }
}

/* --- Full-bleed FILTER panel ---------------------------------------------
   The filter drops the full width of the screen, edge to edge, rather than a
   narrow box hanging off the right of the container. Technique: make the bar the
   positioning context and the filter menu static, so the panel resolves against
   .cat-bar; then span 100vw centred on the bar (which is centred in the viewport
   because .mv-container is). html/body use overflow-x:clip, so the 100vw box
   cannot introduce a horizontal scrollbar. The sort menu is untouched.
   Inside, the groups lay out as a horizontal row held to the content width by
   symmetric padding (full-bleed background, contained content — no wrapper
   element needed), and wrap down on narrow screens. */
.cat-bar { position: relative; }
.cat-menu--end { position: static; }
.cat-menu--end .cat-menu__panel--filter {
  position: absolute;
  top: calc(100% + var(--mv-s4));
  left: 50%;
  right: auto;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  box-sizing: border-box;
  border-left: 0;
  border-right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--mv-s6) var(--mv-s16);
  padding: var(--mv-s8) max(var(--mv-gutter), calc((100vw - var(--mv-maxw)) / 2));
}
/* In the horizontal layout the per-group hairline (authored as a top border for
   the stacked box) would sit above the second group — drop it here. */
.cat-menu--end .cat-menu__panel--filter .cat-menu__group + .cat-menu__group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.cat-menu--end .cat-menu__panel--filter .cat-menu__clear { margin-top: 0; align-self: center; }

/* --- Subcategory tiles (main category archive) ---------------------------- */
.cat-tile { display: flex; flex-direction: column; }
.cat-tile__title { display: block; margin-bottom: var(--mv-s2); }
.cat-tile__count {
  font-family: var(--mv-mono); font-size: var(--mv-fs-meta); letter-spacing: var(--mv-ls-meta);
  text-transform: uppercase; color: var(--mv-mute);
}
/* The "View all" tile reads as a way through, not a product: its placeholder
   media carries the gold-tinted label rather than a stand-in photograph. */
.cat-tile--all .cat-tile__count { color: var(--mv-highlight); }