/* Cyber City · the category page (template-parts/product-catalog.php, assets/js/catalog.js).
   Loaded on a product category only, after pages.css. Built from the system's components; what is written here is
   the layout of the catalogue and the few parts the system does not have yet.
   Same rules as pages.css: every colour, space, size, radius, duration, layer and font is a token.

   The filters are a column beside the products at 1181 and up. Below that they are a sheet that comes up from the
   bottom, opened from a bar that stays with the visitor. The column takes any number of filters: groups fold, a
   long list of options folds, and the column scrolls on its own. */

.ecc-cat { --_top: 0; --_rail: calc(var(--ecc-s-9) * 3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-gap); margin-top: var(--ecc-gap); }

/* ---- head: the name, two plain lines, the sub-categories -------------------------------------------------- */
.ecc-cat__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-s-4) var(--ecc-s-6); }
/* how many products, in the dot-matrix font (the count line of the tools says the same to a screen reader) */
.ecc-cat__led { position: absolute; top: var(--ecc-s-5); right: var(--ecc-s-5); display: grid; justify-items: end; gap: var(--ecc-s-1); margin: 0; color: var(--ecc-ink-2); }
.ecc-cat__led .ecc-dot { color: var(--ecc-ink); font-size: var(--ecc-t-display); }
.ecc-cat__headtext { padding-right: calc(var(--ecc-s-9) + var(--ecc-s-5)); }
@media (max-width: 760px) { .ecc-cat__led { top: var(--ecc-s-4); right: var(--ecc-s-4); } .ecc-cat__led .ecc-dot { font-size: var(--ecc-t-h1); } .ecc-cat__headtext { padding-right: var(--ecc-s-8); } }
.ecc-cat__intro { max-width: 36em; margin-top: var(--ecc-s-3); }
.ecc-cat__head .ecc-arc__chips { margin: 0; }

/* ---- small shared parts ----------------------------------------------------------------------------------- */
.ecc-cat__badge { display: inline-grid; place-items: center; min-width: calc(var(--ecc-s-4) + var(--ecc-s-1)); height: calc(var(--ecc-s-4) + var(--ecc-s-1)); padding: 0 var(--ecc-s-1); border-radius: var(--ecc-r-voxel); background: var(--ecc-lime); color: var(--ecc-on-lime); font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); font-weight: var(--ecc-fw-strong); line-height: 1; }
.ecc-cat__n { flex: none; margin-left: var(--ecc-s-1); color: var(--ecc-ink-2); font-style: normal; text-transform: none; }
.ecc-chip[aria-pressed="true"] .ecc-cat__n { color: inherit; opacity: .75; }
[data-ecc-cat-js] { display: none; }

/* ---- the tools above the products: how many, the order, grid or list -------------------------------------- */
.ecc-cat__tools { display: flex; align-items: center; gap: var(--ecc-s-3); min-height: calc(var(--ecc-hit) + var(--ecc-s-4)); padding: var(--ecc-s-2) var(--ecc-s-4); border-radius: var(--ecc-r); background: var(--ecc-surface); box-shadow: var(--ecc-elev-module); }
.ecc-cat__count { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ecc-ink-2); }
.ecc-js .ecc-cat--on .ecc-cat__sort { display: block; flex: 0 1 auto; min-width: 0; }
.ecc-cat__sort .ecc-select { display: block; }
.ecc-cat__sort .ecc-input { min-height: var(--ecc-hit); padding-block: var(--ecc-s-2); font-size: var(--ecc-t-small); text-overflow: ellipsis; }
.ecc-js .ecc-cat--on .ecc-cat__view { display: flex; flex: none; border: 1px solid var(--ecc-control-line); border-radius: var(--ecc-r-sm); }
.ecc-cat__view .ecc-iconbtn { color: var(--ecc-ink-2); }
.ecc-cat__view .ecc-iconbtn[aria-pressed="true"] { background: var(--ecc-selected-bg); color: var(--ecc-selected-fg); }

.ecc-js .ecc-cat--on .ecc-cat__picks { display: flex; }
.ecc-cat__picks { align-items: center; gap: var(--ecc-s-3); min-width: 0; margin-top: var(--ecc-gap); padding-inline: var(--ecc-s-2); }
.ecc-js .ecc-cat--on .ecc-cat__picks[hidden], .ecc-cat__active[hidden], .ecc-cat__grid[hidden], .ecc-cat__list[hidden], .ecc-cat__more[hidden], .ecc-cat__pager[hidden], .ecc-cat__tray[hidden], .ecc-cat__ask[hidden], .ecc-cat__scrim[hidden] { display: none; }
.ecc-cat__pickslabel { flex: none; margin: 0; color: var(--ecc-ink-2); }
.ecc-cat__pickslist { margin: 0; padding: 0; list-style: none; }
.ecc-cat__active { margin: var(--ecc-gap) 0 0; padding: 0; list-style: none; }
.ecc-cat__grid { margin-top: var(--ecc-gap); }
.ecc-cat__missing { max-width: 44em; margin-top: var(--ecc-s-4); padding: var(--ecc-s-3) var(--ecc-s-4); border-left: 2px solid var(--ecc-line-strong); }
.ecc-cat__more { display: grid; justify-items: center; gap: var(--ecc-s-3); padding: var(--ecc-s-5) 0 var(--ecc-s-2); color: var(--ecc-ink-2); }
.ecc-cat__emptyitem { grid-column: 1 / -1; list-style: none; }
.ecc-cat__empty .ecc-lead { margin-top: var(--ecc-s-2); }
.ecc-cat__emptyactions { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); margin-top: var(--ecc-s-5); }

/* the products come in quietly after a choice: once, short, and not at all when motion is paused */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-ecc-motion="paused"]) .ecc-cat__grid.is-in, html:not([data-ecc-motion="paused"]) .ecc-cat__list.is-in { animation: ecc-cat-in var(--ecc-d-base) var(--ecc-ease-out); }
}
@keyframes ecc-cat-in { from { opacity: .35; } to { opacity: 1; } }

/* the card on a category page: the name on two lines, one short line of numbers */
.ecc-cat .ecc-card__name { height: auto; min-height: 2.4em; align-items: flex-start; }
.ecc-card__specs { display: flex; flex-wrap: wrap; gap: var(--ecc-s-1) var(--ecc-s-3); margin: var(--ecc-s-1) 0 0; padding: var(--ecc-s-2) 0 0; border-top: 1px solid var(--ecc-line); list-style: none; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: 1.3; }
.ecc-card__specs b, .ecc-cat__table td b { color: var(--ecc-ink); font-weight: var(--ecc-fw-strong); font-variant-numeric: tabular-nums; }

/* "Still not sure?": one dark tile among the products */
.ecc-cat__tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ecc-s-3); height: 100%; padding: var(--ecc-s-5); }
.ecc-cat__tile .ecc-module__label { margin: 0; }
.ecc-cat__tiletitle { margin-top: auto; }

/* ---- the filters ------------------------------------------------------------------------------------------ */
.ecc-cat__bar { display: none; }
.ecc-cat__rail { display: flex; flex-direction: column; min-width: 0; }
.ecc-cat__railhead { display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); padding: var(--ecc-s-3) var(--ecc-s-5) 0; }
.ecc-cat__railhead .ecc-module__label { margin: 0 auto 0 0; }
.ecc-cat__close { display: none; }
.ecc-cat__groups { padding: var(--ecc-s-2) var(--ecc-s-5) var(--ecc-s-4); }
.ecc-cat__group > summary .ecc-cat__badge { margin-left: var(--ecc-s-2); }
.ecc-cat__groupbody { max-width: none; padding-bottom: var(--ecc-s-3); color: var(--ecc-ink); }
.ecc-cat__groupbody > .ecc-help { margin-bottom: var(--ecc-s-1); }
.ecc-cat__opt > span { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: var(--ecc-s-2); min-width: 0; }
.ecc-cat__opt > span > span { min-width: 0; overflow-wrap: anywhere; }
.ecc-cat__opt.is-off > span { color: var(--ecc-disabled-fg); }
.ecc-cat__fold { margin-top: var(--ecc-s-1); padding-inline: 0; }
.ecc-cat__askbox { display: grid; justify-items: start; gap: var(--ecc-s-2); margin: 0 var(--ecc-s-2) var(--ecc-s-2); padding: var(--ecc-s-4); border-radius: var(--ecc-r-sm); background: var(--ecc-surface-2); }
.ecc-cat__railfoot { display: none; }
.ecc-cat__main { min-width: 0; }
.ecc-cat__qs:empty { display: none; }

/* 1181 and up: the column beside the products. It stays in view and scrolls on its own, so thirty filters fit. */
@media (min-width: 1181px) {
  .ecc-js .ecc-cat--on { grid-template-columns: var(--_rail) minmax(0, 1fr); align-items: start; }
  html:not(.ecc-js) .ecc-cat__rail, .ecc-cat:not(.ecc-cat--on) .ecc-cat__rail { display: none; }
  .ecc-cat__rail { position: sticky; top: var(--ecc-gap); max-height: calc(100dvh - var(--ecc-gap) * 2); overflow-y: auto; overscroll-behavior: contain; }
  .ecc-js .ecc-cat--on .ecc-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ecc-cat__rail { min-height: calc(var(--ecc-s-9) * 4); } /* its place is kept before the script fills it */
}
@media (min-width: 96em) {
  .ecc-js .ecc-cat--on .ecc-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 1180 and below: a bar that stays with the visitor ("Filters" and the first questions), and the column as a sheet. */
@media (max-width: 1180px) {
  .ecc-js .ecc-cat--on .ecc-cat__bar { position: sticky; top: var(--_top); z-index: var(--ecc-z-raised); display: flex; align-items: stretch; gap: var(--ecc-s-2); min-height: calc(var(--ecc-hit) + var(--ecc-s-3) + var(--ecc-s-4) + 2px); /* a question, its two hairlines, the bar's padding */ margin-inline: calc(var(--ecc-gap) * -1); padding: var(--ecc-s-2) var(--ecc-gap); background: var(--ecc-canvas); }
  .ecc-cat__open { flex: none; align-self: center; }
  .ecc-cat__qs { display: flex; flex: 1; gap: var(--ecc-s-2); min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ecc-cat__qs::-webkit-scrollbar { display: none; }
  .ecc-cat__rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ecc-z-modal); max-height: 88dvh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--ecc-elev-overlay); translate: 0 104%; visibility: hidden; }
  .ecc-cat__rail.is-open { translate: 0 0; visibility: visible; }
  .ecc-cat__close { display: grid; }
  .ecc-cat__groups { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  .ecc-cat__askbox { display: none; }
  .ecc-cat__railfoot { display: block; padding: var(--ecc-s-3) var(--ecc-s-5) max(var(--ecc-s-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--ecc-line-strong); }
  .ecc-cat__tools { padding-inline: var(--ecc-s-3); }
}
@media (max-width: 1180px) and (min-width: 761px) {
  .ecc-cat__rail { left: auto; top: 0; width: min(calc(var(--ecc-s-9) * 4 + var(--ecc-s-6)), 100%); max-height: none; border-radius: 0; translate: 104% 0; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  .ecc-cat__bar { transition: top var(--ecc-d-base) var(--ecc-ease-out); }
  .ecc-cat__rail { transition: translate var(--ecc-d-base) var(--ecc-ease-out), visibility 0s linear var(--ecc-d-base); }
  .ecc-cat__rail.is-open { transition-delay: 0s; }
}

/* a question of the bar: what is asked, and the answer so far */
.ecc-cat__q { flex: none; display: grid; align-content: center; gap: var(--ecc-s-1); min-width: 0; max-width: 62vw; min-height: calc(var(--ecc-hit) + var(--ecc-s-3)); padding: var(--ecc-s-2) var(--ecc-s-3); border: 1px solid var(--ecc-control-line); border-radius: var(--ecc-r-sm); background: var(--ecc-surface); color: var(--ecc-ink); text-align: left; cursor: pointer; transition: border-color var(--ecc-d-fast) var(--ecc-ease-out), background-color var(--ecc-d-fast) var(--ecc-ease-out); }
.ecc-cat__qq { color: var(--ecc-ink-2); white-space: nowrap; }
.ecc-cat__qa { display: flex; align-items: center; gap: var(--ecc-s-2); min-width: 0; overflow: hidden; font-size: var(--ecc-t-body); font-weight: var(--ecc-fw-strong); line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.ecc-cat__q:not(.is-set) .ecc-cat__qa { color: var(--ecc-ink-2); font-weight: var(--ecc-fw-medium); }
.ecc-cat__q.is-set .ecc-cat__qa::before { content: ""; flex: none; width: var(--ecc-s-2); height: var(--ecc-s-2); border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); }
.ecc-cat__q[aria-expanded="true"] { border-color: var(--ecc-ink); background: var(--ecc-wash); }
@media (prefers-reduced-motion: reduce) { .ecc-cat__q { transition: none; } }

/* one question, opened from the bar: a small sheet, one decision at a time */
.ecc-cat__ask { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ecc-z-modal); max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--ecc-s-5) var(--ecc-s-5) max(var(--ecc-s-5), env(safe-area-inset-bottom)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--ecc-elev-overlay); }
.ecc-cat__askopts { margin: var(--ecc-s-3) 0 0; padding: 0; list-style: none; }
.ecc-cat__askfoot { margin-top: var(--ecc-s-5); }
@media (min-width: 761px) { .ecc-cat__ask { left: auto; right: var(--ecc-s-4); bottom: var(--ecc-s-4); width: min(calc(var(--ecc-s-9) * 5), 100%); border-radius: var(--ecc-r); } }

/* ---- the list: a row per product, a column per number ----------------------------------------------------- */
.ecc-cat__list { margin-top: var(--ecc-gap); padding: var(--ecc-s-2) var(--ecc-s-4) var(--ecc-s-4); overflow: hidden; }
.ecc-cat__table { width: 100%; border-collapse: collapse; }
.ecc-cat__table th, .ecc-cat__table td { padding: var(--ecc-s-3); text-align: left; vertical-align: middle; }
.ecc-cat__table tbody tr { border-top: 1px solid var(--ecc-line); }
.ecc-cat__table tbody tr.is-picked { background: var(--ecc-wash); }
.ecc-cat__table td { font-size: var(--ecc-t-body); white-space: nowrap; }
.ecc-cat__table td.is-na { color: var(--ecc-ink-2); font-size: var(--ecc-t-small); }
.ecc-cat__table .ecc-cat__tdcmp { width: var(--ecc-hit); padding-right: 0; }
.ecc-cat__table .ecc-cat__tdprod { width: 44%; white-space: normal; }
.ecc-cat__cmp { min-height: var(--ecc-hit); }
.ecc-cat__cmp input { margin: 0; }
.ecc-cat__th { display: inline-flex; align-items: center; gap: var(--ecc-s-1); min-height: var(--ecc-hit); padding: 0; border: 0; background: none; color: var(--ecc-ink-2); cursor: pointer; }
.ecc-cat__dir { display: inline-grid; width: var(--ecc-s-4); height: var(--ecc-s-4); }
.ecc-cat__dir.is-up { rotate: 180deg; }
th[aria-sort="ascending"] .ecc-cat__th, th[aria-sort="descending"] .ecc-cat__th { color: var(--ecc-ink); }
.ecc-cat__row { display: flex; align-items: center; gap: var(--ecc-s-4); min-width: 0; color: inherit; text-decoration: none; }
.ecc-cat__rowtext { display: grid; gap: var(--ecc-s-1); min-width: 0; }
.ecc-cat__rowbrand { color: var(--ecc-ink-2); }
.ecc-cat__rowname { font-weight: var(--ecc-fw-strong); line-height: 1.25; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .ecc-cat__row:hover .ecc-cat__rowname { text-decoration: underline; text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; text-underline-offset: 2px; } }
.ecc-cat__thumb { flex: none; display: block; width: calc(var(--ecc-s-8) + var(--ecc-s-2)); aspect-ratio: 1; }
.ecc-cat__thumb img { position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.04); } /* near-white melts into the stage (pages.css, product page) */
.ecc-cat__thumb.is-scene img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; mix-blend-mode: normal; filter: none; } /* a studio scene fills its card (theme 0.12.0) */
.ecc-cat__thumb--sm { width: var(--ecc-s-7); }
.ecc-cat__thumb--lg { width: 100%; max-width: calc(var(--ecc-s-9) * 2); margin-bottom: var(--ecc-s-3); }
@media (max-width: 1180px) {
  .ecc-cat__list { padding: 0 var(--ecc-s-3) var(--ecc-s-3); }
  .ecc-cat__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ecc-cat__table tbody tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-s-2) var(--ecc-s-3); padding: var(--ecc-s-3) 0 var(--ecc-s-4); }
  .ecc-cat__table tbody td { padding: 0; white-space: normal; }
  .ecc-cat__table .ecc-cat__tdprod { grid-column: 1 / -1; width: auto; padding-right: var(--ecc-hit); }
  .ecc-cat__table .ecc-cat__tdcmp { position: absolute; top: var(--ecc-s-2); right: 0; width: auto; }
  .ecc-cat__table tbody td[data-label] { display: grid; gap: var(--ecc-s-1); font-size: var(--ecc-t-small); }
  .ecc-cat__table tbody td[data-label]::before { content: attr(data-label); color: var(--ecc-ink-2); font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); line-height: 1.2; text-transform: uppercase; }
  .ecc-cat__thumb { width: var(--ecc-s-8); }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .ecc-cat__table tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- compare: a tray, then up to three side by side -------------------------------------------------------- */
.ecc-cat__tray { position: fixed; left: 50%; bottom: max(var(--ecc-s-4), env(safe-area-inset-bottom)); z-index: var(--ecc-z-sticky); display: flex; align-items: center; gap: var(--ecc-s-3); max-width: calc(100vw - var(--ecc-s-5)); padding: var(--ecc-s-2) var(--ecc-s-3) var(--ecc-s-2) var(--ecc-s-4); translate: -50% 0; box-shadow: var(--ecc-elev-overlay); }
.ecc-cat__traylabel { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; white-space: nowrap; }
.ecc-cat__trayitems { display: flex; gap: var(--ecc-s-1); margin: 0; padding: 0; list-style: none; }
.ecc-cat__compare { width: min(calc(var(--ecc-s-9) * 10), calc(100vw - var(--ecc-s-5))); max-height: calc(100dvh - var(--ecc-s-6)); margin: auto; padding: var(--ecc-s-5); border: 0; border-radius: var(--ecc-r); background: var(--ecc-surface); color: var(--ecc-ink); box-shadow: var(--ecc-elev-overlay); }
.ecc-cat__compare::backdrop { background: var(--ecc-scrim); }
.ecc-cat__comparehead { display: flex; align-items: center; justify-content: space-between; gap: var(--ecc-s-3); margin-bottom: var(--ecc-s-3); }
.ecc-cat__comparebody { overflow-x: auto; }
.ecc-cat__comparebody .ecc-help { margin-top: var(--ecc-s-4); }
.ecc-cat__table--cmp th[scope="col"] { min-width: calc(var(--ecc-s-9) * 2); vertical-align: bottom; font-weight: var(--ecc-fw-strong); }
.ecc-cat__table--cmp th[scope="row"] { color: var(--ecc-ink-2); white-space: nowrap; }
.ecc-cat__table--cmp td { white-space: normal; }
.ecc-cat__table--cmp tbody tr { display: table-row; }
.ecc-cat__table--cmp tbody td, .ecc-cat__table--cmp tbody th { padding: var(--ecc-s-3); }
.ecc-cat__cmpname { display: block; margin-top: var(--ecc-s-1); }
@media (max-width: 760px) { .ecc-cat__traylabel span { display: none; } }
/* a phone: the quick picks are one row that slides sideways, under their label */
@media (max-width: 760px) {
  .ecc-cat__picks { flex-direction: column; align-items: flex-start; gap: var(--ecc-s-2); min-height: calc(var(--ecc-hit) + var(--ecc-s-5)); padding-inline: 0; }
  .ecc-cat__pickslabel { padding-inline: var(--ecc-s-2); }
  .ecc-cat__pickslist { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ecc-cat__pickslist::-webkit-scrollbar { display: none; }
}

/* ---- under the products ----------------------------------------------------------------------------------- */
.ecc-cat__below { margin-top: var(--ecc-s-7); }
.ecc-cat__belowlist { max-width: 46em; margin-top: var(--ecc-s-5); }

@media print { .ecc-cat__bar, .ecc-cat__rail, .ecc-cat__tools, .ecc-cat__picks, .ecc-cat__more, .ecc-cat__tray, .ecc-cat__ask { display: none !important; } }