/* =========================================================
   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,
.whitefox-shop-wrapper .wfs-products-area ul.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,
.whitefox-shop-wrapper .wfs-products-area ul.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,
.wpk-grid .wpk-products li.product a.woocommerce-loop-product__link,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-LoopProduct-link,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-loop-product__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 a.woocommerce-loop-product__link img,
.wpk-grid .wpk-products li.product img,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-LoopProduct-link img,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-loop-product__link img,
.whitefox-shop-wrapper .wfs-products-area ul.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,
body .whitefox-shop-wrapper .wfs-products-area ul.products li.product h2.woocommerce-loop-product__title,
body .whitefox-shop-wrapper .wfs-products-area ul.products li.product .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,
.whitefox-shop-wrapper .wfs-products-area ul.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,
.whitefox-shop-wrapper .wfs-products-area ul.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,
.whitefox-shop-wrapper .wfs-products-area ul.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,
.whitefox-shop-wrapper .wfs-products-area ul.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 a.woocommerce-loop-product__link img,
.wpk-grid .wpk-products li.product img,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-LoopProduct-link img,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-loop-product__link img,
.whitefox-shop-wrapper .wfs-products-area ul.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,
.wpk-grid .wpk-products li.product:hover a.woocommerce-loop-product__link img,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product:hover a.woocommerce-LoopProduct-link img,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product:hover a.woocommerce-loop-product__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,
body .whitefox-shop-wrapper .wfs-products-area ul.products li.product .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,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-LoopProduct-link,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-loop-product__link{
  overflow: hidden !important;
  text-decoration: none !important;
}

/* Der Hauptlink der Karte darf Titel/Preis auch im Hover nicht unterstreichen. */
.wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link:hover,
.wpk-grid .wpk-products li.product a.woocommerce-loop-product__link:hover,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-LoopProduct-link:hover,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product a.woocommerce-loop-product__link:hover{
  text-decoration: none !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.
   ========================================================= */

/* Hauptinhalt der Produktkarte: nie wie ein Fließtext-Link dekorieren. */
body .wpk-grid .woocommerce-loop-product__title,
body .whitefox-shop-wrapper .wfs-products-area ul.products li.product .woocommerce-loop-product__title,
.wpk-grid .wpk-products li.product .price,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price,
.wpk-grid .wpk-products li.product .woocommerce-Price-amount,
.whitefox-shop-wrapper .wfs-products-area ul.products li.product .woocommerce-Price-amount{
  text-decoration: none !important;
}

/* 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;
  }
}

/* =========================================================
   WHITEFOX   HUB PRODUCT GRID PATCH
   Ziel:
   - Plattform-Hubseiten wie Steam, PlayStation, Xbox, GOG, Battle.net usw.
     nutzen dieselbe WPK-Card/Grid-Logik.
   - wpk-cols-* wird auf Desktop wieder exakt respektiert.
   - Bulletpoints/Floats/WooCommerce-Default-Widths werden sicher entfernt.
   - Funktioniert mit alter Steam-Klasse und neuen generischen Hub-Klassen.
   ========================================================= */

/* Gemeinsame Hub-Wrapper: alte Steam-Seite + neue Hub-Struktur */
.wf-steam-page .wpk-grid .wpk-products,
.wf-playstation-wrap .wpk-grid .wpk-products,
.wf-playstation-page .wpk-grid .wpk-products,
.wf-hub-page .wpk-grid .wpk-products,
.wf-platform-hub .wpk-grid .wpk-products{
  display: grid !important;
  gap: var(--wpk-card-gap, 22px) !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Exakte Spalten aus dem Shortcode/Query-Wrapper */
.wf-steam-page .wpk-grid.wpk-cols-3 .wpk-products,
.wf-playstation-wrap .wpk-grid.wpk-cols-3 .wpk-products,
.wf-playstation-page .wpk-grid.wpk-cols-3 .wpk-products,
.wf-hub-page .wpk-grid.wpk-cols-3 .wpk-products,
.wf-platform-hub .wpk-grid.wpk-cols-3 .wpk-products{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.wf-steam-page .wpk-grid.wpk-cols-4 .wpk-products,
.wf-playstation-wrap .wpk-grid.wpk-cols-4 .wpk-products,
.wf-playstation-page .wpk-grid.wpk-cols-4 .wpk-products,
.wf-hub-page .wpk-grid.wpk-cols-4 .wpk-products,
.wf-platform-hub .wpk-grid.wpk-cols-4 .wpk-products{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.wf-steam-page .wpk-grid.wpk-cols-5 .wpk-products,
.wf-playstation-wrap .wpk-grid.wpk-cols-5 .wpk-products,
.wf-playstation-page .wpk-grid.wpk-cols-5 .wpk-products,
.wf-hub-page .wpk-grid.wpk-cols-5 .wpk-products,
.wf-platform-hub .wpk-grid.wpk-cols-5 .wpk-products{
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.wf-steam-page .wpk-grid.wpk-cols-6 .wpk-products,
.wf-playstation-wrap .wpk-grid.wpk-cols-6 .wpk-products,
.wf-playstation-page .wpk-grid.wpk-cols-6 .wpk-products,
.wf-hub-page .wpk-grid.wpk-cols-6 .wpk-products,
.wf-platform-hub .wpk-grid.wpk-cols-6 .wpk-products{
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* WooCommerce-Defaults in Hub-Shortcodes sicher killen */
.wf-steam-page .wpk-grid .wpk-products > li.product,
.wf-playstation-wrap .wpk-grid .wpk-products > li.product,
.wf-playstation-page .wpk-grid .wpk-products > li.product,
.wf-hub-page .wpk-grid .wpk-products > li.product,
.wf-platform-hub .wpk-grid .wpk-products > li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Link/Bildstruktur auf Hubseiten konsistent halten */
.wf-steam-page .wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link,
.wf-steam-page .wpk-grid .wpk-products li.product a.woocommerce-loop-product__link,
.wf-playstation-wrap .wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link,
.wf-playstation-wrap .wpk-grid .wpk-products li.product a.woocommerce-loop-product__link,
.wf-playstation-page .wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link,
.wf-playstation-page .wpk-grid .wpk-products li.product a.woocommerce-loop-product__link,
.wf-hub-page .wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link,
.wf-hub-page .wpk-grid .wpk-products li.product a.woocommerce-loop-product__link,
.wf-platform-hub .wpk-grid .wpk-products li.product a.woocommerce-LoopProduct-link,
.wf-platform-hub .wpk-grid .wpk-products li.product a.woocommerce-loop-product__link{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.wf-steam-page .wpk-grid .wpk-products li.product img,
.wf-playstation-wrap .wpk-grid .wpk-products li.product img,
.wf-playstation-page .wpk-grid .wpk-products li.product img,
.wf-hub-page .wpk-grid .wpk-products li.product img,
.wf-platform-hub .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;
}

/* Tablet: Hubs kontrolliert auf 3 Spalten */
@media (max-width: 1200px){
  .wf-steam-page .wpk-grid .wpk-products,
  .wf-playstation-wrap .wpk-grid .wpk-products,
  .wf-playstation-page .wpk-grid .wpk-products,
  .wf-hub-page .wpk-grid .wpk-products,
  .wf-platform-hub .wpk-grid .wpk-products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

/* Mobile: 2 Spalten statt riesiger Einzelkarten */
@media (max-width: 820px){
  .wf-steam-page .wpk-grid .wpk-products,
  .wf-playstation-wrap .wpk-grid .wpk-products,
  .wf-playstation-page .wpk-grid .wpk-products,
  .wf-hub-page .wpk-grid .wpk-products,
  .wf-platform-hub .wpk-grid .wpk-products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 480px){
  .wf-steam-page .wpk-grid .wpk-products,
  .wf-playstation-wrap .wpk-grid .wpk-products,
  .wf-playstation-page .wpk-grid .wpk-products,
  .wf-hub-page .wpk-grid .wpk-products,
  .wf-platform-hub .wpk-grid .wpk-products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 360px){
  .wf-steam-page .wpk-grid .wpk-products,
  .wf-playstation-wrap .wpk-grid .wpk-products,
  .wf-playstation-page .wpk-grid .wpk-products,
  .wf-hub-page .wpk-grid .wpk-products,
  .wf-platform-hub .wpk-grid .wpk-products{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   WHITEFOX FIX 2026-06-14
   Plattform-Icons in Preiszeilen auf Hub-/Shortcode-Seiten
   Problem:
   Generische Hub-Bildregeln für li.product img trafen auch die kleinen
   Plattformlogos innerhalb .wf-platform-inline. Dadurch wurden Rockstar,
   Origin, Epic usw. optisch zu klein bzw. falsch skaliert.
   Lösung:
   Plattformlogo-Regeln am Dateiende erneut und spezifischer setzen.
   ========================================================= */

/* Container: einheitliche Icon-Bubble in Preiszeilen */
body ul.products li.product span.price .wf-platform-inline,
body .wpk-grid .wpk-products li.product .price .wf-platform-inline,
body .whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price .wf-platform-inline,
body .wf-home-showcase ul.products li.product span.price .wf-platform-inline,
body .wf-steam-page .wpk-grid .wpk-products li.product span.price .wf-platform-inline,
body .wf-playstation-wrap .wpk-grid .wpk-products li.product span.price .wf-platform-inline,
body .wf-playstation-page .wpk-grid .wpk-products li.product span.price .wf-platform-inline,
body .wf-hub-page .wpk-grid .wpk-products li.product span.price .wf-platform-inline,
body .wf-platform-hub .wpk-grid .wpk-products 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;
  max-width: 25px !important;
  max-height: 25px !important;
  flex: 0 0 25px !important;

  margin: 0 4px !important;
  padding: 0 !important;
  overflow: visible !important;
  line-height: 1 !important;
  opacity: .98 !important;
}

/* Das eigentliche Logo: NICHT von Produktbild-Regeln erben */
body ul.products li.product span.price .wf-platform-inline > img,
body .wpk-grid .wpk-products li.product .price .wf-platform-inline > img,
body .whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price .wf-platform-inline > img,
body .wf-home-showcase ul.products li.product span.price .wf-platform-inline > img,
body .wf-steam-page .wpk-grid .wpk-products li.product span.price .wf-platform-inline > img,
body .wf-playstation-wrap .wpk-grid .wpk-products li.product span.price .wf-platform-inline > img,
body .wf-playstation-page .wpk-grid .wpk-products li.product span.price .wf-platform-inline > img,
body .wf-hub-page .wpk-grid .wpk-products li.product span.price .wf-platform-inline > img,
body .wf-platform-hub .wpk-grid .wpk-products li.product span.price .wf-platform-inline > img{
  display: block !important;

  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;

  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  filter: none !important;
}

/* Einzelne Plattform-Dateien mit viel transparentem Rand dürfen minimal größer wirken */
body ul.products li.product span.price .wf-platform-inline > img[alt*="Rockstar"],
body ul.products li.product span.price .wf-platform-inline > img[alt*="Origin"],
body ul.products li.product span.price .wf-platform-inline > img[alt*="Epic"]{
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}


/* =========================================================
   HOTFIX: Rockstar Plattform-Icon zu klein auf Hub-/Query-Seiten
   Ursache: fremde Bildregeln greifen auf .wf-platform-inline img
   ========================================================= */

body ul.products li.product span.price .wf-platform-inline{
  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;
  max-width:25px !important;
  max-height:25px !important;

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

body ul.products li.product span.price .wf-platform-inline img,
body ul.products li.product span.price .wf-platform-inline img.litespeed-no-lazy{
  display:block !important;

  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;

  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;

  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Rockstar separat nochmal maximal spezifisch */
body ul.products li.product span.price .wf-platform-inline img[alt="Rockstar Games Logo"],
body ul.products li.product span.price .wf-platform-inline img[src*="plattform_rockstar"]{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  object-fit:contain !important;
}


/* =========================================================
   WHITEFOX NATIVE 1.2.7 – HUB GRID RESPONSIVE PRECEDENCE FIX
   Problem:
   Die Desktop-Regeln wie `.wpk-grid.wpk-cols-5` sind spezifischer als
   die bisherigen Media-Query-Regeln. Weil beide Seiten `!important`
   verwenden, blieb z. B. /epic-keys/ auf 360 px trotzdem 5-spaltig.

   Ziel:
   - Desktop respektiert weiterhin wpk-cols-* exakt.
   - <= 1200 px: 3 Spalten
   - <= 820 px: 2 Spalten
   - <= 360 px: 1 Spalte
   - Keine Sonderoptik: nur die Grid-Geometrie wird korrigiert.
   ========================================================= */

@media (max-width: 1200px){
  .wf-steam-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-playstation-wrap .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-playstation-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-hub-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-platform-hub .wpk-grid[class*="wpk-cols-"] .wpk-products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 820px){
  .wf-steam-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-playstation-wrap .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-playstation-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-hub-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-platform-hub .wpk-grid[class*="wpk-cols-"] .wpk-products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 480px){
  .wf-steam-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-playstation-wrap .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-playstation-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-hub-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-platform-hub .wpk-grid[class*="wpk-cols-"] .wpk-products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 360px){
  .wf-steam-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-playstation-wrap .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-playstation-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-hub-page .wpk-grid[class*="wpk-cols-"] .wpk-products,
  .wf-platform-hub .wpk-grid[class*="wpk-cols-"] .wpk-products{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* =========================================================
   WHITEFOX NATIVE 1.2.8 – MOBILE CARD CONTENT FLOW
   Problem:
   Ein alter Komponenten-Hotfix positionierte den Bestandsbadge unter 820 px
   absolut im Kartenlink. In zweispaltigen Hub-Grids (z. B. /epic-keys/)
   lagen Preis und Bestand dadurch optisch übereinander.

   Ziel:
   - Preis + Plattform bleiben in einer sauberen ersten Zeile.
   - Bestand bekommt im normalen Dokumentfluss eine eigene zweite Zeile.
   - Keine absolute Positionierung, keine Transform-Tricks, kein Überlappen.
   - Gilt für den zentralen Karten-Kanon (WPK, Shop, Homepage-Showcases).
   ========================================================= */

@media (max-width: 820px){
  .wpk-grid .wpk-products li.product > a.woocommerce-LoopProduct-link,
  .wpk-grid .wpk-products li.product > a.woocommerce-loop-product__link,
  .whitefox-shop-wrapper .wfs-products-area ul.products li.product > a.woocommerce-LoopProduct-link,
  .whitefox-shop-wrapper .wfs-products-area ul.products li.product > a.woocommerce-loop-product__link,
  .wf-home-showcase ul.products li.product > a.woocommerce-LoopProduct-link,
  .wf-home-showcase ul.products li.product > a.woocommerce-loop-product__link{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  .wpk-grid .wpk-products li.product span.price,
  .whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price,
  .wf-home-showcase ul.products li.product span.price{
    display: grid !important;
    grid-template-columns: minmax(0, max-content) 25px !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 8px !important;
    row-gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;

    position: relative !important;
    inset: auto !important;
    overflow: visible !important;
    line-height: 1.15 !important;
  }

  .wpk-grid .wpk-products li.product span.price .woocommerce-Price-amount,
  .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{
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    position: static !important;
    transform: none !important;
  }

  .wpk-grid .wpk-products li.product span.price .wf-platform-inline,
  .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{
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  .wpk-grid .wpk-products li.product span.price > .wpk-stock-badge,
  .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{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;

    margin: 0 !important;
    padding: 4px 8px 4px 22px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 480px){
  .wpk-grid .wpk-products li.product,
  .whitefox-shop-wrapper .wfs-products-area ul.products li.product,
  .wf-home-showcase ul.products li.product{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .wpk-grid .wpk-products li.product span.price,
  .whitefox-shop-wrapper .wfs-products-area ul.products li.product span.price,
  .wf-home-showcase ul.products li.product span.price{
    grid-template-columns: minmax(0, max-content) 22px !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    font-size: 14px !important;
  }

  .wpk-grid .wpk-products li.product span.price .wf-platform-inline,
  .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{
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex-basis: 22px !important;
  }

  .wpk-grid .wpk-products li.product span.price .wf-platform-inline > img,
  .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{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }

  .wpk-grid .wpk-products li.product span.price > .wpk-stock-badge,
  .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{
    font-size: 10px !important;
    padding: 4px 6px 4px 19px !important;
  }

  .wpk-grid .wpk-products li.product span.price > .wpk-stock-badge::before,
  .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{
    left: 6px !important;
  }
}


/* =========================================================
   WHITEFOX NATIVE 1.2.9 – MOBILE HUB TITLE CLAMP
   Problem:
   Auf zweispaltigen Hub-Karten unter 480 px war der Titel weiterhin auf
   3 Zeilen begrenzt, während die reservierte Mindesthöhe größer war.
   Chromium konnte dadurch bereits einen Teil der 4. Zeile anzeigen und
   anschließend hart abschneiden.

   Ziel:
   - Hub-/Plattformkarten dürfen mobil sauber 4 Titelzeilen zeigen.
   - Reservierte Titelhöhe entspricht exakt 4 Zeilen.
   - Keine Änderung an /shop, Homepage oder Einzelprodukt-Empfehlungen.
   ========================================================= */
@media (max-width: 480px){
  body .wf-steam-page .wpk-grid .woocommerce-loop-product__title,
  body .wf-playstation-wrap .wpk-grid .woocommerce-loop-product__title,
  body .wf-playstation-page .wpk-grid .woocommerce-loop-product__title,
  body .wf-hub-page .wpk-grid .woocommerce-loop-product__title,
  body .wf-platform-hub .wpk-grid .woocommerce-loop-product__title{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;

    font-size: 14px !important;
    line-height: 1.22 !important;
    min-height: 4.88em !important;
    height: auto !important;
  }
}