/**
 * Amazon-Modul: Default-Styling fuer .ab-product  [MASTER-Referenz]
 *
 * Startpunkt. Pro Projekt entweder die --ab-* Custom Properties ueberschreiben
 * oder komplett eigenes CSS schreiben - die BEM-Klassen bleiben stabil.
 * (browserdoktor.de stylt .ab-product direkt im eigenen Stylesheet mit seinen
 *  Marken-Tokens; dieses File ist die neutrale Vorlage fuer neue Projekte.)
 *
 * Selektoren bewusst OHNE Kontext-Praefix (kein .post-body), damit universell.
 * In Projekten mit globalen Listen-Bullets ggf. .ab-product__proscons ul/li::before
 * zuruecksetzen (background/border/border-radius:0), sonst doppelte Marker.
 */
:root {
    --ab-accent:      #d94d4a;   /* Akzent: Rahmen links, Marke, Verdict-Leiste */
    --ab-accent-dark: #b23b39;   /* Hover */
    --ab-cta:         #ff9900;   /* Amazon-Button */
    --ab-cta-dark:    #e88b00;
    --ab-cta-text:    #0f0f0f;
    --ab-ink:         #2a2120;   /* Text stark */
    --ab-ink-soft:    #4a4038;   /* Text weich */
    --ab-muted:       #8a8078;
    --ab-pro:         #1a8a4a;   /* Vorteile */
    --ab-con:         #f23000;   /* Zu beachten */
    --ab-bg:          #fafafa;   /* Box-Hintergrund */
    --ab-line:        #e3ddd6;   /* Rahmen */
    --ab-feedback-bg: #f2efec;
    --ab-radius:      14px;
}

.ab-product{display:flex;gap:20px;align-items:flex-start;background:var(--ab-bg);
    border:1px solid var(--ab-line);border-left:4px solid var(--ab-accent);
    border-radius:var(--ab-radius);padding:18px 20px;margin:26px 0;color:var(--ab-ink-soft);}
.ab-product__image{flex:0 0 170px;position:relative;background:#fff;border:1px solid var(--ab-line);
    border-radius:10px;padding:10px;text-align:center;}
.ab-product__image img{max-width:100%;height:auto;max-height:180px;object-fit:contain;mix-blend-mode:multiply;}
.ab-product__badge{position:absolute;top:8px;left:8px;background:var(--ab-accent);color:#fff;
    font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;}
.ab-product__badge--nobild{position:static;display:inline-block;margin:0 0 8px;}
.ab-product__body{min-width:0;flex:1;}
.ab-product__title{font-size:19px;font-weight:700;margin:0 0 4px;color:var(--ab-ink);line-height:1.3;}
.ab-product__title a{color:var(--ab-ink);text-decoration:none;}
.ab-product__title a:hover{color:var(--ab-accent-dark);}
.ab-product__brand{display:block;font-size:13px;color:var(--ab-muted);margin:0 0 8px;}
.ab-product__price{font-size:23px;font-weight:800;color:var(--ab-ink);line-height:1.1;margin:0 0 12px;}
.ab-product__price-note{font-size:13px;font-weight:500;color:var(--ab-muted);}
.ab-product__price-stamp{font-size:12.5px;color:var(--ab-muted);margin:-8px 0 12px;}
.ab-product__desc{margin:0 0 14px;}
.ab-product__proscons{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:0 0 14px;}
.ab-product__proscons ul{margin:5px 0 0;padding:0;list-style:none;background:none;border:0;}
.ab-product__proscons li{position:relative;padding:2px 0 2px 22px;font-size:15px;line-height:1.45;}
.ab-product__pros-label,.ab-product__cons-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.ab-product__pros-label{color:var(--ab-pro);}
.ab-product__cons-label{color:var(--ab-con);}
.ab-product__pros li::before,.ab-product__cons li::before{position:absolute;top:0;font-weight:800;font-size:16px;line-height:1.4;}
.ab-product__pros li::before{content:"+";left:2px;color:var(--ab-pro);}
.ab-product__cons li::before{content:"!";left:4px;color:var(--ab-con);}
.ab-product__feedback{font-size:15px;background:var(--ab-feedback-bg);border-radius:8px;padding:11px 14px;margin:0 0 14px;}
.ab-product__verdict{font-size:15px;color:var(--ab-ink);border-left:3px solid var(--ab-accent);padding:2px 0 2px 12px;margin:0 0 16px;}
.ab-product__cta{display:inline-block;background:var(--ab-cta);color:var(--ab-cta-text);font-weight:700;
    padding:12px 26px;border-radius:9px;text-decoration:none;transition:background .15s ease,transform .15s ease;}
.ab-product__cta:hover{background:var(--ab-cta-dark);color:var(--ab-cta-text);transform:translateY(-1px);}
@media(max-width:620px){
    .ab-product{flex-direction:column;gap:14px;}
    .ab-product__image{flex:none;width:100%;max-width:220px;margin:0 auto;}
    .ab-product__proscons{grid-template-columns:1fr;gap:10px;}
    .ab-product__cta{display:block;text-align:center;}
}

/* ---------- Flechtwerk-Theme, geschenkkorb.org ---------- */
:root {
  --ab-bg: #fdf8ee;
  --ab-ink: #3a2d22;
  --ab-ink-soft: #665545;
  --ab-muted: #8a7562;
  --ab-line: #e6d8c0;
  --ab-accent: #b8874a;
  --ab-accent-dark: #7f5a2c;
  --ab-cta: #3a2d22;
  --ab-cta-dark: #a8452f;
  --ab-cta-text: #f2e9d8;
  --ab-feedback-bg: #e6d8c0;
  --ab-radius: 20px;
}
.ab-product { border: 2px solid var(--ab-line); }
.ab-product a.ab-product__cta { border-radius: 999px; font-weight: 700; }

/* ---------- Schnellauswahl: drei kompakte Boxen nebeneinander ---------- */
.ab-schnellauswahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
  margin: var(--raum-3) 0 var(--raum-6);
  align-items: stretch;
}
.ab-schnellauswahl .ab-product {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ab-schnellauswahl .ab-product--kurz { flex-direction: column; text-align: center; }
.ab-schnellauswahl .ab-product__image { margin: 0 auto var(--raum-2); max-width: 150px; }
.ab-schnellauswahl .ab-product__body { display: flex; flex-direction: column; flex: 1; }
.ab-schnellauswahl .ab-product__title { font-size: 1.02rem; line-height: 1.3; }
.ab-schnellauswahl .ab-product__price { margin-top: auto; }
.ab-schnellauswahl .ab-product__price-stamp { display: none; }
.ab-schnellauswahl .ab-product__cta { width: 100%; text-align: center; }
@media (max-width: 860px) {
  .ab-schnellauswahl { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}