/* Product category archive (/product_category/… ) — page-local composition.

   What this page family adds: the row of subcategory tabs that stands between the
   first screen and the products, and the "Load more" control that closes a tab
   holding more than three rows. The structure is the website owner's instruction
   (after a competitor catalogue): the row above the grid, four products to a row,
   three rows at a time, Load more under it, everything on this one page.

   The row is the built-in `tabs` behaviour (assets/wp-behaviors): its buttons are
   the tab controls and the .cat-panel blocks are the panels, which is the contract
   [data-tab-list] / button[data-tab] / [data-tab-panel] describes. Under the products
   stands the FAQ band: the built-in `accordion` behaviour over this category's own
   rows, with the site record's rows standing in for a category that carries none. The
   cards, the grid, the buttons, the section head and the hero are the shared
   vocabulary in style.css; colours and radii come from tokens.css. Loaded on this
   taxonomy only (functions.php). */

/* ---------- 1 · The tab row ------------------------------------------------
   The row sits close under the first screen, centred, in the same language as the
   index rail the application pages carry (single-application.php /.app-jump): a
   light chip with a hairline and a soft shadow, its words in the deep accent, and
   the flat accent with white type as the state a person is in. Two differences from
   that rail, because this row is a control rather than a list of stops: the chips
   are buttons the behaviour drives, and the open one holds the flat accent instead
   of returning to the chip when the pointer leaves it — that is the answer to
   "which of the three am I reading", and it is keyed to aria-selected, the mark the
   runtime keeps, not to a class of this file's own. */
.cat-list{padding-top:clamp(26px,3vw,40px)}
.cat-switch{margin:0 0 clamp(34px,4vw,52px)}
/* The row keeps its own distance from the cards below it: the chips are a control,
   and the products must not read as their bottom edge (website owner's note). */
.cat-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-bottom:clamp(24px,2.8vw,36px)}
.cat-tabs [data-tab]{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r-btn);
  background:var(--accent-t);color:var(--accent-d);font-family:inherit;font-size:13.5px;
  font-weight:600;line-height:1.3;white-space:nowrap;cursor:pointer;
  box-shadow:0 10px 18px -16px rgba(31,35,40,.5);
  transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,
  color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.cat-tabs [data-tab]:not([aria-selected="true"]):hover{border-color:var(--accent);
  background:var(--accent);color:#fff}
.cat-tabs [data-tab][aria-selected="true"]{border-color:var(--accent);background:var(--accent);color:#fff}

/* The same row on a phone: it scrolls sideways instead of wrapping into a block that
   pushes the products down the page, and starts at its first tab. */
@media (max-width:760px){
  .cat-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    margin-inline:calc(-1 * var(--pad));padding:2px var(--pad) 6px}
}

/* ---------- 2 · The panels -------------------------------------------------
   One panel per tab, all of them in the document. The behaviour hides the panels it
   is not showing with the hidden attribute, which is honoured explicitly here: an
   author rule sets display on the cards inside them, and that would otherwise beat
   the browser's own [hidden] rule. With JavaScript off nothing is hidden, so every
   panel stands open. */
[data-tab-panel][hidden]{display:none}
.cat-panel:focus-visible{outline-offset:6px}

/* The three rows a tab opens with; the rest of its cards are in the document but
   waiting (.is-off), which is what the "Load more" control reveals. */
[data-cat-group] .is-off{display:none}

/* ---------- 3 · Load more --------------------------------------------------
   Centred under the grid, and the quiet button style: it is a way further into the
   range, not one of the page's two actions, which stand in the first screen. The
   line under it reports how much of the tab is shown. */
.cat-more{margin-top:clamp(26px,3vw,40px);text-align:center}
.cat-more .btn-2{min-width:190px}
.cat-more .note{margin:12px 0 0}

/* ---------- 4 · (removed) ------------------------------------------------------
   The Applications band that stood on this page was removed at the owner's
   request; its only rule was the space its own heading kept. Cases are listed
   on the Applications archive alone. */

/* ---------- 5 · The FAQ ------------------------------------------------------
   The block itself moved to style.css §12: the FAQ page under Resources renders
   the same rows with the same markup, so one stylesheet owns that shape. What is
   left to decide on this page is the space its band keeps, which the shared
   section rhythm already states, and the line under it.
   The band's ground is the shared .section--grey, worn in the template: the products
   above it and the FAQ below it are the page's two modules, and they do not share one
   background (owner's instruction). It is the site's secondary band, the one the
   pages already close on (oem, factory, quality), so it needs no rule of its own
   here. */
/* The line under the block: the way from this category's own questions to the page
   that holds the general ones (owner's instruction). It is not another row of the
   block, so it keeps its own distance from it, in the site's small link type. */
.cat-faq__more{margin:clamp(18px,2vw,26px) 0 0}