/* ═══════════════════════════════════════════════════════════════
   AffiliBox – Featured Product Grid / Table Styles
   6 distinct layouts matching the AffiliNinja reference designs
   ═══════════════════════════════════════════════════════════════ */

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

/* ── Shared grid ─────────────────────────────────────────────── */
.ab-fg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
@media (max-width: 640px) {
  .ab-fg-grid { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .ab-fg-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Shared card ─────────────────────────────────────────────── */
.ab-fg-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  position: relative;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ab-fg-card:hover { transform: translateY(-3px); }

/* Badge ribbon at top */
.ab-fg-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 14px;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}

/* Product image */
.ab-fg-img-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 24px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-fg-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.14));
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ab-fg-card:hover .ab-fg-img-wrap img { transform: scale(1.08) translateY(-4px); }

/* Text */
.ab-fg-name  { font-size: 0.92rem; font-weight: 800; color: #111; margin: 8px 0 4px; line-height: 1.3; }
.ab-fg-price { font-size: 1rem; font-weight: 900; color: #111; margin: 4px 0 6px; letter-spacing: -0.01em; }
.ab-fg-desc  { font-size: 0.82rem; color: #666; margin: 0 0 8px; line-height: 1.5; }

/* Stars */
.ab-fg-stars {
  color: #f59e0b;
  font-size: 0.85rem;
  margin: 4px 0 10px;
  letter-spacing: 1px;
  display: flex;
  gap: 1px;
  justify-content: center;
  align-items: center;
}
.ab-fg-stars .star-empty { color: #d1d5db; }

/* Button */
.ab-fg-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border-radius: 7px;
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none !important;
  text-align: center;
  transition: filter 0.18s, transform 0.14s, box-shadow 0.18s;
  margin-top: auto;
  letter-spacing: 0.02em;
}
.ab-fg-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   STYLE 1 — CLEAN GRID (no outer border, subtle dividers)
   ══════════════════════════════════════════════════════════════ */
.ab-fg-clean .ab-fg-card {
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-radius: 0;
}
.ab-fg-clean .ab-fg-card:first-child { border-radius: 12px 0 0 12px; }
.ab-fg-clean .ab-fg-card:last-child  { border-radius: 0 12px 12px 0; }
@media(max-width:640px){
  .ab-fg-clean .ab-fg-card:first-child { border-radius: 12px 12px 0 0; }
  .ab-fg-clean .ab-fg-card:last-child  { border-radius: 0 0 12px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   STYLE 2 — BOXED (outer border around whole grid)
   ══════════════════════════════════════════════════════════════ */
.ab-fg-boxed {
  border: 3px solid;
  border-radius: 14px;
  overflow: hidden;
}
.ab-fg-boxed .ab-fg-card {
  border-right: 1px solid rgba(0,0,0,0.08);
}
.ab-fg-boxed .ab-fg-card:last-child { border-right: none; }

/* ══════════════════════════════════════════════════════════════
   STYLE 3 — CARDS (individual rounded cards, spaced apart)
   ══════════════════════════════════════════════════════════════ */
.ab-fg-cards {
  gap: 16px;
  border: none !important;
}
.ab-fg-cards .ab-fg-card {
  border-radius: 14px;
  border: 2px solid #e8e8e8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.ab-fg-cards .ab-fg-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.14); }

/* ══════════════════════════════════════════════════════════════
   STYLE 4 — SHADOWED CARDS (deeper shadow, no border)
   ══════════════════════════════════════════════════════════════ */
.ab-fg-shadow {
  gap: 20px;
}
.ab-fg-shadow .ab-fg-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
}
.ab-fg-shadow .ab-fg-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.18); }

/* ══════════════════════════════════════════════════════════════
   STYLE 5 — COLOURED HEADER CARDS
   Each card gets a coloured top strip
   ══════════════════════════════════════════════════════════════ */
.ab-fg-colored .ab-fg-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.ab-fg-colored .ab-fg-card-strip {
  height: 6px;
  width: 100%;
}
.ab-fg-colored.ab-fg-cards { gap: 14px; }

/* ══════════════════════════════════════════════════════════════
   STYLE 6 — MINIMAL (no borders, just spaced content)
   ══════════════════════════════════════════════════════════════ */
.ab-fg-minimal {
  gap: 0;
}
.ab-fg-minimal .ab-fg-card {
  border: none;
  box-shadow: none;
  border-right: 2px dashed #e5e7eb;
  padding: 24px 20px;
}
.ab-fg-minimal .ab-fg-card:last-child { border-right: none; }
.ab-fg-minimal .ab-fg-name { font-size: 1rem; }
.ab-fg-minimal .ab-fg-price { font-size: 1.1rem; color: #111; }

/* ── Grid wrapper outer box for boxed style ─────────────────── */
.ab-fg-outer {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}