/* Felgenuebersicht — vorher als zwei <style>-Bloecke in page-felgen.php. Nur dort geladen: die Regeln aendern gemeinsame Klassen (.kfg__pcard, :root --card-inner) gezielt fuer diese Seite. */

/* ── aus page-felgen.php (Shop-Overrides, oben im Template) ── */
:root { --card-inner: #F5F5F7; }

/* Warteschild auf den Kacheln ─────────────────────────────────────
   Bis die Freigaben da sind, war hier bisher nichts zu sehen: die
   Kacheln standen fertig da und aenderten sich Sekunden spaeter von
   selbst — Schilder erschienen, Karten verschwanden. Das Warteschild
   nimmt genau den Platz ein, den das Ergebnis danach einnimmt. */
.ff-fit-badge.is-laden { color: #6b7280; background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); }
.ff-fit-badge__kreisel {
  width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.15); border-top-color: var(--accent, #B8860B);
  animation: ff-fit-dreh .7s linear infinite;
}
@keyframes ff-fit-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ff-fit-badge__kreisel { animation-duration: 2.4s; }
}

/* ── Shop head layout ── */
.ff-shop-head.kfg__products-head {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 0;
  justify-content: flex-start;
}
.ff-shop-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Filters sit inline — STRIP all card styling from this container */
.ff-shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* View toggle pushed to far right */
.ff-shop-head-row .kfg__view-toggle {
  margin-left: auto;
  flex-shrink: 0;
}

/* Filter toggle button — hidden on desktop */
.ff-filter-toggle {
  display: none;
  align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}
.ff-filter-toggle.is-active {
  border-color: var(--accent);
  background: rgba(184,134,11,.06);
  color: var(--accent);
}
.ff-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700;
}
.ff-filter-count:empty { display: none; }

/* Select styling */
/* /felgen/ ist eine WooCommerce-Seite, deshalb greift `.woocommerce select`
   aus woo-style.css (Klasse + Element schlaegt eine einzelne Klasse) und hat
   Padding, Radius und Hintergrund ueberschrieben — mit dem weissen Hintergrund
   verschwand auch der Chevron, der als background-image haengt. Selektoren
   deshalb ueber den Filter-Container gefuehrt. */
.ff-shop-filters select.ff-select,
.woocommerce .ff-shop-filters select.ff-select {
  flex: 0 0 auto;
  width: auto;
  padding: 8px 28px 8px 12px;
  font-size: 12px;
  font-weight: 600;
  min-width: 120px;
  border-radius: 10px;
  background-color: var(--bg);
  border: 1px solid var(--border);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s;
}
.ff-shop-filters select.ff-select:focus,
.woocommerce .ff-shop-filters select.ff-select:focus { outline: none; border-color: var(--accent); }
.ff-shop-filters select.ff-select:focus-visible { outline: 2px solid #8A6508; outline-offset: 2px; }
.ff-shop-filters select.ff-select:hover { border-color: rgba(0,0,0,.2); }

.ff-filter-reset {
  padding: 6px 12px; font-size: 11px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text3);
  cursor: pointer; font-family: inherit; font-weight: 600;
}

/* Grid columns — gruppiert und einzeln gleich breit.
   Die gruppierte Ansicht stand auf drei Spalten, die einzelne auf vier:
   beim Umschalten sprang das ganze Raster in der Breite. Die Karten sind
   in beiden Fallen gleich gross, es gab keinen Grund fuer den Unterschied. */
.ff-grid,
.ff-grid.is-flat { grid-template-columns: repeat(4, 1fr) !important; }

@media(max-width:1240px) {
  .ff-grid,
  .ff-grid.is-flat { grid-template-columns: repeat(3, 1fr) !important; }
}

@media(max-width:1024px) {
  .ff-grid,
  .ff-grid.is-flat { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Mobile: collapse filters into drawer ── */
@media(max-width:768px) {
  .ff-filter-toggle { display: flex; }
  .ff-shop-head-row .kfg__view-toggle { margin-left: auto; }

  /* Die Kopfzeile MUSS umbrechen duerfen.
     Sie stand auf 'nowrap' (Vorgabewert), und der aufgeklappte Filterbereich
     ist ein Flex-Kind mit 'width: 100%' — er quetschte sich deshalb ZWISCHEN
     Filterknopf und Ansichtsumschalter, statt darunter zu rutschen. Genau
     das war zu sehen: die Auswahlfelder schmal und mittig zwischen den
     Knoepfen, nicht als eigener Bereich. */
  .ff-shop-head-row { flex-wrap: wrap; }

  /* Filters hidden by default on mobile — shown as drawer below the row */
  .ff-shop-filters {
    display: none;
    /* Eigene Zeile unter den Knoepfen, und darin zwei Spalten — vier
       Auswahlfelder untereinander waeren ein halber Bildschirm. Gleiche
       Machart wie im Konfigurator, dort sind es drei nebeneinander. */
    order: 3;
    flex-basis: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    animation: ffFilterSlide .25s ease;
  }
  .ff-shop-filters.is-open { display: grid; }
  .ff-shop-filters select.ff-select {
    width: 100%; min-width: 0; box-sizing: border-box;
    padding-left: 9px; padding-right: 22px;
    background-position: right 6px center;
    /* 16 px: darunter zoomt iOS Safari beim Antippen in die Seite */
    font-size: 16px !important;
    min-height: 44px;
  }
  .ff-shop-filters .ff-filter-reset {
    grid-column: 1 / -1; width: 100%; text-align: center;
  }

  @keyframes ffFilterSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media(max-width:640px) {
  .ff-grid, .ff-grid.is-flat { grid-template-columns: 1fr !important; }
}

/* ── Abstaende: dieselben Werte wie im Konfigurator ──────────────────
   Beide Seiten zeigen dasselbe Raster in derselben Karte, hatten am Telefon
   aber voellig verschiedene Raender: der Konfigurator kommt mit 10 px am
   Seitenrand und 12 px in der Karte aus, die Felgenuebersicht stand bei
   16 px plus 32 px inline — also 48 px je Seite auf einem 360-px-Schirm.
   Fuer den Inhalt blieben damit 264 statt 316 Pixel.

   Am Schreibtisch bleibt alles wie gehabt; angeglichen wird nur, was am
   Telefon knapp ist. */
.ff-shop-sec--hero { padding: calc(64px + 24px) 0 0; }
.ff-shop-sec--grid { padding: 16px 0 80px; }
#ff-products-wrap { padding: 32px; }

@media(max-width:768px) {
  .ff-shop-sec--hero { padding: calc(56px + 12px) 0 0; }
  .ff-shop-sec--grid { padding: 10px 0 40px; }
  /* Seitenrand wie im Konfigurator — nur auf dieser Seite, '.fx' gilt
     ueberall. */
  .ff-shop-sec > .fx { padding: 0 10px; }
  #ff-products-wrap { padding: 12px; }
  .ff-grid, .ff-grid.is-flat { gap: 8px !important; }
}

/* ── Warum die Karte kein <a> mehr ist ──
   Sie war eine, und "Konfigurieren"/"Details" lagen darin. Eine Verknuepfung
   in einer Verknuepfung ist ungueltiges HTML — der Browser zieht die innere
   aus der aeusseren heraus und zerlegt dabei die Karte. Deshalb waren die
   beiden Schalter <span> mit einem onclick, und damit taten Cmd-/Strg-Klick
   und mittlere Maustaste nichts. Der naechste Versuch, 'window.open' von
   Hand, war noch schlechter: fuer den Browser ist das ein Popup, und er
   blockt es.

   Jetzt traegt ein <div> die Kartengestaltung, und darin liegen DREI echte
   Verknuepfungen: eine unsichtbare Flaeche ueber Bild und Text, und die
   beiden Schalter. Jede von ihnen kann der Browser selbst in einem neuen Tab
   oeffnen — ohne eine Zeile Javascript.

   Die Reihenfolge stimmt ueber z-index: die Flaeche liegt ueber dem Inhalt,
   die bedienbaren Teile darueber. */
.kfg__pcard { position: relative; }
.kfg__pcard-flaeche {
  position: absolute; inset: 0; z-index: 1;
  text-decoration: none; font-size: 0;
}
.kfg__pcard-swatches,
.kfg__pcard-swatch,
.kfg__pcard-actions { position: relative; z-index: 2; }
/* Die Bildsteuerung liegt im Bild und muss ebenfalls ueber die Flaeche —
   sonst klickt man beim Blaettern die Karte auf. */
.ff-imgcycle-arrow,
.ff-imgcycle-dots { z-index: 2; }

/* ── Groessenchips auf den Karten ──
   Eine Karte steht fuer mehrere Zollgroessen. Welche davon man wirklich
   bekommt, sagen die Chips: durchgestrichen und blass heisst "gibt es in
   dieser Farbe gerade nicht". Gleiche Sprache wie die Groessenschalter im
   Konfigurator (.kfg__pcard-size-tag.is-oos). */
.ff-pcard-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.ff-pcard-size {
  padding: 2px 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: #6E6E73;
}
.ff-pcard-size.is-oos { opacity: .45; text-decoration: line-through; }

/* Pflichtzeile ueber dem Raster, Einheit am Kartenpreis */
.kfg__pcard-unit { font-size: 12px; font-weight: 500; color: #6E6E73; }


/* Solange die Kopfkarte Fahrzeugbilder zeigt, waehlt der erste Klick auf
   eine Karte nur aus (Rahmen + Felge am Auto) — der Zeiger sagt das mit.
   Den Rahmen selbst bringt '.kfg__pcard.is-selected' aus konfigurator.css
   schon mit, das ist dieselbe Auszeichnung wie dort. */
.kfg__pcard.is-waehlbar { cursor: pointer; }

/* Filtered cards */
.kfg__pcard[data-filtered="1"] { display: none !important; }