/* HD Product Cards — SPR. Scoped .hd-spr; tokens printed by the plugin
   (defaults duplicated here so the card never paints unthemed).
   Mirrors spr-master.css: black + amber, Barlow Condensed / Barlow /
   JetBrains Mono. Amber acts, red marks, white headlines. */
.hd-spr{--hd-spr-bg:#161716;--hd-spr-raised:#1F201F;--hd-spr-img-bg:#FFFFFF;--hd-spr-line:#3A3527;--hd-spr-line-hover:#DDA73D;--hd-spr-ink:#FFFFFF;--hd-spr-fg:#F4F2EE;--hd-spr-muted:#B4B0A8;--hd-spr-accent:#DDA73D;--hd-spr-accent-text:#E6B24E;--hd-spr-accent-hover:#C48F2A;--hd-spr-warn:#B11A04;--hd-spr-font-display:'Barlow Condensed',sans-serif;--hd-spr-font-body:'Barlow',sans-serif;--hd-spr-font-mono:'JetBrains Mono',monospace;
background:var(--hd-spr-bg);border:1px solid var(--hd-spr-line);color:var(--hd-spr-fg);font-family:var(--hd-spr-font-body);position:relative;transition:background .18s ease,border-color .18s ease,transform .22s ease}
.hd-spr:hover{background:var(--hd-spr-raised);border-color:var(--hd-spr-line-hover);transform:translateY(-3px)}

/* ---- media: white box, contained photo, hairline under ----------------- */
.hd-spr__img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--hd-spr-line)}
.hd-spr .hd-spr__img{background:var(--hd-spr-img-bg)}
.hd-spr .hd-spr__img img{object-fit:contain;padding:14px;transition:transform .4s ease}
.hd-spr:hover .hd-spr__img img{transform:scale(1.04)}
/* red tile: the nav-tile shape, used only as a mark */
.hd-spr__tile{position:absolute;top:12px;left:12px;font-family:var(--hd-spr-font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1;padding:7px 9px;background:var(--hd-spr-warn);color:var(--hd-spr-fg)}

/* ---- body -------------------------------------------------------------- */
.hd-spr__body{display:flex;flex-direction:column;flex-grow:1;padding:18px 20px 20px}
.hd-spr__eyebrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px;font-family:var(--hd-spr-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.hd-spr__brand{color:var(--hd-spr-accent-text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.hd-spr__brand:hover,a.hd-spr__brand:focus-visible{color:var(--hd-spr-ink);text-decoration:underline;text-underline-offset:3px}
.hd-spr__sku{color:var(--hd-spr-muted);font-size:10px;letter-spacing:.08em;text-transform:none;white-space:nowrap}
.hd-spr__title{font-family:var(--hd-spr-font-display);font-size:22px;font-weight:700;line-height:1.12;letter-spacing:.01em;text-transform:uppercase;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hd-spr__title a{color:var(--hd-spr-ink);text-decoration:none}
.hd-spr__title a:hover{color:var(--hd-spr-accent-text)}

/* spec sheet: label / value rows on hairlines */
.hd-spr__specs{margin:0 0 14px;padding:0;border-top:1px solid var(--hd-spr-line)}
.hd-spr__row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--hd-spr-line);font-family:var(--hd-spr-font-mono);font-size:12px;line-height:1.3}
.hd-spr__row dt{margin:0;color:var(--hd-spr-muted);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;white-space:nowrap}
.hd-spr__row dd{margin:0;color:var(--hd-spr-fg);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.hd-spr__rating-row{margin:0 0 10px}
.hd-spr .hd-rating{--hd-rating-color:var(--hd-spr-accent);color:var(--hd-spr-muted)}

/* stock + price on one line, pinned above the CTA */
.hd-spr__meta{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:0 0 12px}
.hd-spr__stock{font-family:var(--hd-spr-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-spr-muted);padding-left:14px;position:relative;line-height:1.4}
.hd-spr__stock::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--hd-spr-accent)}
.hd-spr__stock.is-backorder::before{background:transparent;border:1.5px solid var(--hd-spr-accent);width:6px;height:6px}
.hd-spr__stock.is-oos{color:#E05A46}
.hd-spr__stock.is-oos::before{background:var(--hd-spr-warn)}
.hd-spr__price{font-family:var(--hd-spr-font-display);font-size:26px;font-weight:800;line-height:1;color:var(--hd-spr-accent-text);text-align:right;white-space:nowrap}
.hd-spr__price .amount{color:inherit}
.hd-spr__price del{font-size:15px;font-weight:500;color:var(--hd-spr-muted);margin-right:8px;text-decoration-thickness:1px}
.hd-spr__price del .amount{color:inherit}
.hd-spr__price ins{text-decoration:none}

/* CTA: amber fill, ink type (the master .spr-btn--fill) */
.hd-spr__footer{margin:0}
.hd-spr .hd-spr__btn,.hd-spr .hd-spr__btn.button{display:block;width:100%;text-align:center;font-family:var(--hd-spr-font-display);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#070808;background:var(--hd-spr-accent);border:1px solid var(--hd-spr-accent);border-radius:0;padding:13px 18px;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;box-sizing:border-box;transition:background .15s ease,border-color .15s ease,color .15s ease}
.hd-spr .hd-spr__btn:hover,.hd-spr .hd-spr__btn:focus-visible{background:var(--hd-spr-accent-hover);border-color:var(--hd-spr-accent-hover);color:#070808}
/* out of stock: ghost, muted — nothing amber on a product you can't buy */
.hd-spr .hd-spr__btn.is-oos{background:transparent;border-color:var(--hd-spr-line);color:var(--hd-spr-muted)}
.hd-spr .hd-spr__btn.is-oos:hover{border-color:var(--hd-spr-fg);color:var(--hd-spr-fg);background:transparent}
.hd-spr .hd-spr__btn.added::after{content:" ✓"}
.hd-spr a:focus-visible,.hd-spr .hd-spr__btn:focus-visible{outline:2px solid var(--hd-spr-accent);outline-offset:2px}

/* dim the whole card slightly when sold out so in-stock items lead the grid */
.hd-spr.is-oos .hd-spr__img img{opacity:.7}

@media (max-width:640px){
	.hd-spr__body{padding:14px 14px 16px}
	.hd-spr__title{font-size:19px}
	.hd-spr__price{font-size:22px}
	.hd-spr__row dd{max-width:60%}
}