/* ZLEAF Design-System: Produktkarte (einzige CSS-Quelle fuer alle 3 Varianten).
   Wird von includes/components/product-card.php (PHP-Render) UND
   assets/js/product-card.js (Client-Rerender bei Filtern) genutzt -- selbe Klassen. */

.s-card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s;cursor:pointer;position:relative}
.s-card:hover{border-color:var(--gray-3);box-shadow:0 4px 20px rgba(0,0,0,.08)}
.s-card-img{background:var(--gray-6);height:130px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden}
.s-card-img img{width:100%;height:100%;object-fit:cover;border-radius:12px 12px 0 0}
.s-card-img svg{width:52px;height:52px;opacity:.25}
.s-card-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.s-badges{display:flex;gap:4px;flex-wrap:wrap}
.s-badge{display:inline-block;padding:3px 8px;border-radius:9px;font-size:10.5px;font-weight:700;letter-spacing:.1px}
.sb-form,.sb-sativa,.sb-indica,.sb-hybrid,.sb-thc,.sb-cbd{background:#2d2d2d;color:var(--white)}
.s-name{font-size:13px;font-weight:700;color:var(--black);text-decoration:none;line-height:1.3}
.s-name:hover{color:var(--gray-1)}
.s-brand-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:-3px}
.s-brand{font-size:11px;color:var(--gray-3);text-decoration:none;cursor:pointer;width:fit-content}
.s-brand:hover{color:var(--black);text-decoration:none}
.s-pharma{display:flex;align-items:center;gap:5px}
.s-pharma-name{font-size:11px;color:var(--gray-3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-pharma-more{font-size:10px;font-weight:700;background:var(--gray-5);color:var(--gray-2);padding:1px 6px;border-radius:7px}
.s-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.s-deliv{font-size:.68rem;font-weight:700;color:var(--black);background:var(--white);border:1px solid var(--border);border-radius:4px;padding:.15rem .45rem;display:inline-block;white-space:nowrap}
.gram-row{display:flex;gap:5px;align-items:center}
.gram-lbl{font-size:10.5px;color:var(--gray-3);font-weight:600;flex-shrink:0}
.unit-label{font-size:11px;font-weight:700;color:var(--gray-2)}
.s-footer{padding:10px 14px;border-top:1px solid var(--gray-6);display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.s-price{font-size:16px;font-weight:800;color:var(--black);line-height:1}
/* 05.10.2026: Preis/Gramm ist fuer den Produktvergleich informativer als der Gesamtpreis
   (haengt von der gewaehlten Menge ab) -- deshalb prominent, Gesamtpreis sekundaer. Nur wenn
   es tatsaechlich einen Gramm-Preis gibt (:has), sonst bleibt der Gesamtpreis die Hauptangabe. */
.s-footer:has(.s-price-sub) .s-price{font-size:11px;font-weight:600;color:var(--gray-3);line-height:1.3}
.s-price-sub{font-size:16px;font-weight:800;color:var(--black);line-height:1;margin-bottom:2px}
.s-add-guest{display:inline-block;text-decoration:none;text-align:center;line-height:1.4;font-size:11.5px;padding:6px 10px}

/* Menge-Stepper + Warenkorb-Icon-Button: ersetzt die alte 10/20/30/40g-Button-Reihe
   + den breiten Text-Button -- beides zusammen auf einer Zeile, spart eine ganze Zeile
   Platz auf der Karte (Stephan-Feedback 2026-09-12). */
.s-qtycart{display:flex;align-items:center;gap:6px;flex-shrink:0}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:8px;overflow:hidden}
.qty-btn{width:24px;height:30px;border:none;background:var(--white);color:var(--gray-2);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:background .1s;flex-shrink:0}
.qty-btn:hover{background:var(--gray-6);color:var(--black)}
.qty-val{min-width:32px;text-align:center;font-size:11px;font-weight:700;color:var(--black);padding:0 2px}
.s-add-icon{width:34px;height:34px;flex-shrink:0;border:none;border-radius:8px;background:var(--black);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
.s-add-icon:hover{background:var(--gray-1)}
.s-add-icon:disabled{opacity:.55;cursor:not-allowed}
.s-add-icon .icon-check{display:none}
.s-add-icon.added .icon-cart{display:none}
.s-add-icon.added .icon-check{display:block}
.img-flowers{color:#6d9b3a}.img-extract{color:#b87333}.img-vape{color:#4a9eff}.img-gummies{color:#e87c3e}

/* Expert-/Kunden-Bewertung auf der Karte */
.card-expert-score,.card-user-rating{display:flex;align-items:center;gap:.3rem;margin:.25rem 0;font-size:.82rem}
.card-score-stars{color:var(--rating);letter-spacing:1px;font-size:.9rem}
.card-score-num{font-weight:700;color:var(--gray-1)}
.card-score-label{color:var(--gray-3);font-size:.75rem}

/* Preis pro Gramm: jetzt der primaere Vergleichspreis auf der Karte (siehe .s-price-sub oben) */
.price-per-gram{font-size:16px;font-weight:800;color:var(--black);white-space:nowrap}

/* NEU + Bestrahlungs-Badges */
.s-badge-new{background:#2d2d2d;color:var(--white);display:inline-block;font-size:.68rem;font-weight:700;padding:.15rem .45rem;border-radius:4px;letter-spacing:.3px;vertical-align:middle}
.s-badge-no-irr{background:var(--white);color:var(--black);border:1px solid var(--border);display:inline-block;font-size:.68rem;font-weight:700;padding:.15rem .45rem;border-radius:4px;vertical-align:middle}

.s-fav-btn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.85);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;color:var(--gray-3);transition:all .15s;backdrop-filter:blur(4px)}
.s-fav-btn:hover{color:var(--black);background:white}
.s-fav-btn.active{color:#e11d48;fill:#e11d48}
.s-fav-btn.active svg{fill:#e11d48}

/* Variante 'public' (City-Landingpages, read-only) */
.s-card-public{text-decoration:none;color:inherit}
.s-card-public .s-footer{align-items:center}
.s-card-public-cta{font-size:11.5px;font-weight:700;color:var(--gray-3)}
.s-card-public:hover .s-card-public-cta{color:var(--black)}

/* Variante 'compact' (Featured-Karussell) -- ersetzt die alte separate .feat-card-Familie */
.s-card-compact{flex:0 0 200px;scroll-snap-align:start;text-decoration:none;color:inherit}
.s-card-compact .s-card-img{height:160px}
.s-card-compact .s-card-body{padding:.75rem;gap:.3rem}
.s-card-compact-badge{position:absolute;top:.5rem;left:.5rem}
.s-card-compact-score{font-size:.8rem;color:var(--rating)}

/* Featured-Karussell-Rahmen (Layout drumherum, keine Karten-eigene Optik) */
.featured-section{margin-bottom:2rem}
.featured-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.featured-title{font-size:1.3rem;font-weight:700;margin:0}
.carousel-arrows{display:flex;gap:.5rem}
.carousel-arrows button{background:var(--white);border:1px solid var(--gray-2);border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:1.3rem;line-height:1;font-family:inherit}
.carousel-arrows button:hover{background:var(--gray-6)}
.feat-carousel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.feat-carousel::-webkit-scrollbar{display:none}
.genetics-hybrid,.genetics-sativa,.genetics-indica{background:#2d2d2d;color:var(--white)}

@media(max-width:480px){
  .s-card-img{height:110px}
  .s-card-body{padding:10px 12px;gap:6px}
  .s-footer{flex-direction:column;align-items:stretch;gap:8px;padding:8px 12px}
  .s-qtycart{justify-content:space-between}
  .qty-stepper{flex:1}
  .qty-val{min-width:26px;font-size:10px}
  .qty-btn{width:20px}
  .s-pharma,.card-expert-score,.card-user-rating{display:none}
}
/* 05.10.2026: Shop-Grid auf Mobile jetzt 1-spaltig (siehe shop/index.php) -- Karte wechselt auf
   Reihen-Layout (Bild links, Infos rechts) statt der obigen Kompaktierung, dadurch wieder Platz
   fuer Apotheken-/Bewertungszeile UND groessere, WCAG-naehere Touch-Targets. */
@media(max-width:480px){
  /* .s-card-img/.s-card-body/.s-footer sind 3 direkte Geschwister (nicht body>footer verschachtelt)
     -- deshalb CSS Grid statt Flex-Row: Bild spannt beide Zeilen, Body+Footer stapeln sich rechts. */
  .shop-grid .s-card{display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto auto;column-gap:0}
  .shop-grid .s-card-img{grid-column:1;grid-row:1/3;height:auto;width:104px}
  .shop-grid .s-card-img img{border-radius:0}
  .shop-grid .s-card-body{grid-column:2;grid-row:1;padding:10px 12px 4px;gap:5px}
  .shop-grid .s-footer{grid-column:2;grid-row:2;flex-direction:row;align-items:center;justify-content:space-between;padding:4px 12px 10px;border-top:none;margin-top:0}
  .shop-grid .s-qtycart{justify-content:flex-end}
  .shop-grid .qty-val{min-width:28px;font-size:12px}
  .shop-grid .qty-btn{width:36px;height:44px}
  .shop-grid .s-add-icon{width:44px;height:44px}
  .shop-grid .s-pharma,.shop-grid .card-expert-score,.shop-grid .card-user-rating{display:flex}
  /* UX-Plan 06.10.: Preis + Mengenwahl + Warenkorb-Button passten nicht in eine Zeile -> Button wurde abgeschnitten */
  .shop-grid .s-card{grid-template-columns:104px minmax(0,1fr)}
  .shop-grid .s-footer{flex-wrap:wrap;row-gap:6px}
  .shop-grid .s-footer>:first-child{flex:1 1 100%;min-width:0}
  .shop-grid .s-qtycart{flex:1 1 100%;justify-content:space-between}
}