/* ============================================================
   empfehlung.css — "Auch von Symbolarity" (js/empfehlung.js)

   Dieselbe Form wie die Korbliste in korb.css: Haarlinien statt Kasten,
   72px-Bild, Markenpunkt in der Produktfarbe, Name, Preis, ein Knopf am
   rechten Rand. Setzt brand.css und layout.css (.btn) voraus.
   ============================================================ */

.empfehlung {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
/* Das Etikett der Seite: Mono, Versalien, blass — ein Schild, kein Satz. */
.empfehlung-titel {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 var(--s-3);
}
.empfehlung-liste { list-style: none; margin: 0; padding: 0; }
.empfehlung-posten {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}
.empfehlung-posten:last-child { border-bottom: 1px solid var(--line); }
.empfehlung-bild {
  width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  background: var(--lack-tief);
  border: 1px solid var(--line);
  display: block;
}
.empfehlung-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.empfehlung-text { min-width: 0; }
.empfehlung-marke {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  margin: 0;
}
.empfehlung-marke::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ic, var(--faint));
}
.empfehlung-name {
  font-size: var(--t-sm); font-weight: 600; line-height: 1.4;
  margin: 3px 0 2px;
}
.empfehlung-name a { color: var(--text); text-decoration: none; }
.empfehlung-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.empfehlung-preis {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); margin: 0;
}
/* Der Knopf ist auf dem Handy die dritte Spalte zu viel: dann unter den
   Text, ueber die volle Breite — wie "Zur Kasse" im Korb. */
@media (max-width: 520px) {
  .empfehlung-posten { grid-template-columns: 72px 1fr; }
  .empfehlung-posten > .btn { grid-column: 1 / -1; width: 100%; }
}

/* Die Zeile, die gerade in den Korb ging — dieselbe Lichtkante wie die
   Kachel im Shop (shop.css korbQuittung): der Vorgang, kein Zustand. */
@keyframes empfehlungQuittung {
  from { box-shadow: 0 0 0 1px var(--brand); }
  to   { box-shadow: 0 0 0 1px transparent; }
}
.empfehlung-posten.quittiert {
  border-radius: 12px;
  animation: empfehlungQuittung 0.9s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .empfehlung-posten.quittiert { animation: none; }
}