/**
 * Bridge control panel.
 *
 * Deliberately minimal. The archive integration emits one Electron-compatible
 * outer widget shell around the whole filter on every owned storefront
 * surface. Its geometry is the measured Category archive card, so Search does
 * not depend on Electron's taxonomy-only selector. The site is RTL, so spacing
 * uses logical properties rather than left/right.
 */

.pcf-filter-shell {
  box-sizing: border-box;
  inline-size: 100%;
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: 8px;
  /* 0.9.23: the operator's own filter background, when one is set. The card
     is what a customer sees as the filter's background on an archive -- the
     panel inside it is transparent -- so a panel surface that only reached the
     panel was never visible on the storefront. Unset keeps the white card. */
  background: var(--pcf-panel-surface, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 0.9.24: the panel inside the card carries the operator's filter background.
   On Electron the card is the theme's own widget, and the theme forces it
   white with !important, so the card rule above cannot be what shows it. The
   panel fills the card's content box, which is what the customer reads as the
   filter; unset keeps it transparent exactly as before. */
.pcf-filter-shell > .pcf-panel {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--pcf-panel-surface, transparent);
  box-shadow: none;
}

.pcf-panel {
  /* All styles share Clean geometry; depth never consumes inline space. */
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  margin-inline: 0;
  padding-inline: 0;
  --pcf-border: #e3e8ee;
  --pcf-accent: #07a8e6;
  --pcf-selected-bg: #0784b5;
  --pcf-selected-text: #ffffff;
  --pcf-hover: #e8f7fc;
  --pcf-glow-color: #006eff;
  --pcf-hover-shadow: 0 8px 20px rgba(0, 110, 255, 0.15), 0 3px 10px rgba(0, 0, 0, 0.08);
  --pcf-selected-shadow: 0 8px 20px rgba(0, 110, 255, 0.15), 0 3px 10px rgba(0, 0, 0, 0.08);
  --pcf-focus-ring: #075f83;
  --pcf-surface: #ffffff;
  --pcf-heading-accent: #eaeef2;
  /* 0.9.18. Corner radius of the family heading's own background. Presentation
     only, and zero by default so the heading stays flush with the group it
     sits in, exactly as the approved artifact draws it. */
  --pcf-heading-radius: 0px;
  --pcf-heading-text: #263238;
  --pcf-heading-size: 14px;
  --pcf-heading-weight: 700;
  --pcf-heading-padding: 0px 0px;
  --pcf-heading-spacing: 8px;
  --pcf-group-spacing: 12px;
  --pcf-term-size: 14px;
  --pcf-radius: 4px;
  --pcf-pill-radius: 16px;
  --pcf-tile-radius: 16px;
  --pcf-input-radius: 16px;
  --pcf-term-padding: 6px 10px;
  --pcf-columns: 1;
  /* 0.9.0 form tokens. The compiled rule overrides these; these values are
     what an unconfigured install renders, and they are exactly the 0.8.32
     geometry so nothing moves until an operator asks it to. */
  --pcf-pill-height: 34px;
  --pcf-tile-height: 58px;
  --pcf-section-gap: 12px;
  --pcf-section-padding: 0px 0px;
  /* 0.9.7: the shell may be given its own surface. Unset falls back to the
     family surface token, which is exactly the shipped rendering. */
  background: var(--pcf-panel-surface, var(--pcf-surface));
}

.pcf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-block-end: 10px;
}

.pcf-panel-title {
  font-weight: 600;
  color: var(--pcf-accent);
}

.pcf-reset,
.pcf-apply {
  cursor: pointer;
  border: 1px solid var(--pcf-border);
  background: var(--pcf-surface);
  border-radius: var(--pcf-radius);
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
}

.pcf-apply {
  width: 100%;
  background: var(--pcf-accent);
  border-color: var(--pcf-accent);
  color: #fff;
  padding: 8px 12px;
}

/* The heading-row Apply is a mobile-only duplicate of the existing action.
   Keeping it out of desktop layout preserves the approved panel geometry. */
.pcf-apply--top {
  display: none;
  width: auto;
  flex: 0 0 auto;
}

.pcf-reset[hidden],
.pcf-apply[hidden] {
  display: none;
}

/* Availability, retained-value removal and empty-family suppression all use
   the native hidden contract. Author rules below intentionally make options
   flex/grid items, so preserve hidden at author origin as well: otherwise a
   zero-result item has the right DOM state but still owns a visible box. */
.pcf-panel [hidden] {
  display: none !important;
}

.pcf-section {
  display: block;
  clear: both;
  inline-size: 100%;
  box-sizing: border-box;
  padding-block-end: var(--pcf-group-spacing);
  margin-block-end: var(--pcf-section-gap, var(--pcf-group-spacing));
  border-block-end: 1px solid var(--pcf-border);
}

.pcf-section:last-child {
  border-block-end: 0;
}

.pcf-section-title {
  display: block;
  float: none;
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
  background: var(--pcf-heading-accent);
  color: var(--pcf-heading-text);
  margin: 0 0 var(--pcf-heading-spacing);
  padding: var(--pcf-heading-padding);
  font-size: var(--pcf-heading-size);
  font-weight: var(--pcf-heading-weight);
}

.pcf-options {
  display: grid;
  grid-template-columns: repeat(var(--pcf-columns), minmax(0, 1fr));
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.pcf-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

.pcf-label {
  margin: 0;
  cursor: pointer;
  min-width: 0;
  border-radius: var(--pcf-radius);
  font-size: var(--pcf-term-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pcf-label-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A term starts with the panel's readable text colour in both hosts. Checked
   styles still own selected colour; descendants inherit that exact choice. */
.pcf-panel .pcf-section .pcf-input:not(:checked) + .pcf-label {
  color: var(--pcf-heading-text);
}

.pcf-panel .pcf-section .pcf-label .pcf-label-text {
  color: inherit;
}

/* ==========================================================================
   0.9.22 -- host isolation

   The panel renders inside two hosts the plugin does not own: the storefront
   theme (Electron plus its Elementor kit) and wp-admin, which hosts the
   Preview. Both style bare elements the panel is built from -- label, span,
   li, ul, input, button, img -- and wherever this stylesheet left a property
   unstated the host decided it, differently in each. Measured on the live DEV
   storefront against the Preview stage:

   - `label span { line-height: 0 }` collapsed every term's text box, so a
     Checkboxes, Dropdown, Multi Select or Tree row shrank to its checkbox and
     its text and selected tick painted over the neighbouring row;
   - `label { width: 100% }` stretched a text choice across its row on the
     storefront while the Preview hugged the word;
   - sidebar `li:not(:first-child) { margin-top: 10px }` replaced the row gap;
   - `ul { text-transform: capitalize }` rewrote Latin custom labels (i7 -> I7)
     on the storefront only;
   - the Elementor kit painted Reset, Apply and the summary chips in its own
     primary colour, so the Accent token never reached the call to action;
   - theme and wp-admin input rules resized the price boxes and restyled the
     checkbox, and the kit removed the swatch outline.

   Every declaration below states the value the Preview already showed, from
   the same tokens, at a specificity a host element or class rule cannot
   reach. None of it names a family or a host class, so it holds for every
   family and every Display As mode, including ones adopted later. The family
   heading is the one exception that needs more; see the heading rule. */
.pcf-panel .pcf-options,
.pcf-panel .pcf-summary {
  text-transform: none;
}

.pcf-panel .pcf-options > .pcf-option {
  margin: 0 0 4px;
}

.pcf-panel .pcf-label span {
  line-height: inherit;
}

/* Text choices own their row and paint hover and selected surfaces on a box
   with room around the word. Without it the one-pixel selected ring cut
   through a short label such as "כן". */
/* A zero flex basis takes the rest of the row whatever width a host gives a
   bare label, so the row is the same in the Preview and on the storefront. */
.pcf-panel :is(.pcf-options--list, .pcf-options--scroll, .pcf-options--tree) .pcf-label {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  padding-block: 0;
  padding-inline: 6px;
  vertical-align: baseline;
}

/* The browser's own checkbox, in the operator's Accent. wp-admin restyles
   every checkbox into its own 16px box, so the Preview drew a control the
   storefront never shows and the Accent token never reached it. `revert`
   hands each property back to the browser instead of guessing its values. */
.pcf-panel :is(.pcf-options--list, .pcf-options--scroll, .pcf-options--tree) .pcf-input[type="checkbox"] {
  appearance: revert;
  inline-size: revert;
  block-size: revert;
  margin: 0;
  padding: revert;
  border: revert;
  border-radius: revert;
  background: revert;
  box-shadow: none;
  vertical-align: baseline;
  accent-color: var(--pcf-accent);
}

.pcf-panel .pcf-reset,
.pcf-panel .pcf-summary__chip {
  color: inherit;
  background-color: var(--pcf-surface);
  border-radius: var(--pcf-radius);
  text-transform: none;
}

.pcf-panel .pcf-apply {
  color: #fff;
  background-color: var(--pcf-accent);
  border-radius: var(--pcf-radius);
  text-transform: none;
}

.pcf-panel .pcf-summary__chip {
  border-radius: calc(var(--pcf-radius) + 2px);
}

/* The kit repaints buttons again on hover and focus, one pseudo-class above
   the rules just stated. The panel's buttons do not change colour on either. */
.pcf-panel .pcf-reset:is(:hover, :focus),
.pcf-panel .pcf-summary__chip:is(:hover, :focus) {
  color: inherit;
  background-color: var(--pcf-surface);
}

.pcf-panel .pcf-apply:is(:hover, :focus) {
  color: #fff;
  background-color: var(--pcf-accent);
}

.pcf-panel .pcf-range-values input[type="number"] {
  box-sizing: border-box;
  min-block-size: 0;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--pcf-border);
  border-radius: var(--pcf-input-radius);
  color: inherit;
  background-color: var(--pcf-surface);
  box-shadow: none;
  line-height: normal;
}

.pcf-panel .pcf-range-values input[type="number"]:focus {
  border-color: var(--pcf-border);
  box-shadow: none;
}

.pcf-panel .pcf-media--swatch {
  border: 1px solid var(--pcf-border);
}

/* The heading carries the theme's `widget-title` class on purpose, so it keeps
   the sidebar's typeface. The theme styles that class under an ID selector,
   `#nt-sidebar .widget-title`, which no class selector can outrank, and it was
   replacing the operator's heading colour, weight and spacing with its own:
   DEV published #1e3a8a at 700 and the storefront drew #07a8e6 at 600, while
   the Preview drew the saved value. `!important` is unavoidable against an ID
   selector and is limited to exactly the properties that rule sets. */
.pcf-panel .pcf-section-title {
  color: var(--pcf-heading-text) !important;
  font-style: normal !important;
  font-weight: var(--pcf-heading-weight) !important;
  line-height: 1.6 !important;
  text-transform: none !important;
  margin-block-end: var(--pcf-heading-spacing) !important;
}

.pcf-range {
  display: grid;
  gap: 8px;
}

/* The value row follows the page.
   It used to force `direction: ltr` so the cheaper end sat on the left. On a
   right-to-left storefront that is the wrong end: a Hebrew reader starts at the
   right, so the minimum belongs there. Inheriting the page direction puts the
   first cell in the DOM -- the minimum -- on the right under RTL and on the
   left under LTR, which is the same rule expressed once instead of two mirrored
   rules. The slider below follows the page too -- see there. */
.pcf-range-values {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pcf-range-values input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--pcf-border);
  border-radius: var(--pcf-input-radius);
  font: inherit;
  /* `start`, not `right`: the same declaration aligns to the right under RTL
     and to the left under LTR, so `החל מ - 1298` reads from the right edge in
     Hebrew and `From - 1298` reads from the left edge in English. Letting the
     field inherit the page direction is also what keeps the word, the hyphen
     and the number in that order rather than mirroring the number to the far
     side. */
  text-align: start;
}

/* No spinner.
   Two stepper arrows inside a cell this narrow crowd the number and, on a
   right-to-left row, sit where the eye starts reading. This is presentation
   only: the field stays `type="number"`, so the numeric keypad, Up and Down,
   the step, min/max validation and every assistive-technology affordance are
   untouched. Both vendor forms are needed -- WebKit and Blink expose the
   buttons as pseudo-elements, Gecko only honours the appearance switch. */
.pcf-range-values input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.pcf-range-values input[type="number"]::-webkit-outer-spin-button,
.pcf-range-values input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* The slider inherits the page direction, exactly like the value row above.
   0.8.17 let the row follow the page but kept the slider `ltr`, so one control
   read in two directions: under RTL the minimum field sat on the right while
   the minimum thumb sat on the left, and each handle drove the field on the
   opposite side. A native range input honours its direction -- under RTL its
   minimum is on the right, a larger value moves the thumb left, and the arrow
   keys follow the thumb -- and the painted span below uses logical offsets, so
   nothing here has to be mirrored by hand. `pan-y` keeps a horizontal press on
   the track for the slider instead of the page. */
.pcf-range-slider {
  position: relative;
  block-size: 28px;
  touch-action: pan-y;
}

.pcf-range-slider::before {
  content: "";
  position: absolute;
  inset: 12px 7px auto;
  block-size: 3px;
  border-radius: 999px;
  background: var(--pcf-border);
}

.pcf-range-slider::after {
  content: "";
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: var(--pcf-range-start, 0%);
  inline-size: calc(var(--pcf-range-end, 100%) - var(--pcf-range-start, 0%));
  block-size: 3px;
  border-radius: 999px;
  background: var(--pcf-accent);
}

.pcf-range-track {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.pcf-range-track--min {
  z-index: 2;
}

.pcf-range-track--max {
  z-index: 3;
}

.pcf-range-track::-webkit-slider-runnable-track {
  block-size: 3px;
  background: transparent;
}

.pcf-range-track::-moz-range-track {
  block-size: 3px;
  background: transparent;
}

.pcf-range-track::-webkit-slider-thumb {
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: -5.5px;
  border: 2px solid var(--pcf-accent);
  border-radius: 50%;
  background: var(--pcf-surface);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  cursor: grab;
}

.pcf-range-track::-moz-range-thumb {
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid var(--pcf-accent);
  border-radius: 50%;
  background: var(--pcf-surface);
  box-shadow: none;
  pointer-events: auto;
  cursor: grab;
}

.pcf-range-track:focus-visible {
  outline: 0;
}

.pcf-range-track:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--pcf-focus-ring);
}

.pcf-range-track:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--pcf-focus-ring);
}

/* Themes commonly style every `input` in a sidebar as a boxed text control.
   This selector is intentionally stronger than those generic rules: the two
   range inputs are only transparent interaction planes over the shared track,
   never visible rectangular fields of their own. */
.pcf-panel .pcf-range-slider > input.pcf-range-track[type="range"] {
  box-sizing: border-box;
  block-size: 28px;
  min-block-size: 0;
  max-block-size: 28px;
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.pcf-panel .pcf-range-slider > input.pcf-range-track[type="range"]::-webkit-slider-runnable-track {
  block-size: 3px;
  border: 0;
  background: transparent;
}

.pcf-panel .pcf-range-slider > input.pcf-range-track[type="range"]::-moz-range-track {
  block-size: 3px;
  border: 0;
  background: transparent;
}

.pcf-panel .pcf-range-slider > input.pcf-range-track[type="range"]::-webkit-slider-thumb {
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: -5.5px;
  border: 2px solid var(--pcf-accent);
  border-radius: 50%;
  background: var(--pcf-surface);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.pcf-panel .pcf-range-slider > input.pcf-range-track[type="range"]::-moz-range-thumb {
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid var(--pcf-accent);
  border-radius: 50%;
  background: var(--pcf-surface);
  box-shadow: none;
}

.pcf-panel .pcf-range-slider > input.pcf-range-track[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--pcf-focus-ring);
}

.pcf-panel .pcf-range-slider > input.pcf-range-track[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--pcf-focus-ring);
}

.pcf-status:empty {
  display: none;
}

.pcf-status {
  margin: 8px 0 0;
  font-size: 13px;
  color: #b3261e;
}

/* The results region stays interactive while a refresh is in flight; it is
   only dimmed, so a mid-flight click is still the user's to make. */
.pcf-results.pcf-busy {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .pcf-results.pcf-busy {
    transition: none;
  }
}

/* The degraded-state notice.

   Lives immediately above the results region and outside it, so replacing the
   results cannot erase the explanation of why they look as they do. Styled as a
   warning rather than an error: the page is working, it just could not honour
   every part of what was asked for. */
.pcf-notice {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #f0c36d;
  border-inline-start-width: 4px;
  border-radius: 4px;
  background: #fff8e6;
  color: #6b4b00;
  font-size: 14px;
  line-height: 1.5;
}

.pcf-notice[hidden] {
  display: none;
}

.pcf-notice:empty {
  display: none;
}

/* Inert pager controls: a page target could not be determined, so the control
   is shown in place but cannot be clicked. Visibly not a link, rather than a
   link that silently does nothing. */
[data-pcf-inert] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Batch 4 Appearance layer. All selectors are bounded to the existing filter
   component and all editable values arrive through the custom properties
   above. The Admin palette is intentionally not imported. */
.pcf-fieldset {
  display: block;
  inline-size: 100%;
  box-sizing: border-box;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.pcf-reset:focus-visible,
.pcf-apply:focus-visible,
.pcf-dropdown__summary:focus-visible,
.pcf-more__summary:focus-visible,
.pcf-range-values input:focus-visible,
.pcf-input:focus-visible + .pcf-label {
  outline: 3px solid var(--pcf-focus-ring);
  outline-offset: 2px;
}

.pcf-input {
  flex: 0 0 auto;
  margin-block-start: 0.35em;
  accent-color: var(--pcf-accent);
}

.pcf-label:hover {
  background: var(--pcf-hover);
}

.pcf-input:checked + .pcf-label {
  font-weight: 600;
}

/* P3-3: Selectable Pills remains a checkbox plus its adjacent label. */
.pcf-options--pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-height: none;
  overflow: visible;
}

.pcf-panel .pcf-section .pcf-options--pills > li.pcf-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  block-size: var(--pcf-pill-height);
  min-block-size: var(--pcf-pill-height);
  max-block-size: var(--pcf-pill-height);
  margin: 0;
  padding: 0;
  line-height: 1;
}

.pcf-options--pills .pcf-input {
  position: absolute;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.pcf-panel .pcf-options--pills .pcf-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--pcf-pill-height);
  block-size: var(--pcf-pill-height);
  min-block-size: var(--pcf-pill-height);
  max-block-size: var(--pcf-pill-height);
  margin: 0;
  padding-block: 0;
  padding-inline: 10px;
  border: 1px solid var(--pcf-border);
  border-radius: var(--pcf-pill-radius);
  color: inherit;
  background: var(--pcf-surface);
  line-height: 1;
  white-space: nowrap;
  overflow-wrap: normal;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, color 0.2s ease;
}

/* A pill never grows past its row. Its height is fixed and its text does not
   wrap, so a long custom label -- a full memory description, a long Hebrew
   value -- used to run out of the pill and out of the panel. The pill is now
   bounded by the row and the text ends in an ellipsis inside it; the whole
   label is still the accessible name. The label, not the text, keeps
   overflow visible so a corner indicator is never clipped. */
.pcf-panel .pcf-section .pcf-options--pills > li.pcf-option,
.pcf-panel .pcf-options--pills .pcf-label {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.pcf-panel .pcf-options--pills .pcf-label-text {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcf-panel .pcf-options--pills .pcf-label:hover {
  background: var(--pcf-hover);
  box-shadow: var(--pcf-hover-shadow);
}

.pcf-options--pills .pcf-input:checked + .pcf-label {
  border-color: var(--pcf-selected-bg);
  color: var(--pcf-selected-text);
  background: var(--pcf-selected-bg);
  box-shadow: var(--pcf-selected-shadow);
}

.pcf-panel .pcf-options--pills .pcf-input:checked + .pcf-label:hover {
  border-color: var(--pcf-selected-bg);
  color: var(--pcf-selected-text);
  background: var(--pcf-selected-bg);
  box-shadow: var(--pcf-selected-shadow);
}

.pcf-dropdown {
  border: 1px solid var(--pcf-border);
  border-radius: var(--pcf-input-radius);
  background: var(--pcf-surface);
}

/* The dropdown chrome now sits on the family's own disclosure, so the heading
   keeps the heading's typography. Without this the inner-control styling below
   -- accent colour, term padding, term size -- would repaint the family title. */
.pcf-section-title.pcf-dropdown__summary {
  padding: var(--pcf-heading-padding);
  color: var(--pcf-heading-text);
  font-size: var(--pcf-heading-size);
  font-weight: var(--pcf-heading-weight);
}

.pcf-more {
  display: block;
  clear: both;
  inline-size: 100%;
  box-sizing: border-box;
  margin-block-start: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pcf-dropdown__summary,
.pcf-more__summary {
  inline-size: 100%;
  box-sizing: border-box;
  padding: var(--pcf-term-padding);
  cursor: pointer;
  font-size: var(--pcf-term-size);
  font-weight: 600;
  color: var(--pcf-accent);
}

.pcf-more__summary::marker {
  color: var(--pcf-accent);
}

.pcf-dropdown[open] > .pcf-dropdown__summary {
  border-block-end: 1px solid var(--pcf-border);
  background: var(--pcf-hover);
}

.pcf-dropdown > .pcf-options {
  padding: 8px;
}

.pcf-more > .pcf-options {
  margin-block-start: 8px;
  padding: 0;
  max-block-size: none;
  overflow: visible;
}

.pcf-more__less {
  display: none;
}

.pcf-more[open] > .pcf-more__summary .pcf-more__more {
  display: none;
}

.pcf-more[open] > .pcf-more__summary .pcf-more__less {
  display: inline;
}

.pcf-multiselect {
  max-height: 180px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--pcf-border);
  border-radius: var(--pcf-input-radius);
  background: var(--pcf-surface);
}

.pcf-options--scroll {
  max-height: none;
  overflow: visible;
}

/* Logo/image absence deliberately leaves the customer text visible. */
.pcf-options--logos,
.pcf-options--images,
.pcf-options--swatches {
  grid-template-columns: repeat(var(--pcf-filter-columns, var(--pcf-columns)), minmax(0, 1fr));
  gap: 8px;
  max-height: none;
}

/* Tile glow belongs outside the fixed tile box. The generic options list is
   scrollable, which clips Brand shadows at the first and last row even though
   every ancestor around it is visible. Grid-capable media modes never need
   their own scrollport, so let the shared Preview/storefront grid paint the
   interaction treatment without changing a tile or row dimension. */
.pcf-panel .pcf-options--logos,
.pcf-panel .pcf-options--images,
.pcf-panel .pcf-options--swatches {
  overflow: visible;
}

.pcf-section[data-pcf-columns="1"] {
  --pcf-filter-columns: 1;
}

.pcf-section[data-pcf-columns="2"] {
  --pcf-filter-columns: 2;
}

.pcf-section[data-pcf-columns="3"] {
  --pcf-filter-columns: 3;
}

.pcf-section[data-pcf-columns="4"] {
  --pcf-filter-columns: 4;
}

.pcf-panel .pcf-section .pcf-options--logos > li.pcf-option,
.pcf-panel .pcf-section .pcf-options--swatches > li.pcf-option {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  block-size: var(--pcf-tile-height);
  min-block-size: var(--pcf-tile-height);
  max-block-size: var(--pcf-tile-height);
  margin: 0;
  padding: 0;
}

.pcf-panel .pcf-section .pcf-options--images > li.pcf-option {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  block-size: 68px;
  min-block-size: 68px;
  max-block-size: 68px;
  margin: 0;
  padding: 0;
}

.pcf-options--logos .pcf-input,
.pcf-options--images .pcf-input,
.pcf-options--swatches .pcf-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  clip-path: inset(50%);
}

.pcf-options--logos .pcf-label,
.pcf-options--images .pcf-label,
.pcf-options--swatches .pcf-label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  block-size: var(--pcf-tile-height);
  min-block-size: var(--pcf-tile-height);
  max-block-size: var(--pcf-tile-height);
  padding: var(--pcf-term-padding);
  border: 1px solid var(--pcf-border);
  border-radius: var(--pcf-tile-radius);
  background: var(--pcf-surface);
}

.pcf-options--images .pcf-label {
  block-size: 68px;
  min-block-size: 68px;
  max-block-size: 68px;
}

.pcf-options--logos .pcf-label-text,
.pcf-options--images .pcf-label-text,
.pcf-options--swatches .pcf-label-text {
  min-inline-size: 0;
  /* Bounded by the tile. A Brand tile is a centred column, where a flex item
     takes its max-content width, so min-inline-size alone let a long
     text-fallback name run out of the tile instead of ending in an ellipsis. */
  max-inline-size: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pcf-panel .pcf-options--logos .pcf-label {
  position: relative;
  flex-direction: column;
  justify-content: center;
  height: var(--pcf-tile-height);
  block-size: var(--pcf-tile-height);
  min-block-size: var(--pcf-tile-height);
  max-block-size: var(--pcf-tile-height);
  padding: 5px;
  text-align: center;
  background: var(--pcf-surface);
  box-shadow: none;
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pcf-options--logos .pcf-label--has-media .pcf-label-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* The label already exists for accessibility. A failed lazy image promotes it
   into the unchanged tile box and removes only the unusable decoration. */
.pcf-options--logos .pcf-label--media-missing .pcf-media-box {
  display: none;
}

/* The tooltip owns `::before`, and it owns it for one hard reason: an element
   has exactly one `::after`, and on a media tile the selected indicator has
   already claimed it -- see the `[data-pcf-display="brand_logos"]` corner rule
   further down. When both lived on `::after` the two rules interleaved on a
   single box: the indicator won `content`, so the tooltip text never appeared,
   while the tooltip's padding, dark background and `white-space: nowrap`
   stayed applied to the check mark, and the hover rule's
   `transform: translate(-50%, 0)` overrode the indicator's `transform: none`
   and dragged it out of its corner. Selected + hover therefore moved, resized
   and repainted the mark, which is exactly what it looked like.

   Two pseudo-elements, two independent states. Nothing here is per-family:
   every logo tile in every Manufacturer or Brand family resolves the same way.
   The label is already `position: relative`, and `z-index: 3` keeps the tooltip
   above the indicator on the rare overlap. */
.pcf-panel[data-pcf-brand-logo-tooltip="on"] .pcf-options--logos .pcf-label[data-pcf-tooltip]::before {
  content: attr(data-pcf-tooltip);
  position: absolute;
  z-index: 3;
  inset-block-end: calc(100% + 6px);
  left: 50%;
  max-inline-size: min(220px, 90vw);
  padding: 5px 8px;
  border-radius: 4px;
  color: #ffffff;
  background: #263238;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.pcf-panel[data-pcf-brand-logo-tooltip="on"] .pcf-options--logos .pcf-label[data-pcf-tooltip]:hover::before,
.pcf-panel[data-pcf-brand-logo-tooltip="on"] .pcf-options--logos .pcf-input:focus-visible + .pcf-label[data-pcf-tooltip]::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Brand tiles borrow the live category bar's real hover glow without its
   vertical lift. Keeping the surface unfilled protects real logos while the
   Accent border and glow communicate hover and selected state.

   The hover half excludes the checked tile even though the checked half of this
   same list would give it identical declarations. Nothing renders differently
   for it -- the point is that "hover styling never applies to a selected logo
   tile" holds as one readable rule across the whole file, so the next variant
   added here cannot quietly reintroduce the repaint the Premium depth rule
   caused.

   0.9.22: one selected contract for every media tile. Image and Swatch tiles
   used to fill with --pcf-selected-bg, which contradicted the "never filled"
   statement further down, made "Selected tile: outline" render as a solid fill
   on two of the three media modes, and let the inner highlight wash the top
   half of a filled tile. They now say "selected" exactly as a Brand tile does,
   so Tile select outline and tint mean the same thing on all three. Hover joins
   them too: the tile's own surface rule outranks the generic label hover, so an
   Image or Swatch tile had no hover state at all. */
.pcf-panel .pcf-options--images .pcf-input:not(:checked) + .pcf-label:hover,
.pcf-panel .pcf-options--swatches .pcf-input:not(:checked) + .pcf-label:hover,
.pcf-panel .pcf-options--logos .pcf-input:not(:checked) + .pcf-label:hover,
.pcf-panel .pcf-options--images .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-options--swatches .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-options--logos .pcf-input:checked + .pcf-label {
  border-color: var(--pcf-accent);
  color: inherit;
  background: var(--pcf-surface);
  box-shadow: var(--pcf-hover-shadow);
}

.pcf-panel .pcf-options--images .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-options--swatches .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-options--logos .pcf-input:checked + .pcf-label {
  outline: 2px solid var(--pcf-accent);
  outline-offset: 0;
  box-shadow: var(--pcf-selected-shadow);
}

.pcf-panel .pcf-options--images .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-options--swatches .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-options--logos .pcf-input:checked + .pcf-label:hover {
  box-shadow: var(--pcf-selected-shadow);
  background: var(--pcf-surface);
}

.pcf-panel .pcf-options--images .pcf-input:focus-visible + .pcf-label,
.pcf-panel .pcf-options--swatches .pcf-input:focus-visible + .pcf-label,
.pcf-panel .pcf-options--logos .pcf-input:focus-visible + .pcf-label {
  outline: 3px solid var(--pcf-focus-ring);
  outline-offset: 2px;
}

.pcf-media {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  object-fit: contain;
}

.pcf-media-box {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  max-inline-size: 100%;
}

.pcf-panel .pcf-options--logos .pcf-media-box {
  inline-size: 100%;
  height: 32px;
  block-size: 32px;
  min-block-size: 32px;
  max-block-size: 32px;
}

.pcf-media--logo {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.pcf-panel .pcf-options--logos .pcf-media--logo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.pcf-media--swatch {
  width: 28px;
  height: 28px;
  border: 1px solid var(--pcf-border);
  border-radius: 50%;
}

.pcf-media--image {
  width: 64px;
  height: 48px;
  border-radius: calc(var(--pcf-tile-radius) * 0.6);
}

.pcf-options--tree {
  max-height: none;
  overflow: visible;
}

.pcf-options--branch {
  grid-column: 1 / -1;
  width: 100%;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--pcf-border);
}

.pcf-tree-control {
  display: contents;
}

.pcf-tree-control[hidden] {
  display: none;
}

/* ==========================================================================
   0.9.0 - the Visual Style layer.

   Every rule below is guarded by a data attribute whose value is NOT the Clean
   baseline, and PCF_Controls emits an attribute only when the resolved value
   differs from Clean. A Clean storefront therefore reaches this section of the
   stylesheet and matches nothing: no declaration, no attribute, byte-identical
   to 0.8.32. That is the whole compatibility contract, and it is why there is
   no [data-pcf-depth="flat"] rule anywhere here.

   Scope: sections, not the panel. PCF_Controls resolves the global Appearance
   value against the family's own override and emits the effective answer on
   .pcf-section, so per-family overrides never have to out-specify a
   panel-scoped rule. Only the shell and the action bar are panel-scoped,
   because only they describe the panel as a whole.

   Per-mode differences key off the existing data-pcf-display. No selector here
   names a filter family.

   Glow alpha is derived from --pcf-glow-color with color-mix(), and every such
   declaration is preceded by a plain rgba() fallback so an engine without
   color-mix() renders the Clean shadow rather than none.
   ========================================================================== */

/* --- depth: soft ------------------------------------------------------- */
.pcf-panel .pcf-section[data-pcf-depth="soft"] {
  background: var(--pcf-surface);
  border: 0;
  border-radius: calc(var(--pcf-radius) + 6px);
  border-block-end: 0;
  box-shadow: 0 2px 5px rgba(20, 32, 54, 0.05), 0 10px 26px rgba(20, 32, 54, 0.06);
}

/* --- depth: premium ---------------------------------------------------- */
.pcf-panel .pcf-section[data-pcf-depth="premium"] {
  background: var(--pcf-surface);
  background-image: none;
  border: 1px solid #eaeff7;
  border-radius: calc(var(--pcf-radius) + 10px);
  border-block-end: 1px solid #eaeff7;
  box-shadow: 0 2px 4px rgba(14, 26, 48, 0.05), 0 14px 32px rgba(14, 26, 48, 0.09),
    0 28px 56px rgba(14, 26, 48, 0.05), inset 0 1px 0 #fff;
}

.pcf-panel .pcf-section[data-pcf-depth="soft"]:last-child,
.pcf-panel .pcf-section[data-pcf-depth="premium"]:last-child {
  border-block-end: 0;
}

/* The carded inset is the section's own padding, from the operator's token.
   The heading keeps inline-size:100% so it spans that padding box: a <legend>
   given inline-size:auto shrink-wraps to its text and the bar collapses. */
.pcf-panel .pcf-section[data-pcf-depth="soft"],
.pcf-panel .pcf-section[data-pcf-depth="premium"] {
  padding: var(--pcf-section-padding);
}

/* --- shadow strength scales the card, and only the card ---------------- */
.pcf-panel .pcf-section[data-pcf-shadow="off"],
.pcf-panel .pcf-section:not([data-pcf-shadow]) {
  box-shadow: none;
}

.pcf-panel .pcf-section[data-pcf-shadow="soft"] {
  box-shadow: 0 2px 5px rgba(20, 32, 54, 0.05), 0 8px 20px rgba(20, 32, 54, 0.05);
}

.pcf-panel .pcf-section[data-pcf-shadow="medium"] {
  box-shadow: 0 2px 6px rgba(20, 32, 54, 0.06), 0 12px 30px rgba(20, 32, 54, 0.08);
}

.pcf-panel .pcf-section[data-pcf-shadow="strong"] {
  box-shadow: 0 2px 4px rgba(14, 26, 48, 0.05), 0 14px 32px rgba(14, 26, 48, 0.09),
    0 28px 56px rgba(14, 26, 48, 0.05);
  box-shadow: 0 2px 4px rgba(14, 26, 48, 0.05), 0 14px 32px rgba(14, 26, 48, 0.09),
    0 28px 56px rgba(14, 26, 48, 0.05),
    0 2px 12px color-mix(in srgb, var(--pcf-glow-color) 6%, transparent);
}

/* --- control elevation follows depth ------------------------------------ */
.pcf-panel .pcf-section[data-pcf-depth="soft"] .pcf-options--pills .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="soft"] .pcf-options--logos .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="soft"] .pcf-options--images .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="soft"] .pcf-options--swatches .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="soft"] .pcf-dropdown {
  box-shadow: 0 1px 2px rgba(20, 32, 54, 0.07), 0 4px 12px rgba(20, 32, 54, 0.07);
}

.pcf-panel .pcf-section[data-pcf-depth="premium"] .pcf-options--pills .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="premium"] .pcf-options--logos .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="premium"] .pcf-options--images .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="premium"] .pcf-options--swatches .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="premium"] .pcf-dropdown {
  background-image: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: 0 1px 2px rgba(14, 26, 48, 0.06), 0 6px 16px rgba(14, 26, 48, 0.07),
    inset 0 1px 0 #fff;
}

/* The logo half is guarded by `:not(:checked)` and the pills half is not, which
   is a real difference rather than an oversight. A selected pill is filled, so a
   deeper hover shadow reads as the same pill; a selected logo tile is never
   filled -- its whole selected signal IS the border and shadow -- so a hover
   shadow landing on top of it repaints the one thing that says "selected".
   This rule and the selected rule carry equal specificity, so before the guard
   the later one simply won and an already-selected tile changed appearance when
   a pointer crossed it.
   Guarding the hover side rather than re-asserting the selected side keeps this
   generic: whatever a style variant gives a selected tile -- Premium's depth,
   `tile-select="tint"`'s inset ring and glow, any future one -- survives hover
   untouched, with no per-variant or per-manufacturer exception. */
.pcf-panel .pcf-section[data-pcf-depth="premium"] .pcf-options--pills .pcf-label:hover,
.pcf-panel .pcf-section[data-pcf-depth="premium"] .pcf-options--logos .pcf-input:not(:checked) + .pcf-label:hover {
  box-shadow: 0 3px 8px rgba(14, 26, 48, 0.09), 0 12px 28px rgba(0, 110, 255, 0.17),
    inset 0 1px 0 #fff;
  box-shadow: 0 3px 8px rgba(14, 26, 48, 0.09),
    0 12px 28px color-mix(in srgb, var(--pcf-glow-color) 17%, transparent),
    inset 0 1px 0 #fff;
}

/* --- border strength ---------------------------------------------------- */
.pcf-panel .pcf-section[data-pcf-border-strength="none"] .pcf-label,
.pcf-panel .pcf-section[data-pcf-border-strength="none"] .pcf-dropdown {
  border-color: transparent;
}

.pcf-panel .pcf-section[data-pcf-border-strength="hairline"] .pcf-label,
.pcf-panel .pcf-section[data-pcf-border-strength="hairline"] .pcf-dropdown {
  border-color: rgba(16, 28, 50, 0.09);
}

/* Strong is derived from the operator's own border colour. The fixed #c3cede it
   used to be sits eight levels from the default border token, so choosing it
   changed nothing a person could see, and on a darker token it was lighter than
   Standard. The fallback serves an engine without color-mix(). */
.pcf-panel .pcf-section[data-pcf-border-strength="strong"] .pcf-label,
.pcf-panel .pcf-section[data-pcf-border-strength="strong"] .pcf-dropdown {
  border-color: #94a3b8;
  border-color: color-mix(in srgb, var(--pcf-border) 55%, #1e293b);
}

/* --- inner highlight ---------------------------------------------------- */
.pcf-panel .pcf-section[data-pcf-highlight="on"] .pcf-options--pills .pcf-label,
.pcf-panel .pcf-section[data-pcf-highlight="on"] .pcf-options--logos .pcf-label,
.pcf-panel .pcf-section[data-pcf-highlight="on"] .pcf-options--images .pcf-label,
.pcf-panel .pcf-section[data-pcf-highlight="on"] .pcf-options--swatches .pcf-label,
.pcf-panel .pcf-section[data-pcf-highlight="on"] .pcf-dropdown__summary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 58%);
}

/* Premium already gives its controls a sheen. Without this pairing the generic
   highlight rule wins on source order and flattens them back. */
.pcf-panel .pcf-section[data-pcf-depth="premium"][data-pcf-highlight="on"] .pcf-options--pills .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="premium"][data-pcf-highlight="on"] .pcf-options--logos .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="premium"][data-pcf-highlight="on"] .pcf-options--images .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="premium"][data-pcf-highlight="on"] .pcf-options--swatches .pcf-label,
.pcf-panel .pcf-section[data-pcf-depth="premium"][data-pcf-highlight="on"] .pcf-dropdown__summary {
  background-image: linear-gradient(180deg, #ffffff, #fbfcfe 58%);
}

/* --- family heading ------------------------------------------------------ */
.pcf-panel .pcf-section[data-pcf-header="rule"] .pcf-section-title {
  background: transparent;
  border-inline-start: 3px solid var(--pcf-accent);
  padding-inline-start: 10px;
  letter-spacing: -0.01em;
}

.pcf-panel .pcf-section[data-pcf-header="card"] .pcf-section-title {
  background: var(--pcf-heading-accent);
  /* A quiet strip inside the family surface, not another elevated card.
     Keep the operator's heading tint, with no text-colour darkening. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.75));
  border-radius: 0;
  padding: 11px 13px;
  letter-spacing: -0.01em;
  box-shadow: none;
}

/* --- selected value: outline -------------------------------------------- */
.pcf-panel .pcf-section[data-pcf-selected="outline"] .pcf-options--pills .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="outline"] .pcf-options--list .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="outline"] .pcf-options--scroll .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="outline"] .pcf-options--tree .pcf-input:checked + .pcf-label {
  color: var(--pcf-accent);
  background: var(--pcf-surface);
  background-image: none;
  border-color: var(--pcf-accent);
  box-shadow: inset 0 0 0 1px var(--pcf-accent), 0 4px 14px rgba(0, 110, 255, 0.16);
  box-shadow: inset 0 0 0 1px var(--pcf-accent),
    0 4px 14px color-mix(in srgb, var(--pcf-glow-color) 16%, transparent);
}

/* --- selected value: gradient fill --------------------------------------- */
/* --- Soft Fill -------------------------------------------------------------
   "מילוי רך" had no rule of its own, so it fell through to the base checked
   style -- a SOLID --pcf-selected-bg fill, indistinguishable from a full fill.
   It is a tint: the hover surface as the background, the selected colour as the
   text and a one-pixel inset ring, which is what the approved artifact draws and
   what keeps the label readable at ordinary token values.

   Applies by selected-style attribute, so every family that exists now and every
   one adopted later gets it from the same rule. */
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-options--pills .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-options--pills .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-options--list .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-options--list .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-options--scroll .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-options--scroll .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-options--tree .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-options--tree .pcf-input:checked + .pcf-label {
  background: var(--pcf-hover);
  background-image: none;
  color: var(--pcf-selected-bg);
  border-color: var(--pcf-selected-bg);
  box-shadow: inset 0 0 0 1px var(--pcf-selected-bg);
}

/* Hover must not repaint a selected term back to the solid fill. The base rule
   did exactly that, so hovering a selected option changed its colour scheme. */
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-options--pills .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-options--pills .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-options--list .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-options--list .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-options--scroll .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-options--scroll .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-options--tree .pcf-input:checked + .pcf-label:hover,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-options--tree .pcf-input:checked + .pcf-label:hover {
  background: var(--pcf-hover);
  color: var(--pcf-selected-bg);
  border-color: var(--pcf-selected-bg);
  box-shadow: inset 0 0 0 1px var(--pcf-selected-bg);
}

/* Focus is an outline outside the box, so it never repaints the label and can
   never take the text with it. Stated here so a future selected style cannot
   quietly reintroduce a focus rule that fills the element instead.

   0.9.22: this rule used to carry the Soft Fill background and text colour as
   well. It is not scoped to a Display As mode, so a keyboard focus painted an
   UNSELECTED pill, row or tree term exactly like a selected one, and repainted
   a selected swatch or image tile out of its own selected treatment. A
   selected term keeps its tint through the :checked rules above, which outrank
   this one, so focus only ever adds the ring. */
.pcf-panel .pcf-section[data-pcf-selected="soft_fill"] .pcf-input:focus-visible + .pcf-label,
.pcf-panel .pcf-section:not([data-pcf-selected]) .pcf-input:focus-visible + .pcf-label {
  outline: 3px solid var(--pcf-focus-ring);
  outline-offset: 2px;
}

.pcf-panel .pcf-section[data-pcf-selected="gradient_fill"] .pcf-options--pills .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="gradient_fill"] .pcf-options--list .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="gradient_fill"] .pcf-options--scroll .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-selected="gradient_fill"] .pcf-options--tree .pcf-input:checked + .pcf-label {
  color: var(--pcf-selected-text);
  border-color: var(--pcf-selected-bg);
  /* A real two-stop gradient off the operator's own selected colour. The old
     white wash disappeared on a dark selected colour, which is most of them. */
  background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 74%);
  background-image: linear-gradient(
    165deg,
    color-mix(in srgb, var(--pcf-selected-bg) 68%, #ffffff),
    var(--pcf-selected-bg) 74%
  );
  box-shadow: 0 6px 18px rgba(0, 110, 255, 0.34), 0 2px 5px rgba(14, 26, 48, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pcf-glow-color) 34%, transparent),
    0 2px 5px rgba(14, 26, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* A Brand, image or swatch tile is never filled, in any style. A real logo on
   a solid accent is unreadable, and tests/focused-ui-077 pins this. The tile
   says "selected" with its outline, its glow and its indicator instead. */
.pcf-panel .pcf-section[data-pcf-display="brand_logos"] .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-display="image_choices"] .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-display="color_swatches"] .pcf-input:checked + .pcf-label {
  background-image: none;
}

.pcf-panel .pcf-section[data-pcf-tile-select="tint"] .pcf-input:checked + .pcf-label {
  background: var(--pcf-hover);
  background-image: none;
  border-color: var(--pcf-accent);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--pcf-accent), 0 6px 20px rgba(0, 110, 255, 0.22);
  box-shadow: inset 0 0 0 1px var(--pcf-accent),
    0 6px 20px color-mix(in srgb, var(--pcf-glow-color) 22%, transparent);
}

/* --- selection indicator -------------------------------------------------
   One direction-independent check glyph for every selectable family. The
   circular variant decorates this same centered glyph, never a second shape.
   Navigation chevrons below remain separate. */
.pcf-panel .pcf-section[data-pcf-indicator="subtle"] .pcf-input:checked + .pcf-label,
.pcf-panel .pcf-section[data-pcf-indicator="circle"] .pcf-input:checked + .pcf-label {
  position: relative;
}

.pcf-panel .pcf-section[data-pcf-indicator="subtle"] .pcf-input:checked + .pcf-label::after,
.pcf-panel .pcf-section[data-pcf-indicator="circle"] .pcf-input:checked + .pcf-label::after {
  content: "\2713";
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: 14px;
  block-size: 14px;
  font-family: Arial, "Segoe UI Symbol", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  direction: inherit;
  unicode-bidi: isolate;
  inset-inline-end: 8px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.pcf-panel .pcf-section[data-pcf-indicator="circle"] .pcf-input:checked + .pcf-label::after {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--pcf-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 110, 255, 0.42);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--pcf-glow-color) 42%, transparent);
}

/* Reserve room in text choices, including selected dropdown rows. */
.pcf-panel .pcf-section[data-pcf-indicator="subtle"] :is(.pcf-options--pills, .pcf-options--list, .pcf-options--scroll, .pcf-options--tree) .pcf-input:checked + .pcf-label {
  padding-inline-end: 26px;
}

.pcf-panel .pcf-section[data-pcf-indicator="circle"] :is(.pcf-options--pills, .pcf-options--list, .pcf-options--scroll, .pcf-options--tree) .pcf-input:checked + .pcf-label {
  padding-inline-end: 34px;
}

/* Leading edge follows writing direction; the glyph itself never mirrors. */
.pcf-panel .pcf-section[data-pcf-indicator-pos="inline_start"] :is(.pcf-options--pills, .pcf-options--list, .pcf-options--scroll, .pcf-options--tree) .pcf-input:checked + .pcf-label {
  padding-inline: 34px 15px;
}

.pcf-panel .pcf-section[data-pcf-indicator-pos="inline_start"] .pcf-input:checked + .pcf-label::after {
  inset-inline: 8px auto;
}

.pcf-panel .pcf-section[data-pcf-indicator-pos="corner"] :is(.pcf-options--pills, .pcf-options--list, .pcf-options--scroll, .pcf-options--tree) .pcf-input:checked + .pcf-label {
  padding-inline-end: 15px;
}

/* Media choices corner the same mark so it stays clear of the logo/image. */
.pcf-panel .pcf-section[data-pcf-indicator-pos="corner"] .pcf-input:checked + .pcf-label::after,
.pcf-panel .pcf-section:is([data-pcf-display="brand_logos"], [data-pcf-display="image_choices"], [data-pcf-display="color_swatches"]) .pcf-input:checked + .pcf-label::after {
  inset-inline: -6px auto;
  inset-block-start: -6px;
  transform: none;
}

.pcf-panel .pcf-section[data-pcf-indicator="circle"]:is([data-pcf-indicator-pos="corner"], [data-pcf-display="brand_logos"], [data-pcf-display="image_choices"], [data-pcf-display="color_swatches"]) .pcf-input:checked + .pcf-label::after {
  border: 2px solid var(--pcf-surface);
}

/* --- dropdown ------------------------------------------------------------
   Still a native <details> over checkboxes. It is not and never becomes a
   <select>: a select is single-select by nature and would contradict the
   OR-within-family relation the Registry fixes. */
.pcf-panel .pcf-section[data-pcf-menu="elevated"] .pcf-dropdown__summary {
  min-block-size: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 500;
}

/* A closed field needs to say it opens. Drawn as a rotated border rather than
   an icon, because a <use href> would put the substring the markup invariants
   forbid into panel output. */
.pcf-panel .pcf-section[data-pcf-menu="elevated"] .pcf-dropdown__summary::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.pcf-panel .pcf-section[data-pcf-menu="elevated"] .pcf-dropdown[open] > .pcf-dropdown__summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.pcf-panel .pcf-section[data-pcf-menu="elevated"] .pcf-dropdown[open] {
  border-color: var(--pcf-accent);
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcf-glow-color) 10%, transparent);
}

.pcf-panel .pcf-section[data-pcf-menu="elevated"] .pcf-dropdown[open] > .pcf-options {
  margin: 8px;
  padding: 7px;
  border: 1px solid #eaeff7;
  border-radius: calc(var(--pcf-input-radius) - 4px);
  background: var(--pcf-surface);
  box-shadow: 0 14px 34px rgba(14, 26, 48, 0.15);
  max-block-size: 260px;
  overflow-y: auto;
}

.pcf-panel .pcf-section[data-pcf-menu="elevated"] .pcf-dropdown .pcf-label {
  border-radius: calc(var(--pcf-radius) + 2px);
}

/* Menu elevation styles the container. Selection remains owned by the
   configured selected style above, including its text and fill colours. */

/* --- density -------------------------------------------------------------
   Desktop breathing room only. The 44px touch floor below 991px is declared
   after this block and still wins, which tests/accessibility pins. */
.pcf-panel .pcf-section[data-pcf-density="compact"] .pcf-options {
  gap: 5px;
}

.pcf-panel .pcf-section[data-pcf-density="compact"] .pcf-options--pills {
  gap: 6px;
}

.pcf-panel .pcf-section[data-pcf-density="compact"] .pcf-label {
  padding-block: 3px;
}

/* Compact must never be larger than Comfortable. The two rules above were
   written for tiles and pills, whose height is fixed and whose own gap is 8px;
   on a text choice they did the opposite of their name -- the 5px gap is wider
   than the rows' own 4px, and the 3px padding added height to a label that has
   none -- so a Compact Checkboxes, Dropdown, Multi Select or Tree family was
   6px taller per row than a Comfortable one. Text choices tighten instead. */
.pcf-panel .pcf-section[data-pcf-density="compact"] :is(.pcf-options--list, .pcf-options--scroll, .pcf-options--tree) {
  gap: 2px;
}

.pcf-panel .pcf-section[data-pcf-density="compact"] :is(.pcf-options--list, .pcf-options--scroll, .pcf-options--tree) > .pcf-option {
  margin-block-end: 2px;
}

.pcf-panel .pcf-section[data-pcf-density="compact"] :is(.pcf-options--list, .pcf-options--scroll, .pcf-options--tree) .pcf-label {
  padding-block: 0;
  line-height: 1.35;
}

/* --- the panel shell and its action bar ---------------------------------- */
/* Both shells repaint the panel background, so both read the operator's
   panel surface first. They used to hard-code theirs, which left "Filter
   background: own colour" doing nothing under Soft 3D and Premium, in the
   Preview and on the storefront alike. Unset keeps each shell's own colour. */
.pcf-panel[data-pcf-shell="soft"] {
  border-radius: calc(var(--pcf-radius) + 8px);
  background: var(--pcf-panel-surface, var(--pcf-surface));
  box-shadow: 0 18px 50px rgba(20, 32, 54, 0.1), 0 3px 10px rgba(20, 32, 54, 0.05);
}

/* Premium depth belongs to the families; the surrounding shell stays neutral. */
.pcf-panel[data-pcf-shell="premium"] {
  border-radius: calc(var(--pcf-radius) + 14px);
  background: var(--pcf-panel-surface, #ffffff);
  box-shadow: 0 2px 8px rgba(14, 26, 48, 0.04);
}

/* Archives already have a white shell with subtle depth. Do not double it. */
.pcf-filter-shell > .pcf-panel[data-pcf-shell="premium"] {
  box-shadow: none;
}

.pcf-panel[data-pcf-sticky="on"] .pcf-panel-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 14px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--pcf-border);
}

.pcf-panel[data-pcf-sticky="on"] .pcf-apply {
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 10px 26px rgba(0, 110, 255, 0.34), 0 2px 6px rgba(14, 26, 48, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--pcf-glow-color) 34%, transparent),
    0 2px 6px rgba(14, 26, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pcf-panel[data-pcf-sticky="on"] .pcf-reset {
  border-radius: var(--pcf-radius);
  box-shadow: 0 1px 2px rgba(14, 26, 48, 0.06), 0 4px 12px rgba(14, 26, 48, 0.06);
}

/* IA-UX s7 item 6 -- the 44 by 44 CSS pixel touch floor, in the mobile
   treatment.

   The breakpoint is the same 991px boundary `pcf-ui.js` batches behind Apply
   at, so the floor and the batching contract cannot drift apart: whatever is
   "the mobile treatment" for one is the mobile treatment for the other.

   Written as a `min-height` on a border box, never as padding. The Appearance
   layer owns `--pcf-term-padding`, and a token is allowed to make a target
   *larger* than the floor but must not be able to make it smaller -- a floor
   expressed as padding would be a floor the operator can lower. `box-sizing`
   is stated rather than assumed because the theme owns the reset, and a floor
   that means 44px under one reset and 60px under another is not a floor.

   This rule only ever raises a target. Logo, image and swatch labels already
   carry a 46px floor of their own and are deliberately left out rather than
   normalised down to 44. */
@media (max-width: 991px) {
  .pcf-panel {
    --pcf-touch: 44px;
  }

  .pcf-panel-head .pcf-apply--top:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pcf-label,
  .pcf-dropdown__summary,
  .pcf-more__summary,
  .pcf-reset,
  .pcf-apply,
  .pcf-range input {
    box-sizing: border-box;
    min-height: var(--pcf-touch);
  }

  .pcf-range-slider {
    block-size: var(--pcf-touch);
  }

  /* A label has no height of its own until it is a box. Pills, logos, images
     and swatches are already flex containers and keep the display mode their
     own higher-specificity rule gives them. */
  .pcf-label {
    display: flex;
    align-items: center;
  }

  /* Pills carry a 34px floor at a specificity this has to clear. */
  .pcf-panel .pcf-section .pcf-options--pills > li.pcf-option,
  .pcf-panel .pcf-options--pills .pcf-label {
    height: var(--pcf-touch);
    block-size: var(--pcf-touch);
    min-block-size: var(--pcf-touch);
    max-block-size: var(--pcf-touch);
    margin: 0;
    padding-block: 0;
  }

  .pcf-range-slider {
    block-size: var(--pcf-touch);
  }

  /* The host-isolation rule resets the price boxes' host min-height at a
     specificity the generic floor above cannot clear, so restate the floor
     at that specificity. */
  .pcf-panel .pcf-range-values input[type="number"] {
    min-block-size: var(--pcf-touch);
  }

  .pcf-range-slider::before,
  .pcf-range-slider::after {
    inset-block-start: calc((var(--pcf-touch) - 3px) / 2);
  }

  .pcf-panel .pcf-range-slider > input.pcf-range-track[type="range"] {
    block-size: var(--pcf-touch);
    min-block-size: var(--pcf-touch);
    max-block-size: var(--pcf-touch);
  }
}

@media (max-width: 520px) {
  /* minmax(0, 1fr), exactly as the desktop grids above. A bare 1fr track has an
     automatic minimum, so the widest nowrap tile label -- a long custom name on
     an Image or Swatch tile -- widened the one column past the panel on a phone
     (a 294px column in a 250px list on DEV). */
  .pcf-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .pcf-section[data-pcf-columns="2"] .pcf-options--logos,
  .pcf-section[data-pcf-columns="2"] .pcf-options--images,
  .pcf-section[data-pcf-columns="2"] .pcf-options--swatches,
  .pcf-section[data-pcf-columns="3"] .pcf-options--logos,
  .pcf-section[data-pcf-columns="3"] .pcf-options--images,
  .pcf-section[data-pcf-columns="3"] .pcf-options--swatches,
  .pcf-section[data-pcf-columns="4"] .pcf-options--logos,
  .pcf-section[data-pcf-columns="4"] .pcf-options--images,
  .pcf-section[data-pcf-columns="4"] .pcf-options--swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pcf-options--pills {
    display: flex;
  }
}


/* ==========================================================================
   0.9.7 -- additive presentation layer
   ==========================================================================

   Two rules govern everything below, and between them they are why an upgrade
   to 0.9.7 changes nothing until an operator asks it to:

   1. Every optional surface is guarded by an element the renderer only emits
      when its flag is on. `off` is absence, so these selectors match nothing
      on a default install and reserve no layout box.

   2. Every visual retune is guarded by a data attribute whose value is NOT the
      Clean baseline. PCF_Controls emits a style attribute only when the
      resolved value differs from Clean, so a Clean storefront still reaches
      this section and matches nothing -- the same compatibility contract the
      0.9.0 layer above states, extended rather than weakened.

   No rule here adds conditional padding, margin, border or width to .pcf-panel
   or conditional width or margin to .pcf-section, which is the geometry
   contract tests/presentation-width pins.
   ========================================================================== */

/* --- optional: the panel selected-counter ------------------------------- */
.pcf-panel-count {
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--pcf-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* --- optional: the selected-filters summary ----------------------------- */
.pcf-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-block-end: 12px;
}

.pcf-summary__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--pcf-border);
  border-radius: calc(var(--pcf-radius) + 2px);
  background: var(--pcf-surface);
  color: inherit;
  font: inherit;
  font-size: var(--pcf-term-size);
  cursor: pointer;
}

.pcf-summary__chip:hover {
  border-color: var(--pcf-accent);
}

.pcf-summary__x {
  color: var(--pcf-accent);
  font-size: 15px;
  line-height: 1;
}

/* --- optional: family glyph and counter --------------------------------- */
.pcf-section-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-inline-size: 0;
}

.pcf-family-icon {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  opacity: 0.9;
}

.pcf-family-count {
  flex: 0 0 auto;
  min-inline-size: 22px;
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--pcf-hover);
  color: var(--pcf-accent);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* --- optional: the action-bar icon and secondary reset ------------------ */
.pcf-cta-icon {
  flex: 0 0 auto;
  inline-size: 17px;
  block-size: 17px;
  margin-inline-end: 8px;
  vertical-align: -3px;
}

.pcf-reset--foot {
  margin-block-start: 8px;
  inline-size: 100%;
  padding: 10px 12px;
}

/* --- optional: the price bound captions --------------------------------- */
.pcf-bound {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-inline-size: 0;
}

.pcf-bound-label {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
  padding-inline-start: 3px;
}

/* --- optional: the brand name under a logo tile.
   The text is already in the DOM for assistive technology; this only stops
   hiding it. Without the flag the shipped tooltip behaviour is unchanged. --- */
.pcf-panel--logo-name .pcf-options--logos .pcf-label--has-media .pcf-label-text {
  position: static;
  /* 100%, not auto: the tile is a fixed-width column and the name ellipsises
     inside it. It also keeps the substring tests/premium-ui forbids -- the
     shrink-wrapping legend defect G1 -- out of this stylesheet entirely. */
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  overflow: hidden;
  clip-path: none;
  font-size: 11.5px;
  text-overflow: ellipsis;
}

.pcf-panel--logo-name .pcf-options--logos .pcf-label--has-media .pcf-media-box {
  flex: 1 1 auto;
  min-block-size: 0;
}

/* ==========================================================================
   Family disclosure

   A native `<details>`, exactly like Show More and the Dropdown above it. The
   heading is the `<summary>`, so there is no second row whose only job is to
   open the family, and no state here is ours to keep in step -- the element
   owns "open" and the stylesheet reads it.

   Being native is also what makes shipping a family collapsed safe: a reader
   whose JavaScript never boots can still open it. pcf-ui.js adds only the rule
   a script can add, opening a family that holds a selected value.
   ========================================================================== */
.pcf-section-disclosure {
  display: block;
  inline-size: 100%;
  box-sizing: border-box;
}

.pcf-section-disclosure > .pcf-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  cursor: pointer;
  list-style: none;
}

.pcf-section-disclosure > .pcf-section-title::-webkit-details-marker {
  display: none;
}

.pcf-section-disclosure > .pcf-section-title:focus-visible {
  outline: 2px solid var(--pcf-focus-ring);
  outline-offset: 2px;
}

/* The option group keeps its own accessible name while the summary shows the
   visible one, so the checkbox set is still announced as a group. */
.pcf-legend-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Physical edges, deliberately.
   A disclosure chevron means "down is open" in both writing directions. Built
   from border-inline-* it would mirror under RTL and read as a sideways
   arrow -- the same defect 0.9.6 removed from the selection tick, which had
   been drawn from rotated logical borders. */
.pcf-section-caret {
  flex: 0 0 auto;
  inline-size: 8px;
  block-size: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.pcf-section-disclosure[open] > .pcf-section-title .pcf-section-caret {
  transform: rotate(225deg) translate(2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
  .pcf-section-caret {
    transition: none;
  }
}

/* ==========================================================================
   Reference-grade retune, attribute-guarded

   Clean matches none of it.
   ========================================================================== */

/* The carded heading becomes a real integrated strip: full bleed to the family
   card's edges, with the options directly beneath it. Still one card, not a
   second nested one -- 0.9.5 removed that and this does not bring it back. */
.pcf-panel .pcf-section[data-pcf-header="card"] {
  overflow: hidden;
}

.pcf-panel .pcf-section[data-pcf-header="card"] .pcf-section-title {
  margin-inline: calc(-1 * var(--pcf-section-pad-x, 0px));
  margin-block-start: calc(-1 * var(--pcf-section-pad-y, 0px));
  border-block-end: 1px solid rgba(16, 28, 50, 0.07);
}

.pcf-panel .pcf-section[data-pcf-depth="soft"],
.pcf-panel .pcf-section[data-pcf-depth="premium"] {
  --pcf-section-pad-x: 0px;
  --pcf-section-pad-y: 0px;
}

/* Pills follow the operator's column count once there is more than one column.
   At a single column they stay the shipped wrapping row, so Clean and every
   existing one-column family are untouched. */
.pcf-panel .pcf-section[data-pcf-columns="2"] .pcf-options--pills,
.pcf-panel .pcf-section[data-pcf-columns="3"] .pcf-options--pills,
.pcf-panel .pcf-section[data-pcf-columns="4"] .pcf-options--pills {
  display: grid;
  grid-template-columns: repeat(var(--pcf-filter-columns, 1), minmax(0, 1fr));
  align-items: stretch;
}

.pcf-panel .pcf-section[data-pcf-columns="2"] .pcf-options--pills .pcf-label,
.pcf-panel .pcf-section[data-pcf-columns="3"] .pcf-options--pills .pcf-label,
.pcf-panel .pcf-section[data-pcf-columns="4"] .pcf-options--pills .pcf-label {
  inline-size: 100%;
  justify-content: center;
  text-align: center;
}

/* A raised action bar reads as the page's primary call to action. */
.pcf-panel[data-pcf-sticky="on"] .pcf-apply {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --- family heading background radius ------------------------------------- */
/* Applies wherever the heading paints its own background. A heading with no
   background is unaffected, because there is nothing to round. */
.pcf-panel .pcf-section-title,
.pcf-panel .pcf-section[data-pcf-header="card"] .pcf-section-title {
  border-radius: var(--pcf-heading-radius, 0px);
}

/* 0.9.30: row focus stays inside Checkbox, Dropdown, Multi Select and Tree
   labels, including the first and last row at a scrollport edge. */
.pcf-panel .pcf-section .pcf-options:is(.pcf-options--list, .pcf-options--scroll, .pcf-options--tree) .pcf-input:focus-visible + .pcf-label {
  outline-offset: -3px;
}