/* ============================================================
   Lagertechnik Direkt — Empfehlungen / Cross-Selling  (Paket P33)
   Rendert assets/js/recommendations.js:
     · PDP  : "Passende Produkte" + "Ergänzen Sie Ihre Bestellung"
     · Warenkorb: "Das könnte dazu passen"
   Nutzt die Design-Tokens aus site.css (P3) — keine Fremdbilder.
   ============================================================ */

.reco{margin-top:clamp(40px,6vw,80px)}
.reco[hidden]{display:none}
.reco + .reco{margin-top:clamp(30px,4vw,52px)}

.reco-head{margin-bottom:clamp(16px,2.4vw,26px)}
.reco-eyebrow{display:inline-block;font:var(--fw-semibold) var(--fs-xs)/var(--lh-caps) 'Inter',sans-serif;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--steel-2);margin-bottom:.5rem}/* Design-Refresh 2026-07-16 P6: Deko-Eyebrow → steel-2 */
.reco-eyebrow.is-acc{color:var(--steel-2)}
.reco-head h2{font:var(--fw-bold) clamp(1.35rem,2.5vw,1.95rem)/1.15 'Sora',sans-serif;margin:0;color:var(--text)}
.reco-sub{margin:.45rem 0 0;color:var(--muted);font-size:var(--fs-base);max-width:64ch}

/* ---------- Grid ---------- */
.reco-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(208px,1fr))}

/* Warenkorb: horizontale Schiene mit Snap auf kleinen Viewports */
.reco-cart .reco-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ---------- Karte ---------- */
.reco-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--panel);
  transition:border-color var(--t),box-shadow var(--t)}
.reco-card:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}/* Refresh 2026-07-16: Karten-Doktrin — kein translateY, Zustand nur über Rahmen+Schatten */
.reco-card:focus-within{border-color:var(--line-2)}

.reco-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.reco-link:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:var(--r)}

.reco-art{position:relative;aspect-ratio:5/4;display:grid;place-items:center;color:var(--steel-2); /* 5/4 wie .pcard-art/.pdp-cross-art (Design-Refresh P6) */
  border-bottom:1px solid var(--line);
  background:var(--panel-2)}/* Design-Refresh 2026-07-16 P6: Medienfläche flach (Radial raus) */
/* W3-D P2: cover kappte Kopf+Fuesse der Hochformat-Renders auf JEDER Empfehlungskarte */
.reco-art img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;padding:8px}
.reco-art .reco-rack{width:50%}
/* Badge-Semantik (Audit 2026-07-24, #45): S3 ist ein Serien-Kürzel, KEIN Kauf-/Rabatt-Signal.
   Signal-Rot bleibt für Rabatt (-30 %) und CTAs reserviert; das S3-Pill neutral (Panel + gedämpfter
   Text + feiner Rahmen) — kontrastgeprüft (--muted-2 auf --panel-2 ≥ 4,5:1 AA). */
.reco-badge{position:absolute;top:8px;left:8px;display:inline-grid;place-items:center;
  min-width:28px;height:20px;padding:0 6px;font:var(--fw-bold) var(--fs-2xs)/var(--lh-caps) 'Inter',sans-serif;
  color:var(--muted-2);background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px}
.reco-tag{position:absolute;top:8px;right:8px;font:var(--fw-semibold) var(--fs-2xs)/var(--lh-caps) 'Inter',sans-serif;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:#fff;background:rgba(12,14,18,.7);
  border:1px solid var(--line);border-radius:6px;padding:4px 6px}

.reco-body{display:flex;flex-direction:column;gap:.3rem;padding:12px 13px 11px;flex:1}
.reco-sys{font:var(--fw-semibold) var(--fs-xs)/var(--lh-caps) 'Inter',sans-serif;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
/* Audit 2026-07-24 (#54): Reco-Titel auf 3 Zeilen gelockert + overflow-wrap:anywhere, damit der
   unterscheidende Namens-Schwanz (RAL-Nummer/Bauform) sichtbar bleibt statt mitten im Wort zu kappen. */
.reco-title{font:var(--fw-semibold) var(--fs-base)/1.3 'Inter',sans-serif;color:var(--text);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* #111: Preis nutzt jetzt die geteilte .pcard-price-Struktur (.now/.vat) — Styles kommen aus
   site.css. „ab"-Präfix bleibt als dezentes Inline-Label im .now-Wert. */
.reco-foot .reco-from{font:var(--fw-medium) var(--fs-xs)/var(--lh-tight) 'Inter',sans-serif;color:var(--muted)}

/* ---------- Aktion / Fußzeile ---------- */
/* #111: Karten-Fußzeile auf die geteilte .pcard-Komponente vereinheitlicht — EINE gefüllt-rote
   Primär-Aktion (Warenkorb bzw. Anfrage) statt der bisherigen Outline-Inseln .reco-add/.reco-quote.
   .pcard-price/.pcard-add stylet site.css global; die schmale Reco-Kachel (Grid ab 208px) trägt
   die beschriftete Aktion nicht zuverlässig NEBEN dem Preis → hier als volle Zeile UNTER dem
   Preis (Spalten-Layout). Das vereinheitlicht die Optik (gefüllt-rot, ein Preis-Treatment) und
   bleibt auf schmalen Karten überlauffrei. .pcard-cta-Geometrie ergänzt, die sonst listing.css
   liefert (auf der PDP nicht geladen). */
.reco-foot{display:flex;margin-top:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;padding:2px 13px 13px}
.reco-foot .pcard-price{padding-top:0}
.reco-foot .pcard-price .now{font-size:var(--fs-lg)}
.reco-foot .pcard-add,
.reco-foot .pcard-cta{width:100%;min-height:44px;padding:.55rem .8rem;border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;
  white-space:normal;font-size:var(--fs-ms);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.reco-foot .pcard-add svg,
.reco-foot .pcard-cta svg{flex:0 0 auto;width:16px;height:16px}
.reco-foot .pcard-add .pcard-add-lbl{position:static;width:auto;height:auto;clip:auto}
.reco-foot .pcard-add.added{background:var(--good)}

/* Audit 2026-07-24 (#48): dezentes Verfügbarkeits-Label über der Aktion, damit der CTA-Split
   (Warenkorb vs. Angebot anfordern) als bewusste Regel liest statt als Zufall. Micro-Label auf
   .reco-sys-Skala; grüner Punkt = sofort lieferbar, gedämpft = auf Anfrage. --good-text/--muted
   sind AA-kontrastgeprüft auf hellem Panel. Negativer margin zieht es dicht an den Preis. */
.reco-avail{display:inline-flex;align-items:center;gap:.4rem;margin-top:-4px;
  font:var(--fw-semibold) var(--fs-2xs)/var(--lh-caps) 'Inter',sans-serif;
  letter-spacing:var(--ls-caps);text-transform:uppercase}
.reco-avail::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:currentColor}
.reco-avail-stock{color:var(--good-text)}
.reco-avail-quote{color:var(--muted)}
.reco-avail-quote::before{background:var(--muted)}

/* ---------- Warenkorb-Variante (etwas kompakter) ---------- */
.reco-cart{border-top:1px solid var(--line);padding-top:clamp(26px,4vw,44px)}
.reco-cart .reco-title{-webkit-line-clamp:2}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .reco-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .reco-title{font-size:var(--fs-base)}
  .reco-foot .pcard-price .now{font-size:var(--fs-base)}
}
@media (max-width:380px){
  .reco-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  /* Design-Refresh 2026-07-16 P6: inerte transform:none-Regel entfernt (Karten-Hover ist bereits ortsfest) */
  .reco-card,.reco-foot .pcard-add,.reco-foot .pcard-cta{transition:none}
}