/* === Variables === */
.nh-cart-wrap {
	--gold: #A67C52;
	--gold-dark: #8B6340;
	--gold-light: #C9A97A;
	--gold-pale: #F5EDE2;
	--gold-bg: #FBF6F0;
	--text: #2C2017;
	--text-muted: #7A6650;
	--border: #E8D9C8;
	--white: #FFFFFF;
	--radius: 10px;
	--shadow: 0 4px 24px rgba(166, 124, 82, .12);
	--shadow-lg: 0 10px 40px rgba(166, 124, 82, .18);
	--font-serif: 'Georgia', 'Times New Roman', serif;
	--font-sans: -apple-system, 'Segoe UI', sans-serif;
	font-family: var(--font-sans);
	color: var(--text);
	padding: 40px 0;
	margin: 0 auto;
	max-width: 1170px !important;
	width: 100% !important;
}

/* ── Progress steps ── */
.nh-steps {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 36px;
	padding: 0 4px;
}
.nh-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
	opacity: .5;
}
.nh-step--active { opacity: 1; color: var(--gold-dark); }
.nh-step--done   { opacity: .75; color: var(--gold); }
.nh-step__num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--border);
	color: var(--text-muted);
	font-size: .72rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .2s, color .2s;
}
.nh-step--active .nh-step__num {
	background: linear-gradient(135deg, var(--gold), var(--gold-dark));
	color: var(--white);
}
.nh-step--done .nh-step__num {
	background: #e8f5ec;
	color: #2e8b57;
}
.nh-step-divider {
	flex: 1;
	height: 1px;
	background: var(--border);
	margin: 0 10px;
	min-width: 20px;
}

/* === Empty state === */
.nh-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 80px 20px;
	text-align: center;
	color: var(--text-muted);
}
.nh-empty svg { width: 72px; height: 72px; color: var(--gold-light); }
.nh-empty p   { font-size: 1.1rem; margin: 0; }

/* === Grid layout === */
.nh-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 32px;
	align-items: start;
}

/* === Table === */
.nh-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.nh-table thead tr { background: var(--gold); }
.nh-table thead th {
	padding: 16px 18px;
	text-align: left;
	color: var(--white);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.nh-th-price,
.nh-th-qty,
.nh-th-sub  { text-align: center; }
.nh-th-del  { width: 40px; }

.nh-row {
	border-bottom: 1px solid var(--border);
	transition: background .2s;
}
.nh-row:last-child { border-bottom: none; }
.nh-row:hover      { background: var(--gold-pale); }

.nh-table td {
	padding: 18px;
	vertical-align: middle;
	font-size: .92rem;
}
.nh-td-price,
.nh-td-qty,
.nh-td-sub { text-align: center; }

/* Product cell */
.nh-prod-inner { display: flex; align-items: center; gap: 16px; }
.nh-thumb-link img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--border);
	display: block;
	flex-shrink: 0;
}
.nh-prod-name {
	color: var(--gold-dark);
	text-decoration: none;
	font-weight: 500;
	line-height: 1.4;
	transition: color .2s;
}
.nh-prod-name:hover { color: var(--gold); text-decoration: underline; }

/* Qty stepper */
.nh-qty-wrap {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--white);
}
.nh-qty-btn {
	width: 32px !important;
	height: 36px;
	border: none !important;
	background: transparent !important;
	color: var(--gold-dark) !important;
	font-size: 1.1rem !important;
	cursor: pointer !important;
	transition: background .15s, color .15s !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400 !important;
	padding: 0 !important;
}
.nh-qty-btn:hover {
	background: var(--gold) !important;
	color: var(--white) !important;
}
.nh-qty-input {
	width: 42px;
	height: 36px;
	border: none;
	border-left: 1.5px solid var(--border);
	border-right: 1.5px solid var(--border);
	text-align: center;
	font-size: .9rem;
	color: var(--text);
	-moz-appearance: textfield;
	appearance: textfield;
	outline: none;
}
.nh-qty-input::-webkit-inner-spin-button,
.nh-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Line total */
.nh-line-total { font-weight: 600; color: var(--text); }

/* Remove button */
.nh-cart-wrap .nh-remove-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 auto !important;
	border-radius: 50% !important;
	border: none !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--text-muted) !important;
	cursor: pointer !important;
	transition: background-color .2s, color .2s !important;
	line-height: 1 !important;
}
.nh-cart-wrap .nh-remove-btn svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
	stroke: currentColor !important;
	fill: none !important;
}
.nh-cart-wrap .nh-remove-btn:hover {
	background-color: #FDE8E8 !important;
	color: #C0392B !important;
}

/* Actions row */
.nh-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 4px 4px;
	flex-wrap: wrap;
	gap: 12px;
}
.nh-link-btn {
	color: var(--gold-dark);
	text-decoration: none;
	font-size: .88rem;
	font-weight: 500;
	transition: color .2s;
}
.nh-link-btn:hover { color: var(--gold); }
body .nh-ghost-btn {
	padding: 10px 22px;
	border: 1.5px solid var(--gold);
	background: transparent;
	color: var(--gold-dark);
	border-radius: 8px;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .2s, color .2s !important;
}
.nh-ghost-btn:hover {
	background: var(--gold-pale);
	color: var(--gold-dark);
}

/* Coupon form */
.nh-coupon-form { margin-top: 20px; }
.nh-coupon-row  { display: flex; gap: 10px; flex-wrap: wrap; }
.nh-coupon-input {
	flex: 1;
	min-width: 180px;
	padding: 12px 16px;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	font-size: .9rem;
	background: var(--white);
	color: var(--text);
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.nh-coupon-input::placeholder { color: var(--text-muted); }
.nh-coupon-input:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(166,124,82,.15);
}

/* Notices */
.nh-notice {
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: .88rem;
}
.nh-notice--success { background: #F0FBF4; color: #276749; border-left: 3px solid #2E8B57; }
.nh-notice--error   { background: #FEF2F2; color: #C0392B; border-left: 3px solid #E74C3C; }

/* === Summary sidebar === */
.nh-summary {
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 28px;
	position: sticky;
	top: 24px;
	border: 1px solid var(--border);
}
.nh-summary-title {
	font-family: var(--font-serif);
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	letter-spacing: .06em;
	margin: 0 0 20px !important;
	padding: 0 0 16px;
	border-bottom: 2px solid var(--gold);
	text-transform: uppercase;
	display: block;
	background: linear-gradient(90deg, var(--gold), var(--gold-dark));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.nh-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	font-size: .92rem;
	color: var(--text-muted);
}
.nh-summary-row span:last-child { font-weight: 500; color: var(--text); }
.nh-free-ship { color: var(--gold-dark) !important; font-weight: 600 !important; }
.nh-discount-row span:last-child { color: #2E8B57 !important; }
.nh-summary-divider { height: 1px; background: var(--border); margin: 8px 0; }
.nh-total-row { font-size: 1.08rem; font-weight: 700; }
.nh-total-row span { color: var(--text) !important; font-weight: 700; }

/* Klarna note */
.nh-klarna-note {
	margin: 16px 0 0;
	font-size: .8rem;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.nh-klarna-badge {
	background: #FFB3C7;
	color: #1A0A2E;
	font-weight: 700;
	font-size: .72rem;
	padding: 2px 8px;
	border-radius: 4px;
	letter-spacing: .02em;
}

/* Checkout button */
.nh-checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 22px;
	padding: 15px 24px;
	background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
	color: var(--white) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(139, 99, 64, .35);
	transition: transform .2s, box-shadow .2s, filter .2s;
}
.nh-checkout-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.nh-checkout-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 22px rgba(139, 99, 64, .45);
	filter: brightness(1.06);
}
.nh-checkout-btn:hover svg { transform: translateX(4px); }

/* Generic button */
.nh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	background: linear-gradient(135deg, var(--gold), var(--gold-dark));
	color: var(--white) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: .88rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: filter .2s, transform .2s, box-shadow .2s;
	white-space: nowrap;
	box-shadow: 0 3px 12px rgba(139,99,64,.3);
}
.nh-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: var(--white) !important;
	box-shadow: 0 6px 18px rgba(139, 99, 64, .4);
}

/* Trust badges */
.nh-trust-badges {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
}
.nh-trust-badges span {
	font-size: .78rem;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ════ RESPONSIVE ════ */
@media (max-width: 900px) {
	.nh-grid { grid-template-columns: 1fr; }
	.nh-summary { position: static; }
}

@media (max-width: 640px) {
	.nh-cart-wrap { padding: 20px 12px; }
	.nh-step__label { display: none; }
	.nh-steps { gap: 0; }

	/* Stack table into cards */
	.nh-table,
	.nh-table thead,
	.nh-table tbody,
	.nh-table th,
	.nh-table td,
	.nh-table tr { display: block; }
	.nh-table thead { display: none; }

	.nh-row {
		background: var(--white);
		border-radius: var(--radius);
		box-shadow: 0 2px 10px rgba(166,124,82,.1);
		margin-bottom: 14px;
		border: 1px solid var(--border);
		padding: 14px;
		position: relative;
	}
	.nh-table td { padding: 8px 4px; text-align: left !important; border: none; }
	.nh-table td::before {
		content: attr(data-label);
		display: inline-block;
		width: 80px;
		font-size: .75rem;
		font-weight: 700;
		color: var(--text-muted);
		letter-spacing: .06em;
		text-transform: uppercase;
		vertical-align: middle;
	}
	.nh-td-prod::before { display: none; }
	.nh-td-del { position: absolute; top: 12px; right: 12px; padding: 0; }
	.nh-td-del::before { display: none; }
	.nh-prod-inner { gap: 12px; }
	.nh-thumb-link img { width: 60px; height: 60px; }
	.nh-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
	.nh-ghost-btn { width: 100%; text-align: center; }
}

/* Flash animation */
@keyframes nhFlash {
	0%   { color: var(--gold); }
	100% { color: inherit; }
}
.nh-flash { animation: nhFlash .5s ease; }
