/* ═══════════════════════════════════════════════════════════════
   AffiliBox – Product Comparison Grid
   2 styles: boxed (with ribbon badge) | clean (no border/badge)
   ═══════════════════════════════════════════════════════════════ */

.ab-cmp-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 28px auto;
  width: 100%;
}

/* ── Outer frame (boxed style) ───────────────────────────────── */
.ab-cmp-boxed-frame {
  border: 3px solid;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(0,0,0,0.10);
  background: #fff;
}

/* ── Grid ────────────────────────────────────────────────────── */
.ab-cmp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
}
@media (max-width: 640px) {
  .ab-cmp-grid { grid-template-columns: 1fr; }
}
@media (min-width:641px) and (max-width:900px) {
  .ab-cmp-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Card ────────────────────────────────────────────────────── */
.ab-cmp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px 24px;
  position: relative;
  border-right: 1px solid rgba(0,0,0,0.07);
  background: #fff;
}
.ab-cmp-card:last-child { border-right: none; }

/* ── Ribbon/pennant badge ────────────────────────────────────── */
.ab-cmp-ribbon {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  text-align: center;
}
.ab-cmp-ribbon-inner {
  display: inline-block;
  padding: 10px 24px 18px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
  min-width: 140px;
}

/* ── Image ───────────────────────────────────────────────────── */
.ab-cmp-img-wrap {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px auto 12px;
  position: relative;
}
.ab-cmp-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.13)) drop-shadow(0 2px 6px rgba(0,0,0,0.07));
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ab-cmp-card:hover .ab-cmp-img-wrap img {
  transform: scale(1.08) translateY(-5px);
}

/* ── Text ────────────────────────────────────────────────────── */
.ab-cmp-name  { font-size:1rem;  font-weight:800; color:#111; margin:4px 0 8px; line-height:1.3; }
.ab-cmp-price { font-size:1.1rem; font-weight:900; color:#111; margin:0 0 10px; letter-spacing:-0.01em; }
.ab-cmp-desc  { font-size:0.85rem; color:#666; margin:0 0 12px; line-height:1.55; flex:1; }

/* ── Stars ───────────────────────────────────────────────────── */
.ab-cmp-stars {
  display:flex; gap:2px; justify-content:center;
  margin-bottom:14px;
}
.ab-cmp-stars span { font-size:1.15rem; color:#f59e0b; }
.ab-cmp-stars .s-empty { color:#d1d5db; }

/* ── Button ──────────────────────────────────────────────────── */
.ab-cmp-btn {
  display:block; width:100%;
  padding:12px 16px;
  border-radius:8px;
  color:#fff !important;
  font-size:0.95rem; font-weight:800;
  text-decoration:none !important;
  text-align:center;
  transition:filter .18s, transform .14s, box-shadow .18s;
  letter-spacing:0.02em;
  margin-top:auto;
}
.ab-cmp-btn:hover {
  filter:brightness(1.1);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,0.22);
  color:#fff !important;
}

/* ── Clean style (no outer border, no ribbon) ────────────────── */
.ab-cmp-clean .ab-cmp-card {
  padding-top: 24px;
}
.ab-cmp-clean .ab-cmp-img-wrap {
  margin-top: 0;
}