/**
 * HD Product Cards — shared layer.
 * Elementor loop grid equal-height pass-through + common card behaviors.
 * All cards share the .hd-card root class alongside their style class.
 */

.hd-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.hd-card *, .hd-card *::before, .hd-card *::after { box-sizing: border-box; }

.hd-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;   /* switch to contain per-site for cut-out product shots */
	display: block;
}

/* ---- Elementor loop grid: equal-height pass-through --------------------- */
/* Structural, wrapper-agnostic: stretch the loop item, then EVERY ancestor
   of the card inside it (whatever Elementor's markup generation produced),
   so the card always fills the equalized loop-item height and its footer
   pins to the bottom. */
.e-loop-item:has(.hd-card) {
	display: flex !important;
	flex-direction: column;
	height: 100% !important;
}
.e-loop-item:has(.hd-card) :has(.hd-card) {
	display: flex !important;
	flex-direction: column;
	flex-grow: 1 !important;
	width: 100%;
	min-height: 0;
	max-height: none;
}
.e-loop-item:has(.hd-card) .hd-card {
	flex-grow: 1 !important;
}

/* Hide Woo's default "View cart" link injected after AJAX add */
.hd-card .added_to_cart { display: none; }

/* Woo AJAX button states (style classes add their own visuals) */
.hd-card .add_to_cart_button.loading { opacity: .6; pointer-events: none; }
.hd-card .add_to_cart_button.added::after { content: " ✓"; }

@media (prefers-reduced-motion: reduce) {
	.hd-card, .hd-card *, .hd-card *::before, .hd-card *::after { transition: none !important; }
}

/* ---- Star rating (structure; styles skin via --hd-rating-color) ---------- */
.hd-card .hd-rating{display:inline-flex;align-items:center;gap:7px;line-height:1}
.hd-card .hd-rating__stars{position:relative;display:inline-block;font-size:13px;letter-spacing:2px;color:color-mix(in srgb,currentColor 28%,transparent);font-style:normal}
.hd-card .hd-rating__stars i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--hd-rating-color,#f0a02a);font-style:normal}
.hd-card .hd-rating__ct{font-size:11px;font-weight:600;opacity:.8}
.hd-card [class$="__rating-row"]{height:18px;display:flex;align-items:center;margin:0 0 10px}
.hd-ox__rating-row,.hd-bb__rating-row{justify-content:center}

/* ---- Narrow-column safety (mobile 2-col loop grids) ---------------------- */
/* Grid/flex items refuse to shrink below content min-width by default; a
   long spec chip or SKU can blow the track past the viewport. Allow
   everything inside a card's loop item to shrink. */
.e-loop-item:has(.hd-card),
.e-loop-item:has(.hd-card) * { min-width: 0; }
.hd-card { max-width: 100%; }

/* Long chip values truncate instead of forcing card width */
.hd-card [class$="__specs"] span,
.hd-card [class$="__chips"] span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Footers stack price over button when the column is too narrow for both */
.hd-card :is([class$="__footer"], [class$="__foot"]) {
	flex-wrap: wrap;
	row-gap: 10px;
}

/* Compact treatment for phone-width columns */
@media (max-width: 640px) {
	.hd-card [class$="__body"] { padding: 14px 12px; }
	.hd-card [class$="__title"] { font-size: 15px; }
	.hd-card [class$="__price"] { font-size: 16px; }
	.hd-card :is(.button, [class$="__btn"]) { padding: 8px 12px; font-size: 10.5px; }
	.hd-dr__body { flex-wrap: wrap; }
	.hd-bb { min-height: 380px; }
	.hd-tb__title, .hd-ox__title { font-size: 20px; }
	.hd-ga-placeholder { display: none; }
}

/* ---- Image geometry lockdown --------------------------------------------- */
/* A large portrait source can win against aspect-ratio in some engines
   (iOS Safari + flex). Absolutely position the photo inside its fixed-ratio
   frame so intrinsic image size can never change card geometry.
   Billboard is excluded — its cut-out image intentionally sizes naturally. */
.hd-card [class$="__img"] {
	position: relative;
	display: block;
	overflow: hidden;
}
.hd-card [class$="__img"]:not(.hd-bb__img) img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Collapse empty reserved zones ---------------------------------------- */
/* Cards self-equalize per row via the loop-item stretch chain, so empty
   data areas no longer need to hold their reserved height. */
.hd-card [class$="__rating-row"]:empty { height: 0; margin: 0; }
.hd-card :is([class$="__specs"], [class$="__chips"]):empty { height: 0; margin: 0; padding: 0; border: 0; }
.hd-card :is([class$="__desc"], [class$="__blurb"], [class$="__spec"]):empty { min-height: 0; height: 0; margin: 0; }

/* Tighter verticals for phone-width columns */
@media (max-width: 640px) {
	.hd-card [class$="__title"] { margin-bottom: 10px; }
	.hd-card :is([class$="__specs"], [class$="__chips"]):not(:empty) { height: 24px; }
	.hd-card [class$="__rating-row"]:not(:empty) { margin-bottom: 8px; }
	.hd-card [class$="__footer"] { padding-top: 10px; }
}

/* ---- Mobile: titles get a third line -------------------------------------- */
/* Narrow columns wrap long product names sooner; allow 3 lines on phones so
   model info survives, and let short titles tighten (heights equalize via
   the loop-item stretch chain). */
@media (max-width: 640px) {
	.hd-card [class$="__title"] {
		-webkit-line-clamp: 3;
		min-height: 0;
	}
}