/* ==========================================================================
   Product listing sidebar — price filter + category links tree

   Styles the two boxes rendered into .mobile-slide by
   woocommerce/taxonomy-product_cat.php. Added 2026-08-24; nothing here existed
   before, so no rule in this file overrides another theme stylesheet.

   Two things worth knowing before editing:

   1. WooCommerce's own price-slider CSS does NOT reach this box. Every rule it
      ships is scoped `.woocommerce .widget_price_filter …`, and the widget is
      rendered with a `before_widget` of `.pl-filter-box--price` instead — so
      the purple defaults never land, and neither does the *layout*. jQuery UI
      ships no stylesheet through WordPress either. That makes the slider block
      below load-bearing structure, not decoration: delete it and the handles
      stack in the top-left corner.

   2. `.screen-reader-text` is relied on for the submit button and the field
      labels and is defined in assets/woo/css/woocommerce.css, which
      `woocommerce-general` loads on every URL this sidebar appears on
      (includes/common/filters.php:71 points that handle at the theme copy).

   3. The category tree's open/closed state is decided **here, not in the JS**.
      The closed state is the default and the open path comes from the classes
      WooCommerce's walker already writes into the markup, so the first paint is
      the final layout. assets/js/product-filters.js only injects the toggle
      buttons and handles clicks. Reversed on 2026-08-24 — it used to render
      fully expanded and let the JS collapse it, which meant every page load
      painted all 83 links and then jumped 1,736px. See the Collapse section at
      the foot of this file.
   ========================================================================== */

/* ==========================================================================
   Box shell
   ========================================================================== */
.pl-filter-box {
  margin-bottom: var(--space-24);
  padding: var(--space-24) var(--space-20);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background-color: var(--white);
}

.pl-filter-box:last-child {
  margin-bottom: 0;
}

.pl-filter-box__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--secondary);
}

/* Injected by product-filters.js, so it only exists when it can work. */
.pl-filter-box__toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--secondary);
}

.pl-filter-box__toggle::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: var(--transition);
}

.pl-filter-box.is-collapsed .pl-filter-box__toggle::before {
  transform: translateY(25%) rotate(-135deg);
}

.pl-filter-box__body {
  margin-top: var(--space-20);
}

.pl-filter-box.is-collapsed .pl-filter-box__body {
  display: none;
}

/* ==========================================================================
   Price filter

   The field/label flip. price-slider.js opens by hiding the two inputs and
   showing .price_label, because WooCommerce's stock widget states the range as
   a sentence rather than as editable boxes. The design wants the opposite, and
   jQuery's .hide() writes an inline `display:none` — which is why these two
   rules need !important and why the flip cannot be done in the template.
   ========================================================================== */
.pl-filter-box--price .price_slider_amount #min_price,
.pl-filter-box--price .price_slider_amount #max_price {
  display: block !important;
}

.pl-filter-box--price .price_label {
  display: none !important;
}

.pl-price-filter__fields {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.pl-price-filter__field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.pl-price-filter__currency {
  flex-shrink: 0;
  font-size: var(--fs-15);
  color: var(--text-color);
}

.pl-price-filter__fields input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-primary);
  font-size: var(--fs-15);
  color: var(--secondary);
}

.pl-price-filter__fields input[type="text"]:focus {
  outline: 0;
}

.pl-price-filter__field:focus-within {
  border-color: var(--primary);
}

.pl-price-filter__sep {
  flex-shrink: 0;
  color: var(--text-color);
}

/* --- The slider. Structure, not decoration — see the file header. --------- */
.pl-filter-box--price .price_slider {
  position: relative;
  height: 4px;
  margin: var(--space-30) 8px var(--space-4);
  border-radius: 999px;
  background-color: var(--border-color);
}

.pl-filter-box--price .ui-slider-range {
  position: absolute;
  top: 0;
  z-index: 1;
  display: block;
  height: 100%;
  border: 0;
  border-radius: 999px;
  background-color: var(--primary);
}

.pl-filter-box--price .ui-slider-handle {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 2px solid var(--white);
  border-radius: var(--radius-round);
  background-color: var(--primary);
  transform: translateY(-50%);
  cursor: ew-resize;
  outline: 0;
  touch-action: none;
}

.pl-filter-box--price .ui-slider-handle:focus-visible {
  box-shadow: 0 0 0 3px rgba(156, 173, 91, 0.4);
}

/* ==========================================================================
   Category links tree

   Markup is WC_Product_Cat_List_Walker's:
     ul.product-categories > li.cat-item[.cat-parent][.current-cat][.current-cat-parent]
       > a  +  ul.children (recursing)
   The toggle button is injected between the <a> and the .children by
   product-filters.js. The li is a wrapping flex row so the link and its toggle
   share a line and the nested list drops below both.
   ========================================================================== */
.pl-filter-box--categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-filter-box--categories li.cat-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.pl-filter-box--categories li.cat-item > a {
  /* `1 1 auto`, not `1`. `flex: 1` means basis 0, so this link contributes nothing
     to flex line-breaking — ul.children beside it has basis 100%, the two sum to
     exactly 100%, and they share a line instead of wrapping. The link then lays
     out 0px wide and its text overflows across the child list, which is what the
     tree looked like before JS ran. `auto` makes it contribute its content width,
     so the wrap happens whether or not .pl-cat-toggle has been injected yet.
     min-width: 0 stays, so a long category name can still shrink. */
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--space-8);
  font-size: var(--fs-15);
  line-height: 1.2;
  color: var(--text-color);
  transition: var(--transition);
  font-size: 13px;
}
.pl-filter-box--categories ul.children ul.children > li > a {
  padding-block: 5px;
}

.pl-filter-box--categories li.cat-item > a:hover {
  color: var(--primary);
}

/* flex-basis and width are structural, not spacing: they are what drops a
   sublist onto its own flex line under its parent link. Do not remove them —
   see the note on `li.cat-item > a` above. */
.pl-filter-box--categories ul.children {
  flex-basis: 100%;
  width: 100%;
}

/* The rule above a sublist belongs to the *first* one only — the child-selector
   chain is what stops it, because `ul.children` on its own matches every nested
   list at every depth. It used to be here, and the lines it drew at the deeper
   levels were simply hidden behind a second, darker border that
   `ul.children ul.children` painted over the top. Removing that one on
   2026-08-24 exposed these rather than clearing them, which is why the lines
   appeared to survive being deleted. */
.pl-filter-box--categories
  > .pl-filter-box__body
  > ul.product-categories
  > li
  > ul.children {
  border-top: 1px solid #dfdfdf;
}

.pl-cat-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* The open path, at any depth. */
.pl-filter-box--categories li.current-cat > a {
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

/* --- Level 1 — top-level categories, chevron on the right ---------------- */
.pl-filter-box--categories
  > .pl-filter-box__body
  > ul.product-categories
  > li.cat-item {
  border-bottom: 1px solid var(--border-color);
}

.pl-filter-box--categories
  > .pl-filter-box__body
  > ul.product-categories
  > li.cat-item:last-child {
  border-bottom: 0;
}

.pl-filter-box--categories
  > .pl-filter-box__body
  > ul.product-categories
  > li.cat-item
  > a {
  color: #333;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.pl-filter-box--categories
  > .pl-filter-box__body
  > ul.product-categories
  > li.cat-item
  > .pl-cat-toggle::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: translateY(25%) rotate(-135deg);
  transition: var(--transition);
}

.pl-filter-box--categories
  > .pl-filter-box__body
  > ul.product-categories
  > li.cat-item.is-collapsed
  > .pl-cat-toggle::before {
  transform: translateY(-25%) rotate(45deg);
}

/* --- Level 2 — plus / minus on the right --------------------------------- */
.pl-filter-box--categories
  ul.product-categories
  > li
  > ul.children
  > li.cat-item
  > a {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  padding: 8px 0;
}

.pl-filter-box--categories
  ul.product-categories
  > li
  > ul.children
  > li.cat-item
  > .pl-cat-toggle {
  position: relative;
}

.pl-filter-box--categories
  ul.product-categories
  > li
  > ul.children
  > li.cat-item
  > .pl-cat-toggle::before,
.pl-filter-box--categories
  ul.product-categories
  > li
  > ul.children
  > li.cat-item
  > .pl-cat-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: var(--transition);
}

/* The upright stroke of the plus — removed when the branch is open. */
.pl-filter-box--categories
  ul.product-categories
  > li
  > ul.children
  > li.cat-item
  > .pl-cat-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.pl-filter-box--categories
  ul.product-categories
  > li
  > ul.children
  > li.cat-item.is-collapsed
  > .pl-cat-toggle::after {
  opacity: 1;
}

/* --- Level 3 — caret on the left, before the label ------------------------ */
.pl-filter-box--categories ul.children ul.children > li.cat-item {
  padding-left: var(--space-8);
}

.pl-filter-box--categories
  ul.children
  ul.children
  > li.cat-item
  > .pl-cat-toggle {
  order: -1;
  width: 16px;
}

.pl-filter-box--categories
  ul.children
  ul.children
  > li.cat-item
  > .pl-cat-toggle::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: var(--transition);
}

.pl-filter-box--categories
  ul.children
  ul.children
  > li.cat-item.is-collapsed
  > .pl-cat-toggle::before {
  transform: translateX(-25%) rotate(-45deg);
}

/* Leaves below level 3 line up under their parent's label, not its caret. */
.pl-filter-box--categories ul.children ul.children ul.children > li.cat-item {
  padding-left: var(--space-24);
}

/* Nothing targets sublists below the first any more, and that is deliberate.
   `ul.children ul.children` is a *descendant* selector, so anything put on it
   lands on the third nested list and every one below as well as the second —
   which is how an open branch four deep ended up boxed in by four horizontal
   rules around a single link. Borders and the bottom margin were both removed on
   2026-08-24 at the client's request: the indent and the caret already say where
   a sublist begins. If you need to style one depth, use a child-selector chain
   like the first-sublist border above, not this. */

/* --- Collapse ------------------------------------------------------------
   The closed state is the *default*, and the open path is painted from classes
   WC_Product_Cat_List_Walker already puts in the markup — `current-cat` on the
   queried term and `current-cat-parent` on every one of its ancestors. So the
   first paint is already the final state: no JavaScript is involved in deciding
   what is open, and there is nothing to collapse afterwards.

   It used to be the other way round, and that is what made loading ugly: every
   one of the 83 links painted, then product-filters.js collapsed the box from
   2,505px to 769px on every page load. The old note said "everything is open in
   this file, and the JS closes what should start closed" — that is no longer
   true, and `decisions.md` records why it was reversed.

   Without JavaScript this is still a working tree, which was the point of the
   original arrangement: the current branch is open, the rest closed, and
   clicking any term loads that page and opens that branch.
   ------------------------------------------------------------------------- */
.pl-filter-box--categories ul.children {
  display: none;
}

/* `is-open` is what lets a visitor open a branch that is *not* on the current
   path. Without it, removing `is-collapsed` would just fall back to the rule
   above and the branch could never be opened. */
.pl-filter-box--categories li.current-cat > ul.children,
.pl-filter-box--categories li.current-cat-parent > ul.children,
.pl-filter-box--categories li.is-open > ul.children {
  display: block;
}

/* Four classes against the three above, so a branch the visitor closes by hand
   stays closed even when it sits on the current path. */
.pl-filter-box--categories li.cat-item.is-collapsed > ul.children {
  display: none;
}

/* ==========================================================================
   Mobile — inside the off-canvas drawer

   Below 992px .mobile-slide stops being `display: contents` and becomes the
   fixed 300px drawer product.js slides in (assets/css/product.css:608). The
   boxes just need to stop being sticky-column width.
   ========================================================================== */
@media (max-width: 991.98px) {
  .pl-filter-box {
    padding: 0;
    border: 0;
  }
}