/* Theme restyle for OCFilter inside left column (.filters).
   Loaded after the module so these rules win over OCFilter defaults. */

/* Desktop: stack above product grid (cards use transform on hover).
   Do NOT set z-index/overflow here for all viewports — mobile drawer needs
   z-index:1200 and overflow-y:auto from styles.css. */
@media (min-width: 961px) {
  .filters {
    z-index: 40;
    overflow: visible;
  }

  .filters .ocf-container,
  .filters .ocf-content,
  .filters .ocf-body,
  .filters .ocf-filter-list,
  .filters .ocf-filter,
  .filters .ocf-filter-body,
  .filters .ocf-value-list,
  .filters .ocf-collapse-value {
    overflow: visible;
  }
}

.catalog-layout > .catalog-main {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.filters .ocf-container {
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Nested value scroll clips the apply popover and looks unlike the mockup */
.filters .ocf-scroll-y,
.filters .ocf-theme-light-block .ocf-scroll-y,
.filters .ocf-theme-light-block .ocf-active .ocf-scroll-y,
.filters .ocf-theme-light-block .ocf-dropdown .ocf-scroll-y {
  max-height: none !important;
  overflow: visible !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Apply / cancel floating popover — above products */
.ocf-popover {
  z-index: 10060 !important;
  max-width: none;
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 10px 28px rgba(20, 20, 20, 0.18);
  background: var(--white, #fff);
}

.ocf-popover-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  color: var(--text, #333);
}

.ocf-popover .ocf-between {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 8px;
  margin: 0;
}

.ocf-popover .ocf-btn-link,
.ocf-popover .ocf-btn-link:hover,
.ocf-popover .ocf-btn-link:focus {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #e6e6e6);
  border-radius: var(--radius-sm, 8px);
  background: var(--white, #fff);
  color: var(--navy, #2a2a2a);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 650;
  box-shadow: none;
  white-space: nowrap;
}

.ocf-popover .ocf-btn-link:hover {
  border-color: var(--navy, #2a2a2a);
}

.ocf-popover .ocf-search-btn-popover,
.ocf-popover .ocf-search-btn-popover:hover,
.ocf-popover .ocf-search-btn-popover:focus,
.ocf-popover .ocf-search-btn-popover.ocf-disabled,
.ocf-theme-light .ocf-search-btn-popover,
.ocf-theme-light-block .ocf-search-btn-popover,
.ocf-theme-light .ocf-search-btn-popover.ocf-disabled,
.ocf-theme-light-block .ocf-search-btn-popover.ocf-disabled {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0 14px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm, 8px);
  background: var(--yellow, #FF6B00);
  color: var(--white, #fff);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 700;
  box-shadow: none;
  opacity: 1;
  white-space: nowrap;
}

.ocf-popover .ocf-search-btn-popover:hover {
  background: var(--yellow-hover, #ff8533);
}

/* Flex buttons collapse text-node spaces around <b>; keep gaps around the count */
.ocf-search-btn-popover .ocf-btn-label,
.ocf-search-btn-static .ocf-btn-label {
  margin: 0 0.3em;
}

.filters .ocf-content {
  margin: 0;
}

/* Theme already has filters__title + mobile drawer */
.filters .ocf-header,
.filters .ocf-btn-mobile-fixed,
.filters .ocf-close-mobile,
.ocf-btn-mobile-static {
  display: none !important;
}

.filters .ocf-body {
  margin: 0;
}

.filters .ocf-filter-list {
  display: flex;
  flex-direction: column;
}

/* Filter sections ≈ mockup .filter */
.filters .ocf-filter,
.filters .ocf-theme-light-block.ocf-vertical .ocf-filter,
.filters .ocf-theme-light.ocf-vertical .ocf-filter {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--line, #e6e6e6);
}

.filters .ocf-filter:last-child,
.filters .ocf-theme-light-block.ocf-vertical .ocf-filter:last-child {
  border-bottom: none;
}

.filters .ocf-filter.ocf-active,
.filters .ocf-theme-light-block .ocf-active,
.filters .ocf-theme-light .ocf-filter.ocf-active {
  background: transparent;
}

.filters .ocf-filter-header,
.filters .ocf-theme-light .ocf-filter-header,
.filters .ocf-theme-light-block .ocf-filter-header,
.filters .ocf-theme-light-block.ocf-vertical .ocf-filter-header {
  padding: 14px 0;
  margin: 0;
  font-size: var(--fs-md, 0.95rem);
  font-weight: 700;
  color: var(--navy, #2a2a2a);
  line-height: 1.3;
  background: transparent;
  cursor: pointer;
}

.filters .ocf-filter-name {
  letter-spacing: -0.01em;
}

.filters .ocf-active-label {
  color: var(--muted, #888);
  font-weight: 500;
  font-size: var(--fs-xs, 0.75rem);
}

.filters .ocf-filter-body {
  padding: 0 0 16px;
}

.filters .ocf-value-list-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filters .ocf-value,
.filters .ocf-value:hover,
.filters .ocf-value:focus,
.filters .ocf-value:active,
.filters .ocf-value:visited {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text, #333);
  line-height: 1.3;
  align-items: center;
  gap: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.filters .ocf-value-name {
  flex: 1;
  min-width: 0;
}

.filters .ocf-value-append {
  min-width: 0;
}

.filters .ocf-value-count,
.filters .ocf-theme-light .ocf-value-count,
.filters .ocf-theme-light-block .ocf-value-count {
  font-style: normal;
  color: var(--muted, #888);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Checkbox / radio → yellow accent like mockup */
.filters .ocf-value-input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-right: 8px;
  margin-top: 0;
}

.filters .ocf-selected .ocf-value-input::before,
.filters .ocf-value:not(.ocf-disabled):active .ocf-value-input::before {
  border-color: var(--yellow, #FF6B00);
  background-color: var(--yellow, #FF6B00);
  color: var(--white, #fff);
}

.filters .ocf-value:focus:not(:active) .ocf-value-input::before {
  border-color: var(--yellow, #FF6B00);
}

.filters .ocf-value:active .ocf-value-input::before {
  box-shadow: 0 0 0 0.2rem rgba(255, 179, 41, 0.28);
}

.filters .ocf-selected .ocf-value-input-checkbox::after {
  filter: brightness(0);
}

/* Price inputs: OCFilter uses Bootstrap table-cell group (uneven radii). Force mockup layout. */
.filters .ocf-slider-input-group,
.filters .ocf-input-group {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
  border-collapse: separate;
}

.filters .ocf-slider-input-group .ocf-form-control,
.filters .ocf-input-group .ocf-form-control,
.filters .ocf-form-control,
.filters .ocf-theme-light-block .ocf-form-control,
.filters .ocf-input-group .ocf-form-control:first-child,
.filters .ocf-input-group .ocf-form-control:last-child,
.filters .ocf-input-group .ocf-form-control:not(:first-child):not(:last-child) {
  float: none;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: 38px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--line, #e6e6e6) !important;
  border-width: 1px !important;
  border-radius: var(--radius-sm, 8px) !important;
  background: var(--white, #fff);
  color: var(--text, #333);
  font-size: var(--fs-sm, 0.875rem);
  line-height: 38px;
  box-shadow: none !important;
  text-align: center;
  -webkit-appearance: textfield;
  appearance: textfield;
}

.filters .ocf-form-control:focus,
.filters .ocf-input-group .ocf-form-control:focus {
  outline: none;
  border-color: var(--yellow, #FF6B00) !important;
  box-shadow: none !important;
  z-index: 1;
}

.filters .ocf-input-group-addon,
.filters .ocf-theme-light-block .ocf-input-group-addon,
.filters .ocf-input-group-addon:first-child,
.filters .ocf-input-group-addon:last-child,
.filters .ocf-input-group-addon:not(:first-child):not(:last-child) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: 38px;
  margin: 0;
  padding: 0 2px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted, #888);
  font-size: var(--fs-xs, 0.75rem);
  line-height: 1;
  white-space: nowrap;
}

.filters .ocf-value-slider {
  padding: 10px 8px 0;
}

/* Pips: center ticks under labels */
.filters .ocf-noUi-pips {
  height: 36px;
  padding-top: 8px;
}

.filters .ocf-noUi-marker {
  width: 1px;
  margin-left: 0;
  transform: translateX(-50%);
}

.filters .ocf-noUi-value {
  font-size: 10px;
  margin-top: 10px;
  transform: translate(-50%, 0);
  white-space: nowrap;
}

.filters .ocf-noUi-connect:before,
.filters .ocf-noUi-handle {
  background-color: var(--yellow, #FF6B00);
}

.filters .ocf-noUi-active {
  box-shadow: 0 0 0 6px rgba(255, 179, 41, 0.28);
}

.filters .ocf-noUi-base:before,
.filters .ocf-noUi-connects:before,
.filters .ocf-noUi-connects:after {
  background-color: var(--line, #e6e6e6);
}

/* Show more ≈ mockup .filter__more */
.filters .ocf-btn-show-values,
.filters .ocf-btn-show-filters {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  margin-top: 8px;
  color: var(--navy-soft, #3a3a3a);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 650;
  box-shadow: none;
}

.filters .ocf-btn-show-values:hover,
.filters .ocf-btn-show-filters:hover {
  color: var(--navy, #2a2a2a);
  text-decoration: none;
  background: transparent;
}

/* Footer actions ≈ mockup .filters__actions */
.filters .ocf-footer,
.filters .ocf-theme-light .ocf-footer,
.filters .ocf-theme-light-block .ocf-footer {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line, #e6e6e6);
  background: transparent;
  box-shadow: none;
  position: static;
}

.filters .ocf-footer:after {
  display: none;
}

.filters .ocf-between {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 8px;
}

.filters .ocf-search-btn-static,
.filters .ocf-theme-light .ocf-search-btn-static,
.filters .ocf-theme-light-block .ocf-search-btn-static,
.filters .ocf-theme-light .ocf-search-btn-static.ocf-disabled,
.filters .ocf-theme-light-block .ocf-search-btn-static.ocf-disabled {
  width: 100%;
  height: 42px;
  border-radius: var(--radius-sm, 8px);
  background: var(--yellow, #FF6B00);
  color: var(--white, #fff);
  font-weight: 700;
  border: none;
  box-shadow: none;
  opacity: 1;
}

.filters .ocf-search-btn-static:hover,
.filters .ocf-theme-light .ocf-search-btn-static:hover,
.filters .ocf-theme-light-block .ocf-search-btn-static:hover {
  background: var(--yellow-hover, #ff8533);
  color: var(--white, #fff);
}

.filters .ocf-footer .ocf-btn-link {
  width: 100%;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #e6e6e6);
  border-radius: var(--radius-sm, 8px);
  color: var(--navy, #2a2a2a);
  font-weight: 650;
  margin: 0;
}

.filters .ocf-footer .ocf-btn-link:hover {
  border-color: var(--navy, #2a2a2a);
}

/* Selected chips */
.filters .ocf-selected-card,
.filters .ocf-theme-light .ocf-selected-card,
.filters .ocf-theme-light-block .ocf-selected-card {
  padding: 0 0 12px;
  margin: 0 0 8px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line, #e6e6e6);
}

.filters .ocf-selected-filter,
.filters .ocf-theme-light .ocf-selected-filter {
  background: var(--bg, #f7f7f7);
  border-radius: var(--radius-sm, 8px);
}

.filters .ocf-module-page,
.filters .ocf-theme-light-block.ocf-vertical .ocf-module-page,
.filters .ocf-theme-light .ocf-module-page {
  margin: 0 0 12px;
  padding: 0 0 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line, #e6e6e6);
}

/* Keep desktop vertical layout even on narrow screens (theme owns the drawer) */
@media (max-width: 960px) {
  /* Drawer: head + scrollable filters + sticky action buttons */
  .filters {
    z-index: 1200 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .filters.is-open {
    transform: translateX(0) !important;
  }

  .filters__head {
    flex-shrink: 0;
  }

  .filters__modules {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /*
   * OCFilter mobile.css parks .ocf-container off-screen (translateX(-100%))
   * until its own mobile toggle. Theme drawer already hosts the module — force visible.
   */
  .filters .ocf-container,
  .filters .ocf-container.ocf-mobile-1,
  .filters .ocf-container.ocf-mobile-active {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    will-change: auto !important;
  }

  .filters .ocf-content {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    position: static !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .filters .ocf-body {
    flex: 1 1 auto;
    min-height: 0;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 8px;
  }

  .filters .ocf-header,
  .filters .ocf-btn-mobile-fixed,
  .filters .ocf-close-mobile,
  .filters .ocf-mobile {
    display: none !important;
  }

  .filters .ocf-desktop {
    display: initial !important;
  }

  .filters .ocf-filter-header .ocf-arrow-left,
  .filters .ocf-filter-header .ocf-angle-right {
    display: none !important;
  }

  .filters .ocf-filter-body > .ocf-value-list,
  .filters .ocf-mobile-left .ocf-filter-body > .ocf-value-list,
  .filters .ocf-mobile-right .ocf-filter-body > .ocf-value-list,
  .filters .ocf-open .ocf-filter-body > .ocf-value-list {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Always-visible Cancel / Show products at bottom of drawer */
  .filters .ocf-footer,
  .filters .ocf-theme-light .ocf-footer,
  .filters .ocf-theme-light-block .ocf-footer {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    z-index: 6 !important;
    margin: 0 !important;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--line, #e6e6e6) !important;
    background: var(--white, #fff) !important;
    box-shadow: 0 -8px 20px rgba(20, 20, 20, 0.06) !important;
  }

  .filters .ocf-footer:after {
    display: none !important;
  }
}