/*
 * Newsite Base — component styles. Every colour, font and radius is a theme.json token,
 * so a store re-skins everything from its child theme's theme.json without touching this file.
 * Rules: lime-style "highlight" colour only ever on the brand-strong colour; the button keeps its
 * border (a light button colour on white is invisible without it); 44px+ tap targets; 16px form text.
 */

:root {
	--nsb-radius-card: var(--wp--custom--radius--card, 14px);
	--nsb-radius-panel: var(--wp--custom--radius--panel, 18px);
	--nsb-radius-small: var(--wp--custom--radius--small, 10px);
	--nsb-tap: var(--wp--custom--tap, 44px);
}

/* Focus: always visible, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
input, select, textarea { font-size: max(16px, 1rem); }

/* ---------- Announcement + header ---------- */
.nsb-announcement {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.55rem 16px;
}
.nsb-announcement p { margin: 0; }

.nsb-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}
.nsb-header__row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: 0.75rem 16px;
}
.nsb-header__tools { display: flex; align-items: center; gap: 0.5rem; }
.nsb-brand {
	display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
	color: var(--wp--preset--color--accent); min-height: var(--nsb-tap);
}
.nsb-brand__mark svg { display: block; width: 26px; height: auto; }
.nsb-brand__word {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1;
}
.nsb-brand__logo { max-height: 36px; width: auto; }

.nsb-menu__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.nsb-menu__list a {
	display: inline-flex; align-items: center; min-height: var(--nsb-tap); padding: 0 0.7rem;
	color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.nsb-menu__list a:hover, .nsb-menu__list .current-menu-item > a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 781px) {
	/* Phones: the menu stays visible as a swipeable row under the logo (no hamburger to hide "Refills"). */
	.nsb-header__row { flex-wrap: wrap; }
	.nsb-menu--primary { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 8px; }
	.nsb-menu--primary::-webkit-scrollbar { display: none; }
}

/* ---------- Footer ---------- */
.nsb-footer { border-top: 1px solid var(--wp--preset--color--line); margin-top: 3rem; }
.nsb-footer__inner {
	max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: 2rem 16px;
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
}
.nsb-menu--footer .nsb-menu__list { flex-wrap: wrap; }
.nsb-copyright { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-soft); }

/* ---------- Product page layout ---------- */
.nsb-pdp { max-width: var(--wp--style--global--wide-size); margin: 0 auto; }
.nsb-pdp__top {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2.5rem;
	padding: 1rem 0 2rem;
}
@media (min-width: 782px) {
	.nsb-pdp__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 2rem; }
	.nsb-pdp__media { position: sticky; top: 1rem; align-self: start; }
}
/* Phones: headline first, then media, then the buy box. */
@media (max-width: 781px) {
	.nsb-pdp__top { display: flex; flex-direction: column; }
	.nsb-pdp__head { order: 1; }
	.nsb-pdp__media { order: 2; }
	.nsb-pdp__buy { order: 3; }
}
@media (min-width: 782px) {
	.nsb-pdp__top { grid-template-areas: "media head" "media buy"; grid-template-rows: auto 1fr; }
	.nsb-pdp__media { grid-area: media; }
	.nsb-pdp__head { grid-area: head; }
	.nsb-pdp__buy { grid-area: buy; }
}
.nsb-pdp__buy > * + * { margin-top: 0.9rem; }

.nsb-headline-block { display: grid; gap: 0.35rem; }
.nsb-headline {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--display--weight, 800);
	line-height: var(--wp--custom--display--line-height, 1.05);
	letter-spacing: var(--wp--custom--display--tracking, -0.03em);
	font-size: var(--wp--preset--font-size--display);
	color: var(--wp--preset--color--accent);
}
.nsb-product-name, .nsb-subline { margin: 0; color: var(--wp--preset--color--contrast-soft); }
.nsb-product-name { font-weight: 600; }

/* Media */
.nsb-hero-video { position: relative; margin: 0 0 0.75rem; border-radius: var(--nsb-radius-panel); overflow: hidden; background: var(--wp--preset--color--accent); }
.nsb-hero-video video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 781px) { .nsb-hero-video video { aspect-ratio: 16 / 10; max-height: 260px; } }
.nsb-hero-video__toggle {
	position: absolute; right: 0.6rem; bottom: 0.6rem; min-height: 36px; padding: 0 0.8rem;
	border-radius: 999px; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.nsb-pdp__media .wc-block-product-gallery-large-image,
.nsb-pdp__media .wp-block-woocommerce-product-image img { border-radius: var(--nsb-radius-panel); }

/* Bundle cards */
.nsb-bundles { border: 0; margin: 0; padding: 0; display: grid; gap: 0.7rem; min-width: 0; }
.nsb-bundle {
	position: relative; display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer;
	min-height: 48px; padding: 0.85rem 1rem;
	border: 1.5px solid var(--wp--preset--color--border); border-radius: var(--nsb-radius-card);
	background: var(--wp--preset--color--base);
}
.nsb-bundle.has-badge { margin-top: 0.7rem; padding-top: 1.1rem; }
.nsb-bundle:has(.nsb-bundle__input:checked) {
	border: 2.5px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--muted);
	padding: calc(0.85rem - 1px) calc(1rem - 1px);
}
.nsb-bundle.has-badge:has(.nsb-bundle__input:checked) { padding-top: calc(1.1rem - 1px); }
.nsb-bundle__input { accent-color: var(--wp--preset--color--accent); width: 20px; height: 20px; margin: 0.15rem 0 0; flex: none; }
.nsb-bundle__body { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.nsb-bundle__row { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.nsb-bundle__name, .nsb-bundle__price { font-weight: 700; font-size: 1.0625rem; }
.nsb-bundle__price { white-space: nowrap; }
.nsb-bundle__price del { font-weight: 400; color: var(--wp--preset--color--contrast-soft); }
.nsb-bundle__row--sub { font-size: 0.9rem; color: var(--wp--preset--color--contrast-soft); }
.nsb-bundle__save { font-weight: 700; color: var(--wp--preset--color--accent); white-space: nowrap; }
.nsb-bundle__badge {
	position: absolute; top: -0.75rem; left: 1rem;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--highlight);
	font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
	padding: 0.2rem 0.65rem; border-radius: 999px; line-height: 1.3;
}
/* With cards showing, WooCommerce's own option buttons stay in the page (the cards press them) but out of sight. */
.nsb-has-bundles .wp-block-woocommerce-add-to-cart-with-options-variation-selector,
.nsb-has-bundles .nsb-pdp__buy .wp-block-woocommerce-product-price { display: none; }

/* Add to cart */
.nsb-pdp__buy .wc-block-add-to-cart-with-options { margin-top: 1rem; }
.nsb-pdp__buy .wc-block-add-to-cart-with-options .wp-block-button__link,
.nsb-pdp__buy .wc-block-add-to-cart-with-options button[type="submit"] {
	width: 100%; min-height: var(--wp--custom--button--height, 56px); justify-content: center;
}
.nsb-pdp__buy .wp-block-woocommerce-add-to-cart-with-options-quantity-selector { display: none; }

/* Refill line, promises, chips, callout */
.nsb-refill { margin: 0; font-weight: 600; }
.nsb-refill a { color: var(--wp--preset--color--link); text-decoration: none; display: inline-flex; min-height: var(--nsb-tap); align-items: center; }
.nsb-refill a:hover { text-decoration: underline; }
.nsb-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.nsb-trust li { display: flex; gap: 0.5rem; align-items: center; }
.nsb-trust .nsb-icon { color: var(--wp--preset--color--accent); flex: none; }
.nsb-trust a { display: inline-block; padding: 0.3rem 0; }
.nsb-callout {
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent);
	border-radius: var(--nsb-radius-card); padding: 1rem 1.1rem; line-height: 1.5;
}
.nsb-callout__title { color: var(--wp--preset--color--highlight); font-weight: 800; }
.nsb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nsb-chips li { background: var(--wp--preset--color--muted); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.85rem; font-weight: 600; }

/* Long description: sections built from the base patterns */
.nsb-pdp__details { padding: 1rem 0 2rem; }
.nsb-pdp__details > * { max-width: var(--wp--style--global--content-size); margin-left: auto; margin-right: auto; }
.nsb-pdp__details > .alignwide { max-width: var(--wp--style--global--wide-size); }

/* ---------- Pattern components ---------- */
.nsb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.nsb-fact { border: 1px solid var(--wp--preset--color--line); border-radius: var(--nsb-radius-card); padding: 1rem; display: grid; gap: 0.3rem; align-content: start; }
.nsb-fact .nsb-fact__number { margin: 0; font-family: var(--wp--preset--font-family--evidence); font-weight: 600; font-size: 1.85rem; line-height: 1.1; color: var(--wp--preset--color--accent); }
.nsb-fact p { margin: 0; }
.nsb-fact .nsb-fact__source { font-size: 0.85rem; }
.nsb-fact .nsb-fact__source a { display: inline-block; padding: 0.25rem 0; }

.nsb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 1.5rem; counter-reset: nsb-step; }
.nsb-step h3 { margin: 0 0 0.25rem; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.3rem; }
.nsb-step p { margin: 0; color: var(--wp--preset--color--contrast-soft); }

.nsb-compare table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.nsb-compare th, .nsb-compare td { text-align: left; padding: 0.7rem 0.9rem; border-top: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.nsb-compare thead th { background: var(--wp--preset--color--muted); border-top: 0; }
.nsb-compare figure, .nsb-compare.wp-block-table { border: 1px solid var(--wp--preset--color--line); border-radius: var(--nsb-radius-card); overflow: hidden; margin: 0; }
@media (max-width: 600px) {
	/* Phones: each row becomes a small card (label on top, the two answers side by side). */
	.nsb-compare thead { display: none; }
	.nsb-compare tr { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--wp--preset--color--line); }
	.nsb-compare td { border: 0; padding: 0.5rem 0.9rem; }
	.nsb-compare td:first-child { grid-column: 1 / -1; font-weight: 700; padding-bottom: 0; }
	.nsb-compare td[data-label]::before { content: attr(data-label) ": "; color: var(--wp--preset--color--contrast-soft); }
}

.nsb-faq details { border-top: 1px solid var(--wp--preset--color--line); }
.nsb-faq details:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.nsb-faq summary { cursor: pointer; min-height: var(--nsb-tap); display: flex; align-items: center; font-weight: 700; padding: 0.6rem 0; }
.nsb-faq details > :not(summary) { margin: 0 0 1rem; }

.nsb-panel { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); border-radius: var(--nsb-radius-panel); padding: 1.5rem; }
.nsb-panel :where(h2, h3) { color: var(--wp--preset--color--highlight); }

/* ---------- Phone sticky bar ---------- */
.nsb-sticky { display: none; }
@media (max-width: 781px) {
	.nsb-sticky:not([hidden]) {
		display: flex; align-items: center; gap: 0.75rem;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		padding: 0.7rem 16px calc(0.7rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--base);
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
	}
	.nsb-sticky__info { display: grid; line-height: 1.2; font-size: 0.9rem; min-width: 0; }
	.nsb-sticky__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.nsb-sticky__button { flex: 1; min-height: 50px; }
	body.nsb-sticky-on { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

.nsb-section { margin-top: 2.5rem; }
.nsb-section > h2 { margin: 0 0 1rem; }

/* Groups inside the header and product page are laid out by grid/flex above, not by block gap. */
.nsb-header__row > *, .nsb-header__tools > *, .nsb-footer__inner > *,
.nsb-pdp__top > *, .nsb-pdp__head > *, .nsb-pdp__media > * { margin-block: 0; }
.nsb-header__tools .wc-block-mini-cart__button, .nsb-header__tools .wc-block-customer-account__account-icon { min-width: var(--nsb-tap); min-height: var(--nsb-tap); }
@media (max-width: 781px) {
	/* Keep the first phone screen for headline, picture and bundles: photos are shown whole, but not taller than this. */
	.nsb-pdp__media .wc-block-product-gallery-large-image img,
	.nsb-pdp__media .wp-block-woocommerce-product-image img { max-height: 300px; width: 100%; object-fit: contain; }
}

/* With cards showing, the cards already say what's inside: hide WooCommerce's repeat of it under them. */
.nsb-has-bundles .nsb-pdp__buy .wp-block-woocommerce-add-to-cart-with-options-variation-description,
.nsb-has-bundles .nsb-pdp__buy .woocommerce-variation-description,
.nsb-has-bundles .nsb-pdp__buy .single_variation_wrap .woocommerce-variation-price { display: none; }
.nsb-pdp__buy .wc-block-add-to-cart-with-options .wp-block-woocommerce-product-button { width: 100%; }
.nsb-btn-price { white-space: nowrap; }

/*
 * Side padding lives on each page area, never on <body>: WooCommerce's slide-out cart writes
 * "padding-right: 0" straight onto <body>, which made every page lopsided (16px left, 0 right).
 * Top bar, header and footer therefore run edge to edge with no tricks.
 */
:root { --nsb-gutter: var(--wp--custom--gutter, 16px); }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group:not(.nsb-header):not(.nsb-footer) { padding-left: var(--nsb-gutter); padding-right: var(--nsb-gutter); }
.nsb-header__row, .nsb-footer__inner { padding-left: var(--nsb-gutter); padding-right: var(--nsb-gutter); }
.nsb-announcement { padding-left: var(--nsb-gutter); padding-right: var(--nsb-gutter); }
@media (max-width: 781px) {
	.nsb-menu--primary { margin: 0 calc(-1 * var(--nsb-gutter)); padding: 0 calc(var(--nsb-gutter) - 0.7rem); }
}

/* ---------- Icon set (use: <span class="nsb-ico nsb-ico--drop"></span>) ---------- */
.nsb-ico { display: inline-block; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--nsb-ico) center / contain no-repeat; mask: var(--nsb-ico) center / contain no-repeat; flex: none; }
.nsb-ico--drop { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3s-6 7-6 11a6 6 0 0 0 12 0c0-4-6-11-6-11z%22/%3E%3C/svg%3E"); }
.nsb-ico--spray { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4h7a3 3 0 0 1 3 3v1%22/%3E%3Cellipse cx=%2214%22 cy=%2210%22 rx=%226%22 ry=%222.2%22/%3E%3Cpath d=%22M10 15v3M14 15v5M18 15v3M12 16v3M16 16v3%22/%3E%3C/svg%3E"); }
.nsb-ico--hand { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 11V6a1.5 1.5 0 0 1 3 0v4M10 10V4.5a1.5 1.5 0 0 1 3 0V10M13 10V5.5a1.5 1.5 0 0 1 3 0V12M16 11a1.5 1.5 0 0 1 3 0v3a7 7 0 0 1-7 7h-.5A6.5 6.5 0 0 1 5 14.5V12a1.5 1.5 0 0 1 3 0%22/%3E%3C/svg%3E"); }
.nsb-ico--cartridge { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%228%22 y=%223%22 width=%228%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M8 8h8M8 13h8M8 18h8%22/%3E%3C/svg%3E"); }
.nsb-ico--shield { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z%22/%3E%3Cpath d=%22M9 12l2 2 4-4%22/%3E%3C/svg%3E"); }
.nsb-ico--truck { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h11v10H3zM14 9h4l3 3v4h-7%22/%3E%3Ccircle cx=%227%22 cy=%2218%22 r=%221.8%22/%3E%3Ccircle cx=%2217%22 cy=%2218%22 r=%221.8%22/%3E%3C/svg%3E"); }
.nsb-ico--box { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7l9-4 9 4-9 4zM3 7v10l9 4 9-4V7M12 11v10%22/%3E%3C/svg%3E"); }
.nsb-ico--chat { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3C/svg%3E"); }
.nsb-ico--leaf { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 19C5 10 11 5 20 5c0 9-5 15-14 15zM5 19l8-8%22/%3E%3C/svg%3E"); }
.nsb-ico--x { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6L6 18%22/%3E%3C/svg%3E"); }
.nsb-ico--check { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7%22/%3E%3C/svg%3E"); }

/* ---------- Buy box extras ---------- */
.nsb-benefits { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.nsb-benefits li { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 500; }
.nsb-benefits .nsb-icon { color: var(--wp--preset--color--accent); margin-top: 0.25rem; flex: none; }
.nsb-delivery { margin: 0; font-weight: 600; color: var(--wp--preset--color--accent); }

/* ---------- Long page: sections, bands, splits ---------- */
.nsb-pdp__details > * { max-width: var(--wp--style--global--wide-size); }
.nsb-pdp__details .nsb-section { margin-top: 3.5rem; }
.nsb-pdp__details .nsb-section > h2 { text-align: center; max-width: 760px; margin: 0 auto 0.6rem; }
.nsb-intro { text-align: center; max-width: 640px; margin: 0 auto 1.6rem !important; color: var(--wp--preset--color--contrast-soft); font-size: 1.06rem; }
.nsb-band { background: var(--wp--preset--color--surface); margin-left: calc(-1 * var(--nsb-gutter)); margin-right: calc(-1 * var(--nsb-gutter)); padding: 3rem var(--nsb-gutter); }
.nsb-pdp__details > .nsb-band { max-width: none; }
.nsb-band > * { max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto; }
.nsb-band.nsb-section { margin-top: 3.5rem; }

.nsb-split { display: grid; gap: 1.5rem 3rem; align-items: center; }
@media (min-width: 782px) { .nsb-split { grid-template-columns: 1fr 1fr; } .nsb-split.is-flipped > :first-child { order: 2; } }
.nsb-split h2 { text-align: left !important; margin: 0 0 0.75rem !important; }
.nsb-split > div > p { margin: 0 0 0.9rem; }
/* (old .nsb-media placeholder box removed in 0.17.0: the class now belongs to library media, see ugc-library.php) */

/* Icon tiles */
.nsb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.nsb-tile { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--nsb-radius-card); padding: 1.25rem; display: grid; gap: 0.4rem; align-content: start; }
.nsb-tile .nsb-ico { color: var(--wp--preset--color--accent); width: 34px; height: 34px; }
.nsb-tile h3 { margin: 0.25rem 0 0; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.15rem; color: var(--wp--preset--color--contrast); }
.nsb-tile p { margin: 0; color: var(--wp--preset--color--contrast-soft); }

/* Bar chart (numbers compared on one scale) */
.nsb-bars { display: grid; gap: 1rem; max-width: 820px; margin: 0 auto; }
.nsb-bar { display: grid; gap: 0.35rem; }
.nsb-bar__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.nsb-bar__label { font-weight: 600; }
.nsb-bar__value { font-family: var(--wp--preset--font-family--evidence); font-weight: 600; font-size: 1.5rem; color: var(--wp--preset--color--accent); white-space: nowrap; }
.nsb-bar__track { height: 18px; border-radius: 999px; background: var(--wp--preset--color--muted); overflow: hidden; }
.nsb-bar__fill { height: 100%; width: var(--w, 50%); border-radius: 999px; background: var(--wp--preset--color--accent); }
.nsb-bar.is-limit .nsb-bar__fill { background: repeating-linear-gradient(135deg, var(--wp--preset--color--accent) 0 10px, var(--wp--preset--color--contrast-soft) 10px 20px); }
.nsb-bar__source { font-size: 0.85rem; }
.nsb-bar__source a { display: inline-block; padding: 0.15rem 0; }
.nsb-bars + p { text-align: center; margin-top: 1.25rem; }

/* Checklist and "what it doesn't do" */
.nsb-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.nsb-checklist li { display: flex; gap: 0.6rem; align-items: flex-start; }
.nsb-checklist li::before { content: ""; width: 22px; height: 22px; flex: none; margin-top: 0.1rem; background: var(--wp--preset--color--accent); -webkit-mask: var(--nsb-ico) center / contain no-repeat; mask: var(--nsb-ico) center / contain no-repeat; }
.nsb-checklist li { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.nsb-panel .nsb-checklist li::before { background: var(--wp--preset--color--highlight); }
.nsb-honest { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.nsb-honest__item { border-radius: var(--nsb-radius-card); border: 1.5px dashed var(--wp--preset--color--border); padding: 1.1rem 1.2rem; }
.nsb-honest__item h3 { margin: 0 0 0.3rem; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.05rem; color: var(--wp--preset--color--contrast); }
.nsb-honest__item p { margin: 0; color: var(--wp--preset--color--contrast-soft); }

/* Panel used as a split column (e.g. hose section) */
.nsb-split .nsb-panel { padding: 1.75rem; }
.nsb-panel h2 { color: var(--wp--preset--color--highlight) !important; text-align: left !important; }
.nsb-panel p, .nsb-panel li { color: var(--wp--preset--color--on-accent); }
.nsb-panel a { color: var(--wp--preset--color--highlight); }

/* Refill timeline */
.nsb-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; counter-reset: nsb-t; }
.nsb-timeline li { position: relative; padding: 1.1rem 1.2rem 1.1rem 3.2rem; border-radius: var(--nsb-radius-card); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); }
.nsb-timeline li::before { counter-increment: nsb-t; content: counter(nsb-t); position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--highlight); font-weight: 800; font-size: 0.85rem; }
.nsb-timeline strong { display: block; }

/* What's in the box */
.nsb-box { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.nsb-box li { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--nsb-radius-card); padding: 0.9rem; text-align: center; font-weight: 600; }

/* Guarantee */
.nsb-guarantee { display: grid; gap: 1rem 2rem; align-items: center; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
@media (min-width: 782px) { .nsb-guarantee { grid-template-columns: auto 1fr; text-align: left; justify-items: start; } }
.nsb-guarantee__badge { width: 132px; height: 132px; border-radius: 50%; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--highlight); display: grid; place-content: center; text-align: center; line-height: 1; border: 6px solid var(--wp--preset--color--muted); }
.nsb-guarantee__badge strong { font-family: var(--wp--preset--font-family--display); font-size: 2.6rem; font-weight: 800; display: block; }
.nsb-guarantee__badge span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.nsb-guarantee h2 { text-align: inherit !important; margin: 0 0 0.4rem !important; }
.nsb-guarantee p { margin: 0 0 0.5rem; }

/* Closing call to action */
.nsb-cta { text-align: center; }
.nsb-cta h2 { color: var(--wp--preset--color--highlight) !important; font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5rem !important; }
.nsb-cta p { margin: 0 0 1.25rem; }
.nsb-cta .wp-block-button__link, .nsb-cta a.wp-element-button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 2rem; text-decoration: none; }

/* Comparison: any number of columns; phones stack each row with labelled answers */
@media (max-width: 600px) {
	.nsb-compare tr { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.nsb-compare td:nth-child(2), .nsb-compare th:nth-child(2) { background: color-mix(in srgb, var(--wp--preset--color--muted) 70%, transparent); font-weight: 600; }

/* FAQ reads narrower */
.nsb-pdp__details .nsb-faq { max-width: 820px; margin-left: auto; margin-right: auto; }
.nsb-panel a.wp-element-button, .nsb-panel .wp-block-button__link { color: var(--wp--preset--color--on-cta); background: var(--wp--preset--color--cta); border: 2px solid var(--wp--preset--color--highlight); }
.nsb-bar__label { flex: 1; min-width: 0; }
@media (max-width: 600px) {
	/* Phones: row label on top, then one small column per answer with its column name above it. */
	.nsb-compare tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nsb-compare tr:has(> td:nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nsb-compare td:first-child { grid-column: 1 / -1; }
	.nsb-compare td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 500; color: var(--wp--preset--color--contrast-soft); }
	.nsb-compare td { padding: 0.45rem 0.7rem; font-size: 0.9rem; overflow-wrap: anywhere; }
}
.nsb-bar__value { padding-right: 2px; }

/* ---------- v0.4 fixes (review panel) ---------- */
/* The page's own Add to cart keeps the bordered-button rule (WooCommerce's button style dropped the border). */
.nsb-pdp__buy .wc-block-add-to-cart-with-options button[type="submit"],
.nsb-pdp__buy .wc-block-add-to-cart-with-options .wp-block-button__link {
	border: var(--wp--custom--button--border-width, 2px) solid var(--wp--preset--color--cta-border) !important;
	background: var(--wp--preset--color--cta); color: var(--wp--preset--color--on-cta); border-radius: 999px; font-weight: 800;
}
/* Grid children must not take the block-gap top margin (it pushed rows out of line). */
:where(.nsb-tiles, .nsb-facts, .nsb-honest, .nsb-steps, .nsb-split, .nsb-timeline, .nsb-box, .nsb-guarantee) > * { margin-block-start: 0 !important; }
/* "What it doesn't do": quiet solid cards, not dashed placeholders. */
.nsb-honest__item { border: 0; background: var(--wp--preset--color--muted); }
/* FAQ: show that questions open. */
.nsb-faq summary { list-style: none; justify-content: space-between; gap: 1rem; }
.nsb-faq summary::-webkit-details-marker { display: none; }
.nsb-faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--wp--preset--color--accent); transition: transform 0.15s; flex: none; }
.nsb-faq details[open] summary::after { transform: rotate(45deg); }
/* Evidence voice: numbers and sources in Newsreader; section titles use the selling face (theme.json). */
.nsb-fact .nsb-fact__number, .nsb-bar__value { font-family: var(--wp--preset--font-family--evidence); }
@media (max-width: 781px) {
	/* First phone screen: headline → short picture/video → bundles → button. */
	.nsb-headline { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
	.nsb-pdp__top { gap: 0.9rem; padding-top: 0.75rem; }
	.nsb-pdp__media .wc-block-product-gallery-large-image img,
	.nsb-pdp__media .wp-block-woocommerce-product-image img { max-height: 230px; }
	.nsb-hero-video video { max-height: 230px; }
	.nsb-bundle { padding: 0.7rem 0.9rem; }
	.nsb-bundle.has-badge { padding-top: 0.95rem; }
	.nsb-announcement { font-size: 0.8rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
	/* Menu fits one phone row. */
	.nsb-menu__list a { padding: 0 0.55rem; font-size: 0.95rem; }
	.nsb-header__row { padding-top: 0.4rem; padding-bottom: 0.2rem; }
}
.nsb-pdp__buy .nsb-refill { font-size: 0.95rem; }
@media (max-width: 781px) {
	/* WooCommerce locks each gallery slide square; on phones use a short landscape slide so the bundles reach the first screen. */
	.nsb-pdp__media .wc-block-product-gallery-large-image__wrapper { aspect-ratio: 16 / 10; }
	.nsb-pdp__media .wc-block-product-gallery-large-image__wrapper img { height: 100%; max-height: none; width: 100%; object-fit: contain; }
	.nsb-pdp__media .wc-block-components-product-image, .nsb-pdp__media .wc-block-components-product-image__inner-container { height: 100%; }
	.nsb-product-name { font-size: 0.95rem; }
	.nsb-subline { font-size: 0.95rem; }
}
@media (max-width: 781px) {
	.nsb-pdp__media .wc-block-product-gallery-large-image__wrapper { aspect-ratio: 16 / 9; }
	.nsb-subline { display: none; }
	.nsb-bundle__row--sub { flex-direction: column; align-items: flex-start; gap: 0; }
	.nsb-menu__list a { min-height: 40px; }
	.nsb-header__row { row-gap: 0; }
	.nsb-headline-block { gap: 0.2rem; }
}

/* ---------- Proof components (fill only with real buyers' words, photos and videos) ---------- */
/* Star rating under the headline: WooCommerce's own block, shows only when real reviews exist. */
.nsb-pdp__head .wc-block-components-product-rating { margin: 0.2rem 0 0; }

/* Customer photos / videos: grid on desktop, swipe row on phones */
.nsb-ugc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1000px) { .nsb-ugc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.nsb-ugc { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--nsb-gutter)); padding: 0 var(--nsb-gutter) 0.5rem; scrollbar-width: none; }
	.nsb-ugc::-webkit-scrollbar { display: none; }
	.nsb-ugc__item { flex: 0 0 62%; scroll-snap-align: start; }
}
.nsb-ugc__item { display: grid; gap: 0.35rem; align-content: start; }
.nsb-ugc__media { aspect-ratio: 9 / 16; border-radius: var(--nsb-radius-card); overflow: hidden; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); display: grid; place-items: center; text-align: center; padding: 0.9rem; font-size: 0.85rem; font-weight: 600; position: relative; }
.nsb-ugc__media img, .nsb-ugc__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsb-ugc__item p { margin: 0; font-size: 0.9rem; }
.nsb-ugc__by { font-size: 0.8rem; color: var(--wp--preset--color--contrast-soft); }

/* Before / after slider */
.nsb-ba-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.nsb-ba-item { display: grid; gap: 0.5rem; }
.nsb-ba-item h3 { margin: 0; font-size: 1.1rem; }
.nsb-ba-item p { margin: 0; color: var(--wp--preset--color--contrast-soft); font-size: 0.92rem; }
.nsb-ba { --pos: 50%; position: relative; aspect-ratio: 4 / 3; border-radius: var(--nsb-radius-panel); overflow: hidden; user-select: none; background: var(--wp--preset--color--muted); }
.nsb-ba__img { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; font-weight: 600; font-size: 0.9rem; }
.nsb-ba__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsb-ba__before { background: #c9d2c7; color: var(--wp--preset--color--contrast); }
.nsb-ba__after { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); clip-path: inset(0 0 0 var(--pos)); }
.nsb-ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--wp--preset--color--highlight); box-shadow: 0 0 0 1px rgba(0,0,0,0.25); pointer-events: none; }
.nsb-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.nsb-ba__label { position: absolute; top: 0.6rem; z-index: 2; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; pointer-events: none; }
.nsb-ba__label.is-before { left: 0.6rem; }
.nsb-ba__label.is-after { right: 0.6rem; }
.nsb-ba__handle { position: absolute; top: 50%; left: var(--pos); z-index: 2; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--wp--preset--color--highlight); border: 2px solid var(--wp--preset--color--accent); pointer-events: none; display: grid; place-items: center; font-weight: 800; color: var(--wp--preset--color--accent); }
.nsb-ba__range:focus-visible ~ .nsb-ba__handle { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* Quote cards */
.nsb-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.nsb-quote { margin: 0; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--nsb-radius-card); padding: 1.2rem; display: grid; gap: 0.75rem; align-content: start; }
.nsb-quote__top { display: flex; gap: 0.75rem; align-items: center; }
.nsb-quote__photo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--wp--preset--color--muted); display: grid; place-items: center; font-size: 0.6rem; text-align: center; color: var(--wp--preset--color--contrast-soft); flex: none; }
.nsb-quote__photo img { width: 100%; height: 100%; object-fit: cover; }
.nsb-quote__who { display: grid; line-height: 1.3; }
.nsb-quote__who span { font-size: 0.82rem; color: var(--wp--preset--color--contrast-soft); }
.nsb-quote blockquote { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.nsb-quote__pic { aspect-ratio: 4 / 3; border-radius: var(--nsb-radius-small); background: var(--wp--preset--color--muted); display: grid; place-items: center; font-size: 0.8rem; color: var(--wp--preset--color--contrast-soft); text-align: center; padding: 0.5rem; overflow: hidden; position: relative; }
.nsb-quote__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsb-verified { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--wp--preset--color--success); }

/* What to expect */
.nsb-expect { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.nsb-expect li { background: var(--wp--preset--color--base); border-radius: var(--nsb-radius-card); padding: 1.2rem; border-top: 4px solid var(--wp--preset--color--accent); }
.nsb-expect strong { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.15rem; color: var(--wp--preset--color--accent); margin-bottom: 0.25rem; }

/* Founder note */
.nsb-founder { display: grid; gap: 1.5rem 2.5rem; align-items: center; max-width: 980px; margin: 0 auto; }
@media (min-width: 782px) { .nsb-founder { grid-template-columns: 260px 1fr; } }
.nsb-founder__photo { aspect-ratio: 1; border-radius: 50%; background: var(--wp--preset--color--muted); display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--wp--preset--color--contrast-soft); font-weight: 600; max-width: 260px; margin: 0 auto; overflow: hidden; position: relative; }
.nsb-founder__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsb-founder h2 { text-align: left !important; margin: 0 0 0.6rem !important; }
.nsb-founder p { margin: 0 0 0.8rem; font-size: 1.05rem; }
.nsb-founder__sig { font-family: var(--wp--preset--font-family--evidence); font-style: italic; font-size: 1.2rem; color: var(--wp--preset--color--accent); }
:where(.nsb-ugc, .nsb-ba-row, .nsb-quotes, .nsb-expect, .nsb-founder) > * { margin-block-start: 0 !important; }
@media (min-width: 782px) { .nsb-ba-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .nsb-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	/* Phones: before/after and quotes swipe sideways instead of stacking (keeps the page short). */
	.nsb-ba-row, .nsb-quotes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--nsb-gutter)); padding: 0 var(--nsb-gutter) 0.5rem; gap: 0.75rem; scrollbar-width: none; }
	.nsb-ba-row::-webkit-scrollbar, .nsb-quotes::-webkit-scrollbar { display: none; }
	.nsb-ba-item, .nsb-quote { flex: 0 0 86%; scroll-snap-align: start; }
}
@media (pointer: coarse) {
	/* Touch: only the band around the handle moves the slider, so the rest of the picture still swipes the row. */
	.nsb-ba__range { top: 50%; bottom: auto; height: 56px; transform: translateY(-50%); }
}

/* Deal / was price / proof line */
.nsb-bundle__prices { display: inline-flex; gap: 0.4rem; align-items: baseline; white-space: nowrap; }
.nsb-bundle__was { color: var(--wp--preset--color--contrast-soft); font-weight: 500; font-size: 0.9rem; }
.nsb-bundle__deal { display: inline-block; justify-self: start; margin-top: 0.25rem; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--highlight); font-size: 0.78rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 6px; }
.nsb-proof-line { margin: 0; font-weight: 700; color: var(--wp--preset--color--contrast); font-size: 0.95rem; }

/* Public sample mode: every sample element says so. */
body.nsb-sample :is(.nsb-quote, .nsb-ba-item, .nsb-founder, .nsb-bundles, .nsb-trust) { position: relative; }
body.nsb-sample :is(.nsb-quote, .nsb-ba-item, .nsb-founder, .nsb-bundles, .nsb-trust)::after {
	content: "Sample"; position: absolute; top: 0.4rem; right: 0.4rem; z-index: 4;
	background: #fff4c2; color: #5c4400; border: 1px solid #c9a227; border-radius: 6px;
	font: 700 0.7rem/1.4 var(--wp--preset--font-family--body); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1rem 0.45rem; pointer-events: none;
}
body.nsb-sample .nsb-bundles::after { content: "Sample prices"; top: -0.2rem; }
body.nsb-sample :is(.nsb-proof-line, .nsb-pdp__head .wp-block-woocommerce-product-rating)::after {
	content: "Sample"; display: inline-block; margin-left: 0.4rem; vertical-align: middle;
	background: #fff4c2; color: #5c4400; border: 1px solid #c9a227; border-radius: 6px;
	font: 700 0.7rem/1.4 var(--wp--preset--font-family--body); text-transform: uppercase; padding: 0 0.4rem;
}

/* ---------- 0.7: reviews block, trust icon row, payment marks, phone hero, spacing ---------- */
/* Stars from a number: <span class="nsb-stars" style="--r:4.8"></span> */
.nsb-stars { --r: 5; display: inline-block; width: 5.4em; height: 1.05em; vertical-align: -0.12em;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) calc(var(--r) / 5 * 100%), var(--wp--preset--color--line) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l3.2 6.6 7.3 1-5.3 5.1 1.3 7.2L12 17.5 5.5 20.9l1.3-7.2L1.5 8.6l7.3-1z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l3.2 6.6 7.3 1-5.3 5.1 1.3 7.2L12 17.5 5.5 20.9l1.3-7.2L1.5 8.6l7.3-1z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x; }
.nsb-reviews { display: grid; gap: 1.5rem; scroll-margin-top: 1rem; }
.nsb-reviews__summary { display: grid; gap: 1rem 2.5rem; align-items: center; }
@media (min-width: 782px) { .nsb-reviews__summary { grid-template-columns: auto 1fr; } }
.nsb-reviews__avg { display: grid; gap: 0.2rem; justify-items: start; }
.nsb-reviews__avg strong { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--wp--preset--color--accent); }
.nsb-reviews__avg .nsb-stars { font-size: 1.3rem; }
.nsb-reviews__dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; max-width: 520px; width: 100%; }
.nsb-reviews__dist li { display: grid; grid-template-columns: 2.6rem 1fr 3.4rem; gap: 0.6rem; align-items: center; font-size: 0.9rem; }
.nsb-reviews__bar { height: 9px; border-radius: 999px; background: var(--wp--preset--color--muted); overflow: hidden; }
.nsb-reviews__bar span { display: block; height: 100%; width: var(--w, 0%); background: var(--wp--preset--color--accent); border-radius: 999px; }
.nsb-reviews__list { display: grid; gap: 0; }
.nsb-review { padding: 1.1rem 0; border-top: 1px solid var(--wp--preset--color--line); display: grid; gap: 0.35rem; }
.nsb-review__head { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.nsb-review__head strong { font-size: 1.02rem; }
.nsb-review p { margin: 0; }
.nsb-review__meta { font-size: 0.84rem; color: var(--wp--preset--color--contrast-soft); }
.nsb-review__meta .nsb-verified { margin-right: 0.35rem; }
.nsb-reviews__more { justify-self: center; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border: 1.5px solid var(--wp--preset--color--accent); border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--wp--preset--color--accent); }
:where(.nsb-reviews, .nsb-reviews__summary) > * { margin-block-start: 0 !important; }

/* Trust as a 4-icon row + payment marks (under the button) */
.nsb-trust-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.nsb-trust-icons li { display: grid; justify-items: center; text-align: center; gap: 0.3rem; font-size: 0.78rem; line-height: 1.25; font-weight: 600; color: var(--wp--preset--color--contrast-soft); }
.nsb-trust-icons .nsb-ico { width: 26px; height: 26px; color: var(--wp--preset--color--accent); }
.nsb-paymarks { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.nsb-paymarks li { border: 1px solid var(--wp--preset--color--line); border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base); }
.nsb-ico--card { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }

/* Spacing: no dead gap between the buy box and the first section */
.nsb-pdp__top { padding-bottom: 1rem; }
.nsb-pdp__details { padding-top: 0; }
.nsb-pdp__details .wp-block-woocommerce-product-description > .nsb-section:first-child { margin-top: 1.5rem; }

@media (max-width: 781px) {
	/* Phones: hero runs edge to edge and larger (4:3), so the product is the biggest thing on screen one. */
	.nsb-pdp__media { margin-left: calc(-1 * var(--nsb-gutter)); margin-right: calc(-1 * var(--nsb-gutter)); }
	.nsb-pdp__media .wc-block-product-gallery-large-image__wrapper { aspect-ratio: 4 / 3; }
	.nsb-pdp__media .wc-block-product-gallery-large-image__wrapper img { object-fit: cover; }
	.nsb-pdp__media .wc-block-product-gallery-large-image, .nsb-pdp__media .wp-block-woocommerce-product-image img { border-radius: 0; }
	.nsb-hero-video { border-radius: 0; }
}
body.nsb-sample .nsb-reviews { position: relative; }
body.nsb-sample .nsb-reviews::after { content: "Sample"; position: absolute; top: 0; right: 0; background: #fff4c2; color: #5c4400; border: 1px solid #c9a227; border-radius: 6px; font: 700 0.7rem/1.4 var(--wp--preset--font-family--body); text-transform: uppercase; padding: 0.1rem 0.45rem; }
body.nsb-sample .nsb-trust-icons { position: relative; }
body.nsb-sample .nsb-trust-icons::after { content: "Sample"; position: absolute; top: -0.6rem; right: 0; background: #fff4c2; color: #5c4400; border: 1px solid #c9a227; border-radius: 6px; font: 700 0.65rem/1.4 var(--wp--preset--font-family--body); text-transform: uppercase; padding: 0 0.4rem; }

/* ---------- 0.8: title = product name, promise under it ---------- */
.nsb-headline { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
.nsb-promise { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.25; color: var(--wp--preset--color--contrast); }
@media (max-width: 781px) { .nsb-headline { font-size: clamp(1.6rem, 7vw, 2rem); } .nsb-subline { display: none; } }

/* ---------- 0.8: trust row — even columns, labels balanced, no ragged wrap ---------- */
.nsb-trust-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.nsb-trust-icons li { align-content: start; text-wrap: balance; min-height: 3.6em; }
@media (max-width: 480px) {
	/* Phones: 2 × 2, icon left of a one-line label, all left-aligned so nothing goes ragged. */
	.nsb-trust-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.75rem; }
	.nsb-trust-icons li { grid-template-columns: 26px 1fr; justify-items: start; text-align: left; align-items: center; min-height: 0; font-size: 0.82rem; }
}
/* Payment marks: one tidy row; if they must wrap, the rows split evenly instead of orphaning one. */
.nsb-paymarks { flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.nsb-paymarks li { flex: 0 0 auto; text-align: center; white-space: nowrap; font-size: 0.72rem; padding: 0.15rem 0.45rem; }
@media (max-width: 480px) { .nsb-paymarks { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); } }

/* ---------- 0.8: customer clips (UGC) ---------- */
.nsb-ugc-strip { max-width: var(--wp--style--global--wide-size); margin: 0.5rem auto 0; }
.nsb-ugc-strip__title { margin: 0 0 0.75rem; font-size: 1.25rem; }
.nsb-ugc--strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.6rem; padding-bottom: 0.4rem; scrollbar-width: none; margin: 0 calc(-1 * var(--nsb-gutter)); padding-left: var(--nsb-gutter); padding-right: var(--nsb-gutter); }
.nsb-ugc--strip::-webkit-scrollbar { display: none; }
.nsb-ugc--strip .nsb-ugc__item { flex: 0 0 clamp(140px, 38vw, 190px); scroll-snap-align: start; }
.nsb-ugc--wall { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (max-width: 600px) { .nsb-ugc--wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } .nsb-ugc--wall .nsb-ugc__item { flex: none; } }
.nsb-ugc__play { position: absolute; left: 0.5rem; bottom: 0.5rem; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.55); }
.nsb-ugc__play::after { content: ""; position: absolute; left: 11px; top: 8px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ---------- 0.8: objections ("Still deciding?") ---------- */
.nsb-objections { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.nsb-objection { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--nsb-radius-card); padding: 1.2rem 1.25rem; display: grid; gap: 0.5rem; align-content: start; }
.nsb-objection__q { margin: 0; font-family: var(--wp--preset--font-family--evidence); font-style: italic; font-size: 1.15rem; line-height: 1.3; color: var(--wp--preset--color--contrast); }
.nsb-objection__a { margin: 0; }
.nsb-objection__a strong { color: var(--wp--preset--color--accent); }
.nsb-objection__proof { margin: 0; font-size: 0.86rem; color: var(--wp--preset--color--contrast-soft); }
:where(.nsb-objections) > * { margin-block-start: 0 !important; }

/* ---------- 0.8: buyer types ("Made for how you shower") ---------- */
.nsb-usecases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.nsb-usecase { border-radius: var(--nsb-radius-card); padding: 1.25rem; background: var(--wp--preset--color--muted); display: grid; gap: 0.45rem; align-content: start; }
.nsb-usecase .nsb-ico { width: 32px; height: 32px; color: var(--wp--preset--color--accent); }
.nsb-usecase h3 { margin: 0; font-size: 1.12rem; }
.nsb-usecase p { margin: 0; }
.nsb-usecase__pick { font-size: 0.86rem; font-weight: 700; color: var(--wp--preset--color--accent); }
@media (max-width: 600px) {
	.nsb-usecases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--nsb-gutter)); padding: 0 var(--nsb-gutter) 0.5rem; scrollbar-width: none; }
	.nsb-usecases::-webkit-scrollbar { display: none; }
	.nsb-usecase { flex: 0 0 78%; scroll-snap-align: start; }
}
:where(.nsb-usecases) > * { margin-block-start: 0 !important; }
.nsb-ico--key { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3M14 9l2 2'/%3E%3C/svg%3E"); }
.nsb-ico--wave { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 8c3 0 3-2 6-2s3 2 6 2 3-2 6-2M2 14c3 0 3-2 6-2s3 2 6 2 3-2 6-2M2 20c3 0 3-2 6-2s3 2 6 2 3-2 6-2'/%3E%3C/svg%3E"); }
.nsb-ico--home { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9H3z'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.nsb-ico--sparkle { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/svg%3E"); }
.nsb-ico--family { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='6' r='2.5'/%3E%3Ccircle cx='17' cy='9' r='2'/%3E%3Cpath d='M3.5 20v-5a4.5 4.5 0 0 1 9 0v5M14 20v-3.5a3 3 0 0 1 6 0V20'/%3E%3C/svg%3E"); }
.nsb-ico--move { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); }
.nsb-ico--swim { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Cpath d='M4 13l5-4 4 3 3-2M2 18c3 0 3-2 6-2s3 2 6 2 3-2 6-2'/%3E%3C/svg%3E"); }

/* ---------- 0.8: alignment pass ---------- */
.nsb-pdp__details .nsb-section > h2, .nsb-intro { text-wrap: balance; }
.nsb-steps { text-align: center; }
.nsb-step h3 { justify-content: center; }
.nsb-expect li, .nsb-honest__item, .nsb-tile { text-align: left; }
.nsb-cta p:last-child { display: flex; justify-content: center; }
.nsb-panel.nsb-cta h2, .nsb-panel.nsb-cta p { text-align: center !important; }
.nsb-box li { display: grid; place-items: center; min-height: 3.2rem; }
.nsb-ba-item h3, .nsb-ba-item p { text-align: left; }
.nsb-faq summary { text-align: left; }
body.nsb-sample :is(.nsb-objections, .nsb-usecases) { position: relative; }

/* ---------- 0.8 alignment fixes (mock review) ---------- */
@media (min-width: 782px) {
	.nsb-usecases, .nsb-objections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nsb-ugc--strip { margin: 0; padding-left: 0; padding-right: 0; }
}
.nsb-ugc-strip__title { text-align: center; }
@media (max-width: 480px) {
	.nsb-paymarks { display: flex; flex-wrap: wrap; justify-content: center; }
	.nsb-paymarks li { flex: 0 0 calc(25% - 0.3rem); }
}
.nsb-box { display: flex; flex-wrap: wrap; justify-content: center; }
.nsb-box li { flex: 0 1 calc(33.333% - 0.75rem); min-width: 140px; }
@media (max-width: 600px) { .nsb-box li { flex-basis: calc(50% - 0.75rem); } .nsb-ugc--wall .nsb-ugc__item:nth-child(n+5) { display: none; } }
@media (max-width: 781px) { .nsb-founder, .nsb-founder h2 { text-align: center !important; } }
body.nsb-sample .nsb-trust-icons::after { position: static; grid-column: 1 / -1; justify-self: end; margin-top: -0.2rem; }
.nsb-paymarks li { box-sizing: border-box; }

/* ---------- 0.8.1: assurance card under the button ---------- */
.nsb-assure { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); border-radius: var(--nsb-radius-card); padding: 0.9rem 1rem; display: grid; gap: 0.8rem; position: relative; }
.nsb-assure > * { margin: 0 !important; }
.nsb-assure .nsb-ico { color: var(--wp--preset--color--accent); width: 22px; height: 22px; }
.nsb-assure__ship { display: flex; gap: 0.6rem; align-items: center; font-size: 0.95rem; }
.nsb-assure__ship strong { font-weight: 700; color: var(--wp--preset--color--contrast); }
.nsb-assure__free { color: var(--wp--preset--color--contrast-soft); font-weight: 500; }
.nsb-assure__items { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.6rem; border-top: 1px solid var(--wp--preset--color--line); padding-top: 0.8rem; }
.nsb-assure__items li { display: flex; gap: 0.45rem; align-items: center; font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: var(--wp--preset--color--contrast); }
.nsb-assure__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; border-top: 1px solid var(--wp--preset--color--line); padding-top: 0.75rem; }
.nsb-assure__secure { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--wp--preset--color--contrast-soft); }
.nsb-assure__secure .nsb-ico { width: 15px; height: 15px; color: var(--wp--preset--color--contrast-soft); }
.nsb-assure .nsb-paymarks { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; justify-content: flex-start; }
.nsb-assure .nsb-paymarks li { flex: 0 0 auto; font-size: 0.64rem; font-weight: 700; padding: 0.05rem 0.35rem; border-radius: 4px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast-soft); letter-spacing: 0.01em; }
@media (max-width: 480px) {
	.nsb-assure { padding: 0.8rem 0.85rem; }
	.nsb-assure__items li { flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.8rem; }
	.nsb-assure .nsb-paymarks { width: 100%; }
}
.nsb-ico--lock { --nsb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
/* Ticks + refills under the card: same left edge, calmer size */
.nsb-pdp__buy .nsb-benefits { gap: 0.25rem; font-size: 0.95rem; }
.nsb-pdp__buy .nsb-benefits li { font-weight: 500; }
.nsb-pdp__buy .nsb-refill { font-size: 0.92rem; }
body.nsb-sample .nsb-assure::after { content: "Sample"; position: absolute; top: -0.55rem; right: 0.7rem; background: #fff4c2; color: #5c4400; border: 1px solid #c9a227; border-radius: 6px; font: 700 0.62rem/1.4 var(--wp--preset--font-family--body); text-transform: uppercase; padding: 0 0.4rem; }
.nsb-assure__items li { hyphens: none; }
@media (max-width: 480px) {
	.nsb-assure__ship > span:last-child { display: grid; }
	.nsb-assure__free { font-size: 0.85rem; }
	.nsb-assure__dot { display: none; }
	.nsb-assure .nsb-paymarks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }
	.nsb-assure .nsb-paymarks li { text-align: center; }
}
.nsb-pdp__buy .nsb-assure + .nsb-benefits { margin-top: 1rem; }

/* ---------- 0.8.2: trust style options ---------- */
/* Arrival line (A under the button, B above it) */
.nsb-arrive { display: flex; gap: 0.5rem; align-items: center; margin: 0; font-size: 0.92rem; }
.nsb-arrive .nsb-ico { width: 20px; height: 20px; color: var(--wp--preset--color--accent); }
.nsb-arrive strong { font-weight: 700; }
.nsb-arrive__free { color: var(--wp--preset--color--contrast-soft); }
.nsb-arrive--above { margin: 0.2rem 0 0.6rem; }
/* A: one icon row */
.nsb-trustrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.5rem; }
.nsb-trustrow li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; font-size: 0.78rem; font-weight: 600; line-height: 1.2; color: var(--wp--preset--color--contrast-soft); }
.nsb-trustrow .nsb-ico { width: 22px; height: 22px; color: var(--wp--preset--color--accent); }
/* B: small payment logos + one badge line */
.nsb-paylogos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
.nsb-paylogos li { font-size: 0.6rem; font-weight: 800; padding: 0.1rem 0.3rem; border-radius: 3px; border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--contrast-soft); background: var(--wp--preset--color--base); white-space: nowrap; }
.nsb-badges { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.9rem; font-size: 0.78rem; color: var(--wp--preset--color--contrast-soft); }
.nsb-badges li { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.nsb-badges .nsb-ico { width: 14px; height: 14px; color: var(--wp--preset--color--contrast-soft); }
.nsb-pdp__buy > .nsb-arrive, .nsb-pdp__buy > .nsb-trustrow, .nsb-pdp__buy > .nsb-paylogos { margin-top: 0.6rem; }
body.nsb-sample :is(.nsb-trustrow, .nsb-badges) { position: relative; }
.nsb-paylogos { flex-wrap: nowrap; gap: 0.15rem; }
.nsb-paylogos li { font-size: 0.56rem; padding: 0.08rem 0.22rem; }
.nsb-pdp__buy .nsb-trustrow + .nsb-benefits, .nsb-pdp__buy .nsb-badges + .nsb-benefits { margin-top: 0.9rem; }
body.nsb-sample .nsb-trustrow::after { content: "Sample"; position: absolute; top: -0.5rem; right: 0; background: #fff4c2; color: #5c4400; border: 1px solid #c9a227; border-radius: 6px; font: 700 0.62rem/1.4 var(--wp--preset--font-family--body); text-transform: uppercase; padding: 0 0.4rem; }
.nsb-onetime { margin: 0.6rem 0 0; text-align: center; font-size: 0.88rem; color: var(--wp--preset--color--contrast-soft); }
.nsb-onetime a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Plan cards (refill / subscription choices) */
.nsb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 980px; margin: 0 auto; }
@media (max-width: 781px) { .nsb-plans { grid-template-columns: 1fr; } }
.nsb-plan { position: relative; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: var(--nsb-radius-card); padding: 1.4rem 1.2rem 1.1rem; display: grid; gap: 0.3rem; align-content: start; }
.nsb-plan.is-default { border-color: var(--wp--preset--color--accent); }
.nsb-plan > * { margin: 0 !important; }
.nsb-plan h3 { font-size: 1.15rem; }
.nsb-plan__price { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.8rem; color: var(--wp--preset--color--accent); line-height: 1.1; }
.nsb-plan__price span { font-size: 0.95rem; font-weight: 600; color: var(--wp--preset--color--contrast-soft); }
.nsb-plan__unit { font-size: 0.86rem; color: var(--wp--preset--color--contrast-soft); }
.nsb-plan__tag { position: absolute; top: -0.7rem; left: 1rem; background: var(--wp--preset--color--muted); color: var(--wp--preset--color--accent); font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.nsb-plan__tag.is-best { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--highlight); }
:where(.nsb-plans) > * { margin-block-start: 0 !important; }

/* ---------- 0.8.7: panel 7 fixes ---------- */
/* What is charged and when: shown only inside the chosen card. */
.nsb-bundle__terms { display: none; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--wp--preset--color--line); font-size: 0.82rem; line-height: 1.4; color: var(--wp--preset--color--contrast-soft); }
.nsb-bundle:has(.nsb-bundle__input:checked) .nsb-bundle__terms { display: block; }
/* The fit line is a buying fact: keep it on phones too. */
@media (max-width: 781px) { .nsb-subline { display: block; font-size: 0.88rem; } }
/* Refill line: the arrow stays with the last word. */
.nsb-refill { display: flex; align-items: center; min-height: var(--nsb-tap); }
.nsb-refill a { display: inline; min-height: 0; }
/* In the box + contact, under the chips. */
.nsb-inbox, .nsb-support { margin: 0.5rem 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--wp--preset--color--contrast-soft); }
.nsb-inbox strong { color: var(--wp--preset--color--contrast); }
.nsb-support a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Sample tag for the trust row sits under the row, centred, not on its last item. */
body.nsb-sample .nsb-trustrow::after { position: static; grid-column: 1 / -1; justify-self: center; margin-top: 0.1rem; }
/* Mid-page button */
.nsb-midcta { text-align: center; margin-top: 1.25rem; }
/* Specs table: two plain columns (label, value), no comparison highlight; one column per row on phones. */
.nsb-specs td:nth-child(2) { background: none; font-weight: 400; }
.nsb-specs td:first-child { width: 30%; font-weight: 700; }
@media (max-width: 781px) {
	.nsb-specs tr { grid-template-columns: 1fr; }
	.nsb-specs td:first-child { width: auto; }
	.nsb-specs td:nth-child(2) { padding-top: 0.15rem; }
}

/* newsite/water-lookup: city/ZIP type-ahead + result card (bars reuse .nsb-bars). */
.nsb-water { max-width: 820px; margin: 0 auto; }
.nsb-water__form label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.nsb-water__combo { position: relative; }
.nsb-water__combo input { box-sizing: border-box; width: 100%; font: inherit; font-size: max(1rem, 16px); padding: 0.8rem 1rem; border: 2px solid var(--wp--preset--color--accent); border-radius: 12px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.nsb-water__combo input:focus { outline: 3px solid var(--wp--preset--color--highlight); outline-offset: 1px; }
.nsb-water__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0.25rem 0; list-style: none; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 60vh; overflow-y: auto; }
.nsb-water__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; cursor: pointer; }
.nsb-water__list li[aria-selected="true"], .nsb-water__list li[data-slug]:hover { background: var(--wp--preset--color--muted); }
.nsb-water__list li.is-empty { cursor: default; color: var(--wp--preset--color--contrast-soft); }
.nsb-water__v { white-space: nowrap; color: var(--wp--preset--color--contrast-soft); font-size: 0.9rem; }
.nsb-water__hint { font-size: 0.9rem; color: var(--wp--preset--color--contrast-soft); margin: 0.4rem 0 0; }
.nsb-water__card { margin-top: 1.5rem; padding: 1.25rem 1rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; scroll-margin-top: 1rem; outline: none; }
.nsb-water__card h2 { margin: 0; font-size: 1.5rem; }
.nsb-water__meta { margin: 0.15rem 0 1rem; font-size: 0.95rem; color: var(--wp--preset--color--contrast-soft); }
.nsb-bar.is-you .nsb-bar__fill { background: var(--wp--preset--color--link); }
.nsb-bar.is-you .nsb-bar__value { color: var(--wp--preset--color--link); }
.nsb-water__cta { display: block; margin-top: 1.25rem; padding: 0.9rem 1rem; text-align: center; font-weight: 700; text-decoration: none; border-radius: 999px; background: var(--wp--preset--color--cta); color: var(--wp--preset--color--on-cta); border: 2px solid var(--wp--preset--color--cta-border); }
.nsb-water__all { margin: 2rem 0 0.5rem; font-size: 1.25rem; }
.nsb-water__states details { border-top: 1px solid var(--wp--preset--color--line); padding: 0.6rem 0; }
.nsb-water__states summary { font-weight: 600; cursor: pointer; padding: 0.2rem 0; }
.nsb-water__states summary span { font-weight: 400; color: var(--wp--preset--color--contrast-soft); }
.nsb-water__states ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.nsb-water__states li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; }
.nsb-water__states li span { white-space: nowrap; color: var(--wp--preset--color--contrast-soft); }
.nsb-water__more { font-size: 0.9rem; color: var(--wp--preset--color--contrast-soft); margin-top: 1rem; }
/* A long value (e.g. "0.27–1.66 mg/L") drops under its label on phones instead of squeezing it. */
.nsb-water__card .nsb-bar__head { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
.nsb-water__card .nsb-bar__label { flex: 1 1 12rem; }

/* ---------- 0.10.1: bundle card offer rows ---------- */
.nsb-bundle__row--deal { align-items: center; flex-wrap: wrap; row-gap: 0.3rem; margin-top: 0.25rem; }
.nsb-bundle__row--deal .nsb-bundle__deal { margin-top: 0; }
.nsb-bundle__row--deal .nsb-bundle__save { font-size: 0.85rem; font-weight: 800; }
.nsb-plan-row { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; align-items: center; margin-top: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: color-mix(in srgb, var(--wp--preset--color--muted) 80%, #fff); border: 1px solid var(--wp--preset--color--line); }
.nsb-bundle:has(.nsb-bundle__input:checked) .nsb-plan-row { background: var(--wp--preset--color--base); }
.nsb-plan-row__l { display: grid; font-size: 0.85rem; line-height: 1.3; color: var(--wp--preset--color--contrast-soft); }
.nsb-plan-row__k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.nsb-plan-row__r { display: grid; justify-items: end; line-height: 1.3; }
.nsb-plan-row__p { font-size: 0.95rem; white-space: nowrap; }
.nsb-plan-row__p strong { font-size: 1.02rem; }
.nsb-plan-row__p del, .nsb-plan-row__u del { color: var(--wp--preset--color--contrast-soft); font-weight: 400; font-size: 0.82rem; }
.nsb-plan-row__u { font-size: 0.8rem; white-space: nowrap; color: var(--wp--preset--color--accent); }
.nsb-plan-row__save { grid-column: 1 / -1; justify-self: start; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 800; color: var(--wp--preset--color--highlight); background: var(--wp--preset--color--accent); padding: 0.1rem 0.5rem; border-radius: 6px; }

/* ---------- 0.10.2: sample tags only where the sample really overrides; full-width section bands ---------- */
body.nsb-sample:not(.nsb-sample-prices) .nsb-bundles::after { content: none; }
body.nsb-sample:not(.nsb-sample-trust) :is(.nsb-trust, .nsb-trust-icons, .nsb-trustrow, .nsb-assure)::after { content: none; }
/* Grey bands reach both edges of the screen (painted, not widened, so nothing scrolls sideways)… */
.nsb-band { box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface); clip-path: inset(0 -100vmax); }
/* …and two bands in a row join into one, with a hairline instead of a white strip. */
.nsb-pdp__details .nsb-band.nsb-section + .nsb-band.nsb-section { margin-top: 0; border-top: 1px solid var(--wp--preset--color--line); }
.nsb-pdp__details .nsb-section > h3.wp-block-heading { text-align: center; margin: 2rem auto 0.75rem; }

/* ---------- 0.10.3: the deal as a gift line inside the refill plan box ---------- */
.nsb-bundle__row--deal { justify-content: flex-start; }
.nsb-plan-row__gift { grid-column: 1 / -1; display: flex; gap: 0.35rem; align-items: center; font-size: 0.8rem; font-weight: 700; color: var(--wp--preset--color--accent); padding-bottom: 0.45rem; margin-bottom: 0.35rem; border-bottom: 1px dashed var(--wp--preset--color--line); }
.nsb-plan-row__gift svg { flex: none; }

/* ---------- 0.11.0: long-description design pass ---------- */
.nsb-pdp__details { --nsb-sec: clamp(2.75rem, 7vw, 4.5rem); --nsb-inner: 1080px; --nsb-text: 820px; }
/* One rhythm: same gap above every section, same padding inside every band. */
.nsb-pdp__details .nsb-section:not(.nsb-panel) { margin-top: var(--nsb-sec); }
.nsb-pdp__details .nsb-band.nsb-section { padding-top: var(--nsb-sec); padding-bottom: var(--nsb-sec); }
.nsb-pdp__details .nsb-panel.nsb-section { margin-top: var(--nsb-sec); }
.nsb-pdp__details .wp-block-woocommerce-product-description > .nsb-section:first-child { margin-top: 1.5rem; }
.nsb-pdp__details .wp-block-woocommerce-product-description > :last-child { margin-bottom: var(--nsb-sec); }
/* One heading block: title, short intro, then content. */
.nsb-pdp__details .nsb-section > h2.wp-block-heading { margin: 0 auto 0.5rem; }
.nsb-pdp__details .nsb-section > h2.wp-block-heading:not(:has(+ .nsb-intro)) { margin-bottom: 1.75rem; }
.nsb-pdp__details .nsb-intro { margin: 0 auto 2rem !important; }
/* Two content widths only: grids 1080px, reading/data blocks 820px. */
:is(.nsb-objections, .nsb-usecases, .nsb-ba-row, .nsb-quotes, .nsb-plans, .nsb-expect, .nsb-steps, .nsb-box) { max-width: var(--nsb-inner); margin-left: auto; margin-right: auto; }
:is(.nsb-facts, .nsb-section > .nsb-compare, .nsb-specs, .nsb-faq > .wp-block-details) { max-width: var(--nsb-text); margin-left: auto; margin-right: auto; }
.nsb-facts { margin-top: 2rem; }

/* Made for how you shower: tabs + one card. */
.nsb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: var(--nsb-inner); margin: 0 auto 1.25rem; }
.nsb-tab { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font: 600 0.9rem/1.2 var(--wp--preset--font-family--body); cursor: pointer; white-space: nowrap; }
.nsb-tab .nsb-ico { width: 18px; height: 18px; color: var(--wp--preset--color--accent); }
.nsb-tab[aria-selected="true"] { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
.nsb-tab[aria-selected="true"] .nsb-ico { color: var(--wp--preset--color--highlight); }
.nsb-tab:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.nsb-usecases.is-tabbed { display: block; max-width: 720px; overflow: visible; margin: 0 auto; padding: 0; }
.nsb-usecases.is-tabbed .nsb-usecase { display: grid; grid-template-columns: 48px 1fr; column-gap: 1rem; row-gap: 0.35rem; padding: 1.4rem 1.5rem; }
.nsb-usecases.is-tabbed .nsb-usecase[hidden] { display: none; }
.nsb-usecases.is-tabbed .nsb-usecase .nsb-ico { grid-row: span 3; width: 40px; height: 40px; }
@media (max-width: 781px) {
	.nsb-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--nsb-gutter)); margin-right: calc(-1 * var(--nsb-gutter)); padding: 0 var(--nsb-gutter) 0.25rem; }
	.nsb-tabs::-webkit-scrollbar { display: none; }
	.nsb-usecases.is-tabbed .nsb-usecase { grid-template-columns: 1fr; padding: 1.2rem; }
	.nsb-usecases.is-tabbed .nsb-usecase .nsb-ico { grid-row: auto; width: 32px; height: 32px; }
}

/* See it work: four across on desktop instead of a 2 × 2 wall. */
@media (min-width: 960px) { .nsb-ba-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .nsb-ba-item h3 { font-size: 1rem; } }

/* What to expect / How your plan works: a numbered timeline, not tab-shaped cards. */
.nsb-pdp__details ol.nsb-expect { counter-reset: nsb-x; position: relative; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; }
.nsb-pdp__details ol.nsb-expect::before { content: ""; position: absolute; top: 1.1rem; left: 16.6%; right: 16.6%; height: 2px; background: var(--wp--preset--color--line); }
.nsb-pdp__details ol.nsb-expect > li { position: relative; background: none; border: 0; border-radius: 0; padding: 0 0.5rem; text-align: center; box-shadow: none; color: var(--wp--preset--color--contrast-soft); }
.nsb-pdp__details ol.nsb-expect > li::before { counter-increment: nsb-x; content: counter(nsb-x); position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--highlight); font: 800 0.95rem/1 var(--wp--preset--font-family--body); box-shadow: 0 0 0 6px var(--wp--preset--color--base); }
.nsb-band ol.nsb-expect > li::before { box-shadow: 0 0 0 6px var(--wp--preset--color--surface); }
.nsb-pdp__details ol.nsb-expect > li strong { display: block; margin-bottom: 0.25rem; color: var(--wp--preset--color--contrast); font-size: 1.05rem; }
@media (max-width: 781px) {
	.nsb-pdp__details ol.nsb-expect { grid-template-columns: 1fr; gap: 1.1rem; max-width: 520px; }
	.nsb-pdp__details ol.nsb-expect::before { top: 1rem; bottom: 1rem; left: 1.1rem; right: auto; width: 2px; height: auto; }
	.nsb-pdp__details ol.nsb-expect > li { text-align: left; padding: 0.1rem 0 0 3.2rem; min-height: 2.2rem; }
	.nsb-pdp__details ol.nsb-expect > li::before { position: absolute; left: 0; top: 0; margin: 0; }
}

/* On in about a minute: three step cards + "In the box" chips. */
.nsb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.nsb-step { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--nsb-radius-card); padding: 1.1rem 1.2rem; }
.nsb-steps .nsb-step h3 { font-size: 1.1rem; justify-content: flex-start; }
.nsb-box__label { margin: 1.75rem 0 0.6rem !important; text-align: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.nsb-pdp__details .nsb-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0 !important; }
.nsb-pdp__details .nsb-box li { flex: 0 0 auto; min-width: 0; min-height: 0; display: inline-flex; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.9rem; }
@media (max-width: 781px) { .nsb-steps { grid-template-columns: 1fr; gap: 0.6rem; } .nsb-step { padding: 0.9rem 1rem; } }

/* Quick answers: swipe row on phones instead of nine stacked cards. */
@media (max-width: 781px) {
	.nsb-objections { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; margin-left: calc(-1 * var(--nsb-gutter)); margin-right: calc(-1 * var(--nsb-gutter)); padding: 0 var(--nsb-gutter) 0.5rem; scrollbar-width: none; }
	.nsb-objections::-webkit-scrollbar { display: none; }
	.nsb-objection { flex: 0 0 84%; scroll-snap-align: start; }
}

/* Compare table on phones: our column full width and tinted, the other two side by side. */
@media (max-width: 781px) {
	.nsb-compare:not(.nsb-specs) tr:has(> td:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nsb-compare:not(.nsb-specs) td:nth-child(2) { grid-column: 1 / -1; }
}

/* ---------- 0.11.1 ---------- */
/* Dark panels: the title box is centred like the text under it (it was pinned left). */
.nsb-pdp__details .nsb-panel.nsb-cta > h2.wp-block-heading { margin-left: auto !important; margin-right: auto !important; }
/* Water lookup, compact (product page): white card inside the grey band, smaller city title. */
.nsb-water.is-compact { margin-top: 0.5rem; }
.nsb-water.is-compact .nsb-water__card { background: var(--wp--preset--color--base); }
.nsb-water__card h3 { margin: 0; font-size: 1.25rem; }
/* water lookup: a ZIP matched to the nearest listed place says so on the card. */
.nsb-water__near { margin: -0.6rem 0 1rem; font-size: 0.9rem; color: var(--wp--preset--color--contrast-soft); }

/* ---------- 0.11.3: polish pass ---------- */
/* Menu: no resting underline (two items point at this page, so two were underlined); underline on hover only. */
.nsb-menu__list .current-menu-item > a:not(:hover) { text-decoration: none; }
.nsb-menu__list .current-menu-item > a { color: var(--wp--preset--color--accent); }
/* Rating: the Sample tag sits on the same line as the stars. */
.nsb-pdp__head .wp-block-woocommerce-product-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.nsb-pdp__head .wp-block-woocommerce-product-rating::after { margin-left: 0 !important; }
/* Buy area below the bullets: one even gap between chips, box line, contact line and refill line. */
.nsb-pdp__buy .nsb-chips { margin-top: 1rem; gap: 0.4rem; }
.nsb-pdp__buy .nsb-chips li { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.nsb-pdp__buy :is(.nsb-inbox, .nsb-support) { margin-top: 0.75rem; }
.nsb-pdp__buy .nsb-refill { margin-top: 0.5rem; }
/* Gift line: icon stays on the first line when the text wraps. */
.nsb-plan-row__gift { align-items: flex-start; }
.nsb-plan-row__gift svg { margin-top: 0.1rem; }
/* Compare table: light rules like every other card, columns of sensible width. */
.nsb-compare:not(.nsb-specs) table { table-layout: fixed; }
.nsb-compare :is(th, td) { border-left: 0 !important; border-right: 0 !important; border-color: var(--wp--preset--color--line) !important; }
.nsb-compare thead th { border-bottom: 1px solid var(--wp--preset--color--line) !important; }
@media (min-width: 782px) { .nsb-compare:not(.nsb-specs) :is(th, td):first-child { width: 22%; } }
/* Reviews use the same 1080px width as the other card sections. */
.nsb-pdp__details .nsb-reviews { max-width: var(--nsb-inner, 1080px); margin-left: auto; margin-right: auto; }
/* Questions: tighter rows. */
.nsb-faq > .wp-block-details { margin-block-start: 0 !important; }
.nsb-faq summary { padding: 0.75rem 0; min-height: 0; }
/* Quick answers swipe row: keep the page gutter before the first card. */
@media (max-width: 781px) { .nsb-pdp__details .nsb-objections { padding-left: var(--nsb-gutter) !important; padding-right: var(--nsb-gutter) !important; scroll-padding-left: var(--nsb-gutter); max-width: none; } }

/* ---------- 0.12.0: visual sections (number band, product diagram, illustrated steps) ---------- */
/* Big-number band */
.nsb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--nsb-inner, 1080px); margin: 0 auto; text-align: center; }
.nsb-stat { padding: 0.25rem 1rem; }
.nsb-stat + .nsb-stat { border-left: 1px solid var(--wp--preset--color--line); }
.nsb-stat strong { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--wp--preset--color--accent); }
.nsb-stat strong small { font-size: 0.45em; font-weight: 800; letter-spacing: 0; margin-left: 0.1em; }
.nsb-stat span { display: block; margin-top: 0.45rem; font-size: 0.9rem; line-height: 1.3; color: var(--wp--preset--color--contrast-soft); }
@media (max-width: 781px) {
	.nsb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
	.nsb-stat:nth-child(odd) { border-left: 0; }
}
/* Product diagram: drawing + numbered parts */
.nsb-anat { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2.5rem; align-items: center; max-width: 900px; margin: 0 auto; }
.nsb-anat__art svg { display: block; width: 100%; height: auto; }
.nsb-anat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: nsb-anat; }
.nsb-anat__list li { position: relative; padding-left: 2.6rem; counter-increment: nsb-anat; }
.nsb-anat__list li::before { content: counter(nsb-anat); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--wp--preset--color--cta); border: 2px solid var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); font: 800 0.85rem/1 var(--wp--preset--font-family--body); }
.nsb-anat__list strong { display: block; color: var(--wp--preset--color--contrast); font-size: 1.05rem; }
.nsb-anat__list span { display: block; color: var(--wp--preset--color--contrast-soft); font-size: 0.95rem; line-height: 1.45; }
.nsb-anat__list li.is-extra::before { content: "+"; }
.fx-pins circle { fill: var(--wp--preset--color--cta); stroke: var(--wp--preset--color--accent); stroke-width: 2; }
.fx-pins text { fill: var(--wp--preset--color--accent); }
.fx-pins line { stroke: var(--wp--preset--color--accent); stroke-width: 1.5; }
.fx-spray-g line { stroke: #6fb3cf; stroke-width: 3.5; opacity: 0; transform-box: view-box; transform-origin: 120px 110px; animation: nsb-fx-spray 1.8s ease-out infinite; animation-delay: var(--d, 0s); }
.fx-flow { stroke: #4aa3c7; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 6 10; animation: nsb-fx-flow 1.1s linear infinite; }
@keyframes nsb-fx-spray { 0% { opacity: 0; transform: scale(0.94); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes nsb-fx-flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .fx-spray-g line, .fx-flow { animation: none; } .fx-spray-g line { opacity: 0.7; } }
@media (max-width: 781px) {
	.nsb-anat { grid-template-columns: 1fr; gap: 1.5rem; }
	.nsb-anat__art { max-width: 230px; margin: 0 auto; }
}
/* Illustrated install steps */
.nsb-step__art { display: block; width: 64px; height: 64px; color: var(--wp--preset--color--accent); margin-bottom: 0.6rem; }
.nsb-step__art svg { width: 100%; height: 100%; }
@media (max-width: 781px) {
	.nsb-steps .nsb-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 0.9rem; align-items: start; }
	.nsb-step__art { grid-row: span 2; width: 56px; height: 56px; margin: 0; }
}

/* ---------- 0.12.1: design-system pass (two design reviews) ---------- */
.nsb-pdp__details { --nsb-inner: 1040px; --nsb-text: 720px; }
/* Links: brand ink with a soft underline (the blue stays only for the "your tap water" data bar). */
.nsb-pdp :is(.nsb-pdp__details, .nsb-pdp__head, .nsb-pdp__buy) a:not(.wp-element-button):not(.nsb-water__cta):not([class*="wc-block"]) { color: var(--wp--preset--color--contrast); text-decoration-color: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nsb-pdp .nsb-refill a { color: var(--wp--preset--color--contrast); font-weight: 700; }
.nsb-header .wc-block-customer-account__link, .nsb-header .wc-block-mini-cart__button { color: var(--wp--preset--color--contrast); }
/* One primary button everywhere: lime pill, no hard border. */
.nsb-pdp :is(.wp-element-button, .wp-block-button__link), .nsb-sticky__button { border: 0 !important; border-radius: 999px !important; min-height: 56px; padding: 0 2rem; font-weight: 700; font-size: 1.0625rem; background: var(--wp--preset--color--cta); color: var(--wp--preset--color--on-cta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); }
.nsb-pdp .nsb-pdp__buy .wp-block-button__link { width: 100%; }
.nsb-pdp :is(.wp-element-button, .wp-block-button__link), .nsb-sticky__button { box-sizing: border-box; max-width: 100%; }
.nsb-pdp :is(.nsb-midcta, .nsb-panel) .wp-element-button { min-width: min(320px, 100%); justify-content: center; display: inline-flex; align-items: center; }
/* Data numbers: one display-sans token (serif stays for editorial voice only). */
.nsb-pdp :is(.nsb-bar__value, .nsb-fact__number) { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.nsb-stat strong { font-variant-numeric: tabular-nums; }
/* Title block: one clear lead, quieter supporting lines. */
.nsb-pdp__head .nsb-promise { font-weight: 500; color: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent); }
.nsb-pdp__head .nsb-proof-line { font-size: 0.9rem; font-weight: 600; }
.nsb-pdp__head .nsb-subline { font-size: 0.85rem; }
.nsb-pdp__head .wc-block-components-product-rating__stars { color: var(--wp--preset--color--contrast); }
.nsb-rating-line { font-size: 0.9rem; color: var(--wp--preset--color--contrast); text-decoration: none !important; }
.nsb-rating-line strong { font-weight: 800; }
/* Option cards: the chosen card leads, the other recedes. */
.nsb-bundle:not(:has(.nsb-bundle__input:checked)) .nsb-plan-row { background: #f7f8f6; }
.nsb-bundle ~ .nsb-bundle .nsb-bundle__badge { background: var(--wp--preset--color--base); color: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, transparent); border: 1px solid var(--wp--preset--color--line); }
.nsb-bundle__price { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.nsb-bundle__was { font-weight: 400; opacity: 0.6; }
.nsb-plan-row__save { background: color-mix(in srgb, var(--wp--preset--color--cta) 45%, white); color: var(--wp--preset--color--contrast); border-radius: 4px; }
/* Under the button: one alignment, even gaps, trust icons in a soft strip. */
.nsb-pdp__buy :is(.nsb-trustrow, .nsb-trust-icons) { background: var(--wp--preset--color--surface); border-radius: 12px; padding: 0.75rem 0.5rem; }
/* Number band: aligned labels and a row divider on phones. */
.nsb-stat span { min-height: 2.6em; }
@media (max-width: 781px) { .nsb-stat:nth-child(n+3) { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.25rem; } .nsb-stats { row-gap: 1.25rem; } }
/* Bands: dark CTA panels run edge to edge like the grey bands (one layout system). */
.nsb-pdp__details .nsb-panel.nsb-cta { border-radius: 0; box-shadow: 0 0 0 100vmax var(--wp--preset--color--accent); clip-path: inset(0 -100vmax); }
.nsb-pdp__details .nsb-band.nsb-section + .nsb-band.nsb-section { border-top: 0; }
/* Two widths only. */
.nsb-pdp__details :is(.nsb-water.is-compact, .nsb-guarantee, .nsb-faq > .wp-block-details, .nsb-specs) { max-width: var(--nsb-text); margin-left: auto; margin-right: auto; }
.nsb-pdp__details :is(.nsb-reviews, .nsb-section > .nsb-compare) { max-width: var(--nsb-inner); margin-left: auto; margin-right: auto; }
.nsb-pdp__details .wp-block-woocommerce-product-description > p.nsb-section { text-align: center; font-size: 0.85rem; color: var(--wp--preset--color--contrast-soft); max-width: var(--nsb-text); margin-left: auto; margin-right: auto; }
/* Owners quotes: cards don't stretch to the tallest one. */
.nsb-quotes { align-items: start; }
/* Fact cards: white cards with a border, on the grey band. */
.nsb-band .nsb-fact { background: var(--wp--preset--color--base); }
/* Timelines on phones: the connector stops at the last dot. */
@media (max-width: 781px) {
	.nsb-pdp__details ol.nsb-expect::before { display: none; }
	.nsb-pdp__details ol.nsb-expect > li:not(:last-child)::after { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: -1.1rem; width: 2px; background: var(--wp--preset--color--line); }
}
/* Plan cards: not selectable, so no "selected" border; Annual (best value) gets the emphasis. */
.nsb-plan.is-default { border-color: var(--wp--preset--color--line); }
.nsb-plan:has(.is-best) { border: 2px solid var(--wp--preset--color--accent); }
/* Guarantee seal: room for its words. */
.nsb-guarantee__badge { width: 128px; height: 128px; padding: 0 1rem; box-sizing: border-box; }
.nsb-guarantee__badge strong { font-size: 2.75rem; }
.nsb-guarantee__badge span { font-size: 0.6rem; letter-spacing: 0.12em; line-height: 1.3; margin-top: 0.15rem; }
/* Quick answers: cards size to their text. */
.nsb-objections { align-items: flex-start; }
/* Use-case tabs: same width as the panel; fade at the edge of the swipe row on phones. */
/* Questions: comfortable rows. */
.nsb-faq summary { font-size: 1.02rem; font-weight: 600; padding: 0.95rem 0; }
/* Reviews: stars on their own line, title under them, tidy meta; desktop = summary left, list right. */
.nsb-review__head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.nsb-reviews__avg strong { font-family: var(--wp--preset--font-family--display); font-variant-numeric: tabular-nums; }
.nsb-stars { color: var(--wp--preset--color--contrast); }
@media (min-width: 960px) {
	.nsb-reviews { grid-template-columns: 320px minmax(0, 1fr); column-gap: 3rem; align-items: start; }
	.nsb-reviews__summary { grid-column: 1; grid-row: 1 / span 10; grid-template-columns: 1fr; position: sticky; top: 1.5rem; }
	.nsb-reviews > :not(.nsb-reviews__summary) { grid-column: 2; }
}
/* Specs: quiet keys, zebra rows. */
.nsb-specs td:first-child { font-size: 0.82rem; font-weight: 600; color: var(--wp--preset--color--contrast-soft); }
.nsb-specs tr:nth-child(odd) { background: var(--wp--preset--color--surface); }
.nsb-specs :is(td) { border-top: 0 !important; }
/* One button style, outline included: every primary button gets the same thin ink outline (the main
   Add to cart kept one from an earlier panel; lime alone is faint on white). */
.nsb-pdp :is(.wp-element-button, .wp-block-button__link), .nsb-sticky__button,
.nsb-pdp__buy .wc-block-add-to-cart-with-options button[type="submit"],
.nsb-pdp__buy .wc-block-add-to-cart-with-options .wp-block-button__link { border: 1.5px solid var(--wp--preset--color--cta-border) !important; box-shadow: none; }
.nsb-panel .wp-element-button { border-color: transparent !important; }
/* Links on dark panels/bands: light, not ink (0.12.3 set page links to ink). */
.nsb-pdp :is(.nsb-panel, .nsb-dark, .nsb-callout) a:not(.wp-element-button) { color: var(--wp--preset--color--highlight) !important; text-decoration-color: color-mix(in srgb, var(--wp--preset--color--highlight) 55%, transparent) !important; }

/* ---------- 0.15.1: section blocks in the long description ---------- */
/* One gap between sections; bands that touch each other join with no white strip. */
.nsb-pdp__details .wp-block-woocommerce-product-description > * { margin-top: var(--nsb-sec, 4rem) !important; }
.nsb-pdp__details .wp-block-woocommerce-product-description > :first-child { margin-top: 1rem !important; }
.nsb-pdp__details .wp-block-woocommerce-product-description > :is(.nsb-band, .nsb-panel, .nsb-pressure-hero, .nsb-before-after, .nsb-filter-ring, .nsb-founder-note) + :is(.nsb-band, .nsb-panel, .nsb-pressure-hero, .nsb-before-after, .nsb-filter-ring, .nsb-founder-note) { margin-top: 0 !important; }
/* Coloured section blocks reach both screen edges, like the grey bands (painted, so nothing scrolls sideways). */
.nsb-pdp__details .nsb-pressure-hero { box-shadow: 0 0 0 100vmax var(--wp--preset--color--accent); clip-path: inset(0 -100vmax); }
.nsb-pdp__details .nsb-before-after { box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface); clip-path: inset(0 -100vmax); }
.nsb-pdp__details .nsb-founder-note { box-shadow: 0 0 0 100vmax var(--nsb-paper, #fbfdef); clip-path: inset(0 -100vmax); }
/* Quick answers: content at the same 1040px width as the other card sections. */
.nsb-pdp__details .nsb-quick-answers > * { max-width: var(--nsb-inner, 1040px); margin-left: auto; margin-right: auto; }

/* 0.16.2 newsite/reviews: "Show all" opens the rest of the list in place. */
.nsb-reviews__all { display: grid; gap: 0; }
.nsb-reviews__all > summary { list-style: none; cursor: pointer; margin: 0.5rem auto 0; }
.nsb-reviews__all > summary::-webkit-details-marker { display: none; }
.nsb-reviews__all[open] > summary { display: none; }

/* 0.17.0 Library media (nsb_ugc_media): images and tap-to-play videos share one look. */
.nsb-media { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.nsb-media--video { position: relative; cursor: pointer; overflow: hidden; background: var(--wp--preset--color--muted); }
.nsb-media--video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.nsb-media__play { position: absolute; inset: auto auto 0.6rem 0.6rem; width: 44px; height: 44px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
	background: rgba(0,0,0,.55) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M4 2.5v11l9-5.5z'/%3E%3C/svg%3E"); }
.nsb-media--video.is-playing .nsb-media__play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M4 2.5h3v11H4zM9 2.5h3v11H9z'/%3E%3C/svg%3E"); }
.nsb-media-caption { display: grid; gap: 0.1rem; font-size: 0.86rem; }
.nsb-media-caption__by { color: var(--wp--preset--color--contrast-soft); font-size: 0.8rem; }

/* 0.17.0 Phone first screen: the product, not the chrome. Logo row + one compact swipeable link row; tight gaps down to the bundles. */
@media (max-width: 781px) {
	.nsb-header__row { flex-wrap: wrap; padding-top: 0; padding-bottom: 0; column-gap: 0.25rem; row-gap: 0; }
	.nsb-header__row > *, .nsb-header__tools > * { margin-block: 0 !important; }
	.nsb-brand { min-height: 44px; }
	.nsb-brand__word { font-size: 1.3rem; }
	.nsb-header__tools { gap: 0; }
	.nsb-menu.nsb-menu--primary { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--nsb-gutter)); padding: 0 calc(var(--nsb-gutter) - 0.55rem); }
	.nsb-menu--primary .nsb-menu__list { gap: 0; }
	.nsb-menu--primary .nsb-menu__list a { min-height: 36px; padding: 0 0.55rem; font-size: 0.9rem; }
	main.nsb-pdp, body.single-product .wp-site-blocks > header + .wp-block-group, main.nsb-pdp > .nsb-pdp__top { margin-top: 0 !important; } /* product page only: other pages keep their gap under the menu */
	.nsb-pdp__top { padding-top: 0.5rem; gap: 0.6rem; }
	.nsb-pdp__top > .nsb-pdp__head, .nsb-pdp__top > .nsb-pdp__media, .nsb-pdp__top > .nsb-pdp__buy { margin-top: 0 !important; }
	.nsb-headline-block { gap: 0.05rem; }
	.nsb-headline-block .nsb-headline { font-size: 1.6rem; line-height: 1.12; }
	.nsb-headline-block .nsb-promise { font-size: 1.02rem; }
	.nsb-headline-block .nsb-proof-line { font-size: 0.9rem; }
	.nsb-headline-block .nsb-subline { display: block; font-size: 0.9rem; }
	/* Gallery: square on phones too (owner's call), for WooCommerce's gallery and the library carousel alike. */
	.nsb-mg { --nsb-mg-ratio: 1 / 1; }
	.nsb-pdp__media .wc-block-product-gallery-large-image__wrapper { aspect-ratio: 1 / 1 !important; }
	.nsb-pdp__media .wc-block-product-gallery-large-image__wrapper img,
	.nsb-pdp__media .wp-block-woocommerce-product-image img { width: 100%; height: 100%; max-height: none !important; object-fit: cover; }
}

/* 0.17.4 Clean-up: header children and the three top columns never pick up WordPress's block-gap margins. */
.nsb-header__row > *, .nsb-header__tools > * { margin-block: 0 !important; }
.nsb-pdp__top > .nsb-pdp__head, .nsb-pdp__top > .nsb-pdp__media, .nsb-pdp__top > .nsb-pdp__buy { margin-top: 0 !important; }
@media (max-width: 781px) {
	/* Gallery sits inside the page margins like everything else (not edge to edge), square, rounded. */
	.nsb-pdp__top > .nsb-pdp__media { margin-left: 0 !important; margin-right: 0 !important; }
	.nsb-pdp__media .wc-block-product-gallery-large-image,
	.nsb-pdp__media .wc-block-product-gallery-large-image__wrapper,
	.nsb-pdp__media .wp-block-woocommerce-product-image img { border-radius: var(--nsb-radius-panel) !important; overflow: hidden; }
	.nsb-pdp__media .nsb-mg { --nsb-mg-radius: var(--nsb-radius-panel); margin-left: 0 !important; margin-right: 0 !important; }
}
@media (min-width: 782px) {
	/* Desktop header: logo left, menu centred, icons right, all on one line; edges line up with the page content. */
	.nsb-header__row {
		display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1.5rem;
		box-sizing: border-box; max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--nsb-gutter));
		min-height: 72px; padding: 0.5rem var(--nsb-gutter);
	}
	.nsb-brand { justify-self: start; }
	.nsb-menu--primary { justify-self: center; }
	.nsb-header__tools { justify-self: end; gap: 0.25rem; }
	.nsb-menu--primary .nsb-menu__list { gap: 0.5rem; }
	.nsb-menu--primary .nsb-menu__list a { padding: 0 0.75rem; }
	.nsb-pdp__top { padding-top: 2.5rem; }
}

/* 0.17.6 Ordinary pages (Your water, Sources, Cart, Account): the same breathing room under the menu as the shop and product pages. */
body.page .wp-site-blocks > header + * { margin-top: 1.75rem !important; }
@media (min-width: 782px) { body.page .wp-site-blocks > header + * { margin-top: 3.5rem !important; } }

/* 0.17.7 Desktop product page: content starts close under the menu (was 56px). */
@media (min-width: 782px) {
	body.single-product .wp-site-blocks > header + .wp-block-group, main.nsb-pdp, main.nsb-pdp > .nsb-pdp__top { margin-top: 0 !important; }
	.nsb-pdp__top { padding-top: 1.5rem; }
}

/* 0.18.0 Buy box (panel 28 Oct): the plan is named on the card, the one-time option is a full card,
   a per-day line explains the struck refill price, and one closed question answers "why every 10 days?". */
.nsb-plan-row__note > span { white-space: nowrap; }
.nsb-plan-row__note { grid-column: 1 / -1; margin-top: 0.3rem; font-size: 0.78rem; line-height: 1.35; color: var(--wp--preset--color--contrast-soft); }
.nsb-why { margin: 0.5rem 0 0; font-size: 0.88rem; }
.nsb-why > summary { cursor: pointer; display: flex; align-items: center; min-height: var(--nsb-tap, 44px); color: var(--wp--preset--color--contrast); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.nsb-why > summary::-webkit-details-marker { display: none; }
.nsb-why > summary::after { content: "+"; margin-left: 0.4rem; font-weight: 700; text-decoration: none; }
.nsb-why[open] > summary::after { content: "–"; }
.nsb-why > p { margin: 0 0 0.25rem; line-height: 1.45; color: var(--wp--preset--color--contrast-soft); }
.nsb-jump { margin: 0.25rem 0 0; font-size: 0.9rem; }
.nsb-jump a { color: var(--wp--preset--color--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 0.18.3 The refill-plan options sit in one box named by its label (the plan is said once, not on every card);
   the buy-once option is a quiet line under the box again. */
.nsb-plan-box {
	position: relative; display: grid; gap: 1.1rem; margin-top: 0.75rem; padding: 1.6rem 0.4rem 0.4rem;
	border-radius: calc(var(--nsb-radius-card, 14px) + 6px); border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 5%, var(--wp--preset--color--base));
}
.nsb-plan-box__label {
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; max-width: calc(100% - 1.5rem);
	padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--highlight);
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nsb-bundle.nsb-bundle--onetime,
.nsb-bundle.nsb-bundle--onetime:has(.nsb-bundle__input:checked) {
	border: 1.5px dashed transparent; background: transparent; justify-content: center; align-items: center;
	gap: 0.5rem; min-height: 44px; padding: 0.35rem 0.75rem; font-size: 0.88rem; color: var(--wp--preset--color--contrast-soft);
}
.nsb-bundle.nsb-bundle--onetime:has(.nsb-bundle__input:checked) { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--muted); }
.nsb-bundle--onetime .nsb-bundle__input { width: 16px; height: 16px; margin: 0; flex: none; }
.nsb-bundle__onetime strong { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nsb-bundle--onetime:has(.nsb-bundle__input:checked) .nsb-bundle__onetime strong { text-decoration: none; }
.nsb-plan-box .nsb-bundle { padding-inline: 0.75rem; gap: 0.6rem; }
/* 0.18.7 Plan box: cards carry no margins of their own (the box's gap spaces them, so no gap under the last);
   the struck price sits at the end of the "Save" row; the one-time option is a plain line with no visible radio
   (still a real, focusable choice); less air between the options and the button. */
.nsb-plan-box > .nsb-bundle { margin: 0 !important; }
.nsb-plan-box .nsb-bundle__row--deal { align-items: baseline; }
.nsb-plan-box .nsb-bundle__row--deal .nsb-bundle__was { margin-left: auto; font-size: 0.88rem; color: var(--wp--preset--color--contrast-soft); }
.nsb-bundle--onetime .nsb-bundle__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nsb-bundle.nsb-bundle--onetime { margin: 0 !important; justify-content: flex-start; text-align: left; }
.nsb-bundle--onetime:has(.nsb-bundle__input:focus-visible) { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.nsb-why { margin-top: 0.15rem !important; }
/* The button: WooCommerce's notices wrapper, its form and the button group each add 16px on top (merged); 8px is enough. */
.nsb-pdp__buy .wc-block-components-notices:has(form) { margin-top: 0.5rem !important; }
.nsb-pdp__buy .wc-block-components-notices > form, .nsb-pdp__buy .wc-block-add-to-cart-with-options > .wp-block-group { margin-top: 0 !important; }

/* 0.18.9 Spacing pass (28 Oct). One step between sections (44px phone, 64px desktop). A tinted or dark band brings
   its own padding, so the white gap beside it is half a step: content-to-content stays even instead of doubling. */
.nsb-pdp__details { --nsb-sec: clamp(2.75rem, 6vw, 4rem); }
.nsb-pdp__details .wp-block-woocommerce-product-description > :is(.nsb-band, .nsb-panel, .nsb-pressure-hero, .nsb-before-after, .nsb-filter-ring, .nsb-founder-note, .nsb-product-3d) + :not(.nsb-band, .nsb-panel, .nsb-pressure-hero, .nsb-before-after, .nsb-filter-ring, .nsb-founder-note, .nsb-product-3d),
.nsb-pdp__details .wp-block-woocommerce-product-description > :not(.nsb-band, .nsb-panel, .nsb-pressure-hero, .nsb-before-after, .nsb-filter-ring, .nsb-founder-note, .nsb-product-3d) + :is(.nsb-band, .nsb-panel, .nsb-pressure-hero, .nsb-before-after, .nsb-filter-ring, .nsb-founder-note, .nsb-product-3d) { margin-top: calc(var(--nsb-sec) / 2) !important; }
/* The first section after the buy area gets a full step (it had 16px under the photo strip). */
.nsb-pdp__details .wp-block-woocommerce-product-description > :first-child { margin-top: var(--nsb-sec) !important; }
/* The closing panel had 24px inside: give it room. */
.nsb-pdp__details .nsb-cta.nsb-panel { padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
/* WooCommerce's ".woocommerce-page img { height: auto }" beat the media fill rule: photos and frames now fill their frames. */
:is(.woocommerce, .woocommerce-page) img.nsb-media { height: 100%; }
/* 0.18.10 Sections with their own background use the same step inside as everywhere else (desktop had 72–88px). */
.nsb-pdp__details :is(.nsb-before-after, .nsb-filter-ring, .nsb-founder-note, .nsb-product-3d).nsb-section,
.nsb-pdp__details .wp-block-woocommerce-product-description > :is(.nsb-before-after, .nsb-filter-ring, .nsb-founder-note, .nsb-product-3d) { padding-top: var(--nsb-sec) !important; padding-bottom: var(--nsb-sec) !important; }
/* 0.18.11 The photo strip's tiles too: WooCommerce's img height:auto left a dark block under each picture. */
:is(.woocommerce, .woocommerce-page) .nsb-ugc__media > :is(img, video) { width: 100%; height: 100%; object-fit: cover; }