/* =========================================================
   WHITEFOX2K – Cards CSS consolidated
   Phase: Cards-Sidequest A
   Source order preserved: Plugin base first, former /uploads/whitefox override second.
   Nach Einbau kann der alte Handle whitefox-cards-core gezielt entfernt werden.
   ========================================================= */

/* ===== PART 1: Plugin Cards Base (modules/assets/css) ===== */

/* =========================================================
   WHITEFOX2K – Cards Core / WPK Product Cards
   Extracted from Customizer after Phase 6 Homepage cleanup
   Scope: wpk_products / WooCommerce loop cards / platform icon / mobile badge layout
   ========================================================= */

/* ===========================
   WHITEFOX: SHORTCODE-GRID (wpk_products)
   =========================== */

/* Wrapper-Grundlage + standardmäßig 4 Spalten */
.wpk-grid {
  --produktbild-hoehe: 230px;
  --wpk-cols-desktop: 4;
}

/* Spaltenanzahl anhand der Wrapper-Klasse aus dem Plugin */
.wpk-grid.wpk-cols-3 { --wpk-cols-desktop: 3; }
.wpk-grid.wpk-cols-4 { --wpk-cols-desktop: 4; }
.wpk-grid.wpk-cols-5 { --wpk-cols-desktop: 5; }
.wpk-grid.wpk-cols-6 { --wpk-cols-desktop: 6; }

/* GRID Struktur */
.wpk-grid .wpk-products{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Produktkarte */
.wpk-grid .wpk-products li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  list-style: none;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
}

.wpk-grid .wpk-products li.product:hover{
  background: radial-gradient(circle at top left,
    rgba(56, 189, 248, 0.22),
    rgba(15, 23, 42, 0.98)
  );
}

/* Bildbereich */
.wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link img,
.wpk-grid .wpk-products li.product img{
  width: 100% !important;
  height: var(--produktbild-hoehe) !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/***********************************************
 * WHITEFOX PRODUCT SHORTCODE – TITEL-SCHRIFT
 ***********************************************/
body .wpk-grid h2.woocommerce-loop-product__title,
body .wpk-grid .woocommerce-loop-product__title {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: #f9fafb;

  letter-spacing: 0.02em;
  word-spacing: 0.12em;

  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 5.6em !important;

  hyphens: none;
}

/* Stock-Badge */
.wpk-grid .wpk-stock-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px 4px 24px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.03em;
  position: relative;
  white-space: nowrap;
}

.wpk-grid .wpk-stock-badge::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.wpk-grid .wpk-stock-ok {
  color: #a0ff76;
  background: rgba(160, 255, 118, 0.10);
  border: 1px solid rgba(160, 255, 118, 0.22);
}
.wpk-grid .wpk-stock-ok::before { content: "??"; }

.wpk-grid .wpk-stock-low {
  color: #ffe97a;
  background: rgba(255, 233, 122, 0.10);
  border: 1px solid rgba(255, 233, 122, 0.25);
}
.wpk-grid .wpk-stock-low::before { content: "??"; }

/* =========================================================
   WHITEFOX SHOP (Filter-Seite) – Responsive Grid Override
   Hinweis: Im Modul-CSS wird auf Mobile teils 3-spaltig erzwungen.
   Hier wird das an die globale wpk-grid Logik angeglichen (2 Spalten).
   ========================================================= */
@media (max-width: 768px){

  .wfs-products-area ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .wfs-products-area ul.products li.product .woocommerce-loop-product__title{ font-size: 14px !important; }
  .wfs-products-area ul.products li.product .price{ font-size: 14px !important; }

}
@media (max-width: 360px){

  .wfs-products-area ul.products{ grid-template-columns: 1fr !important; }

}

/* =======================================================================
   WHITEFOX – SHOPKACHELN: RESPONSIVE GRID FIX + "EDEL" LOOK (2026-01-11)
   Ziel:
   - Keine "zusammengedrückten" Kacheln mehr (Sidebar-bedingte schmale Content-Width)
   - Grid reduziert automatisch die Spaltenanzahl, abhängig von der echten Containerbreite
   - Mobile: mindestens 2 Spalten (kein 1-Spalten-Stack), ohne Überlaufen
   - Verfügbarkeits-/Stock-Badges bleiben unverändert
   ======================================================================= */

/* --- GRID: auto-fit/minmax reagiert auf Containerbreite, nicht nur Viewport --- */
.wpk-grid{
  --wpk-card-min: 230px;          /* Mindestbreite der Kachel -> steuert Spaltenanzahl */
  --wpk-card-gap: 22px;

  --wpk-card-radius: 20px;
  --wpk-card-border: rgba(148,163,184,.28);
  --wpk-card-glow: rgba(56,189,248,.14);
}

/* In manchen Themes/Plugins ist .wpk-products kein echtes UL – wir erzwingen Grid */
.wpk-grid .wpk-products{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wpk-card-min)), 1fr)) !important;
  gap: var(--wpk-card-gap) !important;
  align-items: stretch;
}

/* Falls alte float/width Regeln noch greifen */
.wpk-grid .wpk-products > li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* --- KARTEN: Premium Glass + Edge Light + Depth --- */
.wpk-grid .wpk-products li.product{
  border-radius: var(--wpk-card-radius);
  border: 1px solid var(--wpk-card-border);

  background: radial-gradient(110% 90% at 15% 0%,
      rgba(56,189,248,.12),
      rgba(148,163,184,.10) 30%,
      rgba(15,23,42,.92) 70%,
      rgba(2,6,23,.96) 100%
    );

  box-shadow: 0 18px 45px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);

  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.wpk-grid .wpk-products li.product::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(135deg,
    rgba(56,189,248,.22),
    transparent 35%,
    rgba(251,191,36,.10) 70%,
    transparent
  );

  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask-composite: exclude;
  padding: 1px;

  opacity: .70;
}

/* Subtiler Sheen – macht das nicht "einfarbig" */
.wpk-grid .wpk-products li.product::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 50% at 25% 0%,
      rgba(255,255,255,.08),
      transparent 60%
    ),
    radial-gradient(55% 40% at 90% 20%,
      rgba(56,189,248,.10),
      transparent 55%
    );
  opacity: .9;
  mix-blend-mode: screen;
}

.wpk-grid .wpk-products li.product:hover{
  transform: translateY(-5px);
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 26px 65px rgba(0,0,0,.70),
    0 0 22px var(--wpk-card-glow),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- Bild: Rahmen + Tiefe + leichter Zoom --- */
.wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link img,
.wpk-grid .wpk-products li.product img{
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  background: rgba(2,6,23,.55);
  transition: transform .25s ease, filter .25s ease;
}

.wpk-grid .wpk-products li.product:hover a.woocommerce-LoopProduct-link img{
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.03);
}

/* --- Typo: weniger monoton weiß, hochwertiger Gradient --- */
body .wpk-grid .woocommerce-loop-product__title{
  font-weight: 750;
  letter-spacing: .01em;

  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 35%, #7dd3fc 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}

/* Preis etwas "wertiger" */
.wpk-grid .wpk-products li.product .price{
  color: rgba(241,245,255,.92);
  font-weight: 800;
}

.wpk-grid .wpk-products li.product .price .woocommerce-Price-currencySymbol{
  opacity: .9;
}

/* Button: Premium Lift, ohne Layout zu zerstören */
.wpk-grid .wpk-products li.product .button,
.wpk-grid .wpk-products li.product .added_to_cart{
  border-color: rgba(148,163,184,.42);
  box-shadow: 0 12px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.wpk-grid .wpk-products li.product .button:hover,
.wpk-grid .wpk-products li.product .added_to_cart:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.55),
    0 0 18px rgba(56,189,248,.18);
}

/* --- RESPONSIVE: nur Größen/Gaps; Spalten kommen aus Containerbreite --- */
@media (max-width: 980px){

  .wpk-grid{ --wpk-card-min: 210px; --wpk-card-gap: 18px; }
  body .wpk-grid .woocommerce-loop-product__title{ font-size: 17px !important; }
  .wpk-grid .wpk-products li.product .price{ font-size: 17px !important; }

}

/* Mobile: mindestens 2 Spalten erzwingen (kein 1-Spalten-Stack) */
@media (max-width: 520px){

  .wpk-grid{ --wpk-card-gap: 14px; --wpk-card-min: 160px; }
  .wpk-grid .wpk-products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body .wpk-grid .woocommerce-loop-product__title{
    font-size: 14px;
    -webkit-line-clamp: 3;
    min-height: 4.2em !important;
  }
  .wpk-grid .wpk-products li.product .button,
  .wpk-grid .wpk-products li.product .added_to_cart{
    font-size: 12px;
    padding: 9px 12px !important;
  }

}

/* Sehr kleine Handys: Gap runter, damit 2 Spalten nicht überlaufen */
@media (max-width: 360px){

  .wpk-grid{ --wpk-card-gap: 10px; --wpk-card-min: 150px; }

}

/* NOTE: Stock-Badges (z.B. .wpk-stock-badge) werden bewusst nicht gestylt. */
/* =========================================================
   WHITEFOX – PLATFORM ICON (INLINE)
   Ziel: Icon zwischen Preis und Stock-Badge, 25x25px
   ========================================================= */

/* Price row als Flex, damit order greift */
li.product span.price{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
}

li.product span.price .woocommerce-Price-amount{
  order:1 !important;
}

li.product span.price .wf-platform-inline{
  order:2 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  min-height:25px !important;
  flex:0 0 25px !important;
  margin:0 2px !important;
  opacity:.95 !important;
}

/* (moved to WF CARDS CORE – zentral) */

/* SOTD: Plattform-Icon komplett ausblenden */
.wf-home-showcase.wf-sotd .wf-platform-inline{
  display: none !important;
}


/* =========================================================
   WPK CARDS – Mobile: Stock-Badge als eigene Zeile
   Gilt für Shop + Startseite/Query (alle Woo ul.products Karten)
   ========================================================= */
@media (max-width: 980px){


  body ul.products li.product span.price{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  body ul.products li.product span.price .woocommerce-Price-amount{ order: 1 !important; }
  body ul.products li.product span.price .wf-platform-inline{ order: 2 !important; }

  body ul.products li.product span.price .wpk-stock-badge{
    order: 3 !important;

    /* ganz wichtig: killt das "nach rechts drücken" */
    margin-left: 0 !important;

    /* eigene Zeile */
    flex: 0 0 100% !important;
    width: 100% !important;

    margin-top: 6px !important;
    text-align: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

}

@media (max-width:520px){

  body.wfs-mobile-results-mode .wfs-sidebar{ display:none !important; }

}

@media (max-width: 520px){

  body.wfs-mobile-results-mode .wfs-sidebar,
  body.wfs-mobile-results-mode .wfs-filter-form{
    display:none !important;
  }

}

/* WooCommerce Produkt-Titel im Loop */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce-loop-product__title{
  line-height: 1.22 !important;
  letter-spacing: 0.01em !important;
  word-spacing: 0.02em !important;
}




/* =========================================================
   WHITEFOX – SHORTCODE PRODUCT CARDS: Poster nicht croppen
   Gilt für wpk_products / Query-Shortcodes
   ========================================================= */

.wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link > img,
.wpk-grid .wpk-products li.product a.woocommerce-loop-product__link > img,
.wpk-grid .wpk-products li.product img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 300 / 402 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: rgba(2,6,23,0.55);
}

.wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link,
.wpk-grid .wpk-products li.product a.woocommerce-loop-product__link{
  overflow: hidden !important;
}


/* ===== PART 2: Former Upload Core Overrides (/uploads/whitefox/whitefox-cards.css) ===== */

/* =========================================================
   WHITEFOX – CARDS CORE (zentral)
   Gilt für Shop + Product Queries + Home Showcase
   Hinweis: Home-Showcase Modul-CSS kann weiterhin darüber greifen.
   ========================================================= */


/* =========================================================
   WF CARDS CORE – Preiszeile / Plattform-Icon / Stock-Badge
   Ziel: EIN zentrales Verhalten für Shop + Product Queries + Home Showcase.
   ========================================================= */

/* Preiszeile: gleiche Typo + Flex-Verhalten in allen Kontexten */
.wpk-grid .wpk-products li.product .price,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price,
.wf-home-showcase ul.products li.product span.price{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  font-size: 20px;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 10px;
  line-height: 1;
}

/* Reihenfolge: Preis -> Plattform -> Stock */
.whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price .woocommerce-Price-amount,
.wf-home-showcase ul.products li.product span.price .woocommerce-Price-amount,
.wpk-grid .wpk-products li.product .price .woocommerce-Price-amount{
  order: 1;
}

.whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price .wf-platform-inline,
.wf-home-showcase ul.products li.product span.price .wf-platform-inline,
.wpk-grid .wpk-products li.product .price .wf-platform-inline{
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;

  flex: 0 0 25px;
  overflow: hidden;
  margin: 0 4px;
  padding: 0;
}

.whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price .wf-platform-inline img,
.wf-home-showcase ul.products li.product span.price .wf-platform-inline img,
.wpk-grid .wpk-products li.product .price .wf-platform-inline img{
  width: 25px;
  height: 25px;
  max-width: 25px;
  max-height: 25px;
  object-fit: contain;
  display: block;
}

/* Stock-Badge: Pill + immer sichtbar (auch Showcase) */
.whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price .wpk-stock-badge,
.wf-home-showcase ul.products li.product span.price .wpk-stock-badge,
.wpk-grid .wpk-products li.product .price .wpk-stock-badge{
  order: 3;
  margin-left: auto;

  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;

  padding: 4px 10px 4px 24px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price .wpk-stock-badge::before,
.wf-home-showcase ul.products li.product span.price .wpk-stock-badge::before,
.wpk-grid .wpk-products li.product .price .wpk-stock-badge::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
}

/* Statusfarben + Icons (GLOBAL für alle Kontexte) */
.wpk-stock-ok{
  color:#a0ff76;
  background: rgba(160,255,118,0.10);
  border: 1px solid rgba(160,255,118,0.22);
}
.wpk-stock-ok::before{ content:"??"; }

.wpk-stock-low{
  color:#ffe97a;
  background: rgba(255,233,122,0.10);
  border: 1px solid rgba(255,233,122,0.25);
}
.wpk-stock-low::before{ content:"??"; }

.wpk-stock-out{
  color:#ff6b6b;
  background: rgba(255,107,107,0.10);
  border: 1px solid rgba(255,107,107,0.25);
}
.wpk-stock-out::before { content: "??"; }

.wpk-stock-backorder{
  color:#7ecbff;
  background: rgba(126,203,255,0.10);
  border: 1px solid rgba(126,203,255,0.25);
}
.wpk-stock-backorder::before { content: "??"; }

/* Mobile: Stock-Badge in eigene Zeile (kein Reinragen in Button/Preis) */
@media (max-width: 980px){

  .whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price,
  .wf-home-showcase ul.products li.product span.price,
  .wpk-grid .wpk-products li.product .price{
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 6px;
  }

  .whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price .wpk-stock-badge,
  .wf-home-showcase ul.products li.product span.price .wpk-stock-badge,
  .wpk-grid .wpk-products li.product .price .wpk-stock-badge{
    margin-left: 0;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 6px;
    text-align: center;
    justify-content: center;
  }
}


/* =========================================================
   BUTTONS – zentral (Shop + Queries + Showcase)
   ========================================================= */

.wpk-grid .wpk-products li.product .button,
.wpk-grid .wpk-products li.product .added_to_cart,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product .button,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product .added_to_cart,
.wf-home-showcase ul.products li.product .button,
.wf-home-showcase ul.products li.product .added_to_cart{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;

  border: 1px solid rgba(148, 163, 184, 0.55);
  background: linear-gradient(135deg,
    rgba(56, 189, 248, 0.25),
    rgba(15, 23, 42, 0.95)
  );
  color: #f9fafb;
  backdrop-filter: blur(10px);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.wpk-grid .wpk-products li.product .button:hover,
.wpk-grid .wpk-products li.product .added_to_cart:hover,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product .button:hover,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product .added_to_cart:hover,
.wf-home-showcase ul.products li.product .button:hover,
.wf-home-showcase ul.products li.product .added_to_cart:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65);
  border-color: rgba(96, 165, 250, 0.9);
  background: linear-gradient(135deg,
    rgba(56, 189, 248, 0.45),
    rgba(15, 23, 42, 0.98)
  );
}

.wpk-grid .wpk-products li.product .added_to_cart,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product .added_to_cart,
.wf-home-showcase ul.products li.product .added_to_cart{
  margin-left: 0;
}


/* =========================================================
   Sale-Badge (wie bisher – Grid)
   ========================================================= */

.wpk-grid .wpk-products li.product .onsale{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;

  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;

  background: radial-gradient(circle at top left,
    rgba(248, 113, 113, 0.95),
    rgba(127, 29, 29, 0.95)
  );
  color: #fef2f2;
  border: 1px solid rgba(254, 226, 226, 0.7);
}


/* =========================================================
   Responsive Shortcode (Tablet/Mobile) – Whitefox Grid System
   Ziel:
   - Mobile NIE 1 riesige Kachel über volle Breite (Standard: 2 Spalten)
   - Tablet 3 Spalten
   - Bilder: Höhe bleibt, kein Stretch
   ========================================================= */

@media (max-width: 1200px){
  .wpk-grid .wpk-products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 820px){
  .wpk-grid .wpk-products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .wpk-grid .wpk-products li.product{ padding: 14px; }
  .wpk-grid{ --produktbild-hoehe: 200px; }
  body .wpk-grid .woocommerce-loop-product__title{ font-size: 16px !important; }
  .wpk-grid .wpk-products li.product .price{ font-size: 16px; }
}

@media (max-width: 480px){
  .wpk-grid .wpk-products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .wpk-grid{ --produktbild-hoehe: 190px; }
  body .wpk-grid .woocommerce-loop-product__title{
    font-size: 14px;
    -webkit-line-clamp: 3;
    min-height: 4.2em !important;
  }
  .wpk-grid .wpk-products li.product .button,
  .wpk-grid .wpk-products li.product .added_to_cart{
    font-size: 12px;
    padding: 9px 12px;
  }
}

@media (max-width: 360px){
  /* Ultra-small Geräte: 1 Spalte als Fallback, damit nichts quetscht */
  .wpk-grid .wpk-products{ grid-template-columns: 1fr !important; }
  .wpk-grid{ --produktbild-hoehe: 210px; }
}


/* =========================================================
   WF HOME SHOWCASE – stacking fix
   Problem: ::after / ::before Overlays können Badge/Text "verschlucken".
   Lösung: Overlays hinter Content legen, Content auf z-index:1.
   ========================================================= */
.wf-home-showcase ul.products li.product{
  position: relative;
}
.wf-home-showcase ul.products li.product::before,
.wf-home-showcase ul.products li.product::after{
  z-index: 0;
}
.wf-home-showcase ul.products li.product > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   WF HOME SHOWCASE – force badge visibility + pill styling
   (falls Tab-CSS im Modul Dinge überschreibt)
   ========================================================= */
.wf-home-showcase ul.products li.product span.price .wpk-stock-badge{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   WF HOME SHOWCASE – Mobile: Badge unter Preis (wie Fallout-Beispiel)
   ========================================================= */
@media (max-width: 980px){

  /* Preiszeile darf umbrechen */
  .wf-home-showcase ul.products li.product span.price{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important; /* kein space-between */
    column-gap: 10px !important;
    row-gap: 6px !important;
  }

  /* Preis + Plattform oben lassen */
  .wf-home-showcase ul.products li.product span.price .woocommerce-Price-amount{
    order: 1 !important;
  }
  .wf-home-showcase ul.products li.product span.price .wf-platform-inline{
    order: 2 !important;
    flex: 0 0 auto !important;
  }

  /* Badge: eigene Zeile darunter */
  .wf-home-showcase ul.products li.product span.price .wpk-stock-badge{
    order: 3 !important;
    margin-left: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 6px !important;
  }
}

/* ---------------------------------------------------------
   WF HOME SHOWCASE – Mobile Hotfix:
   Badge darf NICHT absolut/transformiert sein
   (killt fremde Regeln aus Shop/Customizer)
--------------------------------------------------------- */
@media (max-width: 980px){

  .wf-home-showcase ul.products li.product span.price{
    height: auto !important;
    overflow: visible !important;
  }

  .wf-home-showcase ul.products li.product span.price .wpk-stock-badge{
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;

    /* bleibt deine "eigene Zeile" */
    margin-top: 8px !important;
  }
}

/* =========================================================
   SHOWCASE (Spotlight + LowBudget) – Preis/Icon in 1 Reihe
   + Button 1-zeilig / nicht fett
   ========================================================= */

/* 1) Preiszeile: Preis + Icon IMMER nebeneinander */
.wf-home-showcase.wf-spotlight ul.products li.product span.price,
.wf-home-showcase.wf-lowbudget  ul.products li.product span.price{
  justify-content: flex-start !important;
}

/* Preis soll nicht umbrechen */
.wf-home-showcase.wf-spotlight ul.products li.product span.price .woocommerce-Price-amount,
.wf-home-showcase.wf-lowbudget  ul.products li.product span.price .woocommerce-Price-amount{
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  order: 1 !important;
}

/* Icon direkt rechts neben Preis halten */
.wf-home-showcase.wf-spotlight ul.products li.product span.price .wf-platform-inline,
.wf-home-showcase.wf-lowbudget  ul.products li.product span.price .wf-platform-inline{
  flex: 0 0 auto !important;
  order: 2 !important;
  margin-left: 8px !important;
}

/* Badge bleibt eigene Zeile (dein gewünschtes Verhalten) */
@media (max-width: 980px){
  .wf-home-showcase.wf-spotlight ul.products li.product span.price .wpk-stock-badge,
  .wf-home-showcase.wf-lowbudget  ul.products li.product span.price .wpk-stock-badge{
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* 2) Button: 1-zeilig + gleiche “Shop-Optik ? (nicht fett/2-zeilig) */
.wf-home-showcase.wf-spotlight ul.products li.product a.button.wf-more-link,
.wf-home-showcase.wf-lowbudget  ul.products li.product a.button.wf-more-link{
  width: 100% !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
}

/* Mobile: Button etwas kompakter, aber weiterhin 1-zeilig */
@media (max-width: 520px){
  .wf-home-showcase.wf-spotlight ul.products li.product a.button.wf-more-link,
  .wf-home-showcase.wf-lowbudget  ul.products li.product a.button.wf-more-link{
    font-size: 12px !important;
    padding: 9px 12px !important;
  }
}

/* =========================================================
   SHOWCASE PRICE TYPO + ICON ORDER (nur Spotlight/LowBudget)
   Ziel:
   - Preis wie normale Kacheln: 17px / 800
   - Icon rechts neben Preis (order)
   - Badge bleibt darunter auf Mobile (dein aktuelles Verhalten)
   ========================================================= */

/* Typo wie normale Kacheln */
.wf-home-showcase.wf-lowbudget li.product span.price,
.wf-home-showcase.wf-spotlight li.product span.price{
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Reihenfolge erzwingen: Preis -> Icon -> Badge */
.wf-home-showcase.wf-lowbudget li.product span.price .woocommerce-Price-amount,
.wf-home-showcase.wf-spotlight li.product span.price .woocommerce-Price-amount{
  order: 1 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.wf-home-showcase.wf-lowbudget li.product span.price .wf-platform-inline,
.wf-home-showcase.wf-spotlight li.product span.price .wf-platform-inline{
  order: 2 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin-left: 8px !important;
}

/* Badge bleibt 3 */
.wf-home-showcase.wf-lowbudget li.product span.price .wpk-stock-badge,
.wf-home-showcase.wf-spotlight li.product span.price .wpk-stock-badge{
  order: 3 !important;
}

/* Mobile: Badge in eigene Zeile (und Icon bleibt neben Preis) */
@media (max-width: 980px){
  .wf-home-showcase.wf-lowbudget li.product span.price,
  .wf-home-showcase.wf-spotlight li.product span.price{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
  }

  .wf-home-showcase.wf-lowbudget li.product span.price .wpk-stock-badge,
  .wf-home-showcase.wf-spotlight li.product span.price .wpk-stock-badge{
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 6px !important;
  }
}