/* ============================================================================
   MeshyFlix — marketplace (shop archive)
   Contract: /DESIGN-SYSTEM.md. Tokens only.
   Radii: --r-chip | --r-card | --r-pill (or none, for the flush contact sheet).
   Borders: --hairline (hover brightens to --hairline-2, per system.css).
   Motion:  --t-quick | --t-base | --t-slow, --ease. Nothing else.
   Accent:  actions and live control states only — never on card metadata.

   Head, filters and toolbar sit at --w-wide. The grid then breaks out
   full-bleed: a hairline-celled contact sheet cut by both viewport edges,
   so it cannot be confused with the --w-base marketing pages above it.
   ========================================================================== */

.s3-cat{
  /* Local spacing only. --pad is redefined downstream, so it is not used here. */
  --cat-gutter: clamp(18px, 2.4vw, 44px);
  display: block;
  padding-block: 0 clamp(64px, 8vw, 118px);
}

.s3-cat-inner{
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--cat-gutter);
}

/* ------------------------------------------------------------------ head --- */

.s3-cat-head{ padding-block: clamp(40px, 5vw, 76px) clamp(26px, 3vw, 40px) }
.s3-cat-head .s3-h1{ margin: 0 0 14px }
.s3-cat-head .s3-lede{ margin: 0 }

/* Formats and licence tiers, read straight off the taxonomies. */
.s3-cat-readout{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 22px 0 0;
  padding: 0;
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--faint);
}
.s3-cat-readout span{ display: inline-flex; align-items: center; gap: 18px }
.s3-cat-readout span + span::before{
  content: '';
  width: 14px;
  height: 1px;
  background: var(--hairline);
}

/* --------------------------------------------------------------- filters --- */

.s3-cat-controls{ padding-block: 0 }

.s3-cat-filters.s3-cat-inner{
  /* The filter bar spans the full viewport so it sits flush with the catalogue
     wall below it. Anything narrower reads as inset against a full-bleed grid. */
  max-width: none;
}
.s3-cat-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px 26px;
  padding-block: 20px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.s3-cat-filters-top{ display: none; align-items: center; justify-content: space-between; width: 100% }
.s3-cat-filters-top h2{ margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.02em }
.s3-cat-close{
  display: inline-flex;
  padding: 6px;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}
.s3-cat-close:hover{ color: var(--text) }

.s3-cat-fgroup{ display: flex; flex-direction: column; gap: 9px; flex: 0 0 auto }
.s3-cat-fgroup--search{ flex: 1 1 220px; min-width: 190px; max-width: 320px }

/* The one permitted uppercase micro-label role: a readout beside a control. */
.s3-cat-flabel{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

.s3-cat-search{
  width: 100%;
  padding: 9px 14px;
  background: var(--glass-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  transition: border-color var(--t-quick) var(--ease);
}
.s3-cat-search::placeholder{ color: var(--faint) }
.s3-cat-search:hover{ border-color: var(--hairline-2) }

/* Category facets — every one carries its count. */
.s3-cat-flist{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.s3-cat-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease);
}
.s3-cat-check:hover{ border-color: var(--hairline-2) }
.s3-cat-check input{ position: absolute; opacity: 0; pointer-events: none }
.s3-cat-check__box{
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  color: transparent;
  transition: background var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.s3-cat-check input:checked + .s3-cat-check__box{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.s3-cat-check__name{ font-size: 14px; font-weight: 500; color: var(--muted) }
.s3-cat-check input:checked ~ .s3-cat-check__name{ color: var(--text) }
.s3-cat-check__n{
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.s3-cat-check input:focus-visible + .s3-cat-check__box{ outline: 2px solid var(--accent); outline-offset: 2px }

/* Format facets — same rule: a number or it does not ship. */
.s3-cat-fchips{ display: flex; flex-wrap: wrap; gap: 6px }
.s3-cat-fmt{ cursor: pointer }
.s3-cat-fmt input{ position: absolute; opacity: 0; pointer-events: none }
.s3-cat-fmt span{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-cat-fmt:hover span{ border-color: var(--hairline-2); color: var(--text) }
.s3-cat-fmt i{ font-style: normal; font-variant-numeric: tabular-nums; color: var(--faint) }
.s3-cat-fmt input:checked + span{ border-color: var(--accent); color: var(--accent) }
.s3-cat-fmt input:checked + span i{ color: var(--accent) }
.s3-cat-fmt input:focus-visible + span{ outline: 2px solid var(--accent); outline-offset: 2px }

/* Price — the fill and thumbs are a live control, so they may carry accent. */
.s3-price-slider{ position: relative; width: 190px; height: 22px }
.s3-price-track{
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--glass-2);
}
.s3-price-fill{ position: absolute; top: 0; height: 100%; border-radius: var(--r-pill); background: var(--accent) }
.s3-price-slider input[type=range]{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.s3-price-slider input[type=range]::-webkit-slider-thumb{
  pointer-events: auto;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: var(--r-pill);
  background: var(--accent);
  border: 0;
  cursor: pointer;
}
.s3-price-slider input[type=range]::-moz-range-thumb{
  pointer-events: auto;
  width: 13px;
  height: 13px;
  border-radius: var(--r-pill);
  background: var(--accent);
  border: 0;
  cursor: pointer;
}
.s3-cat-prices{ display: flex; align-items: center; gap: 8px }
.s3-cat-prices span{ color: var(--faint) }
.s3-cat-prices input{
  width: 78px;
  padding: 8px 10px;
  background: var(--glass-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.s3-cat-switch{ display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--muted) }
.s3-cat-switch input{ position: absolute; opacity: 0; pointer-events: none }
.s3-cat-switch__track{
  position: relative;
  width: 38px;
  height: 21px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--glass-2);
  transition: background var(--t-quick) var(--ease);
}
.s3-cat-switch__dot{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: var(--r-pill);
  background: var(--muted);
  transition: transform var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.s3-cat-switch input:checked + .s3-cat-switch__track{ background: var(--accent) }
.s3-cat-switch input:checked + .s3-cat-switch__track .s3-cat-switch__dot{
  transform: translateX(17px);
  background: var(--accent-ink);
}

.s3-cat-factions{ display: flex; align-items: center; gap: 6px; margin-left: auto }
.s3-cat-factions .s3-btn{ padding: 9px 20px; font-size: 14px; border-radius: var(--r-chip) }
.s3-cat-factions .s3-btn-bare{ padding-inline: 10px }

/* --------------------------------------------------------------- toolbar --- */

.s3-cat-toolbar{ padding-block: 16px 18px }
.s3-cat-toolbar__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.s3-cat-toolbar__left,
.s3-cat-toolbar__right{ display: flex; align-items: center; gap: 12px }

.s3-cat-count,
.s3-cat-count .woocommerce-result-count{
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.s3-cat-filterbtn{
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--glass-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* Pins card metadata for people who would rather read than scan. */
.s3-cat-names{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.s3-cat-namesbtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-cat-namesbtn:hover{ border-color: var(--hairline-2); color: var(--text) }
.s3-cat-namesbtn__dot{
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--glass-4);
  transition: background var(--t-quick) var(--ease);
}
.s3-cat-names:checked ~ .s3-cat-toolbar .s3-cat-namesbtn{ color: var(--text); border-color: var(--accent) }
.s3-cat-names:checked ~ .s3-cat-toolbar .s3-cat-namesbtn__dot{ background: var(--accent) }
.s3-cat-names:focus-visible ~ .s3-cat-toolbar .s3-cat-namesbtn{ outline: 2px solid var(--accent); outline-offset: 3px }

.s3-cat-sort{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--faint) }
.s3-cat-sort select{
  padding: 7px 12px;
  background: var(--glass-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease);
}
.s3-cat-sort select:hover{ border-color: var(--hairline-2) }

.s3-cat-density{
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.s3-cat-density button{
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--faint);
  cursor: pointer;
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-cat-density button:hover{ color: var(--text) }
.s3-cat-density button.is-active{ background: var(--glass-2); color: var(--text) }

.s3-cat-active{ display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px }
.s3-cat-tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-cat-tag:hover{ border-color: var(--hairline-2); color: var(--text) }
.s3-cat-tag--clear{ border-color: transparent; color: var(--faint); text-decoration: underline }
.s3-cat-tag--clear:hover{ border-color: transparent }

/* ------------------------------------------------------------- the wall --- */
/* Full-bleed contact sheet. The 1px lattice belongs to the grid, not to the
   cell: every cell draws its own right and bottom rule, the wall draws the
   top. A short last row therefore simply ends — no phantom cells, no doubled
   lines, nothing to go ragged. */

.s3-cat-wallwrap{ width: 100% }

.s3-cat-wall.s3-mk-grid{
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
  /* 5 / 2 / 1 columns: each divides 10-per-page into whole rows. */
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.s3-cat-wall.s3-mk-grid[data-cols='2']{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important }

.s3-cat-card{
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface-1);
  transition: filter var(--t-quick) var(--ease);
}
/* The lattice is the wall's, not the cell's: this template is reused for
   related products on the PDP, where there is no sheet to be part of. */
.s3-cat-wall > .s3-cat-card{
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
/* One interaction language: the cell brightens. Nothing moves. */
.s3-cat-card:hover{ filter: brightness(1.1) }

.s3-cat-card__link{ display: block; color: inherit; text-decoration: none }
.s3-cat-card__link:focus-visible{ outline-offset: -3px }

/* Ratio lock: a padding-top box, so no cell can shift while images load. */
.s3-cat-card__media{
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  background: var(--surface-1);
}
.s3-cat-card__media img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s3-cat-card__ph{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--faint);
}

/* Typographic badge: flat rectangle, flush to the corner. No gloss, no pill,
   no accent — a category is metadata, and metadata is never lime. */
.s3-cat-card__badge{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.s3-cat-card__badge--flag{ left: auto; right: 0; color: var(--muted) }

.s3-cat-card__meta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 40px 14px 13px;
  background: linear-gradient(to top, var(--bg), transparent);
}

/* Poly Haven's wipe, verbatim — and only inside the wall, where the point is
   that at rest the catalogue is pure imagery. */
.s3-cat-wall .s3-cat-card__meta{
  opacity: 0;
  transform: scaleY(.05);
  transform-origin: bottom;
  filter: blur(10px);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              filter var(--t-base) var(--ease);
}
.s3-cat-wall .s3-cat-card:hover .s3-cat-card__meta,
.s3-cat-wall .s3-cat-card:focus-within .s3-cat-card__meta,
.s3-cat-names:checked ~ .s3-cat-wallwrap .s3-cat-card__meta{
  opacity: 1;
  transform: none;
  filter: none;
}

.s3-cat-card__name{
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
}
.s3-cat-card__line{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px }

/* "From €X" — the low anchor of a variable product, in muted weight. */
.s3-cat-card__price{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.s3-cat-card__from{ font-family: var(--font); font-size: 11px; color: var(--faint); margin-right: 3px }
.s3-cat-card__price del{ color: var(--faint); margin-right: 5px }

/* Spec triple, straight out of the GLB. */
.s3-cat-card__spec{
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Large view gets the standard card-heading scale. */
.s3-cat-wall.s3-mk-grid[data-cols='2'] .s3-cat-card__meta{ padding: 56px 22px 20px; gap: 8px }
.s3-cat-wall.s3-mk-grid[data-cols='2'] .s3-cat-card__name{ font-size: 20px }
.s3-cat-wall.s3-mk-grid[data-cols='2'] .s3-cat-card__price{ font-size: 15px }
.s3-cat-wall.s3-mk-grid[data-cols='2'] .s3-cat-card__spec{ font-size: 12px }

/* ------------------------------------------------- empty state + pager --- */

.s3-cat-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(64px, 9vw, 120px) var(--cat-gutter);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  color: var(--faint);
}
.s3-cat-empty h2{ margin: 6px 0 0; color: var(--text) }
.s3-cat-empty p{ margin: 0; color: var(--muted) }
.s3-cat-empty .s3-btn{ margin-top: 8px }

/* WooCommerce puts the class page-numbers on the <ul> as well as on each link,
   so an unqualified .page-numbers rule dresses the whole list as one giant chip:
   a 1px hairline box with a 10px radius stretched across the container, three
   small buttons floating in the middle of it. Every rule here is scoped to li. */
.s3-cat-pager{ padding-block: clamp(28px, 4vw, 46px) 0 }
.s3-cat-pager .woocommerce-pagination ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.s3-cat-pager li .page-numbers{
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-cat-pager li a.page-numbers:hover{ border-color: var(--hairline-2); color: var(--text) }
.s3-cat-pager li .page-numbers.current{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 1080px){
  .s3-cat-wall.s3-mk-grid,
  .s3-cat-wall.s3-mk-grid[data-cols='2']{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
}

@media (max-width: 900px){
  .s3-cat-filterbtn{ display: inline-flex }
  .s3-cat-filters-top{ display: flex }

  .s3-cat-controls{
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    width: min(360px, 88vw);
    overflow-y: auto;
    background: var(--surface-1);
    border-right: 1px solid var(--hairline);
    transform: translateX(-102%);
    transition: transform var(--t-base) var(--ease);
  }
  .s3-cat-controls.is-open{ transform: none }
  .s3-cat-filters{
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 20px;
    border: 0;
    max-width: none;
  }
  /* The row lays the search group out with `flex:1 1 220px`. Once the drawer
     turns the container into a column that basis becomes a *height*, and the
     group grew to fill the panel — leaving a 260px hole between SEARCH and
     CATEGORY. It sizes to its content down here. */
  .s3-cat-fgroup--search{ flex: 0 0 auto; max-width: none }
  .s3-price-slider{ width: 100% }
  .s3-cat-prices input{ width: 100% }
  .s3-cat-factions{ margin-left: 0 }
  .s3-cat-factions .s3-btn-primary{ flex: 1; justify-content: center }
  body.s3-filter-open{ overflow: hidden }

  /* ---- thumb sizing ----
     Every control in the drawer and the toolbar is tapped, so each gets a 44px
     box, and every field is pinned to 16px: under that, iOS re-scales the whole
     viewport the moment the field takes focus. */
  .s3-cat-search,
  .s3-cat-prices input,
  .s3-cat-sort select{ font-size: 16px; min-height: 44px }
  .s3-cat-close{ width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center }
  .s3-cat-filterbtn,
  .s3-cat-namesbtn{ min-height: 44px }
  .s3-cat-check{ min-height: 44px }
  .s3-cat-fmt span{ min-height: 44px }
  .s3-cat-factions .s3-btn{ min-height: 44px }
  .s3-cat-pager li .page-numbers{ min-width: 44px; height: 44px }

  /* The range track keeps its 2px rule; only the grab area grows. */
  .s3-price-slider,
  .s3-price-slider input[type=range]{ height: 44px }
  .s3-price-track{ top: 21px }
  .s3-price-slider input[type=range]::-webkit-slider-thumb{ width: 20px; height: 20px }
  .s3-price-slider input[type=range]::-moz-range-thumb{ width: 20px; height: 20px }
}

@media (max-width: 560px){
  .s3-cat-wall.s3-mk-grid,
  .s3-cat-wall.s3-mk-grid[data-cols='2']{ grid-template-columns: 1fr !important }
  .s3-cat-toolbar__right{ width: 100%; justify-content: space-between }
  .s3-cat-density{ display: none }
}

/* ------------------------------------------------------------- a11y ------- */
/* No hover to reveal with, and no motion to reveal with: pin the metadata. */

@media (hover: none){
  .s3-cat-wall .s3-cat-card__meta{ opacity: 1; transform: none; filter: none }
}
@media (prefers-reduced-motion: reduce){
  .s3-cat-wall .s3-cat-card__meta{ opacity: 1; transform: none; filter: none }
  .s3-cat-card:hover{ filter: none }
}