/* ═══════════════════════════════════════════════════════════════
   AffiliBox – Frontend Styles v10 (large standout product image)
   Bold, premium image treatment
   ═══════════════════════════════════════════════════════════════ */

.affilibox *, .affilibox *::before, .affilibox *::after { box-sizing: border-box; }

/* ── Container wrapper ─────────────────────────────────────────── */
.affilibox-wrap { margin: 28px auto; }

.affilibox {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  border: 2px solid #e8e8e8;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE COLUMN — Large, bold, edge-to-edge (product is the star)
   ═══════════════════════════════════════════════════════════════ */
.affilibox-img-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  /* Clean white panel — no boxed-in grey container */
  background: #ffffff;
  padding: 14px;
  min-height: 230px;
}

/* The product image itself — fills the column, dominates the layout */
.affilibox-img-col img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  /* Soft floating shadow so the product lifts off the white */
  filter:
    drop-shadow(0 16px 32px rgba(0,0,0,0.14))
    drop-shadow(0 4px 10px rgba(0,0,0,0.08));
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.35s ease;
  transform-origin: center center;
}

/* Hover: product gently scales up */
.affilibox-img-col img:hover {
  transform: scale(1.05);
  filter:
    drop-shadow(0 24px 44px rgba(0,0,0,0.18))
    drop-shadow(0 8px 16px rgba(0,0,0,0.10));
  cursor: zoom-in;
}

/* Accent stripe — picks up the box border/brand colour */
.ab-img-accent {
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 5px;
  border-radius: 0 5px 5px 0;
  z-index: 2;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON
   ═══════════════════════════════════════════════════════════════ */
.affilibox-btn {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border-radius: 9px;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none !important;
  text-align: center;
  transition: filter 0.18s, transform 0.14s, box-shadow 0.18s;
  border: none;
  cursor: pointer;
  letter-spacing: 0.03em;
  margin-top: 16px;
  line-height: 1.3;
}
.affilibox-btn:hover {
  filter: brightness(1.10);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  color: #fff !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   TEXT ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.affilibox-title { font-size:1.25rem; font-weight:800; color:#111; margin:0 0 10px; line-height:1.3; }
.affilibox-price { font-size:1.5rem; font-weight:900; color:#111; margin:10px 0 12px; letter-spacing:-0.01em; }
.affilibox-desc  { font-size:0.92rem; color:#555; margin:0 0 12px; line-height:1.65; }

/* ═══════════════════════════════════════════════════════════════
   CHECKLISTS
   ═══════════════════════════════════════════════════════════════ */
.affilibox-checklist { list-style:none; padding:0; margin:10px 0 4px; }
.affilibox-checklist li {
  display:flex; align-items:flex-start; gap:8px; padding:4px 0;
  font-size:0.88rem; font-weight:700; color:#222;
  text-transform:uppercase; letter-spacing:0.04em;
}
.affilibox-checklist li::before {
  content:"✓"; color:#27ae60; font-weight:900; font-size:1rem; flex-shrink:0; margin-top:1px;
}

.affilibox-pro-list, .affilibox-con-list { list-style:none; padding:0; margin:6px 0 12px; }
.affilibox-pro-list li, .affilibox-con-list li {
  display:flex; align-items:flex-start; gap:8px; padding:3px 0; font-size:0.9rem; color:#333;
}
.affilibox-pro-list li::before { content:"✔"; color:#27ae60; font-weight:900; flex-shrink:0; }
.affilibox-con-list li::before { content:"✘"; color:#e74c3c; font-weight:900; flex-shrink:0; }
.affilibox-list-label { font-size:0.78rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; margin:10px 0 4px; }
.affilibox-list-label.pros { color:#27ae60; }
.affilibox-list-label.cons { color:#e74c3c; }

/* ═══════════════════════════════════════════════════════════════
   1. SIMPLE BOX
   ═══════════════════════════════════════════════════════════════ */
.ab-simple { display:flex; align-items:stretch; }
.ab-simple .ab-content {
  flex:1; padding:24px 28px 24px 20px;
  display:flex; flex-direction:column; justify-content:center;
}

/* ═══════════════════════════════════════════════════════════════
   2. PROS / CONS BOX
   ═══════════════════════════════════════════════════════════════ */
.ab-pros { display:flex; flex-direction:column; }
.ab-pros .ab-badge-bar {
  padding:9px 22px; font-size:0.8rem; font-weight:800;
  letter-spacing:0.09em; text-transform:uppercase; color:#fff;
}
.ab-pros .ab-inner { display:flex; align-items:stretch; flex:1; }
.ab-pros .ab-content { flex:1; padding:22px 22px 0 12px; }
.ab-pros .ab-pros-cons-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin-top:8px; }
.ab-pros .ab-footer { padding:0 22px 22px; }

/* ═══════════════════════════════════════════════════════════════
   3. FEATURE BOX
   ═══════════════════════════════════════════════════════════════ */
.ab-feature { border:none !important; }
.ab-feature .ab-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 24px; color:#fff;
}
.ab-feature .ab-header-title { font-size:1.05rem; font-weight:800; }
.ab-feature .ab-header-price { font-size:1.1rem; font-weight:800; opacity:0.95; }
.ab-feature .ab-inner { display:flex; align-items:stretch; }
.ab-feature .ab-img-col { flex-direction:column; padding-bottom:16px; }
.ab-feature .ab-msrp { font-size:0.82rem; color:#888; margin-top:10px; position:relative; z-index:1; }
.ab-feature .ab-content { flex:1; padding:22px 22px 0 12px; }
.ab-feature .ab-features-label {
  font-size:0.75rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.1em; color:#999; margin-bottom:8px;
}
.ab-feature .ab-footer { padding:0 22px 22px; }

/* ═══════════════════════════════════════════════════════════════
   4. TOP PICK BOX
   ═══════════════════════════════════════════════════════════════ */
.ab-top { position:relative; }
.ab-top .ab-badge-tab {
  display:inline-block; padding:7px 20px;
  font-size:0.75rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.1em;
  color:#fff; border-radius:0 0 8px 0;
}
.ab-top .ab-inner { display:flex; align-items:stretch; }
.ab-top .ab-content { flex:1; padding:16px 24px 16px 12px; display:flex; flex-direction:column; justify-content:center; }
.ab-top .ab-footer { padding:0 24px 22px; }

/* ═══════════════════════════════════════════════════════════════
   5. COMPARISON TABLE
   ═══════════════════════════════════════════════════════════════ */
.ab-compare { border-radius:14px; overflow:hidden; border:none !important; box-shadow:0 8px 40px rgba(0,0,0,0.12); }
.ab-compare table { width:100%; border-collapse:collapse; }
.ab-compare thead th { padding:15px 18px; text-align:left; font-size:0.88rem; font-weight:700; color:#fff; }
.ab-compare tbody tr { background:#fff; }
.ab-compare tbody tr:nth-child(odd) { background:#f8f9fc; }
.ab-compare tbody td { padding:18px; vertical-align:middle; border-bottom:1px solid #eee; font-size:0.9rem; }
.ab-compare .ab-compare-img { max-width:100px; max-height:100px; object-fit:contain; display:block; margin-bottom:8px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.12)); }
.ab-compare .ab-compare-name { font-weight:800; font-size:0.95rem; color:#111; margin-bottom:4px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:580px) {
  .ab-simple,
  .ab-pros .ab-inner,
  .ab-feature .ab-inner,
  .ab-top .ab-inner { flex-direction:column; }

  .affilibox-img-col { width:100% !important; min-height:200px; }
  .ab-simple .ab-content { padding:16px 18px 20px; }
  .ab-pros .ab-content { padding:14px 18px 0; }
  .ab-feature .ab-content { padding:14px 18px 0; }
  .ab-top .ab-content { padding:14px 18px; }
  .ab-pros .ab-footer,
  .ab-feature .ab-footer,
  .ab-top .ab-footer { padding:0 18px 18px; }
  .ab-pros .ab-pros-cons-grid { grid-template-columns:1fr; }

  .ab-compare table, .ab-compare thead, .ab-compare tbody,
  .ab-compare th, .ab-compare td, .ab-compare tr { display:block; }
  .ab-compare thead tr { display:none; }
}