/* =====================================================================
   Asset Bank — product cards (homepage rows, machine list). Needs
   ab-site.css for the tokens and the scoped reset.
   ===================================================================== */
.ab-card{position:relative;background:#fff;border:1px solid var(--ab-line-2);border-radius:var(--ab-r-m);overflow:hidden;box-shadow:var(--ab-shadow-card);
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.ab-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(11,18,32,.14)}
.ab-card .ph{aspect-ratio:1.28;background:var(--ab-ground-2);overflow:hidden;position:relative}
.ab-card .ph img{width:100%;height:100%;object-fit:cover}
.ab-card .ph.empty{display:grid;place-items:center}
.ab-card .ph.empty .ab-ico{width:44px;height:44px;opacity:.55}
.ab-card .ph .stamp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.92}
.ab-card .ph .stamp text{font-family:var(--ab-jp);font-weight:900;fill:#DD2A30;letter-spacing:.04em}
.ab-card .bd{padding:11px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.ab-card h3{font-size:13.5px;font-weight:500;line-height:1.45;color:var(--ab-ink)}
.ab-card-link::after{content:"";position:absolute;inset:0;z-index:1}
.ab-card .ab-cat{position:relative;z-index:2;display:inline-flex;align-self:flex-start;align-items:flex-start;gap:5px;font-size:11.5px;line-height:1.5;
  color:var(--ab-price);border-radius:5px;padding:1px 5px;margin-left:-5px;transition:background .15s,color .15s}
.ab-card .ab-cat .ab-ico{width:15px;height:15px;margin-top:1px}
.ab-card .ab-cat .lbl{color:#8A93A3;font-weight:500;white-space:pre}
/* A long category name ("Pemanas, Pendingin / Penyaring Udara") on a narrow
   card ran past its right edge; keep the link inside the card (the extra px
   offsets the negative left margin) and let the name wrap; a word is only
   split when it is longer than the whole line. */
.ab-card .ab-cat{max-width:calc(100% + 5px)}
.ab-card .ab-cat>span{min-width:0;overflow-wrap:break-word}
/* white-space:pre left no break between "Kategori: " and the name, so the
   pair was cut mid-word ("Kategori: Mes|in"); normal lets the name move to
   the next line whole. */
.ab-card .ab-cat .lbl{white-space:normal}
.ab-card a.ab-cat:hover{background:#EAF1FF;color:var(--ab-price);text-decoration:underline}
.ab-card .ft{margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2px 10px}
.ab-card .price{white-space:nowrap;font-family:var(--ab-lat);font-weight:700;font-size:15.5px;line-height:1.5;color:var(--ab-price);letter-spacing:.01em}
.ab-card .price.ask{font-family:var(--ab-jp);font-size:13.5px}
.ab-card .date{white-space:nowrap;margin-left:auto;font-family:var(--ab-lat);font-size:11px;line-height:1.5;color:var(--ab-muted);font-variant-numeric:tabular-nums}
.ab-card.sold{background:#F7F8FA}
.ab-card.sold:hover{transform:none;box-shadow:var(--ab-shadow-card)}
.ab-card.sold h3{color:#2C384A}
.ab-card.sold .price{color:#3E4B61}
.ab-card.sold .ab-cat{color:#66707F}
.ab-card.sold a.ab-cat:hover{background:#E7EAF0;color:#66707F}

@media (max-width:760px){
  .ab-card{border-radius:10px}
  .ab-card .bd{padding:7px 8px 8px;gap:4px}
  .ab-card h3{font-size:11.5px;line-height:1.4}
  .ab-card .ab-cat{font-size:10px;gap:3px;padding:0 3px;margin-left:-3px;line-height:1.4}
  .ab-card .ab-cat .ab-ico{width:12px;height:12px;margin-top:1px}
  .ab-card .price{font-size:clamp(10px,3.4vw,12px)}
  .ab-card .price.ask{font-size:11px}
  .ab-card .date{font-size:9.5px}
  /* price and date always on two lines so they line up across cards */
  .ab-card .ft{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin-top:auto}
  .ab-card .price,.ab-card .price.ask{line-height:18px}
  .ab-card .date{margin-left:0;align-self:flex-end;line-height:14px}
}