/*
 * N&J Wholesale Foods: styles for the nj-trade plugin components.
 * Postcode check, cut-off countdown, Quick Order pad, favourites heart and list,
 * reorder, account application + contact forms.
 *
 * Written against the plugin's BEM-ish classes (nj-postcode__*, nj-qo__*, nj-fav,
 * nj-favs__*, nj-form__*, nj-field--*). Selectors lean on structure (element
 * types inside the block root) where markup may still change, so small plugin
 * markup edits don't break the look.
 */

/* Shared button ------------------------------------------------------------- */
.nj-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px;
	background: var(--nj-green); color: #fff !important; text-decoration: none !important;
	font: 600 1rem/1.1 var(--nj-font-body); cursor: pointer; white-space: nowrap;
	box-shadow: 0 10px 24px -14px var(--nj-green);
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.nj-btn:hover { background: var(--nj-green-dark); }
.nj-btn:disabled, .nj-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.nj-btn--ghost { background: transparent; color: var(--nj-navy) !important; box-shadow: inset 0 0 0 2px var(--nj-navy); }
.nj-btn--ghost:hover { background: var(--nj-navy); color: #fff !important; }
.nj-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Cut-off countdown ------------------------------------------------------------ */
.nj-cutoff svg { width: 16px; height: 16px; flex: none; color: #7fd08c; }
.nj-cutoff:not(.nj-cutoff--static)::before { display: none; }
.nj-cutoff__clock { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; }
.nj-topbar .nj-cutoff__clock { color: var(--nj-mint); }

/* Postcode check ------------------------------------------------------------ */
.nj-postcode {
	background: #fff;
	border-radius: var(--nj-radius);
	padding: 14px 16px;
	box-shadow: var(--nj-shadow);
	max-width: 480px;
	margin: 0;
}
.nj-postcode__title { display: block; font-weight: 600; font-size: .95rem; color: var(--nj-navy); margin: 0 0 8px; }
.nj-postcode__row { display: flex; gap: 8px; }
.nj-postcode__input,
.nj-postcode input[type="text"] {
	flex: 1; min-width: 0; height: 48px; min-height: 48px;
	border: 1.5px solid var(--nj-line); border-radius: 12px; padding: 0 14px;
	text-transform: uppercase; letter-spacing: .02em; font-size: 1rem;
}
.nj-postcode__input::placeholder { text-transform: none; letter-spacing: 0; color: #8a93a5; }
.nj-postcode__btn { flex: none; }
.nj-postcode__out:empty { display: none; }
.nj-postcode__out { margin-top: 8px; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nj-postcode__msg { margin: 0; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.nj-postcode__msg.is-yes { color: var(--nj-green-dark); }
.nj-postcode__msg.is-yes::before {
	content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none;
	background: var(--nj-green); color: #fff; font-size: .7rem; font-weight: 800;
}
.nj-postcode__msg.is-no,
.nj-postcode__msg.is-invalid { color: var(--nj-danger); }
.nj-postcode__cta { min-height: 38px; padding: 0 14px; font-size: .88rem; }

/* Quick Order pad ------------------------------------------------------------ */
.nj-qo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	background: #fff;
	border: 1px solid var(--nj-line);
	border-radius: 24px;
	box-shadow: var(--nj-shadow-lg);
	overflow: hidden;
	text-align: left;
}
.nj-qo [hidden] { display: none !important; }
.nj-qo__main { padding: 20px 22px; min-width: 0; display: flex; flex-direction: column; }
.nj-qo__tools { display: grid; gap: 12px; margin-bottom: 8px; }
.nj-qo__search {
	display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; margin: 0;
	border-radius: 14px; background: var(--nj-cream); border: 1.5px solid transparent;
	transition: border-color .2s, background-color .2s; cursor: text; font-weight: 400;
}
.nj-qo__search:focus-within { border-color: var(--nj-navy); background: #fff; }
.nj-qo__search svg { width: 20px; height: 20px; color: var(--nj-muted); flex: none; }
.nj-qo__search input,
.nj-qo__search input[type="search"] {
	flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0 !important; border-radius: 0;
	background: none !important; box-shadow: none !important; outline: none; font-size: 1rem; color: var(--nj-ink);
}
.nj-qo__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.nj-qo__tabs::-webkit-scrollbar { display: none; }
.nj-qo__tabs button {
	flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
	border-radius: 99px; border: 1.5px solid var(--nj-line); background: #fff; color: var(--nj-ink);
	font: 600 .9rem/1 var(--nj-font-body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.nj-qo__tabs button svg { width: 16px; height: 16px; color: #e0a100; }
.nj-qo__tabs button:hover { border-color: var(--nj-navy); }
.nj-qo__tabs button[aria-selected="true"] { background: var(--nj-navy); border-color: var(--nj-navy); color: #fff; }
.nj-qo__tabs button[aria-selected="true"] svg { color: #ffd166; }

.nj-qo__list {
	list-style: none; margin: 0; padding: 0 4px 0 0;
	max-height: 432px; overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--nj-line) transparent;
}
.nj-qo__loading, .nj-qo__empty { padding: 36px 8px; color: var(--nj-muted); margin: 0; }
/* Rows: rendered by quick-order.js. Grid: image | name + code | price | stepper */
.nj-qo__list > li:not(.nj-qo__loading) {
	display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
	padding: 10px 8px; border-bottom: 1px solid var(--nj-line); border-radius: 12px; transition: background-color .2s;
}
.nj-qo__list > li:not(.nj-qo__loading):hover { background: var(--nj-cream); }
.nj-qo__list > li.is-on,
.nj-qo__list > li.on,
.nj-qo__list > li[data-qty]:not([data-qty="0"]) { background: var(--nj-green-soft); }
.nj-qo__list img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; border-radius: 8px; }
.nj-qo__list :is(.nj-qo__name, .nj-qo__info) { min-width: 0; }
.nj-qo__list :is(.nj-qo__name, .nj-qo__info) :is(b, strong, a) { display: block; font-weight: 600; line-height: 1.25; color: var(--nj-ink); text-decoration: none; }
.nj-qo__list :is(.nj-qo__name, .nj-qo__info) :is(span, small) { display: block; font: 500 .78rem/1.3 var(--nj-font-mono); color: var(--nj-muted); margin-top: 2px; }
.nj-qo__list :is(.nj-qo__price, .price) { font: 800 1.08rem/1 var(--nj-font-display); color: var(--nj-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nj-qo__list :is(.nj-qo__price, .price) small { font: 500 .7rem var(--nj-font-body); color: var(--nj-muted); }

/* Case stepper (Quick Order rows and Favourites) */
.nj-step, .nj-qo__step {
	display: inline-flex; align-items: center; border: 1.5px solid var(--nj-line); border-radius: 12px; background: #fff; overflow: hidden;
}
.nj-step button, .nj-qo__step button {
	width: 38px; height: 40px; border: 0; background: none; font-size: 1.2rem; font-weight: 700; line-height: 1;
	color: var(--nj-navy); cursor: pointer; transition: background-color .15s; padding: 0;
}
.nj-step button:hover, .nj-qo__step button:hover { background: var(--nj-cream); }
.nj-step button[data-d="1"], .nj-qo__step button[data-d="1"] { background: var(--nj-green); color: #fff; }
.nj-step button[data-d="1"]:hover, .nj-qo__step button[data-d="1"]:hover { background: var(--nj-green-dark); }
.nj-step output, .nj-step input,
.nj-qo__step output, .nj-qo__step input {
	min-width: 36px; width: 40px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
	border: 0 !important; box-shadow: none !important; padding: 0; min-height: 0; height: 40px; background: none; -moz-appearance: textfield;
}
.nj-step input::-webkit-outer-spin-button, .nj-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.is-on .nj-step, .on .nj-step, .is-on .nj-qo__step { border-color: var(--nj-green); }

/* Summary panel */
.nj-qo__sum {
	background: var(--nj-navy); color: #dbe4f1; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.nj-qo__sum > * { margin: 0; }
.nj-qo__cut {
	display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .07);
	color: #dbe4f1; font-size: .85rem;
}
.nj-qo__cut svg { width: 28px; height: 28px; color: var(--nj-mint); }
.nj-qo__cut .nj-cutoff__clock { display: block; font: 800 1.7rem/1 var(--nj-font-display); color: #fff; margin: 2px 0 4px; }
.nj-qo__cut .nj-cutoff__label { display: block; opacity: .85; font-size: .8rem; }
.nj-qo__lines {
	list-style: none; padding: 0 !important; display: grid; align-content: start; gap: 2px; max-height: 280px; overflow-y: auto;
	scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.nj-qo__lines:empty { display: none; }
.nj-qo__lines li {
	display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center;
	padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: .86rem;
}
.nj-qo__lines img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.nj-qo__lines :is(b, strong) { display: block; color: #fff; font-weight: 600; line-height: 1.2; }
.nj-qo__lines :is(small, span) { opacity: .8; }
.nj-qo__lines :is(em, .nj-qo__line-total) { font-style: normal; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.nj-qo__sum-empty { font-size: .9rem; opacity: .75; }
.nj-qo__bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.nj-qo__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #57b865, var(--nj-mint)); transition: width .6s var(--nj-ease); }
.nj-qo__free { font-size: .85rem; margin-top: -6px !important; }
.nj-qo__free.is-ok, .nj-qo__free.ok { color: var(--nj-mint); font-weight: 600; }
.nj-qo__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15); margin-top: auto !important; }
.nj-qo__total small { opacity: .7; font-size: .78rem; }
.nj-qo__total b { font: 800 1.9rem/1 var(--nj-font-display); color: #fff; font-variant-numeric: tabular-nums; }
.nj-qo__add { width: 100%; }
.nj-qo__status:empty { display: none; }
.nj-qo__status { font-size: .88rem; color: var(--nj-mint); }
.nj-qo__status a { color: #fff; font-weight: 600; }

/* Favourites heart -------------------------------------------------------- */
.nj-fav {
	display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
	border: 1px solid var(--nj-line); background: rgba(255, 255, 255, .95); color: #9aa3b2; cursor: pointer;
	transition: color .2s, transform .3s var(--nj-ease), border-color .2s;
}
.nj-fav svg { width: 18px; height: 18px; }
.nj-fav:hover { color: #d0453a; border-color: #f0c9c5; }
.nj-fav[aria-pressed="true"] { color: #d0453a; border-color: #f0c9c5; }
.nj-fav[aria-pressed="true"] svg path { fill: currentColor; }
.nj-fav-wrap { margin: 0; }
.nj-fav-wrap--card { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0 !important; }
.nj-fav-wrap:not(.nj-fav-wrap--card) .nj-fav { width: auto; height: 40px; border-radius: 10px; padding: 0 12px; display: inline-flex; gap: 8px; font-size: .88rem; font-weight: 600; }
.nj-fav-wrap:not(.nj-fav-wrap--card) .nj-fav::after { content: attr(aria-label); color: var(--nj-ink); }
.nj-fav-wrap:not(.nj-fav-wrap--card) a.nj-fav::after { content: attr(title); }

/* Favourites list + reorder ------------------------------------------------- */
.nj-favs { display: grid; gap: 28px; }
.nj-favs__section { background: #fff; border: 1px solid var(--nj-line); border-radius: 20px; padding: clamp(16px, 3vw, 26px); }
.nj-favs__title { font-size: 1.4rem !important; margin: 0 0 12px !important; }
.nj-favs__empty { color: var(--nj-muted); margin: 0; }
.nj-favs__list, .nj-reorder { list-style: none; padding: 0; margin: 0 0 16px; }
.nj-favs__row {
	display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center;
	padding: 10px 4px; border-bottom: 1px solid var(--nj-line);
}
.nj-favs__img img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; }
.nj-favs__name a { display: block; font-weight: 600; color: var(--nj-ink); text-decoration: none; }
.nj-favs__name span { display: block; font: 500 .78rem var(--nj-font-mono); color: var(--nj-muted); }
.nj-favs__price { font: 800 1.05rem var(--nj-font-display); color: var(--nj-navy); }
.nj-favs__oos { font-size: .82rem; color: var(--nj-danger); font-weight: 600; }
.nj-favs__status { color: var(--nj-green-dark); font-weight: 600; }
.nj-favs--guest { background: var(--nj-surface); border-radius: var(--nj-radius); padding: 22px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.nj-favs--guest p { margin: 0; }
.nj-reorder__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 4px; border-bottom: 1px solid var(--nj-line); }
.nj-reorder__row > :first-child { flex: 1 1 200px; }
.nj-reorder__total { font: 800 1.05rem var(--nj-font-display); color: var(--nj-navy); }
.nj-reorder__row .nj-btn { min-height: 38px; font-size: .88rem; }

/* Forms: account application + contact ---------------------------------------- */
.nj-form {
	background: #fff;
	border: 1px solid var(--nj-line);
	border-radius: 22px;
	padding: clamp(20px, 3vw, 34px);
	box-shadow: var(--nj-shadow);
	max-width: 820px;
	margin-inline: auto;
}
.nj-form__section { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.nj-form__legend { font: 800 1.2rem/1.2 var(--nj-font-display); color: var(--nj-navy); padding: 0; margin: 0 0 14px; }
.nj-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.nj-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nj-field--full, .nj-field--textarea, .nj-field--radio, .nj-field--checkboxes, .nj-field--consent, .nj-field--checkbox, .nj-field--file { grid-column: 1 / -1; }
.nj-field--half { grid-column: auto; }
.nj-field > label, .nj-field legend { font-size: .88rem; font-weight: 600; color: var(--nj-navy); padding: 0; }
.nj-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { width: 100%; }
.nj-field textarea { min-height: 130px; resize: vertical; }
.nj-field input[type="file"] { font-size: .9rem; padding: 10px; border: 1.5px dashed var(--nj-line); border-radius: 12px; background: var(--nj-surface); }
.nj-field fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.nj-req { color: var(--nj-danger); }
.nj-opt { color: var(--nj-muted); font-weight: 400; font-size: .8rem; }
.nj-help { font-size: .82rem; color: var(--nj-muted); margin: 0; }
.nj-error { font-size: .82rem; color: var(--nj-danger); margin: 0; font-weight: 500; }
.nj-field.has-error :is(input, select, textarea) { border-color: var(--nj-danger) !important; }
.nj-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nj-choices label {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid var(--nj-line); border-radius: 99px;
	background: #fff; font-weight: 500; font-size: .92rem; color: var(--nj-ink); cursor: pointer;
}
.nj-choices label:has(input:checked) { border-color: var(--nj-green); background: var(--nj-green-soft); color: var(--nj-green-dark); }
.nj-choices input, .nj-consent input { accent-color: var(--nj-green); width: 18px; height: 18px; margin: 0; }
.nj-consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--nj-ink); font-size: .92rem; }
.nj-consent input { margin-top: 2px; flex: none; }
.nj-postcode-input { text-transform: uppercase; }
.nj-form__actions { margin: 22px 0 0; }
.nj-form__actions .nj-btn { min-width: 220px; }
.nj-form-error { background: #fbeee9; color: var(--nj-danger); border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; font-weight: 500; }
.nj-form-error p { margin: 0; }
.nj-form-done { background: var(--nj-green-soft); color: var(--nj-green-dark); border-radius: 16px; padding: 20px 22px; font-weight: 500; max-width: 820px; }
.nj-form-done p { margin: 0; }

/* Plugin-rendered featured shortcode (classic grid) ------------------------ */
.nj-featured ul.products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.nj-featured ul.products::before, .nj-featured ul.products::after { display: none; }
.nj-featured ul.products li.product {
	position: relative; width: auto !important; float: none !important; margin: 0 !important; background: #fff; border: 1px solid var(--nj-line); border-radius: 14px; padding: 12px;
	display: flex; flex-direction: column;
}
.nj-featured ul.products li.product img { aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; margin-bottom: 10px; }
.nj-featured ul.products li.product h2 { font: 600 .95rem/1.3 var(--nj-font-body); color: var(--nj-ink); letter-spacing: 0; }
.nj-featured ul.products li.product .price { font: 800 1.15rem var(--nj-font-display); color: var(--nj-navy); display: block; margin: 8px 0 12px; }
.nj-featured ul.products li.product .button { margin-top: auto; }
.nj-featured ul.products li.product .nj-fav { position: absolute; top: 10px; right: 10px; }

/* Responsive ------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.nj-qo { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 900px) {
	.nj-qo { grid-template-columns: 1fr; }
	.nj-qo__list { max-height: 380px; }
	.nj-qo__lines { max-height: 180px; }
}
@media (max-width: 640px) {
	.nj-postcode { padding: 12px; }
	.nj-qo { border-radius: 18px; }
	.nj-qo__main { padding: 14px; }
	.nj-qo__list > li:not(.nj-qo__loading) { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 4px; }
	.nj-qo__list img { width: 44px; height: 44px; }
	.nj-qo__list > li > :is(.nj-qo__price, .price) { grid-column: 2; grid-row: 2; font-size: .98rem; }
	.nj-qo__list > li > :is(.nj-step, .nj-qo__step) { grid-column: 3; grid-row: 1 / 3; }
	.nj-step button, .nj-qo__step button { width: 34px; }
	.nj-favs__row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 10px; }
	.nj-favs__img { grid-column: 1; grid-row: 1 / 3; }
	.nj-favs__img img { width: 44px; height: 44px; }
	.nj-favs__name { grid-column: 2; grid-row: 1; }
	.nj-favs__price { grid-column: 2; grid-row: 2; }
	.nj-favs__row .nj-step, .nj-favs__oos { grid-column: 3; grid-row: 1; justify-self: end; }
	.nj-favs__row > .nj-fav { grid-column: 3; grid-row: 2; justify-self: end; width: 32px; height: 32px; }
	.nj-form__grid { grid-template-columns: 1fr; }
	.nj-form__actions .nj-btn { width: 100%; }
}

/* Stepper value centred; reorder totals on one line */
.nj-step output, .nj-qo__step output { display: grid; place-items: center; line-height: 1; }
.nj-reorder__total { white-space: nowrap; }

/* ---------- How it works: delivery van on the road (from v2) ---------- */
.nj-road{position:relative;height:120px;margin:28px auto 8px;overflow:hidden;overflow-x:clip;overflow-y:visible}
.nj-road__svg{position:absolute;inset:0;width:100%;height:100%}
/* Without JS the van is parked on the right; theme.js drives it along the road path. */
.nj-road__van{position:absolute;right:3%;top:14px;width:110px;height:auto;filter:drop-shadow(0 8px 10px rgba(19,35,63,.25))}
.nj-road.is-driving .nj-road__van{left:0;top:0;right:auto;transform-origin:50% 88%;will-change:transform}
.nj-road.is-driving .nj-road__dash{animation:nj-dash 1.2s linear infinite}
@keyframes nj-dash{to{stroke-dashoffset:-30}}
@media (max-width:781px){.nj-road{height:90px}.nj-road__van{width:80px}}

/* ---------- Brands: scrolling banner (from v2) ---------- */
.nj-brand-row.nj-marquee{display:block!important;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nj-marquee__track{display:flex;align-items:center;gap:56px;width:max-content;animation:nj-marq 38s linear infinite}
.nj-marquee:hover .nj-marquee__track{animation-play-state:paused}
.nj-marquee__track>*{flex:none;margin:0!important}
@keyframes nj-marq{to{transform:translateX(calc(-50% - 28px))}}