/* OptimaLife filter panel — Figma node 135:1339 */
.catalog-sidebar__filter .ocf-container {
  width: 100%;
  margin: 0;
  border: 1px solid #e4ddd2;
  border-radius: 6px;
  background: #fffaf2;
  color: #2f2d2b;
  overflow: hidden;
}

.catalog-sidebar__filter .ocf-content {
  margin: 0;
}

.catalog-sidebar__filter .ocf-header {
  position: relative;
  margin: 0;
  padding: 25px 25px 20px;
  border: 0;
  color: #302e2b;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Chevron doubles as a real collapse toggle (node 130:1107's rotated
   "Chevron right" instance) — .catalog-sidebar__filter's click listener
   (theme/javascript/common.js) toggles .is-collapsed on .ocf-container. */
.catalog-sidebar__filter .ocf-header::after {
  position: absolute;
  top: 34px;
  right: 28px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #302e2b;
  border-bottom: 2px solid #302e2b;
  content: '';
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.catalog-sidebar__filter .ocf-container.is-collapsed .ocf-header::after {
  transform: rotate(225deg);
}

.catalog-sidebar__filter .ocf-container.is-collapsed .ocf-header {
  padding-bottom: 25px;
}

.catalog-sidebar__filter .ocf-container.is-collapsed .ocf-body,
.catalog-sidebar__filter .ocf-container.is-collapsed .ocf-footer {
  display: none;
}

.catalog-sidebar__filter .ocf-body {
  padding: 0 25px;
}

.catalog-sidebar__filter .ocf-filter {
  margin: 0;
  padding: 20px 0 21px;
  border: 0;
  border-bottom: 1px solid #e4dbd0;
}

.catalog-sidebar__filter .ocf-filter:last-child {
  border-bottom: 0;
}

.catalog-sidebar__filter .ocf-filter-header {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 18px;
  padding: 0;
  color: #302e2b;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.catalog-sidebar__filter .ocf-filter-header .ocf-active-label,
.catalog-sidebar__filter .ocf-filter-header .ocf-filter-header-append {
  display: none;
}

.catalog-sidebar__filter .ocf-filter-name {
  display: block;
  margin: 0;
}

.catalog-sidebar__filter .ocf-value-list {
  padding: 0;
}

.catalog-sidebar__filter .ocf-value-list-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.catalog-sidebar__filter .ocf-value {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 25px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  color: #6a625b;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
}

.catalog-sidebar__filter .ocf-value:hover,
.catalog-sidebar__filter .ocf-value:focus,
.catalog-sidebar__filter .ocf-value:active {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #302e2b;
  outline: 0;
}

.catalog-sidebar__filter .ocf-value-input {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  margin: 0 14px 0 0;
}

.catalog-sidebar__filter .ocf-value-input::before {
  display: block !important;
  content: '' !important;
  width: 23px;
  height: 23px;
  border: 1px solid #d5c8b8;
  border-radius: 4px;
  background: #fffdf9;
  box-shadow: none;
}

/* A minimalist vector tick, not the unicode ✓ glyph — its own metrics never
   sat centred no matter how the box around it was tuned. Box + checkmark are
   one flat SVG rather than a filled ::before plus a separate ::after glyph,
   so there's nothing left to keep aligned by hand. */
.catalog-sidebar__filter .ocf-value.ocf-selected .ocf-value-input-checkbox::before {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='4' fill='%23C9872D'/%3E%3Cpath d='M15.3333 6L7.99996 13.3333L4.66663 10' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.catalog-sidebar__filter .ocf-value-name {
  overflow: visible;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.catalog-sidebar__filter .ocf-value-append {
  display: none;
}

.catalog-sidebar__filter .ocf-slider-input-group {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 17px;
}

.catalog-sidebar__filter .ocf-slider-input-group .ocf-form-control {
  flex: 1 1 0;
  min-width: 0;
}

.catalog-sidebar__filter .ocf-slider-input-group .ocf-form-control {
  float: none;
  width: 100%;
  height: 52px;
  padding: 0 12px;
  border: 1px solid #d5c8b8;
  border-radius: 6px !important;
  background: #fffdf9;
  color: #302e2b;
  font-size: 16px;
  line-height: 52px;
  text-align: center;
}

.catalog-sidebar__filter .ocf-slider-input-group .ocf-input-group-addon {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  background: transparent;
  color: #6a625b;
  font-size: 16px;
  line-height: 52px;
}

.catalog-sidebar__filter .ocf-value-slider {
  padding: 0 9px;
}

/* Unfilled track colour — node 135:1296 "Rectangle 47". Was set to the same
   gold as .ocf-noUi-connect below, so the selected (connect) segment was
   invisible against its own background and the WHOLE track always looked
   fully gold regardless of where the handles actually sat. */
.catalog-sidebar__filter .ocf-value-scale {
  position: relative;
  height: 4px;
  margin-bottom: 2px;
  border: 0;
  border-radius: 0;
  background: #c9d0d0;
  box-shadow: none;
}

/* noUiSlider's own base positioning CSS was never shipped under the ocf-
   prefix OCFilter renamed its bundled copy to (see the pips/connect/handle
   note below), so every layer — base, connects, origin — rendered as a
   static block instead of an absolutely-positioned track: connects
   collapsed to 0 height, and each handle's origin (driven by an inline
   `transform: translate(X%, 0)`, e.g. -1000% for the lower/min handle) flew
   off wherever that translate landed instead of sliding along the track.
   Values below are copied from the extension's own base skeleton
   (theme/default/stylesheet/ocfilter/core.css) under the ocf- prefix it
   actually renders with — not reconstructed from memory of stock
   noUiSlider, which uses different origin sizing (width:100%, not the
   10%-unit translate() multiplies against here) and sent the lower/min
   handle miles off-screen on the first attempt at this fix. Position/size
   only; colour and the visible handle size stay in the rules below. */
.catalog-sidebar__filter .ocf-noUi-base,
.catalog-sidebar__filter .ocf-noUi-connects {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.catalog-sidebar__filter .ocf-noUi-connect,
.catalog-sidebar__filter .ocf-noUi-origin {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  transform-origin: 0 0;
}

.catalog-sidebar__filter .ocf-noUi-connect {
  height: 100%;
  width: 100%;
}

.catalog-sidebar__filter .ocf-noUi-origin {
  height: 0;
  width: 10%;
}

.catalog-sidebar__filter .ocf-noUi-touch-area {
  height: 100%;
  width: 100%;
}

/* The Figma filter uses a clean range line without numeric pips. Keeping
   these labels makes them overlap the next filter section on narrow cards.
   Selectors are ocf-noUi-*, not noUi-* — OCFilter prefixes its bundled
   noUiSlider to avoid clashing with any other copy on the page. The
   unprefixed selectors here never matched anything, so none of this block
   applied: pips rendered unstyled (stacked, unpositioned numbers) and the
   connect/handle fell back to OCFilter's own default look. */
.catalog-sidebar__filter .ocf-value-scale .ocf-noUi-pips,
.catalog-sidebar__filter .ocf-value-scale .ocf-noUi-pips-horizontal,
.catalog-sidebar__filter .ocf-value-scale .ocf-noUi-marker,
.catalog-sidebar__filter .ocf-value-scale .ocf-noUi-value {
  display: none !important;
}

.catalog-sidebar__filter .ocf-value-scale .ocf-noUi-connect {
  background: #bf8a3c;
}

/* 17x17 white circle, gold border — node 135:1339 "Ellipse 85/86" exactly.
   right:-8.5px (half the handle width) centers it over the origin's
   zero-width right edge, the standard noUiSlider handle-placement trick. */
.catalog-sidebar__filter .ocf-value-scale .ocf-noUi-handle {
  position: absolute;
  z-index: 1;
  top: -6.5px;
  right: -8.5px;
  width: 17px;
  height: 17px;
  border: 1px solid #bf8a3c;
  border-radius: 50%;
  background: #fffdf9;
  box-shadow: none;
}

.catalog-sidebar__filter .ocf-value-scale .ocf-noUi-handle::before,
.catalog-sidebar__filter .ocf-value-scale .ocf-noUi-handle::after {
  display: none;
}

.catalog-sidebar__filter .ocf-btn-mobile-fixed {
  display: none;
}

.catalog-sidebar__filter .ocf-footer {
  display: block;
  position: static;
  margin: 0;
  padding: 18px 25px 25px;
  border-top: 1px solid #e4dbd0;
  background: transparent;
  box-shadow: none;
}

.catalog-sidebar__filter .ocf-between {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.catalog-sidebar__filter .ocf-search-btn-static {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 24px;
  background: #c9872d !important;
  color: #fff !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}

.catalog-sidebar__filter .ocf-search-btn-static:hover,
.catalog-sidebar__filter .ocf-search-btn-static:focus,
.catalog-sidebar__filter .ocf-search-btn-static:active {
  background: #ab6f20 !important;
  color: #fff !important;
  outline: 0;
}

.catalog-sidebar__filter .ocf-search-btn-static.ocf-disabled {
  background: #c9872d !important;
  color: #fff !important;
  cursor: not-allowed;
  opacity: .55;
}

.catalog-sidebar__filter .ocf-btn-link {
  align-self: center;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: #6a625b !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
  cursor: pointer;
}

/* OCFilter's popover trigger duplicates the already-styled
   .ocf-search-btn-static "Pokaż N produktów" button — our sidebar is
   always inline, never a popover, so it rendered as a second, unstyled
   copy of the same button. Never used here; hide it. */
.catalog-sidebar__filter .ocf-search-btn-popover {
  display: none !important;
}

/* Active-filters summary ("Wybrano:") — shown after clicking "Pokaż N
   produktów", when OCFilter re-renders the sidebar from the resulting
   filtered URL. The vendor markup ships with no default styling of its own
   here (bare text + underlined links), unlike the rest of the panel, which
   inherits a base stylesheet the site currently doesn't load at all — see
   the note above the noUiSlider skeleton block. Figma's filter mockup
   (node 135:1339) has no state for this, so colours/shape are matched to
   the surrounding card (gold accent, same pill language as .catalog-tags). */
.catalog-sidebar__filter .ocf-selected-card {
  margin: 0 0 21px;
  padding: 0 0 21px;
  border-bottom: 1px solid #e4dbd0;
}

.catalog-sidebar__filter .ocf-selected-header {
  margin: 0 0 12px;
  color: #302e2b;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.catalog-sidebar__filter .ocf-selected-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.catalog-sidebar__filter .ocf-selected-filter-name {
  color: #6a625b;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.catalog-sidebar__filter .ocf-selected-discard {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #bf8a3c;
  border-radius: 20px;
  background: transparent;
  color: #bf8a3c;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
}

.catalog-sidebar__filter .ocf-selected-discard:hover {
  background: #bf8a3c;
  color: #fff;
}

.catalog-sidebar__filter .ocf-selected-value-name {
  font-size: inherit;
  color: inherit;
  white-space: nowrap;
}

/* Recoloured copies of core.css's .ocf-times-circle icon (grey #6B7275 by
   default) so the "x" tracks the pill's own border/hover colours instead of
   the vendor grey. core.css itself never loads on this site at all (see the
   noUiSlider skeleton note above), so its .ocf-icon base rule — the one that
   would normally supply background-size/position/repeat — never applies
   either: without setting them here too, the 16x16 SVG paints at native
   size, repeats, and gets clipped to this 10x10 box from the top-left
   corner, which looked like a cropped half-circle instead of a small "x". */
.catalog-sidebar__filter .ocf-selected-discard .ocf-icon {
  flex-shrink: 0;
  min-width: 10px;
  min-height: 10px;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23bf8a3c' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3e%3c/svg%3e");
}

.catalog-sidebar__filter .ocf-selected-discard:hover .ocf-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3e%3c/svg%3e");
}

/* Side by side ("Wyczyść" / "Zastosuj") — the shared .ocf-between rule
   below stacks the footer's link + full-width button vertically, which
   isn't right for two short text links here. */
.catalog-sidebar__filter .ocf-selected-card .ocf-between {
  flex-direction: row;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 2px;
}

@media (max-width: 767px) {
  .catalog-sidebar__filter .ocf-header {
    padding-inline: 20px;
  }

  .catalog-sidebar__filter .ocf-body {
    padding-inline: 20px;
  }
}