/* =========================================================
   ABB Display Bridge – Frontend CSS (UPDATED)
   Goal:
   - Reuse the old ABB Platform frontend look (cards/top3/single)
   - Prevent CSS conflicts with ABB core plugin (same class names)
   How:
   - Scope ALL “old good look” rules under:
       .abb-bridge-wrap  (preferred)
       .abb-bridge       (compat)
   - Add a careful fallback only when Bridge-specific structure exists
     (so we don't break ABB core layouts).
   ========================================================= */


/* =========================================================
   1) SCOPED (PREFERRED) — applies only inside Bridge output
   ========================================================= */

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

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

.abb-bridge-wrap .abb-wrap h2,
.abb-bridge-wrap .abb-wrap h3,
.abb-bridge-wrap .abb-wrap h4,
.abb-bridge .abb-wrap h2,
.abb-bridge .abb-wrap h3,
.abb-bridge .abb-wrap h4 {
  margin-top: 8px;
}

/* Card */
.abb-bridge-wrap .abb-card,
.abb-bridge .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-bridge-wrap .abb-card,
  .abb-bridge .abb-card{
    grid-template-columns: 1fr;
  }
}

.abb-bridge-wrap .abb-badge,
.abb-bridge .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-bridge-wrap .abb-media,
.abb-bridge .abb-media{
  position: relative; /* FIX: contain .abb-fullclick inside media box */
  width: 140px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abb-bridge-wrap .abb-media img,
.abb-bridge .abb-media img{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* (Core ABB uses .abb-fullclick; Bridge usually doesn't, but safe) */
.abb-bridge-wrap .abb-fullclick,
.abb-bridge .abb-fullclick{
  position: absolute;
  inset: 0;
}

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

/* Title / text:
   Bridge markup uses h3 inside .abb-body, not .abb-title.
   We style both for compatibility. */
.abb-bridge-wrap .abb-title,
.abb-bridge .abb-title{
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
}

.abb-bridge-wrap .abb-title a,
.abb-bridge .abb-title a{
  text-decoration: none;
  color: #1f4ea8;
}

.abb-bridge-wrap .abb-title a:hover,
.abb-bridge .abb-title a:hover{
  text-decoration: underline;
}

/* Bridge card title is <h3> */
.abb-bridge-wrap .abb-card h3,
.abb-bridge .abb-card h3{
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
}

.abb-bridge-wrap .abb-card h3 a,
.abb-bridge .abb-card h3 a{
  text-decoration: none;
  color: #1f4ea8;
}

.abb-bridge-wrap .abb-card h3 a:hover,
.abb-bridge .abb-card h3 a:hover{
  text-decoration: underline;
}

.abb-bridge-wrap .abb-desc,
.abb-bridge .abb-desc{
  color: #4a5568;
  margin: 0 0 12px;
}

/* Bridge description is typically <p> inside card */
.abb-bridge-wrap .abb-card p,
.abb-bridge .abb-card p{
  color: #4a5568;
  margin: 0 0 12px;
}

.abb-bridge-wrap .abb-bestfor,
.abb-bridge .abb-bestfor{
  color: #2d3748;
  margin: 0 0 14px;
}

/* Button:
   Core ABB uses .abb-button
   Bridge uses .abb-btn
   We style both to match the old look. */
.abb-bridge-wrap .abb-button,
.abb-bridge-wrap .abb-btn,
.abb-bridge .abb-button,
.abb-bridge .abb-btn{
  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;
  border: none; /* Bridge .abb-btn originally had border:1px solid #111 */
}

.abb-bridge-wrap .abb-button:hover,
.abb-bridge-wrap .abb-btn:hover,
.abb-bridge .abb-button:hover,
.abb-bridge .abb-btn:hover{
  transform: translateY(1px);
  box-shadow: 0 8px 0 rgba(255,75,75,.28);
  opacity: .95;
}

.abb-bridge-wrap .abb-button:active,
.abb-bridge-wrap .abb-btn:active,
.abb-bridge .abb-button:active,
.abb-bridge .abb-btn:active{
  transform: translateY(2px);
  box-shadow: 0 6px 0 rgba(255,75,75,.28);
}

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

/* Single detail & spacing between blocks */
.abb-bridge-wrap .abb-single,
.abb-bridge .abb-single{
  margin-bottom: 24px; /* ↑ spacing between singles */
}

.abb-bridge-wrap .abb-single-details,
.abb-bridge .abb-single-details{
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  background: #fbfbfc;
}

.abb-bridge-wrap .abb-list,
.abb-bridge .abb-list{
  margin: 10px 0 16px 20px;
}

.abb-bridge-wrap .abb-pros-cons,
.abb-bridge .abb-pros-cons{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width:680px){
  .abb-bridge-wrap .abb-pros-cons,
  .abb-bridge .abb-pros-cons{
    grid-template-columns: 1fr;
  }
}

.abb-bridge-wrap .abb-specs,
.abb-bridge .abb-specs{
  width: 100%;
  border-collapse: collapse;
}

.abb-bridge-wrap .abb-specs th,
.abb-bridge-wrap .abb-specs td,
.abb-bridge .abb-specs th,
.abb-bridge .abb-specs td{
  border: 1px solid #e6e7ea;
  padding: 8px 10px;
  text-align: left;
}

/* Bridge chips use .abb-meta as a div, but single_detail uses .abb-meta as UL.
   Keep UL version as a normal vertical list for Single detail blocks. */
.abb-bridge-wrap ul.abb-meta,
.abb-bridge ul.abb-meta{
  display: block;
  margin: 10px 0 0 20px;
  padding-left: 0;
  list-style: none;
}

.abb-bridge-wrap ul.abb-meta li,
.abb-bridge ul.abb-meta li{
  display: list-item;
  margin: 0 0 8px;
}

/* Keep chips layout only for non-UL Bridge meta blocks */
.abb-bridge-wrap .abb-meta:not(ul),
.abb-bridge .abb-meta:not(ul){
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

.abb-bridge-wrap .abb-chip,
.abb-bridge .abb-chip{
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #e6e7ea;
  border-radius: 999px;
  background: #f7f9fb;
  color: #2d3748;
}

/* Comparison table (A vs B) — included for completeness if Bridge outputs it later */
.abb-bridge-wrap .abb-compare-wrap,
.abb-bridge .abb-compare-wrap{
  margin: 10px 0;
}

.abb-bridge-wrap .abb-compare,
.abb-bridge .abb-compare{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.abb-bridge-wrap .abb-compare-head,
.abb-bridge-wrap .abb-compare-row,
.abb-bridge .abb-compare-head,
.abb-bridge .abb-compare-row{
  border-bottom: 1px solid #e6e7ea;
  padding: 12px 14px;
}

.abb-bridge-wrap .abb-compare-head,
.abb-bridge .abb-compare-head{
  background: #f7f9fb;
  font-weight: 700;
}

.abb-bridge-wrap .abb-compare-label,
.abb-bridge .abb-compare-label{
  background: #fafbfc;
}

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

/* =========================================================
   Bridge scope for A vs B
   ========================================================= */

.abb-bridge-wrap .abb-avsb-product,
.abb-bridge .abb-avsb-product {
  margin: 24px 0 36px;
}

.abb-bridge-wrap .abb-avsb-product-inner,
.abb-bridge .abb-avsb-product-inner {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
}

.abb-bridge-wrap .abb-avsb-product-media,
.abb-bridge .abb-avsb-product-media {
  width: 150px;
  min-width: 150px;
}

.abb-bridge-wrap .abb-avsb-product-media img,
.abb-bridge .abb-avsb-product-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
}

.abb-bridge-wrap .abb-avsb-product-content,
.abb-bridge .abb-avsb-product-content {
  flex: 1;
  min-width: 0;
}

.abb-bridge-wrap .abb-avsb-product-title,
.abb-bridge .abb-avsb-product-title {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.35;
}

.abb-bridge-wrap .abb-avsb-product-title a,
.abb-bridge .abb-avsb-product-title a {
  text-decoration: none;
}

.abb-bridge-wrap .abb-avsb-product-desc,
.abb-bridge .abb-avsb-product-desc {
  margin-bottom: 22px;
}

.abb-bridge-wrap .abb-avsb-product-actions .abb-button,
.abb-bridge .abb-avsb-product-actions .abb-button {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg,#ff6d6d 0%,#ff4b4b 60%,#ff6262 100%);
  color: #fff !important;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 0 rgba(255,75,75,.28);
  transition: transform .06s ease, box-shadow .06s ease, opacity .2s ease;
  border: none;
}

.abb-bridge-wrap .abb-compare-table,
.abb-bridge .abb-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #d9d9d9;
}

.abb-bridge-wrap .abb-compare-table th,
.abb-bridge-wrap .abb-compare-table td,
.abb-bridge .abb-compare-table th,
.abb-bridge .abb-compare-table td {
  border: 1px solid #d9d9d9;
  padding: 18px 16px;
  text-align: left;
}

/* Feature list under each A/B product card */
.abb-bridge-wrap .abb-avsb-feature-list,
.abb-bridge .abb-avsb-feature-list {
  margin: 18px 0 0;
}

.abb-bridge-wrap .abb-avsb-feature-item,
.abb-bridge .abb-avsb-feature-item {
  margin: 0 0 18px;
}

.abb-bridge-wrap .abb-avsb-feature-title,
.abb-bridge .abb-avsb-feature-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
}

.abb-bridge-wrap .abb-avsb-feature-summary,
.abb-bridge .abb-avsb-feature-summary {
  margin: 0 0 8px;
}

.abb-bridge-wrap .abb-avsb-feature-details,
.abb-bridge .abb-avsb-feature-details {
  margin: 0;
}

@media (max-width: 767px) {
  .abb-bridge-wrap .abb-avsb-product-inner,
  .abb-bridge .abb-avsb-product-inner {
    flex-direction: column;
  }

  .abb-bridge-wrap .abb-avsb-product-media,
  .abb-bridge .abb-avsb-product-media {
    width: 120px;
    min-width: 120px;
  }

  .abb-bridge-wrap .abb-compare-table th,
  .abb-bridge-wrap .abb-compare-table td,
  .abb-bridge .abb-compare-table th,
  .abb-bridge .abb-compare-table td {
    padding: 14px 12px;
  }
}

/* =========================================================
   TOP 3 LAYOUT STYLES (Style1 / Style2 / Style3)
   Scoped to Bridge wrappers.
   ========================================================= */

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

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

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

/* STYLE 1 */
.abb-bridge-wrap .abb-top3-style1-item,
.abb-bridge .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-bridge-wrap .abb-top3-style1-ribbon,
.abb-bridge .abb-top3-style1-ribbon{
  background: #16a34a;
  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;
}

.abb-bridge-wrap .abb-top3-style1-media,
.abb-bridge .abb-top3-style1-media{
  margin-bottom: 12px;
}

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

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

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

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

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

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

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

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

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

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

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

/* STYLE 2 */
.abb-bridge-wrap .abb-top3-style2-item,
.abb-bridge .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-bridge-wrap .abb-top3-style2-rank,
.abb-bridge .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-bridge-wrap .abb-top3-style2-label,
.abb-bridge .abb-top3-style2-label{
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f97316;
}

.abb-bridge-wrap .abb-top3-style2-media,
.abb-bridge .abb-top3-style2-media{
  margin-bottom: 12px;
}

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

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

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

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

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

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

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

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

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

.abb-bridge-wrap .abb-top3-style2-btn,
.abb-bridge .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-bridge-wrap .abb-top3-style2-btn:hover,
.abb-bridge .abb-top3-style2-btn:hover{
  opacity: 0.9;
}

/* STYLE 3 */
.abb-bridge-wrap .abb-top3-style3-list,
.abb-bridge .abb-top3-style3-list{
  margin: 0 0 8px;
  padding-left: 1.2em;
}

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

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

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

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

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


/* =========================================================
   2) BACKWARD-COMPAT FALLBACK (UNSCOPED, SAFE)
   Only apply old look when Bridge structure exists:
   - Bridge cards include .abb-body
   This avoids overriding ABB core plugin cards.
   ========================================================= */

/* Only style .abb-card when it's Bridge markup (has .abb-body) */
.abb-card:has(.abb-body){
  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;
}

@media (max-width:680px){
  .abb-card:has(.abb-body){
    grid-template-columns: 1fr;
  }
}

.abb-card:has(.abb-body) .abb-media{
  width: 140px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abb-card:has(.abb-body) .abb-media img{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

@media (max-width:680px){
  .abb-bridge-wrap .abb-media,
  .abb-bridge .abb-media{
    width: 100%;
    height: auto;
    justify-self: center;
  }
  .abb-bridge-wrap .abb-media img,
  .abb-bridge .abb-media img{
    width: 100%;
    height: auto;
  }
}

/* Bridge title inside <h3> */
.abb-card:has(.abb-body) h3{
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
}
.abb-card:has(.abb-body) h3 a{
  text-decoration: none;
  color: #1f4ea8;
}
.abb-card:has(.abb-body) h3 a:hover{
  text-decoration: underline;
}

.abb-card:has(.abb-body) p{
  color: #4a5568;
  margin: 0 0 12px;
}

/* Bridge button */
.abb-card:has(.abb-body) .abb-btn{
  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;
  border: none;
}

.abb-card:has(.abb-body) .abb-btn:hover{
  transform: translateY(1px);
  box-shadow: 0 8px 0 rgba(255,75,75,.28);
  opacity: .95;
}

.abb-card:has(.abb-body) .abb-btn:active{
  transform: translateY(2px);
  box-shadow: 0 6px 0 rgba(255,75,75,.28);
}

/* =========================================================
   3) FALLBACK FOR A vs B PRODUCT BLOCKS
   Use unscoped .abb-avsb-* selectors in case Bridge output
   is rendered outside .abb-bridge-wrap / .abb-bridge.
   These class names are unique enough to be safe.
   ========================================================= */

.abb-avsb-product {
  margin: 24px 0 36px;
}

.abb-avsb-product-inner {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
}

.abb-avsb-product-media {
  width: 150px;
  min-width: 150px;
}

.abb-avsb-product-media a {
  display: block;
}

.abb-avsb-product-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  object-fit: contain;
}

.abb-avsb-product-content {
  flex: 1;
  min-width: 0;
}

.abb-avsb-product-title {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
}

.abb-avsb-product-title a {
  text-decoration: none;
  color: #1f4ea8;
}

.abb-avsb-product-title a:hover {
  text-decoration: underline;
}

.abb-avsb-product-desc {
  color: #4a5568;
  margin: 0 0 22px;
}

.abb-avsb-product-actions .abb-button {
  display: inline-block !important;

  padding: 8px 14px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;

  border-radius: 10px !important;

  background: linear-gradient(180deg,#ff6d6d 0%,#ff4b4b 60%,#ff6262 100%) !important;
  color: #fff !important;

  font-weight: 700 !important;
  text-decoration: none !important;

  box-shadow: 0 5px 0 rgba(255,75,75,.25) !important;

  border: none !important;
}

.abb-avsb-product-actions .abb-button:hover {
  transform: translateY(1px);
  box-shadow: 0 4px 0 rgba(255,75,75,.25);
}

.abb-avsb-product-actions .abb-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(255,75,75,.25);
}

.abb-avsb-feature-list {
  margin: 18px 0 0;
}

.abb-avsb-feature-item {
  margin: 0 0 18px;
}

.abb-avsb-feature-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
}

.abb-avsb-feature-summary {
  margin: 0 0 8px;
}

.abb-avsb-feature-details {
  margin: 0;
}

@media (max-width: 767px) {
  .abb-avsb-product-inner {
    flex-direction: column;
  }

  .abb-avsb-product-media {
    width: 120px;
    min-width: 120px;
  }

  .abb-avsb-product-actions .abb-button {
    width: 100%;
    text-align: center;
  }
}