/**
 * HD Product Cards — 02 Outfitter
 * Warm heritage field catalog. Scoped to .hd-of.
 * Tokens printed by the plugin; values below are matching fallbacks.
 */

.hd-of {
	--hd-of-bg: #f8f4ea;
	--hd-of-border: #d8cfba;
	--hd-of-ink: #2b2a24;
	--hd-of-ink-dim: #5c594e;
	--hd-of-primary: #4a5238;
	--hd-of-accent: #a4491f;
	--hd-of-img-bg: #e6dfd0;
	--hd-of-font-display: 'Bitter', serif;
	--hd-of-font-body: 'Karla', sans-serif;

	background: var(--hd-of-bg);
	border: 1px solid var(--hd-of-border);
	box-shadow: 0 1px 0 var(--hd-of-border), 0 8px 24px rgba(43, 42, 36, .06);
	font-family: var(--hd-of-font-body);
	color: var(--hd-of-ink);
	position: relative;
	transition: box-shadow .3s ease, transform .3s ease;
}
.hd-of:hover {
	transform: translateY(-4px);
	box-shadow: 0 1px 0 var(--hd-of-border), 0 18px 40px rgba(43, 42, 36, .14);
}

/* ---- Image --------------------------------------------------------------- */
.hd-of__img {
	position: relative;
	display: block;
	margin: 14px 14px 0;
	aspect-ratio: 4 / 3;
	background: var(--hd-of-img-bg);
	border: 1px solid var(--hd-of-border);
	overflow: hidden;
}
.hd-of__img img { transition: transform .45s ease; }
.hd-of:hover .hd-of__img img { transform: scale(1.06) rotate(-1deg); }

.hd-of__stamp {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 2;
	width: 58px; height: 58px;
	border: 2px solid var(--hd-of-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--hd-of-font-display);
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.25;
	color: var(--hd-of-accent);
	transform: rotate(8deg);
	background: rgba(248, 244, 234, .85);
	padding: 4px;
}

/* ---- Body ------------------------------------------------------------------ */
.hd-of__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.hd-of__cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hd-of-primary);
	margin: 0 0 6px;
}
.hd-of__title {
	font-family: var(--hd-of-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 8px;
	/* Deterministic: exactly 2 lines */
	min-height: 2.5em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hd-of__title a {
	color: var(--hd-of-ink);
	text-decoration: none;
	transition: color .2s ease;
}
.hd-of__title a:hover { color: var(--hd-of-accent); }

.hd-of__blurb {
	font-family: var(--hd-of-font-display);
	font-style: italic;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--hd-of-ink-dim);
	margin: 0 0 16px;
	/* Deterministic: exactly 2 lines, rendered even when empty */
	min-height: 3.1em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hd-of__rule {
	border: none;
	border-top: 1px dashed var(--hd-of-border);
	margin: 0 0 14px;
}

/* ---- Footer ------------------------------------------------------------------ */
.hd-of__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}
.hd-of__price {
	font-family: var(--hd-of-font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--hd-of-ink);
	line-height: 1.2;
}
.hd-of__price del {
	font-size: 13px;
	font-weight: 400;
	color: var(--hd-of-ink-dim);
	margin-right: 8px;
}
.hd-of__price del .amount { color: inherit; }
.hd-of__price ins { text-decoration: none; }

.hd-of .hd-of__btn,
.hd-of .hd-of__btn.button {
	font-family: var(--hd-of-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-of-bg);
	background: var(--hd-of-primary);
	border: none;
	border-radius: 0;
	padding: 11px 18px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background .25s ease;
	white-space: nowrap;
}
.hd-of .hd-of__btn:hover { background: var(--hd-of-accent); }
.hd-of .hd-of__btn.is-oos { opacity: .6; }

/* ---- A11y --------------------------------------------------------------------- */
.hd-of a:focus-visible,
.hd-of .hd-of__btn:focus-visible {
	outline: 2px solid var(--hd-of-accent);
	outline-offset: 2px;
}

.hd-of .hd-rating{--hd-rating-color:var(--hd-of-accent);color:var(--hd-of-ink-dim)}