/* ==========================================================================
   Nabstash Deals — Frontend Styles
   Palette: white background / Amazon navy text / Amazon orange CTA /
   crimson discount ribbon / green savings / blue coupon-copy accent.
   Type: Poppins (display, 700/800) + Inter (body, 400-600).
   ========================================================================== */

:root {
	--nde-bg: #ffffff;
	--nde-surface: #ffffff;
	--nde-text: #131921;       /* Amazon navy — headings & primary text */
	--nde-text-muted: #5a6472;
	--nde-border: #e7e9ec;

	--nde-orange: #ff9900;     /* primary CTA — "Get Deal" */
	--nde-orange-dark: #e0810a;
	--nde-navy: #131921;
	--nde-blue: #146eb4;       /* secondary CTA — "Copy Code" */
	--nde-blue-dark: #0f5694;
	--nde-green: #067d62;      /* savings / "Save $x" */
	--nde-red: #d6342c;        /* discount ribbon — urgency */
	--nde-red-dark: #b8261f;

	--nde-radius: 12px;
	--nde-radius-sm: 8px;
	--nde-shadow: 0 1px 2px rgba(19,25,33,.06), 0 6px 16px rgba(19,25,33,.06);
	--nde-shadow-hover: 0 10px 24px rgba(19,25,33,.12);
	--nde-font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
	--nde-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.nde-homepage, .nde-section, .nde-grid, .nde-card {
	box-sizing: border-box;
}
.nde-homepage *, .nde-section *, .nde-grid *, .nde-card * {
	box-sizing: inherit;
}

/* ---------- Category nav ---------- */
.nde-category-nav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 4px 22px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--nde-border);
	font-family: var(--nde-font-body);
}
.nde-cat-link {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: #f4f5f6;
	color: var(--nde-text);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.nde-cat-link:hover { background: #ebedef; }
.nde-cat-link:focus-visible { outline: 2px solid var(--nde-blue); outline-offset: 2px; }
.nde-cat-link--active,
.nde-cat-link--active:hover {
	background: var(--nde-navy);
	color: #fff;
}

/* ---------- Section header ---------- */
.nde-section { margin: 36px 0; font-family: var(--nde-font-body); }
.nde-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.nde-section__title {
	font-family: var(--nde-font-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
	color: var(--nde-text);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}
.nde-section__subtitle { margin: 0; color: var(--nde-text-muted); font-size: 14px; }

/* ---------- Grid ---------- */
.nde-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 1100px) { .nde-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .nde-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 460px)  { .nde-grid { grid-template-columns: 1fr; } }

/* ---------- Card ---------- */
.nde-card {
	background: var(--nde-surface);
	border: 1px solid var(--nde-border);
	border-radius: var(--nde-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--nde-shadow);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.nde-card:hover {
	box-shadow: var(--nde-shadow-hover);
	transform: translateY(-3px);
	border-color: #d8dce1;
}
@media (prefers-reduced-motion: reduce) {
	.nde-card { transition: none; }
	.nde-card:hover { transform: none; }
}

.nde-card__img-link {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: #fafafa;
	overflow: hidden;
}
.nde-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
	display: block;
}
.nde-card__img--placeholder { background: linear-gradient(135deg, #f3f4f5, #eceef0); }

/* Discount ribbon — the signature element: a folded corner tag in crimson. */
.nde-ribbon {
	position: absolute;
	top: 12px;
	left: -6px;
	z-index: 2;
	background: var(--nde-red);
	color: #fff;
	font-family: var(--nde-font-display);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .02em;
	padding: 5px 12px 5px 14px;
	clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
	box-shadow: 0 2px 6px rgba(214,52,44,.35);
}
.nde-ribbon--badge { background: var(--nde-navy); box-shadow: 0 2px 6px rgba(19,25,33,.3); }
.nde-ribbon--hot { background: var(--nde-red); }
.nde-ribbon--new { background: var(--nde-blue); box-shadow: 0 2px 6px rgba(20,110,180,.35); }
.nde-ribbon--trending { background: var(--nde-navy); }

.nde-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.nde-card__title { margin: 0; font-size: 14.5px; line-height: 1.35; min-height: 38px; }
.nde-card__title a {
	color: var(--nde-text);
	text-decoration: none;
	font-weight: 500;
}
.nde-card__title a:hover { color: var(--nde-blue); text-decoration: underline; }

.nde-card__keepa {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--nde-green);
}

.nde-card__price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.nde-price {
	font-family: var(--nde-font-display);
	font-weight: 800;
	font-size: 20px;
	color: var(--nde-text);
}
.nde-price--was {
	font-size: 13px;
	color: var(--nde-text-muted);
	text-decoration: line-through;
}
.nde-savings {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--nde-green);
}

.nde-card__actions { display: flex; gap: 8px; margin-top: 10px; }

.nde-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--nde-radius-sm);
	font-family: var(--nde-font-body);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 12px;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.nde-btn:active { transform: translateY(1px); }
.nde-btn:focus-visible { outline: 2px solid var(--nde-blue); outline-offset: 2px; }

.nde-btn--cta {
	background: var(--nde-orange);
	color: var(--nde-navy);
	border-color: var(--nde-orange);
}
.nde-btn--cta:hover { background: var(--nde-orange-dark); border-color: var(--nde-orange-dark); }

.nde-btn--coupon {
	background: #fff;
	color: var(--nde-blue);
	border-color: var(--nde-blue);
}
.nde-btn--coupon:hover { background: var(--nde-blue); color: #fff; }
.nde-btn--coupon.is-copied {
	background: var(--nde-green);
	border-color: var(--nde-green);
	color: #fff;
}

/* Hero / promo banner blocks (optional use via [nabstash_deals] + custom markup) */
.nde-promo {
	display: block;
	position: relative;
	border-radius: var(--nde-radius);
	overflow: hidden;
	min-height: 140px;
	color: #fff;
	text-decoration: none;
	padding: 18px;
	background: linear-gradient(135deg, var(--nde-navy), #2a3744);
}
.nde-promo__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--nde-orange); }
.nde-promo__title { font-family: var(--nde-font-display); font-size: 19px; font-weight: 800; margin: 4px 0 0; }
.nde-promo__sub { font-size: 12.5px; opacity: .85; margin-top: 4px; }