/* SourcingPromo — the product catalogue: the product archive, one category page and the product
   detail. Tokens and shared classes come from tokens.css and style.css; only "cat-" classes live
   here. */

/* The tabs behaviour hides gallery panels with [hidden], while the panel rules below set a
   display of their own: this keeps the attribute winning. */
.cat-gallery__panel[hidden]{display:none !important}

/* ---------- page heads ---------- */
.cat-hero{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.cat-hero h1{max-width:26ch}
.cat-hero .lede{max-width:62ch}
.cat-hero__bar{margin-top:clamp(1.25rem,3vw,2rem)}
.cat-cat__make{margin:0;max-width:62ch;color:var(--ink-2)}
.cat-arc__intro p{margin:0}
.cat-arc__intro p+p{margin-top:.6em}
.cat-section-title{font-size:var(--step-2)}
.cat-price-note{margin-bottom:clamp(1rem,2.5vw,1.6rem)}

/* ---------- breadcrumbs ---------- */
.cat-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;list-style:none;margin:0 0 1rem;padding:0}
.cat-crumbs li{display:inline-flex;align-items:center;gap:.4rem}
.cat-crumbs li+li::before{content:"/";color:var(--line-strong)}
.cat-crumbs [aria-current="page"]{color:var(--ink-2)}

/* ---------- catalogue grid ----------
   One column on a phone, two on a tablet, three on a desktop. Written out rather than left to
   auto-fit, so the three-up rhythm the listing is built around holds at every width. */
.cat-grid{margin:0}
.cat-grid>.card{min-width:0}
.cat-grid--products{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.cat-grid--products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cat-grid--products{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- product card (parts/product-card.php) ----------
   One fixed order, so two cards are compared by scanning down rather than across: a square main
   image, the English name over at most two lines, the SKU, the one or two specifications the record
   holds plus its MOQ, the reference price with the quantity it applies at, then the two actions.
   The price block is pushed to the foot of the body, so the prices of a row of cards line up
   however long the names are. */
.cat-card{position:relative}
/* A white frame rather than the site's sand: promotional products are photographed on white, so
   the photo sits in the frame instead of on a band of colour. */
.cat-card .card__media{aspect-ratio:1/1;background:var(--paper)}
/* Contain, not cover: a square frame every card shares, with no product cropped to fit it. */
.cat-card__media .cat-card__img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .3s ease;
}
@media (hover:hover){
  .cat-card:hover .cat-card__img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .cat-card__media .cat-card__img{transition:none}
  .cat-card:hover .cat-card__img{transform:none}
}
/* A quieter placeholder than the site-wide striped block: five cards in a row of seven can be
   without an image, and the stripes would read as the loudest thing in the catalogue. */
.cat-card .cat-card__placeholder{
  width:100%;height:100%;background:var(--sand);color:var(--ink-3);
  font-size:.6875rem;letter-spacing:.09em;
}

.cat-card__body{gap:.3rem}
.cat-card__title{
  font-size:1.0625rem;line-height:1.32;letter-spacing:-.01em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:2.64em;/* two lines reserved, so a one-line name keeps the row aligned */
}
.cat-card__sku{
  margin:0;font-size:.75rem;line-height:1.3;letter-spacing:.02em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}

/* The specification block reads as a small comparison sheet, one row per value. */
.cat-card__facts{
  margin:.5rem 0 0;padding-top:.55rem;border-top:1px solid var(--line);
  display:grid;gap:.2rem;font-size:var(--step--1);line-height:1.4;
}
.cat-card__fact{display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:.5rem;align-items:baseline}
.cat-card__fact dt{color:var(--ink-3)}
.cat-card__fact dd{
  margin:0;color:var(--ink);font-weight:540;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.cat-card__fact--moq dd{font-weight:600}

.cat-card__price{margin-top:auto;padding-top:.8rem;display:grid;gap:.15rem}
.cat-card__amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem;margin:0}
.cat-card__from{font-size:var(--step--1);font-weight:500;color:var(--ink-3)}
.cat-card__amount .price{font-size:1.3125rem;letter-spacing:-.02em}
.cat-card__unit{font-size:var(--step--1);color:var(--ink-3)}
.cat-card__amount.price-state--ask{font-size:.9375rem;line-height:1.3}
.cat-card__basis{margin:0;font-size:var(--step--1);line-height:1.35}

/* Two actions of equal weight in the row; they wrap onto two lines when a card is narrow (the
   four-up grids on the decoration and occasion pages). */
.cat-card__actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem}
.cat-card__actions>*{flex:1 1 7.5rem;min-height:42px;justify-content:center;margin-top:0}
.cat-card__actions .btn{font-size:.875rem;padding:.6rem .8rem}
/* The RFQ trigger keeps the shared script's hooks (.card-rfq, .card-rfq__text, is-added) but reads
   as the card's primary action instead of the quiet pill it is elsewhere. */
.cat-card__actions .card-rfq{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  background:var(--brand);border:1px solid var(--brand);border-radius:var(--radius-pill);
  color:#fff;font-weight:600;line-height:1.2;text-decoration:none;
}
.cat-card__actions .card-rfq:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.cat-card__actions .card-rfq__mark{color:inherit;opacity:.9}
.cat-card__actions .card-rfq.is-added{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark)}
.cat-card__actions .card-rfq.is-added .card-rfq__mark{color:var(--brand-dark);opacity:1}

.cat-card--locked .card__body{justify-content:center}

/* ---------- empty state ---------- */
.cat-empty{max-width:46rem;margin-inline:auto}
.cat-empty__actions{margin:.9rem 0 0;justify-content:center}

/* ---------- the closing call to action ---------- */
.cat-cta-band__title{max-width:32ch}
.cat-cta-band .note{max-width:58ch}

/* ---------- pagination (sp_catfilters_pagination in parts/filters.php) ---------- */
.cat-pagination{margin-top:clamp(1.5rem,3vw,2.5rem)}
.cat-pagination__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.cat-pagination__link,
.cat-pagination__dots{
  display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;padding:.45rem .7rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.9375rem;font-variant-numeric:tabular-nums;text-decoration:none;
}
.cat-pagination__link:hover{border-color:var(--ink);color:var(--ink)}
.cat-pagination__link[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-pagination__link--step{padding-inline:.85rem}
.cat-pagination__dots{border-color:transparent}

/* ---------- product detail: gallery (tabs behaviour: thumbnails drive the panels) ---------- */
.cat-single__top{align-items:start}
.cat-gallery{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.cat-gallery__stage{order:1;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.cat-gallery__panel{margin:0}
.cat-gallery__img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.cat-gallery__shots{order:2;display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:thin}
.cat-gallery__thumb{
  flex:0 0 auto;width:76px;padding:0;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);
}
.cat-gallery__thumb img{width:100%;height:76px;object-fit:cover}
.cat-gallery__thumb[aria-selected="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.cat-gallery__thumb:hover{border-color:var(--line-strong)}
.cat-gallery__placeholder{width:100%;aspect-ratio:1/1;min-height:16rem;border-radius:var(--radius-lg)}

/* ---------- product detail: summary ---------- */
.cat-summary{min-width:0}
.cat-summary__inner{display:flex;flex-direction:column;gap:.9rem}
.cat-summary__title{font-size:var(--step-3)}
.cat-summary__inner .lede{max-width:56ch}
@media (min-width:860px){
  .cat-summary__inner{position:sticky;top:5.5rem}
}

.cat-price{
  display:flex;flex-direction:column;gap:.7rem;
  padding:1rem 1.1rem 1.1rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.cat-price__from{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;margin:0}
.cat-price__from .price{font-size:var(--step-2)}
.cat-tiers{font-size:.9375rem}
.cat-tiers th,.cat-tiers td{padding-block:.45rem}
.cat-price__notes{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.cat-price__notes li{position:relative;padding-left:.85rem}
.cat-price__notes li::before{content:"·";position:absolute;left:0;color:var(--line-strong)}

.cat-buy{margin:0}
.cat-buy__note{display:block;margin-top:.15rem;font-weight:400}
.cat-landed{margin:0}
.cat-cta{margin:.15rem 0 0;gap:.6rem}
.cat-file{margin:0}

/* links inside a facts value (decoration methods) */
.cat-inline-links{display:flex;flex-wrap:wrap;gap:.3rem .7rem}
.cat-inline-links a{font-weight:540}

/* ---------- plain lists, chips, misc blocks ---------- */
.cat-list{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;color:var(--ink-2)}
.cat-list li::marker{color:var(--brand)}
.cat-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cat-chips a{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper);font-size:.9375rem;text-decoration:none;
}
.cat-chips a:hover{border-color:var(--ink);color:var(--ink)}
.cat-compliance{margin:0;max-width:70ch;padding-top:.85rem;border-top:1px solid var(--line)}

/* ---------- catalogue layout: results under the bar ----------
   The filter bar sits at the end of the page head, above this block, and the results below it keep
   all three grid columns at every width. One column on purpose: the bar replaced the sidebar. */
.catalog-layout{display:block}
.catalog-results{min-width:0}

/* ---------- the bar and the results read as one area ---------- */
/* The search box and the bar close the page head; the results start immediately under them. The two
   are one place to work in, so the gap is a breath rather than the break between two sections. */
.cat-hero{padding-block-end:clamp(.85rem,2vw,1.25rem)}
.catalog-main{padding-block-start:clamp(.5rem,1.2vw,.85rem)}

/* ---------- the results line: how many, and under which conditions ---------- */
.catalog-results__line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;
  margin-bottom:clamp(.75rem,2vw,1rem);padding-bottom:.6rem;border-bottom:1px solid var(--line);
}
.catalog-results__count{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.catalog-results__conditions{margin:0;font-size:var(--step--1);color:var(--ink-3);max-width:60ch}
.catalog-results__note{margin:0 0 clamp(.9rem,2vw,1.2rem);max-width:none}

/* The search box lives inside the bar (parts/filters.php prints it in .cat-bar__search), so the
   catalogue has one block to narrow the view with rather than a search form and a bar. */

/* ---------- standard conditions under a category ---------- */
.catalog-conditions{
  margin:0 0 clamp(1rem,2.5vw,1.5rem);padding:.75rem .9rem;
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);
}
.catalog-conditions__title{
  margin:0 0 .25rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.catalog-conditions__text{margin:0;font-size:var(--step--1);color:var(--ink-2);line-height:1.55;max-width:70ch}

/* ---------- related reading under a category ---------- */
.catalog-related__title{margin:0 0 .75rem;font-size:var(--step-1);letter-spacing:.01em}
.catalog-related__block+.catalog-related__block{margin-top:clamp(1.5rem,3vw,2.25rem)}

/* ---------- filter bar (parts/filters.php) ----------
   One row of facet buttons above the grid, each opening a panel of checkboxes. The built-in popover
   behaviour positions the panel with position:fixed and clamps it to the viewport itself, so nothing
   here may put a transform, filter or contain on an ancestor of .cat-bar__panel: that would make the
   ancestor the containing block and the panel would be clipped by it. */
/* The bar is the last block of the page head, so the stack's own gap spaces it and no margin of its
   own is needed. */
.cat-bar-wrap{margin:0}

.cat-bar{
  display:grid;gap:.7rem;
  padding:.85rem;background:var(--paper);
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}

/* Top row: what to search for on the left, the two buttons on the right. */
.cat-bar__top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cat-bar__search{display:flex;align-items:center;gap:.5rem;flex:1 1 18rem;min-width:0}
.cat-bar__search-label{font-size:var(--step--1);font-weight:600;color:var(--ink-2);white-space:nowrap}
.cat-bar__search-input{
  flex:1 1 10rem;min-width:0;font:inherit;font-size:.9375rem;color:var(--ink);
  padding:.45rem .65rem;background:var(--sand);
  border:1px solid var(--line-strong);border-radius:var(--radius);
}
.cat-bar__search-input::placeholder{color:var(--ink-3)}
.cat-bar__search-input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus);background:var(--paper)}

/* The facets: an even grid of field-like buttons, so eight conditions of different word lengths line
   up instead of forming a ragged line of pills whose columns shift as the chosen values change.
   Four columns hold the eight of the catalogue as two rows of four; a phone takes two. */
.cat-bar__facets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
@media (min-width:720px){
  .cat-bar__facets{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Only the trigger is a containing block: the panel is positioned by the popover behaviour with
   position:fixed, and a positioned ancestor would clip it. */
.cat-bar__facet{min-width:0}
.cat-bar__trigger{position:relative}

.cat-bar__trigger{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;
  padding:.45rem 1.75rem .45rem .65rem;font:inherit;line-height:1.2;text-align:left;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  cursor:pointer;
}
.cat-bar__trigger:hover{border-color:var(--line-strong);background:var(--sand)}
.cat-bar__trigger[aria-expanded="true"]{border-color:var(--ink);background:var(--sand)}
.cat-bar__trigger:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.cat-bar__facet-label{
  font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}
.cat-bar__facet-state{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.9375rem;font-weight:600;color:var(--ink);
}
.cat-bar__facet.is-on .cat-bar__trigger{background:var(--brand-tint);border-color:var(--brand)}
.cat-bar__facet.is-on .cat-bar__facet-label,
.cat-bar__facet.is-on .cat-bar__facet-state{color:var(--brand-dark)}
.cat-bar__caret{
  position:absolute;right:.75rem;top:50%;margin-top:-.2rem;
  width:.4rem;height:.4rem;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);pointer-events:none;
}

.cat-bar__panel{
  min-width:14rem;max-width:22rem;padding:.7rem .8rem;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
/* The behaviour opens and closes the panel with the hidden attribute, so a display of our own would
   otherwise beat it. */
.cat-bar__panel[hidden]{display:none !important}
/* The legend is the site's .sr-only utility, from style.css. A long list scrolls inside the panel
   rather than running off the bottom of the screen. */
.cat-bar__set{
  border:0;margin:0;padding:0;min-width:0;display:grid;gap:.05rem;
  max-height:min(58vh,20rem);overflow:auto;overscroll-behavior:contain;
}

/* The find box above a long list: typed, so a colour is not scrolled for. */
.cat-bar__find{margin:0 0 .55rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.cat-bar__find[hidden]{display:none}
.cat-bar__find-input{
  width:100%;font:inherit;font-size:.875rem;color:var(--ink);
  padding:.35rem .5rem;background:var(--sand);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
}
.cat-bar__find-input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus);background:var(--paper)}
.cat-bar__none{margin:.5rem 0 0;font-size:var(--step--1);color:var(--ink-3)}
.cat-bar__option{
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.28rem .4rem;margin-inline:-.4rem;border-radius:var(--radius-sm);
  font-size:.9375rem;color:var(--ink-2);cursor:pointer;
}
.cat-bar__option:hover{background:var(--sand-2);color:var(--ink)}
.cat-bar__check{flex:0 0 auto;margin:.2rem 0 0;accent-color:var(--brand)}
.cat-bar__option-label{min-width:0}
.cat-bar__option[hidden]{display:none}

/* A child condition sits under the campaign it belongs to: indented, its name a step quieter, with a
   hairline running down the left so the two levels read as one group rather than two lists. */
.cat-bar__option--sub{padding-inline-start:calc(.4rem + var(--cf-depth,1) * .9rem);box-shadow:inset 1px 0 0 var(--line)}
.cat-bar__option--sub .cat-bar__option-label{color:var(--ink-2)}
.cat-bar__option--sub .cat-bar__check{accent-color:var(--ink-3)}
.cat-bar__help{
  margin:.6rem 0 0;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:var(--step--1);color:var(--ink-3);line-height:1.45;
}

.cat-bar__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:auto}
.cat-bar__submit{flex:0 0 auto}
.cat-bar__clear{
  font-size:var(--step--1);font-weight:600;color:var(--brand-dark);
  text-decoration:none;white-space:nowrap;
}
.cat-bar__clear:hover{text-decoration:underline}

/* The chosen values: each chip is a link that removes only itself. */
.cat-bar__chosen{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .85rem;margin-top:.6rem}
.cat-bar__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cat-bar__chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.22rem .6rem;border:1px solid transparent;border-radius:var(--radius-pill);
  background:var(--brand-tint);color:var(--brand-dark);
  font-size:var(--step--1);font-weight:600;text-decoration:none;
}
.cat-bar__chip:hover{border-color:var(--brand)}
.cat-bar__chip-facet{color:var(--ink-3);font-weight:600}
.cat-bar__chip-x{font-size:1rem;line-height:1}
.cat-bar__clear--chips{text-decoration:underline}

/* A phone wraps the bar into rows and gives each facet button the full width, so a long term stays
   readable. The panels need no rule of their own: the behaviour keeps them inside the viewport. */
@media (max-width:560px){
  .cat-bar{padding:.7rem}
  .cat-bar__search{flex:1 1 100%;flex-wrap:wrap}
  .cat-bar__search-label{flex:1 1 100%}
  .cat-bar__facets{gap:.35rem}
  .cat-bar__actions{width:100%;margin-left:0}
  .cat-bar__submit{flex:1 1 auto}
}

/* ---------- a category's own reference numbers (taxonomy-product_category.php,
   taxonomy-product_subcategory.php) ----------
   `moq_reference` and `lead_time_range` are the two numbers a buyer checks before reading any
   product, so they sit in one line under the intro and read as figures rather than as prose. */
.cat-cat__refs{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin:0}
.cat-cat__refs>div{display:flex;align-items:baseline;gap:.4rem;min-width:0}
.cat-cat__refs dt{margin:0;font-size:var(--step--1);color:var(--ink-3)}
.cat-cat__refs dd{
  margin:0;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

/* The bar on a category page sits over the results it narrows, not in the page head, because the
   subcategories of the level-1 page stand between the intro and the products. */
.cat-results__bar{margin-bottom:clamp(.9rem,2vw,1.25rem)}

/* ---------- the level-2 cards under a level-1 category ---------- */
/* The card is a signpost: its intro is shortened on the way in, so three lines hold whether the
   record's own sentence is a phrase or a paragraph. */
.cat-subcard__text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;overflow-wrap:anywhere;
}

/* ---------- browse by category (/products/, both levels as links) ---------- */
.cat-browse__title{
  margin:0 0 .6rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.cat-browse__row{margin:0}
.cat-browse__label{
  margin:.8rem 0 .4rem;font-size:.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
/* The chosen category, or the chosen level-2 term, is the one the results already show: it reads as
   chosen instead of as another link to the same view. */
.cat-chips a[aria-current="true"]{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark)}

/* ---------- one line closing a subcategory page ---------- */
.cat-subcta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem;margin:0}
.cat-subcta .note{max-width:62ch}

/* One category control: the level-1 families, each opened onto its own second level.
   A native <details> does the drill-down, so the panel keeps the popover's own trigger/panel pair
   and the bar still needs no script to work. */
.cat-bar__help--top{margin:.1rem 0 .4rem;color:var(--ink-3)}
.cat-bar__family{border-top:1px solid var(--line)}
.cat-bar__family:first-of-type{border-top:0}
.cat-bar__family-sum{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .4rem;border-radius:6px;
  cursor:pointer;list-style:none;font-weight:600;color:var(--ink)
}
.cat-bar__family-sum::-webkit-details-marker{display:none}
.cat-bar__family-sum:hover{background:var(--sand-2)}
.cat-bar__family-sum:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cat-bar__family-name{flex:1 1 auto;min-width:0}
.cat-bar__family-count{flex:none;font-weight:400;font-size:.78em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cat-bar__family-caret{
  flex:none;width:.45rem;height:.45rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease
}
.cat-bar__family[open] > .cat-bar__family-sum{color:var(--brand-dark)}
.cat-bar__family[open] .cat-bar__family-caret{transform:rotate(-135deg)}
.cat-bar__family-body{padding:0 0 .4rem}
.cat-bar__family-body > .cat-bar__option{padding-inline-start:.6rem}