/* Card polish (loaded after cards.css): one 4:3 photo frame, tiny photo button, slim one-line text block. */
.card--essentials .ph {aspect-ratio:4/3;flex:0 0 auto;display:block;overflow:hidden;}
.card--essentials .ph img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}

/* Tiny camera + count, always visible. The padding is an invisible tap area (visual offset 8px). */
.card--essentials .ph .card-photos {
  right:2px;left:auto;bottom:2px;display:inline-flex;align-items:center;gap:3px;
  min-height:0;padding:6px;border:0;border-radius:0;background:none;box-shadow:none;
  color:#fff;font:600 11px/1 "Segoe UI",Arial,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.5);
}
.card--essentials .ph .card-photos svg {width:12px;height:12px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65));}
.card--essentials .ph .card-photos[hidden] {display:none;}

/* Equal card heights; the text block never grows because every line is a single line. */
.grid:has(> .card--essentials) {gap:8px;align-items:stretch;}
.card--essentials {height:100%;}
.card--essentials .cb {flex:1 1 auto;padding:7px 10px 8px;}
.card--essentials .card-reference {margin:0 0 1px;font-size:10px;line-height:1.2;color:#718295;}
.card--essentials .card-head {padding-bottom:5px;gap:8px;align-items:flex-end;}
.card--essentials .card-name {min-width:0;flex:1 1 auto;}
.card--essentials .cb h3 {margin:0;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card--essentials .cb .ver {
  margin:2px 0 0;font-size:12px;line-height:1.25;color:#6b7a90;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
.card--essentials .card-quote {flex:0 0 auto;}
.card--essentials .card-quote .price {font-size:17px;font-weight:750;}
.card--essentials .cb .quote-caption {font-size:8.5px;color:#718295;}
.card--essentials .cb .specs-line {
  margin:5px 0 0;font-size:11px;line-height:1.3;color:#718295;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card--essentials .card-reg-chip {max-width:none;white-space:nowrap;}

/* Whole card clickable: the title link stretches over the card; extras sit above it. */
.card--essentials {position:relative;cursor:pointer;}
.card--essentials h3 a::after {content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;}
.card--essentials .ph img {pointer-events:none;}
.card--essentials .ph .card-photos, .card--essentials .card-reg-chip {position:relative;z-index:2;}
.card--essentials .ph .card-photos {position:absolute;}
.card--essentials .card-badges {pointer-events:none;}
.card--essentials:hover, .card--essentials:focus-within {border-color:#7398b2;box-shadow:0 7px 22px rgba(11,31,58,.14);}
.card--essentials:has(h3 a:focus-visible) {outline:3px solid var(--blue);outline-offset:3px;}
.card--essentials h3 a:focus-visible {outline:0;}
html[data-theme=dark] .card--essentials:hover, html[data-theme=dark] .card--essentials:focus-within {border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}