/* mobilsale24.de — Fahrzeugdetailseite (VIP) */

.vip{padding-top:var(--sp-4);padding-bottom:var(--sp-10)}
.breadcrumb{font-size:var(--fs-sm);color:var(--color-text-muted);margin-bottom:var(--sp-4);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.breadcrumb a{color:var(--color-text-secondary);transition:color var(--dur) var(--ease)}
.breadcrumb a:hover{color:var(--color-primary)}
/* minmax(0,…) statt 1fr: sonst kann die linke Spalte nicht unter ihre
   Min-Content-Breite schrumpfen und das Raster überläuft den Container.
   Die Seitenleiste darf zwischen 300px und 380px mitatmen. */
.vip__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:var(--sp-6);align-items:start;margin-bottom:var(--sp-8)}
/* Grid-/Flex-Kinder brauchen min-width:0, damit breite Inhalte
   (Tabellen, lange Wörter) sie nicht aufblähen. */
.vip__main{min-width:0}
.vip__title{font-size:var(--fs-2xl);letter-spacing:var(--ls-tight);margin-bottom:var(--sp-4);line-height:var(--lh-snug);overflow-wrap:anywhere}

/* Galerie */
.gallery__main{position:relative;aspect-ratio:4/3;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center}
.gallery__main img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform var(--dur-slow) var(--ease)}
.gallery__noimg{font-size:3rem;color:var(--color-text-muted)}
.gallery__counter{position:absolute;right:12px;bottom:12px;background:rgba(16,20,40,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:4px 12px;border-radius:var(--radius-pill)}
.gallery__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--color-text);font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:background var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
.gallery__nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gallery__nav--prev{left:12px}.gallery__nav--next{right:12px}
.gallery__thumbs{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);overflow-x:auto;padding-bottom:4px}
.gallery__thumb{flex:none;width:96px;height:72px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent}
.gallery__thumb.is-active{border-color:var(--color-primary)}
.gallery__thumb img{width:100%;height:100%;object-fit:cover}

/* Eckdaten */
.vip__eckdaten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-1);margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.eckdaten__item{display:flex;flex-direction:column;gap:4px;padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;position:relative}
.eckdaten__item:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:34px;background:var(--color-divider)}
.eckdaten__label{font-size:var(--fs-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:5px}
.eckdaten__value{font-weight:var(--fw-bold);font-size:var(--fs-md);letter-spacing:var(--ls-tight);overflow-wrap:anywhere}
/* Labels dürfen umbrechen, sonst schieben lange Begriffe die Spalte auf */
.eckdaten__label{min-width:0}
@media (max-width:1024px){.eckdaten__item:nth-child(3)::after{display:none}}
@media (max-width:560px){.eckdaten__item:nth-child(odd)::after{display:none}}

.vip__section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--sp-6);margin-bottom:var(--sp-6)}
.vip__main .vip__section:last-child{margin-bottom:0}
.vip__section h2{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--color-divider)}
/* .data-table / .data-table--kv → components.css */
.vip__feature-group{font-size:var(--fs-sm);color:var(--color-text-muted);margin:var(--sp-3) 0 var(--sp-1)}
.feature-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:var(--fs-sm)}
.feature-list li{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.feature-list li svg{color:var(--price-very-good);flex:none}
/* Importierte Beschreibungen enthalten oft sehr lange URLs ohne Leerzeichen */
.vip__desc{line-height:var(--lh-relaxed);color:var(--color-text-secondary);overflow-wrap:anywhere}

/* Sidebar */
.vip__sidebar{position:sticky;top:calc(var(--header-h) + var(--sp-4));display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.vip__price-box{padding:var(--sp-5);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.vip__price-box::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-brand-400))}
.vip__price{font-size:var(--fs-3xl);font-weight:var(--fw-bold);color:var(--color-text);letter-spacing:var(--ls-tighter);line-height:1.1;margin-bottom:var(--sp-4)}
.vip__price-note{font-size:var(--fs-xs);color:var(--color-text-muted);margin-bottom:var(--sp-4);margin-top:4px}
.vip__price-rating{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
/* .price-rating → components.css */
.vip__price-avg{font-size:var(--fs-xs);color:var(--color-text-muted)}
.price-scale{margin-bottom:var(--sp-4)}
.price-scale__bar{position:relative;height:8px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--price-very-good),var(--price-good),var(--price-fair),var(--price-increased),var(--price-high))}
.price-scale__marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--color-text);transform:translate(-50%,-50%);box-shadow:var(--shadow-sm)}
.price-scale__ends{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--color-text-muted);margin-top:4px}
.financing{background:var(--color-surface-2);border-radius:var(--radius-md);padding:var(--sp-4);margin-bottom:var(--sp-4)}
.financing__rate{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-primary);margin-bottom:var(--sp-2)}
.financing input[type=range]{width:100%;margin:var(--sp-1) 0 var(--sp-3)}
.vip__leasing{background:var(--color-info-bg);border-radius:var(--radius-md);padding:var(--sp-4);margin-bottom:var(--sp-4)}
.vip__leasing-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.vip__leasing-type{font-size:var(--fs-xs);color:var(--color-text-muted)}
.vip__leasing-rate{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-info);margin-bottom:var(--sp-2)}
.vip__leasing-table{width:100%;font-size:var(--fs-sm)}
.vip__leasing-table th{text-align:left;color:var(--color-text-muted);font-weight:var(--fw-regular);padding:2px 0}
.vip__leasing-table td{text-align:right;font-weight:var(--fw-medium)}
.vip__actions{display:flex;flex-direction:column;gap:6px}
.vip__action-icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vip__action-icons--sub{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2px}
.vip__action-icons .btn{
  height:38px;
  padding:0 4px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  gap:5px;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text-secondary);
  transition:all var(--dur) var(--ease);
  min-width:0;
  overflow:hidden;
  justify-content:center;
}
.vip__action-icons .btn:hover{
  border-color:var(--color-brand-300);
  background:var(--color-surface-2);
  color:var(--color-primary);
  transform:translateY(-1px);
}
.vip__action-icons .btn svg{
  flex:none;
  width:16px;
  height:16px;
}
.vip__action-icons .btn span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vip__action-icons .btn.is-active{
  background:var(--color-primary-soft);
  color:var(--color-primary);
  border-color:var(--color-primary);
}

/* Rich Share Box */
.vip__share-box{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--sp-4);margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3);position:relative;overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.vip__share-box:hover{border-color:var(--color-brand-300)}
.vip__share-head{display:flex;flex-direction:column;gap:2px}
.vip__share-title{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--color-text)}
.vip__share-title svg{color:var(--color-primary)}
.vip__share-sub{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:1.4}
.vip__share-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
@media (max-width:480px){.vip__share-grid{grid-template-columns:repeat(3,1fr)}}
.vip__share-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 2px;border-radius:var(--radius-md);font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);text-decoration:none;cursor:pointer;transition:transform var(--dur-fast) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);min-width:0}
.vip__share-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.vip__share-btn svg{flex:none;transition:transform var(--dur-fast) var(--ease)}
.vip__share-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.vip__share-btn:hover svg{transform:scale(1.15)}
.vip__share-btn--whatsapp:hover{border-color:#25D366;color:#25D366;background:rgba(37,211,102,.08)}
.vip__share-btn--telegram:hover{border-color:#229ED9;color:#229ED9;background:rgba(34,158,217,.08)}
.vip__share-btn--facebook:hover{border-color:#1877F2;color:#1877F2;background:rgba(24,119,242,.08)}
.vip__share-btn--x:hover{border-color:var(--color-text);color:var(--color-text);background:rgba(0,0,0,.06)}
.vip__share-btn--email:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-soft)}
.vip__share-copybar{display:flex;align-items:center;gap:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:3px 3px 3px 10px;transition:border-color var(--dur) var(--ease);min-width:0}
.vip__share-copybar:focus-within{border-color:var(--color-primary)}
.vip__share-input{flex:1;min-width:0;background:transparent;border:none;font-size:var(--fs-xs);color:var(--color-text-secondary);outline:none;text-overflow:ellipsis;white-space:nowrap;font-family:inherit}
.vip__share-copybtn{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);padding:6px 12px;white-space:nowrap;transition:all var(--dur) var(--ease)}
.vip__share-copybtn.is-copied{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
/* ==========================================================================
   VIP: Händler / Verkäufer Showcase Card
   ========================================================================== */
.vip__seller{
  padding:var(--sp-5);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  position:relative;
}

/* Header: Avatar + Meta */
.vip-seller__header{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}
.vip-seller__avatar{
  width:56px;
  height:56px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  flex:none;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-xs);
}
.vip-seller__logo{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
}
.vip-seller__initial{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  color:var(--color-primary);
  background:linear-gradient(135deg, var(--color-primary-soft), var(--color-surface-2));
}
.vip-seller__meta{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.vip-seller__badge-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.vip-seller__badge-row .badge{
  font-size:var(--fs-2xs);
  padding:2px 7px;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.vip-seller__name{
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--color-text);
  margin:0;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vip-seller__name-link{
  color:inherit;
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.vip-seller__name-link:hover{
  color:var(--color-primary);
}
.vip-seller__rating{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
}
.vip-seller__stars{
  color:#f59e0b;
}
.vip-seller__rating-count{
  color:var(--color-text-muted);
  font-weight:var(--fw-normal);
}

/* Info List */
.vip-seller__info-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-3) 0;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.vip-seller__info-item{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--color-text);
  min-width:0;
}
.vip-seller__info-icon{
  flex:none;
  width:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--color-primary);
}
.vip-seller__info-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vip-seller__info-link{
  color:var(--color-text);
  text-decoration:none;
  font-weight:var(--fw-medium);
  transition:color var(--dur) var(--ease);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vip-seller__info-link:hover{
  color:var(--color-primary);
}
.vip-seller__info-link--ext{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--color-primary);
}

/* Showcase CTA Box: Tüm İlanlar / Envanter Yönlendirme */
.vip-seller__cta-box{
  background:linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(37,99,235,0.02) 100%);
  border:1px solid rgba(37,99,235,0.18);
  border-radius:var(--radius-lg);
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  transition:all var(--dur) var(--ease);
}
.vip-seller__cta-box:hover{
  border-color:var(--color-primary);
  box-shadow:0 4px 14px rgba(37,99,235,0.12);
  transform:translateY(-1px);
}
.vip-seller__cta-head{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}
.vip-seller__cta-icon-wrap{
  width:40px;
  height:40px;
  border-radius:var(--radius-md);
  background:var(--color-primary);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  box-shadow:0 2px 8px rgba(37,99,235,0.25);
}
.vip-seller__cta-texts{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.vip-seller__cta-title{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--color-text);
  line-height:1.2;
}
.vip-seller__cta-count{
  font-size:var(--fs-xs);
  color:var(--color-text-muted);
}
.vip-seller__cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:var(--fw-semibold);
  box-shadow:0 2px 6px rgba(37,99,235,0.2);
  transition:all var(--dur) var(--ease);
}
.vip-seller__cta-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,0.3);
}

/* Öffnungszeiten Dropdown / Accordion */
.vip-seller__hours-details{
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  overflow:hidden;
}
.vip-seller__hours-summary{
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  color:var(--color-text-secondary);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
  list-style:none;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.vip-seller__hours-summary::-webkit-details-marker{display:none}
.vip-seller__hours-summary:hover{
  color:var(--color-text);
  background:var(--color-surface);
}
.vip-seller__hours-summary-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.vip-seller__chevron{
  transition:transform var(--dur) var(--ease);
}
.vip-seller__hours-details[open] .vip-seller__chevron{
  transform:rotate(180deg);
}
.vip-seller__hours-details .vip__hours{
  padding:var(--sp-2) var(--sp-3) var(--sp-3);
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
}
.vip__hours-row{
  display:flex;
  justify-content:space-between;
  padding:3px 0;
  font-size:var(--fs-xs);
  color:var(--color-text-secondary);
}
.vip__hours-row span:first-child{
  font-weight:var(--fw-medium);
  color:var(--color-text);
}
.financing__note{margin-top:var(--sp-2);font-size:var(--fs-2xs);line-height:1.5;color:var(--color-text-muted)}
/* .link → components.css */

/* Modal */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--sp-4)}
.modal[hidden]{display:none}
/* Hintergrund nicht mitscrollen, solange ein Modal offen ist */
body.has-modal{overflow:hidden}
.modal__overlay{position:absolute;inset:0;background:var(--overlay)}
.modal__box{position:relative;width:100%;max-width:460px;padding:var(--sp-6);z-index:1;max-height:90vh;overflow:auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);animation:modal-in var(--dur) var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal__box h2{letter-spacing:var(--ls-tight);margin-bottom:var(--sp-4)}
.modal__close{position:absolute;right:12px;top:12px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-pill);font-size:22px;color:var(--color-text-muted);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.modal__close:hover{background:var(--color-surface-2);color:var(--color-text)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}
.lightbox__close{position:absolute;right:20px;top:20px;color:#fff;font-size:36px}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:48px;padding:0 20px}
.lightbox__nav--prev{left:0}.lightbox__nav--next{right:0}

@media (max-width:1024px){
  .vip__layout{grid-template-columns:minmax(0,1fr)}
  .vip__sidebar{position:static}
  .vip__eckdaten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .vip__eckdaten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-list{grid-template-columns:minmax(0,1fr)}
}

/* Fahrzeugzustand / Fahrzeug-Check */
.vehicle-check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.vehicle-check__item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--color-surface-2);border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:var(--fw-medium);min-width:0;overflow-wrap:anywhere}
.vehicle-check__icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;border-radius:var(--radius-pill);background:var(--price-very-good);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.vehicle-check__item.is-no{color:var(--color-text-muted)}
.vehicle-check__item.is-no .vehicle-check__icon{background:var(--color-border-strong)}
.vehicle-check__item.is-warn .vehicle-check__icon{background:var(--price-high)}
@media (max-width:560px){.vehicle-check{grid-template-columns:1fr}}

/* Öffnungszeiten */
.vip__hours{margin:var(--sp-3) 0}
.vip__hours h4{font-size:var(--fs-sm);margin-bottom:var(--sp-2)}
.vip__hours-row{display:flex;justify-content:space-between;font-size:var(--fs-sm);padding:3px 0;border-bottom:1px solid var(--color-divider);color:var(--color-text-secondary)}
.vip__hours-row span:last-child{font-weight:var(--fw-medium);color:var(--color-text)}

/* Video / 360° */
.vip__video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-md)}
.vip__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.vip__video-player{width:100%;border-radius:var(--radius-md);max-height:500px}

/* ==========================================================================
   VIP: Ähnliche Fahrzeuge (Similar Vehicles Section)
   ========================================================================== */
.vip__section--similar,
.vip-similar{
  margin-top:var(--sp-10);
  margin-bottom:var(--sp-8);
  padding:var(--sp-6);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  clear:both;
}
.vip-similar__head{
  margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--color-divider);
}
.vip-similar__title{
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);
  color:var(--color-text);
  margin:0;
  border:none;
  padding:0;
}
.vip-similar__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--sp-4);
  align-items:stretch;
}
.vip-similar__grid .listing-card{
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.vip-similar__grid .listing-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-brand-300);
}
.vip-similar__grid .listing-card__media{
  position:relative;
  aspect-ratio:4/3;
  width:100%;
  background:var(--color-surface-2);
  overflow:hidden;
  display:block;
}
.vip-similar__grid .listing-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.vip-similar__grid .listing-card:hover .listing-card__media img{
  transform:scale(1.05);
}
.vip-similar__grid .listing-card__body{
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:1;
}
.vip-similar__grid .listing-card__title{
  font-weight:var(--fw-bold);
  font-size:var(--fs-md);
  color:var(--color-text);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color var(--dur) var(--ease);
}
.vip-similar__grid .listing-card:hover .listing-card__title{
  color:var(--color-primary);
}
.vip-similar__grid .listing-card__variant{
  font-size:var(--fs-sm);
  color:var(--color-text-muted);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:1.25em;
}
.vip-similar__grid .listing-card__pricerow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.vip-similar__grid .listing-card__price{
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  color:var(--color-text);
  letter-spacing:var(--ls-tight);
}
.vip-similar__grid .listing-card__specs{
  font-size:var(--fs-sm);
  color:var(--color-text-secondary);
  margin-top:2px;
}
.vip-similar__grid .listing-card__meta{
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--color-divider);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:var(--fs-xs);
  color:var(--color-text-muted);
}

@media (max-width:1200px){
  .vip-similar__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:880px){
  .vip__layout{
    grid-template-columns:1fr;
    margin-bottom:var(--sp-6);
  }
  .vip-similar__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:540px){
  .vip__section--similar,
  .vip-similar{
    padding:var(--sp-4);
    margin-top:var(--sp-6);
    margin-bottom:var(--sp-6);
  }
  .vip-similar__grid{
    grid-template-columns:1fr;
    gap:var(--sp-3);
  }
}