/*
 * Product filter sidebar: accessibility markup from woocommerce-product-filter/ templates.
 * Goal is zero visual change for mouse users, so most rules undo default styles on the
 * new elements (h3, label, span) to match what the old div/button/h2 markup looked like.
 */

/* --- Category headings: <h3><button class="text">Name<span class="box-toggle"></span></button></h3> --- */
/* Undo the Elementor kit's h3 typography (italic Adobe Caslon, 34px) and Storefront's h3 margins. */
.wcpf-field-item .wcpf-heading-label .wcpf-heading {
  clear: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.wcpf-field-item .wcpf-heading-label .wcpf-heading button.text {
  display: block;
  width: 100%;
  text-align: left;
}
.wcpf-field-item .wcpf-heading-label .wcpf-heading span.text {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-transform: uppercase;
  font-family: var(--e-global-typography-secondary-font-family);
}
/* These field types used an <h2 class="text"> title, which had normal letter spacing and a taller
   line than the button titles. Keep those metrics so nothing shifts or wraps (e.g. "Chocolate Type"
   in the narrow tablet sidebar). Remove this rule to make every category look identical. */
.wcpf-field-radio-list .wcpf-heading-label .wcpf-heading .text,
.wcpf-field-price-slider .wcpf-heading-label .wcpf-heading .text,
.wcpf-field-color-list .wcpf-heading-label .wcpf-heading .text,
.wcpf-field-drop-down-list .wcpf-heading-label .wcpf-heading .text,
.wcpf-field-text-list .wcpf-heading-label .wcpf-heading .text {
  letter-spacing: normal;
  line-height: 1.214;
}
/* The +/- icon is now a decorative span inside the button; keep the plugin's absolute position. */
.wcpf-field-item.wcpf-box-style .wcpf-heading-label .box-toggle {
  pointer-events: none;
}

/* --- Options: native checkbox/radio stays in the accessibility tree and keyboard order --- */
/* The square used to be a <button>, so it took the Elementor kit's button font size, and the
   plugin positions it with margin-top: 0.7em. Mirror the kit's button sizes so it doesn't shift. */
.wcpf-field-item .wcpf-item-label .wcpf-input-container {
  font-size: 14px;
}
@media (max-width: 1024px) {
  .wcpf-field-item .wcpf-item-label .wcpf-input-container {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .wcpf-field-item .wcpf-item-label .wcpf-input-container {
    font-size: 11px;
  }
}
/* The plugin hides the input with display:none and draws the square on .wcpf-input-container.
   Keep that drawing, and lay the real (transparent) input over it so it can take focus and clicks. */
.wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-input-container .wcpf-input.wcpf-input-checkbox,
.wcpf-field-radio-list .wcpf-radio-list .wcpf-radio-item .wcpf-input-container .wcpf-input.wcpf-input-radio {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.wcpf-field-checkbox-list .wcpf-checkbox-item.disabled .wcpf-input-container .wcpf-input,
.wcpf-field-radio-list .wcpf-radio-item.disabled .wcpf-input-container .wcpf-input {
  cursor: default;
}
.wcpf-item-label label.wcpf-title-container {
  margin: 0;
  font-weight: inherit;
  cursor: pointer;
}
.wcpf-item.disabled > .wcpf-item-inner > .wcpf-item-label label.wcpf-title-container {
  cursor: default;
}

/* --- Visible focus. The input is transparent, so draw the ring on the square around it. --- */
.wcpf-field-item .wcpf-input-container:focus-within,
.wcpf-field-item .wcpf-heading-label button.text:focus-visible,
.wcpf-field-item .box-item-toggle:focus-visible,
.wcpf-field-item .wcpf-price-slider-min-max-inputs .wcpf-input:focus-visible,
.wcpf-field-item .ui-slider-handle:focus-visible,
.wcpf-field-button .wcpf-button:focus-visible {
  outline: 2px solid #111 !important;
  outline-offset: 2px;
}

/* --- Mobile filter panel (#mobile-filters, an Elementor flex container in each archive template) ---
   Opened by product-filters.js with a class. Elementor hides the container with display:none; open it
   as the flex column it was built as (display:block stretched each widget to full screen height).
   !important also beats the old WPCode snippet's inline display:block while that is still active.
   No wrapping, so a tall list scrolls instead of flowing into a second column off-screen. */
#mobile-filters.ashers-filters-open {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mobile-filters > .elementor-element {
  flex-shrink: 0;
}

/* --- Reset: text is now a span, not an h2. Same look as the old h2.button-text rule. --- */
.wcpf-field-item .wcpf-button span.button-text {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-transform: uppercase;
  font-family: var(--e-global-typography-secondary-font-family);
  line-height: 1.214;
  margin: 0;
}
/* The Elementor kit turns a focused button dark brown with white text, but the rule above kept the
   label #111 (1.97:1 contrast). Follow the button's colour on focus, as the custom CSS does on hover. */
.wcpf-field-button .wcpf-button:focus span.button-text {
  color: inherit;
}