/* ==========================================================================
   Product Catalogue
   Override the variables below in Elementor → Custom CSS to re-skin.
   ========================================================================== */

.pcat-wrap {
  --pcat-accent:      #c9a227;   /* brand gold: fills, selected states, rules */
  --pcat-accent-ink:  #8a6d14;   /* the accent as TEXT on a light surface */
  --pcat-selected:    #0b2163;   /* "this one is chosen": the logo navy. Unusable
                                    as text against #0b2540 body copy, which is
                                    what it used to be, but as a FILL under white
                                    it is unmistakable -- 14.7:1. */
  --pcat-on-selected: #ffffff;
  --pcat-on-accent:   #2a2205;   /* text sitting ON an accent fill. Warm, not
                                    the navy: navy against gold is two strong
                                    hues arguing, where a near-black in the
                                    gold's own family just reads as ink. */
  --pcat-bg:          #0d1b2f;   /* page background */
  --pcat-panel:       #14243c;   /* sidebar + card background */
  --pcat-panel-2:     #1b3050;   /* inactive pill background */
  --pcat-line:        #24395a;   /* borders */
  --pcat-text:        #ffffff;
  --pcat-muted:       #8ea3bf;
  --pcat-media-bg:    #ffffff;   /* image well behind product shots */
  --pcat-radius:      10px;
  --pcat-cols:        3;
  --pcat-max:         none;      /* outer cap: none = follow the container.
                                    Re-cap with max_width="1320px". */
  --pcat-sidebar:     clamp(260px, 18%, 320px);   /* grows with the container */
  --pcat-thumb:       140px;     /* list-view thumbnail WIDTH; 4:3 sets height */
  --pcat-brandchip-h: 40px;      /* brand logo well in the Brand filter tiles */
  --pcat-grid-gap:    14px;      /* space between grid-view cards */
  --pcat-gutter:      24px;      /* side padding inside that width */

  background: var(--pcat-bg);
  color: var(--pcat-text);
  padding: 28px 0 56px;
}

.pcat-theme-light {
  --pcat-bg:      #ffffff;
  --pcat-panel:   #f6f8fa;
  --pcat-panel-2: #eef2f6;
  --pcat-line:    #c5d2df;
  --pcat-text:    #0b2540;
  --pcat-muted:   #45566a;
  --pcat-media-bg:#f4f7f9;
}

/* The gold is bright enough to read as text on a dark surface, which it is not
   on a light one, so the ink and the fill converge here. */
.pcat-theme-dark {
  --pcat-accent:      #e0b83a;
  --pcat-accent-ink:  #e0b83a;
  --pcat-on-accent:   #2a2205;
  /* The logo navy disappears into a dark page, so the selected fill lifts. */
  --pcat-selected:    #3b5bbf;
  --pcat-on-selected: #ffffff;
}

.pcat-wrap *,
.pcat-wrap *::before,
.pcat-wrap *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- theme guard
   hello-elementor's reset.css styles every bare <button>:

     [type=button],[type=submit],button { border:1px solid #c36; border-radius:3px;
       color:#c36; display:inline-block; padding:.5rem 1rem; white-space:nowrap }

   That nowrap is what pushed long category names out of the sidebar and across
   the product grid, and the display/padding forced [hidden] controls visible.
   Every catalogue button carries type="button", so the theme reaches them via
   [type=button] at (0,1,0) -- attribute, not element -- and a plain `button`
   guard is one notch too low to beat it. Match its specificity exactly and win
   on source order instead: :where() zeroes the .pcat-wrap scope, leaving
   (0,1,0), and the plugin stylesheet is enqueued after the theme's (see
   product-catalogue.php). Component rules below are also (0,1,0) but come
   later in this file, so they still override this base normally. */
:where(.pcat-wrap) [type="button"],
:where(.pcat-wrap) button {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: none;
  white-space: normal;
  transition: none;
}
:where(.pcat-wrap) [type="button"]:hover,
:where(.pcat-wrap) [type="button"]:focus,
:where(.pcat-wrap) button:hover,
:where(.pcat-wrap) button:focus {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

/* The guard above neutralises the theme's hover paint, but it also strips the
   element's own colour. Buttons that intentionally have no hover effect must
   therefore restate their resting look, otherwise they change appearance on
   hover anyway. These are (0,2,0) like the guard and sit after it, so they win. */
.pcat-rfq:hover,
.pcat-rfq:focus {
  color: var(--pcat-accent);
  background-color: transparent;
}
.pcat-dd__btn:hover,
.pcat-dd__btn:focus,
.pcat-drawer-toggle:hover,
.pcat-drawer-toggle:focus {
  color: var(--pcat-text);
  background-color: var(--pcat-panel);
}
.pcat-dd__done:hover,
.pcat-dd__done:focus {
  color: var(--pcat-bg);
  background-color: var(--pcat-accent);
}

:where(.pcat-wrap) [hidden] { display: none; }

/* --------------------------------------------------------------- top bar */
.pcat-topbar {
  padding: 0 var(--pcat-gutter) 22px;
  max-width: var(--pcat-max);
  margin: 0 auto 28px;
  border-bottom: 1px solid var(--pcat-line);
}

/* ----------------------------------------------------------------- search */
.pcat-search {
  position: relative;
  /* No bottom margin: this is a flex item in .pcat-toolbar, and a margin here
     lands inside the item's margin box, stretching the row taller than the
     input and pushing every centred sibling below the search box. */
  margin-bottom: 0;
}
.pcat-search svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--pcat-muted);
  pointer-events: none;
}
/* hello-elementor's reset styles input[type=search] at (0,1,1) -- padding .5rem
   1rem, border-radius 3px, border #666 -- which beat the old single-class
   selector and squashed the padding until the text ran under the icon. The
   parent class lifts these to (0,2,0). */
.pcat-search .pcat-search__input {
  width: 100%;
  height: 50px;
  font: inherit;
  font-size: 15px;
  padding: 0 46px 0 46px;
  color: var(--pcat-text);
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s ease;
}
.pcat-search .pcat-search__input::placeholder { color: var(--pcat-muted); }
.pcat-search .pcat-search__input:focus { border-color: var(--pcat-accent); }
.pcat-search .pcat-search__input::-webkit-search-cancel-button { display: none; }

.pcat-search__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--pcat-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* flex centres the glyph in its chip; :not([hidden]) keeps the hidden state
   authoritative, since a bare display here would outrank the [hidden] guard. */
.pcat-search__clear:not([hidden]) { display: flex; }
.pcat-search__clear:hover,
.pcat-search__clear:focus {
  color: var(--pcat-text);
  background-color: var(--pcat-line);
}
/* ------------------------------------------------------------- toolbar row */
.pcat-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pcat-toolbar .pcat-search { flex: 1 1 auto; min-width: 0; }

.pcat-drawer-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  flex: none;
  font: inherit;
  font-size: 13px;
  height: 44px;
  padding: 0 14px;
  color: var(--pcat-text);
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
  cursor: pointer;
}

/* ----------------------------------------------------- brand dropdown menu */
.pcat-dd { position: relative; flex: none; }

.pcat-dd__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  height: 44px;
  padding: 0 14px;
  color: var(--pcat-text);
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease;
}
.pcat-dd__btn:hover,
.pcat-dd__btn.is-active { border-color: var(--pcat-accent); }
.pcat-dd__btn:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: 2px; }

.pcat-dd__badge {
  min-width: 20px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border-radius: 999px;
  background: var(--pcat-accent);
  color: var(--pcat-bg);
}
.pcat-dd__chev {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  opacity: .8;
  transition: transform .18s ease;
}
.pcat-dd__btn[aria-expanded="true"] .pcat-dd__chev { transform: rotate(180deg); }

.pcat-dd__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  overflow: hidden;
}

/* ------------------------------------------------- dropdown open / close
   An animation rather than a transition: the panel is toggled with the
   [hidden] attribute, so it goes display:none -> block, and a transition has
   nothing to interpolate from across that change. An animation simply runs
   when the element becomes displayed.

   The exit is driven by .is-closing, which catalogue.js adds and then removes
   once the panel is actually hidden -- see closeDD(). It is deliberately
   faster than the entrance: an opening menu should feel like it is arriving,
   a closing one should just get out of the way. */
@keyframes pcat-dd-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes pcat-dd-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px) scale(.99); }
}
/* No fill-mode on the entrance, deliberately. A backwards fill would hold the
   panel at the from-frame -- opacity 0 -- whenever the animation cannot run:
   a backgrounded tab freezes animations at time 0, so a visitor who opened the
   menu, switched tabs and came back would find it open but invisible. Without
   a fill the panel simply renders in its normal, visible state and the
   animation is pure decoration on top. */
.pcat-dd__panel:not([hidden]) {
  animation: pcat-dd-in .18s cubic-bezier(.2, .8, .3, 1);
}
.pcat-dd__panel.is-closing {
  animation: pcat-dd-out .13s ease-in both;
  pointer-events: none;
}

/* The panel hangs off the right edge of its button, so growing from that
   corner is what makes it look attached to the thing that was clicked. */
.pcat-dd__panel { transform-origin: top right; }

/* The panel's wrapper. On desktop it is display:contents, so it vanishes from
   layout entirely and the panel still positions against .pcat-dd exactly as it
   always did. On phones it becomes the full-screen flex container that centres
   the panel, and doubles as the backdrop. */
.pcat-dd__sheet { display: contents; }
.pcat-dd__sheet[hidden] { display: none; }

/* ------------------------------------------------------- phones: a sheet
   Anchored under its button, the panel opens downward -- and on a phone the
   button sits far enough down the page that the bottom of the list falls off
   the screen, so picking a brand meant scrolling the page first.

   Centring is done by flexbox on the wrapper, and the panel itself goes back to
   being a plain static box. Earlier attempts centred the panel directly with
   position:fixed plus either a translate or auto margins against height:
   fit-content; both render correctly in a desktop browser and both went blank
   on a real phone. None of those mechanisms are load-bearing here any more:
   no transform, no fixed positioning on the panel, no fit-content. */
@media (max-width: 620px) {
  .pcat-dd__sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;      /* over the theme's fixed header, which sits at 99 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 16, 30, .55);
    animation: pcat-fade-in .18s ease;
  }
  .pcat-dd__sheet[hidden] { display: none; }
  .pcat-dd__sheet.is-closing { animation: pcat-fade-out .13s ease both; }

  .pcat-dd__panel {
    position: static;
    width: min(420px, 100%);
    max-width: none;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    transform: none;
    animation: none;      /* the wrapper carries the fade now */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  }
  .pcat-dd__panel[hidden] { display: none; }

  .pcat-dd__head,
  .pcat-dd__foot { flex: none; }
  /* min-height:0 is what lets a flex item shrink below its content and scroll;
     without it the list refuses to shrink and pushes the foot off the sheet. */
  .pcat-dd__list { flex: 1 1 auto; min-height: 0; max-height: none; }
}

@keyframes pcat-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcat-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* While the sheet is open the page behind it must not scroll away underneath. */
@media (max-width: 620px) {
  body.pcat-dd-open { overflow: hidden; }
}

/* Last word on motion, so it must sit after the phone rules above -- they carry
   the same specificity, and whichever comes last wins. */
@media (prefers-reduced-motion: reduce) {
  .pcat-dd__panel:not([hidden]),
  .pcat-dd__panel.is-closing,
  .pcat-dd__sheet,
  .pcat-dd__sheet.is-closing { animation: none; }
}

.pcat-dd__head { padding: 10px; border-bottom: 1px solid var(--pcat-line); }
.pcat-dd .pcat-dd__find {
  width: 100%;
  font: inherit;
  font-size: 13px;
  height: 36px;
  padding: 0 10px;
  color: var(--pcat-text);
  background: var(--pcat-bg);
  border: 1px solid var(--pcat-line);
  border-radius: 6px;
}
.pcat-dd .pcat-dd__find::placeholder { color: var(--pcat-muted); }
.pcat-dd .pcat-dd__find:focus { outline: none; border-color: var(--pcat-accent); }
.pcat-dd .pcat-dd__find::-webkit-search-cancel-button { display: none; }

/* Tiles, not rows: logo on top, name under it, count last. Hiding a row while
   the visitor searches simply drops it out of the grid and the rest reflow. */
.pcat-dd__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 8px;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Two across once three would leave the names too narrow to read. */
@media (max-width: 480px) {
  .pcat-dd__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pcat-dd__row.is-muted { opacity: .38; }

.pcat-opt {
  display: block;
  height: 100%;
  font-size: 13.5px;
  cursor: pointer;
}
.pcat-dd__row.is-muted .pcat-opt { cursor: not-allowed; }

/* Clipped rather than display:none or visibility:hidden -- both of those would
   take the checkbox out of the tab order, and it is still the real control:
   the JS filters on it and a keyboard user toggles it with Space. */
.pcat-opt__box {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pcat-opt__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 12px 8px 10px;
  text-align: center;
  background: var(--pcat-media-bg);
  border: 1px solid var(--pcat-line);
  border-radius: 8px;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.pcat-opt:hover .pcat-opt__tile { border-color: var(--pcat-accent); }

/* Selected and keyboard-focus states both have to live on the tile, since the
   control that owns them is clipped out of sight. */
.pcat-opt__box:checked ~ .pcat-opt__tile {
  border-color: var(--pcat-accent);
  box-shadow: inset 0 0 0 1px var(--pcat-accent);
}
.pcat-opt__box:focus-visible ~ .pcat-opt__tile {
  outline: 2px solid var(--pcat-accent);
  outline-offset: 2px;
}

.pcat-opt__check {
  position: absolute;
  top: 4px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  background: var(--pcat-accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .13s ease, transform .13s ease;
}
.pcat-opt__box:checked ~ .pcat-opt__tile .pcat-opt__check {
  opacity: 1;
  transform: none;
}

/* A fixed-height well, printed for every brand whether or not it has a logo, so
   every tile is the same shape and the names sit on one line across a row.
   Logos come in every aspect ratio there is, so the box constrains both axes
   and the image is contained inside it rather than filling it. */
.pcat-opt__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pcat-brandchip-h);
  padding: 2px;
}
.pcat-opt__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Stand-in until a brand has a logo: initials, quiet enough that a real logo
   in the next tile still wins the eye. */
/* Narrower than the logo well it stands in for. At full width the tinted block
   reads as a heavy grey bar across the tile and out-shouts the real logos in
   the neighbouring cells; as a centred badge it stays clearly secondary. */
.pcat-opt__logo--initials {
  width: 52px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pcat-muted);
  background: var(--pcat-panel-2);
  border-radius: 5px;
}

.pcat-opt__name {
  width: 100%;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pcat-text);
  overflow-wrap: anywhere;
}
/* Pushed to the bottom so the counts line up across a row even where one name
   wraps to two lines and its neighbour does not. */
.pcat-opt__count {
  margin-top: auto;
  padding-top: 2px;
  font-size: 10.5px;
  color: var(--pcat-muted);
  font-variant-numeric: tabular-nums;
}

.pcat-dd__none { margin: 0; padding: 18px 12px; text-align: center; font-size: 13px; color: var(--pcat-muted); }

.pcat-dd__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-top: 1px solid var(--pcat-line);
}
.pcat-dd__clear,
.pcat-dd__done {
  font: inherit;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.pcat-dd__clear {
  color: var(--pcat-muted);
  background: none;
  border: 0;
  text-decoration: underline;
}
.pcat-dd__clear:hover { color: var(--pcat-text); }
.pcat-dd__done {
  color: var(--pcat-bg);
  background: var(--pcat-accent);
  border: 0;
  font-weight: 600;
}

/* ------------------------------------------------------- list/grid toggle */
.pcat-view {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
}
.pcat-view__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--pcat-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.pcat-view__btn svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.pcat-view__btn.is-active {
  color: var(--pcat-accent);
  background: color-mix(in srgb, var(--pcat-accent) 14%, transparent);
}
/* explicit hover states, for the same reason as the other buttons above */
.pcat-view__btn:hover,
.pcat-view__btn:focus { color: var(--pcat-text); background-color: transparent; }
.pcat-view__btn.is-active:hover,
.pcat-view__btn.is-active:focus {
  color: var(--pcat-accent);
  background-color: color-mix(in srgb, var(--pcat-accent) 14%, transparent);
}
.pcat-view__btn:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: 2px; }

/* ---------------------------------------------------------- sort control */
.pcat-sort { display: flex; align-items: center; gap: 8px; flex: none; }
.pcat-sort__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--pcat-muted);
}
.pcat-sort__select {
  font: inherit;
  font-size: 13px;
  height: 44px;
  padding: 0 10px;
  color: var(--pcat-text);
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
  cursor: pointer;
}
.pcat-sort__select:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: 2px; }

/* --------------------------------------------------- active filter chips */
.pcat-activebar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* This sits inside .pcat-topbar, so by default its rule stops at the content
     box while the topbar's border-bottom spans the full border box -- leaving
     this one a gutter shorter on each side. Bleed it back out through the
     padding, then re-apply the gutter inside, so both rules match. */
  margin-left: calc(var(--pcat-gutter) * -1);
  margin-right: calc(var(--pcat-gutter) * -1);
  padding: 14px var(--pcat-gutter) 0;
  border-top: 1px solid var(--pcat-line);
}
.pcat-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 8px 5px 11px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--pcat-accent) 15%, transparent);
  color: var(--pcat-accent);
}
.pcat-chip button {
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.pcat-chips__empty { font-size: 12px; color: var(--pcat-muted); }
.pcat-clearall {
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  color: var(--pcat-muted);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.pcat-clearall:hover { color: var(--pcat-text); }
.pcat-resultcount {
  margin-left: auto;
  font-size: 12px;
  color: var(--pcat-muted);
}

/* ----------------------------------------------------------------- layout */
.pcat-layout {
  display: grid;
  gap: 32px;
  max-width: var(--pcat-max);
  margin: 0 auto;
  padding: 0;
}
.pcat-wrap--sidebar .pcat-layout {
  grid-template-columns: var(--pcat-sidebar) minmax(0, 1fr);
}
@media (max-width: 900px) {
  /* minmax(0, …), not 1fr. A grid column's implicit minimum is min-content, so
     a bare 1fr cannot shrink below the widest thing inside it -- here the rail
     with ~2400px of brand chips, which dragged the whole main column out to
     2416px on a 386px screen and took every card with it. The desktop template
     above always clamped its main column; this override did not. */
  .pcat-wrap--sidebar .pcat-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- sidebar */
.pcat-sidebar {
  align-self: start;
  min-width: 0;
  position: sticky;
  top: 24px;
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
  padding: 22px 18px;
}
.pcat-sidebar__title {
  margin: 0 0 14px;
  padding-bottom: 14px;
  font-size: 19px;
  font-weight: 700;
  border-bottom: 1px solid var(--pcat-line);
  color: var(--pcat-text);
}

.pcat-catlist { list-style: none; margin: 0; padding: 0; }
.pcat-catlist--sub { margin: 2px 0 6px 14px; display: none; }
.pcat-catlist--sub.is-open { display: block; }

.pcat-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 15px;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 2px;
  color: var(--pcat-muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pcat-cat:hover { color: var(--pcat-text); background: var(--pcat-panel-2); }
.pcat-cat.is-active {
  color: var(--pcat-accent);
  background: color-mix(in srgb, var(--pcat-accent) 12%, transparent);
  font-weight: 600;
}
.pcat-cat.is-active .pcat-cat__chev { transform: rotate(90deg); }
.pcat-cat__chev,
.pcat-cat__icon { flex: none; font-size: 13px; opacity: .8; transition: transform .18s ease; }
.pcat-cat--sub { font-size: 14px; padding: 8px 12px; }
.pcat-cat__count { flex: none; margin-left: auto; font-size: 12px; opacity: .6; }
.pcat-cat:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: -2px; }

/* ---------------------------------------------------------------- heading */
.pcat-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 700;
  color: var(--pcat-text);
}
.pcat-heading::before {
  content: "";
  width: 4px;
  height: 26px;
  background: var(--pcat-accent);
  border-radius: 2px;
  flex: none;
}

/* ------------------------------------------------------------------- grid */
.pcat-grid {
  display: grid;
  grid-template-columns: repeat(var(--pcat-cols), minmax(0, 1fr));
  gap: var(--pcat-grid-gap);
}
@media (max-width: 1200px) { .pcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pcat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------- card */
.pcat-card {
  display: flex;
  flex-direction: column;
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcat-card:hover {
  transform: translateY(-3px);
  border-color: var(--pcat-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.pcat-card[hidden] { display: none; }

.pcat-card__media {
  position: relative;
  background: var(--pcat-media-bg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcat-card__media a { display: block; width: 100%; height: 100%; }
.pcat-card__media img {
  width: 100%;
  height: 100%;
  /* Fill the well edge to edge: cover crops the overflowing axis rather than
     leaving letterbox bars, which contain would. */
  object-fit: cover;
  padding: 0;
  display: block;
}
.pcat-card__placeholder {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #c8d4e0;
  text-transform: uppercase;
}
.pcat-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  /* was accent text on a near-black plate, which collapses once the accent is
     itself dark navy. Solid accent chip with the surface colour as ink instead. */
  background: var(--pcat-accent);
  color: var(--pcat-bg);
}

.pcat-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px 20px;
  flex: 1;
}
.pcat-card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pcat-muted);
}
.pcat-card__title { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 700; }
.pcat-card__brandline {
  display: block;
  font-weight: 400;
  color: var(--pcat-muted);
  font-size: 15px;
}
.pcat-card__title a { color: var(--pcat-text); text-decoration: none; }
.pcat-card__title a:hover { color: var(--pcat-accent); }
.pcat-card__spec { margin: 0; font-size: 13px; color: var(--pcat-muted); }
/* Clamped so one long description cannot stretch its whole grid row. */
.pcat-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pcat-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcat-rfq {
  margin-top: auto;
  padding: 14px 0 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pcat-accent);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.pcat-rfq:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: 3px; }

/* -------------------------------------------------------------- list view */
.pcat-grid--list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
  overflow: hidden;
}
.pcat-grid--list .pcat-card {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pcat-line);
  border-radius: 0;
}
.pcat-grid--list .pcat-card:last-child { border-bottom: 0; }
.pcat-grid--list .pcat-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--pcat-line);
  background: var(--pcat-panel-2);
}

/* Landscape, not square: the product shots are 3:2, so a square tile letterboxed
   them and threw away most of the height. Width is set here and the base rule's
   4:3 aspect-ratio derives the height. */
.pcat-grid--list .pcat-card__media {
  flex: none;
  width: var(--pcat-thumb);
  height: auto;
  border-radius: 6px;
  overflow: hidden;
}
.pcat-grid--list .pcat-card__placeholder { font-size: 28px; font-weight: 700; }
/* the brand already reads on the title line here, so drop the media badge */
.pcat-grid--list .pcat-card__badge { display: none; }

/* One wrapping row: the eyebrow and the spec each claim a full line, which
   leaves the title and the quote button sharing the line between them. Ordering
   by rule rather than DOM position keeps that true when a product has no spec.
   The title uses flex-basis 0 so it never forces the button onto its own line --
   flex line-breaking measures the basis, not the shrunk width. */
.pcat-grid--list .pcat-card__body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 18px;
  flex: 1;
  min-width: 0;
  padding: 0;
}
.pcat-grid--list .pcat-card__eyebrow { flex: 0 0 100%; order: 0; }
.pcat-grid--list .pcat-card__spec    { flex: 0 0 100%; order: 2; }
.pcat-grid--list .pcat-card__desc    { flex: 0 0 100%; order: 3; font-size: 12.5px; -webkit-line-clamp: 2; }
.pcat-grid--list .pcat-card__eyebrow { font-size: 10.5px; }
.pcat-grid--list .pcat-card__title { flex: 1 1 0; min-width: 0; order: 1; font-size: 14.5px; line-height: 1.35; }
.pcat-grid--list .pcat-card__brandline { display: inline; font-size: 14.5px; }
.pcat-grid--list .pcat-card__spec { font-size: 12.5px; }
.pcat-grid--list .pcat-rfq {
  flex: none;
  order: 1;                 /* same order as the title: they share a line */
  align-self: center;
  margin: 0 0 0 auto;       /* pushed to the far end of that line */
  padding: 0;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .pcat-grid--list .pcat-card { align-items: flex-start; gap: 12px; }
  .pcat-wrap { --pcat-thumb: 96px; }
  .pcat-grid--list .pcat-rfq { flex: 0 0 100%; order: 3; margin-left: 0; padding-top: 4px; }
}

/* ------------------------------------------------------------------ pager */
.pcat-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
}
.pcat-pager__btn,
.pcat-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--pcat-text);
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pcat-pager__btn { font-size: 17px; line-height: 1; }
.pcat-pager__btn:hover,
.pcat-pager__num:hover {
  color: var(--pcat-text);
  background-color: var(--pcat-panel);
  border-color: var(--pcat-accent);
}
.pcat-pager__btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  border-color: var(--pcat-line);
}
.pcat-pager__btn[disabled]:hover { border-color: var(--pcat-line); }
.pcat-pager__num.is-current,
.pcat-pager__num.is-current:hover {
  color: var(--pcat-bg);
  background-color: var(--pcat-accent);
  border-color: var(--pcat-accent);
  font-weight: 600;
}
.pcat-pager__gap { padding: 0 2px; color: var(--pcat-muted); }
.pcat-pager__btn:focus-visible,
.pcat-pager__num:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .pcat-pager__btn,
  .pcat-pager__num { min-width: 34px; height: 34px; padding: 0 8px; }
}

/* --------------------------------------------------------------- messages */
.pcat-noresults,
.pcat-empty {
  padding: 56px 0;
  text-align: center;
  color: var(--pcat-muted);
}

/* --------------------------------- quote button outside the catalogue grid
   [product_quote_button] renders outside .pcat-wrap, so the theme guard does
   not reach it and hello-elementor would paint it as a pink bordered button.
   These sit at the same specificity as the theme's [type=button] rules and
   load after them, so they win; the tokens carry fallbacks because the
   custom properties are declared on .pcat-wrap. */
.pcat-rfq--solo {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--pcat-accent, #0b2163);
  white-space: nowrap;
}
.pcat-rfq--solo:hover,
.pcat-rfq--solo:focus {
  color: var(--pcat-accent, #0b2163);
  background-color: transparent;
}
.pcat-rfq--solo:focus-visible {
  outline: 2px solid var(--pcat-accent, #0b2163);
  outline-offset: 3px;
}

/* ------------------------------------------------- single product gallery */
.pcat-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.pcat-gallery__item {
  display: block;
  border: 1px solid #dbe3ea;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f7f9;
}
.pcat-gallery__img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
  padding: 12px;
  transition: transform .2s ease;
}
.pcat-gallery__item:hover .pcat-gallery__img { transform: scale(1.04); }

/* --------------------------------------------- toolbar on small screens */
@media (max-width: 900px) {
  .pcat-drawer-toggle { display: inline-flex; }
  .pcat-sidebar { display: none; }
  .pcat-sidebar.is-open { display: block; position: static; }
}

@media (max-width: 700px) {
  .pcat-wrap { --pcat-gutter: 16px; }
  .pcat-search .pcat-search__input { height: 46px; font-size: 14px; }

  .pcat-toolbar { flex-wrap: wrap; gap: 8px; }
  .pcat-toolbar .pcat-search { flex: 1 1 100%; order: -1; }
  .pcat-drawer-toggle,
  .pcat-dd__btn { height: 42px; }
  .pcat-dd { flex: 1 1 auto; }
  .pcat-dd__btn { width: 100%; justify-content: center; }

  /* At this width the Brand button is a narrow flex item sitting mid-row, so a
     panel anchored to it ran off the right edge of the screen. Anchor to the
     toolbar instead and span its full width: .pcat-dd goes static so the
     positioned .pcat-toolbar becomes the containing block. */
  .pcat-toolbar { position: relative; }
  .pcat-dd { position: static; }

  .pcat-sort { flex: 1 1 auto; }
  .pcat-sort__label { display: none; }
  .pcat-sort__select { width: 100%; height: 42px; }
  .pcat-view__btn { width: 34px; height: 34px; }

  .pcat-resultcount { margin-left: 0; width: 100%; }
}

/* The toolbar-anchored panel above stops at the sheet breakpoint. Below 621px
   the panel is a fixed, centred sheet, and re-anchoring it to the toolbar would
   put its top and left back where they were -- this rule sits later in the file
   than the sheet block, so without the lower bound it wins on source order and
   silently undoes it. */
@media (min-width: 621px) and (max-width: 700px) {
  .pcat-dd__panel {
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* -------------------------------------------- category rows with counts */
.pcat-cat__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.pcat-cat__count { font-variant-numeric: tabular-nums; }
.pcat-cat.is-active .pcat-cat__count { opacity: .9; }

/* ==========================================================================
   Brand facet + brand logo rail

   Two faces on one selection. The facet is the exhaustive list -- every brand,
   searchable, multi-select, with counts -- and lives in the sidebar under the
   category tree. The rail is the quick pick: the same brands as logos, in a row
   above the results, because a buyer recognises a mark faster than a name.

   Selection is drawn as an accent underline and a tinted surface rather than a
   filled lozenge, so a picked brand reads as "current tab" rather than "button
   you just pressed", and the two surfaces never look like rival controls.
   ========================================================================== */

.pcat-wrap { --pcat-railchip-h: 34px; }   /* logo well inside a rail tile */

/* ------------------------------------------------------------ brand facet */
.pcat-facet--stacked { margin-top: 24px; }

/* Mirrors .pcat-sidebar__title, so the two facet headings read as one column
   rather than a heading and a widget that happen to sit together. */
.pcat-facet__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 14px;
  padding: 0 0 14px;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  text-align: left;
  color: var(--pcat-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pcat-line);
  border-radius: 0;
  cursor: pointer;
}
.pcat-facet__head:hover,
.pcat-facet__head:focus {
  color: var(--pcat-text);
  background-color: transparent;
}
.pcat-facet__head:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: 2px; }

.pcat-facet__badge:not([hidden]) { display: inline-flex; }
.pcat-facet__badge {
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--pcat-accent);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.pcat-facet__chev {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--pcat-muted);
  transition: transform .18s ease;
}
.pcat-facet.is-collapsed .pcat-facet__chev { transform: rotate(-90deg); }
.pcat-facet.is-collapsed .pcat-facet__body { display: none; }

/* (0,2,0) to clear hello-elementor's input[type=search] reset, the same lift
   .pcat-search__input needs -- see the note on that rule. */
.pcat-facet .pcat-facet__find {
  width: 100%;
  height: 38px;
  margin-bottom: 8px;
  padding: 0 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--pcat-text);
  background: var(--pcat-bg);
  border: 1px solid var(--pcat-line);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s ease;
}
.pcat-facet .pcat-facet__find::placeholder { color: var(--pcat-muted); }
.pcat-facet .pcat-facet__find:focus { border-color: var(--pcat-accent); }
.pcat-facet .pcat-facet__find::-webkit-search-cancel-button { display: none; }

/* Capped and scrolled: 21 brands at 38px a row is taller than most viewports,
   and the whole sidebar would scroll away from the products it filters. */
.pcat-brandlist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.pcat-facet__row.is-muted { opacity: .38; }
.pcat-facet__row.is-muted .pcat-brow { cursor: not-allowed; }

.pcat-brow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .13s ease;
}
.pcat-brow:hover { background: var(--pcat-panel-2); }
/* Progressive enhancement: without :has() the tick and the accent name still
   carry the selected state on their own. */
.pcat-brow:has(.pcat-opt__box:checked) {
  background: color-mix(in srgb, var(--pcat-accent) 12%, transparent);
}

/* The box itself is clipped by .pcat-opt__box (shared with the dropdown), so a
   drawn square stands in for it. Unlike the dropdown's logo tiles, a facet row
   is a list item and wants a tick box that looks like one. */
.pcat-brow__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 1;
  color: transparent;
  background: transparent;
  border: 1.5px solid var(--pcat-line);
  border-radius: 4px;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.pcat-opt__box:checked ~ .pcat-brow__mark {
  color: #fff;
  background: var(--pcat-accent);
  border-color: var(--pcat-accent);
}
.pcat-opt__box:focus-visible ~ .pcat-brow__mark {
  outline: 2px solid var(--pcat-accent);
  outline-offset: 2px;
}

/* Logos arrive in every aspect ratio there is, so the well fixes both axes and
   the image is contained inside it. Light-surfaced on both themes: brand marks
   are drawn for white paper and disappear on navy. */
.pcat-brow__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 24px;
  padding: 2px;
  background: var(--pcat-media-bg);
  border: 1px solid var(--pcat-line);
  border-radius: 4px;
}
.pcat-brow__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.pcat-brow__logo--initials {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--pcat-muted);
  background: var(--pcat-panel-2);
}

.pcat-brow__name {
  min-width: 0;
  line-height: 1.3;
  color: var(--pcat-muted);
  overflow-wrap: anywhere;
}
.pcat-opt__box:checked ~ .pcat-brow__name {
  color: var(--pcat-accent);
  font-weight: 600;
}
.pcat-brow__count {
  flex: none;
  margin-left: auto;
  padding-left: 6px;
  font-size: 12px;
  color: var(--pcat-muted);
  opacity: .75;
  font-variant-numeric: tabular-nums;
}

.pcat-facet__none { margin: 0; padding: 14px 4px; font-size: 12.5px; color: var(--pcat-muted); }

.pcat-facet__clear:not([hidden]) { display: inline-flex; }
.pcat-facet__clear {
  align-items: center;
  margin-top: 10px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--pcat-muted);
  background: transparent;
  border: 1px solid var(--pcat-line);
  border-radius: 6px;
  cursor: pointer;
}
.pcat-facet__clear:hover,
.pcat-facet__clear:focus {
  color: var(--pcat-text);
  background-color: var(--pcat-panel-2);
}

/* The category tree plus 21 brands is taller than a short laptop viewport, and
   a sticky column taller than the screen can never scroll to its own bottom. */
@media (min-width: 901px) {
  .pcat-sidebar--facets {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ------------------------------------------------------------- logo rail */
.pcat-rail {
  position: relative;
  margin: 0 0 20px;
}

/* Native horizontal scroll, so a touch device swipes it without any JS at all;
   the arrows are the pointer-device affordance layered on top. */
.pcat-rail__track {
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 36px;
  scrollbar-width: none;
}
.pcat-rail__track::-webkit-scrollbar { display: none; }

.pcat-rail__item {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 104px;
  padding: 10px 8px 9px;
  font: inherit;
  color: var(--pcat-muted);
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .13s ease, background-color .13s ease, color .13s ease;
}
.pcat-rail__item:hover,
.pcat-rail__item:focus {
  color: var(--pcat-text);
  background-color: var(--pcat-panel-2);
}
.pcat-rail__item:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: 2px; }

/* The selected marker is a bar drawn under the tile rather than a border-bottom,
   because a single-sided border cannot follow the tile's rounded corners. */
.pcat-rail__item::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  background: var(--pcat-accent);
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .13s ease, transform .13s ease;
}
.pcat-rail__item.is-active::after { opacity: 1; transform: none; }
.pcat-rail__item.is-active {
  color: var(--pcat-text);
  background-color: var(--pcat-panel-2);
  border-color: var(--pcat-accent);
}
.pcat-rail__item.is-muted { opacity: .35; cursor: not-allowed; }

.pcat-rail__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pcat-railchip-h);
  padding: 2px;
  background: var(--pcat-media-bg);
  border-radius: 5px;
}
.pcat-rail__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.pcat-rail__logo--initials,
.pcat-rail__logo--all {
  font-weight: 700;
  color: var(--pcat-muted);
  background: var(--pcat-panel-2);
}
.pcat-rail__logo--initials { font-size: 13px; letter-spacing: .04em; }
.pcat-rail__logo--all { font-size: 17px; }

/* Two lines rather than an ellipsis: "Hi Essence Cables" truncated to "Hi
   Essenc…" is worse than a wrap, and the fixed tile width keeps the row even. */
.pcat-rail__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: inherit;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.pcat-rail__count {
  margin-top: auto;
  padding-top: 1px;
  font-size: 10.5px;
  color: var(--pcat-muted);
  font-variant-numeric: tabular-nums;
}
.pcat-rail__item.is-active .pcat-rail__count { color: var(--pcat-accent); }

/* Overlaid rather than laid out beside the track: as flex items they would
   appear and vanish with the scroll position and shunt every tile sideways. */
.pcat-rail__nav:not([hidden]) { display: flex; }
.pcat-rail__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--pcat-text);
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}
.pcat-rail__nav:hover,
.pcat-rail__nav:focus {
  color: var(--pcat-text);
  background-color: var(--pcat-panel-2);
}
.pcat-rail__nav[data-scroll="prev"] { left: -6px; }
.pcat-rail__nav[data-scroll="next"] { right: -6px; }

@media (max-width: 620px) {
  .pcat-rail__item { width: 88px; }
  /* Matches the :not([hidden]) rule's specificity, or that would keep winning
     on source order and the arrows would survive the media query. */
  .pcat-rail__nav:not([hidden]) { display: none; }
}

/* A brand whose logo is switched off under Settings → Brand Logos drops the
   well entirely rather than standing an initials block in for it, so "turned
   off" never looks like "not uploaded yet". The count's margin-top:auto has to
   go with it: left in place it would absorb the free space and pin the count to
   the bottom, which is exactly what justify-content is here to undo. */
.pcat-rail__item--nologo { justify-content: center; }
.pcat-rail__item--nologo .pcat-rail__count { margin-top: 4px; }

/* --------------------------------------------- brands as the sidebar's nav
   show_categories="no" leaves the brand list alone in the column, where it is
   navigation rather than a filter hanging off the bottom of a tree. The
   collapse toggle gives way to the same heading the tree used to carry --
   collapsing the only thing in the column would leave an empty box -- and the
   inner 320px cap goes with it, since the column's own scroll is now the one
   doing that work. */
.pcat-facet--primary .pcat-brandlist {
  /* Taller than the 320px a secondary facet gets, but still capped: letting the
     list run to its full ~800px hands the scrolling to the sidebar itself,
     which carries the heading and the search box away with it. Capping the list
     instead pins those two and scrolls only the rows under them. The reserve
     covers the heading, the search box and the column's own padding. */
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}
.pcat-facet--primary .pcat-sidebar__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------- logo rail, wrapped
   The default. One line behind a horizontal scroll hid 12 of 21 brands on a
   1200px column, which is a poor trade for a control whose whole job is being
   scannable, so the tiles run onto further rows instead. The flex `gap` already
   applies to both axes, so the rows space themselves. Sites with few brands are
   unaffected -- they were never overflowing a line in the first place. */
.pcat-rail--wrap .pcat-rail__track {
  flex-wrap: wrap;
  overflow: visible;
  scroll-snap-type: none;
  scroll-padding-inline: 0;
  padding: 2px;
}
.pcat-rail--wrap .pcat-rail__item { scroll-snap-align: none; }

/* ============================================================ brand cards
   brand_first="yes": the results area opens on a card per brand, and swaps to
   that brand's products once one is picked. The cards borrow .pcat-card
   wholesale, so the list/grid toggle and every card style already apply. */

/* The generic [hidden] guard is (0,1,0) and so is .pcat-grid--list's
   display:flex, which is declared later and would therefore keep a hidden grid
   on screen. This is (0,2,0) and settles it for both grids. */
.pcat-grid[hidden] { display: none; }

.pcat-bcard { cursor: pointer; }

/* Logos, not photographs: the product wells use object-fit:cover to fill edge
   to edge, which would crop a wordmark down to its middle letters. */
.pcat-bcard__media {
  background: var(--pcat-media-bg);
  padding: 10px;
}
.pcat-bcard__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The title's button is the real control -- the card-wide click handler is a
   convenience on top of it -- so it has to shed the theme's button paint and
   read as the heading it sits in. */
.pcat-card__title .pcat-bcard__link {
  font: inherit;
  color: var(--pcat-text);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.pcat-bcard:hover .pcat-bcard__link,
.pcat-card__title .pcat-bcard__link:hover,
.pcat-card__title .pcat-bcard__link:focus {
  color: var(--pcat-accent);
  background-color: transparent;
}
.pcat-card__title .pcat-bcard__link:focus-visible {
  outline: 2px solid var(--pcat-accent);
  outline-offset: 3px;
}

/* Inert: the whole card is clickable, so this is a signpost rather than a
   second control competing with the title for the same job. */
.pcat-bcard__go { pointer-events: none; }

/* ====================================================== brand introduction
   Appears between the heading and the results once a single brand is picked,
   carrying that brand's Description and a link to its Principal Website. */
.pcat-bintro {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 20px;
  padding: 18px 20px;
  background: var(--pcat-panel);
  border: 1px solid var(--pcat-line);
  border-radius: var(--pcat-radius);
}
/* Beats the generic [hidden] guard, which is declared earlier and at the same
   specificity as the display:flex above. */
.pcat-bintro[hidden] { display: none; }

/* A light well on both themes: brand marks are drawn for white paper. */
.pcat-bintro__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 64px;
  padding: 8px;
  background: var(--pcat-media-bg);
  border: 1px solid var(--pcat-line);
  border-radius: 6px;
}
.pcat-bintro__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pcat-bintro__body { min-width: 0; }
/* The description is the panel's whole reason for existing, so it is set at
   reading size rather than caption size. The line-height and the measure below
   go with it: 16px set to the full width of a 1000px panel runs past the ~75
   characters a line can be scanned comfortably. */
.pcat-bintro__text {
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 78ch;
  color: var(--pcat-muted);
}
.pcat-bintro__text p { margin: 0 0 12px; }
.pcat-bintro__text p:last-child { margin-bottom: 0; }

.pcat-bintro__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--pcat-bg);
  background: var(--pcat-accent);
  border-radius: 6px;
  transition: opacity .13s ease;
}
.pcat-bintro__link:hover,
.pcat-bintro__link:focus { color: var(--pcat-bg); opacity: .88; }
.pcat-bintro__link:focus-visible { outline: 2px solid var(--pcat-accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .pcat-bintro { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .pcat-bintro__logo { width: 104px; height: 52px; }
}

/* brand_select="single" renders the facet as radios, so the drawn control that
   stands in for the clipped input has to be round to match. */
.pcat-opt__box[type="radio"] ~ .pcat-brow__mark { border-radius: 50%; }

/* show_counts="no" takes the tally out of the rail tile, and with it the
   margin-top:auto that was holding the bottom of the tile down. The name takes
   that space instead, so a row of tiles stays evenly filled rather than leaving
   the logo and name huddled at the top of a stretched box. */
.pcat-rail--nocount .pcat-rail__name { margin: auto 0 0; }
.pcat-rail--nocount .pcat-rail__item { padding-bottom: 12px; }

/* ------------------------------------------- rail_show="name": text tiles
   With no logo well the fixed 104px tile is mostly empty around a word like
   "KSB", so the tiles size to their own text instead and the strip reads as a
   row of filters rather than a grid with the pictures missing. Declared after
   the --nocount rule, which pushes the name down a box that no longer has
   anything above it to be pushed away from. */
.pcat-rail--nameonly .pcat-rail__item {
  width: auto;
  min-width: 0;
  padding: 11px 18px;
  justify-content: center;
}
.pcat-rail--nameonly .pcat-rail__name {
  display: block;
  width: auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
}
/* The underline spans a fixed inset on a fixed-width tile; on one that hugs its
   text, the same inset would leave a stub under a short name. */
.pcat-rail--nameonly .pcat-rail__item::after { left: 10px; right: 10px; }

@media (max-width: 620px) {
  .pcat-rail--nameonly .pcat-rail__item { width: auto; padding: 10px 14px; }
}

/* ============================================ gold accent, contrast pass
   The accent used to be #0b2163 against #0b2540 text -- two navies within a few
   percent of each other -- so every selected state, link and button was painted
   in a colour the eye reads as ordinary body copy. It is now the gold the site
   nav already uses for its own active item.

   Gold is light. #c9a227 on white measures 2.4:1, well under the 4.5:1 a body
   or link colour needs, so it is only ever used as a FILL with dark text on it.
   Wherever the accent has to BE text, --pcat-accent-ink stands in: the same hue
   darkened to 4.9:1. Every rule below is one of those two cases. */

/* ---------------------------------- the accent as text on a light surface */
.pcat-rfq,
.pcat-rfq:hover,
.pcat-rfq:focus,
.pcat-rfq--solo,
.pcat-rfq--solo:hover,
.pcat-rfq--solo:focus,
.pcat-card__title a:hover,
.pcat-view__btn.is-active,
.pcat-view__btn.is-active:hover,
.pcat-view__btn.is-active:focus,
.pcat-opt__box:checked ~ .pcat-brow__name,
.pcat-bcard:hover .pcat-bcard__link,
.pcat-card__title .pcat-bcard__link:hover,
.pcat-card__title .pcat-bcard__link:focus {
  color: var(--pcat-accent-ink);
}

/* ------------------------------------------ text sitting on an accent fill */
.pcat-dd__badge,
.pcat-dd__done,
.pcat-dd__done:hover,
.pcat-dd__done:focus,
.pcat-opt__box:checked ~ .pcat-opt__tile .pcat-opt__check,
.pcat-card__badge,
.pcat-pager__num.is-current,
.pcat-pager__num.is-current:hover,
.pcat-facet__badge,
.pcat-opt__box:checked ~ .pcat-brow__mark,
.pcat-bintro__link,
.pcat-bintro__link:hover,
.pcat-bintro__link:focus {
  color: var(--pcat-on-accent);
}

/* -------------------------------------------------- filled selected states
   A tint at 12-14% under accent-coloured text was the faintest signal on the
   page. A filled tile beside unfilled ones is unmissable without having to be
   read. */
.pcat-cat.is-active,
.pcat-cat.is-active:hover,
.pcat-cat.is-active:focus {
  color: var(--pcat-on-accent);
  background: var(--pcat-accent);
  background-color: var(--pcat-accent);
  font-weight: 700;
}
.pcat-cat.is-active .pcat-cat__count { opacity: .8; }

.pcat-rail__item.is-active,
.pcat-rail__item.is-active:hover,
.pcat-rail__item.is-active:focus {
  color: var(--pcat-on-accent);
  background-color: var(--pcat-accent);
  border-color: var(--pcat-accent);
}
.pcat-rail__item.is-active .pcat-rail__count { color: var(--pcat-on-accent); opacity: .8; }
/* The underline existed to mark a tile that otherwise matched its neighbours.
   A filled tile says it louder, and the two together are just noise. */
.pcat-rail__item.is-active::after { opacity: 0; }

/* ---------------------------------------------------------- focus rings
   A ring has to clear 3:1 against what surrounds it, which the fill gold does
   not manage on white. The ink does. */
.pcat-search .pcat-search__input:focus,
.pcat-facet .pcat-facet__find:focus,
.pcat-dd .pcat-dd__find:focus { border-color: var(--pcat-accent-ink); }

.pcat-dd__btn:focus-visible,
.pcat-view__btn:focus-visible,
.pcat-sort__select:focus-visible,
.pcat-cat:focus-visible,
.pcat-pager__btn:focus-visible,
.pcat-pager__num:focus-visible,
.pcat-facet__head:focus-visible,
.pcat-facet__clear:focus-visible,
.pcat-rail__item:focus-visible,
.pcat-rfq:focus-visible,
.pcat-rfq--solo:focus-visible,
.pcat-opt__box:focus-visible ~ .pcat-opt__tile,
.pcat-opt__box:focus-visible ~ .pcat-brow__mark,
.pcat-card__title .pcat-bcard__link:focus-visible,
.pcat-bintro__link:focus-visible {
  outline-color: var(--pcat-accent-ink);
}

/* ------------------------------------------------- a firmer product row
   The brand is what a visitor scans this list for, so it stops being grey
   small print beside the model name. */
.pcat-grid--list .pcat-card__brandline {
  font-weight: 600;
  color: var(--pcat-text);
}

/* A chip IS an active filter, so it gets the same solid gold the other active
   states get -- and the 15% tint it had reached only 4.35:1 behind 12px text,
   which is under the 4.5:1 that size needs. The close button inherits. */
.pcat-chip {
  background: var(--pcat-accent);
  color: var(--pcat-on-accent);
  font-weight: 600;
}
.pcat-chip button,
.pcat-chip button:hover,
.pcat-chip button:focus {
  color: var(--pcat-on-accent);
  background-color: transparent;
}
.pcat-chip button:focus-visible { outline-color: var(--pcat-accent-ink); }

/* Scroll-snap and programmatic smooth scrolling do not co-operate on this
   track: scrollTo({behavior:'smooth'}) is re-targeted back to the first snap
   point, so revealing the active tile silently did nothing while a plain
   behavior:'auto' scroll of the same distance worked. A filter strip gains
   very little from snapping and a great deal from landing on the right tile. */
.pcat-rail__track { scroll-snap-type: none; }
.pcat-rail__item  { scroll-snap-align: none; }

/* ---------------------------------------------- brand card: logo overlay
   The signpost is the same three words on every card, so twenty-one of them
   stacked down the page is just noise. It covers the brand's logo while the
   card is pointed at instead -- the logo has already done its job of saying
   which brand this is by the time you have reached for it.

   Nothing here shifts the layout: the overlay is taken out of flow and fills
   the well it sits in. The well already clips to its own corners, so the gold
   follows them. */
.pcat-bcard__media { position: relative; overflow: hidden; }

.pcat-bcard__go {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pcat-on-selected);
  /* Navy rather than gold, and thinner than the gold could ever be. Dark ink on
     a gold wash needed 85% opacity to survive a dark logo underneath; white on
     a navy wash gets darker as the logo does, so transparency costs it nothing.
     At 72% the worst case is still 6:1 and the logo reads clearly through. */
  background: color-mix(in srgb, var(--pcat-selected) 72%, transparent);
  opacity: 0;
  transition: opacity .14s ease;
}
.pcat-bcard:hover .pcat-bcard__go,
.pcat-bcard:focus-within .pcat-bcard__go { opacity: 1; }

/* A touch device has no hover, so the overlay would sit there permanently
   covering every logo. It is withheld instead: the card is tappable as a whole
   and its name is beside it, so nothing is lost but the label. */
@media (hover: none) {
  .pcat-bcard__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pcat-bcard__go { transition: none; }
}

/* ================================================ selected states go navy
   Two jobs were sharing one colour. Gold now means "do this" -- the quote
   links, the Visit website button, the hover overlay -- and the logo navy
   means "this one is chosen". Anything that marks the current selection is
   below; everything still gold is a call to action or decoration.

   White on #0b2163 is 14.7:1, so this is the highest-contrast pairing on the
   page, which suits the thing it has to announce. */
.pcat-cat.is-active,
.pcat-cat.is-active:hover,
.pcat-cat.is-active:focus {
  color: var(--pcat-on-selected);
  background: var(--pcat-selected);
  background-color: var(--pcat-selected);
}
.pcat-cat.is-active .pcat-cat__count { opacity: .85; }

.pcat-rail__item.is-active,
.pcat-rail__item.is-active:hover,
.pcat-rail__item.is-active:focus {
  color: var(--pcat-on-selected);
  background-color: var(--pcat-selected);
  border-color: var(--pcat-selected);
}
.pcat-rail__item.is-active .pcat-rail__count { color: var(--pcat-on-selected); opacity: .85; }

/* A chip is the same statement as the tile it mirrors, so it says it the same
   way -- gold here beside a navy tile would read as two different meanings. */
.pcat-chip { background: var(--pcat-selected); color: var(--pcat-on-selected); }
.pcat-chip button,
.pcat-chip button:hover,
.pcat-chip button:focus { color: var(--pcat-on-selected); background-color: transparent; }

.pcat-pager__num.is-current,
.pcat-pager__num.is-current:hover {
  color: var(--pcat-on-selected);
  background-color: var(--pcat-selected);
  border-color: var(--pcat-selected);
}

/* The ticked box in the facet and the dropdown is also a selection. */
.pcat-opt__box:checked ~ .pcat-brow__mark {
  color: var(--pcat-on-selected);
  background: var(--pcat-selected);
  border-color: var(--pcat-selected);
}
.pcat-opt__box:checked ~ .pcat-opt__tile .pcat-opt__check {
  color: var(--pcat-on-selected);
  background: var(--pcat-selected);
}
.pcat-opt__box:checked ~ .pcat-opt__tile {
  border-color: var(--pcat-selected);
  box-shadow: inset 0 0 0 1px var(--pcat-selected);
}
.pcat-opt__box:checked ~ .pcat-brow__name { color: var(--pcat-selected); }

/* The rail's arrows were pinned just outside the track's edges but inside the
   rail box, which put them on top of the first and last chips. They get gutters
   of their own instead. The gutters are there whether or not the arrows are, so
   a chip never slides under one and nothing shifts when an arrow appears at the
   end of a scroll. Only the scrolling rail has arrows to make room for. */
.pcat-rail:not(.pcat-rail--wrap) {
  padding-left: 38px;
  padding-right: 38px;
}
.pcat-rail__nav[data-scroll="prev"] { left: 0; }
.pcat-rail__nav[data-scroll="next"] { right: 0; }

/* The hovered card's name goes with its overlay -- a gold name beside a navy
   wash would look like two hover states landing at once. */
.pcat-bcard:hover .pcat-bcard__link,
.pcat-card__title .pcat-bcard__link:hover,
.pcat-card__title .pcat-bcard__link:focus {
  color: var(--pcat-selected);
}

/* ------------------------------------------- logos drawn for a dark page
   A white wordmark on transparency is simply absent on the light wells every
   other logo wants. Those few get their own surface instead of everyone
   losing theirs. The navy is the one the selected states use, so a dark tile
   reads as part of the palette rather than as a hole in the grid. */
.pcat-logo--dark {
  background: var(--pcat-selected);
}
/* The brand card's well is bigger than the logo and lets it breathe; padding
   keeps the mark off the edges of a tile that is now a visible rectangle. */
.pcat-bcard__media.pcat-logo--dark { padding: 14px; }
.pcat-bintro__logo.pcat-logo--dark { border-color: var(--pcat-selected); }

/* The column is clamped above, but the belt goes on the item too: min-width on
   .pcat-main is the property that actually decides this, and it holds however
   the template is written later. */
.pcat-main { min-width: 0; }