/* ==========================================================================
   Hiking Care Pro - products.css
   Product boxes & editor picks.
   ========================================================================== */

.hkc-editor-picks-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
	gap:22px;
}

.hkc-product-box{
	background:var(--hkc-surface);
	border:1px solid var(--hkc-border);
	border-radius:var(--hkc-radius-lg);
	overflow:hidden;
	display:flex; flex-direction:column;
	transition:transform .25s, box-shadow .25s;
	position:relative;
}
.hkc-product-box:hover{ transform:translateY(-4px); box-shadow:var(--hkc-shadow); }

.hkc-product-badge{
	position:absolute; top:14px; left:14px;
	background:linear-gradient(135deg, var(--hkc-primary), var(--hkc-accent));
	color:#fff;
	font-family:var(--hkc-font-display);
	font-weight:600;
	font-size:.72rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	padding:6px 12px;
	border-radius:999px;
	z-index:2;
	box-shadow:0 6px 18px -6px rgba(27,67,50,.4);
}

.hkc-product-thumb{
	aspect-ratio:4/3;
	background:linear-gradient(135deg, var(--hkc-surface-2), var(--hkc-warm));
	display:flex; align-items:center; justify-content:center;
	position:relative;
	overflow:hidden;
}
.hkc-product-thumb::after{
	content:""; position:absolute; inset:0;
	background:radial-gradient(circle at 60% 30%, rgba(221,161,94,.3), transparent 60%);
}
.hkc-product-icon{ font-size:4rem; position:relative; z-index:1; filter:drop-shadow(0 6px 12px rgba(40,54,24,.2)); }

.hkc-product-body{ padding:22px; display:flex; flex-direction:column; gap:14px; flex:1; }
.hkc-product-title{ font-size:1.15rem; margin:0; }

.hkc-product-stats{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:6px 12px;
	margin:0;
	font-size:.82rem;
}
.hkc-product-stats div{ display:contents; }
.hkc-product-stats dt{ color:var(--hkc-text-muted); font-weight:600; }
.hkc-product-stats dd{ margin:0; color:var(--hkc-text); font-weight:600; }

.hkc-product-durability{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.hkc-product-durability span:first-child{ color:var(--hkc-text-muted); flex-shrink:0; }
.hkc-product-durability .hkc-bar{ flex:1; }
.hkc-product-durability strong{ color:var(--hkc-primary); font-weight:600; }

.hkc-product-pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:.85rem; }
.hkc-product-pros-cons h4{ font-size:.78rem; letter-spacing:.05em; margin:0 0 6px; }
.hkc-product-pros-cons ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:3px; color:var(--hkc-text-muted); }
.hkc-product-pros-cons div:first-child h4{ color:#2d6a4f; }
.hkc-product-pros-cons div:last-child h4{ color:#a14d3b; }

.hkc-product-editor-note{
	margin:6px 0 0;
	padding:10px 12px;
	background:var(--hkc-surface-2);
	border-radius:10px;
	font-size:.88rem;
	color:var(--hkc-text);
	border-left:3px solid var(--hkc-accent);
}
.hkc-product-editor-note-label{
	font-family:var(--hkc-font-display);
	font-weight:700;
	font-size:.72rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--hkc-tertiary);
	margin-right:4px;
}

.hkc-product-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; align-items:center; }
.hkc-product-compare,
.hkc-product-compare-cta{ font-size:.85rem; }
.hkc-product-compare-cta{ font-weight:600; color:var(--hkc-primary); }