
/* ============================================================
   AutoMart Vehicle Detail Similar Cards V26.1
   Reuses the existing approved premium vehicle-card markup.
   This stylesheet only lays out the Similar Vehicles section.
   ============================================================ */

.am-similar-v26{
  width:100%;
  padding:34px 0 54px;
  background:#fff;
  box-sizing:border-box;
}

.am-similar-v26__inner{
  width:min(1280px,calc(100% - 64px));
  margin:0 auto;
}

.am-similar-v26__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:0 0 20px;
}

.am-similar-v26__eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 7px;
  color:#079455;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.am-similar-v26__eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  border-radius:999px;
  background:#079455;
}

.am-similar-v26__title{
  margin:0;
  color:#101828;
  font-size:30px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.035em;
}

.am-similar-v26__subtitle{
  margin:7px 0 0;
  color:#667085;
  font-size:14px;
  line-height:1.5;
}

.am-similar-v26__all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border:1px solid #d7e7df;
  border-radius:999px;
  background:#f8fffb;
  color:#087443;
  font-size:13px;
  line-height:1;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.am-similar-v26__all:hover{
  transform:translateY(-1px);
  border-color:#9fd7bb;
  box-shadow:0 8px 22px rgba(16,96,62,.09);
}

.am-similar-v26__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

/* Keep the approved existing card component intact. */
.am-similar-v26__grid > *{
  min-width:0;
}

.am-similar-v26__grid .premium-auto-card{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:100%;
  margin:0!important;
  box-sizing:border-box;
}

/* Loading placeholders */
.am-similar-v26__skeleton{
  min-height:470px;
  border:1px solid #e6ece9;
  border-radius:18px;
  background:
    linear-gradient(90deg,rgba(245,248,246,.8) 25%,rgba(235,242,238,.95) 37%,rgba(245,248,246,.8) 63%);
  background-size:400% 100%;
  animation:amSimilarPulse 1.35s ease infinite;
}

@keyframes amSimilarPulse{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}

@media(max-width:1050px){
  .am-similar-v26__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .am-similar-v26__grid > :nth-child(3){
    display:none;
  }
}

@media(max-width:767px){
  .am-similar-v26{
    padding:26px 0 38px;
  }

  .am-similar-v26__inner{
    width:calc(100% - 22px);
  }

  .am-similar-v26__head{
    align-items:flex-start;
    margin-bottom:16px;
  }

  .am-similar-v26__title{
    font-size:25px;
  }

  .am-similar-v26__subtitle{
    font-size:13px;
  }

  .am-similar-v26__all{
    min-height:38px;
    padding:0 13px;
    font-size:12px;
  }

  /* Mobile: premium full-size cards with horizontal swipe. */
  .am-similar-v26__grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    padding:2px 1px 10px;
    scrollbar-width:none;
  }

  .am-similar-v26__grid::-webkit-scrollbar{
    display:none;
  }

  .am-similar-v26__grid > *{
    display:block!important;
    flex:0 0 min(88vw,390px);
    scroll-snap-align:start;
  }

  .am-similar-v26__skeleton{
    min-height:450px;
  }
}
