/* N&J Trade: minimal functional styles for plugin components.
 * The theme owns the look; everything here reads the theme's --nj-* custom properties with safe fallbacks. */

.nj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:var(--nj-radius,12px);background:var(--nj-green,#2e8b3e);color:#fff;font:600 1rem/1.2 var(--nj-font-body,inherit);text-decoration:none;cursor:pointer}
.nj-btn:hover{filter:brightness(.95)}
.nj-btn:focus-visible,.nj-step button:focus-visible,.nj-fav:focus-visible,.nj-qo__tabs button:focus-visible{outline:3px solid var(--nj-navy,#14305a);outline-offset:2px}
.nj-btn[disabled]{opacity:.5;cursor:not-allowed}
.nj-btn--ghost{background:transparent;color:var(--nj-navy,#14305a);box-shadow:inset 0 0 0 1.5px currentColor}
.nj-ok{color:var(--nj-green,#2e8b3e);font-weight:600}
.nj-warn{display:block;color:#a4262c;margin-top:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Cut-off countdown */
.nj-cutoff{display:inline-flex;align-items:center;gap:8px;margin:0}
.nj-cutoff svg{width:20px;height:20px;flex:none}
.nj-cutoff__clock{font-variant-numeric:tabular-nums;font-weight:800}

/* Postcode check */
.nj-postcode{display:grid;gap:8px;max-width:480px}
.nj-postcode__title{font-weight:700;color:var(--nj-navy,#14305a)}
.nj-postcode__row{display:flex;gap:8px}
.nj-postcode__input{flex:1;min-width:0;min-height:46px;padding:0 14px;border:1.5px solid var(--nj-line,#d9d4c7);border-radius:var(--nj-radius,12px);font:inherit;text-transform:uppercase;background:#fff;color:var(--nj-ink,#1d232b)}
.nj-postcode.is-busy .nj-postcode__btn{opacity:.6}
.nj-postcode__out:empty{display:none}
.nj-postcode__msg{margin:0;padding:10px 12px;border-radius:10px;background:var(--nj-cream,#f7f3ea)}
.nj-postcode__msg.is-yes{background:#e8f4ea;color:#1d5e2a}
.nj-postcode__msg.is-no{background:#fdf1e6;color:#7a3d06}
.nj-postcode__msg.is-invalid{color:#a4262c}
.nj-postcode__cta{margin-top:8px}

/* Steppers (Quick Order, favourites) */
.nj-step{display:inline-flex;align-items:center;border:1.5px solid var(--nj-line,#d9d4c7);border-radius:var(--nj-radius,12px);background:#fff;overflow:hidden}
.nj-step button{width:38px;height:40px;border:0;background:none;font-size:1.2rem;font-weight:700;color:var(--nj-navy,#14305a);cursor:pointer}
.nj-step button[data-d="1"]{background:var(--nj-green,#2e8b3e);color:#fff}
.nj-step output,.nj-step__qty{width:44px;min-width:34px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;border:0;background:none;font-size:1rem;color:inherit;-moz-appearance:textfield;appearance:textfield}
.nj-step__qty::-webkit-outer-spin-button,.nj-step__qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Quick Order pad */
.nj-qo{display:grid;grid-template-columns:minmax(0,1fr) 340px;background:#fff;border:1px solid var(--nj-line,#e6e1d4);border-radius:calc(var(--nj-radius,12px) * 2);overflow:hidden;color:var(--nj-ink,#1d232b);font-family:var(--nj-font-body,inherit)}
.nj-qo__main{padding:20px;min-width:0}
.nj-qo__tools{display:grid;gap:12px;margin-bottom:8px}
.nj-qo__search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--nj-radius,12px);background:var(--nj-cream,#f7f3ea);border:1.5px solid transparent}
.nj-qo__search:focus-within{border-color:var(--nj-navy,#14305a);background:#fff}
.nj-qo__search svg{width:20px;height:20px;color:var(--nj-muted,#6b7280);flex:none}
.nj-qo__search input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:1rem;min-height:44px}
.nj-qo__tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.nj-qo__tabs button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:99px;border:1.5px solid var(--nj-line,#e6e1d4);background:#fff;font:600 .9rem var(--nj-font-body,inherit);color:var(--nj-ink,#1d232b);cursor:pointer}
.nj-qo__tabs button[hidden]{display:none}
.nj-qo__tabs button svg{width:16px;height:16px;color:#e0a100}
.nj-qo__tabs button[aria-selected="true"]{background:var(--nj-navy,#14305a);border-color:var(--nj-navy,#14305a);color:#fff}
.nj-qo__list{list-style:none;margin:0;padding:0;display:grid;max-height:640px;overflow:auto}
.nj-qo__row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--nj-line,#eee9dc)}
.nj-qo__row.is-on{background:#eef7ef}
.nj-qo__row img{width:56px;height:56px;object-fit:contain}
.nj-qo__name a{display:block;font-weight:600;line-height:1.25;color:inherit;text-decoration:none}
.nj-qo__name span,.nj-qo__name small{display:block;font:500 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--nj-muted,#6b7280)}
.nj-qo__last{color:var(--nj-green,#2e8b3e)!important}
.nj-qo__price{font-weight:800;color:var(--nj-navy,#14305a);font-variant-numeric:tabular-nums;font-family:var(--nj-font-display,inherit)}
.nj-qo__loading,.nj-qo__error,.nj-qo__empty{padding:32px 6px;color:var(--nj-muted,#6b7280)}
.nj-qo__sum{background:var(--nj-navy,#14305a);color:#dbe4f1;padding:20px;display:flex;flex-direction:column;gap:12px}
.nj-qo__sum .nj-cutoff{padding:12px;border-radius:var(--nj-radius,12px);background:rgba(255,255,255,.08)}
.nj-qo__sum .nj-cutoff__clock{color:#fff;font-size:1.4rem}
.nj-qo__lines{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:300px;overflow:auto}
.nj-qo__lines li{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.86rem}
.nj-qo__lines li.is-bump{animation:nj-bump .5s ease}
@keyframes nj-bump{from{background:rgba(155,227,166,.25)}}
.nj-qo__lines img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:8px}
.nj-qo__lines b{display:block;color:#fff;font-weight:600;line-height:1.2}
.nj-qo__lines em{font-style:normal;font-weight:600;color:#fff}
.nj-qo__sum-empty{margin:0;font-size:.9rem;opacity:.8}
.nj-qo__bar{height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.nj-qo__bar span{display:block;height:100%;width:0;background:var(--nj-green,#57b865);transition:width .4s}
.nj-qo__free{margin:0;font-size:.85rem}
.nj-qo__free.is-ok{color:#9be3a6;font-weight:600}
.nj-qo__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;border-top:1px solid rgba(255,255,255,.16)}
.nj-qo__total b{font-size:1.7rem;color:#fff;font-variant-numeric:tabular-nums;font-family:var(--nj-font-display,inherit)}
.nj-qo__add{width:100%}
.nj-qo__status{margin:0;font-size:.9rem}
.nj-qo__status a{color:#fff}
@media (max-width:900px){
	.nj-qo{grid-template-columns:1fr}
	.nj-qo__sum{position:sticky;bottom:0}
	.nj-qo__lines{max-height:120px}
	.nj-qo__row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}
	.nj-qo__row img{width:44px;height:44px}
	.nj-qo__row .nj-step{grid-column:2/-1;justify-self:end}
}

/* Favourite heart */
.nj-fav{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:1.5px solid var(--nj-line,#e6e1d4);border-radius:50%;background:#fff;color:#c9c4b8;cursor:pointer;vertical-align:middle}
.nj-fav svg{width:20px;height:20px}
.nj-fav[aria-pressed="true"]{color:#d33a4b;border-color:#f3c2c8}
.nj-fav:hover{color:#d33a4b}
.nj-fav-wrap{margin-top:8px}
.nj-fav-wrap--card{display:flex;justify-content:center}

/* [nj_favourites] */
.nj-favs{display:grid;gap:28px;container-type:inline-size}
.nj-favs__list,.nj-reorder{list-style:none;margin:0 0 14px;padding:0}
.nj-favs__row,.nj-reorder__row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--nj-line,#eee9dc)}
.nj-reorder__row{grid-template-columns:minmax(0,1fr) auto auto}
.nj-favs__img img{width:56px;height:56px;object-fit:contain}
.nj-favs__name a,.nj-reorder__row a{font-weight:600;color:inherit}
.nj-favs__name span,.nj-reorder__row span{display:block;font-size:.82rem;color:var(--nj-muted,#6b7280)}
.nj-favs__oos{color:var(--nj-muted,#6b7280)}
.nj-reorder__total,.nj-favs__price{white-space:nowrap}
@media (max-width:640px){.nj-favs__row{grid-template-columns:48px minmax(0,1fr) auto}.nj-favs__row .nj-step{grid-column:2}}
/* Narrow containers (e.g. a My Account content column): stack each row. */
@container (max-width:520px){
	.nj-favs__row{grid-template-columns:48px minmax(0,1fr) auto;gap:8px 12px}
	.nj-favs__row .nj-favs__price{grid-column:2;grid-row:2}
	.nj-favs__row .nj-step{grid-column:2/-1;grid-row:3;justify-self:start}
	.nj-favs__row .nj-fav{grid-column:3;grid-row:1}
	.nj-favs__name span{word-break:normal}
	.nj-reorder__row{grid-template-columns:1fr auto;gap:8px}
	.nj-reorder__row .nj-btn{grid-column:1/-1;justify-self:start}
}

/* Forms (application, contact) */
.nj-form{display:grid;gap:18px;max-width:760px}
.nj-form__section{border:0;margin:0;padding:0;min-width:0}
.nj-form__legend{font:700 1.15rem var(--nj-font-display,inherit);color:var(--nj-navy,#14305a);margin-bottom:10px;padding:0}
.nj-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.nj-field{display:grid;gap:6px;align-content:start}
.nj-field--full,.nj-field--checkboxes,.nj-field--textarea,.nj-field--checkbox{grid-column:1/-1}
.nj-field label,.nj-field legend{font-weight:600}
.nj-field input[type=text],.nj-field input[type=email],.nj-field input[type=tel],.nj-field input[type=number],.nj-field input[type=url],.nj-field select,.nj-field textarea{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--nj-line,#d9d4c7);border-radius:10px;background:#fff;font:inherit;color:var(--nj-ink,#1d232b);box-sizing:border-box}
.nj-field textarea{min-height:110px}
.nj-field fieldset{border:0;margin:0;padding:0}
.nj-choices{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.nj-choices label{font-weight:400;display:inline-flex;gap:8px;align-items:center}
.nj-consent{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important}
.nj-consent input{margin-top:4px}
.nj-opt{font-weight:400;color:var(--nj-muted,#6b7280);font-size:.85em}
.nj-req{color:#a4262c}
.nj-help{margin:0;font-size:.85rem;color:var(--nj-muted,#6b7280)}
.nj-error{margin:0;font-size:.88rem;color:#a4262c;font-weight:600}
.nj-field.has-error input,.nj-field.has-error select,.nj-field.has-error textarea{border-color:#a4262c}
.nj-form-error{padding:12px 14px;border-radius:10px;background:#fdecee;color:#8a1f28}
.nj-form-error p,.nj-form-done p{margin:0}
.nj-form-done{padding:16px 18px;border-radius:12px;background:#e8f4ea;color:#1d5e2a;font-weight:600}
.nj-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.nj-form__grid{grid-template-columns:1fr}}

/* Pack size line on product cards / product page */
.nj-pack{margin:4px 0 0;font-size:.82rem;color:var(--nj-muted,#6b7280)}
.nj-pack__sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}