/* Han OOT Rentals v2.5 – Minimal & Soft Refresh */
/* global */
:root{
  --han-accent:#111;              /* unchanged for brand consistency */
  --han-highlight:#ff6b6b;        /* slightly softer highlight */
  --han-surface:#ffffff;          /* surface background */
  --han-muted:#f6f7f9;            /* muted / subtle surface */
  --han-border:#e5e7eb;           /* light border colour */
  --han-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

body{font-family:var(--han-font);color:#111;background:var(--han-muted)}

/************* TABS *************/
.han-tabs{display:flex;gap:8px;margin:8px 0 20px;flex-wrap:wrap}
.han-tabs .tab{
  padding:8px 14px;
  border-radius:999px;
  background:var(--han-surface);
  text-decoration:none;
  color:#111;
  font-weight:600;
  border:1px solid var(--han-border);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  transition:background .15s ease,color .15s ease;
}
.han-tabs .tab:hover{background:var(--han-muted)}
.han-tabs .tab.active{
  background:var(--han-accent);
  color:#fff;
  border-color:var(--han-accent);
}

/************* GRID *************/
.han-cars-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:1024px){.han-cars-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.han-cars-grid{grid-template-columns:1fr}}

/************* CARD *************/
.han-car-card{
  display:block;
  border-radius:18px;
  background:var(--han-surface);
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .16s ease, box-shadow .16s ease;
  border:1px solid var(--han-border);
}
.han-car-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.08);
}
.han-car-thumb{position:relative;aspect-ratio:16/10;background:var(--han-muted);overflow:hidden}
.han-car-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02)}
.han-badge{
  position:absolute;right:12px;top:12px;
  background:var(--han-highlight);
  color:#fff;font-weight:700;font-size:12px;
  border-radius:18px;padding:4px 10px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.han-chip{
  position:absolute;left:12px;top:12px;
  background:var(--han-accent);
  color:#fff;font-weight:700;font-size:11px;
  border-radius:8px;padding:4px 9px;
  opacity:.9;
}
.han-car-body{padding:14px 16px 18px}

/* card prices: subtler */
.han-card-prices{display:flex;gap:6px;align-items:center;white-space:nowrap;overflow-x:auto;padding-bottom:2px}
.han-card-prices .pill{
  background:#fffdf5;
  border:1px solid #ffecbc;
  border-radius:8px;
  padding:4px 7px;
  font-size:11px;
  display:flex;gap:4px;align-items:center;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.han-card-prices .pill span{color:#806a3a;font-weight:600;letter-spacing:.1px}
.han-card-prices .pill b{font-size:12px;font-weight:800}
.han-car-title{margin:10px 0 0;font-size:18px;font-weight:800;letter-spacing:.2px}

/************* BREADCRUMB *************/
.han-breadcrumb{max-width:1100px;margin:10px auto 8px;padding:0 12px;font-weight:600;color:#6b7280;font-size:14px}
.han-breadcrumb a{color:inherit;text-decoration:none}
.han-breadcrumb a:hover{text-decoration:underline}
.han-breadcrumb .sep{margin:0 6px;color:#9ca3af}

/************* SINGLE PAGE *************/
.han-single-wrap{max-width:1100px;margin:0 auto}
.han-hero-media.pad{padding:8px}
.han-hero-main img{width:100%;max-height:520px;object-fit:cover;display:block;border-radius:12px}
.han-hero-thumbs{display:flex;gap:6px;margin-top:6px;overflow-x:auto;padding-bottom:2px}
.han-hero-thumbs img{width:110px;height:74px;object-fit:cover;border-radius:6px;cursor:pointer;flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* prices */
.han-hero-prices.row{margin:10px 10px 0;display:flex;gap:6px;white-space:nowrap;overflow-x:auto}
.han-hero .price-box{
  background:var(--han-surface);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  padding:6px 9px;border-radius:8px;text-align:center;min-width:98px;
  border:1px solid var(--han-border);
}
.han-hero .price-box small{display:block;color:#6b7280;font-weight:600;margin-bottom:2px}
.han-hero .price-box b{font-size:14px}
.han-hero-title{margin:10px 10px 14px;font-size:26px;font-weight:900}

.han-single-grid{display:grid;grid-template-columns:2.1fr 1fr;gap:20px;padding:14px}
@media(max-width:900px){.han-single-grid{grid-template-columns:1fr}}

/************* SPEC CARDS *************/
.han-spec-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:700px){.han-spec-cards{grid-template-columns:1fr}}
.han-spec-cards .card{
  background:var(--han-surface);
  border:1px solid var(--han-border);
  border-radius:10px;
  padding:12px 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.han-spec-cards .k{display:block;font-weight:700;color:#6b7280;margin-bottom:2px}
.han-spec-cards .v{display:block;font-weight:800;font-size:15px}

/************* TAGS *************/
.han-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.han-tags span{
  background:var(--han-muted);
  border-radius:999px;
  padding:6px 10px;
  font-weight:600;
  font-size:13px;
}

/************* SELLER *************/
.han-seller{
  background:var(--han-surface);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:16px;
  position:sticky;top:14px;
  border:1px solid var(--han-border);
}
.han-seller-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.han-avatar{width:54px;height:54px;border-radius:999px;overflow:hidden;background:var(--han-muted)}
.han-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.han-seller-name{font-weight:900;margin-bottom:2px}
.han-seller-loc,.han-seller-time{color:#6b7280;font-weight:600;font-size:14px}

/* ACTION BUTTONS */
.han-seller-actions .btn{display:flex;align-items:center;gap:8px}
.btn{display:block;text-align:center;padding:10px 12px;border-radius:8px;margin-top:10px;text-decoration:none;font-weight:800;font-size:14px;transition:background .15s ease}
.btn.whats{background:#22c55e;color:#fff}
.btn.whats:hover{background:#16a34a}
.btn.tel{background:var(--han-accent);color:#fff}
.btn.tel:hover{background:#000}
.btn.mail{background:#f59e0b;color:#fff}
.btn.mail:hover{background:#d97706}