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