/* 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-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) ---------- */
.cat-card .card__media{aspect-ratio:4/3}
.cat-card__img{width:100%;height:100%;object-fit:cover}
.cat-card__placeholder{width:100%;height:100%}
.cat-card .card__foot{gap:.4rem 1rem}
.cat-card__price{margin:0;white-space:nowrap}
.cat-card__price.price-state--ask{font-size:.9375rem;line-height:1.3}
.cat-card__moq{white-space:nowrap}
.cat-card__basis{margin:0}
.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}
}