/* Container */
.abb-wrap { display:grid; gap:32px; } /* ↑ spacing between ABB blocks */

/* Add vertical rhythm when abb blocks are adjacent to headings/text */
.abb-wrap + .abb-wrap { margin-top: 24px; }
.abb-wrap h2, .abb-wrap h3, .abb-wrap h4 { margin-top: 8px; }

/* Card */
.abb-card {
  position:relative; display:grid; grid-template-columns:140px 1fr; gap:20px; align-items:center;
  padding:24px; border-radius:16px; background:#fff;
  box-shadow:0 2px 0 rgba(20,20,20,.03), 0 0 0 1px rgba(30,30,30,.06) inset;
  margin-bottom:12px; /* ↑ spacing within table lists */
}
@media (max-width:680px){
  .abb-card{ grid-template-columns:1fr; }
}

.abb-badge {
  position:absolute; left:16px; top:-12px; background:#2f7df6; color:#fff; font-weight:700;
  padding:8px 12px; border-radius:8px; box-shadow:0 6px 0 rgba(47,125,246,.25); font-size:13px; line-height:1;
}

.abb-media{
  width:140px; height:140px; border-radius:12px; overflow:hidden; background:#f4f6f8;
  display:flex; align-items:center; justify-content:center;
}
.abb-media img{ max-width:100%; max-height:100%; display:block; }
.abb-fullclick{ position:absolute; inset:0; }

@media (max-width:680px){
  .abb-media{ width:100%; height:auto; }
  .abb-media img{ width:100%; height:auto; }
}

.abb-title{ font-size:22px; line-height:1.25; margin:0 0 8px; font-weight:800; }
.abb-title a{ text-decoration:none; color:#1f4ea8; }
.abb-title a:hover{ text-decoration:underline; }

.abb-desc{ color:#4a5568; margin:0 0 12px; }
.abb-bestfor{ color:#2d3748; margin:0 0 14px; }

.abb-button{
  display:inline-block; padding:14px 18px; border-radius:14px;
  background:linear-gradient(180deg,#ff6d6d 0%,#ff4b4b 60%,#ff6262 100%);
  color:#fff!important; font-weight:800; text-decoration:none; box-shadow:0 10px 0 rgba(255,75,75,.28);
  transition:transform .06s ease, box-shadow .06s ease, opacity .2s ease;
}
.abb-button:hover{ transform:translateY(1px); box-shadow:0 8px 0 rgba(255,75,75,.28); opacity:.95; }
.abb-button:active{ transform:translateY(2px); box-shadow:0 6px 0 rgba(255,75,75,.28); }

@media (max-width:680px){
  .abb-button{ width:100%; text-align:center; }
}

/* Single detail & spacing between blocks */
.abb-single { margin-bottom:24px; } /* ↑ spacing between singles */
.abb-single-details{ margin-top:14px; padding:18px; border:1px solid #e6e7ea; border-radius:12px; background:#fbfbfc; }
.abb-list{ margin:10px 0 16px 20px; }
.abb-pros-cons{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:680px){ .abb-pros-cons{ grid-template-columns:1fr; } }
.abb-specs{ width:100%; border-collapse:collapse; }
.abb-specs th,.abb-specs td{ border:1px solid #e6e7ea; padding:8px 10px; text-align:left; }
.abb-meta{ margin:10px 0 0 20px; }

/* Comparison table (A vs B) */
.abb-compare-wrap { margin:10px 0; }
.abb-compare {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:0;
  border:1px solid #e6e7ea;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.abb-compare-head, .abb-compare-row {
  border-bottom:1px solid #e6e7ea;
  padding:12px 14px;
}
.abb-compare-head { background:#f7f9fb; font-weight:700; }
.abb-compare-label { background:#fafbfc; }

@media (max-width:680px){
  .abb-compare {
    grid-template-columns: 1fr;
  }
  .abb-compare-head { display:none; }
  .abb-compare-label { border-top:1px solid #e6e7ea; }
}

/* =========================================================
   TOP 3 LAYOUT STYLES (Style1 / Style2 / Style3)
   These ONLY target the Top 3 block via specific classes.
   They DO NOT override .abb-card / .abb-media / .abb-badge.
   ========================================================= */

/* Common wrapper for Top 3 */
.abb-top3 {
  margin-bottom: 24px;
}

/* Shared grid used by Style 1 and Style 2 */
.abb-top3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.abb-top3-col {
  display: flex;
  flex-direction: column;
}

/* ========================================================
   STYLE 1  (Green ribbon bar, big cards)
   Matching your Style 1 screenshot.
======================================================== */
.abb-top3-style1-item {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  padding: 24px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.abb-top3-style1-ribbon {
  background: #16a34a; /* green bar */
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  padding: 10px 24px;
  border-radius: 0 0 8px 8px;
  margin: -24px -20px 20px;
  text-align: center;
}

/* image for style1 (medium size) */
.abb-top3-style1-media {
  margin-bottom: 12px;
}

.abb-top3-style1-media img {
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.abb-top3-style1-title {
  margin: 8px 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.abb-top3-style1-title a {
  text-decoration: none;
}

.abb-top3-style1-title a:hover {
  text-decoration: underline;
}

.abb-top3-style1-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  text-align: left;
}

.abb-top3-style1-features li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.abb-top3-style1-features li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
}

.abb-top3-style1-best {
  margin: 8px 0 18px;
}

.abb-top3-style1-footer {
  margin-top: auto;
}

.abb-top3-style1-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #f97316; /* orange button */
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.abb-top3-style1-btn:hover {
  opacity: 0.9;
}

/* ========================================================
   STYLE 2  (Number badge, centered label)
   Matching your Style 2 screenshot.
======================================================== */
.abb-top3-style2-item {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  padding: 24px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.abb-top3-style2-rank {
  position: absolute;
  top: 14px;
  left: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abb-top3-style2-label {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f97316;
}

/* image for style2 (medium) */
.abb-top3-style2-media {
  margin-bottom: 12px;
}

.abb-top3-style2-media img {
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.abb-top3-style2-title {
  margin: 8px 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.abb-top3-style2-title a {
  text-decoration: none;
}

.abb-top3-style2-title a:hover {
  text-decoration: underline;
}

.abb-top3-style2-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  text-align: left;
}

.abb-top3-style2-features li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.abb-top3-style2-features li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
}

.abb-top3-style2-best {
  margin: 8px 0 18px;
}

.abb-top3-style2-footer {
  margin-top: auto;
}

.abb-top3-style2-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  background: #111827;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.abb-top3-style2-btn:hover {
  opacity: 0.9;
}

/* ========================================================
   STYLE 3  (Simple list: Product name + Best for)
   Matching your Style 3 screenshot.
======================================================== */
.abb-top3-style3-list {
  margin: 0 0 8px;
  padding-left: 1.2em;
}

.abb-top3-style3-item {
  margin-bottom: 6px;
}

.abb-top3-style3-item a {
  font-weight: 600;
  text-decoration: underline;
}

.abb-top3-style3-tag {
  color: #555;
  font-weight: 400;
}

/* Responsive tweaks for Top 3 grid */
@media (max-width: 768px) {
  .abb-top3-grid {
    grid-template-columns: 1fr;
  }

  .abb-top3-style1-item,
  .abb-top3-style2-item {
    padding: 20px 16px 18px;
  }
}