/*
 * Noble Farm shell: announcement bar, sticky header, footer, checkout header/footer, cart drawer.
 * Figma: Site Header 412:815, Site Footer 412:816, Cart Drawer 467:2694, Checkout header/footer 463:2506 / 463:2725.
 * Colors come from the base tokens only. The one non-token value is the drawer scrim (Figma: rgba(20,20,13,.45)).
 */

:root { --nf-header-h: 96px; } /* sticky bar height at desktop; shell.js writes the measured value */
@media (max-width: 1199.98px) { :root { --nf-header-h: 73px; } }

/* ---------- Announcement bar ---------- */

.nf-announce { background: var(--nf-olive); color: var(--nf-on-dark); padding: 11px var(--nf-gutter); text-align: center; }
.nf-announce__text { margin: 0; font-size: 13px; font-weight: 500; line-height: 16px; letter-spacing: .06em; }

/* ---------- Header ---------- */

/* The bar sticks; the announcement above it scrolls away, so the sticky height never changes and nothing jumps. */
.nf-header { position: sticky; top: 0; z-index: 90; background: var(--nf-white); border-bottom: 1px solid var(--nf-rule); }
.admin-bar .nf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .nf-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .nf-header { top: 0; } }

.nf-header__bar { display: flex; align-items: center; padding-block: 20px; }
.nf-header__logo { display: block; flex: none; width: 210px; line-height: 0; color: var(--nf-olive); }
.nf-header__logo :is(svg, img) { display: block; width: 100%; height: auto; }

/* Desktop: logo, links centered between logo and actions (equal gaps), then account, Pre-Order, cart. */
.nf-header__menu { display: contents; }
.nf-header__nav { margin-inline: auto; }
.nf-header__list { display: flex; gap: clamp(24px, 2.8vw, 40px); margin: 0; padding: 0; list-style: none; }
.nf-header__link {
	display: block; padding-block: 8px;
	font-size: 15px; font-weight: 500; line-height: 18px; color: var(--nf-ink); text-decoration: none; white-space: nowrap;
	text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px;
	transition: text-decoration-color .15s ease;
}
.nf-header__link:hover, .nf-header__item--current > .nf-header__link { text-decoration-color: var(--nf-crust); }

.nf-header__account {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px;
	font-size: 15px; font-weight: 500; line-height: 18px; color: var(--nf-ink); text-decoration: none; white-space: nowrap;
}
.nf-header__account:hover span { text-decoration: underline; text-decoration-color: var(--nf-crust); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nf-header__account-icon { flex: none; width: 18px; height: 18px; }
.nf-header__preorder { margin-left: 8px; white-space: nowrap; }

.nf-header__cart {
	display: inline-flex; align-items: center; gap: 10px; min-height: 55px; margin-left: 16px; padding: 14px 18px;
	border: 1.5px solid var(--nf-olive); border-radius: var(--nf-radius);
	font-size: 15px; font-weight: 600; line-height: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--nf-ink); text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.nf-header__cart:hover { background: var(--nf-olive); color: var(--nf-on-dark); }
.nf-cart-count {
	display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 6px; border-radius: 999px;
	background: var(--nf-crust); color: var(--nf-on-dark); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
.nf-cart-count[hidden] { display: none; }

.nf-header__toggle { display: none; }

/* Mid-size and mobile (not designed): hamburger panel, logo left, cart right. */
@media (max-width: 1199.98px) {
	.nf-header__bar { padding-block: 12px; gap: 8px; }
	.nf-header__logo { width: 156px; margin-right: auto; }
	.nf-header__cart { margin-left: 0; min-height: 48px; padding: 10px 14px; font-size: 14px; }
	.nf-header__toggle {
		display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0;
		border: 1.5px solid var(--nf-olive); border-radius: var(--nf-radius); background: transparent; cursor: pointer;
	}
	.nf-header__bars, .nf-header__bars::before, .nf-header__bars::after {
		display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--nf-olive);
		transition: transform .2s ease, background-color .2s ease;
	}
	.nf-header__bars { position: relative; }
	.nf-header__bars::before, .nf-header__bars::after { content: ""; position: absolute; left: 0; }
	.nf-header__bars::before { top: -6px; }
	.nf-header__bars::after { top: 6px; }
	.nf-header__toggle[aria-expanded="true"] .nf-header__bars { background: transparent; }
	.nf-header__toggle[aria-expanded="true"] .nf-header__bars::before { transform: translateY(6px) rotate(45deg); }
	.nf-header__toggle[aria-expanded="true"] .nf-header__bars::after { transform: translateY(-6px) rotate(-45deg); }

	.nf-header__menu {
		display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
		max-height: var(--nf-menu-max, calc(100vh - var(--nf-header-h)));
		overflow-y: auto; overscroll-behavior: contain;
		padding: 8px var(--nf-gutter) 28px; background: var(--nf-white); border-bottom: 1px solid var(--nf-rule);
	}
	.nf-header__menu.is-open { display: flex; }
	.nf-header__nav { margin: 0; }
	.nf-header__list { flex-direction: column; gap: 0; }
	.nf-header__link { display: flex; align-items: center; min-height: 56px; padding-block: 0; border-bottom: 1px solid var(--nf-rule); font-size: 20px; text-decoration: none; }
	.nf-header__item--current > .nf-header__link { color: var(--nf-crust-dark); }
	.nf-header__account { min-height: 56px; padding: 0; font-size: 18px; }
	.nf-header__preorder { width: 100%; margin: 12px 0 0; }

	/* Without JS the toggle can't work, so the links just sit under the bar. */
	html:not(.js) .nf-header__menu { display: flex; position: static; max-height: none; }
	html:not(.js) .nf-header__toggle { display: none; }
}
@media (max-width: 767.98px) { .nf-header__bar { padding-block: 12px; } .nf-header__cart-label { letter-spacing: .03em; } }

/* Checkout: logo and "Back to the shop" only; it does not stick. */
.nf-header--minimal { position: static; }
.nf-header--minimal .nf-header__bar { justify-content: space-between; padding-block: 22px; }
.nf-header--minimal .nf-header__logo { width: 190px; }
.nf-header__back {
	display: inline-flex; align-items: center; gap: 10px; padding-block: 8px;
	font-size: 14px; font-weight: 600; line-height: 17px; letter-spacing: .04em; text-transform: uppercase; color: var(--nf-olive); text-decoration: none;
}
.nf-header__back:hover { text-decoration: underline; text-decoration-color: var(--nf-crust); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nf-header__back-arrow { display: inline-flex; transform: scaleX(-1); }
@media (max-width: 767.98px) {
	.nf-header--minimal .nf-header__bar { padding-block: 16px; }
	.nf-header--minimal .nf-header__logo { width: 150px; }
	.nf-header__back { font-size: 13px; }
}

/* ---------- Footer ---------- */

.nf-footer { background: var(--nf-olive); color: var(--nf-on-dark); padding-block: 80px 36px; }
.nf-footer :focus-visible { outline-color: var(--nf-wheat); }
.nf-footer a { color: inherit; }

.nf-footer__top { display: flex; align-items: flex-start; gap: 64px; }
.nf-footer__brand { display: flex; flex: 0 0 460px; flex-direction: column; align-items: flex-start; gap: 20px; }
.nf-footer__logo { display: block; width: 300px; max-width: 100%; height: auto; }
.nf-footer__banner { display: block; width: 294px; max-width: 100%; height: auto; }
.nf-footer__signup-line { margin: 0; font-size: 15px; line-height: 18px; opacity: .85; }

.nf-footer__col { flex: 1 1 0; min-width: 0; }
.nf-footer__heading { margin: 0 0 12px; font-size: 12px; font-weight: 600; line-height: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--nf-wheat); }
.nf-footer__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nf-footer__item { line-height: 18px; }
.nf-footer__link { display: inline-block; font-size: 15px; line-height: 18px; color: var(--nf-on-dark); text-decoration: none; }
.nf-footer__link:hover, .nf-footer__legal a:hover, .nf-footer__bar a:hover { text-decoration: underline; text-decoration-color: var(--nf-wheat); text-underline-offset: 4px; }
.nf-footer__item--current > .nf-footer__link { text-decoration: underline; text-decoration-color: var(--nf-wheat); text-underline-offset: 4px; }

.nf-footer__seal { flex: 0 0 110px; color: var(--nf-on-dark); line-height: 0; }
.nf-footer__seal :is(svg, img) { display: block; width: 110px; height: auto; }

.nf-footer__legal {
	display: flex; justify-content: space-between; gap: 8px 24px; margin-top: 64px; padding-top: 24px;
	border-top: 1px solid var(--nf-wheat); font-size: 13px; line-height: 16px;
}
.nf-footer__legal-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; opacity: .8; }
.nf-footer__legal-list li + li::before { content: "·"; content: "·" / ""; margin-inline: 9px; }
.nf-footer__credit { margin: 0; opacity: .8; white-space: nowrap; }

/* Email signup (Gravity Form): input and button on one row, matching the design. */
.nf-footer .nf-footer__signup { width: 100%; max-width: 460px; }
.nf-footer .nf-footer__signup .gform_wrapper { margin: 0; }
.nf-footer .nf-footer__signup form { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-start; }
.nf-footer .nf-footer__signup .gform_body { flex: 0 1 300px; min-width: 0; margin: 0; }
.nf-footer .nf-footer__signup .gform_footer { flex: none; width: auto; margin: 0 !important; padding: 0 !important; } /* beats the Gravity Forms theme's footer spacing */
.nf-footer .nf-footer__signup .gform_fields { row-gap: 0; }
.nf-footer .nf-footer__signup .gfield { margin: 0; }
.nf-footer .nf-footer__signup input[type="email"], .nf-footer .nf-footer__signup input[type="text"] {
	width: 100%; height: 50px; min-height: 50px; margin: 0; padding: 15px 18px; border: 0; border-radius: var(--nf-radius);
	background: var(--nf-white); color: var(--nf-ink); font: 400 15px/1.2 var(--nf-font-body);
}
.nf-footer .nf-footer__signup input::placeholder { color: var(--nf-muted); opacity: 1; }
.nf-footer .nf-footer__signup .gform_button {
	height: 50px; min-height: 50px; margin: 0; padding: 0 24px; border: 0; border-radius: var(--nf-radius); cursor: pointer;
	background: var(--nf-crust); color: var(--nf-on-dark); font: 600 14px/1 var(--nf-font-body); letter-spacing: .04em; text-transform: uppercase;
}
.nf-footer .nf-footer__signup .gform_button:hover { background: var(--nf-crust-dark); }
.nf-footer .nf-footer__signup :is(.gform_validation_errors, .gfield_validation_message, .gform_confirmation_message) { margin-top: 8px; font-size: 14px; color: var(--nf-on-dark); }

@media (max-width: 1023.98px) {
	.nf-footer { padding-block: 64px 32px; }
	.nf-footer__top { flex-wrap: wrap; gap: 48px 32px; }
	.nf-footer__brand { flex: 1 0 100%; }
	.nf-footer__col { flex: 1 1 calc(33.333% - 32px); }
	.nf-footer__seal { order: 5; flex: 1 0 100%; }
	.nf-footer__legal { margin-top: 48px; }
}
@media (max-width: 767.98px) {
	.nf-footer__col { flex: 1 1 calc(50% - 16px); }
	.nf-footer__logo { width: 260px; }
	.nf-footer__link { padding-block: 5px; }
	.nf-footer__list { gap: 4px; }
	.nf-footer__legal { flex-direction: column; margin-top: 40px; }
	.nf-footer__credit { white-space: normal; }
	.nf-footer .nf-footer__signup form { flex-wrap: wrap; }
	.nf-footer .nf-footer__signup .gform_body { flex: 1 1 100%; }
}

/* Checkout footer: the legal line only. */
.nf-footer--minimal { padding: 0; border-top: 1px solid var(--nf-rule); background: var(--nf-white); color: var(--nf-muted); }
.nf-footer--minimal .nf-footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 28px; font-size: 13px; line-height: 16px; }
.nf-footer--minimal .nf-footer__copy { margin: 0; }
.nf-footer--minimal .nf-footer__legal-list { opacity: 1; }
.nf-footer--minimal :focus-visible { outline-color: var(--nf-crust); }
@media (max-width: 767.98px) { .nf-footer--minimal .nf-footer__bar { flex-direction: column; align-items: flex-start; padding-block: 24px; } }

/* ---------- Cart drawer ---------- */

html.nf-drawer-open, html.nf-menu-open { overflow: hidden; scrollbar-gutter: stable; }

.nf-drawer { position: fixed; inset: 0; z-index: 1000; overflow: hidden; visibility: hidden; transition: visibility 0s linear .3s; }
.admin-bar .nf-drawer { top: 32px; }
@media (max-width: 782px) { .admin-bar .nf-drawer { top: 46px; } }
.nf-drawer.is-open { visibility: visible; transition-delay: 0s; }
.nf-drawer__scrim { position: absolute; inset: 0; background: rgb(20 20 13 / .45); opacity: 0; transition: opacity .3s ease; }
.nf-drawer.is-open .nf-drawer__scrim { opacity: 1; }

.nf-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(460px, 100%);
	background: var(--nf-white); box-shadow: -8px 0 32px rgb(0 0 0 / .18); outline: 0;
	transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.nf-drawer.is-open .nf-drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.nf-drawer, .nf-drawer__scrim, .nf-drawer__panel { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

.nf-drawer__head { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 22px 20px 22px 28px; border-bottom: 1px solid var(--nf-rule); }
.nf-drawer__title { margin: 0; font-size: 24px; line-height: 30px; }
.nf-drawer__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--nf-radius); background: transparent; color: var(--nf-muted); cursor: pointer; }
.nf-drawer__close:hover { color: var(--nf-ink); }
.nf-drawer__close svg { width: 20px; height: 20px; }

.nf-drawer__inner { display: flex; flex: 1; flex-direction: column; min-height: 0; transition: opacity .15s ease .35s; }
.nf-drawer__inner.is-busy { opacity: .6; }
.nf-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 28px 24px; }

.nf-drawer__lines { margin: 0; padding: 0; list-style: none; }
.nf-line + .nf-line { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--nf-rule); }
.nf-line__row { display: flex; align-items: center; gap: 14px; }
.nf-thumb { display: block; flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: var(--nf-radius); background: var(--nf-paper-30); }
.nf-thumb--sm { width: 56px; height: 56px; }
.nf-thumb__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nf-line__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.nf-line__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 18px; color: var(--nf-ink); }
.nf-line__variation { margin: 0; font-size: 13px; line-height: 16px; color: var(--nf-muted); }
.nf-line__price { flex: none; margin: 0; font-size: 15px; font-weight: 600; line-height: 18px; color: var(--nf-ink); white-space: nowrap; }

.nf-qty { display: inline-flex; align-items: center; gap: 14px; padding: 5px 10px; border: 1px solid var(--nf-rule); border-radius: var(--nf-radius); font-size: 14px; line-height: 17px; }
.nf-qty__btn { position: relative; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--nf-muted); cursor: pointer; }
.nf-qty__btn--inc { color: var(--nf-olive); }
.nf-qty__btn::after { content: ""; position: absolute; inset: -8px -7px; }
.nf-qty__btn:hover { color: var(--nf-ink); }
.nf-qty__btn[disabled] { opacity: .35; cursor: not-allowed; }
.nf-qty__n { min-width: 1ch; font-weight: 600; color: var(--nf-ink); text-align: center; }
@media (pointer: coarse) { .nf-qty__btn::after { inset: -12px -10px; } }

.nf-note { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 12px 12px 14px; border-radius: 6px; background: var(--nf-paper); }
.nf-note__text { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; color: var(--nf-ink); }
.nf-note__text strong { font-weight: 600; }
.nf-note__add {
	flex: none; padding: 8px 12px; border: 1.5px solid var(--nf-olive); border-radius: var(--nf-radius); background: transparent; cursor: pointer;
	font: 600 12px/1.25 var(--nf-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--nf-olive); white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.nf-note__add:hover { background: var(--nf-olive); color: var(--nf-on-dark); }
.nf-note__add[disabled] { opacity: .45; cursor: not-allowed; }

.nf-drawer__sugg { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--nf-rule); }
.nf-drawer__body--empty .nf-drawer__sugg { margin-top: 28px; }
.nf-drawer__subtitle { margin: 0 0 12px; font-size: 18px; line-height: 22px; }
.nf-drawer__sugg-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nf-sugg { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--nf-rule); border-radius: 6px; }
.nf-sugg__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nf-sugg__name { margin: 0; font-size: 14px; font-weight: 600; line-height: 17px; color: var(--nf-ink); }
.nf-sugg__sub { margin: 0; font-size: 13px; line-height: 16px; color: var(--nf-muted); }
.nf-sugg__add {
	flex: none; padding: 8px 14px; border: 0; border-radius: var(--nf-radius); background: var(--nf-olive); color: var(--nf-on-dark); cursor: pointer;
	font: 600 12px/1.25 var(--nf-font-body); letter-spacing: .04em; text-transform: uppercase; transition: background-color .15s ease;
}
.nf-sugg__add:hover { background: var(--nf-olive-deep); }
.nf-drawer__add-all { width: 100%; margin-top: 16px; }
.nf-drawer__shop { width: 100%; }

.nf-drawer__foot { display: flex; flex: none; flex-direction: column; gap: 12px; padding: 20px 28px 24px; border-top: 1px solid var(--nf-rule); }
.nf-drawer__subtotal { display: flex; justify-content: space-between; margin: 0; font-family: var(--nf-font-display); font-size: 18px; font-weight: 700; line-height: 22px; color: var(--nf-ink); }
.nf-drawer__pickup { margin: 0; font-size: 14px; line-height: 17px; color: var(--nf-muted); }
.nf-drawer__checkout { width: 100%; min-height: 52px; border-radius: 6px; }
.nf-drawer__keep { display: block; padding: 4px; font-size: 14px; font-weight: 600; line-height: 17px; text-align: center; color: var(--nf-olive); text-decoration: none; }
.nf-drawer__keep:hover { text-decoration: underline; text-decoration-color: var(--nf-crust); text-underline-offset: 4px; }
.nf-drawer__notice { margin: 0 0 16px; padding: 10px 14px; border-radius: 6px; background: var(--nf-paper); font-size: 14px; line-height: 1.45; }

@media (max-width: 479.98px) {
	.nf-drawer__head { padding-left: 20px; }
	.nf-drawer__body { padding-inline: 20px; }
	.nf-drawer__foot { padding-inline: 20px; }
	.nf-note { flex-direction: column; align-items: flex-start; }
}