/* 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); }
.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; }
}