/*
 * Component styles layered on top of style.css design tokens.
 * Section order below mirrors the template it supports: primitives,
 * utility bar, header + mega menu, hero, trust strip, generic section
 * scaffolding, product card + carousel, category grid, collections,
 * why-buy, licensing, testimonials, blog teaser, newsletter, footer.
 */

/* =========================================================
   1. PRIMITIVES — buttons, chips, badges, rating, card shell
   ========================================================= */
.nm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nm-space-2);
	font-family: var(--nm-font-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1;
	padding: 12px 20px;
	border-radius: var(--nm-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--nm-duration-fast) var(--nm-ease),
		border-color var(--nm-duration-fast) var(--nm-ease),
		color var(--nm-duration-fast) var(--nm-ease),
		transform var(--nm-duration-fast) var(--nm-ease);
}
.nm-btn:active { transform: translateY(1px); }

.nm-btn--primary { background: var(--nm-color-accent); color: var(--nm-color-on-accent); }
.nm-btn--primary:hover { background: var(--nm-color-accent-hover); }

.nm-btn--secondary {
	background: var(--nm-color-canvas-raised);
	color: var(--nm-color-ink-900);
	border-color: var(--nm-color-ink-200);
}
.nm-btn--secondary:hover { border-color: var(--nm-color-ink-500); }

.nm-btn--ghost { background: transparent; color: var(--nm-color-ink-700); }
.nm-btn--ghost:hover { background: var(--nm-color-ink-100); }

.nm-btn--block { width: 100%; }
.nm-btn--sm { padding: 8px 14px; font-size: 0.8125rem; }

.nm-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--nm-space-1);
	padding: 6px 12px;
	border-radius: var(--nm-radius-pill);
	background: var(--nm-color-ink-100);
	color: var(--nm-color-ink-700);
	font-size: 0.8125rem;
	font-weight: 500;
	white-space: nowrap;
}
.nm-chip--accent { background: var(--nm-color-accent-soft); color: var(--nm-color-accent); }
.nm-chip--interactive { cursor: pointer; border: 1px solid var(--nm-color-ink-200); }
.nm-chip--interactive:hover { border-color: var(--nm-color-ink-500); }
.nm-chip[aria-pressed="true"] { background: var(--nm-color-accent); color: var(--nm-color-on-accent); }

.nm-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--nm-radius-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.nm-badge--new { background: var(--nm-color-accent-soft); color: var(--nm-color-accent); }
.nm-badge--bestseller { background: #FEF3C7; color: #92400E; }
.nm-badge--sale { background: #FEE2E2; color: var(--nm-color-danger); }

.nm-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--nm-color-ink-700); }
.nm-rating__stars { color: var(--nm-color-star); letter-spacing: 1px; }

.nm-card {
	background: var(--nm-color-canvas-raised);
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-lg);
	overflow: hidden;
	box-shadow: var(--nm-shadow-sm);
	transition: box-shadow var(--nm-duration-base) var(--nm-ease), transform var(--nm-duration-base) var(--nm-ease);
}
.nm-card:hover { box-shadow: var(--nm-shadow-md); transform: translateY(-2px); }

/* =========================================================
   2. UTILITY BAR
   ========================================================= */
.nm-utility-bar {
	background: var(--nm-color-ink-900);
	color: var(--nm-color-ink-100);
	font-size: 0.8125rem;
}
.nm-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nm-space-3);
	padding-block: 8px;
}
.nm-utility-bar__list {
	display: flex;
	gap: var(--nm-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nm-utility-bar__list a,
.nm-utility-bar__account a {
	color: inherit;
	opacity: 0.85;
}
.nm-utility-bar__list a:hover,
.nm-utility-bar__account a:hover { opacity: 1; }

/* =========================================================
   3. HEADER + MEGA MENU
   ========================================================= */
.nm-header { background: var(--nm-color-canvas-raised); border-bottom: 1px solid var(--nm-color-ink-200); position: relative; z-index: 40; }

.nm-header__inner {
	display: flex;
	align-items: center;
	gap: var(--nm-space-4);
	padding-block: var(--nm-space-3);
	flex-wrap: wrap;
}

.nm-header__site-name { font-family: var(--nm-font-heading); font-size: 1.375rem; font-weight: 700; }

.nm-header__primary-nav { display: flex; align-items: center; gap: var(--nm-space-3); }
.nm-header__primary-list { display: flex; gap: var(--nm-space-3); list-style: none; margin: 0; padding: 0; font-weight: 500; }
.nm-header__primary-list a:hover { color: var(--nm-color-accent); }

.nm-header__mega-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--nm-color-ink-100);
	border: none;
	border-radius: var(--nm-radius-md);
	padding: 10px 14px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
}
.nm-header__mega-trigger:hover { background: var(--nm-color-ink-200); }

.nm-header__search {
	flex: 1 1 260px;
	display: flex;
	align-items: center;
	background: var(--nm-color-ink-100);
	border-radius: var(--nm-radius-md);
	padding-inline: var(--nm-space-2);
	min-width: 200px;
	max-width: 480px;
}
.nm-header__search-field {
	flex: 1;
	border: none;
	background: transparent;
	padding-block: 10px;
	font-size: 0.9375rem;
	font-family: var(--nm-font-ui);
}
.nm-header__search-field:focus { outline: none; }
.nm-header__search-submit { background: none; border: none; cursor: pointer; color: var(--nm-color-ink-500); padding: 6px; }

.nm-header__actions { display: flex; align-items: center; gap: var(--nm-space-3); margin-inline-start: auto; }
.nm-header__dark-toggle {
	background: none;
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-pill);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--nm-color-ink-700);
}
.nm-header__dark-toggle:hover { border-color: var(--nm-color-accent); color: var(--nm-color-accent); }

.nm-header__cart { position: relative; display: inline-flex; color: var(--nm-color-ink-900); }
.nm-header__cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--nm-color-accent);
	color: var(--nm-color-on-accent);
	font-size: 0.625rem;
	font-weight: 700;
	border-radius: var(--nm-radius-pill);
	min-width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 3px;
}

.nm-mega-menu {
	display: none;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: var(--nm-color-canvas-raised);
	border-bottom: 1px solid var(--nm-color-ink-200);
	box-shadow: var(--nm-shadow-lg);
	padding: var(--nm-space-5) 0;
}
.nm-header:has(.nm-header__mega-trigger[aria-expanded="true"]) .nm-mega-menu {
	display: block;
}
/* :has() fallback for older browsers: JS also toggles this class directly. */
.nm-mega-menu.is-open { display: block; }
.nm-mega-menu__grid {
	max-width: var(--nm-container);
	margin-inline: auto;
	padding-inline: var(--nm-space-4);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--nm-space-3);
}
.nm-mega-menu__item {
	display: flex;
	gap: var(--nm-space-2);
	padding: var(--nm-space-2);
	border-radius: var(--nm-radius-md);
}
.nm-mega-menu__item:hover { background: var(--nm-color-ink-100); }
.nm-mega-menu__icon { width: 28px; height: 28px; flex: none; color: var(--nm-color-accent); }
.nm-mega-menu__icon svg { width: 100%; height: 100%; }
.nm-mega-menu__label { display: block; font-weight: 600; }
.nm-mega-menu__desc { display: block; font-size: 0.8125rem; color: var(--nm-color-ink-500); }
.nm-mega-menu__extra { max-width: var(--nm-container); margin: var(--nm-space-3) auto 0; padding-inline: var(--nm-space-4); border-top: 1px solid var(--nm-color-ink-200); padding-top: var(--nm-space-3); }
.nm-mega-menu__extra-list { display: flex; gap: var(--nm-space-3); list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }

@media (max-width: 782px) {
	.nm-header__primary-list { display: none; }
	.nm-mega-menu__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   4. HERO
   ========================================================= */
.nm-hero { padding-block: var(--nm-space-8) var(--nm-space-7); background: linear-gradient(180deg, var(--nm-color-accent-soft), var(--nm-color-canvas) 70%); }
.nm-hero__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.nm-hero__headline { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--nm-space-3); }
.nm-hero__subhead { font-size: 1.125rem; color: var(--nm-color-ink-700); margin-bottom: var(--nm-space-5); }
.nm-hero__search {
	display: flex;
	gap: var(--nm-space-2);
	background: var(--nm-color-canvas-raised);
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-lg);
	padding: var(--nm-space-2);
	box-shadow: var(--nm-shadow-md);
	max-width: 560px;
	margin-inline: auto;
}
.nm-hero__search input {
	flex: 1;
	border: none;
	padding: 10px 12px;
	font-size: 1rem;
	background: transparent;
}
.nm-hero__search input:focus { outline: none; }
.nm-hero__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--nm-space-2); margin-top: var(--nm-space-4); }

/* =========================================================
   5. TRUST STRIP
   ========================================================= */
.nm-trust-strip { border-block: 1px solid var(--nm-color-ink-200); background: var(--nm-color-canvas-raised); }
.nm-trust-strip__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--nm-space-3);
	padding-block: var(--nm-space-4);
	text-align: center;
}
.nm-trust-strip__item { display: flex; flex-direction: column; gap: 4px; }
.nm-trust-strip__item strong { font-family: var(--nm-font-heading); font-size: 1.375rem; }
.nm-trust-strip__item span { font-size: 0.8125rem; color: var(--nm-color-ink-500); }

@media (max-width: 640px) {
	.nm-trust-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   6. GENERIC SECTION SCAFFOLDING
   ========================================================= */
.nm-section { padding-block: var(--nm-space-7); }
.nm-section:nth-of-type(even) { background: var(--nm-color-canvas-sunken); }
.nm-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nm-space-3); margin-bottom: var(--nm-space-4); flex-wrap: wrap; }
.nm-section__head h2 { margin: 0; }
.nm-section__head p { color: var(--nm-color-ink-500); margin: var(--nm-space-1) 0 0; }
.nm-section__see-all { font-weight: 600; color: var(--nm-color-accent); white-space: nowrap; }
.nm-empty-state { color: var(--nm-color-ink-500); padding-block: var(--nm-space-4); }

/* =========================================================
   7. PRODUCT CARD + CAROUSEL
   ========================================================= */
.nm-product-card { border-radius: 0; } /* Square corners for product cards specifically — .nm-card (shared shell) keeps its rounded default for category/testimonial/etc. cards. */

.nm-product-carousel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--nm-space-3);
}

@media (max-width: 1024px) { .nm-product-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nm-product-carousel { grid-template-columns: 1fr; } }

.nm-product-card__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nm-color-ink-100); }

.nm-product-card__cover-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.nm-product-card__carousel { position: relative; width: 100%; height: 100%; }
.nm-product-card__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--nm-duration-base) var(--nm-ease);
}
.nm-product-card__slide.is-active { opacity: 1; z-index: 1; }

.nm-product-card__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 30px;
	height: 30px;
	border-radius: var(--nm-radius-pill);
	border: none;
	background: rgba(255, 255, 255, 0.85);
	color: var(--nm-color-ink-900);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--nm-duration-fast) var(--nm-ease), background-color var(--nm-duration-fast) var(--nm-ease);
}
.nm-product-card__cover:hover .nm-product-card__nav,
.nm-product-card__nav:focus-visible {
	opacity: 1;
}
.nm-product-card__nav:hover { background: #fff; }
.nm-product-card__nav--prev { left: var(--nm-space-2); }
.nm-product-card__nav--next { right: var(--nm-space-2); }

.nm-product-card__badges { position: absolute; top: var(--nm-space-2); left: var(--nm-space-2); z-index: 3; display: flex; gap: 6px; }

.nm-product-card__preview-overlay {
	position: absolute;
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	z-index: 3;
	display: none; /* Hidden — change back to "inline-flex" to bring the centered hover badge back. */
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: var(--nm-radius-pill);
	background: rgba(24, 24, 27, 0.85);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	opacity: 0;
	transform: scale(0.95);
	transition: opacity var(--nm-duration-fast) var(--nm-ease), transform var(--nm-duration-fast) var(--nm-ease);
}
.nm-product-card__cover:hover .nm-product-card__preview-overlay,
.nm-product-card__preview-overlay:focus-visible {
	opacity: 1;
	transform: scale(1);
}
.nm-product-card__preview-overlay:hover { background: var(--nm-color-accent); }

.nm-product-card__body { padding: var(--nm-space-3); display: flex; flex-direction: column; gap: 6px; }
.nm-product-card__info,
.nm-product-card__side { display: flex; flex-direction: column; gap: 6px; }
.nm-product-card__chip { align-self: flex-start; }
.nm-product-card__title { font-size: 1.0625rem; margin: 0; }
.nm-product-card__title a:hover { color: var(--nm-color-accent); }
.nm-product-card__byline { font-size: 0.8125rem; color: var(--nm-color-ink-500); margin: 0; }
.nm-product-card__byline a { color: var(--nm-color-accent); }
.nm-product-card__byline a:hover { text-decoration: underline; }
.nm-product-card__pitch {
	font-size: 0.875rem;
	color: var(--nm-color-ink-700);
	margin: 0;
	display: none; /* Grid view (homepage carousels + shop grid) hides the description; list view re-enables it — see .nm-products--list .nm-product-card__pitch in woocommerce.css. Single product page's full description is unaffected — that's WooCommerce's own Description tab, unrelated to this class. */
}
.nm-product-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--nm-space-2); }
.nm-product-card__price { font-weight: 700; white-space: nowrap; }
.nm-product-card__sales { font-size: 0.75rem; color: var(--nm-color-ink-500); margin: 0; }
.nm-product-card__updated { font-size: 0.75rem; color: var(--nm-color-ink-500); margin: 0; }
.nm-product-card__actions { display: flex; align-items: center; gap: var(--nm-space-2); flex: none; }
.nm-product-card__preview-btn {
	flex: 1;
	border-radius: 0;
	background: #fff;
	color: #087096;
	border: 1px solid #087096;
}
.nm-product-card__preview-btn:hover { background: #087096; color: #fff; }

.nm-product-card__cart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var(--nm-radius-md);
	border: 1px solid var(--nm-color-ink-200);
	background: var(--nm-color-canvas-raised);
	color: var(--nm-color-ink-700);
	transition: border-color var(--nm-duration-fast) var(--nm-ease), color var(--nm-duration-fast) var(--nm-ease);
}
.nm-product-card__cart-btn:hover { border-color: var(--nm-color-accent); color: var(--nm-color-accent); }
.nm-product-card__cart-btn.loading { opacity: 0.6; pointer-events: none; }
.nm-product-card__cart-btn.added::after { display: none; } /* Hide WC's default "view cart" text link this filter can append — icon button has no room for it. */

/*
 * "Add to collection" and wishlist icon buttons — list-view only.
 * Functionality lives in assets/js/collections.js: both are backed by
 * browser localStorage (no account/backend), so they persist per-device,
 * not per-account. See that file's docblock for the honest scope of what
 * this does and doesn't cover.
 */
.nm-product-card__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	color: var(--nm-color-ink-500);
	border-radius: var(--nm-radius-sm);
	cursor: pointer;
}
.nm-product-card__icon-btn:hover { color: var(--nm-color-ink-900); background: var(--nm-color-ink-100); }
.nm-product-card__icon-btn.is-active,
.nm-product-card__icon-btn[aria-pressed="true"] { color: var(--nm-color-accent); }
.nm-product-card__icon-btn.nm-js-wishlist-toggle.is-active svg { fill: currentColor; }
.nm-product-card__icon-divider { width: 1px; height: 18px; background: var(--nm-color-ink-200); }

/* Same active-state treatment for the single product page's "Save for
   later" button (inc/single-product.php) — different container, same
   underlying favorite toggle (assets/js/collections.js). */
.nm-js-wishlist-toggle.is-active { color: var(--nm-color-accent); border-color: var(--nm-color-accent); }
.nm-js-wishlist-toggle.is-active svg { fill: currentColor; }

.nm-collection-popover {
	position: absolute;
	top: 36px;
	right: 0;
	z-index: 10;
	width: 220px;
	background: var(--nm-color-canvas-raised);
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-md);
	box-shadow: var(--nm-shadow-lg);
	padding: var(--nm-space-2);
	text-align: left;
}
.nm-collection-popover__list { max-height: 160px; overflow-y: auto; margin-bottom: var(--nm-space-2); }
.nm-collection-popover__empty { font-size: 0.8125rem; color: var(--nm-color-ink-500); margin: 0 0 var(--nm-space-2); }
.nm-collection-popover__row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	font-size: 0.875rem;
	font-weight: 400;
	cursor: pointer;
}
.nm-collection-popover__row:hover { background: var(--nm-color-ink-100); border-radius: var(--nm-radius-sm); }
.nm-collection-popover__new { display: flex; gap: 6px; border-top: 1px solid var(--nm-color-ink-200); padding-top: var(--nm-space-2); }
.nm-collection-popover__new input {
	flex: 1;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-sm);
	font-size: 0.8125rem;
}

/* Collection/wishlist icons and "Last updated" line are list-view-only —
   there's no room for them in the compact grid card. See the list-view
   override below, which turns display back on. */
.nm-product-card__side-icons,
.nm-product-card__updated {
	display: none;
}

/* =========================================================
   8. CATEGORY GRID (Shop by category)
   ========================================================= */
.nm-category-grid__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nm-space-3); }
.nm-category-card { padding: var(--nm-space-4); display: flex; flex-direction: column; gap: var(--nm-space-2); }
.nm-category-card__icon { width: 32px; height: 32px; color: var(--nm-color-accent); }
.nm-category-card__icon svg { width: 100%; height: 100%; }
.nm-category-card__label { font-weight: 700; font-size: 1.0625rem; }
.nm-category-card__desc { font-size: 0.875rem; color: var(--nm-color-ink-500); }

@media (max-width: 900px) { .nm-category-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nm-category-grid__grid { grid-template-columns: 1fr; } }

/* =========================================================
   9. COLLECTIONS
   ========================================================= */
.nm-collections__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nm-space-3); }
.nm-collection-card { padding: var(--nm-space-4); display: flex; flex-direction: column; gap: 4px; background: var(--nm-color-ink-900); color: #fff; border: none; }
.nm-collection-card__label { font-weight: 700; font-size: 1.125rem; }
.nm-collection-card__blurb { font-size: 0.875rem; opacity: 0.75; }

@media (max-width: 900px) { .nm-collections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nm-collections__grid { grid-template-columns: 1fr; } }

/* =========================================================
   10. WHY BUY HERE
   ========================================================= */
.nm-why-buy__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--nm-space-4); }
.nm-why-buy__grid h3 { font-size: 1rem; margin-bottom: 4px; }
.nm-why-buy__grid p { font-size: 0.875rem; color: var(--nm-color-ink-500); margin: 0; }

@media (max-width: 900px) { .nm-why-buy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   11. LICENSING EXPLAINER
   ========================================================= */
.nm-licensing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nm-space-3); margin-bottom: var(--nm-space-4); }
.nm-licensing__card { padding: var(--nm-space-4); }
.nm-licensing__card h3 { margin-bottom: 6px; }
.nm-licensing__card p { color: var(--nm-color-ink-700); margin: 0; }

@media (max-width: 640px) { .nm-licensing__grid { grid-template-columns: 1fr; } }

/* =========================================================
   12. TESTIMONIALS
   ========================================================= */
.nm-testimonials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nm-space-3); }
.nm-testimonial-card { padding: var(--nm-space-4); }
.nm-testimonial-card blockquote { margin: 0 0 var(--nm-space-3); font-size: 0.9375rem; color: var(--nm-color-ink-900); }
.nm-testimonial-card__name { display: block; font-weight: 700; }
.nm-testimonial-card__role { display: block; font-size: 0.8125rem; color: var(--nm-color-ink-500); }

@media (max-width: 900px) { .nm-testimonials__grid { grid-template-columns: 1fr; } }

/* =========================================================
   13. BLOG TEASER
   ========================================================= */
.nm-blog-teaser__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nm-space-3); }
.nm-blog-teaser__card { padding: var(--nm-space-3); color: var(--nm-color-ink-900); }
.nm-blog-teaser__thumb { border-radius: var(--nm-radius-md); overflow: hidden; aspect-ratio: 16/10; margin-bottom: var(--nm-space-2); }
.nm-blog-teaser__thumb img { width: 100%; height: 100%; object-fit: cover; }
.nm-blog-teaser__card h3 { font-size: 1.0625rem; margin: 0 0 4px; }
.nm-blog-teaser__card p { font-size: 0.875rem; color: var(--nm-color-ink-500); margin: 0; }

@media (max-width: 900px) { .nm-blog-teaser__grid { grid-template-columns: 1fr; } }

/* =========================================================
   14. NEWSLETTER
   ========================================================= */
.nm-newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nm-space-4); flex-wrap: wrap; background: var(--nm-color-ink-900); color: #fff; padding: var(--nm-space-5); border-radius: var(--nm-radius-lg); }
.nm-newsletter__inner h2 { color: #fff; margin-bottom: 4px; }
.nm-newsletter__inner p { color: rgba(255,255,255,0.7); margin: 0; }
.nm-newsletter__form { display: flex; gap: var(--nm-space-2); flex-wrap: wrap; }
.nm-newsletter__form input[type="email"] {
	padding: 12px 14px;
	border-radius: var(--nm-radius-md);
	border: 1px solid transparent;
	min-width: 240px;
}

/* =========================================================
   15. FOOTER
   ========================================================= */
.nm-footer { background: var(--nm-color-ink-900); color: rgba(255,255,255,0.85); margin-top: var(--nm-space-7); }
.nm-footer a { color: inherit; }
.nm-footer a:hover { color: #fff; }

.nm-footer__sitemap { border-bottom: 1px solid rgba(255,255,255,0.1); padding-block: var(--nm-space-3); }
.nm-footer__sitemap-list { display: flex; flex-wrap: wrap; gap: var(--nm-space-3); list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }

.nm-footer__columns { padding-block: var(--nm-space-6); }
.nm-footer__columns-grid { display: grid; gap: var(--nm-space-4); grid-template-columns: 1.2fr repeat(3, 1fr); }
.nm-footer__columns-grid--2 { grid-template-columns: 1.2fr 1fr; }
.nm-footer__columns-grid--3 { grid-template-columns: 1.2fr 1fr 1fr; }
.nm-footer__tagline { font-size: 0.875rem; color: rgba(255,255,255,0.6); }
.nm-footer__col .nm-widget__title { font-size: 0.9375rem; margin-bottom: var(--nm-space-2); }

@media (max-width: 900px) {
	.nm-footer__columns-grid,
	.nm-footer__columns-grid--2,
	.nm-footer__columns-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.nm-footer__columns-grid,
	.nm-footer__columns-grid--2,
	.nm-footer__columns-grid--3 { grid-template-columns: 1fr; }
}

.nm-footer__legal { border-top: 1px solid rgba(255,255,255,0.1); padding-block: var(--nm-space-3); font-size: 0.75rem; }
.nm-footer__legal-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nm-space-3); flex-wrap: wrap; }
.nm-footer__legal-list { display: flex; gap: var(--nm-space-3); list-style: none; margin: 0; padding: 0; }
.nm-footer__payments { display: flex; gap: 8px; }
.nm-footer__payment-icon { background: rgba(255,255,255,0.1); border-radius: 4px; padding: 3px 8px; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; }
.nm-footer__copyright { color: rgba(255,255,255,0.5); margin: 0; }

/* =========================================================
   16. CTA BANNER (block pattern: patterns/cta-banner.php)
   ========================================================= */
.nm-cta-banner {
	background: var(--nm-color-ink-900);
	color: #fff;
	text-align: center;
	padding: var(--nm-space-7) var(--nm-space-4);
	border-radius: var(--nm-radius-lg);
	max-width: var(--nm-container);
	margin-inline: auto;
}
.nm-cta-banner__heading { margin-bottom: var(--nm-space-2); }
.nm-cta-banner__subhead { color: rgba(255,255,255,0.7); margin-bottom: var(--nm-space-4); }