/*
Theme Name: N&J Wholesale Foods
Theme URI: https://nandjwholesalefoods.com
Author: Silicon Loops
Description: Block child theme of Twenty Twenty-Five for the N&J Wholesale Foods trade ordering site. Presentation only: brand tokens, self-hosted fonts, header/footer, homepage patterns and WooCommerce templates. Business logic lives in the nj-trade plugin.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nj-wholesale
*/

/* ==========================================================================
   Contents
   1. Tokens (:root) — the plugin's CSS falls back to these
   2. Base
   3. Buttons + forms
   4. Header (topbar, mainbar, nav, search, account, basket)
   5. Homepage sections (hero, tiles, section heads, quick order, featured,
      brands, how it works, perks, apply + FAQ)
   6. Pages (page head, content, 404, posts)
   7. Footer
   8. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--nj-navy: #14305a;
	--nj-navy-dark: #0e2346;
	--nj-navy-light: #1d4178;
	--nj-green: #2e8b3e;
	--nj-green-dark: #237032;
	--nj-green-soft: #e6f2e4;
	--nj-mint: #9be3a6;
	--nj-cream: #f7f3e8;
	--nj-cream-dark: #efe8d6;
	--nj-surface: #fffdf7;
	--nj-ink: #13233f;
	--nj-muted: #5a6477;
	--nj-line: #e3dccb;
	--nj-danger: #a2482a;
	--nj-radius: 16px;
	--nj-radius-sm: 10px;
	--nj-font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
	--nj-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--nj-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--nj-shadow: 0 1px 2px rgba(19, 35, 63, .06), 0 8px 24px -12px rgba(19, 35, 63, .18);
	--nj-shadow-lg: 0 2px 4px rgba(19, 35, 63, .06), 0 24px 48px -20px rgba(19, 35, 63, .35);
	--nj-ease: cubic-bezier(.2, .8, .2, 1);
	--nj-gutter: clamp(16px, 4vw, 48px);
	--nj-header-h: 110px;
	--nj-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2' stroke-linecap='round'/%3E%3C/svg%3E");
	--nj-i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M8 3h9l-3 6h4l-9 12 2-8H7z' stroke-linejoin='round'/%3E%3C/svg%3E");
	--nj-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--nj-i-van: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 7h11v9H2zM13 10h4l3 3v3h-7' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
	--nj-i-free: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M20.5 12.5 12.5 20.5a1.4 1.4 0 0 1-2 0L3.5 13.5V3.5h10l7 7a1.4 1.4 0 0 1 0 2z' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E");
	--nj-i-terms: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8 14h3M8 17h6' stroke-linecap='round'/%3E%3C/svg%3E");
	--nj-i-returns: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5zM3 7.5 12 12l9-4.5M12 12v9' stroke-linejoin='round'/%3E%3C/svg%3E");
	--nj-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3C/svg%3E");
	--nj-i-quality: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8 8 9 4.6-1 8-4.5 8-9V6z' stroke-linejoin='round'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5' stroke-linecap='round'/%3E%3C/svg%3E");
	--nj-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	--nj-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='6.5' stroke-width='2'/%3E%3Cpath d='m16 16 4 4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	--nj-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' stroke-linejoin='round'/%3E%3C/svg%3E");
	--nj-i-heartfill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='black' stroke-linejoin='round'/%3E%3C/svg%3E");
	--nj-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m6 12 4 4 8-8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--nj-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m12 3.5 2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2. Base ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nj-header-h) + 12px); }
body { background: var(--nj-cream); color: var(--nj-ink); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.nj-main { margin-block: 0; }
.nj-home > *,
.nj-page--sections .nj-page-content > .alignfull { margin-block: 0 !important; }
.screen-reader-text:focus { background: #fff; color: var(--nj-navy); }
:focus-visible { outline: 2px solid var(--nj-green); outline-offset: 2px; }

.nj-eyebrow {
	font: 600 .78rem/1.2 var(--nj-font-body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nj-green);
	margin: 0;
}

/* Tick list (apply CTA, product promise) */
.nj-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.nj-ticks li { position: relative; padding-left: 28px; }
.nj-ticks li::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
	background: var(--nj-green);
}
.nj-ticks li::after {
	content: ""; position: absolute; left: 3px; top: calc(.2em + 3px); width: 12px; height: 12px;
	background: #fff; -webkit-mask: var(--nj-i-tick) center / contain no-repeat; mask: var(--nj-i-tick) center / contain no-repeat;
}

/* 3. Buttons + forms --------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button { transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--nj-ease); }
.wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link { box-shadow: 0 10px 24px -14px var(--nj-green); }
.nj-btn-navy .wp-block-button__link { background: var(--nj-navy); box-shadow: 0 10px 24px -14px var(--nj-navy) !important; }
.nj-btn-navy .wp-block-button__link:hover { background: var(--nj-navy-light); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--nj-navy); color: #fff; }

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="date"], select, textarea) {
	font: inherit;
	color: var(--nj-ink);
	background: #fff;
	border: 1.5px solid var(--nj-line);
	border-radius: var(--nj-radius-sm);
	padding: .7rem .9rem;
	min-height: 46px;
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s;
}
:where(input, select, textarea):focus { outline: none; border-color: var(--nj-green); box-shadow: 0 0 0 3px rgba(46, 139, 62, .15); }
:where(.nj-page-content, .woocommerce-MyAccount-content, .woocommerce form) :where(label) { color: var(--nj-navy); font-weight: 600; }

/* 4. Header ----------------------------------------------------------------- */
.nj-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.nj-topbar { background: var(--nj-navy); color: #dfe7f3; font-size: .84rem; }
.nj-topbar__in { min-height: 36px; gap: 24px !important; }
.nj-topbar p { margin: 0; }
.nj-topbar .nj-cutoff { color: #fff; }
.nj-topbar__area { opacity: .8; }
.nj-topbar__links { margin-left: auto !important; display: flex; gap: 18px; }
.nj-topbar__links a { color: inherit; text-decoration: none; opacity: .85; }
.nj-topbar__links a:hover { opacity: 1; text-decoration: underline; color: #fff; }

/* Cut-off line (plugin's [nj_cutoff] or the theme's static fallback) */
.nj-cutoff { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-variant-numeric: tabular-nums; }
.nj-cutoff::before {
	content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
	-webkit-mask: var(--nj-i-clock) center / contain no-repeat; mask: var(--nj-i-clock) center / contain no-repeat;
}
.nj-topbar .nj-cutoff::before { background: #7fd08c; }
.nj-cutoff :is(b, strong, time, [class*="time"], [class*="count"]) { font-weight: 700; letter-spacing: .02em; }
.nj-topbar .nj-cutoff :is(b, strong, time, [class*="time"], [class*="count"]) { color: var(--nj-mint); }

.nj-mainbar {
	background: color-mix(in oklab, var(--nj-surface) 94%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--nj-line);
}
.nj-mainbar__in { min-height: 74px; gap: 18px !important; align-items: center; }
.nj-mainbar__in > * { margin: 0 !important; }

/* Logo (uploaded image or the inline SVG fallback) */
.nj-brand { flex: none; line-height: 0; }
.nj-brand a { display: block; line-height: 0; }
.nj-brand svg { width: 124px; height: auto; display: block; }
.nj-brand img { max-height: 60px; width: auto; }
.nj-logo__nj, .nj-logo text { font-family: var(--nj-font-display); }
.nj-logo__sub { font-family: var(--nj-font-body); }
.nj-brand--light .nj-logo__nj,
.nj-brand--light .nj-logo__sub { fill: #fff; }
.nj-brand--light .nj-logo__wheel { stroke: var(--nj-navy-dark); fill: #fff; }

/* Primary navigation */
.nj-nav { flex: none; }
.nj-nav .wp-block-navigation__container { gap: 2px; }
.nj-nav .wp-block-navigation-item__content { padding: 8px 12px !important; border-radius: 8px; position: relative; color: var(--nj-ink); }
.nj-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--nj-green);
	transform: scaleX(0); transform-origin: left; transition: transform .3s var(--nj-ease);
}
.nj-nav .wp-block-navigation-item__content:hover::after,
.nj-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.nj-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--nj-navy); font-weight: 600; }
.nj-nav .wp-block-navigation-submenu__toggle { margin-left: -8px; }
.nj-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--nj-line) !important;
	border-radius: 14px;
	padding: 6px !important;
	background: #fff !important;
	box-shadow: var(--nj-shadow-lg);
	min-width: 220px !important;
}
.nj-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 12px !important; }
.nj-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--nj-cream); }
.nj-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.nj-nav .wp-block-navigation__responsive-container-open { color: var(--nj-navy); width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; }
.nj-nav .wp-block-navigation__responsive-container-open:hover { background: var(--nj-cream); }
.nj-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
.nj-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--nj-surface) !important;
	padding: 20px var(--nj-gutter) 32px !important;
}
.nj-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px !important; }
.nj-nav .is-menu-open .wp-block-navigation__container { gap: 4px !important; }
.nj-nav .is-menu-open .wp-block-navigation-item__content { font: 700 1.35rem/1.2 var(--nj-font-display); color: var(--nj-navy); padding: 10px 0 !important; }
.nj-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: 0 0 8px 12px !important; background: transparent !important; }
.nj-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font: 500 1.05rem/1.2 var(--nj-font-body); color: var(--nj-ink); padding: 8px 0 !important; }
.nj-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* Product search */
.nj-search { flex: 1 1 auto; max-width: 440px; margin-left: auto !important; min-width: 200px; }
.nj-search .wp-block-search__inside-wrapper {
	border: 1.5px solid var(--nj-line) !important;
	border-radius: 12px;
	background: #fff;
	padding: 0 !important;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}
.nj-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--nj-navy) !important; box-shadow: 0 0 0 3px rgba(20, 48, 90, .1); }
.nj-search .wp-block-search__input {
	border: 0 !important; box-shadow: none !important; background: transparent; min-height: 44px; height: 44px;
	padding: 0 14px !important; font-size: .95rem; border-radius: 0;
}
.nj-search .wp-block-search__button {
	margin: 0 !important; width: 50px; min-height: 44px; padding: 0 !important; border-radius: 0 !important;
	background: var(--nj-navy); color: #fff; box-shadow: none !important; display: grid; place-items: center;
}
.nj-search .wp-block-search__button:hover { background: var(--nj-navy-light); }
.nj-search .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }
.nj-search--page { max-width: 560px; margin: 16px 0 0 !important; }
.nj-search--page .wp-block-search__button { width: auto; padding: 0 20px !important; font-weight: 600; }

/* Quick order button */
.nj-quick-btn { flex: none; }
.nj-quick-btn .wp-block-button__link { min-height: 46px; padding: 0 18px; font-size: .95rem; white-space: nowrap; }
.nj-quick-btn .wp-block-button__link::before {
	content: ""; width: 18px; height: 18px; background: currentColor; flex: none;
	-webkit-mask: var(--nj-i-bolt) center / contain no-repeat; mask: var(--nj-i-bolt) center / contain no-repeat;
}

/* Account + basket */
.nj-account { flex: none; }
.nj-account a,
.wc-block-customer-account a { color: var(--nj-navy); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; }
.nj-account a:hover { background: var(--nj-cream); }
.nj-account svg { width: 26px !important; height: 26px !important; }
.nj-cart { flex: none; }
.nj-cart .wc-block-mini-cart__button {
	color: var(--nj-navy); font-weight: 700; font-variant-numeric: tabular-nums; padding: 8px 10px; border-radius: 12px; gap: 6px;
}
.nj-cart .wc-block-mini-cart__button:hover { background: var(--nj-cream); opacity: 1; }
.nj-cart .wc-block-mini-cart__icon { width: 28px; height: 28px; }
.nj-cart .wc-block-mini-cart__badge { background: var(--nj-green) !important; color: #fff !important; border: 0; font-weight: 700; }
.nj-cart .wc-block-mini-cart__amount { font-size: .98rem; }

/* 5. Homepage sections -------------------------------------------------------- */
.nj-section { padding-block: clamp(44px, 5.5vw, 80px); }
.nj-section-head { margin-bottom: 24px; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 48px; row-gap: 8px; align-items: end; }
.nj-section-head > * { margin: 0 !important; }
.nj-section-head .nj-eyebrow { grid-column: 1 / -1; }
.nj-section-head h2 { max-width: 26ch; }
.nj-section-head__lede { color: var(--nj-muted); max-width: 48ch; justify-self: end; font-size: 1.02rem; }
.nj-section-head__lede a { font-weight: 600; white-space: nowrap; }
.nj-section-head__lede a::after { content: " →"; }

/* Hero */
.nj-hero {
	position: relative;
	isolation: isolate;
	padding-block: 22px 28px;
	background:
		radial-gradient(60% 80% at 0% 0%, #fff 0%, transparent 60%),
		radial-gradient(50% 70% at 100% 100%, color-mix(in oklab, var(--nj-green) 16%, transparent), transparent 70%),
		linear-gradient(180deg, var(--nj-cream) 0%, var(--nj-cream-dark) 100%);
	border-bottom: 1px solid var(--nj-line);
}
.nj-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(var(--nj-line) 1px, transparent 1px), linear-gradient(90deg, var(--nj-line) 1px, transparent 1px);
	background-size: 44px 44px; opacity: .35;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 55%); mask-image: linear-gradient(90deg, #000, transparent 55%);
}
.nj-hero__in { gap: clamp(24px, 3.5vw, 52px) !important; margin-block: 0 !important; }
.nj-hero__copy > * { margin-block: 0 !important; }
.nj-hero__title {
	font-size: clamp(2rem, 1rem + 2.15vw, 2.95rem) !important;
	line-height: 1.02 !important;
	letter-spacing: -.03em !important;
	margin-bottom: 14px !important;
}
.nj-hero__title em { font-style: normal; color: var(--nj-green); }
.nj-hero__sub { font-size: 1.04rem; color: var(--nj-muted); max-width: 56ch; margin-bottom: 18px !important; }
.nj-hero__cta { gap: 10px; margin-bottom: 16px !important; }

/* Postcode check sits on one line in the hero to keep it short */
.nj-hero .nj-postcode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 580px; padding: 10px 10px 10px 16px; }
.nj-hero .nj-postcode__title { margin: 0; flex: none; }
.nj-hero .nj-postcode__row { flex: 1 1 300px; }
.nj-hero .nj-postcode__input { height: 44px; min-height: 44px; }
.nj-hero .nj-postcode__btn { min-height: 44px; }
.nj-hero .nj-postcode__out { flex-basis: 100%; margin: 0 0 4px; }

/* Department tiles */
.nj-tiles {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-rows: clamp(128px, 12vw, 178px);
	gap: 12px !important;
}
.nj-tiles > * { margin: 0 !important; }
.nj-tile {
	position: relative; overflow: hidden; border-radius: 18px; box-shadow: var(--nj-shadow); isolation: isolate;
	height: 100%; background: var(--nj-navy);
}
.nj-tile a { display: block; height: 100%; }
.nj-tile a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 #7fd08c; transition: box-shadow .3s; z-index: 2; }
.nj-tile a:hover::after, .nj-tile a:focus-visible::after { box-shadow: inset 0 0 0 3px #7fd08c; }
.nj-tile img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; transform: scale(1.02); transition: transform .9s var(--nj-ease); }
.nj-tile:hover img { transform: scale(1.09); }
.nj-tile::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(14, 35, 70, 0) 38%, rgba(14, 35, 70, .8) 100%);
}
.nj-tile figcaption {
	position: absolute; left: 16px; right: 12px; bottom: 13px; z-index: 2; margin: 0 !important; pointer-events: none;
	display: flex; align-items: center; gap: 6px;
	color: #fff; text-align: left;
	font: 800 clamp(1.05rem, .7rem + .85vw, 1.45rem)/1 var(--nj-font-display); letter-spacing: -.01em;
}
.nj-tile figcaption::after {
	content: ""; width: 18px; height: 18px; flex: none; background: currentColor; transition: transform .3s var(--nj-ease);
	-webkit-mask: var(--nj-i-arrow) center / contain no-repeat; mask: var(--nj-i-arrow) center / contain no-repeat;
}
.nj-tile:hover figcaption::after { transform: translateX(4px); }

/* Quick order section */
.nj-quick {
	padding-top: clamp(24px, 2.6vw, 36px);
	background: linear-gradient(180deg, var(--nj-surface) 0%, var(--nj-cream) 100%);
}
.nj-quick .nj-section-head { margin-bottom: 18px; row-gap: 4px; }
.nj-quick h2 { font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.4rem); }
.nj-quick__pad { margin-top: 0 !important; }

/* Featured products */
.nj-featured { background: var(--nj-cream); padding-top: clamp(16px, 2vw, 28px); }

/* Brands (static row) */
.nj-brands { background: var(--nj-surface); border-block: 1px solid var(--nj-line); padding-block: 14px; }
.nj-brands__in { gap: 20px 40px !important; }
.nj-brands__title { margin: 0; font: 800 1.3rem/1.1 var(--nj-font-display); color: var(--nj-navy); display: flex; flex-direction: column; gap: 3px; flex: none; }
.nj-brands__title span { font: 500 .82rem/1.2 var(--nj-font-body); color: var(--nj-muted); }
.nj-brand-row { flex: 1 1 560px; gap: 18px 32px !important; }
.nj-brand-row > * { margin: 0 !important; }
.nj-brand-logo img { height: 34px !important; width: auto !important; max-width: 112px; object-fit: contain; opacity: .85; transition: opacity .3s, transform .3s var(--nj-ease); }
.nj-brand-logo:hover img { opacity: 1; transform: translateY(-2px); }

/* How it works */
.nj-how { background: linear-gradient(180deg, var(--nj-green-soft), #f2f7ee); }
.nj-steps { gap: 18px !important; margin-block: 0 !important; }
.nj-howstep {
	position: relative; background: #fff; border-radius: 18px; padding: 24px 22px 22px; box-shadow: var(--nj-shadow);
}
.nj-howstep > * { margin-block: 0 !important; }
.nj-howstep h3 { font-size: 1.25rem; margin: 14px 0 6px !important; }
.nj-howstep p:last-child { color: var(--nj-muted); font-size: .95rem; }
.nj-howstep__n {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--nj-navy); color: #fff; font: 800 1.2rem/1 var(--nj-font-display);
}
.nj-howstep__time {
	position: absolute; top: 24px; right: 20px;
	font: 600 .76rem/1 var(--nj-font-mono); color: var(--nj-green-dark); background: var(--nj-green-soft);
	padding: 6px 9px; border-radius: 99px;
}

/* Delivery benefits (perks strip) */
.nj-perks { background: var(--nj-surface); border-block: 1px solid var(--nj-line); padding-block: 24px; }
.nj-perks__in { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; }
.nj-perk {
	position: relative; margin: 0 !important; min-height: 44px; padding-left: 58px;
	display: flex; flex-direction: column; justify-content: center;
	font-size: .88rem; line-height: 1.35; color: var(--nj-muted);
}
.nj-perk strong { display: block; color: var(--nj-navy); font-size: .98rem; font-weight: 700; }
.nj-perk::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 12px; background: var(--nj-cream); }
.nj-perk::after {
	content: ""; position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; background: var(--nj-navy);
	-webkit-mask: var(--nj-i-van) center / contain no-repeat; mask: var(--nj-i-van) center / contain no-repeat;
}
.nj-perk--free::after { -webkit-mask-image: var(--nj-i-free); mask-image: var(--nj-i-free); }
.nj-perk--terms::after { -webkit-mask-image: var(--nj-i-terms); mask-image: var(--nj-i-terms); }
.nj-perk--returns::after { -webkit-mask-image: var(--nj-i-returns); mask-image: var(--nj-i-returns); }
.nj-perk--phone::after { -webkit-mask-image: var(--nj-i-phone); mask-image: var(--nj-i-phone); }
.nj-perk--quality::after { -webkit-mask-image: var(--nj-i-quality); mask-image: var(--nj-i-quality); }
.nj-perk--pin::after { -webkit-mask-image: var(--nj-i-pin); mask-image: var(--nj-i-pin); }

/* Apply CTA + mini FAQ */
.nj-apply {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--nj-navy); color: #dbe4f1;
	padding-block: clamp(56px, 7vw, 100px);
}
.nj-apply::before {
	content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; z-index: -1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(46, 139, 62, .35), transparent);
}
.nj-apply__in { gap: clamp(32px, 5vw, 80px) !important; margin-block: 0 !important; }
.nj-apply h2, .nj-apply h3 { color: #fff; }
.nj-apply h2 { margin: 12px 0 14px !important; }
.nj-apply .nj-eyebrow { color: var(--nj-mint); }
.nj-apply__copy > p:not(.nj-eyebrow) { font-size: 1.05rem; }
.nj-apply .nj-ticks { margin: 20px 0 26px !important; }
.nj-apply__cta { gap: 10px; }
.nj-apply .is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .55); }
.nj-apply .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--nj-navy); border-color: #fff; }
.nj-apply__faq h3 { font-size: 1.3rem; margin-bottom: 14px !important; }
.nj-faq {
	border-radius: 12px; background: rgba(255, 255, 255, .06); margin: 0 0 8px !important;
	transition: background .2s;
}
.nj-faq[open] { background: rgba(255, 255, 255, .1); }
.nj-faq summary {
	list-style: none; cursor: pointer; padding: 15px 50px 15px 18px; font-weight: 600; color: #fff; position: relative;
}
.nj-faq summary::-webkit-details-marker { display: none; }
.nj-faq summary::after {
	content: "+"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.15rem; line-height: 1; color: var(--nj-mint); background: rgba(155, 227, 166, .12);
	transition: rotate .3s var(--nj-ease);
}
.nj-faq[open] summary::after { rotate: 45deg; }
.nj-faq > p { padding: 0 18px 16px; margin: 0; color: #c3cfe1; font-size: .95rem; }
.nj-apply__more { margin-top: 14px !important; }
.nj-apply__more a { color: var(--nj-mint); font-weight: 600; text-decoration: none; }
.nj-apply__more a::after { content: " →"; }
.nj-apply__more a:hover { color: #fff; text-decoration: underline; }

/* FAQs on light backgrounds (FAQ page etc.) */
.nj-page-content .nj-faq { background: var(--nj-surface); box-shadow: var(--nj-shadow); }
.nj-page-content .nj-faq summary { color: var(--nj-navy); }
.nj-page-content .nj-faq summary::after { color: var(--nj-green-dark); background: var(--nj-green-soft); }
.nj-page-content .nj-faq > p { color: var(--nj-muted); }
.nj-page-content .wp-block-details:not(.nj-faq) {
	background: var(--nj-surface); border-radius: 14px; box-shadow: var(--nj-shadow); padding: 16px 20px;
}
.nj-page-content .wp-block-details:not(.nj-faq) summary { font-weight: 600; color: var(--nj-navy); cursor: pointer; }

/* 6. Pages ---------------------------------------------------------------- */
.nj-page-head {
	padding-block: clamp(26px, 3.6vw, 48px);
	background: linear-gradient(180deg, var(--nj-surface), var(--nj-cream-dark));
	border-bottom: 1px solid var(--nj-line);
}
.nj-page-head > * { margin-block: 0 !important; }
.nj-page-head h1 { font-size: clamp(2rem, 1.3rem + 2vw, 2.9rem); }
.nj-page-content { padding-block: clamp(32px, 4vw, 56px) clamp(56px, 7vw, 96px); margin-top: 0 !important; }
.nj-page-content > * + * { margin-block-start: 1.1rem; }
.nj-page-content h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); margin-top: 2.2rem; }
.nj-page-content h3 { font-size: 1.3rem; margin-top: 1.6rem; }
.nj-page-content :where(p, li) { color: #243552; }
.nj-page--sections .nj-page-content { padding-block: 0; }

.nj-posts { padding-block: 40px 80px; }
.nj-post-card { background: var(--nj-surface); border-radius: var(--nj-radius); box-shadow: var(--nj-shadow); padding: 24px; margin-bottom: 16px; }
.nj-post-card h2 { font-size: 1.5rem; margin: 0 0 6px; }

.nj-404 { padding-block: clamp(48px, 8vw, 110px); }
.nj-404__box { text-align: left; max-width: 640px; margin-inline: auto; }
.nj-404__box h1 { margin: 10px 0 12px; }
.nj-404__box p:not(.nj-eyebrow) { color: var(--nj-muted); }
.nj-404__box .wp-block-buttons { margin-top: 18px; gap: 10px; }

.nj-empty { color: var(--nj-muted); padding: 28px; background: var(--nj-surface); border-radius: var(--nj-radius); border: 1px dashed var(--nj-line); }
.nj-empty h2 { font-size: 1.5rem; margin: 0 0 6px; }

/* 7. Footer ----------------------------------------------------------------- */
.nj-footer-part { margin-top: 0 !important; }
.nj-footer { background: var(--nj-navy-dark); color: #b9c6da; padding-block: 56px 26px; font-size: .92rem; }
.nj-footer__cols { gap: 40px !important; margin-block: 0 !important; }
.nj-footer__brand p { max-width: 46ch; line-height: 1.6; }
.nj-footer__brand .nj-brand { margin-bottom: 16px !important; }
.nj-footer__title { font: 700 1rem/1.2 var(--nj-font-display) !important; color: #fff !important; letter-spacing: 0 !important; margin: 0 0 12px !important; }
.nj-footer__links { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 8px; }
.nj-footer a { color: inherit; text-decoration: none; }
.nj-footer a:hover { color: #fff; text-decoration: underline; }
.nj-footer__contact a { color: #fff; font-weight: 600; }
.nj-footer__contact, .nj-footer__address { margin: 0 0 12px !important; line-height: 1.7; }
.nj-footer__base {
	margin-top: 40px !important; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .82rem; gap: 10px 28px !important;
}
.nj-footer__base p { margin: 0; }
.nj-footer__policies { display: flex; gap: 18px; flex-wrap: wrap; }
.nj-footer__sign { margin-left: auto !important; font: italic 600 1.15rem var(--nj-font-display); color: var(--nj-mint); }

/* 8. Responsive -------------------------------------------------------------- */
@media (max-width: 1240px) {
	.nj-topbar__area { display: none; }
	/* Collapse the primary nav into the overlay menu earlier than core's 600px. */
	.nj-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.nj-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.nj-nav { order: -1; margin-right: -6px !important; }
	.nj-search { max-width: 520px; }
}

@media (max-width: 1100px) {
	.nj-steps { flex-wrap: wrap !important; }
	.nj-steps > .nj-howstep { flex-basis: calc(50% - 9px) !important; flex-grow: 0 !important; }
	.nj-perks__in { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 980px) {
	.nj-hero__in { flex-wrap: wrap !important; }
	.nj-hero__in > .wp-block-column { flex-basis: 100% !important; }
	.nj-tiles { grid-auto-rows: 150px; }
	.nj-section-head { grid-template-columns: 1fr; }
	.nj-section-head__lede { justify-self: start; }
	.nj-apply__in { flex-wrap: wrap !important; }
	.nj-apply__in > .wp-block-column { flex-basis: 100% !important; }
	.nj-footer__cols { flex-wrap: wrap !important; }
	.nj-footer__cols > .nj-footer__brand { flex-basis: 100% !important; }
	.nj-footer__cols > .nj-footer__col { flex-basis: calc(33% - 27px) !important; flex-grow: 1 !important; }
}

@media (max-width: 860px) {
	.nj-mainbar__in { flex-wrap: wrap !important; min-height: 0; padding-block: 10px; row-gap: 10px !important; column-gap: 8px !important; }
	.nj-brand { margin-right: auto !important; }
	.nj-brand svg { width: 104px; }
	.nj-search { order: 10; flex-basis: 100%; max-width: none; margin-left: 0 !important; }
	:root { --nj-header-h: 150px; }
}

@media (max-width: 640px) {
	.nj-header { position: relative; top: 0; }
	:root { --nj-header-h: 0px; }
	.nj-topbar__links { display: none !important; }
	.nj-topbar__in { justify-content: center !important; font-size: .8rem; }
	.nj-brand svg { width: 92px; }
	.nj-quick-btn .wp-block-button__link { font-size: 0; gap: 0; width: 44px; min-height: 44px; padding: 0; }
	.nj-quick-btn .wp-block-button__link::before { width: 20px; height: 20px; }
	.nj-cart .wc-block-mini-cart__amount { display: none; }

	/* Hero: title, tiles, then the rest (as in the v2 mobile layout). */
	.nj-hero { padding-block: 18px 26px; }
	.nj-hero__in { display: flex !important; flex-direction: column; gap: 0 !important; }
	.nj-hero__copy { display: contents; }
	.nj-hero__copy > * { order: 5; }
	.nj-hero__title { order: 1; font-size: 2rem !important; margin-bottom: 14px !important; }
	.nj-hero__tiles { order: 2; margin-bottom: 18px !important; }
	.nj-hero__sub { order: 3; }
	.nj-hero__cta { order: 4; }
	.nj-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 104px; gap: 10px !important; }
	.nj-tile { border-radius: 14px; }
	.nj-tile figcaption { left: 12px; bottom: 10px; font-size: 1.05rem; }
	.nj-hero__cta .wp-block-button { flex: 1 1 auto; }
	.nj-hero__cta .wp-block-button__link { width: 100%; }

	.nj-steps > .nj-howstep { flex-basis: 100% !important; }
	.nj-perks__in { grid-template-columns: 1fr !important; gap: 14px !important; }
	.nj-brand-row { gap: 14px 22px !important; justify-content: flex-start !important; }
	.nj-brand-logo img { height: 26px !important; }
	.nj-footer__cols > .nj-footer__col { flex-basis: 100% !important; }
	.nj-footer__sign { margin-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Laptop-height screens: brands sit under the hero (James liked them at the top),
   so tighten the hero so the Quick Order pad still shows without scrolling. */
@media (min-width: 1024px) and (max-height: 920px) {
	.nj-hero { padding-block: 16px 20px; }
	.nj-hero__title { font-size: clamp(2rem, 1rem + 1.9vw, 2.6rem) !important; margin-bottom: 10px !important; }
	.nj-hero__sub { margin-bottom: 14px !important; }
	.nj-hero__cta { margin-bottom: 12px !important; }
	.nj-tiles { grid-auto-rows: clamp(112px, 10vw, 140px); }
	.nj-brands { padding-block: 10px; }
	.nj-quick.nj-section { padding-top: 26px; }
}