:root{ --flu-font: 'Outfit', sans-serif; }   /* zentrale Schrift-Variable (Shop, WP-Kontext) */
/* ═══════════════════════════════════════════════════════════
   Fluica Shop — Two-Level Catalog
   Level 1: Type grid · Level 2: Filters + Products + Sticky CTA
   ═══════════════════════════════════════════════════════════ */

/* ── Suppress WooCommerce archive UI on the Shop Page ──────
   When the WC "Shop Page" carries [fluica_shop], WooCommerce
   still renders its default archive output below our shortcode
   (products loop, result count, sort, pagination, breadcrumb).
   We hide them all here so only our custom shop is visible.
   The body.woocommerce-shop class is added by WC ONLY on the
   shop archive — never on categories or other product pages,
   so this is safely scoped.
   ─────────────────────────────────────────────────────────── */
/* IMPORTANT — selectors that we explicitly do NOT hide:
     .term-description     : carries our [fluica_shop] in some themes
     .woocommerce-products-header : carries .page-description which
       carries our shortcode in Hello Elementor + similar themes
     .page-description     : same reason
   Only hide WC's own UI elements (loop, sort, pagination, etc),
   never the wrappers that hold the archive description. */
body.woocommerce-shop ul.products,
body.woocommerce-shop > .woocommerce > ul.products,
body.woocommerce-shop .woocommerce-products-header__title,
body.woocommerce-shop .woocommerce-result-count,
body.woocommerce-shop .woocommerce-ordering,
body.woocommerce-shop .woocommerce-pagination,
body.woocommerce-shop .woocommerce-no-products-found,
body.woocommerce-shop .woocommerce-info,
body.woocommerce-shop nav.woocommerce-breadcrumb,
body.woocommerce-shop .related.products,
body.woocommerce-shop .upsells.products,
body.woocommerce-shop .cross-sells {
  display: none !important;
}

@font-face {
  font-family: 'Outfit';
  src: url('https://konfigurator.fluica.ch/static/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────── */

.flu-shop {
  --flu-bg: #26232d;
  --flu-surface: #211e2a;
  --flu-elevated: #2e2b36;
  --flu-border: #3a3642;
  --flu-border-soft: #322e3c;
  --flu-accent: #e3df00;
  --flu-accent-hover: #f0ec20;
  --flu-text: #d3d3d9;
  --flu-muted: #8d8d99;
  --flu-lavender: #8e8ec5;
  --flu-white: #fafafa;
  --flu-viewer-bg: #d3d3d9;
  --flu-success: #2e7d5b;
  --flu-error: #c0392b;
  --flu-radius: 10px;
  --flu-radius-sm: 6px;

  /* ── Figma-palette tokens (used by v2 detail layout) ──── */
  --flu-nachtschliff: #26232d;
  --flu-nachtschliff-02: #211e2a;
  --flu-schattenwerk: #8e8ec5;
  --flu-schattenwerk-01: #393853;
  --flu-neutral-superhell: #d3d3d9;
  --flu-neutral-hell: #babac4;
  --flu-neutral-dunkel: #5a5a62;
  --flu-marken-weiss: #fafafa;
  --flu-dornblatt-01: #5c5800;
}

/* ── Isolation ────────────────────────────────────────────── */

.flu-shop,
.flu-shop *,
.flu-shop *::before,
.flu-shop *::after {
  box-sizing: border-box !important;
  font-family: var(--flu-font) !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}

.flu-shop a,
.flu-shop a:link,
.flu-shop a:visited,
.flu-shop a:active {
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* No underlines anywhere in the shop, including the #view=merkliste list.
   The .flu-shop a guard above only covers links; WP/Elementor theme-bleed
   still underlines <button> text — the qty +/- steppers, filter/config
   buttons — and the config/type description copy. Downloads (the only
   underlined element in the UI) live in the modal, never here. */
.flu-shop * { text-decoration: none !important; }

.flu-shop button {
  font-family: var(--flu-font) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Container ────────────────────────────────────────────── */

.flu-shop {
  /* Left-align the shop with the header's Fluica logo: same box as the
     Elementor header (max-width 1660 = content 1600 + 30 padding, centered).
     padding-left 48 = 30 (header padding) + 18 (the logo PNG's internal left
     inset) → shop content sits flush under the visible "Fluica" logo at every
     viewport. Merkliste keeps its own narrower centered box (override below). */
  max-width: 1660px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  /* Breadcrumb above carries its own 24px top-padding. Keep this small
     so the gap between breadcrumb and content stays consistent. */
  padding: 0 30px 72px 48px;
  color: var(--flu-text);
}

/* ══════════════════════════════════════════════════════════
   TOP BAR — Cart only (breadcrumb is rendered by PHP and
   updated dynamically by JS, see updateBreadcrumb()).
   ══════════════════════════════════════════════════════════ */

.flu-shop-topbar {
  /* Leer, seit Merkliste-Stern + Warenkorb in den Seiten-Header gewandert sind
     (siehe renderTopBar). Ausgeblendet, damit kein leerer 16px-Abstand bleibt. */
  display: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 0 16px !important;
}

/* Top-bar cluster (Figma Group 96): meta row + tools row, right-aligned. */
.flu-tb {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 760px !important;
}

/* Row 1 — language + currency switchers (visual). */
.flu-tb-meta {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  font-family: var(--flu-font) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
.flu-tb-lang,
.flu-tb-curr { display: inline-flex !important; align-items: center !important; gap: 9px !important; }
.flu-tb-opt {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  cursor: pointer !important;
  color: var(--flu-schattenwerk) !important;       /* lavender #8e8ec5 */
  transition: color .15s !important;
}
.flu-tb-opt:hover { color: var(--flu-accent) !important; }
.flu-tb-opt--active { color: var(--flu-neutral-superhell) !important; }   /* #d3d3d9 */
.flu-tb-msep { color: var(--flu-schattenwerk) !important; }

/* Row 2 — search pill + tool icons. */
.flu-tb-tools {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}
.flu-tb-search {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 2px solid var(--flu-schattenwerk) !important;
  border-radius: 60px !important;
  height: 40px !important;
  padding: 0 6px 0 20px !important;
}
.flu-search__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: var(--flu-white) !important;
  font-family: var(--flu-font) !important;
  font-size: 15px !important;
}
.flu-search__input::placeholder { color: var(--flu-schattenwerk) !important; opacity: 1 !important; }
/* hide the native search clear/decoration for a clean pill */
.flu-search__input::-webkit-search-decoration,
.flu-search__input::-webkit-search-cancel-button { -webkit-appearance: none !important; }
.flu-tb-search__btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: var(--flu-schattenwerk) !important;
  transition: color .15s !important;
}
.flu-tb-search__btn:hover { color: var(--flu-accent) !important; }
.flu-tb-search svg { width: 20px !important; height: 20px !important; display: block !important; }

.flu-shop-title {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--flu-accent) !important; /* "Fluica Produkte" bleibt gelb (Marke) */
  margin: 0 0 18px !important;
}

/* Detail-page title (e.g. "Schlauchverbinder gerade") — slightly less
   shouty than the level-1 brand title, so it doesn't compete with
   the configurator CTA on the right. */
.flu-shop-title.flu-shop-title--detail {
  color: var(--flu-white) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
}

/* Tool icons (account / Merkliste / cart) + yellow count badges. */
.flu-tb-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: var(--flu-schattenwerk) !important;       /* lavender #8e8ec5 */
  text-decoration: none !important;
  transition: color .15s !important;
}
.flu-tb-icon:hover { color: var(--flu-accent) !important; }
.flu-tb-icon svg { width: 27px !important; height: 27px !important; display: block !important; }

/* Breadcrumb: lavendel, grösser, bold — high specificity to override PHP inline */
nav.flu-breadcrumb.flu-breadcrumb {
  font-size: 24px !important;
  color: #8E8EC5 !important;
  font-weight: 700 !important;
  /* Einziges vom Plugin verbindlich gestyltes Element → trägt den symmetrischen
     Vertikal-Abstand. Padding statt Marge vermeidet Margin-Collapsing.
     Externer Ober-Leerraum ~31px + padding-top 9px ≈ 40px oben; padding-bottom
     40px ergibt unten genau 40px (nachdem .flu-shop padding-top auf 0 steht).
     Symmetrie by construction, beide Werte einzeln nachjustierbar. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 9px !important;
  padding-bottom: 40px !important;
}
nav.flu-breadcrumb a.flu-bc-link,
nav.flu-breadcrumb a.flu-bc-link:link,
nav.flu-breadcrumb a.flu-bc-link:visited {
  color: #8E8EC5 !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}
nav.flu-breadcrumb a.flu-bc-link:hover {
  color: #e3df00 !important;
}
nav.flu-breadcrumb .flu-bc-current {
  color: #fafafa !important; /* aktueller Ort in Markenweiss (Eltern-Links bleiben lavendel) */
  font-weight: 800 !important;
  font-size: 24px !important;
}
nav.flu-breadcrumb .flu-bc-sep {
  color: #6a6a8a !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  margin: 0 6px !important;
}

/* Merkliste-Stern + Warenkorb, von mountBreadcrumbTools() in die
   PHP-Breadcrumb-Zeile verschoben → rechtsbündig auf Höhe von
   "Shop | T-Stück". Die Icons behalten ihr `.flu-tb-icon`-Styling. */
.flu-breadcrumb .flu-bc-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-left: auto !important;
}

/* .flu-cart-badge + .flu-fav-badge kept as aliases so updateCartBadge() and
   the favorites listener can target/create badges that still pick up styling. */
.flu-tb-badge,
.flu-cart-badge,
.flu-fav-badge {
  position: absolute !important;
  top: -5px !important;
  right: -6px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  background: var(--flu-accent) !important;          /* yellow #e3df00 */
  color: var(--flu-nachtschliff) !important;         /* dark #26232d */
  font-family: var(--flu-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-align: center !important;
  border-radius: 10px !important;
  pointer-events: none !important;
}
.flu-tb-badge[hidden],
.flu-fav-badge[hidden] { display: none !important; }

/* Top-bar search: hide non-matching cards. Class (not inline style) so it
   overrides the cards' own `display:*!important` rules. */
.flu-search-hidden { display: none !important; }

/* Merkliste view: active star + hidden non-favorite cards + empty hint. */
.flu-tb-icon--active { color: var(--flu-accent) !important; }
.flu-fav-hidden { display: none !important; }
.flu-fav-empty {
  color: var(--flu-muted) !important;
  font-family: var(--flu-font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 14px 2px !important;
}

/* Narrow screens: let the cluster span full width and the search shrink. */
@media (max-width: 640px) {
  .flu-tb { max-width: 100% !important; }
  .flu-tb-meta { gap: 16px !important; font-size: 14px !important; }
  .flu-tb-tools { gap: 10px !important; }
  .flu-tb-icon { width: 32px !important; height: 32px !important; }
  .flu-tb-icon svg { width: 24px !important; height: 24px !important; }
}

/* ══════════════════════════════════════════════════════════
   LEVEL 1 — TYPE GRID
   ══════════════════════════════════════════════════════════ */

.flu-shop-intro {
  font-size: 15px !important;
  color: var(--flu-muted) !important;
  margin: 0 0 28px !important;
  max-width: 640px !important;
}

.flu-type-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.flu-type-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--flu-surface) !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: var(--flu-radius) !important;
  padding: 20px !important;
  transition: border-color .2s, transform .15s, box-shadow .2s !important;
  min-height: 180px !important;
  position: relative !important;
}

.flu-type-card:hover {
  border-color: var(--flu-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
}

.flu-type-card--disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

.flu-type-card--disabled:hover {
  border-color: var(--flu-border) !important;
  transform: none !important;
  box-shadow: none !important;
}

.flu-type-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: var(--flu-elevated) !important;
  color: var(--flu-accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

.flu-type-body { display: flex !important; flex-direction: column !important; gap: 4px !important; flex: 1 !important; }

.flu-type-label {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--flu-white) !important;
  margin: 0 !important;
}

.flu-type-desc {
  font-size: 13px !important;
  color: var(--flu-muted) !important;
  margin: 0 !important;
  flex: 1 !important;
}

.flu-type-count {
  display: inline-block !important;
  background: var(--flu-accent) !important;
  color: #1a1a1a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  align-self: flex-start !important;
  margin-top: 8px !important;
}

.flu-type-soon {
  display: inline-block !important;
  background: var(--flu-elevated) !important;
  color: var(--flu-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  align-self: flex-start !important;
  margin-top: 8px !important;
  border: 1px solid var(--flu-border) !important;
}

/* ══════════════════════════════════════════════════════════
   LEVEL 2 — DETAIL LAYOUT
   Filter (left) · Products (center) · Configurator (right)
   ══════════════════════════════════════════════════════════ */

.flu-detail-layout {
  display: grid !important;
  grid-template-columns: 220px 1fr 280px !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* Give sticky children room to scroll against */
.flu-filter-col,
.flu-config-col {
  height: 100% !important;
  min-height: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   FILTER PANEL
   ══════════════════════════════════════════════════════════ */

.flu-filter-col { min-width: 0 !important; }

.flu-filter-panel {
  position: sticky !important;
  top: 24px !important;
  background: var(--flu-surface) !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: var(--flu-radius) !important;
  padding: 18px !important;
}

.flu-filter-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--flu-border-soft) !important;
}

.flu-filter-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--flu-white) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

.flu-filter-reset {
  background: transparent !important;
  border: none !important;
  color: var(--flu-muted) !important;
  font-size: 13px !important;
  padding: 0 !important;
  transition: color .15s !important;
}

.flu-filter-reset:hover { color: var(--flu-accent) !important; }

.flu-filter-group {
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--flu-border-soft) !important;
}

.flu-filter-group:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.flu-filter-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--flu-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 10px !important;
}

.flu-filter-hint {
  font-size: 13px !important;
  color: var(--flu-muted) !important;
  margin-top: 8px !important;
  line-height: 1.4 !important;
}

/* ── Chip filters ──────────────────────────────────────────── */

.flu-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.flu-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 10px !important;
  background: var(--flu-elevated) !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--flu-text) !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  user-select: none !important;
}

.flu-chip:hover { border-color: var(--flu-accent) !important; color: var(--flu-accent) !important; }

.flu-chip input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.flu-chip--on {
  background: var(--flu-accent) !important;
  border-color: var(--flu-accent) !important;
  color: #1a1a1a !important;
}

.flu-chip--on:hover { color: #1a1a1a !important; }

/* ── Dual-range slider ─────────────────────────────────────── */

.flu-range { width: 100% !important; }

.flu-range-values {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--flu-white) !important;
  margin-bottom: 12px !important;
}

.flu-range-sep { color: var(--flu-muted) !important; font-weight: 500 !important; }
.flu-range-unit { font-size: 13px !important; color: var(--flu-muted) !important; font-weight: 500 !important; margin-left: 4px !important; }

.flu-range-track {
  position: relative !important;
  height: 32px !important;
  margin: 0 8px !important;
}

.flu-range-track::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--flu-border) !important;
  border-radius: 2px !important;
}

.flu-range-fill {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 4px !important;
  background: var(--flu-dornblatt-01) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.flu-range-input {
  position: absolute !important;
  top: 0 !important;
  left: -8px !important;
  width: calc(100% + 16px) !important;
  height: 32px !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Track — invisible, only used for sizing */
.flu-range-input::-webkit-slider-runnable-track { height: 4px !important; background: transparent !important; }
.flu-range-input::-moz-range-track { height: 4px !important; background: transparent !important; }

/* Thumb */
.flu-range-input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--flu-white) !important;
  border: 2px solid var(--flu-dornblatt-01) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 3 !important;
  margin-top: -7px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
}

.flu-range-input::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  background: var(--flu-white) !important;
  border: 2px solid var(--flu-dornblatt-01) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
}

.flu-range-input--lo { z-index: 2 !important; }
.flu-range-input--hi { z-index: 2 !important; }

.flu-range-scale {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
  font-size: 14px !important;
  color: var(--flu-muted) !important;
}

/* ══════════════════════════════════════════════════════════
   PRODUCTS COLUMN
   ══════════════════════════════════════════════════════════ */

.flu-products-col { min-width: 0 !important; }

.flu-products-head {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--flu-accent) !important;
}

.flu-products-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--flu-white) !important;
  margin: 0 !important;
}

.flu-products-count {
  font-size: 13px !important;
  color: var(--flu-muted) !important;
  font-weight: 500 !important;
}

.flu-product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.flu-product-card {
  background: var(--flu-surface) !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: var(--flu-radius) !important;
  overflow: hidden !important;
  transition: border-color .2s, transform .15s, box-shadow .2s !important;
}

.flu-product-card:hover {
  border-color: var(--flu-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
}

.flu-product-image {
  display: block !important;
  aspect-ratio: 1 !important;
  background: var(--flu-viewer-bg) !important;
  overflow: hidden !important;
}

.flu-product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s !important;
}

.flu-product-card:hover .flu-product-image img { transform: scale(1.04) !important; }

.flu-product-placeholder {
  width: 100% !important;
  height: 100% !important;
  background: var(--flu-elevated) !important;
}

.flu-product-info { padding: 14px !important; }

.flu-product-name {
  display: block !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--flu-white) !important;
  margin-bottom: 6px !important;
  transition: color .15s !important;
}

.flu-product-name:hover { color: var(--flu-accent) !important; }

.flu-product-size {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--flu-muted) !important;
  margin-bottom: 6px !important;
  font-variant-numeric: tabular-nums;
}

.flu-product-meta {
  font-size: 12px !important;
  color: var(--flu-muted) !important;
  margin-bottom: 8px !important;
}

.flu-product-pricing {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.flu-product-price {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--flu-accent) !important;
}

.flu-product-tax {
  font-size: 11px !important;
  color: var(--flu-muted) !important;
  font-weight: 400 !important;
}

.flu-shop .flu-add-to-cart {
  display: block !important;
  width: 100% !important;
  background: var(--flu-elevated) !important;
  color: var(--flu-white) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 12px !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s, color .2s !important;
  text-align: center !important;
}

.flu-shop .flu-add-to-cart:hover {
  background: var(--flu-accent) !important;
  color: #1a1a1a !important;
  border-color: var(--flu-accent) !important;
}

.flu-shop .flu-atc-loading { opacity: .7 !important; pointer-events: none !important; }

.flu-shop .flu-atc-success {
  background: var(--flu-success) !important;
  border-color: var(--flu-success) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.flu-shop .flu-atc-error {
  background: var(--flu-error) !important;
  border-color: var(--flu-error) !important;
  color: #fff !important;
}

.flu-shop .flu-atc-cart-link {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  opacity: .9 !important;
}

.flu-shop .flu-atc-cart-link:hover { opacity: 1 !important; }

/* ── No products (empty filter result) ─────────────────────── */

.flu-no-products {
  background: var(--flu-surface) !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: var(--flu-radius) !important;
  padding: 40px 24px !important;
  text-align: center !important;
}

.flu-no-products h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--flu-white) !important;
  margin: 0 0 8px !important;
}

.flu-no-products p {
  font-size: 14px !important;
  color: var(--flu-muted) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   CONFIGURATOR CTA (sticky card, right)
   ══════════════════════════════════════════════════════════ */

.flu-config-col { min-width: 0 !important; }

.flu-config-sticky {
  position: sticky !important;
  top: 24px !important;
  background: linear-gradient(180deg, var(--flu-surface) 0%, var(--flu-elevated) 100%) !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: var(--flu-radius) !important;
  padding: 22px !important;
}

.flu-config-badge {
  display: inline-block !important;
  background: var(--flu-accent) !important;
  color: #1a1a1a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
}

.flu-config-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--flu-white) !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
}

.flu-config-desc {
  font-size: 13px !important;
  color: var(--flu-text) !important;
  margin: 0 0 14px !important;
  line-height: 1.5 !important;
}

.flu-config-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}

.flu-config-list li {
  font-size: 12px !important;
  color: var(--flu-muted) !important;
  padding: 5px 0 5px 20px !important;
  position: relative !important;
}

.flu-config-list li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--flu-accent) !important;
  font-weight: 700 !important;
}

.flu-config-btn {
  display: block !important;
  width: 100% !important;
  background: var(--flu-accent) !important;
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 6px !important;
  text-align: center !important;
  transition: background .15s !important;
}

.flu-config-btn:hover { background: var(--flu-accent-hover) !important; }

/* ══════════════════════════════════════════════════════════
   MINI-CONFIGURATOR (inline form replacing the CTA box for
   types whose TYPES[…].miniConfig is defined). Visual style
   mirrors the standalone configurator (style.css): grey input
   bg, lavender labels, rotated-square arrow steppers, accent
   yellow submit button.
   ══════════════════════════════════════════════════════════ */

.flu-mini-cfg {
  position: sticky !important;
  top: 24px !important;
  background: linear-gradient(180deg, var(--flu-surface) 0%, var(--flu-elevated) 100%) !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: var(--flu-radius) !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
}

.flu-mini-cfg__sketch {
  text-align: center !important;
  background: var(--flu-viewer-bg) !important;
  border-radius: var(--flu-radius-sm) !important;
  padding: 16px !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flu-mini-cfg__sketch img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

.flu-mini-cfg__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--flu-white) !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}

.flu-mini-cfg__subtitle {
  font-size: 13px !important;
  color: var(--flu-muted) !important;
  margin: 0 0 16px !important;
  line-height: 1.6 !important;
}

.flu-mini-cfg__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}

.flu-mini-cfg__group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.flu-mini-cfg__label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--flu-lavender) !important;
}

.flu-mini-cfg__input-wrap {
  position: relative !important;
  height: 44px !important;
}

.flu-mini-cfg__input {
  width: 100% !important;
  height: 100% !important;
  background: #5a5a62 !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 0 64px 0 14px !important;
  color: var(--flu-white) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: var(--flu-font) !important;
  outline: none !important;
  transition: box-shadow .15s !important;
  -moz-appearance: textfield !important;
}

.flu-mini-cfg__input:focus {
  box-shadow: 0 0 0 2px var(--flu-accent) !important;
}

.flu-mini-cfg__input::-webkit-outer-spin-button,
.flu-mini-cfg__input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.flu-mini-cfg__unit {
  position: absolute !important;
  right: 36px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: var(--flu-white) !important;
  pointer-events: none !important;
}

.flu-mini-cfg__arrows {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Pfeil-Stepper als rotierte Quadrate (entspricht .input-arrow im
   Konfigurator-Stylesheet). Hover wechselt auf Akzent-Gelb. */
.flu-mini-cfg__arrow {
  width: 16px !important;
  height: 8px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.flu-mini-cfg__arrow::after {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: #babac4 !important;
  transform: rotate(45deg) !important;
  margin-left: 4px !important;
  transition: background .15s !important;
}

.flu-mini-cfg__arrow:hover::after { background: var(--flu-accent) !important; }
.flu-mini-cfg__arrow--up::after   { margin-top: 7px !important; }
.flu-mini-cfg__arrow--down::after { margin-bottom: 7px !important; }

.flu-mini-cfg__error {
  font-size: 15px !important;
  color: #cfcfee !important;                              /* lavender (per user — not red) */
  background: rgba(142, 142, 197, .14) !important;
  border: 1px solid var(--flu-lavender) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  line-height: 1.4 !important;
}

.flu-mini-cfg__btn {
  display: block !important;
  width: 100% !important;
  background: var(--flu-accent) !important;
  color: #1a1a1a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--flu-font) !important;
  padding: 14px 16px !important;
  border: none !important;
  border-radius: 6px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .15s, opacity .15s !important;
  margin-top: 4px !important;
}

.flu-mini-cfg__btn:hover:not(:disabled) { background: var(--flu-accent-hover) !important; }
.flu-mini-cfg__btn:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}

/* "Zuletzt konfiguriert" Chip-Liste unter der Form */
.flu-mini-cfg-recent {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--flu-border-soft) !important;
}

.flu-mini-cfg-recent:empty { display: none !important; }

.flu-mini-cfg-recent__title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--flu-muted) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}

.flu-mini-cfg-recent__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.flu-mini-cfg-recent__list li { margin: 0 !important; padding: 0 !important; }

.flu-mini-cfg-recent__list a {
  display: inline-block !important;
  padding: 5px 11px !important;
  background: var(--flu-elevated) !important;
  border: 1px solid var(--flu-border-soft) !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  color: var(--flu-text) !important;
  text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s !important;
}

.flu-mini-cfg-recent__list a:hover {
  background: var(--flu-accent) !important;
  color: #1a1a1a !important;
  border-color: var(--flu-accent) !important;
}

/* ══════════════════════════════════════════════════════════
   LOADING / ERROR
   ══════════════════════════════════════════════════════════ */

.flu-shop-loading {
  display: flex !important;
  justify-content: center !important;
  padding: 100px 0 !important;
}

.flu-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--flu-border);
  border-top-color: var(--flu-accent);
  border-radius: 50%;
  animation: flu-spin .7s linear infinite;
}

@keyframes flu-spin { to { transform: rotate(360deg); } }

/* Soft loading state: keep the CURRENT view visible (gently dimmed) while the
   next one loads, then swap it in — instead of blanking the shop + a centre
   spinner. No wheel, no "everything gone then new appears". Pointer events stay
   ON so fast click-through still works (the navId guard handles ordering). */
#fluica-shop.flu-view-loading,
.flu-shop.flu-view-loading {
  opacity: 0.6 !important;
  transition: opacity 0.12s ease !important;
}

.flu-shop-error {
  text-align: center !important;
  padding: 60px 20px !important;
  color: var(--flu-muted) !important;
  font-size: 16px !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Laptop: slim down columns a bit */
@media (max-width: 1280px) {
  .flu-detail-layout {
    grid-template-columns: 200px 1fr 260px !important;
    gap: 16px !important;
  }
  .flu-shop { padding: 24px 16px 60px; }
  .flu-filter-panel { padding: 14px !important; }
  .flu-config-sticky { padding: 18px !important; }
}

/* Tablet: filter + CTA stack below */
@media (max-width: 1024px) {
  .flu-shop { padding: 28px 24px 60px; }
  .flu-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .flu-filter-panel,
  .flu-config-sticky {
    position: static !important;
  }
  /* Stacked layout: middle column gets full width — relax the fixed 4 grid */
  .flu-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }
}

/* Small tablet */
@media (max-width: 720px) {
  .flu-shop { padding: 24px 14px 60px; }
  .flu-shop-title { font-size: 24px !important; }
  .flu-products-title { font-size: 19px !important; }
  .flu-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone */
@media (max-width: 480px) {
  .flu-product-info { padding: 10px !important; }
  .flu-product-name { font-size: 13px !important; }
  .flu-product-price { font-size: 15px !important; }
  .flu-shop .flu-add-to-cart { font-size: 12px !important; padding: 8px 8px !important; }
  .flu-product-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   PAGINATION + RESULT COUNT (v1.1.41 — Stufe-3-Skalierung)
   ══════════════════════════════════════════════════════════════ */

.flu-result-count {
  font-size: 13px !important;
  color: #8d8d99 !important;
  margin: 0 0 16px !important;
  padding: 0 4px !important;
}

.flu-pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 32px !important;
  padding: 16px 0 !important;
  border-top: 1px solid #3a3642 !important;
}

.flu-pag-btn {
  background: #211e2a !important;
  color: #d3d3d9 !important;
  border: 1px solid #3a3642 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-family: var(--flu-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 38px !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

.flu-pag-btn:hover:not(:disabled) {
  background: #2e2b36 !important;
  border-color: #8e8ec5 !important;
  color: #fafafa !important;
}

.flu-pag-active {
  background: #e3df00 !important;
  color: #1a1a1a !important;
  border-color: #e3df00 !important;
  font-weight: 700 !important;
  cursor: default !important;
}

.flu-pag-active:hover {
  background: #e3df00 !important;
  color: #1a1a1a !important;
  border-color: #e3df00 !important;
}

.flu-pag-disabled,
.flu-pag-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.flu-pag-btn:disabled:hover {
  background: #211e2a !important;
  border-color: #3a3642 !important;
  color: #d3d3d9 !important;
}

.flu-pag-prev,
.flu-pag-next {
  font-weight: 600 !important;
  padding: 8px 16px !important;
}

.flu-pag-ellipsis {
  color: #8d8d99 !important;
  padding: 0 6px !important;
  user-select: none !important;
}

@media (max-width: 600px) {
  .flu-pagination {
    gap: 4px !important;
  }
  .flu-pag-btn {
    padding: 6px 10px !important;
    font-size: 13px !important;
    min-width: 32px !important;
  }
  .flu-pag-prev,
  .flu-pag-next {
    padding: 6px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT V2 — Sidebar + Konfigurator-Box + Standardprodukte
   Activated via `.flu-shop--detail-v2` body class (per-type).
   ═══════════════════════════════════════════════════════════ */

.flu-shop--detail-v2 {
  display: block;
}

.flu-detail-v2 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  /* Kein Top-Margin: der Vertikal-Abstand kommt allein aus der Breadcrumb
     padding-bottom (siehe .flu-breadcrumb Override). Eine Top-Marge hier würde
     den Unter-Abstand erneut verfälschen, daher bewusst auf 0. */
  margin-top: 0;
  align-items: start;
}

/* ── Sidebar ───────────────────────────────────────────────── */

/* Column wrapper — holds the "Produkte" h2 outside the dark box and
   makes the whole pair sticky as the user scrolls the products grid. */
.flu-type-sb-col {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 12px;
  align-self: start;
  min-width: 0;
}

/* "Produkte" — matches `.flu-cfg-section__title` 1:1 (incl. accent colour)
   so the baseline AND colour align with "Konfigurator" / "Standardprodukte". */
.flu-type-sb-title {
  font-family: var(--flu-font) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 43px !important;
  color: var(--flu-marken-weiss) !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}

/* Dark box — matches `.flu-cfg-box` (BG Nachtschliff #211E2A, radius 12,
   no border). Height grows with the list — no internal scroll. The
   sticky wrapper above (`.flu-type-sb-col`) keeps the whole box visible
   while scrolling the products grid. Bottom edge is allowed to mismatch
   the Konfigurator-Box on the right (per user: top-aligned only). */
.flu-type-sb {
  background: var(--flu-nachtschliff-02) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 18px 14px !important;
  position: static !important;
  top: auto;
  height: auto;
  overflow: visible;
}

.flu-type-sb-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.flu-type-sb-list > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.flu-type-sb-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: var(--flu-radius-sm) !important;
  text-decoration: none !important;
  color: var(--flu-text) !important;
  transition: background 0.15s, color 0.15s !important;
  cursor: pointer;
}

.flu-type-sb-item:hover:not(.flu-type-sb-item--disabled) {
  background: var(--flu-elevated) !important;
}

.flu-type-sb-item--active {
  background: var(--flu-elevated) !important;
  outline: 1px solid var(--flu-accent) !important;
}

.flu-type-sb-item--disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.flu-type-sb-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--flu-text);
}

/* Product PNG (same ISO render as the Level-1 cards). Transparent
   background sits cleanly on the dark Nachtschliff sidebar box. */
.flu-type-sb-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.flu-type-sb-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--flu-text);
  line-height: 1.3;
  min-width: 0;
}

/* ── Content column ────────────────────────────────────────── */

.flu-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* ── Konfigurator-Box — Figma Group 110 pixel-exact ────────── */

/* Section-Title (Figma "Konfigurator"): 34px ExtraBold #FAFAFA,
   sits ABOVE the dark box (not inside), no extra padding. */
.flu-cfg-section__title {
  font-family: var(--flu-font) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 43px !important;
  color: var(--flu-marken-weiss) !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}

/* Dark box — Figma Rectangle 54: BG #211E2A, radius 12, padding 32.
   Right column gets `auto` + the form caps itself at 320px → effectively
   right-aligned within the dark box. Sketch on the left fills remaining 1fr.
   Height grows naturally based on content + a comfortable `min-height` so
   the box doesn't look pinched. Top is grid-aligned with the type sidebar;
   bottom is free to differ (per user: only top-aligned). */
.flu-cfg-box {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 40px;
  background: var(--flu-nachtschliff-02) !important;
  border-radius: 12px !important;
  padding: 40px 36px !important;
  align-items: center;
  min-height: 380px;
  box-sizing: border-box;
}


/* Left column: sketch on top, marketing text below (Figma layout) */
.flu-cfg-box__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  min-width: 0;
}

/* Sketch — doppelt abgesichert: CSS background-image als primärer
   Render-Pfad (kein <img>-Element → kein Theme-Bleed möglich), plus das
   alte <img>-Element bleibt für SEO/A11y (alt-Text), wird aber CSS-seitig
   versteckt damit es nicht doppelt erscheint.

   Dieses Pattern überlebt jedes WP-Theme: background-image hat keinen
   img-Selector den eine Theme-Regel angreifen könnte. */
.flu-cfg-box .flu-cfg-box__sketch,
.flu-cfg-box__sketch {
  display: block !important;
  /* Einheitliche Skizzen-Groesse: fixer, quadratisch-naher Rahmen (5:4) mit
     Deckel-Breite. Alle Produkte werden per `contain` IN denselben Rahmen
     gefittet → breite Teile (SVERB/Stopfen) fuellen nur noch die Breite (nicht
     mehr die ganze Spalte), kompakte Teile (T-/Y-Stueck) fuellen die Hoehe →
     gleichmaessiger Eindruck. Frueher: width:100% + min-height:200 + contain
     liess breite Teile die volle Spaltenbreite ausfuellen (= zu gross). */
  width: 100% !important;
  max-width: 420px !important;
  aspect-ratio: 5 / 4 !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  /* background-image is set INLINE per product type by renderConfiguratorBoxV2
     (theme-bleed-immune: a CSS background has no <img> selector a WP theme
     can balloon). No hardcoded fallback here anymore — each type carries its
     own parameter sketch. */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-color: transparent !important;
  position: relative !important;
}

/* Im Fall dass das Background-Image nicht lädt: das nested <img> bleibt
   als Fallback sichtbar. Im Normalfall wird's vom BG überdeckt → wir
   verstecken den img-Tag damit er nicht stört. Alt-Text ist trotzdem
   im DOM für Screen-Reader. */
.flu-cfg-box__sketch img {
  display: none !important;
}

/* Edge-case Hookup: falls jemand das background-image überschreibt
   (z.B. Theme-Customizer), zeigt sich das img als Fallback wieder. */
.flu-cfg-box__sketch--no-bg img {
  display: block !important;
  max-width: 100% !important;
  max-height: 158px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* "Passende Grösse nicht dabei? Konfiguriere selbst."
   Figma: 30px Bold #8E8EC5 (Schattenwerk), line-height 37 */
.flu-cfg-box__cta-text {
  font-family: var(--flu-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--flu-schattenwerk);
  margin: 0;
  white-space: nowrap;
  max-width: 320px;
}

/* Right column — width-capped at 320px so the whole form is right-aligned
   within the dark box. The left column (sketch + CTA-text) absorbs the
   remaining width via grid `1fr auto`. */
.flu-cfg-box__right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  width: 320px;
  justify-self: end;
  /* Top-anchor the form so the FIRST input sits at the same height for
     every product type, regardless of how many param-fields follow.
     Overrides the box-level `align-items: center` for this column only;
     the sketch on the left stays vertically centered. */
  align-self: start;
}

.flu-cfg-box__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Match konfigurator-page `.form-group`: stacked label+input, tight gap. */
.flu-cfg-box__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label — Figma + konfigurator-page: 20px Semibold lavender (#8E8EC5),
   "D1."-prefix in brand-yellow (#E3DF00). */
.flu-cfg-box__label {
  font-family: var(--flu-font) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--flu-schattenwerk) !important;
  line-height: 1.25 !important;
  display: block;
  margin: 0;
}

.flu-cfg-box__label-prefix {
  color: var(--flu-accent) !important;
  font-weight: 600 !important;
  margin-right: 4px;
}

/* Input wrap — just a positioning context now; bg moves onto the <input>
   itself so the form matches the konfigurator-page `.input-unit` layout. */
.flu-cfg-box__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  border: none !important;
}

.flu-cfg-box__input-wrap:focus-within {
  border-color: transparent !important;
}

/* Input = konfigurator-page `.form-control` clone: bg #5A5A62, radius 3,
   height 40, font 20, padding-right reserves room for `mm` + arrows. */
.flu-cfg-box__input {
  flex: 1;
  min-width: 0;
  background: var(--flu-neutral-dunkel) !important;
  border: none !important;
  outline: none !important;
  padding: 8px 72px 8px 14px !important;
  height: 40px !important;
  width: 100% !important;
  border-radius: 3px !important;
  color: var(--flu-marken-weiss) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  font-family: var(--flu-font) !important;
  transition: box-shadow 0.15s !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flu-cfg-box__input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(142, 142, 197, 0.3) !important;
}

.flu-cfg-box__input::-webkit-outer-spin-button,
.flu-cfg-box__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.flu-cfg-box__input::placeholder {
  color: var(--flu-muted) !important;
  font-weight: 400;
}

/* `mm`-Badge — konfigurator-page exact: absolute right:32, font 20 white. */
.flu-cfg-box__input-suffix {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px !important;
  color: var(--flu-marken-weiss) !important;
  margin: 0 !important;
  font-weight: 400;
  pointer-events: none;
  user-select: none;
}

/* Spinner column — konfigurator-page `.input-arrows`: absolute right:10,
   stacked column with 4px gap. */
.flu-cfg-box__spinner {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Each arrow-button: 16×8, overflow:hidden + a 9×9 rotated-square pseudo
   that sits half-out → only the tip pokes out. Exactly the
   konfigurator-page `.input-arrow.{up,down}::after` pattern. */
.flu-cfg-box__spinner-btn {
  width: 16px !important;
  height: 8px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  transition: none !important;
}

.flu-cfg-box__spinner-btn:hover,
.flu-cfg-box__spinner-btn:focus-visible {
  background: transparent !important;
  outline: none !important;
}

/* Hide the SVG-chevron HTML (kept for legacy/JS) — diamond shows via ::after */
.flu-cfg-box .flu-cfg-box__spinner-btn svg,
svg.flu-cfg-box__spinner-icon {
  display: none !important;
}

.flu-cfg-box__spinner-btn::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  background: var(--flu-neutral-hell);
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: background 0.15s;
}

.flu-cfg-box__spinner-btn:hover::after {
  background: var(--flu-accent);
}

.flu-cfg-box__spinner-btn[data-spinner="up"]::after {
  margin-top: 7px;
}

.flu-cfg-box__spinner-btn[data-spinner="down"]::after {
  margin-bottom: 7px;
}

.flu-cfg-box__error {
  padding: 10px 12px;
  background: rgba(142, 142, 197, 0.14);   /* lavender #8e8ec5 tint (per user — not red) */
  border: 1px solid var(--flu-lavender);
  border-radius: 6px;
  color: #cfcfee;                          /* light lavender, legible on the dark box */
  font-size: 15px;
}

/* Submit button — Figma Group 95 / Rectangle 57. Hardened against
   WP-theme `button { ... }` rules with !important on every visual
   property + multi-selector specificity boost. */
.flu-cfg-box .flu-cfg-box__submit,
.flu-cfg-box__submit,
button.flu-cfg-box__submit {
  margin-top: 6px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--flu-dornblatt-01) !important;  /* #5C5800 */
  background-color: var(--flu-dornblatt-01) !important;
  background-image: none !important;
  color: var(--flu-accent) !important;              /* #E3DF00 */
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  transition: background 0.15s, color 0.15s !important;
  font-family: var(--flu-font) !important;
  align-self: flex-end;
  height: 52px !important;
  min-width: 260px;
  max-width: 320px;
  box-shadow: none !important;
}

.flu-cfg-box__submit .flu-cfg-box__submit-label {
  color: inherit !important;
  font: inherit !important;
}

.flu-cfg-box__submit-arrow {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background: var(--flu-accent) !important;
  transform: rotate(45deg) !important;
  border-radius: 2px !important;
  flex-shrink: 0;
  transition: background 0.15s;
  padding: 0 !important;
  margin: 0 !important;
}

.flu-cfg-box__submit:hover:not(:disabled),
.flu-cfg-box__submit:focus-visible {
  background: var(--flu-accent) !important;
  background-color: var(--flu-accent) !important;
  color: var(--flu-nachtschliff) !important;
  outline: none;
}

.flu-cfg-box__submit:hover:not(:disabled) .flu-cfg-box__submit-arrow {
  background: var(--flu-nachtschliff);
}

.flu-cfg-box__submit:disabled {
  background: var(--flu-elevated);
  color: var(--flu-muted);
  cursor: not-allowed;
}

.flu-cfg-box__submit:disabled .flu-cfg-box__submit-arrow {
  background: var(--flu-muted);
}

/* ── Filter-Box (Range-Sliders only, Figma Group 92) ────────── */

.flu-filter-box {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.flu-filter-box__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--flu-marken-weiss);
}

.flu-filter-box__row {
  display: flex;
  flex-direction: column;
  gap: 22px;
}


.flu-filter-box__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* "Eingang D1" / "Ausgang D2" — Figma: 24px Bold Schattenwerk-lavender */
.flu-filter-box__label {
  font-family: var(--flu-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--flu-schattenwerk);
  line-height: 1.25;
}

.flu-filter-box__label-prefix {
  color: var(--flu-marken-weiss);
  font-weight: 700;
  margin-right: 4px;
}

.flu-filter-box__hint {
  font-size: 15px;
  color: var(--flu-muted);
  padding-left: 22px;
  position: relative;
}

.flu-filter-box__hint::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--flu-accent);
  color: var(--flu-nachtschliff);
  font-weight: 800;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.flu-filter-box__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flu-filter-box__chip {
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  background: var(--flu-schattenwerk-01);
  color: var(--flu-schattenwerk);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.05s;
  font-family: inherit;
}

.flu-filter-box__chip:hover:not(:disabled),
.flu-filter-box__chip:focus-visible {
  background: #4a4865;
  outline: none;
}

.flu-filter-box__chip--selected {
  background: var(--flu-accent) !important;
  color: var(--flu-nachtschliff) !important;
}

.flu-filter-box__chip--disabled,
.flu-filter-box__chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Grid-loading overlay — used during within-type pagination clicks when
   the new page isn't cached yet. Dims the current grid and adds a small
   centered spinner so the user sees the click was registered. The class
   is removed automatically when `renderDetailV2` replaces innerHTML. */
.flu-grid-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 0.15s ease-out;
}

.flu-grid-loading::after {
  content: '';
  position: absolute;
  top: 80px;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border: 3px solid var(--flu-schattenwerk-01);
  border-top-color: var(--flu-accent);
  border-radius: 50%;
  animation: flu-grid-spin 0.7s linear infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes flu-grid-spin {
  to { transform: rotate(360deg); }
}

/* ── Standardprodukte section — 2-column Filter+Grid (Figma Group 120) ─ */

.flu-std-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.flu-std-section__title {
  font-family: var(--flu-font) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 43px !important;
  color: var(--flu-marken-weiss) !important;
  margin: 0 0 18px 0 !important;
}

.flu-std-section__body {
  display: grid !important;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

/* Sticky-Wrapper: "Standardprodukte"-Titel + Filter-Aside fahren als
   eine Einheit mit dem Scroll mit. So bleibt der Titel beim Scrollen
   der Produkt-Grid sichtbar ohne dass er von der Filter-Box getrennt
   wird. `align-self: start` ist Pflicht, sonst stretched die Grid-Cell
   den Sticky-Wrapper auf volle Section-Höhe und Sticky greift nicht. */
.flu-std-stick {
  position: sticky;
  top: 12px;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flu-std-stick .flu-std-section__title {
  margin: 0 0 14px 0 !important;
}

.flu-std-section__filter {
  background: var(--flu-nachtschliff-02);
  border-radius: 12px;
  padding: 22px 24px;
  position: static;
}

.flu-std-section__grid {
  min-width: 0;
}

/* Legacy class kept as alias so old DOM/CSS chains still work */
.flu-std {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.flu-std-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--flu-marken-weiss) !important;
  margin: 0 0 22px !important;
}

/* Std-Grid — 3 Karten pro Reihe im Standard-Desktop-Layout.
   Der Filter sitzt mit 320px sticky links daneben, dann bleibt ~660-700px
   für das Grid. 3*180+2*14=568 → passt komfortabel. Bei knapperen
   Viewports rutscht's via auto-fill auf 2 oder 1. */
.flu-std-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Breite Bildschirme (ab 1600px): 4. Kachel pro Reihe, damit die Tiles auf
   grossen Monitoren nicht zu gross werden. Bis 1599px bleiben es 3. */
@media (min-width: 1600px) {
  .flu-std-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .flu-std-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  /* Phones keep 2 product tiles per row (user request "2 Kacheln/Reihe").
     minmax(0,1fr) lets each tile shrink below its content so the row never
     forces the page wider than the viewport. */
  .flu-std-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
}

.flu-std-grid > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card wrap — needed so the fav-star button can sit above the <a>
   without being a child of it (which HTML forbids). */
.flu-std-card-wrap {
  position: relative;
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  height: 100%; /* fülle die (gestretchte) Grid-Zelle, damit alle Karten gleich hoch sind */
}

/* Star-Merken-Button — Figma: bare 25.79×25px lavender star sitting in
   the top-right corner of the card, NO circular background. We give the
   <button> itself a generous 36×36 hit area (with 5px transparent padding
   around the visible 26×25 star) — Figma's exact 25.79px is too small
   for a comfortable touch-target. `pointer-events: auto` on the button
   and `pointer-events: none` on the inner SVG guarantees every click
   inside the hit area lands on the button (not the SVG-polygon), so the
   click-handler always fires. `z-index: 10` keeps the button above the
   `.flu-std-card` `<a>` overlay no matter what stacking context the
   hover-state creates. */
.flu-std-card__fav {
  position: absolute !important;
  /* Kachel-Layout (kachel.png): Stern sitzt rechts NEBEN der Größenzeile,
     nicht mehr in der Bildecke. Der Größe+Preis-Block ist per margin-top:auto
     an den Kartenboden gepinnt, daher ist die Größenzeile fix vom unteren Rand
     entfernt → vom Boden verankern (breitenunabhängig, auch bei 2-zeiliger Größe).
     bottom = padding-bottom(12) + tax-LH(17) + pricing-gap(2) + price-LH(36)
              + info-gap(6) + size-LH/2(14) − fav-höhe/2(18) = 69px. */
  top: auto !important;
  bottom: 79px !important; /* zentrisch zur lavendelfarbigen Größenschrift (per Pixelmessung justiert) */
  right: 10px !important;
  width: 36px !important;
  height: 36px !important;
  z-index: 10 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: var(--flu-schattenwerk) !important;
  transition: color 0.15s, transform 0.1s !important;
  font-family: inherit !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.flu-std-card__fav:hover {
  transform: scale(1.12);
  color: var(--flu-marken-weiss) !important;
}

.flu-std-card__fav:active {
  transform: scale(0.95);
}

.flu-std-card__fav--active {
  color: var(--flu-accent) !important;
}

.flu-std-card-wrap .flu-std-card__fav svg,
svg.flu-std-card__fav-icon {
  width: 26px !important;
  height: 25px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  display: block !important;
  /* Default = KONTUR (wie Header-Stern, FLU_SVG_STAR_OUTLINE): nur Umriss,
     lavendel. Active (gemerkt) füllt gelb — siehe Regel unten. */
  fill: none !important;
  stroke: currentColor !important;
  transition: fill 0.15s, stroke 0.15s !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* fill/stroke MÜSSEN auf das <path> zielen: das OUTLINE-SVG trägt fill="none"
   als Präsentations-Attribut direkt am <path>. Eine Regel auf das <svg>-Element
   wird dadurch überstimmt (fill wird nicht vom <svg> vererbt, wenn der <path>
   einen eigenen Wert hat). Default = Kontur (lavendel), Active = gefüllt (gelb).
   `stroke` bleibt gesetzt → kein Größensprung beim Umschalten. */
.flu-std-card-wrap .flu-std-card__fav svg path {
  fill: none !important;
  stroke: currentColor !important;
}
.flu-std-card-wrap .flu-std-card__fav--active svg path,
.flu-std-card__fav--active svg.flu-std-card__fav-icon path {
  fill: currentColor !important;
}

.flu-std-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--flu-nachtschliff-02) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 10px 10px 12px !important;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--flu-text) !important;
  transition: background 0.18s, border-color 0.15s;
  gap: 8px;
  align-items: stretch !important;
  text-decoration: none !important;
  height: 100% !important; /* Karte füllt den Wrap → Größe+Preis kann an den Boden gepinnt werden */
}

/* Hover — Figma Rectangle 55: full card background flips to Dornblatt
   Schatten 01 (#5C5800). Text colors don't need to change: pricing stays
   accent-yellow (#E3DF00), size stays Schattenwerk lavender, tax stays
   muted grey — all three already match Figma against the yellow bg. */
.flu-std-card:hover,
.flu-std-card:focus-visible {
  background: var(--flu-dornblatt-01) !important;
  border-color: var(--flu-dornblatt-01) !important;
  outline: none;
}

/* Selected (post-click pinned state) keeps the yellow card look. */
.flu-std-card--selected {
  background: var(--flu-dornblatt-01) !important;
}

.flu-std-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--flu-neutral-superhell);
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto; /* Bild behält quadratische Größe, schrumpft nicht */
}

.flu-std-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.flu-std-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #c8c8d0 0%, #a8a8b0 100%);
}

.flu-std-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  margin-top: auto; /* Größe+Preis-Gruppe an den Kartenboden pinnen (kachel.png) */
}

.flu-std-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--flu-schattenwerk);
  margin: 0;
  line-height: 1.2;
}

/* Dimension subline under the product name — mirrors the modal layout
   (title + dimensions on separate lines). */
/* Größe = Headline in Lavendel (kachel.png), groß. line-height fix (28px),
   damit die Stern-Verankerung vom Boden exakt rechnet. padding-right schafft
   Platz für den Stern in derselben Zeile. */
.flu-std-card__size {
  font-size: 23px;
  line-height: 28px;
  font-weight: 800;
  color: var(--flu-schattenwerk);
  letter-spacing: -0.2px;
  padding-right: 40px;
  font-variant-numeric: tabular-nums;
}

.flu-std-card__pricing {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Preis groß in Dornblatt (gelb). line-height fix (36px) für die Verankerung.
   nowrap: der Preis bricht NIE um (sonst wächst die Karte und der Stern wandert). */
.flu-std-card__price {
  font-size: 26px;
  line-height: 36px;
  font-weight: 800;
  color: var(--flu-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Preis + "ab 10 Stück" in einer Zeile, an der Grundlinie ausgerichtet
   (= unten bündig mit dem grossen Preis). nowrap hält die Blockhöhe konstant,
   damit die Stern-Verankerung gültig bleibt. */
.flu-std-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* "ab 10 Stück" klein wie die MwSt-Zeile, unten bündig (Grundlinie). */
.flu-std-card__qty {
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
  color: var(--flu-neutral);
  white-space: nowrap;
  flex: 0 1 auto;
}

.flu-std-card__tax {
  font-size: 13px;
  line-height: 17px;
  color: var(--flu-neutral);
  font-weight: 400;
}

.flu-std-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  background: var(--flu-schattenwerk-01);
  color: var(--flu-schattenwerk);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s;
}

.flu-std-card__cta-icon,
svg.flu-std-card__cta-icon,
.flu-std-card__cta svg {
  width: 17px !important;
  height: 15px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  flex: 0 0 17px !important;
  display: inline-block !important;
  vertical-align: middle;
  fill: currentColor !important;
  stroke: none !important;
}

/* CTA stays Schattenwerk-dark with lavender text on hover — Figma's
   yellow-card variant uses the dark CTA box for contrast (Rectangle 57:
   #393853 + lavender label), so no invert needed. */
.flu-std-card:hover .flu-std-card__cta {
  background: var(--flu-schattenwerk-01);
  color: var(--flu-schattenwerk);
}

.flu-std-card--selected .flu-std-card__cta {
  background: var(--flu-schattenwerk-01);
  color: var(--flu-schattenwerk);
}

/* ── Responsive: stack on small screens ─────────────────────
   Breakpoint 1200px: ab hier (Tablet hochkant + schmale Laptops) wird die
   Doppel-Sidebar (Typ 280 + Filter 320) gestapelt, damit das Grid die volle
   Breite bekommt und die Kacheln nicht auf ~80px zusammengequetscht werden.
   Darüber (>1200) bleibt das 3-spaltige Nebeneinander-Layout. */
@media (max-width: 1200px) {
  .flu-detail-v2 {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .flu-type-sb-col,
  .flu-std-stick {
    position: static !important;
    top: auto !important;
  }
  .flu-type-sb-title {
    font-size: 24px !important;
    line-height: 30px !important;
    margin-bottom: 10px !important;
  }
  .flu-type-sb {
    position: relative;
    top: 0;
    padding: 14px 12px !important;
    height: auto !important;
    overflow-y: visible !important;
    overflow-x: auto;
  }
  .flu-type-sb-list {
    flex-direction: row !important;
    overflow-x: auto;
    gap: 8px !important;
    padding-bottom: 4px;
  }
  .flu-type-sb-item {
    flex: 0 0 auto;
    min-width: 180px;
  }
  .flu-cfg-box {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
    gap: 24px;
    height: auto !important;
  }
  /* Stacked phone/tablet: the form column keeps its comfortable 320px width
     but is now CENTERED in the single column. On desktop the box is two-column
     and the form is pushed to the right edge (justify-self:end, width:320px);
     once it stacks that right-push reads as "off to the side", so we re-center
     it. Labels + CTA text centre with it → the whole configurator is a tidy
     centred block. Desktop (>=901px) is pixel-identical (this block doesn't
     apply there). */
  .flu-cfg-box__right {
    width: 100% !important;
    max-width: 320px !important;
    justify-self: center !important;
  }
  .flu-cfg-box__label,
  .flu-cfg-box__cta-text {
    text-align: center !important;
  }
  .flu-cfg-box__left {
    gap: 18px;
  }
  .flu-cfg-box__sketch img {
    max-height: 140px;
  }
  .flu-cfg-box__cta-text {
    font-size: 20px;
  }
  .flu-cfg-box__submit {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    font-size: 18px;
    height: 52px;
  }
  .flu-cfg-section__title {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  .flu-filter-box {
    padding: 0 !important;
  }
  .flu-filter-box__row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .flu-std-section__body {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .flu-std-section__filter {
    position: relative;
    top: 0;
    padding: 18px;
  }
  .flu-std-section__title {
    font-size: 26px !important;
    line-height: 32px !important;
  }
}

@media (max-width: 520px) {
  .flu-std-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .flu-std-card {
    padding: 10px !important;
  }
  /* Kachel-Schriften auf schmalen Phones leicht reduzieren, damit der Preis in
     2-Spalten nicht überläuft. Stern-Anker neu gerechnet (kleinere line-heights
     + padding-bottom 10): 10+16+2+30+6+11.5−18 ≈ 58px. */
  .flu-std-card__size {
    font-size: 19px;
    line-height: 23px;
    padding-right: 36px;
  }
  .flu-std-card__price {
    font-size: 20px;
    line-height: 30px; /* line-height konstant → Stern-Verankerung bleibt gültig */
  }
  .flu-std-card__tax {
    font-size: 12px;
    line-height: 16px;
  }
  .flu-std-card__qty {
    font-size: 12px; /* wie mobile MwSt */
    line-height: 16px;
  }
  .flu-std-card__fav {
    bottom: 64px !important; /* zentrisch zur Größenschrift auf Mobile (per Pixelmessung) */
  }
  .flu-cfg-box {
    padding: 18px !important;
  }
  .flu-cfg-box__heading {
    font-size: 19px !important;
  }
  .flu-filter-box {
    padding: 16px !important;
  }
}

/* ── Phone polish (additive — desktop pixel-identical) ───────
   1) L1 type grid keeps 2 tiles per row. The base auto-fill rule
      (minmax(240px,1fr)) collapses to 1 column once the content box drops
      below ~480px, so phones lost the second tile. Force 2 columns and trim
      the card chrome so two cards sit comfortably on a 360px screen.
   2) The configurator CTA text ("Passende Grösse nicht dabei? …") shipped
      with white-space:nowrap, so on a phone it could not wrap and forced the
      whole .flu-shop ~96px wider than the viewport (root cause of the mobile
      horizontal overflow). Let it wrap. */
@media (max-width: 600px) {
  .flu-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .flu-type-card { padding: 12px !important; min-height: 0 !important; }
  .flu-type-card__hero { min-height: 116px !important; padding: 8px !important; }
  .flu-type-card__title { font-size: 14px !important; line-height: 1.2 !important; }
  .flu-type-card__footer { padding: 8px 10px !important; font-size: 12px !important; }
  .flu-cfg-box__cta-text { white-space: normal !important; max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   Image-based type-card icon (Level-1 shop overview).
   When TYPES entry has imageUrl, the .flu-type-icon gets the --img
   modifier and renders a real 3D-rendered preview instead of a
   Unicode character. Sized to fill the same 48×48 slot but with
   slight inner padding so the rendering doesn't touch the edges.
   ══════════════════════════════════════════════════════════════ */
.flu-type-icon--img {
  background: var(--flu-bg, #ffffff) !important;
  padding: 4px !important;
  overflow: hidden !important;
}
.flu-type-icon--img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 6px !important;
}

/* Empty-state for products without pre-configured catalog items.
   Shown in the detail-v2 layout where the Standardprodukte-grid
   would normally be. The configurator above stays fully usable. */
.flu-std-section--empty .flu-std-section__placeholder {
  background: var(--flu-elevated, #f5f5f7);
  border: 1px dashed var(--flu-border, #d4d4d8);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  color: var(--flu-text-muted, #71717a);
  margin-top: 12px;
}
.flu-std-section--empty .flu-std-section__placeholder p {
  margin: 0 0 8px 0;
  font-size: 15px;
  line-height: 1.5;
}
.flu-std-section--empty .flu-std-section__placeholder p:last-child {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--flu-text, #18181b);
}

/* ══════════════════════════════════════════════════════════════
   HERO-Type-Card variant (Level 1 — Shop overview)
   New vertical layout: compact title header → large hero image
   filling most of the card body → footer strip with Standard-
   produkte count (or "Bald verfügbar" / "Konfigurierbar").
   The legacy compact card with 48×48 icon still works for fallback;
   the --hero modifier overrides padding + structure.
   ══════════════════════════════════════════════════════════════ */
.flu-type-card--hero {
  padding: 0 !important;
  min-height: 280px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: background .18s, border-color .15s !important;
}

/* Hover — mirror the Standardprodukt-card selection look (.flu-std-card:hover):
   the whole card chrome flips to Dornblatt Schatten 01 (#5C5800, "gelb mit
   dunkel vermischt"). The header + footer strips flip too so the dark-yellow
   reads as one solid panel; the white hero image area keeps its own bg, just
   like the std card's image keeps its light background on hover. No lift /
   shadow here — match the std card, which only changes colour. */
.flu-type-card--hero:not(.flu-type-card--disabled):hover {
  background: var(--flu-dornblatt-01) !important;
  border-color: var(--flu-dornblatt-01) !important;
  transform: none !important;
  box-shadow: none !important;
}

.flu-type-card--hero:not(.flu-type-card--disabled):hover .flu-type-card__header,
.flu-type-card--hero:not(.flu-type-card--disabled):hover .flu-type-card__footer,
.flu-type-card--hero:not(.flu-type-card--disabled):hover .flu-type-card__hero {
  background: var(--flu-dornblatt-01) !important;
  border-color: var(--flu-dornblatt-01) !important;
}

.flu-type-card__header {
  padding: 14px 16px 10px 16px !important;
  border-bottom: 1px solid var(--flu-border) !important;
  background: var(--flu-elevated, rgba(255,255,255,.04)) !important;
  flex: 0 0 auto !important;
}

.flu-type-card__title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--flu-white) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.flu-type-card__hero {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background: var(--flu-elevated, #2e2b36) !important;
  min-height: 180px !important;
}

.flu-type-card__hero img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}
.flu-type-card--hero:not(.flu-type-card--disabled):hover .flu-type-card__hero img {
  transform: scale(1.08) !important;
}

/* Unicode-glyph fallback when no imageUrl exists yet (Phase-2 types) */
.flu-type-card__hero--glyph {
  background: var(--flu-elevated, rgba(255,255,255,.04)) !important;
  color: var(--flu-accent) !important;
  font-size: 64px !important;
  font-weight: 700 !important;
}

.flu-type-card__footer {
  padding: 10px 16px 12px 16px !important;
  border-top: 1px solid var(--flu-border) !important;
  background: var(--flu-elevated, rgba(255,255,255,.04)) !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
}

.flu-type-card__count {
  color: var(--flu-text-muted, #a1a1aa) !important;
  font-weight: 500 !important;
}

.flu-type-card__soon {
  color: var(--flu-text-muted, #a1a1aa) !important;
  font-style: italic !important;
  font-size: 13px !important;
}

/* Larger hero card on bigger screens */
@media (min-width: 768px) {
  .flu-type-card--hero {
    min-height: 320px !important;
  }
  .flu-type-card__hero {
    min-height: 220px !important;
    padding: 18px !important;
  }
  .flu-type-card__title {
    font-size: 19px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MERKLISTE PAGE (#view=merkliste) — cart-like favorites list
   ══════════════════════════════════════════════════════════ */
.flu-merk-title { margin-bottom: 18px !important; }

/* Compact width — the favorites list reads better narrower than the full
   shop grid (.flu-shop). Scoped to the Merkliste root only. Stays CENTERED
   with symmetric padding (resets the shop's logo-aligned padding-left:48), per
   user: cart/checkout/merkliste/modal stay centered; only the shop is
   left-aligned with the logo. */
.flu-shop.flu-shop--merkliste {
  max-width: 1080px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.flu-merk-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.flu-merk-item {
  display: grid !important;
  /* Fixed qty/price/actions columns (not auto) so the only flexible track is
     the name (1fr) — that keeps the qty stepper at the SAME x on every row
     ("Mengen untereinander") and guarantees the stepper enough room so the
     value never clips. */
  grid-template-columns: 88px 1fr 156px 175px 250px !important;
  align-items: center !important;
  gap: 18px !important;
  background: var(--flu-surface) !important;
  border: 1px solid var(--flu-border) !important;
  border-radius: var(--flu-radius) !important;
  padding: 14px 16px !important;
}

.flu-merk-thumb {
  width: 88px !important;
  height: 88px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--flu-viewer-bg) !important;   /* #d3d3d9 — like the 3D viewer, not white */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.flu-merk-thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
.flu-merk-thumb__ph { width: 100% !important; height: 100% !important; background: var(--flu-elevated) !important; }

.flu-merk-main { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.flu-merk-badge {
  align-self: flex-start !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 2px 9px !important;
  border-radius: 99px !important;
  text-transform: uppercase !important;
}
.flu-merk-badge--conf { background: var(--flu-dornblatt-01) !important; color: var(--flu-accent) !important; }
.flu-merk-badge--std  { background: var(--flu-schattenwerk-01) !important; color: var(--flu-schattenwerk) !important; }
.flu-merk-name { font-size: 16px !important; font-weight: 700 !important; color: var(--flu-white) !important; margin: 0 !important; line-height: 1.25 !important; }
.flu-merk-dims { font-size: 13px !important; color: var(--flu-muted) !important; margin: 0 !important; }

/* Line-framed [ − n + ] stepper matching the WP/WC product-page style
   (.flu-pp-qty-wrap): top/bottom hairlines only, transparent buttons, bold
   Outfit glyphs, muted→white on hover. --flu-muted (#8d8d99) and --flu-white
   are the same hex as the product page's --neutral / --marken-weiss. */
.flu-merk-qty { display: inline-flex !important; align-items: center !important; justify-self: start !important; border: 0 !important; border-top: 2px solid var(--flu-muted) !important; border-bottom: 2px solid var(--flu-muted) !important; border-radius: 0 !important; padding: 0 4px !important; background: transparent !important; }
/* Buttons match the modal qty picker (.flu-modal__qty-btn): 42px wide so the
   +/- glyphs sit with the same breathing room as the modal/product page. */
.flu-merk-qty__btn { width: 42px !important; min-width: 42px !important; height: 32px !important; background: transparent !important; border: 0 !important; color: var(--flu-muted) !important; font-family: var(--flu-font) !important; font-weight: 700 !important; font-size: 20px !important; cursor: pointer !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.flu-merk-qty__btn:hover { color: var(--flu-white) !important; }
/* Value field matches the modal value (50px floor → grows to 64px), so 2-digit
   quantities no longer look cramped/clipped. Width is set per-value by
   sizeMerkQty() within that 50–64px envelope; transition smooths the grow. */
.flu-merk-qty__val { width: 50px !important; min-width: 50px !important; max-width: 64px !important; height: 32px !important; text-align: center !important; padding: 0 6px !important; background: transparent !important; border: 0 !important; color: var(--flu-muted) !important; font-size: 20px !important; font-weight: 700 !important; font-family: var(--flu-font) !important; font-variant-numeric: tabular-nums !important; -moz-appearance: textfield !important; transition: width 0.12s ease !important; }
.flu-merk-qty__val::-webkit-outer-spin-button, .flu-merk-qty__val::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

.flu-merk-price { display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-width: 120px !important; }
/* Preis / Stück — prominent, like the modal unit price (Dornblatt, bold) */
.flu-merk-price__unit-row { display: flex !important; align-items: baseline !important; gap: 5px !important; }
.flu-merk-price__unit { font-size: 22px !important; font-weight: 800 !important; color: var(--flu-accent) !important; white-space: nowrap !important; line-height: 1.1 !important; font-variant-numeric: tabular-nums !important; }
.flu-merk-price__per { font-size: 12px !important; font-weight: 500 !important; color: var(--flu-muted) !important; white-space: nowrap !important; }
/* Gesamtpreis — small, directly under the per-piece price */
.flu-merk-price__total-row { display: flex !important; align-items: baseline !important; gap: 6px !important; margin-top: 3px !important; }
.flu-merk-price__total-label { font-size: 12px !important; color: var(--flu-muted) !important; }
.flu-merk-price__total-val { font-size: 13px !important; font-weight: 700 !important; color: var(--flu-text) !important; white-space: nowrap !important; font-variant-numeric: tabular-nums !important; }
.flu-merk-price__tax { font-size: 11px !important; color: var(--flu-muted) !important; margin-top: 1px !important; }

.flu-merk-actions { display: flex !important; align-items: center !important; gap: 10px !important; }
/* Stack the add-to-cart button + its "Direkt zum Warenkorb" link vertically so
   the link sits directly UNDER the button; the trash button stays a sibling. */
.flu-merk-cart-col { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; }
/* Secondary nav link — quiet lavender text, accent + underline on hover. */
.flu-merk-gocart {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--flu-lavender) !important;
  font-family: var(--flu-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
}
.flu-merk-gocart:hover, .flu-merk-gocart:focus-visible { color: var(--flu-accent) !important; text-decoration: underline !important; outline: none !important; }
.flu-merk-gocart__arrow { font-size: 16px !important; line-height: 1 !important; font-weight: 700 !important; }
.flu-merk-cart {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 16px !important;
  background: var(--flu-accent) !important;
  color: var(--flu-nachtschliff) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  transition: background 0.15s !important;
}
.flu-merk-cart:hover { background: var(--flu-accent-hover) !important; }
.flu-merk-cart svg { width: 18px !important; height: 16px !important; fill: currentColor !important; stroke: none !important; flex: 0 0 auto !important; }
/* "Added" = brief LAVENDER flash (not green); base transition fades to yellow. */
.flu-merk-cart--done { background: var(--flu-lavender) !important; color: #fff !important; }
/* Identical to the Warenkorb delete button (.flu-cart-item-remove in
   fluica-cart.css): borderless, muted, hover → accent, 22px glyph. */
.flu-merk-remove {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 auto !important;            /* center trash between cart button and row's right edge */
  background: transparent !important;
  border: none !important;
  color: var(--flu-muted) !important;
  cursor: pointer !important;
  padding: 6px !important;
  transition: color 0.2s !important;
}
.flu-merk-remove:hover { color: var(--flu-accent) !important; }
.flu-merk-remove svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; }

.flu-merk-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--flu-border) !important;
}
.flu-merk-foot__label { font-size: 15px !important; color: var(--flu-text) !important; }
.flu-merk-foot__total { font-size: 24px !important; font-weight: 800 !important; color: var(--flu-accent) !important; }

.flu-merk-foot-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
.flu-merk-dlall {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  height: 44px !important;
  padding: 0 20px !important;
  background: var(--flu-accent) !important;
  color: var(--flu-nachtschliff) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.15s, opacity 0.15s !important;
}
.flu-merk-dlall:hover { background: var(--flu-accent-hover) !important; }
.flu-merk-dlall svg { flex: 0 0 auto !important; }
.flu-merk-dlall:disabled, .flu-merk-dlall.is-loading { opacity: 0.6 !important; cursor: progress !important; }
.flu-merk-dlall__hint { font-size: 13px !important; color: var(--flu-muted) !important; margin: 0 !important; text-align: right !important; }

.flu-merk-empty { text-align: center !important; padding: 48px 20px !important; color: var(--flu-text) !important; }
.flu-merk-empty__icon { color: var(--flu-schattenwerk) !important; margin-bottom: 12px !important; }
.flu-merk-empty__icon svg { width: 56px !important; height: 54px !important; fill: currentColor !important; display: inline-block !important; }
.flu-merk-empty p { margin: 6px 0 !important; }
.flu-merk-empty__hint { color: var(--flu-muted) !important; font-size: 14px !important; }
.flu-merk-empty__cta { display: inline-block !important; margin-top: 16px !important; padding: 10px 20px !important; background: var(--flu-accent) !important; color: var(--flu-nachtschliff) !important; border-radius: 8px !important; font-weight: 700 !important; text-decoration: none !important; }

.flu-merk-toast {
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: var(--flu-error) !important;
  color: #fff !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
.flu-merk-toast--show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }

@media (max-width: 720px) {
  /* Phone: stack the card so the quantity stepper never collides with the
     price. The stepper (~140px wide: "− [value] +") used to be placed in the
     64px thumbnail column and overflowed rightward across the price block
     ("− 1 Gesamt + CHF …"). New rows: [thumb | name], [price full width],
     [stepper | actions]. The 3-col track (64 | 1fr | auto) keeps the narrow
     64px column for the thumbnail only; price and stepper live in the
     flexible columns so neither can overflow into the other. */
  .flu-merk-item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb main"
      "price price"
      "qty   qty"
      "actions actions" !important;
    gap: 8px 12px !important;
    align-items: start !important;
  }
  .flu-merk-thumb { width: 64px !important; height: 64px !important; grid-area: thumb !important; }
  .flu-merk-main { grid-area: main !important; }
  .flu-merk-price { grid-area: price !important; align-items: flex-start !important; }
  .flu-merk-qty { grid-area: qty !important; justify-self: start !important; margin-top: 2px !important; }
  /* "In den Warenkorb" fills its own full-width row; trash stays compact right. */
  .flu-merk-actions { grid-area: actions !important; justify-content: flex-start !important; gap: 12px !important; align-items: center !important; }
  /* The cart column takes the full row width; its button stretches, the link
     stays centred underneath it. */
  .flu-merk-cart-col { flex: 1 1 auto !important; }
  .flu-merk-cart { flex: 1 1 auto !important; width: 100% !important; justify-content: center !important; }
  .flu-merk-remove { flex: 0 0 auto !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Header-Schraegschatten  (Figma "Group 60" + "Rectangle 13")
   Zwei gestapelte, vollbreite Keile direkt unter dem Site-Header:
     · Nachtschliff Schatten 02 — grosser weicher Lavendel-Schatten
       (#8e8ec5, 30%, multiply), Tiefe 160/1728 der Breite
     · Nachtschliff Schatten 01 — duenne dunkle Kante (#191620),
       Tiefe 14.25/1728 der Breite, liegt oben drueber
   clip-path macht jeden Keil links 0px, rechts volle Tiefe (Winkel via vw
   konstant). Full-bleed via calc(50% - 50vw). Negativer margin-bottom ->
   verbraucht keine vertikale Hoehe, der Schatten faellt diagonal ueber den
   Inhalt (deshalb multiply). pointer-events:none -> Klicks gehen durch.
   Literale Werte (KEINE var()): dieses Element wird VOR der Breadcrumb und
   damit AUSSERHALB von .flu-shop injiziert, wo die --flu-* Tokens nicht
   greifen. Tiefen: Schatten 02 = 160/1728, Schatten 01 = 14.2495/1728.
   ════════════════════════════════════════════════════════════════════ */
.flu-header-slant {
  position: relative !important;
  z-index: -1 !important;            /* hinter den Inhalt: Texte, die das Dreieck schneiden, bleiben unberuehrt */
  height: 9.2593vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: -9.2593vw !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.flu-header-slant__layer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
}
.flu-header-slant__schatten-02 {            /* Rectangle 13 — Box-Ton (= .flu-cfg-box BG #211e2a), deckend */
  height: 9.2593vw !important;
  background: #211e2a !important;           /* = --flu-nachtschliff-02, Hintergrund der Shop-Boxen */
}
.flu-header-slant__schatten-01 {            /* Group 60 — duenne dunkle Kante, oben drueber */
  height: 0.8246vw !important;
  background: #191620 !important;
}

/* ══════════════════════════════════════════════════════════════
   CTA-Band ueber dem Footer — EXAKT nach Figma (Frame 1728×946).
   Band mit fixem Seitenverhaeltnis (1728/946) + absolut positionierte
   Elemente an den aus dem SVG-Export abgeleiteten Koordinaten, damit
   Headline, Body und Sechseck exakt sitzen und proportional mitskalieren:
     · Headline  links 12.38%, top 24.8%   (Outfit 900, 110/1728 = 6.37vw)
     · Body      links 45.86%, top 50.7%   (Outfit 700,  24/1728 = 1.39vw)
     · Sechseck  links 63.8%,  top 82.6%   (ragt unten in den Footer)
   overflow:visible + z-index:1 lassen das Schattenwerk-Sechseck (#00000A
   @ 40%) ueber die untere Bandkante hinaus IN den dunklen Footer ragen
   (ueberlappt Gelb oben + Footer-Dunkel unten).
   Sibling NACH #fluica-shop → !important gegen Theme-Vererbung (section/h2/p).
   Eltern-Container ist full-width (shortcodes.php) → width:100%, kein 100vw.
   ══════════════════════════════════════════════════════════════ */
.flu-shop-cta {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  aspect-ratio: 1728 / 946 !important;
  margin: clamp(40px, 6vw, 96px) 0 0 !important;
  background: #E3DF00 !important;            /* Dornblatt-Gelb (Rectangle 16) */
  overflow: visible !important;              /* Sechseck darf in den Footer ragen */
  font-family: var(--flu-font) !important;
}
.flu-shop-cta__title {
  position: absolute !important;
  left: 12.38% !important;
  top: 24.8% !important;
  width: 52% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--flu-font) !important;
  font-weight: 900 !important;
  font-size: 5.0vw !important;               /* verkleinert (war 6.37vw); an fluica.ch angenaehert — exakten Wert ggf. nachjustieren */
  line-height: 1.064 !important;             /* 117 / 110 */
  letter-spacing: 0.02em !important;
  color: #26232D !important;                 /* Nachtschliff */
  text-transform: none !important;
}
.flu-shop-cta__text {
  position: absolute !important;
  left: 45.86% !important;
  top: 50.7% !important;
  width: 37% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--flu-font) !important;
  font-weight: 700 !important;
  font-size: 1.39vw !important;              /* 24 / 1728 */
  line-height: 1.25 !important;              /* 30 / 24 */
  color: #26232D !important;                 /* Nachtschliff */
}
.flu-shop-cta__hex {
  position: absolute !important;
  left: 63.8% !important;
  top: 82.6% !important;
  width: 32.7% !important;                   /* (1668 − 1103) / 1728 */
  height: auto !important;
  opacity: 0.4 !important;                    /* Schattenwerk #00000A @ 40% */
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Mobile: festes Seitenverhaeltnis + winzige vw-Schrift waeren unleserlich →
   Flow-Layout, Schrift hochskaliert, Sechseck in die untere Ecke. */
@media (max-width: 768px) {
  .flu-shop-cta {
    aspect-ratio: auto !important;
    overflow: hidden !important;
    padding: 44px 22px 56px !important;
  }
  .flu-shop-cta__title {
    position: static !important;
    width: auto !important;
    font-size: clamp(28px, 7.5vw, 48px) !important;
  }
  .flu-shop-cta__text {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    font-size: 16px !important;
  }
  .flu-shop-cta__hex {
    top: auto !important;
    left: auto !important;
    right: -10% !important;
    bottom: -12% !important;
    width: 55% !important;
  }
}