/* ===========================================================================
 * Stylepot Dynamic Filter v2.3.0 - Off-Canvas Edition
 * templates/pureistic_4000/css/dynamic_filter.css
 *
 * Nutzt euer toggle_* System fuer Drawer-Rendering
 * (c) stylepot.de
 * ========================================================================= */

:root {
  --df-black: #1a1a1a;
  --df-white: #ffffff;
  --df-gray-50:  #fafafa;
  --df-gray-100: #f5f5f5;
  --df-gray-200: #e5e5e5;
  --df-gray-300: #d4d4d4;
  --df-gray-500: #737373;
  --df-gray-700: #404040;
  --df-transition: 200ms ease;
}

/* ============================================================================
   TOP-BAR (inline, ueber Listing)
   ============================================================================ */
.col_filter.df-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px;
  margin-bottom: 0;
  font-size: 12px;
  color: var(--df-black);
  box-sizing: border-box;
  width: 100%;
}

.df-top__left,
.df-top__right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.df-top__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--df-black);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.df-top__trigger:hover { color: var(--df-gray-700); }
.df-top__trigger svg { width: 16px; height: 16px; }

.df-top__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  letter-spacing: 0;
  background: var(--df-black);
  color: var(--df-white);
  margin-left: 2px;
}

.df-view {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--df-gray-500);
  text-decoration: none;
  transition: color var(--df-transition);
}
.df-view:hover { color: var(--df-black); }
.df-view.is-active { color: var(--df-black); }
.df-view svg { width: 18px; height: 18px; display: block; }

/* ============================================================================
   DRAWER - angelehnt an .col_categories_menu (euer Mobile-Menue)
   Mobil: 20px Hintergrund-Streifen rechts bleibt sichtbar damit User dort
          zum Schliessen tippen kann (wie beim Menue)
   Desktop: fixe Breite 480px
   ============================================================================ */

.toggle_filter {
  position: fixed;
  top: 0;
  bottom: 0;
  right: calc(-100% + 20px);          /* startet ausserhalb, 20px Strip bleibt */
  width: calc(100% - 20px);            /* volle Breite minus 20px Strip rechts */
  height: 100%;
  background: var(--df-white);
  z-index: 1301;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.toggle_filter.active {
  opacity: 1;
  right: 0;
}

/* Ab 440px: feste 420px Breite (analog zum Menu) */
@media (min-width: 440px) {
  .toggle_filter {
    width: 420px;
    right: -420px;
  }
}

/* Ab 900px Desktop: Filter braucht mehr Platz fuer Groessen-Grid + Tags */
@media (min-width: 900px) {
  .toggle_filter {
    width: 480px;
    right: -480px;
  }
}

/* X-Closer: duennes CSS-Kreuz wie in eurem .toggle_closer_menu
   FontAwesome-Icon wird versteckt damit das HTML kompatibel bleibt */
.toggle_filter .toggle_closer {
  position: absolute;
  top: 14px;
  right: 20px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  background: none;
  z-index: 2;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  padding: 0;
}
.toggle_filter .toggle_closer * { display: none !important; }
.toggle_filter .toggle_closer::before,
.toggle_filter .toggle_closer::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--df-black);
}
.toggle_filter .toggle_closer::before { transform: translate(-50%, -50%) rotate(45deg); }
.toggle_filter .toggle_closer::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Im Admin-Mode wird die Leiste oben eingeblendet (analog zu .col_categories_menu) */
.admin_mode .toggle_filter {
  padding-top: 96px;
}
.admin_mode .toggle_filter .toggle_closer {
  top: 46px;
}

/* Headline (wie euer Standard) */
.toggle_filter .toggle_headline {
  padding: 24px 60px 20px 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid var(--df-gray-200);
  flex-shrink: 0;
}

/* Body (scrollbar) */
.df-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */
.df-section {
  padding: 20px 32px;
  border-bottom: 1px solid var(--df-gray-200);
}
.df-section__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--df-gray-500);
  margin-bottom: 12px;
  font-weight: 500;
}
.df-section__empty {
  padding: 12px 16px;
  background: var(--df-gray-50);
  border: 1px solid var(--df-gray-200);
  font-size: 12px;
  color: var(--df-gray-500);
  letter-spacing: 0.02em;
}

/* ============================================================================
   CHIPS (im Drawer und potenziell inline)
   ============================================================================ */
.df-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.df-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--df-white);
  border: 1px solid var(--df-gray-300);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--df-black);
  cursor: pointer;
  transition: border-color var(--df-transition);
}
.df-chip:hover { border-color: var(--df-black); }
.df-chip::after {
  content: '×';
  font-size: 14px;
  line-height: 1;
  color: var(--df-gray-500);
  margin-left: 2px;
}
.df-chip:hover::after { color: var(--df-black); }

/* ============================================================================
   ACCORDION
   ============================================================================ */
.df-accordion { border-bottom: 1px solid var(--df-gray-200); }
.df-accordion__head {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 32px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--df-black);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}
.df-accordion__head:hover { background: var(--df-gray-50); }

.df-accordion__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  letter-spacing: 0;
  background: var(--df-black);
  color: var(--df-white);
  margin-left: 6px;
  font-style: normal;
  font-weight: 500;
}

.df-accordion__icon {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
}
.df-accordion__icon::before,
.df-accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
  transition: transform var(--df-transition);
}
.df-accordion__icon::before {
  width: 10px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.df-accordion__icon::after {
  width: 1px;
  height: 10px;
  transform: translate(-50%, -50%);
}
.df-accordion.is-open .df-accordion__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.df-accordion__body {
  padding: 0 32px 20px;
  display: none;
}
.df-accordion.is-open .df-accordion__body { display: block; }

/* ============================================================================
   GROESSEN-GRUPPEN-LABELS (statt Tabs)
   ============================================================================ */
.df-size-group__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--df-gray-500);
  margin: 16px 0 8px 0;
  font-weight: 500;
}
.df-size-group__label:first-child { margin-top: 0; }
.df-sizes--spaced { margin-bottom: 8px; }

/* ============================================================================
   GROESSEN-BUTTONS
   ============================================================================ */
.df-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 6px;
}
.df-size {
  background: var(--df-white);
  border: 1px solid var(--df-gray-300);
  padding: 12px 0;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  transition: var(--df-transition);
  position: relative;
  user-select: none;
  letter-spacing: 0.03em;
}
.df-size:hover:not(.is-disabled) { border-color: var(--df-black); }
.df-size.is-selected {
  background: var(--df-black);
  color: var(--df-white);
  border-color: var(--df-black);
}
.df-size.is-disabled {
  color: var(--df-gray-300);
  cursor: not-allowed;
  background: var(--df-gray-50);
}
.df-size.is-disabled::after {
  content: '';
  position: absolute;
  top: 50%; left: 10%; right: 10%;
  height: 1px;
  background: var(--df-gray-300);
  transform: rotate(-12deg);
}
.df-size input { display: none; }

/* Wenn Live-Counter sagt: 0 Treffer waeren -> ausgrauen (aber klickbar,
   User soll eventuell selber entscheiden koennen) */
.df-size.is-empty {
  color: var(--df-gray-300);
  background: var(--df-gray-50);
  border-color: var(--df-gray-200);
}
.df-size.is-empty.is-selected {
  color: var(--df-white);
  background: var(--df-black);
  border-color: var(--df-black);
}

/* ============================================================================
   TAG-OPTIONS (Liste mit Checkbox)
   ============================================================================ */
.df-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.df-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--df-transition);
}
.df-option:hover { border-bottom-color: var(--df-gray-200); }
.df-option__check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--df-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--df-white);
  transition: var(--df-transition);
}
.df-option.is-selected .df-option__check {
  background: var(--df-black);
  border-color: var(--df-black);
}
.df-option.is-selected .df-option__check::after {
  content: '';
  width: 7px;
  height: 3px;
  border-left: 1px solid var(--df-white);
  border-bottom: 1px solid var(--df-white);
  transform: rotate(-45deg) translate(1px, -1px);
}
.df-option__label {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 300;
  flex: 1;
}
.df-option input { display: none; }

/* Live-Counter empty */
.df-option.is-empty { color: var(--df-gray-300); }
.df-option.is-empty .df-option__check { border-color: var(--df-gray-200); background: var(--df-gray-50); }
.df-option.is-empty.is-selected { color: var(--df-black); }
.df-option.is-empty.is-selected .df-option__check { background: var(--df-black); border-color: var(--df-black); }

/* ============================================================================
   SWATCHES (Farb-Varianten mit Bild)
   ============================================================================ */
.df-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 14px;
}
.df-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.df-swatch__dot {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--df-gray-200);
  background: var(--df-gray-100);
  position: relative;
}
.df-swatch.is-selected .df-swatch__dot {
  outline: 1px solid var(--df-black);
  outline-offset: 2px;
}
.df-swatch__name {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--df-black);
}
.df-swatch input { display: none; }
.df-swatch.is-empty { opacity: 0.4; }
.df-swatch.is-empty.is-selected { opacity: 1; }

/* Apply-Button Live-Counter */
.df-apply__count {
  margin-left: 6px;
  font-weight: 400;
  opacity: 0.8;
}
.df-apply.is-empty {
  background: var(--df-gray-300);
  color: var(--df-white);
  cursor: not-allowed;
}

/* ============================================================================
   SORT: SumoSelect neutralisieren, native Select dezent stylen
   ============================================================================ */

/* SumoSelect wrappt das Select in <div class="SumoSelect"><p></p><div class="optWrapper">...</div><select/></div>
   Wir verstecken NUR die Chrome-Teile (p + optWrapper), nicht das ganze SumoSelect div -
   weil das Select als letztes Child drin liegt und wir das brauchen. */
.df-sort-native .SumoSelect > p,
.df-sort-native .SumoSelect > div.optWrapper,
.df-sort-native .SumoSelect > div.CaptionCont,
.df-sort-native .SumoSelect::before {
  display: none !important;
}

/* Der SumoSelect-Wrapper selbst soll keinen Rahmen/Background haben */
.df-sort-native .SumoSelect {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Das native Select sichtbar und ordentlich stylen */
.df-sort-native select {
  display: block !important;
  opacity: 1 !important;
  position: static !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--df-white);
  border: none;
  border-bottom: 1px solid var(--df-gray-200);
  padding: 8px 24px 8px 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--df-black);
  cursor: pointer;
  height: auto;
  line-height: 1.4;
  text-transform: uppercase;
  /* Custom-Dropdown-Pfeil (dezentes SVG inline) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a1a1a' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px 6px;
  outline: none;
}
.df-sort-native select:focus { border-bottom-color: var(--df-black); }
.df-sort-native select option {
  font-family: inherit;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--df-black);
  background: var(--df-white);
}

/* Form-Wrapper: kein margin/padding-Krempel */
.df-sort-native form { margin: 0; padding: 0; }
.df-sort-native { padding-top: 4px; }

/* ============================================================================
   FOOTER (sticky am Drawer-Boden)
   ============================================================================ */
.df-drawer__footer {
  padding: 16px 24px;
  background: var(--df-white);
  border-top: 1px solid var(--df-gray-200);
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.df-apply {
  flex: 1;
  background: var(--df-black);
  color: var(--df-white);
  border: 1px solid var(--df-black);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px;
  cursor: pointer;
  transition: background var(--df-transition);
}
.df-apply:hover { background: var(--df-gray-700); border-color: var(--df-gray-700); }
.df-apply.is-loading { opacity: 0.6; pointer-events: none; }

/* Reset-Button: invertiert (weiss mit schwarzem Outline) */
.df-reset {
  flex: 0 1 auto;
  min-width: 140px;
  background: var(--df-white);
  color: var(--df-black);
  border: 1px solid var(--df-black);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px 20px;
  cursor: pointer;
  transition: background var(--df-transition), color var(--df-transition);
}
.df-reset:hover {
  background: var(--df-black);
  color: var(--df-white);
}

/* Mobile: Reset schmaler halten */
@media (max-width: 440px) {
  .df-reset { min-width: 0; padding: 18px 14px; font-size: 11px; letter-spacing: 0.08em; }
  .df-apply { padding: 18px 14px; font-size: 11px; letter-spacing: 0.08em; }
}

/* ============================================================================
   Mobile-Feintuning
   ============================================================================ */
@media (max-width: 700px) {
  .col_filter.df-top { padding: 12px 8px; }
  .toggle_filter .toggle_headline { padding: 20px 50px 16px 20px; font-size: 12px; }
  .df-section { padding: 16px 20px; }
  .df-accordion__head { padding: 16px 20px; font-size: 11px; }
  .df-accordion__body { padding: 0 20px 16px; }
  .df-drawer__footer { padding: 12px 16px; }
}