/* NollMade homepage sections — built to docs/mockup-homepage.md */

.nm-eyebrow { color: var(--nm-red); font-weight: 800; font-size: 15px; margin-bottom: 10px; }

/* --- 1. Hero --- */
.nm-hero { padding-top: 26px; }
.nm-hero__card {
	display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center;
	background: var(--nm-cream); border-radius: calc(var(--nm-radius) + 6px);
	padding: 48px 52px; box-shadow: var(--nm-shadow);
}
.nm-hero__title { font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; letter-spacing: -1px; }
.nm-hero__sub { color: var(--nm-muted); font-size: 16.5px; max-width: 46ch; }
.nm-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.nm-hero__trust { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 30px; font-size: 14px; font-weight: 800; }
.nm-hero__trust-item { display: inline-flex; align-items: center; gap: 8px; }
.nm-hero__trust-item .nm-icon { width: 19px; height: 19px; color: var(--nm-red); }
.nm-hero__media { border-radius: var(--nm-radius); overflow: hidden; }
.nm-hero__img { width: 100%; object-fit: cover; aspect-ratio: 5 / 4; }
.nm-hero__placeholder, .nm-about__placeholder {
	display: grid; place-items: center; text-align: center; padding: 24px;
	aspect-ratio: 5 / 4; border: 2px dashed var(--nm-line); border-radius: var(--nm-radius);
	color: var(--nm-muted); font-size: 14px; background: var(--nm-white);
}

/* Hero — image-behind-text overlay variant (transparent PNG over the cream card) */
.nm-hero__card--overlay {
	display: block; position: relative; overflow: hidden;
	padding: 56px 52px; min-height: 480px;
}
.nm-hero__card--overlay .nm-hero__media {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: 68%; overflow: hidden; z-index: 1;
}
.nm-hero__card--overlay .nm-hero__img {
	width: 100%; height: 100%; aspect-ratio: auto;
	object-fit: cover; object-position: right bottom;
}
.nm-hero__card--overlay .nm-hero__copy {
	position: relative; z-index: 2; max-width: 44%;
}
.nm-hero__card--overlay .nm-hero__title { font-size: clamp(30px, 3.4vw, 44px); }
@media (max-width: 980px) {
	.nm-hero__card--overlay { min-height: 0; padding: 32px 28px 300px; }
	.nm-hero__card--overlay .nm-hero__media { width: 100%; height: 300px; top: auto; border-top-left-radius: 0; border-top-right-radius: 0; }
	.nm-hero__card--overlay .nm-hero__img { object-position: center bottom; }
	.nm-hero__card--overlay .nm-hero__copy { max-width: 100%; position: relative; z-index: 2; }
	/* Mobile-only overlay: a cream veil so the dark maroon (#700a0b) copy stays
	   legible over the products. Maroon is dark, so it needs a LIGHT backdrop —
	   strongest near the top where the headline/buttons sit, easing toward the
	   bottom so the products still read. */
	.nm-hero__card--overlay .nm-hero__media::before {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: linear-gradient(180deg, rgba(251,246,239,.92) 0%, rgba(251,246,239,.78) 45%, rgba(251,246,239,.55) 75%, rgba(251,246,239,.35) 100%);
	}
	.nm-hero__card--overlay .nm-hero__trust { flex-direction: column; gap: 12px; }
}

/* --- 2. Category cards --- */
.nm-cats { margin-top: 34px; }
.nm-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.nm-cat-card {
	display: flex; align-items: stretch; justify-content: space-between; gap: 1px;
	background: #faf8f6; border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
	padding: 22px; text-decoration: none; box-shadow: var(--nm-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}
.nm-cat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(41,37,36,.09), 0 16px 34px rgba(41,37,36,.10); }
.nm-cat-card__icon {
	display: grid; place-items: center; width: 44px; height: 44px;
	background: var(--nm-red); color: var(--nm-white); border-radius: 999px; margin-bottom: 14px;
}
.nm-cat-card__icon .nm-icon { width: 22px; height: 22px; }
.nm-cat-card__title { font-size: 21px; margin-bottom: 4px; }
.nm-cat-card__blurb { color: var(--nm-muted); font-size: 13.5px; margin-bottom: 12px; }
.nm-cat-card__link { color: var(--nm-red); font-weight: 800; font-size: 14px; }
.nm-cat-card:hover .nm-cat-card__link { text-decoration: underline; }
.nm-cat-card__media { flex: 0 0 52%; border-radius: var(--nm-radius-sm); overflow: hidden; align-self: center; }
.nm-cat-card__media img { aspect-ratio: 1; object-fit: cover; }

/* --- 3. Best sellers --- */
.nm-bestsellers { margin-top: 64px; }
.nm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.nm-section-title { font-size: clamp(26px, 3vw, 34px); color: var(--nm-red-dark); margin-bottom: 2px; }
.nm-section-sub { color: var(--nm-muted); font-size: 15px; margin: 0; }
.nm-section-link { color: var(--nm-red); font-weight: 800; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.nm-section-link:hover { text-decoration: underline; }

.nm-product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
/* (.nm-product-card styles live in base.css — shared with the shop grid.) */
.nm-empty { grid-column: 1 / -1; text-align: center; color: var(--nm-muted); padding-block: 40px; }

/* --- 4. Gift band --- */
.nm-gift { margin-top: 64px; }
.nm-gift__card {
	position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center;
	background: var(--nm-cream); border-radius: calc(var(--nm-radius) + 6px);
	padding: 44px 72px; box-shadow: var(--nm-shadow); overflow: hidden;
}
.nm-gift__title { font-size: clamp(24px, 2.6vw, 30px); }
.nm-gift__sub { color: var(--nm-muted); font-size: 15px; max-width: 44ch; }
.nm-gift__steps { display: flex; justify-content: space-between; gap: 12px; position: relative; }
.nm-gift__steps::before {
	content: ""; position: absolute; top: 33px; left: 12%; right: 12%;
	border-top: 2px dashed var(--nm-red); opacity: .45;
}
.nm-gift__step {
	position: relative; z-index: 1; flex: 1;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	text-align: center; font-size: 13px; font-weight: 800; max-width: 130px;
}
.nm-gift__step-icon {
	display: grid; place-items: center; width: 66px; height: 66px;
	background: var(--nm-white); color: var(--nm-red); border-radius: 999px; box-shadow: var(--nm-shadow);
}
.nm-gift__step-icon .nm-icon { width: 28px; height: 28px; }
.nm-gift__doodle { position: absolute; color: var(--nm-red); font-size: 22px; letter-spacing: 8px; opacity: .8; }
.nm-gift__doodle--left { left: 22px; top: 14px; }
.nm-gift__doodle--right { right: 22px; bottom: 26px; }

/* --- 5. About --- */
.nm-about { margin-top: 64px; }
.nm-about__grid { display: grid; grid-template-columns: 1.1fr 1.2fr .9fr; gap: 40px; align-items: center; }
.nm-about__media { border-radius: var(--nm-radius); overflow: hidden; box-shadow: var(--nm-shadow); }
.nm-about__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.nm-about__title { font-size: clamp(26px, 3vw, 34px); }
.nm-about__body { color: var(--nm-muted); font-size: 15.5px; }
.nm-about__sign { font-family: var(--nm-font-display); font-style: italic; font-weight: 600; }
.nm-about__trust { display: flex; flex-direction: column; gap: 20px; }
.nm-trust-item { display: flex; gap: 14px; align-items: flex-start; }
.nm-trust-item__icon {
	flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px;
	background: var(--nm-red); color: var(--nm-white); border-radius: 999px;
}
.nm-trust-item__icon .nm-icon { width: 21px; height: 21px; }
.nm-trust-item__text { display: flex; flex-direction: column; font-size: 13.5px; }
.nm-trust-item__text strong { font-size: 14.5px; }
.nm-trust-item__text span { color: var(--nm-muted); }

/* --- Responsive --- */
@media (max-width: 1100px) {
	.nm-product-grid { grid-template-columns: repeat(4, 1fr); }
	.nm-cats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
	.nm-hero__card { grid-template-columns: 1fr; padding: 36px 30px; }
	.nm-gift__card { grid-template-columns: 1fr; padding: 36px 30px; text-align: center; }
	.nm-gift__copy .nm-btn { margin-inline: auto; }
	.nm-gift__sub { margin-inline: auto; }
	.nm-about__grid { grid-template-columns: 1fr; }
	.nm-about__trust { flex-direction: row; flex-wrap: wrap; }
	.nm-trust-item { flex: 1 1 45%; }
}
@media (max-width: 720px) {
	.nm-product-grid { grid-template-columns: repeat(2, 1fr); }
	.nm-cats__grid { grid-template-columns: 1fr; }
	.nm-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.nm-gift__steps { flex-direction: column; align-items: center; }
	.nm-gift__steps::before { display: none; }
}