/* NuttyFrutyss UI — components styled per doc 03 design system. Tokens in tokens.css. */

/* ---------- Base ---------- */
/* Last-resort containment for horizontal overflow. `clip` is preferred over
   `hidden` because `hidden` turns the root into a scroll container, which
   breaks `position: sticky` on the site header; `clip` does not. Kept as a
   safety net only — real overflow is fixed at its source (see header sizing
   below), since a blown-out layout viewport can't be undone from here. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
	html, body { overflow-x: clip; }
}

/* TRUE root cause of the "blank area on the right when zoomed out" bug,
   confirmed by direct measurement via Chrome DevTools Protocol (not the
   header — that was a separate, smaller issue fixed below).
   Every horizontally-scrolling row here (`overflow-x: auto`) has flex
   children with a fixed min-width. Even though each row's own box is
   correctly sized and scrolls its overflow internally, mobile browsers'
   layout-viewport sizing pass reads the children's min-width total when
   deciding how wide the page needs to be — bypassing the row's own
   `overflow-x: auto` entirely. Measured live: on a 375px phone, the
   "Best Picks" row alone (5 items x 220px min-width) inflated the page's
   real layout viewport to 1233px, which is exactly the empty canvas users
   see when pinch-zooming out. `contain: layout` tells the browser this
   box's internal content cannot affect layout outside it, which stops
   that viewport-sizing pass from looking inside — verified to remove the
   inflation with zero visual change (items still render at full width). */
.nf-category-tiles, .nf-carousel, .nf-card-swatches, .nf-ajax-grid-body,
.nf-sibling-chips, .nf-payment-icons--sm, .nf-picks-list {
	contain: layout;
}
body {
	background: var(--nf-cream);
	font-family: var(--nf-font-body) !important;
	color: var(--nf-bark);
}
h1, h2, h3, h4, .nf-section-title {
	font-family: var(--nf-font-heading) !important;
	color: var(--nf-bark);
}

.nf-section { max-width: 1280px; margin: 0 auto; padding: 40px 24px; }
@media (min-width: 901px) { .nf-section { padding: 48px 24px; } }

/* Section header pattern: overline + Fraunces H2 + optional "View all →" */
.nf-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.nf-overline { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nf-olive); margin-bottom: 4px; }
.nf-section-title { font-size: 34px; font-weight: 600; margin: 0; line-height: 1.2; }
.nf-view-all { font-weight: 700; font-size: 14px; color: var(--nf-olive); text-decoration: none; white-space: nowrap; padding-bottom: 4px; }
.nf-view-all:hover { color: var(--nf-olive-dark); }
@media (max-width: 900px) { .nf-section-title { font-size: 26px; } }

/* ---------- Buttons ---------- */
.nf-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 10px 24px;
	border-radius: var(--nf-radius-button);
	font-family: var(--nf-font-body); font-weight: 700; font-size: 15px; letter-spacing: .02em;
	text-decoration: none; cursor: pointer; border: 2px solid transparent;
	transition: background var(--nf-transition), color var(--nf-transition), border-color var(--nf-transition);
}
.nf-btn-primary { background: var(--nf-honey); color: var(--nf-bark); }
.nf-btn-primary:hover { background: var(--nf-honey-dark); color: var(--nf-bark); }
.nf-btn-secondary { background: transparent; color: var(--nf-olive); border-color: var(--nf-olive); }
.nf-btn-secondary:hover { background: var(--nf-olive); color: var(--nf-white); }
.nf-btn-ghost { background: transparent; color: var(--nf-white); border-color: rgba(255,255,255,.6); }
.nf-btn-ghost:hover { border-color: var(--nf-white); background: rgba(255,255,255,.1); color: var(--nf-white); }

:is(a, button):focus-visible { outline: 2px solid var(--nf-honey); outline-offset: 2px; }

/* ---------- Hero (05) ---------- */
.nf-hero { position: relative; width: 100%; aspect-ratio: 3 / 1; min-height: 320px; overflow: hidden; background: var(--nf-olive); }
@media (max-width: 768px) { .nf-hero { aspect-ratio: 4 / 5; max-height: 560px; } }
.nf-hero-track { position: relative; width: 100%; height: 100%; }
.nf-hero-slide {
	position: absolute; inset: 0;
	background-image: var(--nf-hero-bg-desktop);
	background-size: cover; background-position: center;
	opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 400ms;
	display: flex; align-items: center;
}
/* Art-directed mobile crop (doc 05) — swaps to the dedicated Mobile Image field
   at the same breakpoint the hero card itself switches to its taller 4:5 ratio. */
@media (max-width: 768px) {
	.nf-hero-slide { background-image: var(--nf-hero-bg-mobile); }
}
.nf-hero-slide.is-active { opacity: 1; visibility: visible; }
/* Brand gradient for slides without an uploaded image */
.nf-hero-slide--brand {
	background:
		radial-gradient(ellipse 60% 90% at 85% 20%, rgba(217, 154, 43, .28), transparent 60%),
		radial-gradient(ellipse 50% 80% at 70% 90%, rgba(111, 143, 63, .25), transparent 55%),
		linear-gradient(115deg, var(--nf-olive-dark) 0%, var(--nf-olive) 55%, #5A6332 100%);
}
.nf-hero-content { max-width: 640px; padding: 32px 24px 32px 64px; }
.nf-align-center { margin: 0 auto; text-align: center; padding: 32px 24px; }
.nf-hero-overline { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nf-hero-overline-color, var(--nf-honey)); margin-bottom: 12px; }
.nf-hero-heading { font-family: var(--nf-font-heading) !important; font-size: 44px; font-weight: 700; line-height: 1.15; color: var(--nf-hero-heading-color, var(--nf-cream)) !important; margin: 0 0 12px; }
.nf-hero-subtext { font-size: 17px; color: var(--nf-hero-subtext-color, rgba(250, 246, 238, .85)); margin: 0 0 24px; line-height: 1.6; }
.nf-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.nf-align-center .nf-hero-buttons { justify-content: center; }
/* Scoped to .nf-hero only — customizable via Customize → Hero Slider colors,
   without touching the same button classes used everywhere else on the site. */
.nf-hero .nf-btn-primary { background: var(--nf-hero-btn1-bg, var(--nf-honey)); color: var(--nf-hero-btn1-text, var(--nf-bark)); }
.nf-hero .nf-btn-primary:hover { filter: brightness(0.92); }
.nf-hero .nf-btn-ghost { color: var(--nf-hero-btn2-color, var(--nf-white)); border-color: var(--nf-hero-btn2-color, rgba(255,255,255,.6)); }
.nf-hero .nf-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 900px) {
	.nf-hero-heading { font-size: 32px; }
	.nf-hero-content { padding: 24px; }
}
.nf-hero-nav { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 20px; }
.nf-hero-prev, .nf-hero-next {
	background: rgba(250, 246, 238, .15); color: var(--nf-cream);
	border: 1px solid rgba(250, 246, 238, .35); width: 36px; height: 36px; border-radius: 50%;
	cursor: pointer; font-size: 18px; line-height: 1; transition: background var(--nf-transition);
}
.nf-hero-prev:hover, .nf-hero-next:hover { background: rgba(250, 246, 238, .3); }
.nf-hero-dots { display: flex; gap: 10px; }
.nf-hero-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; background: rgba(250, 246, 238, .4); cursor: pointer; transition: background var(--nf-transition), transform var(--nf-transition); }
.nf-hero-dot.is-active { background: var(--nf-honey); transform: scale(1.25); }

/* ---------- Featured Categories (06 §2) ---------- */
.nf-category-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (min-width: 1100px) { .nf-category-tiles { grid-template-columns: repeat(5, 1fr); } }
.nf-category-tile {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	text-decoration: none; color: var(--nf-bark);
	background: var(--nf-white); border: 1px solid var(--nf-sand);
	border-radius: var(--nf-radius-card); padding: 24px 16px 20px;
	box-shadow: var(--nf-shadow-card);
	transition: box-shadow var(--nf-transition), transform var(--nf-transition);
}
.nf-category-tile:hover { box-shadow: var(--nf-shadow-card-hover); transform: translateY(-2px); color: var(--nf-bark); }
.nf-category-tile img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.nf-category-tile-placeholder {
	width: 88px; height: 88px; border-radius: 50%;
	background: var(--nf-sand);
	display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.nf-category-tile h3 { font-family: var(--nf-font-body) !important; font-size: 15px; font-weight: 700; margin: 14px 0 2px; }
.nf-category-tile span { font-size: 12px; color: var(--nf-leaf); font-weight: 600; }
@media (max-width: 900px) {
	.nf-category-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.nf-category-tile { flex: 0 0 150px; scroll-snap-align: start; }
}

/* ---------- Carousels (06 §3/§4) ---------- */
.nf-carousel {
	display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 4px 4px 16px; scrollbar-width: none; scroll-behavior: smooth;
}
.nf-carousel::-webkit-scrollbar { display: none; }
/* Percentage-based, not a fixed px width: at every breakpoint the visible
   cards + gaps add up to exactly 100%, so there's never a partial "half"
   card peeking in at the edge (client feedback — wanted full cards, desktop
   included, not just mobile). Card-count tiers mirror the shop/related grid
   breakpoints elsewhere in this file for visual consistency. */
.nf-carousel .nf-card, .nf-ajax-grid-body .nf-card { flex: 0 0 calc((100% - 3 * 20px) / 4); scroll-snap-align: start; }
@media (max-width: 1100px) {
	.nf-carousel .nf-card, .nf-ajax-grid-body .nf-card { flex: 0 0 calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 900px) {
	.nf-carousel .nf-card, .nf-ajax-grid-body .nf-card { flex: 0 0 calc((100% - 20px) / 2); }
	.nf-carousel .nf-qty-stepper, .nf-ajax-grid-body .nf-qty-stepper { display: none; }
	.nf-card-swatches { flex-wrap: wrap; overflow-x: visible; }
}
.nf-carousel-arrows { display: flex; gap: 8px; }
.nf-carousel-prev, .nf-carousel-next, .nf-grid-prev, .nf-grid-next {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--nf-sand); background: var(--nf-white); color: var(--nf-olive);
	font-size: 18px; line-height: 1; cursor: pointer;
	box-shadow: var(--nf-shadow-card);
	transition: background var(--nf-transition), color var(--nf-transition);
}
.nf-carousel-prev:hover, .nf-carousel-next:hover, .nf-grid-prev:hover, .nf-grid-next:hover { background: var(--nf-olive); color: var(--nf-white); }

/* ---------- Product Card (07) ---------- */
.nf-card {
	background: var(--nf-white);
	border: 1px solid var(--nf-sand);
	border-radius: var(--nf-radius-card);
	overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: var(--nf-shadow-card);
	transition: box-shadow var(--nf-transition), transform var(--nf-transition);
}
.nf-card:hover { box-shadow: var(--nf-shadow-card-hover); transform: translateY(-2px); }
.nf-card-media { position: relative; display: block; aspect-ratio: 1; background: var(--nf-cream); }
.nf-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-badge {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 6px;
	background: var(--nf-honey); color: var(--nf-bark);
}
.nf-badge--sale { background: var(--nf-berry); color: var(--nf-white); }
.nf-badge--new { background: var(--nf-leaf); color: var(--nf-white); }
.nf-rating {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	background: rgba(255,255,255,.92); color: var(--nf-bark);
	font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
}
.nf-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nf-card-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nf-olive); }
.nf-card-title {
	font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--nf-bark); text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.7em;
}
.nf-card-title:hover { color: var(--nf-olive); }
.nf-card-stock { font-size: 12px; font-weight: 600; }
.nf-in-stock { color: var(--nf-leaf); }
.nf-out-stock { color: var(--nf-berry); }
.nf-card-swatches {
	display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
	padding: 2px; margin: 0 -2px; min-height: 34px;
}
.nf-card-swatches::-webkit-scrollbar { display: none; }
.nf-swatch {
	flex: 0 0 auto;
	border: 1px solid var(--nf-sand); background: var(--nf-white); color: var(--nf-bark);
	border-radius: var(--nf-radius-swatch); padding: 5px 10px;
	font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
	transition: border-color var(--nf-transition), background var(--nf-transition);
}
.nf-swatch:hover { border-color: var(--nf-olive); }
.nf-swatch.is-selected { border: 2px solid var(--nf-olive); background: var(--nf-sand); padding: 4px 9px; }
.nf-swatch.is-oos { text-decoration: line-through; color: #A9A29A; cursor: not-allowed; }
.nf-card-price { font-family: var(--nf-font-heading); font-size: 18px; font-weight: 700; color: var(--nf-bark); }
/* flex-start (not center): on narrow related-products cards "Add to cart" wraps
   to 2 lines while the qty stepper stays a fixed 40px — centering made the
   button visibly sit lower/offset from the stepper. Top-aligning both keeps
   them level regardless of how many lines the button label takes. */
.nf-card-actions { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 4px; }
.nf-qty-stepper {
	display: flex; align-items: center; flex: 0 0 auto;
	border: 1px solid var(--nf-sand); border-radius: 999px; overflow: hidden; height: 40px; background: var(--nf-white);
}
.nf-qty-stepper button {
	background: none; border: none; width: 30px; height: 100%;
	cursor: pointer; font-size: 15px; color: var(--nf-olive); font-weight: 700;
}
.nf-qty-stepper button:hover { background: var(--nf-sand); }
.nf-qty-input { width: 30px; text-align: center; border: none; background: transparent; font-weight: 700; font-size: 13px; color: var(--nf-bark); -moz-appearance: textfield; padding: 0; }
.nf-qty-input::-webkit-outer-spin-button, .nf-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.nf-add-to-cart {
	flex: 1; min-height: 40px;
	background: var(--nf-honey); color: var(--nf-bark);
	border: none; border-radius: var(--nf-radius-button);
	font-family: var(--nf-font-body); font-weight: 700; font-size: 13px; letter-spacing: .02em;
	cursor: pointer; transition: background var(--nf-transition);
}
.nf-add-to-cart:hover { background: var(--nf-honey-dark); }
.nf-add-to-cart:disabled { background: var(--nf-sand); color: #A9A29A; cursor: not-allowed; }

/* ---------- AJAX Grid (06 §5) ---------- */
.nf-ajax-grid-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.nf-ajax-grid-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.nf-ajax-grid-arrows { display: flex; gap: 8px; }
.nf-ajax-grid-viewmore { font-size: 13px; font-weight: 700; color: var(--nf-olive); text-decoration: none; white-space: nowrap; }
.nf-ajax-grid-viewmore:hover { color: var(--nf-olive-dark); text-decoration: underline; }
.nf-ajax-grid-tabs { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }
.nf-grid-tab {
	border: none; border-radius: 999px; padding: 9px 22px;
	background: var(--nf-sand); color: var(--nf-bark);
	font-family: var(--nf-font-body); font-size: 14px; font-weight: 700;
	cursor: pointer; transition: background var(--nf-transition), color var(--nf-transition);
}
.nf-grid-tab:hover { background: #E5D9C0; }
.nf-grid-tab.is-active { background: var(--nf-olive); color: var(--nf-white); }
.nf-ajax-grid-body {
	display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth;
	scrollbar-width: none; padding: 4px 4px 16px; min-height: 420px;
}
.nf-ajax-grid-body::-webkit-scrollbar { display: none; }
.nf-grid-loading { padding: 40px 24px; color: var(--nf-olive); font-weight: 600; }

/* ---------- Trust Strip (06 §6) ---------- */
.nf-trust-strip {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
	background: var(--nf-white); border-radius: var(--nf-radius-card);
	box-shadow: var(--nf-shadow-card); padding: 32px 24px !important;
}
.nf-trust-item { display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; color: var(--nf-bark); }
.nf-trust-icon { font-size: 30px; }
@media (max-width: 900px) { .nf-trust-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Category / Shop pages (08) ---------- */
.nf-shop-header-band { background: var(--nf-sand); border-radius: var(--nf-radius-card); padding: 20px 24px; margin-bottom: 20px; }
.nf-sibling-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.nf-sibling-chips::-webkit-scrollbar { display: none; }
.nf-sibling-chips a {
	white-space: nowrap; border-radius: 999px; padding: 7px 16px;
	font-size: 13px; font-weight: 600; text-decoration: none;
	background: var(--nf-white); color: var(--nf-bark);
	transition: background var(--nf-transition), color var(--nf-transition);
}
.nf-sibling-chips a:hover, .nf-sibling-chips a.is-active { background: var(--nf-olive); color: var(--nf-white); }
.nf-shop-layout { display: flex; gap: 28px; align-items: flex-start; max-width: 1280px; margin: 0 auto; padding: 0 0 48px; }
.nf-shop-filters {
	width: 264px; flex-shrink: 0; position: sticky; top: 90px;
	background: var(--nf-white); border: 1px solid var(--nf-sand);
	border-radius: var(--nf-radius-card); padding: 20px; box-shadow: var(--nf-shadow-card);
}
.nf-filter-group { margin-bottom: 20px; }
.nf-filter-group h4 { font-family: var(--nf-font-body) !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; margin: 0 0 10px; text-transform: uppercase; color: var(--nf-olive); }
.nf-filter-group label { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; cursor: pointer; }
.nf-filter-group input[type="number"], .nf-filter-group select {
	border: 1px solid var(--nf-sand); border-radius: var(--nf-radius-swatch);
	padding: 8px 10px; font-family: var(--nf-font-body); font-size: 14px; background: var(--nf-white);
}
.nf-filter-price-row { display: flex; gap: 8px; }
.nf-filter-price-row input { width: 100%; min-width: 0; }
.nf-filter-apply { width: 100%; }
.nf-shop-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.nf-shop-grid ul.products { display: contents; list-style: none; margin: 0; padding: 0; }
/* WooCommerce's own woocommerce-layout.css puts a clearfix (content:" "; display:table)
   on ul.products via ::before/::after. display:contents hoists the real <li> children up
   to be direct grid items of .nf-shop-grid, but doesn't suppress those pseudo-elements —
   they render as two extra blank grid cells (first and last), pushing every real card over
   and leaving dead space. Kill them here. */
.nf-shop-grid ul.products::before, .nf-shop-grid ul.products::after { content: none !important; display: none !important; }
.nf-shop-grid li.product { list-style: none; margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; background: none; display: flex; }
.nf-shop-grid li.product .nf-card { width: 100%; }
.nf-filter-toggle { display: none; }
.nf-result-count { font-size: 13px; font-weight: 600; color: var(--nf-olive); margin-bottom: 14px; }
@media (max-width: 1100px) { .nf-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
	.nf-shop-layout { flex-direction: column; }
	.nf-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.nf-filter-toggle { display: inline-flex; margin-bottom: 14px; }
	.nf-shop-filters { display: none; width: 100%; position: static; }
	.nf-shop-filters.is-open { display: block; }
}

/* ---------- Single Product Page (09) ---------- */
.nf-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
.nf-pdp-gallery img { width: 100%; border-radius: var(--nf-radius-card); }
.nf-pdp-summary h1 { font-size: 34px; margin: 0 0 10px; }
.nf-pdp-summary .price { font-family: var(--nf-font-heading); font-size: 28px; font-weight: 700; color: var(--nf-bark); }
.nf-pdp-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.nf-pdp-swatch {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 10px 16px; min-width: 72px;
	border: 1px solid var(--nf-sand); background: var(--nf-white);
	border-radius: var(--nf-radius-swatch); cursor: pointer;
	transition: border-color var(--nf-transition), background var(--nf-transition);
}
.nf-pdp-swatch:hover { border-color: var(--nf-olive); }
.nf-pdp-swatch.is-selected { border: 2px solid var(--nf-olive); background: var(--nf-sand); padding: 9px 15px; }
.nf-pdp-swatch.is-oos { text-decoration: line-through; color: #A9A29A; cursor: not-allowed; }
.nf-pdp-swatch-label { font-weight: 700; font-size: 14px; color: var(--nf-bark); }
.nf-pdp-swatch-price { font-size: 12px; color: var(--nf-olive); font-weight: 600; }
.nf-pdp .single_add_to_cart_button {
	background: var(--nf-honey) !important; color: var(--nf-bark) !important;
	border: none !important; border-radius: var(--nf-radius-button) !important;
	font-weight: 700 !important; min-height: 48px; padding: 12px 32px !important;
}
.nf-pdp .single_add_to_cart_button:hover { background: var(--nf-honey-dark) !important; }
.nf-pdp-trust { font-size: 14px; color: var(--nf-bark); margin-top: 16px; background: var(--nf-sand); border-radius: var(--nf-radius-swatch); padding: 12px 16px; }
.nf-pdp-trust p { margin: 4px 0; }
.nf-pdp-sticky-cta {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
	background: var(--nf-white); border-top: 1px solid var(--nf-sand);
	padding: 12px 16px; display: none; align-items: center; justify-content: space-between; gap: 12px;
	box-shadow: 0 -4px 16px rgba(59, 47, 35, .1);
}
.nf-pdp-sticky-cta.is-visible { display: flex; }
.nf-pdp-sticky-price { font-family: var(--nf-font-heading); font-weight: 700; font-size: 18px; }
@media (min-width: 769px) { .nf-pdp-sticky-cta { display: none !important; } }
@media (max-width: 768px) {
	/* .nf-pdp's own 24px side padding was stacking on top of the page
	   wrapper's (#primary.content-area) own 16px mobile padding — 40px
	   of combined inset on each side, far more than any other page.
	   The wrapper already provides edge spacing; drop this element's own. */
	.nf-pdp { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
	.nf-pdp-summary h1 { font-size: 26px; }
}
.nf-health-benefits { line-height: 1.6; }

/* ---------- Cart Drawer (10) ---------- */
.nf-cart-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.nf-cart-drawer.is-open { pointer-events: auto; }
.nf-cart-drawer-overlay { position: absolute; inset: 0; background: rgba(59, 47, 35, .5); opacity: 0; transition: opacity 300ms ease; }
.nf-cart-drawer.is-open .nf-cart-drawer-overlay { opacity: 1; }
.nf-cart-drawer-panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%;
	background: var(--nf-white); transform: translateX(100%); transition: transform 300ms ease;
	display: flex; flex-direction: column;
	border-radius: var(--nf-radius-card) 0 0 var(--nf-radius-card);
}
.nf-cart-drawer.is-open .nf-cart-drawer-panel { transform: translateX(0); }
.nf-cart-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--nf-sand); }
.nf-cart-drawer-header h2 { font-size: 20px; margin: 0; }
.nf-cart-drawer-close { background: var(--nf-sand); border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; color: var(--nf-bark); }
.nf-cart-drawer-fsb { padding: 0 20px; }
.nf-cart-drawer-items { flex: 1; overflow-y: auto; padding: 16px 20px; }
.nf-drawer-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--nf-sand); }
.nf-drawer-item-img img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--nf-radius-swatch); background: var(--nf-cream); }
.nf-drawer-item-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.nf-drawer-item-title { font-size: 13px; font-weight: 700; color: var(--nf-bark); }
.nf-drawer-item-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.nf-drawer-item-price { font-family: var(--nf-font-heading); font-weight: 700; font-size: 14px; }
.nf-drawer-qty { height: 32px; }
.nf-drawer-remove { background: none; border: none; cursor: pointer; font-size: 15px; opacity: .6; }
.nf-drawer-remove:hover { opacity: 1; }
.nf-cart-drawer-empty { text-align: center; padding: 48px 0; color: var(--nf-olive); }
.nf-cart-drawer-footer { border-top: 1px solid var(--nf-sand); padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; background: var(--nf-cream); border-radius: 0 0 0 var(--nf-radius-card); }
.nf-cart-drawer-subtotal { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
body.nf-drawer-open { overflow: hidden; }
.nf-cart-trigger { cursor: pointer; font-weight: 700; }

/* ---------- Free Shipping Bar (10 §3) ---------- */
.nf-free-shipping-bar { margin: 14px 0; }
.nf-fsb-message { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--nf-bark); }
.nf-fsb-unlocked { color: var(--nf-leaf); }
.nf-fsb-track { height: 8px; background: var(--nf-sand); border-radius: 999px; overflow: hidden; }
.nf-fsb-fill { height: 100%; background: var(--nf-leaf); border-radius: 999px; transition: width 300ms ease; }

/* ---------- Cross-sells (10 §2) ---------- */
.nf-cart-cross-sells { max-width: 1280px; margin: 40px auto 0; padding: 0 24px; }

/* ---------- Checkout (11) ---------- */
.nf-field-hidden { display: none !important; }

/* ---------- Topbar ---------- */
.nf-topbar { background: var(--nf-olive); color: var(--nf-cream); font-size: 12px; font-weight: 600; }
.nf-topbar-inner { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }


/* ---------- Site chrome: skip link, container ---------- */
.nf-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--nf-olive); color: var(--nf-white); padding: 12px 20px;
	border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
}
.nf-skip-link:focus { left: 0; }
#content { min-height: 40vh; }

/* ---------- Header ---------- */
.nf-site-header { background: var(--nf-white); border-bottom: 1px solid var(--nf-sand); position: sticky; top: 0; z-index: 60; }
.nf-header-main { max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nf-logo { display: flex; align-items: center; }
.nf-logo img { max-height: 52px; width: auto; display: block; }
.nf-logo-text { font-family: var(--nf-font-heading); font-weight: 700; font-size: 24px; color: var(--nf-olive); text-decoration: none; }
.nf-header-nav { display: flex; align-items: center; gap: 32px; }
.nf-primary-menu { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nf-primary-menu li { position: relative; }
.nf-primary-menu a {
	display: inline-flex; align-items: center; padding: 10px 14px;
	font-weight: 700; font-size: 14px; color: var(--nf-bark); text-decoration: none;
	border-radius: var(--nf-radius-button); transition: color var(--nf-transition), background var(--nf-transition);
}
.nf-primary-menu > li > a:hover, .nf-primary-menu > li.current-menu-item > a { color: var(--nf-olive); background: var(--nf-sand); }
.nf-primary-menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 220px;
	background: var(--nf-white); border: 1px solid var(--nf-sand); border-radius: var(--nf-radius-card);
	box-shadow: var(--nf-shadow-card-hover); list-style: none; margin: 8px 0 0; padding: 8px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--nf-transition), transform var(--nf-transition), visibility var(--nf-transition);
	z-index: 10;
}
.nf-primary-menu li:hover > .sub-menu, .nf-primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nf-primary-menu .sub-menu a { padding: 8px 12px; border-radius: var(--nf-radius-swatch); font-weight: 600; }
.nf-primary-menu .sub-menu a:hover { background: var(--nf-sand); color: var(--nf-olive); }
.nf-header-actions { display: flex; align-items: center; gap: 8px; }
.nf-cart-trigger {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--nf-sand); color: var(--nf-bark);
	border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 14px;
	text-decoration: none; transition: background var(--nf-transition);
}
.nf-cart-trigger:hover { background: var(--nf-honey); color: var(--nf-bark); }
.nf-mobile-toggle {
	display: none; background: none; border: none; cursor: pointer;
	width: 44px; height: 44px; align-items: center; justify-content: center;
	color: var(--nf-bark); font-size: 22px;
}
@media (max-width: 1024px) {
	.nf-header-nav { display: none; }
	.nf-mobile-toggle { display: inline-flex; }
}

/* ---------- Mobile off-canvas menu ---------- */
.nf-mobile-menu { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.nf-mobile-menu.is-open { pointer-events: auto; }
.nf-mobile-menu-overlay { position: absolute; inset: 0; background: rgba(59, 47, 35, .5); opacity: 0; transition: opacity 300ms ease; }
.nf-mobile-menu.is-open .nf-mobile-menu-overlay { opacity: 1; }
.nf-mobile-menu-panel {
	position: absolute; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85%;
	background: var(--nf-white); transform: translateX(-100%); transition: transform 300ms ease;
	overflow-y: auto; padding: 20px;
}
.nf-mobile-menu.is-open .nf-mobile-menu-panel { transform: translateX(0); }
.nf-mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.nf-mobile-menu-close { background: var(--nf-sand); border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; }
.nf-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.nf-mobile-menu li { border-bottom: 1px solid var(--nf-sand); }
.nf-mobile-menu a { display: block; padding: 12px 4px; font-weight: 700; color: var(--nf-bark); text-decoration: none; }
.nf-mobile-menu .sub-menu { padding-left: 12px; }
.nf-mobile-menu .sub-menu a { font-weight: 600; font-size: 14px; padding: 10px 4px; }
body.nf-mobile-menu-open { overflow: hidden; }

/* ---------- Footer ---------- */
.nf-site-footer { background: var(--nf-olive); color: var(--nf-cream); margin-top: 48px; }
.nf-footer-grid { max-width: 1280px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.nf-footer-col h4 { font-family: var(--nf-font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nf-honey); margin: 0 0 16px; }
.nf-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nf-footer-col a { color: var(--nf-cream); opacity: .85; text-decoration: none; font-size: 14px; }
.nf-footer-col a:hover { opacity: 1; text-decoration: underline; }
.nf-footer-brand .nf-logo-text { color: var(--nf-cream); }
/* Scoped to .nf-footer-logo specifically (not .nf-footer-brand img generally) — that
   broader selector was also catching the payment badge <img>s below it, turning them
   solid white via the invert filter and making them invisible on their white chips. */
.nf-footer-logo img { max-height: 44px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }
.nf-footer-blurb { font-size: 14px; line-height: 1.6; opacity: .85; margin: 0 0 18px; max-width: 320px; }
.nf-footer-social { display: flex; gap: 10px; }
.nf-footer-social a {
	width: 36px; height: 36px; border-radius: 50%; background: rgba(250,246,238,.12);
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.nf-footer-social a:hover { background: var(--nf-honey); color: var(--nf-bark); text-decoration: none; }
/* ---------- Payment icons (footer + PDP trust row) ---------- */
.nf-payment-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.nf-payment-badge {
	display: flex; align-items: center; justify-content: center;
	height: 32px; padding: 0 12px;
	background: var(--nf-white); border-radius: 8px;
	box-shadow: 0 1px 4px rgba(59, 47, 35, .18);
}
.nf-payment-badge img { height: 16px; width: auto; max-width: 56px; object-fit: contain; display: block; }
.nf-pdp-trust .nf-payment-icons { margin-top: 12px; }

/* Footer variant — smaller, forced to a single row (scrolls horizontally on the
   rare viewport too narrow to fit all 6, rather than wrapping to a 2nd line). */
.nf-payment-icons--sm {
	flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px;
	scrollbar-width: none;
}
.nf-payment-icons--sm::-webkit-scrollbar { display: none; }
.nf-payment-icons--sm .nf-payment-badge { flex: 0 0 auto; height: 24px; padding: 0 8px; }
.nf-payment-icons--sm .nf-payment-badge img { height: 11px; max-width: 38px; }
.nf-footer-bottom { border-top: 1px solid rgba(250,246,238,.15); }
.nf-footer-bottom-inner { max-width: 1280px; margin: 0 auto; padding: 18px 24px; text-align: center; font-size: 13px; opacity: .75; }
@media (max-width: 900px) { .nf-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nf-footer-grid { grid-template-columns: 1fr; } }

/* ---------- Minimal fallback pages (blog/404) ---------- */
.nf-simple-page { max-width: 800px; margin: 0 auto; padding: 48px 24px; }
.nf-simple-page h1 { font-size: 32px; }
.nf-post-list { display: flex; flex-direction: column; gap: 32px; max-width: 800px; margin: 0 auto; padding: 48px 24px; }
.nf-post-list article { border-bottom: 1px solid var(--nf-sand); padding-bottom: 32px; }
.nf-comments-area { max-width: 800px; margin: 0 auto; padding: 0 24px 48px; }
.woocommerce-page .nf-card a { text-decoration: none; }

/* ============================================================
   UI/UX PASS 2 — mega menu, Woo page alignment, mobile polish
   ============================================================ */

/* ---------- Icons ---------- */
.nf-icon { display: block; }
.nf-caret { font-size: 10px; opacity: .6; margin-left: 2px; }
.nf-submenu-icon { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; background: var(--nf-sand); border-radius: 8px; margin-right: 10px; font-size: 14px; flex-shrink: 0; }

/* ---------- Cart trigger (icon + count pill) ---------- */
.nf-cart-trigger { position: relative; padding: 10px 14px; gap: 6px; }
.nf-cart-trigger .nf-cart-count {
	background: var(--nf-honey); color: var(--nf-bark);
	min-width: 20px; height: 20px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 800; padding: 0 6px;
}

/* ---------- Mega menu ---------- */
/* Higher specificity than ".nf-primary-menu li { position: relative }" above (line 377),
   which was otherwise winning the cascade and confining the full-width mega panel to the
   narrow "Shop All" <li> instead of the header. */
.nf-primary-menu li.nf-mega-item { position: static; }
.nf-mega-panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--nf-white);
	border-top: 1px solid var(--nf-sand);
	border-radius: 0 0 var(--nf-radius-card) var(--nf-radius-card);
	box-shadow: 0 24px 48px rgba(59, 47, 35, .16);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity var(--nf-transition), transform var(--nf-transition), visibility var(--nf-transition);
	z-index: 50;
}
.nf-mega-item:hover .nf-mega-panel,
.nf-mega-item:focus-within .nf-mega-panel,
.nf-mega-item.is-open .nf-mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nf-mega-inner {
	max-width: 1280px; margin: 0 auto; padding: 28px 24px 20px;
	display: grid; grid-template-columns: 1fr 300px; gap: 28px;
}
.nf-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nf-mega-cat {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; border-radius: var(--nf-radius-card);
	text-decoration: none; color: var(--nf-bark);
	transition: background var(--nf-transition), transform var(--nf-transition);
}
.nf-mega-cat:hover { background: var(--nf-sand); transform: translateX(2px); }
.nf-mega-cat-icon {
	width: 48px; height: 48px; border-radius: 12px; background: var(--nf-cream);
	display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
	overflow: hidden;
}
.nf-mega-cat-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.nf-mega-cat-body { display: flex; flex-direction: column; gap: 1px; }
.nf-mega-cat-name { font-weight: 700; font-size: 14px; }
.nf-mega-cat-count { font-size: 12px; color: var(--nf-leaf); font-weight: 600; }
.nf-mega-promo {
	display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
	min-height: 240px; padding: 24px; border-radius: var(--nf-radius-card);
	background:
		radial-gradient(ellipse 70% 70% at 80% 15%, rgba(217, 154, 43, .35), transparent 60%),
		linear-gradient(150deg, var(--nf-olive-dark), var(--nf-olive) 70%, #5A6332);
	background-size: cover; background-position: center;
	color: var(--nf-cream); text-decoration: none;
	transition: transform var(--nf-transition), box-shadow var(--nf-transition);
}
.nf-mega-promo:hover { transform: translateY(-2px); box-shadow: var(--nf-shadow-card-hover); }
.nf-mega-promo-overline { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nf-honey); }
.nf-mega-promo-title { font-family: var(--nf-font-heading); font-size: 22px; font-weight: 700; line-height: 1.2; }
.nf-mega-promo-cta { font-size: 13px; font-weight: 700; color: var(--nf-honey); margin-top: 6px; }
.nf-mega-footer { border-top: 1px solid var(--nf-sand); }
.nf-mega-footer a {
	display: block; max-width: 1280px; margin: 0 auto; padding: 14px 24px;
	font-weight: 700; font-size: 13px; color: var(--nf-olive); text-decoration: none;
}
.nf-mega-footer a:hover { color: var(--nf-olive-dark); }

/* ---------- More dropdown (submenu w/ icons) ---------- */
.nf-primary-menu .sub-menu a { display: flex; align-items: center; }

/* ---------- Woo page containers: keep everything on a 1280px rail ---------- */
#primary.content-area { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; box-sizing: border-box; }
#primary.content-area main { width: 100%; }
.woocommerce-breadcrumb {
	font-size: 12px; font-weight: 600; color: var(--nf-olive) !important;
	padding: 16px 0 4px; letter-spacing: .02em;
}
.woocommerce-breadcrumb a { color: var(--nf-olive); text-decoration: none; }
.woocommerce-breadcrumb a:hover { text-decoration: underline; }
.woocommerce-products-header { padding: 8px 0 4px; }
.woocommerce-products-header__title { font-size: 34px; margin: 0 0 8px; }
.term-description { max-width: 720px; color: var(--nf-bark); opacity: .85; font-size: 15px; line-height: 1.6; margin-bottom: 8px; }

/* ---------- Simple pages: wide rail for commerce, narrow for text ---------- */
.nf-simple-page h1 { margin-top: 0; }
.woocommerce-cart .nf-simple-page,
.woocommerce-checkout .nf-simple-page,
.woocommerce-account .nf-simple-page { max-width: 1180px; }

/* ---------- WooCommerce buttons & notices (brand-wide) ---------- */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce input.button, .woocommerce #respond input#submit, button[type="submit"], .wp-element-button {
	background: var(--nf-honey) !important; color: var(--nf-bark) !important;
	border: none !important; border-radius: var(--nf-radius-button) !important;
	font-family: var(--nf-font-body) !important; font-weight: 700 !important;
	padding: 12px 24px !important; cursor: pointer;
	transition: background var(--nf-transition) !important; text-decoration: none !important;
}
.woocommerce .button:hover, .woocommerce a.button:hover, button[type="submit"]:hover { background: var(--nf-honey-dark) !important; }
.woocommerce .button:disabled { background: var(--nf-sand) !important; color: #A9A29A !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: none !important; border-left: 4px solid var(--nf-leaf) !important;
	background: var(--nf-white) !important; color: var(--nf-bark) !important;
	border-radius: var(--nf-radius-swatch) !important; box-shadow: var(--nf-shadow-card);
	padding: 14px 18px 14px 44px !important; margin-bottom: 20px !important;
}
.woocommerce-error { border-left-color: var(--nf-berry) !important; }
.woocommerce-info { border-left-color: var(--nf-honey) !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--nf-olive) !important; top: 14px !important; left: 14px !important; }

/* ---------- Forms (checkout, account, contact) ---------- */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .nf-page-content input[type="text"],
.nf-page-content input[type="email"], .nf-page-content input[type="tel"], .nf-page-content textarea {
	border: 1px solid var(--nf-sand); border-radius: var(--nf-radius-swatch);
	padding: 12px 14px; font-family: var(--nf-font-body); font-size: 14px;
	background: var(--nf-white); color: var(--nf-bark); width: 100%; box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row select:focus {
	outline: 2px solid var(--nf-honey); border-color: var(--nf-honey);
}
.woocommerce form .form-row label { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.select2-container--default .select2-selection--single {
	border: 1px solid var(--nf-sand) !important; border-radius: var(--nf-radius-swatch) !important;
	height: 46px !important; display: flex; align-items: center; padding: 0 8px;
}

/* ---------- Cart page ---------- */
.woocommerce table.shop_table {
	border: 1px solid var(--nf-sand) !important; border-radius: var(--nf-radius-card) !important;
	background: var(--nf-white); border-collapse: separate !important; border-spacing: 0;
	overflow: hidden; box-shadow: var(--nf-shadow-card);
}
.woocommerce table.shop_table th {
	background: var(--nf-cream); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--nf-olive); padding: 14px 16px !important; border: none !important;
}
.woocommerce table.shop_table td { padding: 14px 16px !important; border-top: 1px solid var(--nf-sand) !important; vertical-align: middle; }
.woocommerce table.shop_table img { width: 64px; border-radius: var(--nf-radius-swatch); }
.woocommerce-cart table.cart input.qty {
	border: 1px solid var(--nf-sand); border-radius: var(--nf-radius-swatch);
	padding: 8px; width: 64px; text-align: center; font-weight: 700;
}
.woocommerce a.remove {
	color: var(--nf-berry) !important; background: var(--nf-cream);
	border-radius: 50%; width: 28px; height: 28px; line-height: 28px;
}
.woocommerce a.remove:hover { background: var(--nf-berry) !important; color: var(--nf-white) !important; }
.cart_totals h2, #order_review_heading { font-size: 22px; }

/* ---------- Checkout ---------- */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
.woocommerce-checkout #customer_details { grid-column: 1; }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; }
.woocommerce-checkout #order_review {
	background: var(--nf-white); border: 1px solid var(--nf-sand);
	border-radius: var(--nf-radius-card); padding: 24px; box-shadow: var(--nf-shadow-card);
	position: sticky; top: 96px;
}
.woocommerce-checkout #order_review_heading { margin-bottom: -8px; align-self: end; }
.woocommerce-checkout #payment { background: transparent !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--nf-sand) !important; padding: 0 0 16px !important; }
.woocommerce-checkout #payment li { list-style: none; }
.woocommerce-checkout #payment div.payment_box { background: var(--nf-cream) !important; border-radius: var(--nf-radius-swatch); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--nf-cream) !important; }

/* ---------- Shipping method toggle buttons (Standard Delivery / PickMe Flash) ---------- */
.woocommerce-shipping-methods,
#shipping_method {
	display: flex; flex-wrap: wrap; gap: 12px;
	list-style: none; margin: 0 0 4px; padding: 0;
}
.woocommerce-shipping-methods li,
#shipping_method li {
	flex: 1 1 160px; margin: 0 !important; padding: 0 !important;
}
/* Visually hidden but still focusable/clickable via the <label for="">
   it's paired with — keeps this operable by keyboard, not just mouse. */
.woocommerce-shipping-methods li input.shipping_method,
#shipping_method li input.shipping_method {
	position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.woocommerce-shipping-methods li label,
#shipping_method li label {
	/* !important on display only: WooCommerce's own woocommerce.css ships
	   ".woocommerce ul#shipping_method li label { display: inline }", which
	   out-specifies this selector (adds a class + a tag) regardless of
	   source order — confirmed via the CSSOM, not guessed. */
	display: flex !important;
	align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 52px; box-sizing: border-box;
	border: 2px solid var(--nf-sand); border-radius: var(--nf-radius-button);
	padding: 10px 16px; margin: 0;
	background: var(--nf-white); color: var(--nf-bark);
	font-weight: 700; font-size: 14px; text-align: center; cursor: pointer;
	transition: border-color var(--nf-transition), background var(--nf-transition);
}
.woocommerce-shipping-methods li label:hover,
#shipping_method li label:hover { border-color: var(--nf-olive); }
.woocommerce-shipping-methods li:has(input.shipping_method:checked) label,
#shipping_method li:has(input.shipping_method:checked) label {
	border-color: var(--nf-olive); background: var(--nf-sand);
}
.woocommerce-shipping-methods li input.shipping_method:focus-visible + label,
#shipping_method li input.shipping_method:focus-visible + label {
	outline: 2px solid var(--nf-honey); outline-offset: 2px;
}
.nf-shipping-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nf-shipping-icon--truck { color: var(--nf-olive); }
/* !important on width only: the shipping row lives inside the same
   #order_review <table class="shop_table"> as the cart line items (that's
   just how WooCommerce's cart-shipping.php template renders it), so
   ".woocommerce table.shop_table img { width: 64px }" — meant for product
   thumbnails — also matches this logo and out-specifies plain "width:
   auto" (2 classes vs 1), forcing a fixed 64px width against an 18px
   height regardless of the logo's actual aspect ratio. Confirmed via the
   CSSOM, not guessed — this was a real non-uniform stretch, not just the
   logo being small. */
.nf-shipping-icon--pickme img { height: 20px; width: auto !important; display: block; }

/* PickMe Flash WhatsApp notice — rendered as its own <tr> unconditionally
   (see NF_Checkout::render_pickme_notice), shown only while the PickMe
   Flash radio is checked. :has() on the whole table (not a sibling
   combinator) because the notice row and the shipping row are siblings
   several levels removed from the actual radio input. */
.nf-pickme-notice-row td { padding: 0 !important; border: none !important; }
.nf-pickme-notice { display: none; }
table.shop_table:has(input.shipping_method[value="nf_pickme_flash"]:checked) .nf-pickme-notice {
	display: block;
	background: var(--nf-cream); border: 1px solid var(--nf-sand);
	border-radius: var(--nf-radius-card); padding: 14px 16px; margin: 4px 0 12px;
}
.nf-pickme-notice p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--nf-bark); }
.nf-pickme-notice p:last-of-type { margin-bottom: 12px; }
.nf-pickme-notice-link {
	display: inline-flex; align-items: center; gap: 8px;
	background: #25D366; color: #fff !important; text-decoration: none !important;
	font-weight: 700; font-size: 13px; padding: 10px 16px;
	border-radius: var(--nf-radius-button);
	transition: filter var(--nf-transition);
}
.nf-pickme-notice-link:hover { filter: brightness(0.94); }
@media (max-width: 900px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading { grid-column: 1; }
	.woocommerce-checkout #order_review { position: static; }
}

/* ---------- PDP tabs / reviews / related ---------- */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 24px; }
.woocommerce-tabs ul.wc-tabs, .woocommerce-tabs ul.tabs {
	display: flex; gap: 10px; list-style: none; margin: 0 0 0 !important; padding: 0 !important;
	border-bottom: 1px solid var(--nf-sand) !important; background: none !important;
}
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce-tabs ul.tabs li {
	background: none !important; border: none !important; border-radius: 0 !important;
	margin: 0 !important; padding: 0 !important;
}
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a {
	display: inline-block; padding: 12px 20px !important;
	font-weight: 700 !important; font-size: 14px; color: var(--nf-bark) !important;
	border-bottom: 3px solid transparent; text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--nf-olive) !important; border-bottom-color: var(--nf-honey); }
.woocommerce-tabs .panel {
	background: var(--nf-white); border: 1px solid var(--nf-sand); border-top: none;
	border-radius: 0 0 var(--nf-radius-card) var(--nf-radius-card);
	padding: 24px !important; line-height: 1.7;
}
.related.products { grid-column: 1 / -1; margin-top: 40px; }
.related.products > h2 { font-size: 26px; margin-bottom: 16px; }
ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 16px 0 0; padding: 0; align-items: stretch; }
/* Same WooCommerce clearfix pseudo-element bug as the shop grid (see .nf-shop-grid
   ::before/::after above): ul.products itself is display:grid here, so its own
   ::before/::after clearfix content becomes a real, invisible grid item — eating
   the first cell, shoving every real card over, and throwing off row stretch
   (which is why related-product cards were rendering at uneven sizes). */
ul.products::before, ul.products::after { content: none !important; display: none !important; }
ul.products li.product { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; position: static !important; display: flex; min-width: 0; }
ul.products li.product .nf-card { width: 100%; }
@media (max-width: 900px) { ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Reviews */
.woocommerce-Reviews .commentlist { list-style: none; margin: 0; padding: 0; }
.woocommerce-Reviews .commentlist li { border-bottom: 1px solid var(--nf-sand); padding: 16px 0; }
.woocommerce-Reviews .comment-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.woocommerce p.stars a { color: var(--nf-honey) !important; }

/* ---------- My Account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0; padding: 8px; background: var(--nf-white);
	border: 1px solid var(--nf-sand); border-radius: var(--nf-radius-card); box-shadow: var(--nf-shadow-card);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: 10px 14px; border-radius: var(--nf-radius-swatch);
	font-weight: 600; color: var(--nf-bark); text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--nf-sand); color: var(--nf-olive); }

/* ---------- Mobile menu (improved) ---------- */
.nf-mobile-menu-section { margin-bottom: 20px; }
.nf-mobile-menu-label {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--nf-olive); margin-bottom: 8px;
}
.nf-mobile-menu a { display: flex; align-items: center; }
.nf-mobile-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--nf-leaf); background: var(--nf-cream); border-radius: 999px; padding: 2px 8px; }
.nf-mobile-cart-btn { width: 100%; margin-top: 8px; }

/* ---------- Mobile polish ---------- */
@media (max-width: 640px) {
	.nf-topbar-extra { display: none; }
	.nf-section { padding: 28px 16px; }
	.nf-section-title { font-size: 24px; }
	/* ROOT CAUSE of the "blank area to the right of the page" bug: at 375px the
	   header row measured 449px wide (logo 139 + actions 280 + padding). That
	   ~74px content overflow made the browser widen the layout viewport, and the
	   fixed-position off-canvas panels then re-sized to that wider viewport and
	   amplified it further (measured: 975px viewport on a 375px screen), leaving
	   two-thirds of the screen as empty background when zoomed out.
	   Wishlist + My Account are dropped here rather than shrunk — both are
	   already reachable from the mobile menu's quicklinks, so nothing is lost. */
	.nf-header-main { padding: 12px 16px; gap: 8px; min-width: 0; }
	.nf-logo { min-width: 0; flex-shrink: 1; }
	.nf-logo img { max-height: 34px; max-width: 100%; }
	.nf-header-actions { gap: 2px; flex-shrink: 0; }
	.nf-header-actions .nf-wishlist-trigger,
	.nf-header-actions .nf-account-trigger { display: none; }
	.nf-icon-btn { width: 36px; height: 36px; }
	.nf-cart-trigger { padding: 8px 10px; gap: 5px; }
	.nf-mobile-toggle { width: 40px; }
	.nf-hero-heading { font-size: 28px; }
	.nf-hero-subtext { font-size: 15px; }
	.nf-card-body { padding: 12px; gap: 6px; }
	.nf-card-title { font-size: 14px; }
	.nf-card-price { font-size: 15px; }
	.nf-shop-grid .nf-qty-stepper { display: none; } /* grid too tight for stepper — PDP/drawer still have it */
	.nf-category-tile { flex: 0 0 132px; padding: 16px 10px 14px; }
	.nf-category-tile-placeholder, .nf-category-tile img { width: 64px; height: 64px; font-size: 28px; }
	.nf-grid-tab { padding: 7px 16px; font-size: 13px; }
	.nf-trust-strip { gap: 14px; padding: 24px 16px !important; }
	.nf-footer-grid { padding: 40px 16px 28px; gap: 24px; }
	.woocommerce-products-header__title { font-size: 26px; }
	#primary.content-area { padding: 0 16px; }
}

/* ============================================================
   PDP layout fix — WooCommerce's layout stylesheet floats
   div.images / div.summary to 48% width, which fights our grid
   (shrunken gallery, ragged swatch wrapping). Neutralize inside
   .nf-pdp and style the full doc-09 summary stack.
   ============================================================ */
.nf-pdp div.images,
.nf-pdp div.summary,
.nf-pdp .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}
.nf-pdp .woocommerce-product-gallery__wrapper { margin: 0; }
.nf-pdp .woocommerce-product-gallery__image { border-radius: var(--nf-radius-card); overflow: hidden; }
.nf-pdp .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.nf-pdp .woocommerce-product-gallery__image--placeholder {
	background: var(--nf-sand); border: none; aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
}
.nf-pdp .woocommerce-product-gallery__image--placeholder img { object-fit: contain; max-height: 70%; }
.nf-pdp ol.flex-control-thumbs { display: flex; gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; }
.nf-pdp ol.flex-control-thumbs li { width: 72px; }
.nf-pdp ol.flex-control-thumbs img { border-radius: var(--nf-radius-swatch); cursor: pointer; opacity: .55; transition: opacity var(--nf-transition); }
.nf-pdp ol.flex-control-thumbs img.flex-active, .nf-pdp ol.flex-control-thumbs img:hover { opacity: 1; outline: 2px solid var(--nf-olive); outline-offset: 1px; }
.nf-pdp .woocommerce-product-gallery__trigger {
	background: var(--nf-white) !important; border-radius: 50% !important; box-shadow: var(--nf-shadow-card);
}
.nf-pdp span.onsale {
	position: absolute; top: 12px; left: 12px; z-index: 5;
	background: var(--nf-berry); color: var(--nf-white);
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	min-width: 0; min-height: 0; line-height: 1; padding: 6px 12px; border-radius: 6px; margin: 0;
}

/* Summary stack — doc 09 order: category > title > price > excerpt > weight > qty+CTA > trust > meta */
.nf-pdp-cat {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--nf-olive); text-decoration: none; margin-bottom: 6px;
}
.nf-pdp-cat:hover { color: var(--nf-olive-dark); text-decoration: underline; }
.nf-pdp-summary .product_title { font-size: 36px; line-height: 1.15; margin: 0 0 10px; }
.nf-pdp-summary p.price { margin: 0 0 16px; }
.nf-pdp-summary p.price .amount { font-family: var(--nf-font-heading); font-size: 26px; font-weight: 700; color: var(--nf-bark); }
.nf-pdp-summary .woocommerce-product-details__short-description { font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
.nf-pdp-summary .woocommerce-product-details__short-description p { margin: 0 0 10px; }

/* Variations table → clean stacked block: label above, swatches flowing left */
.nf-pdp table.variations,
.nf-pdp table.variations tbody,
.nf-pdp table.variations tr,
.nf-pdp table.variations th,
.nf-pdp table.variations td {
	display: block; width: 100%; padding: 0; margin: 0; border: none; background: none; text-align: left;
}
.nf-pdp table.variations { margin: 8px 0 0; }
.nf-pdp table.variations th.label {
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--nf-olive); margin-bottom: 10px;
}
.nf-pdp table.variations th.label label { font: inherit; color: inherit; margin: 0; }
.nf-pdp .nf-pdp-swatches { margin: 0 0 4px; justify-content: flex-start; }
.nf-pdp .reset_variations { font-size: 12px; color: var(--nf-olive); }

/* Selected-variation info: price + stock line */
.nf-pdp .woocommerce-variation.single_variation { margin: 12px 0 4px; }
.nf-pdp .woocommerce-variation-price .price .amount { font-family: var(--nf-font-heading); font-size: 24px; font-weight: 700; color: var(--nf-bark); }
.nf-pdp .woocommerce-variation-availability p { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.nf-pdp .woocommerce-variation-availability .in-stock { color: var(--nf-leaf); }
.nf-pdp .woocommerce-variation-availability .out-of-stock { color: var(--nf-berry); }

/* Qty + Add-to-cart row */
.nf-pdp .woocommerce-variation-add-to-cart { display: flex; gap: 12px; align-items: stretch; margin-top: 12px; }
.nf-pdp .quantity { margin: 0 !important; float: none !important; }
.nf-pdp .quantity input.qty {
	width: 80px; height: 48px; text-align: center; font-weight: 700; font-size: 15px;
	border: 1px solid var(--nf-sand); border-radius: var(--nf-radius-button);
	background: var(--nf-white); color: var(--nf-bark);
}
.nf-pdp .single_add_to_cart_button { flex: 1; max-width: 360px; font-size: 15px !important; }
.nf-pdp .single_add_to_cart_button.disabled { background: var(--nf-sand) !important; color: #A9A29A !important; cursor: not-allowed; }

/* Meta block: SKU / categories / tags / brand */
.nf-pdp .product_meta {
	margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--nf-sand);
	display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--nf-bark);
}
.nf-pdp .product_meta > span { display: block; }
.nf-pdp .product_meta a { color: var(--nf-olive); font-weight: 600; text-decoration: none; }
.nf-pdp .product_meta a:hover { text-decoration: underline; }
.nf-pdp .product_meta .sku_wrapper .sku { font-weight: 700; }

@media (max-width: 768px) {
	.nf-pdp-summary .product_title { font-size: 27px; }
	.nf-pdp .single_add_to_cart_button { max-width: none; }
}

/* ============================================================
   FIX PASS — nav visibility, checkout layout, cart totals
   ============================================================ */

/* Nav was hidden below 1025px, so laptops at ~1000px CSS width never saw the
   mega menu. Keep desktop nav down to 901px with compact sizing in between. */
@media (max-width: 1200px) {
	.nf-primary-menu a { padding: 10px 9px; font-size: 13px; }
	.nf-header-main { gap: 14px; }
	.nf-logo img { max-height: 42px; }
}
@media (min-width: 901px) {
	.nf-header-nav { display: flex !important; }
	.nf-mobile-toggle { display: none !important; }
}
@media (max-width: 900px) {
	.nf-header-nav { display: none; }
	.nf-mobile-toggle { display: inline-flex; }
}

/* ---------- Checkout layout (screenshot fix) ----------
   Woo floats .col-1/.col-2 to 48% inside #customer_details → squeezed billing
   column. Stack them full-width; pin order review to the right column.
   Desktop-only (min-width: 901px): this explicit grid-column/grid-row
   placement was unguarded and came AFTER the mobile stacking rule above
   (@media max-width:900px sets grid-column:1 on everything) — same
   selector specificity means source order wins, so this unconditional
   block was silently overriding mobile back into a 2-column grid despite
   grid-template-columns correctly being 1fr on mobile: explicitly placing
   an item at grid-column:2 makes the grid create an implicit 2nd column
   to satisfy it, regardless of the explicit single-track definition. */
@media (min-width: 901px) {
	.woocommerce-checkout form.checkout {
		grid-template-rows: auto auto 1fr;
	}
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 12px; align-self: auto; }
	.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none !important; width: 100% !important; margin: 0 !important;
}
.woocommerce-checkout #customer_details .col-2 { margin-top: 24px !important; }
.woocommerce-checkout #customer_details h3 { font-size: 24px; margin: 0 0 14px; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48.5%; }
@media (max-width: 600px) {
	/* WooCommerce core still floats these left/right; 48.5% of an already
	   narrow mobile checkout column is too cramped and reads as broken
	   (label wrapping pushes the two fields to uneven heights). Stack. */
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
}
.woocommerce form .form-row { margin-bottom: 14px; }
.woocommerce form .form-row textarea { min-height: 96px; }

/* Coupon / login toggles */
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 24px !important; }
.woocommerce a.showcoupon, .woocommerce-info a { color: var(--nf-olive) !important; font-weight: 700; }
form.checkout_coupon {
	border: 1px solid var(--nf-sand) !important; border-radius: var(--nf-radius-card) !important;
	background: var(--nf-white); padding: 20px !important;
}

/* ---------- Cart page: totals as a card, cross-sells full-width below ---------- */
.woocommerce-cart .cart-collaterals .cart_totals {
	float: right; width: 44%;
	background: var(--nf-white); border: 1px solid var(--nf-sand);
	border-radius: var(--nf-radius-card); box-shadow: var(--nf-shadow-card);
	padding: 24px;
}
.woocommerce-cart .cart-collaterals .cart_totals h2 { margin-top: 0; }
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table { border: none !important; box-shadow: none; background: none; }
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th { padding: 10px 0 !important; background: none; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; font-size: 15px !important; }
.nf-cart-cross-sells { clear: both; padding-top: 40px; margin-top: 8px; border-top: 1px solid var(--nf-sand); }
@media (max-width: 900px) {
	/* box-sizing defaults to content-box, so width:100% + this component's
	   own 24px padding (line ~1000) rendered ~48px wider than its container
	   — cart totals bled off the right edge of the screen. border-box makes
	   the 100% include the padding instead of adding to it. */
	.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; margin-top: 20px; box-sizing: border-box; }
}

/* Baloo headings breathe differently than Fraunces — slightly tighter line-height */
h1, h2, h3, .nf-section-title, .nf-hero-heading { line-height: 1.15; }
.nf-primary-menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* ============================================================
   FIX PASS 3 — grid overflow, admin bar, filter list
   ============================================================ */

/* Auto-fill tracks so the grid fits any viewport (fixed 4-col overflowed at
   ~1000px with the 264px sidebar), and min-width:0 so cards can shrink. */
.nf-shop-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.nf-shop-grid li.product, .nf-shop-grid .nf-card { min-width: 0; }
.nf-shop-layout { min-width: 0; }
.nf-shop-grid-wrap { min-width: 0; }
@media (max-width: 900px) { .nf-shop-grid { grid-template-columns: repeat(2, 1fr); } }

/* Any stray grid children that aren't product cards span the full row
   (safety net for plugins printing into the loop). */
.nf-shop-grid > *:not(li):not(ul):not(.nf-card) { grid-column: 1 / -1; }

/* Logged-in admin bar pushes the sticky header down instead of covering it. */
body.admin-bar .nf-site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nf-site-header { top: 46px; } }

/* Weight filter: 16 terms is a wall — cap and scroll. */
.nf-filter-group-scroll { max-height: 190px; overflow-y: auto; padding-right: 6px; }
.nf-filter-group-scroll::-webkit-scrollbar { width: 6px; }
.nf-filter-group-scroll::-webkit-scrollbar-thumb { background: var(--nf-sand); border-radius: 3px; }

/* Empty-ish credit bar link underline cleanup */
.ecomit-credit-link { border-bottom: none; }

/* ============================================================
   FIX PASS 4 — icon buttons, search panel, wishlist
   ============================================================ */

/* ---------- Header icon buttons (search / wishlist / account) ---------- */
.nf-icon-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%; border: none;
	background: transparent; color: var(--nf-bark); cursor: pointer;
	transition: background var(--nf-transition), color var(--nf-transition);
}
.nf-icon-btn:hover { background: var(--nf-sand); color: var(--nf-olive); }
.nf-wishlist-count {
	position: absolute; top: 2px; right: 2px;
	background: var(--nf-honey); color: var(--nf-bark);
	min-width: 15px; height: 15px; border-radius: 999px;
	font-size: 9px; font-weight: 800; align-items: center; justify-content: center; padding: 0 3px;
}

/* ---------- Search panel ---------- */
.nf-search-panel {
	position: absolute; top: 100%; left: 0; right: 0;
	background: var(--nf-white); border-top: 1px solid var(--nf-sand);
	box-shadow: 0 24px 48px rgba(59, 47, 35, .16);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity var(--nf-transition), transform var(--nf-transition), visibility var(--nf-transition);
	z-index: 70; max-height: 70vh; overflow-y: auto;
}
.nf-search-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nf-search-panel-inner {
	max-width: 720px; margin: 0 auto; padding: 20px 24px;
	display: flex; align-items: center; gap: 12px; color: var(--nf-olive);
}
.nf-search-input {
	flex: 1; border: none; outline: none; font-size: 18px;
	font-family: var(--nf-font-body); color: var(--nf-bark); background: transparent;
}
.nf-search-close { background: var(--nf-sand); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.nf-search-results { max-width: 720px; margin: 0 auto; padding: 0 24px 20px; }
.nf-search-loading, .nf-search-empty { color: var(--nf-olive); font-size: 14px; padding: 12px 0; }
.nf-search-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--nf-sand); text-decoration: none; color: var(--nf-bark); }
.nf-search-item:last-child { border-bottom: none; }
.nf-search-item img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--nf-radius-swatch); background: var(--nf-cream); }
.nf-search-item-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nf-search-item-title { font-weight: 700; font-size: 14px; }
.nf-search-item-sku { font-size: 11px; color: var(--nf-olive); }
.nf-search-item-price { font-family: var(--nf-font-heading); font-weight: 700; }
.nf-search-item-price .amount { font-family: var(--nf-font-heading); }

/* ---------- Wishlist heart ---------- */
.nf-wishlist-btn {
	position: absolute; top: 10px; right: 10px; z-index: 3;
	width: 34px; height: 34px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.92); color: var(--nf-bark); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background var(--nf-transition), color var(--nf-transition), transform var(--nf-transition);
}
.nf-wishlist-btn:hover { transform: scale(1.08); }
.nf-wishlist-btn.is-active { color: var(--nf-berry); }
.nf-wishlist-btn.is-active svg { fill: var(--nf-berry); }
.nf-card { position: relative; }
.nf-card-rating { font-size: 12px; font-weight: 700; color: var(--nf-bark); }
.nf-card-rating span { color: var(--nf-olive); font-weight: 600; }

/* ---------- Mobile menu quicklinks ---------- */
.nf-mobile-menu-quicklinks { display: flex; gap: 10px; margin-bottom: 12px; }
.nf-mobile-menu-quicklinks a {
	flex: 1; text-align: center; padding: 10px; border-radius: var(--nf-radius-swatch);
	background: var(--nf-sand); font-weight: 700; font-size: 13px; color: var(--nf-bark); text-decoration: none;
}

/* ---------- Wishlist page ---------- */
.nf-wishlist-empty { text-align: center; padding: 48px 0; color: var(--nf-bark); }
.nf-wishlist-empty p { margin-bottom: 16px; }

/* ============================================================
   HERO BENTO — main banner (left) + secondary banner + hot
   categories (right column), best-picks strip below.
   ============================================================ */

.nf-hero-bento { padding-top: 24px; }
.nf-hero-bento-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 20px;
	align-items: stretch;
}

/* Main slider — was full-bleed .nf-hero, now a rounded bento card. */
.nf-hero-bento .nf-hero {
	position: relative; width: 100%; height: 100%; min-height: 420px;
	border-radius: var(--nf-radius-card); overflow: hidden; background: var(--nf-olive);
}
.nf-hero-bento .nf-hero-content { padding: 32px; max-width: 420px; }
.nf-hero-bento .nf-hero-heading { font-size: 36px; }

.nf-hero-bento-side { display: flex; flex-direction: column; gap: 20px; min-height: 420px; }

/* Secondary promo banner */
.nf-secondary-banner {
	position: relative; flex: 1 1 45%; min-height: 170px;
	display: flex; flex-direction: column; justify-content: center; gap: 4px;
	padding: 24px; border-radius: var(--nf-radius-card); overflow: hidden;
	background-size: cover; background-position: center;
	color: var(--nf-cream); text-decoration: none;
	transition: transform var(--nf-transition), box-shadow var(--nf-transition);
}
.nf-secondary-banner:hover { transform: translateY(-2px); box-shadow: var(--nf-shadow-card-hover); color: var(--nf-cream); }
.nf-secondary-banner--brand {
	background:
		radial-gradient(ellipse 70% 90% at 85% 15%, rgba(217, 154, 43, .3), transparent 60%),
		linear-gradient(160deg, var(--nf-olive-dark) 0%, #232A12 100%);
}
.nf-secondary-banner .nf-hero-overline { margin-bottom: 2px; }
.nf-secondary-banner-heading { font-family: var(--nf-font-heading); font-size: 24px; font-weight: 700; line-height: 1.2; }
.nf-secondary-banner-subtext { font-size: 13px; color: rgba(250, 246, 238, .8); }

/* Hot categories — compact grid inside the right column */
.nf-hot-categories {
	flex: 1 1 55%; background: var(--nf-white); border: 1px solid var(--nf-sand);
	border-radius: var(--nf-radius-card); padding: 18px; box-shadow: var(--nf-shadow-card);
	display: flex; flex-direction: column;
}
.nf-hot-categories-title { font-family: var(--nf-font-body); font-size: 14px; font-weight: 700; margin: 0 0 14px; color: var(--nf-bark); }
.nf-hot-categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; flex: 1; align-content: start; }
.nf-hot-category { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--nf-bark); text-align: center; }
.nf-hot-category-icon {
	width: 52px; height: 52px; border-radius: 50%; background: var(--nf-cream);
	display: flex; align-items: center; justify-content: center; font-size: 24px;
	border: 1px solid var(--nf-sand); overflow: hidden;
	transition: border-color var(--nf-transition), transform var(--nf-transition);
}
.nf-hot-category:hover .nf-hot-category-icon { border-color: var(--nf-olive); transform: translateY(-2px); }
.nf-hot-category-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nf-hot-category-name { font-size: 11px; font-weight: 600; line-height: 1.25; }

@media (max-width: 1024px) {
	.nf-hero-bento-grid { grid-template-columns: 1fr; }
	.nf-hero-bento .nf-hero { min-height: 340px; }
	.nf-hero-bento-side { min-height: 0; }
	.nf-hot-categories-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
	.nf-secondary-banner { flex-basis: auto; min-height: 130px; }
	.nf-hot-categories-grid { grid-template-columns: repeat(4, 1fr); }
	.nf-hero-bento .nf-hero-heading { font-size: 26px; }
}

/* ---------- Best Picks strip ---------- */
.nf-picks-list {
	background: var(--nf-white); border: 1px solid var(--nf-sand);
	border-radius: var(--nf-radius-card); box-shadow: var(--nf-shadow-card);
	display: flex; overflow-x: auto; scrollbar-width: none;
}
.nf-picks-list::-webkit-scrollbar { display: none; }
.nf-pick {
	flex: 1 1 0; min-width: 190px; display: flex; align-items: center; gap: 12px;
	padding: 18px; text-decoration: none; color: var(--nf-bark);
	border-right: 1px solid var(--nf-sand);
	transition: background var(--nf-transition);
}
.nf-pick:last-child { border-right: none; }
.nf-pick:hover { background: var(--nf-cream); }
.nf-pick-img { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--nf-radius-swatch); overflow: hidden; background: var(--nf-cream); }
.nf-pick-img img { width: 100%; height: 100%; object-fit: cover; }
.nf-pick-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nf-pick-title { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-pick-rating { color: var(--nf-honey); font-size: 12px; letter-spacing: 1px; }
.nf-pick-price { font-family: var(--nf-font-heading); font-weight: 700; font-size: 14px; color: var(--nf-berry); }
@media (max-width: 900px) {
	.nf-picks-list { flex-wrap: nowrap; }
	.nf-pick { min-width: 220px; }
}

/* ============================================================
   Sticky WhatsApp chat button — bottom-right, pulses to feel
   "live", expands to reveal a label on hover/focus.
   ============================================================ */
.nf-whatsapp-fab {
	position: fixed; right: 20px; bottom: 20px; z-index: 80;
	display: inline-flex; align-items: center;
	height: 56px; width: 56px; border-radius: 999px;
	background: #25D366; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
	text-decoration: none; overflow: hidden;
	transition: width 300ms ease, box-shadow 200ms ease;
}
.nf-whatsapp-fab:hover, .nf-whatsapp-fab:focus-visible {
	width: 196px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.nf-whatsapp-fab-icon {
	position: relative; flex: 0 0 56px; width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
}
.nf-whatsapp-fab-ping {
	position: absolute; inset: 6px; border-radius: 50%;
	background: rgba(37, 211, 102, .65);
	animation: nf-wa-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes nf-wa-ping {
	0% { transform: scale(1); opacity: .7; }
	75%, 100% { transform: scale(1.9); opacity: 0; }
}
.nf-whatsapp-fab-icon svg { position: relative; z-index: 1; }
.nf-whatsapp-fab-label {
	white-space: nowrap; color: #fff; font-weight: 700; font-size: 14px;
	padding-right: 20px; opacity: 0; transform: translateX(-6px);
	transition: opacity 200ms ease 60ms, transform 200ms ease 60ms;
}
.nf-whatsapp-fab:hover .nf-whatsapp-fab-label,
.nf-whatsapp-fab:focus-visible .nf-whatsapp-fab-label {
	opacity: 1; transform: translateX(0);
}
@media (max-width: 640px) {
	.nf-whatsapp-fab { right: 16px; bottom: 16px; height: 50px; width: 50px; }
	.nf-whatsapp-fab-icon { flex-basis: 50px; width: 50px; height: 50px; }
	.nf-whatsapp-fab-icon svg { width: 26px; height: 26px; }
	.nf-whatsapp-fab:hover, .nf-whatsapp-fab:focus-visible { width: 180px; }
}