/**
 * Napp components — matches .nexo/reference/mockup-home-v2-preferred.png.
 * Logical properties ONLY (RTL default). Hebrew is never letter-spaced.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
	background: var(--napp-cream);
	color: var(--napp-ink);
	font-family: var(--napp-font-body);
	font-size: var(--napp-text-base);
	line-height: 1.7;
	margin: 0;
}

h1, h2, h3, h4 {
	font-family: var(--napp-font-display);
	font-weight: 700;
	line-height: 1.2;
	color: var(--napp-ink);
}

a { color: var(--napp-link); }

.napp-container {
	max-width: var(--napp-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---------- buttons ---------- */
.napp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: var(--napp-touch-min);
	padding: 0.7em 2.2em;
	background: var(--napp-ink);
	color: var(--napp-cream);
	font-family: var(--napp-font-body);
	font-weight: 600;
	font-size: var(--napp-text-lg);
	border: 0;
	border-radius: var(--napp-radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.napp-btn:hover {
	color: var(--napp-cream);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgb(13 49 97 / 0.25);
}
.napp-btn svg { inline-size: 1em; block-size: 1em; }

/* ---------- header ---------- */
.napp-header {
	background: var(--napp-cream);
	padding-block: 0.9rem;
}
.napp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.napp-header__logo img { block-size: 46px; inline-size: auto; display: block; }
/* thin persistent trust strip above the header (Dreamegg/Snooz pattern) */
.napp-topbar { background: var(--napp-ink); color: var(--napp-cream); }
.napp-topbar__inner {
	margin-block: 0;
	padding-block: 0.45rem;
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	font-size: var(--napp-text-sm);
	font-weight: 500;
	text-align: center;
	flex-wrap: wrap;
	row-gap: 0.1rem;
}
@media (max-width: 480px) {
	.napp-topbar__d4, .napp-topbar__i4 { display: none; }
}
.napp-header__nav ul {
	display: flex;
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.napp-header__nav a {
	color: var(--napp-ink);
	text-decoration: none;
	font-weight: 500;
	padding-block: 0.5rem;
}
.napp-header__nav .current-menu-item > a,
.napp-header__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}
.napp-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: var(--napp-touch-min);
	padding: 0.4em 1.2em;
	border: 1.5px solid var(--napp-ink);
	border-radius: var(--napp-radius-pill);
	color: var(--napp-ink);
	text-decoration: none;
	font-weight: 500;
	background: transparent;
}
.napp-header__cart:hover { background: var(--napp-surface); color: var(--napp-ink); }
.napp-header__cart svg { inline-size: 1.15em; block-size: 1.15em; }
.napp-header__toggle { display: none; }

@media (max-width: 1024px) {
	.napp-header__nav { display: none; }
	.napp-header__nav.is-open {
		display: block;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--napp-cream);
		padding: 1rem 1.5rem 1.5rem;
		box-shadow: 0 12px 24px rgb(13 49 97 / 0.12);
		z-index: 50;
	}
	.napp-header__nav.is-open ul { flex-direction: column; gap: 0; }
	.napp-header__nav.is-open a {
		display: block;
		padding: 0.85rem 0.25rem;
		font-size: var(--napp-text-lg);
		border-block-end: 1px solid var(--napp-card);
	}
	.napp-header__inner { position: relative; }
	.napp-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-inline-size: var(--napp-touch-min);
		min-block-size: var(--napp-touch-min);
		background: none;
		border: 0;
		color: var(--napp-ink);
		cursor: pointer;
	}
}

/* ---------- hero (mockup-faithful: dominant headline, full-bleed product, moon + waves) ---------- */
.napp-hero {
	position: relative;
	overflow: clip;
	/* break out of any boxed builder container to true full-bleed */
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline-start: calc(50% - 50vw);
}
/* Moon anchors the hero's top inline-end corner (LEFT in RTL), behind everything. */
.napp-hero__moon {
	position: absolute;
	inset-inline-end: clamp(0.75rem, 2vw, 2.5rem);
	top: clamp(0.5rem, 2vw, 2rem);
	inline-size: clamp(170px, 26vw, 340px);
	opacity: 0.95;
	pointer-events: none;
	z-index: 0;
}
/* Thin wave lines flow from the moon across the headline zone. */
.napp-hero__waves {
	position: absolute;
	inset-inline: 0;
	top: clamp(2rem, 6vw, 5rem);
	inline-size: 100%;
	block-size: clamp(160px, 26vw, 320px);
	z-index: 0;
	pointer-events: none;
}
.napp-hero__inner {
	/* NOT position:relative — the abs product must position against .napp-hero (full-bleed) */
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) 1.22fr;
	align-items: start;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: clamp(1.25rem, 3vw, 2.5rem) 0;
	min-block-size: clamp(500px, 52vw, 700px);
}
.napp-hero__content { position: relative; z-index: 2; padding-block-start: clamp(0.5rem, 2vw, 2rem); }
/* Wide monitors: hero content tracks the viewport so the headline hugs the inline-start (right)
   edge instead of floating far from it; the rest of the page keeps the 1200px container. */
.napp-hero .napp-container { max-width: 94vw; }
.napp-hero__title {
	font-size: clamp(3rem, 2rem + 5.2vw, 5.5rem);
	line-height: 1.08;
	margin: 0 0 0.35em;
}
.napp-hero__text {
	font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
	line-height: 1.65;
	margin: 0 0 1.3em;
	max-inline-size: 28ch;
}
.napp-btn--hero { font-size: var(--napp-text-xl); padding: 0.75em 3.2em; }
/* Product scene is pinned to the hero's bottom + viewport inline-end edge (LEFT in RTL). */
.napp-hero__media {
	position: absolute;
	inset-inline-end: 0;
	bottom: 0;
	inline-size: min(58vw, 760px);
	z-index: 1;
}
.napp-hero__media img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	/* photo bg is near-cream; multiply + edge fade melt the rectangle into the page */
	mix-blend-mode: multiply;
	mask-image: linear-gradient(to bottom, transparent 0%, black 14%), linear-gradient(to right, black 84%, transparent 99%);
	mask-composite: intersect;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%), linear-gradient(to right, black 84%, transparent 99%);
	-webkit-mask-composite: source-in;
}
@media (max-width: 1024px) {
	.napp-hero__inner { grid-template-columns: 1fr; min-block-size: 0; }
	.napp-hero__content { order: 1; padding-block-start: clamp(2.5rem, 12vw, 4rem); }
	/* back into flow on mobile: full-bleed to the inline-end (left) container edge */
	.napp-hero__media {
		position: relative;
		inset: auto;
		inline-size: auto;
		order: 2;
		margin-block-start: clamp(1.5rem, 6vw, 3rem);
		margin-inline-end: calc(-1 * clamp(1rem, 4vw, 2rem));
	}
	.napp-hero__moon { inline-size: clamp(150px, 42vw, 230px); inset-inline-end: 0.5rem; }
	.napp-hero__waves { top: 1.5rem; }
}

/* ---------- feature bar ---------- */
/* The pill floats over the hero image's bottom edge, like the mockup. */
.home .napp-section:has(> .napp-feature-bar) {
	margin-block-start: calc(-1 * clamp(1.75rem, 4.5vw, 3.25rem));
	position: relative;
	z-index: 3;
}
.napp-feature-bar {
	position: relative;
	z-index: 3;
	background: var(--napp-surface);
	border-radius: var(--napp-radius-pill);
	box-shadow: 0 10px 30px rgb(13 49 97 / 0.08);
	padding: 1.6rem 2rem;
	display: flex;
	justify-content: space-around;
	gap: 1rem;
}
.napp-feature-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	text-align: center;
	font-weight: 500;
	font-size: var(--napp-text-base);
	flex: 1;
	position: relative;
}
.napp-feature-bar__item + .napp-feature-bar__item::before {
	content: '';
	position: absolute;
	inset-inline-start: calc(-0.5rem);
	top: 15%;
	block-size: 70%;
	inline-size: 1px;
	background: var(--napp-stroke);
	opacity: 0.6;
}
.napp-feature-bar__item svg { inline-size: 34px; block-size: 34px; color: var(--napp-ink); }
@media (max-width: 1024px) {
	.napp-feature-bar { flex-wrap: wrap; border-radius: var(--napp-radius-card); }
	.napp-feature-bar__item { flex: 1 1 40%; }
	.napp-feature-bar__item:nth-child(3)::before { display: none; }
}

/* ---------- benefit cards ---------- */
.napp-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--napp-c-cards-gap, clamp(1rem, 2.5vw, 1.75rem));
}
.napp-benefit-card {
	background: var(--napp-c-card-bg, var(--napp-card));
	border-radius: var(--napp-c-card-radius, var(--napp-radius-card));
	padding: 2.25rem 1.75rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	aspect-ratio: 1 / 1.05;
	min-block-size: 320px;
	overflow: clip;
}
.napp-benefit-card h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin: 0 0 0.35em; color: var(--napp-c-card-title, var(--napp-ink)); }
.napp-benefit-card p { margin: 0; font-size: var(--napp-text-lg); max-inline-size: 22ch; color: var(--napp-c-card-text, var(--napp-ink)); }
.napp-benefit-card__art {
	margin-block-start: auto;
	align-self: center;
	inline-size: min(92%, 330px);
}
.napp-benefit-card__art img, .napp-benefit-card__art svg { inline-size: 100%; block-size: auto; display: block; }
@media (max-width: 1024px) {
	.napp-benefits { grid-template-columns: 1fr; }
	.napp-benefit-card { min-block-size: 240px; }
}

/* ---------- product spotlight ---------- */
.napp-spotlight {
	background: var(--napp-card);
	border-radius: var(--napp-radius-spot);
	padding: clamp(1.5rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	position: relative;
	overflow: clip;
}
.napp-spotlight { min-block-size: clamp(320px, 32vw, 420px); }
.napp-spotlight h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin: 0 0 0.8em; }
.napp-spotlight__features { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; gap: 0.7em; }
.napp-spotlight__features li { display: flex; align-items: center; gap: 0.7em; font-weight: 500; font-size: var(--napp-text-lg); }
.napp-spotlight__features svg { inline-size: 22px; block-size: 22px; flex: none; color: var(--napp-ink); }
.napp-spotlight__buy { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.napp-spotlight__price {
	font-family: var(--napp-font-display);
	font-weight: 700;
	font-size: var(--napp-text-3xl);
}
.napp-spotlight__media { position: relative; }
.napp-spotlight__media::before {
	content: '';
	position: absolute;
	inset: 8%;
	background: radial-gradient(closest-side, rgb(255 255 255 / 0.85), transparent);
	border-radius: 50%;
}
.napp-spotlight__media img { position: relative; inline-size: 100%; max-inline-size: 540px; block-size: auto; display: block; margin-inline: auto; }
@media (max-width: 1024px) {
	.napp-spotlight { grid-template-columns: 1fr; }
	.napp-spotlight__media { order: -1; }
}

/* ---------- testimonials ---------- */
.napp-testimonials__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	font-size: var(--napp-text-2xl);
	margin: 0 0 1.5em;
}
.napp-testimonials__heading svg { inline-size: 20px; block-size: 20px; color: var(--napp-stroke); }
.napp-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.napp-testimonial {
	background: var(--napp-surface);
	border-radius: var(--napp-radius-card);
	padding: 2.1rem 1.75rem;
	font-size: var(--napp-text-lg);
	min-block-size: 230px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: 0 8px 24px rgb(13 49 97 / 0.06);
}
.napp-testimonial__quote {
	font-family: var(--napp-font-display);
	font-size: 3.2rem;
	line-height: 0.8;
	font-weight: 700;
	color: var(--napp-band);
}
.napp-testimonial p { margin: 0; }
.napp-testimonial__heart { margin-block-start: auto; align-self: center; color: var(--napp-band); }
.napp-testimonial__heart svg { inline-size: 20px; block-size: 20px; }
@media (max-width: 1024px) {
	.napp-testimonials__grid { grid-template-columns: 1fr; }
}

/* ---------- trust band ---------- */
.napp-trust {
	background: var(--napp-band);
	border-radius: var(--napp-radius-card);
	padding: 1.8rem 1.75rem;
	display: flex;
	justify-content: space-around;
	gap: 1rem;
	color: var(--napp-ink);
}
.napp-trust__item {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-weight: 600;
	font-size: var(--napp-text-base);
	line-height: 1.35;
	flex: 1;
	justify-content: center;
	position: relative;
	text-align: start;
}
.napp-trust__item + .napp-trust__item::before {
	content: '';
	position: absolute;
	inset-inline-start: -0.5rem;
	top: 10%;
	block-size: 80%;
	inline-size: 1px;
	background: rgb(13 49 97 / 0.25);
}
.napp-trust__item svg { inline-size: 34px; block-size: 34px; flex: none; }
@media (max-width: 1024px) {
	.napp-trust { flex-wrap: wrap; }
	.napp-trust__item { flex: 1 1 45%; justify-content: start; }
	.napp-trust__item:nth-child(3)::before { display: none; }
}

/* ---------- footer ---------- */
.napp-footer { margin-block-start: var(--napp-section-gap); }
.napp-footer__wave { display: block; inline-size: 100%; block-size: auto; color: var(--napp-surface); }
.napp-footer__body { background: var(--napp-surface); padding-block: 1rem 2rem; }
.napp-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
	gap: 2rem;
}
.napp-footer__brand img { block-size: 52px; inline-size: auto; }
.napp-footer__tagline { font-weight: 600; margin-block-start: 0.6rem; }
.napp-footer h4 { font-size: var(--napp-text-lg); margin: 0 0 0.7em; }
.napp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45em; }
.napp-footer a { color: var(--napp-ink); text-decoration: none; }
.napp-footer a:hover { text-decoration: underline; }
.napp-footer__social { display: flex; gap: 0.7rem; margin-block-start: 0.8rem; }
.napp-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border: 1.5px solid var(--napp-ink);
	border-radius: 50%;
}
.napp-footer__social svg { inline-size: 18px; block-size: 18px; }
.napp-footer__legal {
	text-align: center;
	font-size: var(--napp-text-sm);
	padding-block: 1.2rem 0.4rem;
	color: var(--napp-ink);
}
/* Email addresses render LTR inside RTL text. */
.napp-ltr { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 1024px) {
	.napp-footer__grid { grid-template-columns: 1fr 1fr; }
	.napp-footer__brand { grid-column: 1 / -1; }
}

/* ---------- sections rhythm + decorative line-art ---------- */
.napp-section { margin-block: var(--napp-section-gap); }
.napp-art { pointer-events: none; user-select: none; }

/* ---------- WooCommerce essentials on tokens ---------- */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button.alt {
	background: var(--napp-ink);
	color: var(--napp-cream);
	border-radius: var(--napp-radius-pill);
	padding: 0.7em 2em;
	font-weight: 600;
}
.woocommerce .button:hover, .woocommerce a.button:hover { background: var(--napp-link); color: var(--napp-cream); }
.napp-shipping-disclosure {
	background: var(--napp-card);
	border-radius: 12px;
	padding: 0.7em 1em;
	font-weight: 500;
	font-size: var(--napp-text-sm);
}

@media (prefers-reduced-motion: reduce) {
	.napp-btn { transition: none; }
}

/* ---------- small-viewport overflow guards (Woo defaults) ---------- */
img { max-inline-size: 100%; block-size: auto; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { max-inline-size: 100%; }
@media (max-width: 1024px) {
	.woocommerce table.shop_table { display: block; overflow-x: auto; }
	body { overflow-x: clip; }
}

/* Neutralize Hello parent's negative page margins (caused 20-30px x-overflow at 360)
   while PRESERVING auto-centering (margin-inline: 0 broke desktop centering — off-center card bug). */
.site-main, .page-header, .page-content {
	margin-inline: auto !important;
	padding-inline: clamp(1rem, 4vw, 2rem) !important;
	max-inline-size: 100%;
}


/* ---------- mobile hero polish ---------- */
@media (max-width: 1024px) {
	.napp-hero__media { margin-block-start: 0.25rem; }
	.napp-hero__content { padding-block-end: 0.25rem; }
	.napp-hero__moon { opacity: 1; filter: saturate(1.35); inline-size: clamp(160px, 46vw, 250px); }
	.napp-hero__waves { opacity: 0.55; }
}

/* ---------- cart drawer ---------- */
.napp-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgb(15 30 58 / 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 90;
}
.napp-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.napp-cart-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0; /* physical: drawer docks to the right edge (like the reference) in BOTH directions */
	left: auto;
	inline-size: min(400px, 92vw);
	background: var(--napp-cream);
	z-index: 95;
	transform: translateX(110%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: -12px 0 40px rgb(13 49 97 / 0.18);
	border-radius: 24px 0 0 24px;
}
.napp-cart-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .napp-cart-drawer { transition: none; } }
.napp-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.4rem;
	border-block-end: 1px solid var(--napp-stroke);
}
.napp-drawer__head h3 { margin: 0; font-size: var(--napp-text-xl); }
.napp-drawer__close {
	background: none;
	border: 0;
	color: var(--napp-ink);
	cursor: pointer;
	min-inline-size: var(--napp-touch-min);
	min-block-size: var(--napp-touch-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	line-height: 1;
	border-radius: 50%;
}
.napp-drawer__close:hover { background: var(--napp-card); }
.napp-drawer__body { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; }
.napp-drawer__body .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.napp-drawer__body .woocommerce-mini-cart-item { display: grid; grid-template-columns: 64px 1fr; gap: 0.8rem; align-items: center; background: var(--napp-surface); border-radius: 14px; padding: 0.7rem; }
.napp-drawer__body .woocommerce-mini-cart-item img { inline-size: 64px; block-size: auto; border-radius: 10px; }
.napp-drawer__body .woocommerce-mini-cart__total { font-weight: 700; font-size: var(--napp-text-lg); display: flex; justify-content: space-between; padding-block: 1rem; border-block-start: 1px solid var(--napp-stroke); }
.napp-drawer__body .woocommerce-mini-cart__buttons { display: grid; gap: 0.6rem; margin: 0; }
.napp-drawer__body .woocommerce-mini-cart__buttons .button { text-align: center; }
.napp-drawer__body .woocommerce-mini-cart__empty-message { text-align: center; color: var(--napp-ink); padding-block: 2rem; }

/* ---------- PDP (classic Woo templates on tokens) ---------- */
.single-product .product_title { font-size: var(--napp-text-3xl); }
.single-product div.product p.price { font-family: var(--napp-font-display); font-weight: 700; font-size: var(--napp-text-2xl); color: var(--napp-ink); }
.single-product div.product .woocommerce-product-details__short-description { font-size: var(--napp-text-lg); line-height: 1.75; }
.single-product div.product form.cart { display: flex; gap: 0.8rem; align-items: stretch; flex-wrap: wrap; margin-block: 1.2rem; }
.single-product div.product form.cart .qty { inline-size: 76px; min-block-size: var(--napp-touch-min); border: 1.5px solid var(--napp-stroke); border-radius: 12px; text-align: center; font-size: var(--napp-text-base); background: var(--napp-surface); }
.single-product div.product form.cart .single_add_to_cart_button { flex: 1; min-inline-size: 200px; }
.single-product div.product div.images img { border-radius: var(--napp-radius-card); }
.single-product .woocommerce-tabs ul.tabs li a { color: var(--napp-ink); font-weight: 600; }
.single-product .related.products > h2, .single-product .upsells.products > h2 { font-size: var(--napp-text-2xl); }
.single-product ul.products li.product, .woocommerce ul.products li.product { background: var(--napp-surface); border-radius: var(--napp-radius-card); padding: 1rem; }
.woocommerce ul.products li.product img { border-radius: 16px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--napp-font-display); font-weight: 700; color: var(--napp-ink); font-size: var(--napp-text-lg); }
.woocommerce ul.products li.product .price { color: var(--napp-ink); font-weight: 700; }
/* SKU/meta numbers stay LTR inside RTL */
.single-product .product_meta .sku, .single-product .product_meta .sku_wrapper span { direction: ltr; unicode-bidi: isolate; }

/* PDP duo cross-sell compare card */
.napp-duo {
	background: var(--napp-card);
	border-radius: var(--napp-radius-card);
	padding: clamp(1.25rem, 3vw, 2rem);
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: 1.25rem;
	align-items: center;
	margin-block: 2rem;
}
.napp-duo img { inline-size: 140px; block-size: auto; border-radius: 16px; }
.napp-duo h3 { margin: 0 0 0.3em; font-size: var(--napp-text-xl); }
.napp-duo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3em; font-size: var(--napp-text-sm); font-weight: 500; }
.napp-duo__buy { display: grid; gap: 0.6rem; justify-items: center; }
.napp-duo__price { font-family: var(--napp-font-display); font-weight: 700; font-size: var(--napp-text-xl); }
@media (max-width: 1024px) {
	.napp-duo { grid-template-columns: 96px 1fr; }
	.napp-duo img { inline-size: 96px; }
	.napp-duo__buy { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; inline-size: 100%; }
}

/* sticky mobile add-to-cart bar on PDP */
@media (max-width: 1024px) {
	.napp-sticky-atc {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		background: var(--napp-surface);
		box-shadow: 0 -8px 24px rgb(13 49 97 / 0.14);
		padding: 0.7rem clamp(1rem, 4vw, 2rem) calc(0.7rem + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		z-index: 60;
	}
	.napp-sticky-atc__price { font-family: var(--napp-font-display); font-weight: 700; font-size: var(--napp-text-xl); }
	.single-product { padding-block-end: 84px; }
	/* variant-aware bar on the picker PDP: name above price */
	.napp-sticky-atc__meta { display: grid; gap: 0.1rem; min-inline-size: 0; }
	.napp-sticky-atc__name {
		font-size: var(--napp-text-sm);
		font-weight: 600;
		color: var(--napp-link);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.napp-sticky-atc--picker .napp-btn { flex: 0 1 auto; }
	/* leave room for the fixed bar so it never covers the last section */
	body:has(.napp-sticky-atc--picker) { padding-block-end: 84px; }
}
@media (min-width: 1025px) { .napp-sticky-atc { display: none; } }
/* the [hidden] attribute must beat the display:flex above */
.napp-sticky-atc[hidden] { display: none !important; }

/* ---------- sounds grid ---------- */
.napp-sounds {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: clamp(0.75rem, 2vw, 1.25rem);
}
.napp-sound-chip {
	background: var(--napp-surface);
	border: 1.5px solid var(--napp-stroke);
	border-radius: var(--napp-radius-card);
	padding: 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
	font-weight: 600;
	color: var(--napp-ink);
}
.napp-sound-chip svg { inline-size: 28px; block-size: 28px; color: var(--napp-link); }
.napp-sound-chip__play {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	inline-size: 100%;
}
.napp-sound-chip__play:focus-visible { outline: 2px solid var(--napp-link); outline-offset: 4px; border-radius: 8px; }
.napp-sound-chip:has(.napp-sound-chip__play) { transition: border-color 0.2s ease, box-shadow 0.2s ease, translate 0.2s ease; }
.napp-sound-chip:has(.napp-sound-chip__play:hover) { border-color: var(--napp-link); translate: 0 -2px; }
.napp-sound-chip.is-playing { border-color: var(--napp-link); box-shadow: 0 6px 18px rgb(13 49 97 / 0.14); }
.napp-sound-chip.is-playing svg { animation: napp-sound-pulse 1.1s ease-in-out infinite; }
@keyframes napp-sound-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.18); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
	.napp-sound-chip.is-playing svg { animation: none; }
	.napp-sound-chip:has(.napp-sound-chip__play) { transition: none; }
}
.napp-sounds-note { background: var(--napp-card); border-radius: var(--napp-radius-card); padding: 1.25rem 1.5rem; margin-block-start: 1.5rem; font-weight: 500; }

/* ---------- blog: article + card grid (dynamic templates) ---------- */
.napp-article__inner { max-inline-size: 760px; padding-block: clamp(1.5rem, 4vw, 3rem); }
.napp-article__meta { color: var(--napp-link); font-weight: 600; font-size: var(--napp-text-sm); margin: 0 0 0.6em; }
.napp-article__head h1 { line-height: 1.25; margin: 0 0 0.6em; } /* size comes from the shared page-title rule */
.napp-article__body { font-size: var(--napp-text-lg); }
.napp-article__body h2 { font-size: var(--napp-text-2xl); margin: 1.6em 0 0.5em; }
.napp-article__body h3 { font-size: var(--napp-text-xl); margin: 1.4em 0 0.4em; }
.napp-article__body p { margin: 0 0 1em; }
.napp-article__body ul { padding-inline-start: 1.2em; margin: 0 0 1em; }
.napp-article__body li { margin-block-end: 0.4em; }
.napp-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.napp-post-card {
	background: var(--napp-surface);
	border-radius: var(--napp-radius-card);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	box-shadow: 0 8px 24px rgb(13 49 97 / 0.06);
}
.napp-post-card__link { text-decoration: none; }
.napp-post-card__img { inline-size: 100%; block-size: auto; border-radius: 14px; }
.napp-post-card h3 { margin: 0.4em 0 0; font-size: var(--napp-text-xl); line-height: 1.35; color: var(--napp-ink); }
.napp-post-card p { margin: 0; }
.napp-post-card__more { font-weight: 700; margin-block-start: auto; }
.napp-pagination { text-align: center; padding-block: 1.5rem; }
.napp-pagination .page-numbers { padding: 0.4em 0.8em; border-radius: 10px; }
.napp-pagination .page-numbers.current { background: var(--napp-ink); color: var(--napp-cream); }
@media (max-width: 1024px) {
	.napp-post-grid { grid-template-columns: 1fr; }
}

/* ---------- PDP v2: spotlight hero + version cards + bundle strip ---------- */
/*
 * Block flow, NOT grid. This was `display:grid` for the old spotlight template.
 * `.napp-container` sets `margin-inline:auto`, and on a grid ITEM auto margins
 * override stretch and shrink it to fit-content — which collapsed the PDP
 * feature row into a ~165px vertical strip while the wider buy-box row above it
 * looked fine, because its content happened to be wide. The new PDP sections
 * space themselves, so there is nothing left for the grid gap to do.
 */
.napp-pdp { display: block; }
.napp-pdp-hero {
	position: relative;
	overflow: clip;
	background: var(--napp-card);
	border-radius: var(--napp-radius-spot);
	padding: clamp(1.75rem, 4.5vw, 3.5rem);
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	min-block-size: clamp(420px, 42vw, 560px);
}
.napp-pdp-hero__art {
	position: absolute;
	inset-inline-end: clamp(0.5rem, 2vw, 2rem);
	top: clamp(0.5rem, 1.5vw, 1.5rem);
	inline-size: clamp(110px, 13vw, 180px);
	opacity: 0.55;
	pointer-events: none;
}
.napp-pdp-hero__sparkle {
	position: absolute;
	inset-inline-end: clamp(1rem, 4vw, 3.5rem);
	bottom: clamp(1rem, 4vw, 3rem);
	inline-size: 26px;
	block-size: 26px;
	opacity: 0.7;
	pointer-events: none;
}
.napp-pdp-hero__media { position: relative; }
.napp-pdp-hero__media::before {
	content: '';
	position: absolute;
	inset: 2%;
	background: radial-gradient(closest-side, rgb(255 255 255 / 0.95), rgb(247 231 195 / 0.35) 60%, transparent);
	border-radius: 50%;
}
.napp-pdp-hero__media img { position: relative; inline-size: 100%; max-inline-size: 600px; block-size: auto; margin-inline: auto; display: block; filter: drop-shadow(0 22px 30px rgb(13 49 97 / 0.14)); }
.napp-pdp-hero__tag {
	display: inline-block;
	background: var(--napp-surface);
	color: var(--napp-link);
	font-weight: 700;
	font-size: var(--napp-text-sm);
	border-radius: var(--napp-radius-pill);
	padding: 0.3em 1em;
	margin-block-end: 0.8rem;
}
.napp-pdp-hero .product_title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); margin: 0 0 0.6em; }
.napp-pdp-hero__price { font-family: var(--napp-font-display); font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); margin: 0.4em 0; }
.napp-pdp-hero__price del { opacity: 0.5; font-size: 0.65em; margin-inline-start: 0.5em; }
.napp-pdp-hero__price ins { text-decoration: none; }
.napp-pdp-hero form.cart { display: flex; gap: 0.8rem; align-items: stretch; flex-wrap: wrap; margin-block: 0.6rem 1rem; }
.napp-pdp-hero form.cart .quantity { display: inline-flex; }
.napp-pdp-hero form.cart .qty {
	inline-size: 86px;
	min-block-size: 54px;
	border: 2px solid var(--napp-stroke);
	border-radius: var(--napp-radius-pill);
	text-align: center;
	font-family: var(--napp-font-display);
	font-weight: 700;
	font-size: var(--napp-text-lg);
	background: var(--napp-surface);
	color: var(--napp-ink);
}
.napp-pdp-hero form.cart .single_add_to_cart_button {
	flex: 1;
	min-inline-size: 210px;
	min-block-size: 54px;
	font-size: var(--napp-text-lg);
	border-radius: var(--napp-radius-pill);
}
.napp-pdp-hero__assurances { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: var(--napp-text-sm); font-weight: 600; color: var(--napp-link); }
.napp-pdp-hero__assurances li { display: flex; align-items: center; gap: 0.4em; }
.napp-pdp-hero__assurances li::before { content: '✓'; font-weight: 800; }
@media (max-width: 1024px) {
	.napp-pdp-hero { grid-template-columns: 1fr; }
	.napp-pdp-hero__media { order: -1; }
}

.napp-versions h2 { text-align: center; font-size: var(--napp-text-2xl); margin: 0 0 1em; }
.napp-versions__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
.napp-version-card {
	background: var(--napp-surface);
	border: 2px solid var(--napp-stroke);
	border-radius: var(--napp-radius-card);
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.6rem;
	position: relative;
}
.napp-version-card.is-current { border-color: var(--napp-ink); box-shadow: 0 14px 34px rgb(13 49 97 / 0.14); }
.napp-version-card__tag {
	position: absolute;
	top: -0.9em;
	inset-inline-start: 50%;
	transform: translateX(50%);
	background: var(--napp-ink);
	color: var(--napp-cream);
	font-size: var(--napp-text-sm);
	font-weight: 700;
	border-radius: var(--napp-radius-pill);
	padding: 0.25em 1.1em;
	white-space: nowrap;
}
[dir="ltr"] .napp-version-card__tag { transform: translateX(-50%); }
.napp-version-card img { inline-size: min(60%, 220px); block-size: auto; }
.napp-version-card h3 { margin: 0; font-size: var(--napp-text-xl); }
.napp-version-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3em; font-weight: 500; font-size: var(--napp-text-sm); }
.napp-version-card__price { font-family: var(--napp-font-display); font-weight: 700; font-size: var(--napp-text-2xl); margin: 0.2em 0; }
.napp-version-card__price del { opacity: 0.5; font-size: 0.6em; margin-inline-start: 0.4em; }
.napp-version-card__price ins { text-decoration: none; }
.napp-version-card__current {
	color: var(--napp-link);
	font-weight: 700;
	min-block-size: var(--napp-touch-min);
	display: inline-flex;
	align-items: center;
}
@media (max-width: 1024px) {
	.napp-versions__grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

.napp-bundle-strip {
	margin-block-start: clamp(1rem, 2.5vw, 1.75rem);
	background: var(--napp-band);
	border-radius: var(--napp-radius-card);
	padding: 1.4rem 1.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.napp-bundle-strip h3 { margin: 0 0 0.2em; font-size: var(--napp-text-xl); }
.napp-bundle-strip p { margin: 0; font-weight: 500; }
.napp-bundle-strip__buy { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.napp-pdp-desc h2, .napp-pdp-reviews h2 { font-size: var(--napp-text-2xl); }
.napp-pdp-desc { max-inline-size: 760px; }

/* ---------- FAQ accordion ---------- */
.napp-faq { display: grid; gap: 0.9rem; max-inline-size: 820px; margin-inline: auto; }
.napp-faq details {
	background: var(--napp-surface);
	border-radius: var(--napp-radius-card);
	padding: 0;
	box-shadow: 0 6px 20px rgb(13 49 97 / 0.06);
	overflow: clip;
}
.napp-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.4rem;
	font-family: var(--napp-font-display);
	font-weight: 700;
	font-size: var(--napp-text-lg);
	color: var(--napp-ink);
	min-block-size: var(--napp-touch-min);
}
.napp-faq summary::-webkit-details-marker { display: none; }
.napp-faq summary::after { content: '+'; font-size: 1.5em; line-height: 1; color: var(--napp-link); flex: none; }
.napp-faq details[open] summary::after { content: '−'; }
.napp-faq details > div { padding: 0 1.4rem 1.2rem; }

/* ---------- family bundle band ---------- */
.napp-bundle-band {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	background: var(--napp-c-bundle-bg, #E7EFF6);
	border-radius: var(--napp-radius-card);
	padding: clamp(1.5rem, 4vw, 3rem);
}
/* One composed pair render replaces the two absolutely-positioned images that
   used to be stacked here; the overlap is now baked into the photograph. */
.napp-bundle-band__media { inline-size: min(100%, 520px); margin-inline: auto; }
.napp-bundle-band__media img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	/* transparent PNG: grounding comes from CSS, not from a baked-in field */
	filter: drop-shadow(0 14px 26px rgb(13 49 97 / 0.16));
}
.napp-bundle-band__kicker {
	display: inline-block;
	background: var(--napp-surface);
	border-radius: var(--napp-radius-pill);
	padding: 0.3em 1em;
	font-weight: 700;
	font-size: var(--napp-text-sm);
	color: var(--napp-link);
	margin-block-end: 0.8em;
}
.napp-bundle-band__title { margin: 0 0 0.4em; font-size: var(--napp-text-2xl, 1.8rem); color: var(--napp-c-bundle-title, var(--napp-ink)); }
.napp-bundle-band__price { display: flex; align-items: baseline; gap: 0.6em; margin: 0.9em 0 1.2em; }
.napp-bundle-band__now { font-size: 2rem; font-weight: 800; color: var(--napp-link); }
.napp-bundle-band__price del { color: color-mix(in oklab, var(--napp-ink) 55%, transparent); font-size: var(--napp-text-lg); }
@media (max-width: 768px) {
	.napp-bundle-band { grid-template-columns: 1fr; text-align: center; }
	.napp-bundle-band__media { inline-size: min(70vw, 300px); }
	.napp-bundle-band__price { justify-content: center; }
}

/* ---------- why-us local-trust comparison ---------- */
.napp-why-us__intro { max-inline-size: 62ch; margin: 0 auto 2rem; text-align: center; }
.napp-why-us__card {
	background: var(--napp-c-why-bg, #fff);
	border-radius: var(--napp-radius-card);
	box-shadow: 0 10px 30px rgb(13 49 97 / 0.08);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}
.napp-why-us__head,
.napp-why-us__row {
	display: grid;
	grid-template-columns: minmax(110px, 0.7fr) 1.15fr 1fr;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	align-items: center;
}
.napp-why-us__head { padding-block-end: 0.9rem; border-block-end: 1.5px solid var(--napp-stroke); font-weight: 700; }
.napp-why-us__col--us { color: var(--napp-c-why-title, var(--napp-link)); }
.napp-why-us__rows { list-style: none; margin: 0; padding: 0; }
.napp-why-us__row { padding-block: 0.95rem; }
.napp-why-us__row + .napp-why-us__row { border-block-start: 1px solid color-mix(in oklab, var(--napp-stroke) 55%, transparent); }
.napp-why-us__topic { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--napp-c-why-title, var(--napp-ink)); }
.napp-why-us__topic svg { flex: none; color: var(--napp-link); }
.napp-why-us__us { font-weight: 600; }
.napp-why-us__us::before { content: '✓'; margin-inline-end: 0.4em; color: var(--napp-link); font-weight: 700; }
.napp-why-us__them { color: color-mix(in oklab, var(--napp-ink) 62%, transparent); }
.napp-why-us__note { text-align: center; }
@media (max-width: 768px) {
	.napp-why-us__head { display: none; }
	.napp-why-us__row { grid-template-columns: 1fr; gap: 0.35rem; padding-block: 1.1rem; }
	.napp-why-us__them { font-size: var(--napp-text-sm); }
	.napp-why-us__them::before { content: 'בהזמנה לבד מחו״ל: ' / ''; font-weight: 600; }
}

/* ---------- sound guide cards (why these sounds) ---------- */
.napp-sound-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); margin-block-end: var(--napp-section-gap); }
.napp-sound-guide__card { background: var(--napp-card); border-radius: var(--napp-radius-card); padding: 1.75rem 1.5rem; }
.napp-sound-guide__card h3 { margin: 0 0 0.4em; font-size: var(--napp-text-xl); }
.napp-sound-guide__card p { margin: 0; }
.napp-sound-guide__card .napp-sound-guide__pick { display: inline-block; margin-block-start: 0.9em; background: var(--napp-surface); border-radius: var(--napp-radius-pill); padding: 0.35em 1em; font-weight: 700; color: var(--napp-link); font-size: var(--napp-text-sm); }
@media (max-width: 1024px) { .napp-sound-guide { grid-template-columns: 1fr; } }

/* ---------- about page prose ---------- */
.page-id-19 .page-content { max-inline-size: 780px; margin-inline: auto; font-size: var(--napp-text-lg); }
.page-id-19 .page-content h2 { font-size: var(--napp-text-2xl); margin: 1.6em 0 0.5em; }
.napp-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-block: 1.5rem; }
.napp-values > div { background: var(--napp-card); border-radius: var(--napp-radius-card); padding: 1.4rem 1.25rem; font-size: var(--napp-text-base); }
.napp-values h3 { margin: 0 0 0.3em; font-size: var(--napp-text-lg); }
.napp-values p { margin: 0; }
@media (max-width: 1024px) { .napp-values { grid-template-columns: 1fr; } }

/* ---------- spotlight slider ---------- */
.napp-slider { position: relative; }
/* .napp-spotlight's own 2-col grid must NOT lay out the slider's children — each slide has the grid */
.napp-spotlight.napp-slider { display: block; }
.napp-slider__slide { display: none; grid-template-columns: 1fr 1.05fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.napp-slider__slide.is-active { display: grid; }
@media (max-width: 1024px) {
	.napp-slider__slide.is-active { grid-template-columns: 1fr; }
	.napp-slider__slide .napp-spotlight__media { order: -1; }
}
.napp-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--napp-surface);
	color: var(--napp-ink);
	box-shadow: 0 6px 18px rgb(13 49 97 / 0.16);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
}
.napp-slider__arrow:hover { background: var(--napp-ink); color: var(--napp-cream); }
.napp-slider__arrow--prev { inset-inline-start: 0.9rem; }
.napp-slider__arrow--next { inset-inline-end: 0.9rem; }
.napp-slider__dots { position: absolute; inset-inline: 0; bottom: 0.9rem; display: flex; justify-content: center; gap: 0.4rem; direction: rtl; }
.napp-slider__dots button {
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	padding: 0;
}

/* ---------- product picker v2: media stack + selector cards ---------- */
.napp-picker__layout {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	background: var(--napp-card);
	border-radius: var(--napp-radius-spot);
	padding: clamp(1.1rem, 4vw, 3rem);
}
/* media column renders second = inline-end = LEFT in RTL */
.napp-picker__media-stack { position: relative; order: 2; align-self: center; }
.napp-picker__media { display: none; position: relative; }
.napp-picker__media.is-active { display: block; }
.napp-picker__media::before {
	content: '';
	position: absolute;
	inset: 8%;
	background: radial-gradient(closest-side, rgb(255 255 255 / 0.9), transparent);
	border-radius: 50%;
}
.napp-picker__media img { position: relative; inline-size: 100%; max-inline-size: 480px; block-size: auto; margin-inline: auto; display: block; }
/* the side column is a query container so the selector responds to ITS width,
   not the viewport — works in any Elementor column width it's dropped into */
.napp-picker__side { order: 1; display: grid; gap: 1.1rem; container-type: inline-size; }
/* auto-fit: two models side by side while they fit ~8.5rem each, one column only
   when the container is genuinely too narrow — driven by available space, not px breakpoints */
.napp-picker__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
	gap: clamp(0.5rem, 2.5cqi, 0.9rem);
}
.napp-picker__option {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: clamp(0.2rem, 1cqi, 0.35rem);
	background: var(--napp-surface);
	border: 2px solid var(--napp-stroke);
	border-radius: var(--napp-radius-card);
	padding: clamp(0.65rem, 3.5cqi, 1rem) clamp(0.4rem, 3cqi, 0.9rem);
	cursor: pointer;
	color: var(--napp-ink);
	font-family: var(--napp-font-body);
	min-block-size: var(--napp-touch-min);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* ── "Choose first" reveal ────────────────────────────────────────────────────
   .is-await is added by JS on load and removed on the first model pick, so the
   section opens as a question with two answers and expands into the buy box.
   No .is-await in the server HTML: without JS the full PDP renders as before. */
.napp-picker.is-await .napp-picker__media-stack {
	display: none;
}
.napp-picker.is-await .napp-picker__layout {
	/* One column while waiting — no empty gallery column beside the cards.
	   NOT justify-items:center: that sizes the grid item to its content and
	   collapses the column, which stacks the two cards into a narrow strip. */
	grid-template-columns: 1fr;
}
.napp-picker.is-await .napp-picker__side {
	/* Centre by constraining the track, not by shrink-wrapping the item. */
	inline-size: min(100%, 34rem);
	margin-inline: auto;
}
.napp-picker.is-await .napp-picker__options {
	/* These are the primary action while they are the only thing on offer, so
	   give them room: two across down to ~22rem, then one per row. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.napp-picker.is-await .napp-picker__option {
	padding-block: clamp(1rem, 4cqi, 1.6rem);
}
.napp-picker.is-await .napp-picker__option-thumb {
	/* The product shot is what the customer is actually choosing between here,
	   so it leads. Back to the compact size once the buy box is open. */
	inline-size: clamp(5.5rem, 38cqi, 8.5rem);
}
.napp-picker.is-revealing .napp-picker__media-stack,
.napp-picker.is-revealing .napp-picker__panel.is-active {
	animation: napp-picker-reveal 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes napp-picker-reveal {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: none; }
}
@media ( prefers-reduced-motion: reduce ) {
	.napp-picker.is-revealing .napp-picker__media-stack,
	.napp-picker.is-revealing .napp-picker__panel.is-active {
		animation: none;
	}
}

.napp-picker__option-thumb {
	inline-size: clamp(3.25rem, 22cqi, 4.75rem);
	block-size: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: calc(var(--napp-radius-card) - 0.35rem);
	background: var(--napp-card);
	/* The option grid's row-gap (~3px) is right for the name/price text rows but
	   collides an image against the badge pill. Space this row only. */
	margin-block-end: clamp(0.3rem, 1.5cqi, 0.55rem);
}
.napp-picker__option.is-active { border-color: var(--napp-ink); box-shadow: 0 10px 26px rgb(13 49 97 / 0.14); }
.napp-picker__option strong { font-family: var(--napp-font-display); font-size: clamp(var(--napp-text-lg), 5cqi, var(--napp-text-xl)); }
.napp-picker__option-badge {
	background: var(--napp-card);
	color: var(--napp-link);
	font-size: clamp(0.66rem, 3cqi, var(--napp-text-sm));
	font-weight: 700;
	line-height: 1.25;
	border-radius: var(--napp-radius-pill);
	padding: 0.15em 0.9em;
}
.napp-picker__option.is-active .napp-picker__option-badge { background: var(--napp-ink); color: var(--napp-cream); }
.napp-picker__option-price { font-family: var(--napp-font-display); font-weight: 700; font-size: clamp(var(--napp-text-lg), 5cqi, var(--napp-text-xl)); }
.napp-picker__panel { display: none; }
.napp-picker__panel.is-active { display: block; }
/* buy block sits directly under the selector so the CTA is always in reach */
.napp-buybox {
	background: var(--napp-surface);
	border: 1px solid var(--napp-stroke);
	border-radius: var(--napp-radius-card);
	padding: clamp(0.9rem, 2.5vw, 1.25rem);
	margin-block-end: 1.25rem;
	box-shadow: 0 8px 24px rgb(13 49 97 / 0.08);
}
.napp-buybox__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.napp-buybox__price {
	font-family: var(--napp-font-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem);
	line-height: 1;
	color: var(--napp-ink);
	white-space: nowrap;
}
.napp-btn--buy {
	flex: 1 1 auto;
	justify-content: center;
	font-size: var(--napp-text-lg);
	padding-block: 0.95rem;
	min-block-size: var(--napp-touch-min);
	white-space: nowrap;
}
/* Narrow screens: price and quantity share one line, the CTA gets its own
   full-width line below. Keeps the primary action dominant (commerce-conversion
   §5) instead of letting three stacked rows push it down the fold. */
@media (max-width: 600px) {
	.napp-buybox__row { gap: 0.75rem 1rem; }
	.napp-buybox__price { flex: 0 1 auto; }
	.napp-buybox .napp-qty { margin-inline-start: auto; }
	.napp-buybox .napp-btn--buy { flex: 1 0 100%; }
}
/* Trust signals as discrete badges. Three promises run together on one
   dot-separated line read as fine print and looked like an afterthought. */
.napp-buybox__badges {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/* Centred so a wrapped third chip reads as deliberate, not as an orphan
	   stranded against the inline-start edge. */
	justify-content: center;
	gap: 0.4rem;
}
.napp-buybox__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.7rem;
	background: var(--napp-card);
	border: 1px solid var(--napp-stroke);
	border-radius: 999px;
	font-size: var(--napp-text-sm);
	font-weight: 600;
	color: var(--napp-link);
	line-height: 1.2;
	white-space: nowrap;
}
.napp-buybox__badge svg { flex: none; color: var(--napp-link); opacity: 0.85; }
.napp-buybox__shipping-time {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.7rem 0 0;
	font-size: var(--napp-text-sm);
	color: var(--napp-link);
	opacity: 0.85;
}
.napp-buybox__shipping-time svg { flex: none; }
@media (max-width: 480px) {
	/* 0.875rem floor, not 0.8125rem: these badges are the reassurance line directly
	   under the CTA — the highest-value small text on the site — and 13px Hebrew on
	   a phone sits below comfortable reading size. */
	.napp-buybox__badge { font-size: 0.875rem; padding: 0.35rem 0.6rem; }
}

/* availability line — honest stock state, never fabricated scarcity */
.napp-buybox__stock {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.6rem;
	font-size: var(--napp-text-sm);
	font-weight: 600;
	color: #1c6b45;
}
.napp-buybox__dot {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: #24a066;
	flex: none;
}

/* quantity stepper */
.napp-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--napp-stroke);
	border-radius: var(--napp-radius-card);
	background: var(--napp-card);
	overflow: hidden;
	flex: none;
}
.napp-qty__btn {
	inline-size: var(--napp-touch-min);
	block-size: var(--napp-touch-min);
	border: 0;
	background: transparent;
	color: var(--napp-ink);
	font-size: var(--napp-text-lg);
	line-height: 1;
	cursor: pointer;
}
.napp-qty__btn:hover { background: var(--napp-surface); }
.napp-qty__input {
	inline-size: 2.75rem;
	text-align: center;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	color: var(--napp-ink);
	padding: 0;
	-moz-appearance: textfield;
}
.napp-qty__input::-webkit-outer-spin-button,
.napp-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- PDP gallery (main image + thumbnails) ---------- */
.napp-gallery__main { position: relative; }
/* Must out-specify `.napp-picker__media img` (0-1-1), which sets display:block —
   a bare `.napp-gallery__img` (0-1-0) loses and every shot renders stacked. */
.napp-picker__media .napp-gallery__img { display: none; }
.napp-picker__media .napp-gallery__img.is-active { display: block; }
.napp-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-block-start: 0.9rem;
}
.napp-gallery__thumb {
	inline-size: 64px;
	block-size: 64px;
	padding: 0;
	border: 2px solid var(--napp-stroke);
	border-radius: 0.75rem;
	/* tinted, not white: the hero shot is a white device on transparency and
	   disappears against a white thumbnail */
	background: var(--napp-surface);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.napp-gallery__thumb.is-active { border-color: var(--napp-ink); }
.napp-gallery__thumb:focus-visible { outline: 2px solid var(--napp-ink); outline-offset: 2px; }
.napp-gallery__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	max-inline-size: none;
}
.napp-picker__explain { font-size: var(--napp-text-lg); margin: 0 0 1em; }
@media (max-width: 1024px) {
	.napp-picker__layout { grid-template-columns: 1fr; }
	.napp-picker__media-stack { order: 1; }
	.napp-picker__side { order: 2; }
}

/* ---------- smart CTA strip (dismissible, appears when no CTA on screen) ---------- */
.napp-cta-strip {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	background: var(--napp-surface);
	box-shadow: 0 -8px 28px rgb(13 49 97 / 0.16);
	padding: 0.7rem clamp(1rem, 4vw, 2rem) calc(0.7rem + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	z-index: 70;
	transform: translateY(110%);
	transition: transform 0.3s ease;
}
.napp-cta-strip.is-visible { transform: translateY(0); }
.napp-cta-strip p { margin: 0; font-weight: 600; }
.napp-cta-strip p strong { font-family: var(--napp-font-display); }
.napp-cta-strip .napp-btn { padding: 0.5em 1.8em; font-size: var(--napp-text-base); }
.napp-cta-strip__close {
	background: none;
	border: 0;
	color: var(--napp-ink);
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
	min-inline-size: var(--napp-touch-min);
	min-block-size: var(--napp-touch-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 1024px) {
	.napp-cta-strip { flex-wrap: wrap; text-align: center; }
	.napp-cta-strip p { font-size: var(--napp-text-sm); flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .napp-cta-strip { transition: none; } }

/* slider dots: 24px hit area, small visual dot */
.napp-slider__dots button {
	inline-size: 24px;
	block-size: 24px;
	background: transparent;
	position: relative;
}
.napp-slider__dots button::before {
	content: '';
	position: absolute;
	inset: 50%;
	transform: translate(-50%, -50%);
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--napp-stroke);
}
.napp-slider__dots button.is-active::before { background: var(--napp-ink); }

/* ---------- checkout + cart on tokens ---------- */
.woocommerce-checkout .napp-container, .woocommerce-cart .napp-container { max-width: var(--napp-container); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
	border: 1.5px solid var(--napp-stroke);
	border-radius: 12px;
	padding: 0.7em 1em;
	background: var(--napp-surface);
	font-family: var(--napp-font-body);
	font-size: var(--napp-text-base);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus {
	outline: 2px solid var(--napp-link);
	outline-offset: 1px;
}
.woocommerce form .form-row label { font-weight: 600; }
.woocommerce-checkout h3, .woocommerce-checkout h3#order_review_heading { font-size: var(--napp-text-xl); }
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
	background: var(--napp-card);
	border-radius: var(--napp-radius-card);
}
.woocommerce-checkout #payment div.payment_box { background: var(--napp-surface); border-radius: 12px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce table.shop_table { border: 0; border-radius: var(--napp-radius-card); background: var(--napp-surface); overflow: clip; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--napp-cream); }
#place_order {
	inline-size: 100%;
	font-size: var(--napp-text-xl);
	padding-block: 0.8em;
	border-radius: var(--napp-radius-pill);
}
.woocommerce-order-received .woocommerce-thankyou-order-received {
	background: var(--napp-card);
	border-radius: var(--napp-radius-card);
	padding: 1.4rem 1.75rem;
	font-size: var(--napp-text-xl);
	font-family: var(--napp-font-display);
	font-weight: 700;
	text-align: center;
}


/* ---------- WhatsApp float + footer identity (trust playbook #2 + #3) ---------- */
.napp-whatsapp {
	position: fixed;
	inset-inline-start: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	inline-size: 54px;
	block-size: 54px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px rgb(13 49 97 / 0.24);
	z-index: 65;
}
.napp-whatsapp:hover { color: #fff; transform: translateY(-2px); }
.napp-footer__identity { text-align: center; font-size: var(--napp-text-sm); color: var(--napp-link); margin: 0; padding-block-start: 1rem; font-weight: 600; }


/* ---------- picker page intro (mini hero) ---------- */
.napp-picker__intro { position: relative; text-align: center; padding-block: clamp(1rem, 3vw, 2.5rem) 0; }
.napp-picker__intro h1 { margin: 0 0 0.35em; } /* size comes from the shared page-title rule */
.napp-picker__intro p { font-size: var(--napp-text-lg); max-inline-size: 52ch; margin-inline: auto; margin-block: 0; }
.napp-picker__intro .napp-art {
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	inline-size: clamp(90px, 12vw, 150px);
	opacity: 0.8;
	pointer-events: none;
}


/* ---------- drawer v2: shipbar, item rows, steppers ---------- */
.napp-mc-shipbar { margin-block-end: 1rem; }
.napp-mc-shipbar p { margin: 0 0 0.4em; font-weight: 600; font-size: var(--napp-text-sm); }
.napp-mc-shipbar__track { block-size: 6px; border-radius: 999px; background: var(--napp-card); overflow: clip; }
.napp-mc-shipbar__track span { display: block; block-size: 100%; background: var(--napp-link); border-radius: 999px; }
.napp-mc-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 0.8rem;
	align-items: center;
	background: var(--napp-surface);
	border-radius: 14px;
	padding: 0.7rem;
}
.napp-mc-item__thumb img { inline-size: 64px; block-size: auto; border-radius: 10px; display: block; }
.napp-mc-item__body { display: grid; gap: 0.25rem; }
.napp-mc-item__name { font-weight: 700; font-size: var(--napp-text-sm); }
.napp-mc-item__price { font-weight: 600; color: var(--napp-link); font-size: var(--napp-text-sm); }
.napp-mc-qty {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	border: 1.5px solid var(--napp-stroke);
	border-radius: 999px;
	inline-size: fit-content;
}
.napp-mc-qty button {
	background: none;
	border: 0;
	color: var(--napp-ink);
	cursor: pointer;
	inline-size: 34px;
	block-size: 34px;
	font-size: 1.1rem;
	line-height: 1;
	border-radius: 50%;
}
.napp-mc-qty button:hover { background: var(--napp-card); }
.napp-mc-qty__val { min-inline-size: 1.6em; text-align: center; font-weight: 700; }
.napp-mc-item__remove {
	align-self: start;
	background: none;
	border: 0;
	color: var(--napp-stroke);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
}
.napp-mc-item__remove:hover { color: var(--napp-ink); background: var(--napp-card); }
.napp-mc-total { display: flex; justify-content: space-between; }
.napp-mc-buttons .checkout { inline-size: 100%; text-align: center; }
.napp-mc-buttons__cartlink { display: block; text-align: center; font-weight: 600; padding-block: 0.4rem; min-block-size: var(--napp-touch-min); }


/* ---------- product page uniques: steps, compare table, guarantee ---------- */
.napp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
	counter-reset: napp-step;
}
.napp-step {
	position: relative;
	background: var(--napp-surface);
	border-radius: var(--napp-radius-card);
	padding: 2.4rem 1.5rem 1.75rem;
	box-shadow: 0 8px 24px rgb(13 49 97 / 0.06);
	text-align: center;
}
.napp-step__num {
	position: absolute;
	top: -1.1rem;
	inset-inline-start: 50%;
	transform: translateX(50%);
	inline-size: 2.4rem;
	block-size: 2.4rem;
	border-radius: 50%;
	background: var(--napp-ink);
	color: var(--napp-cream);
	font-family: var(--napp-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
[dir="ltr"] .napp-step__num { transform: translateX(-50%); }
.napp-step h3 { margin: 0 0 0.35em; font-size: var(--napp-text-xl); }
.napp-step p { margin: 0; }
@media (max-width: 1024px) {
	.napp-steps { grid-template-columns: 1fr; gap: 2rem; }
}

.napp-compare-wrap { max-inline-size: 820px; margin-inline: auto; }
.napp-compare {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--napp-surface);
	border-radius: var(--napp-radius-card);
	overflow: clip;
	box-shadow: 0 8px 24px rgb(13 49 97 / 0.06);
}
.napp-compare th, .napp-compare td { padding: 0.85rem 1.2rem; text-align: start; }
.napp-compare thead th {
	background: var(--napp-ink);
	color: var(--napp-cream);
	font-family: var(--napp-font-display);
	font-size: var(--napp-text-lg);
	text-align: center;
}
.napp-compare thead th:first-child { background: var(--napp-ink); }
.napp-compare tbody th { font-weight: 700; background: var(--napp-card); inline-size: 34%; }
.napp-compare tbody td { text-align: center; font-weight: 500; }
.napp-compare tbody tr:nth-child(even) td { background: var(--napp-cream); }

.napp-guarantee {
	background: var(--napp-card);
	border-radius: var(--napp-radius-spot);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: center;
}
.napp-guarantee__medal {
	inline-size: 96px;
	block-size: 96px;
	border-radius: 50%;
	background: var(--napp-surface);
	border: 3px solid var(--napp-ink);
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1;
	gap: 0.15rem;
}
.napp-guarantee__medal strong { font-family: var(--napp-font-display); font-size: 2rem; color: var(--napp-ink); }
.napp-guarantee__medal span { font-size: var(--napp-text-sm); font-weight: 700; color: var(--napp-link); }
.napp-guarantee__body h2 { margin: 0 0 0.3em; font-size: var(--napp-text-2xl); }
.napp-guarantee__body p { margin: 0; max-inline-size: 60ch; }
@media (max-width: 1024px) {
	.napp-guarantee { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}


/* ---------- stacked deck carousel (JS-built on <=1024px): active card on top,
   neighbors peeking behind on both sides — reference-style ---------- */
.napp-deck {
	position: relative;
	display: block !important;
	overflow: clip;
	/* bleed to the container edge so side cards have room to peek */
	margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.napp-deck.is-dragging { cursor: grabbing; }
.napp-deck.is-dragging > * { transition: none; }
.napp-deck > * {
	position: absolute !important;
	top: 0;
	left: 50%;
	margin: 0 !important;
	inline-size: min(64vw, 340px) !important;
	max-inline-size: none !important;
	min-block-size: 0 !important;
	transition: transform 0.35s ease, opacity 0.35s ease;
	will-change: transform;
}
.napp-deck > .is-behind { box-shadow: none; filter: saturate(0.9); }
.napp-deck > .is-front { box-shadow: 0 18px 40px rgb(13 49 97 / 0.16); }
.napp-deck__controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; padding-block-start: 1rem; }
.napp-deck__controls .napp-slider__arrow { position: static; transform: none; }
.napp-deck__controls .napp-slider__dots { position: static; display: flex; gap: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .napp-deck > * { transition: none; } }


/* ---------- Woo buttons that dodge the base rule (cart checkout CTA was purple) ---------- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-proceed-to-checkout a.checkout-button,
.woocommerce #respond input#submit {
	background: var(--napp-ink) !important;
	color: var(--napp-cream) !important;
	border-radius: var(--napp-radius-pill);
	font-weight: 600;
}
.woocommerce a.button.alt:hover,
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--napp-link) !important; }
.woocommerce span.onsale {
	background: var(--napp-ink);
	color: var(--napp-cream);
	border-radius: var(--napp-radius-pill);
	padding: 0.2em 1em;
	min-block-size: 0;
	min-inline-size: 0;
	line-height: 1.6;
	font-weight: 700;
}

/* ---------- Fluent Forms on tokens ---------- */
.fluentform .ff-btn-submit {
	background: var(--napp-ink) !important;
	color: var(--napp-cream) !important;
	border: 0;
	border-radius: var(--napp-radius-pill) !important;
	padding: 0.7em 2.6em !important;
	font-family: var(--napp-font-body);
	font-weight: 600;
	font-size: var(--napp-text-lg) !important;
	min-block-size: var(--napp-touch-min);
}
.fluentform .ff-el-form-control {
	border: 1.5px solid var(--napp-stroke) !important;
	border-radius: 12px !important;
	background: var(--napp-surface) !important;
	padding: 0.7em 1em !important;
}
.fluentform .ff-el-form-control:focus { outline: 2px solid var(--napp-link); border-color: var(--napp-link) !important; }


/* ---------- spotlight: name-pill switch on top (replaces arrows) ---------- */
.napp-spotlight__switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	background: var(--napp-surface);
	border-radius: var(--napp-radius-pill);
	padding: 0.4rem;
	max-inline-size: 520px;
	margin-inline: auto;
	margin-block-end: clamp(1.25rem, 3vw, 2rem);
	box-shadow: 0 8px 24px rgb(13 49 97 / 0.08);
}
.napp-spotlight__switch button {
	border: 0;
	background: transparent;
	border-radius: var(--napp-radius-pill);
	padding: 0.55em 1em;
	cursor: pointer;
	display: grid;
	gap: 0.05em;
	justify-items: center;
	color: var(--napp-ink);
	font-family: var(--napp-font-body);
	min-block-size: var(--napp-touch-min);
}
.napp-spotlight__switch button strong { font-family: var(--napp-font-display); font-size: var(--napp-text-base); }
.napp-spotlight__switch button span { font-size: var(--napp-text-sm); font-weight: 600; color: var(--napp-link); }
.napp-spotlight__switch button.is-active { background: var(--napp-ink); color: var(--napp-cream); }
.napp-spotlight__switch button.is-active span { color: var(--napp-glow); }

/* ---------- testimonials marquee (infinite, seamless, pause on hover) ---------- */
.napp-marquee {
	overflow: clip;
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline-start: calc(50% - 50vw);
	padding-block: 0.5rem 1rem;
}
.napp-marquee__track {
	display: flex;
	inline-size: max-content;
	animation: napp-marquee 42s linear infinite;
}
.napp-marquee:hover .napp-marquee__track { animation-play-state: paused; }
.napp-marquee__group { display: flex; gap: clamp(1rem, 2vw, 1.5rem); padding-inline-end: clamp(1rem, 2vw, 1.5rem); }
.napp-marquee .napp-testimonial {
	inline-size: clamp(260px, 30vw, 330px);
	flex: none;
	min-block-size: 0;
}
.napp-testimonial__name { font-weight: 700; font-size: var(--napp-text-sm); color: var(--napp-link); }
/* phones: one card per beat instead of three cramped columns */
@media (max-width: 600px) {
	.napp-marquee .napp-testimonial { inline-size: clamp(250px, 76vw, 320px); }
}
/* RTL: content flows right-to-left, so the loop travels +x */
@keyframes napp-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
	.napp-marquee__track { animation: none; flex-wrap: wrap; inline-size: auto; }
	.napp-marquee__group[aria-hidden] { display: none; }
	.napp-marquee { margin-inline: 0; inline-size: auto; }
}

/* ============================================================
 * Client Style-control hooks (wp-elementor widget-authoring §0)
 * Each property reads a custom prop the widget's Style tab sets,
 * falling back to the brand token so the default is byte-identical.
 * Custom properties inherit from the widget wrapper to descendants.
 * ============================================================ */
.napp-hero__title { color: var(--napp-c-hero-title, var(--napp-ink)); }
.napp-hero__text { color: var(--napp-c-hero-text, var(--napp-ink)); }
.napp-feature-bar { background: var(--napp-c-feat-bg, var(--napp-surface)); }
.napp-feature-bar__item svg { color: var(--napp-c-feat-icon, var(--napp-ink)); }
.napp-feature-bar__item span { color: var(--napp-c-feat-label, var(--napp-ink)); }
.napp-spotlight { background: var(--napp-c-spot-bg, var(--napp-card)); border-radius: var(--napp-c-spot-radius, var(--napp-radius-spot)); }
.napp-spotlight h2 { color: var(--napp-c-spot-title, var(--napp-ink)); }
.napp-testimonial { background: var(--napp-c-testi-bg, var(--napp-surface)); }
.napp-testimonial p { color: var(--napp-c-testi-text, var(--napp-ink)); }
.napp-trust { background: var(--napp-c-trust-bg, var(--napp-band)); }
.napp-trust__item span { color: var(--napp-c-trust-text, var(--napp-ink)); }
.napp-sound-chip { background: var(--napp-c-sound-bg, var(--napp-surface)); }
.napp-sound-chip span { color: var(--napp-c-sound-label, var(--napp-ink)); }
.napp-faq details { background: var(--napp-c-faq-bg, var(--napp-surface)); }
.napp-faq summary { color: var(--napp-c-faq-q, var(--napp-ink)); }

/* ---------- product specs + in-the-box + category comparison ---------- */
.napp-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1rem, 3vw, 2.25rem);
	background: var(--napp-c-specs-bg, var(--napp-card));
	border-radius: var(--napp-c-specs-radius, var(--napp-radius-spot));
	padding: clamp(1.1rem, 4vw, 2.5rem);
}
.napp-specs__title {
	font-size: var(--napp-text-xl);
	margin: 0 0 0.9rem;
	color: var(--napp-c-specs-title, var(--napp-ink));
}
.napp-specs__box { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.napp-specs__box li { display: flex; align-items: flex-start; gap: 0.55rem; }
.napp-specs__box svg { flex: none; color: var(--napp-link); margin-block-start: 0.15rem; }
.napp-specs__list { margin: 0; }
.napp-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--napp-stroke);
}
.napp-specs__row:last-child { border-block-end: 0; }
.napp-specs__row dt { font-weight: 700; color: var(--napp-link); flex: none; }
.napp-specs__row dd { margin: 0; text-align: end; }
/* 4-column category table: tighter than the 3-column model table */
.napp-compare--category tbody th { inline-size: 22%; }
.napp-compare--category th, .napp-compare--category td { padding: 0.7rem 0.75rem; font-size: var(--napp-text-sm); }
.napp-compare--category tbody td.is-us { font-weight: 700; color: var(--napp-ink); background: var(--napp-surface); }
.napp-compare--category tbody tr:nth-child(even) td.is-us { background: var(--napp-surface); }
/* The 4-column table used to keep a 34rem (544px) min-width on phones and let the
   wrapper scroll sideways. In practice that put 544px inside a 274px wrapper with
   no fade, arrow or scrollbar, so 12+ cells were unreachable and only the Napp
   column was visible — hiding both sides of the comparison. Replaced by the
   stacked-card layout at the end of this file. */

/* honest-advertising disclosure above the sound previews */
.napp-sounds-disclosure {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	max-inline-size: 46rem;
	margin: 0 auto 1.25rem;
	padding: 0.7rem 0.95rem;
	background: var(--napp-surface);
	border: 1px solid var(--napp-stroke);
	border-radius: var(--napp-radius-card);
	font-size: var(--napp-text-sm);
	color: var(--napp-link);
	line-height: 1.5;
}
.napp-sounds-disclosure svg { flex: none; margin-block-start: 0.15rem; }

/* Gallery renders now ship WITH their own studio background and contact shadow.
   Cutting them out (rembg) sliced the shadow and chopped the night-light glow
   mid-spill, which is what made the product look pasted-on. So: no white radial
   behind them, and round the image itself to sit inside the panel. */
.napp-picker__media:has(.napp-gallery)::before { content: none; }
.napp-picker__media .napp-gallery__img {
	border-radius: var(--napp-radius-card);
	max-inline-size: 560px;
}

/* House rule: LTR fields for email/tel/url/price/SKU inside an RTL page.
   Fluent Forms renders these without a dir attribute, so an address types
   right-to-left and reads scrambled. */
/* Only flip to LTR once there is a value. While the field is empty the Hebrew
   placeholder must still read right-to-left, otherwise "כתובת אימייל" sits
   left-aligned next to right-aligned name and message fields. */
input[type="email"]:not(:placeholder-shown),
input[type="tel"]:not(:placeholder-shown),
input[type="url"]:not(:placeholder-shown),
input[type="number"]:not(:placeholder-shown) {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}

/* ==========================================================================
   ONE TYPE SCALE
   Before this block the site had four independent H1 rules (home hero 88px,
   picker 51.2px, article 46.4px, Hello Elementor fallback 36px) plus two pages
   with no H1 at all, so the headline size changed on almost every page.
   Now: the home hero owns --napp-text-hero, every other page title shares
   --napp-text-title, and every section heading shares --napp-text-2xl.
   ========================================================================== */

/* Every page title on the site except the home hero. */
.napp-page-title,
.napp-picker__intro h1,
.napp-article__head h1,
.page-header .entry-title,
.woocommerce-products-header__title {
	font-size: var(--napp-text-title);
	font-family: var(--napp-font-display);
	font-weight: 700;
	line-height: 1.2;
	color: var(--napp-ink);
}

/* Hello Elementor renders classic pages as an unstyled .page-header block.
   Give it the same centred rhythm the builder pages already use. */
.page-header {
	max-inline-size: var(--napp-container, 1200px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	padding-block: clamp(1.75rem, 5vw, 3.25rem) clamp(0.75rem, 2vw, 1.25rem);
	text-align: center;
}
.page-header .entry-title { margin: 0; }

/* Section headings: one size across the five class systems that had grown
   independently (20 / 24 / 30 / 32 / 41.6px). */
.napp-testimonials__heading:not(.napp-page-title),
.napp-specs__title,
.napp-bundle-band__title,
.napp-article__body h2,
.page-content h2 {
	font-size: var(--napp-text-2xl);
}
/* Product-card titles in the shop grid stay smaller on purpose: they are card
   labels in a grid, not section headings, and 32px would dwarf the cards. */
.napp-page-title + p,
.page-header + .page-content > p:first-child {
	font-size: var(--napp-text-lg);
	max-inline-size: 60ch;
	margin-inline: auto;
}

/* ==========================================================================
   PRODUCT MEDIA PANEL — image IS the panel
   The renders carry their own pale-blue field (#c3dcf1). Sitting that inside a
   lighter --napp-card (#e7eff6) box produced a visible rectangle-in-a-rectangle.
   The image now fills its half of the card edge to edge, on a matching field,
   so it reads as a designed panel rather than a pasted photo.
   ========================================================================== */
.napp-picker__layout { --napp-picker-pad: clamp(1.1rem, 4vw, 3rem); position: relative; overflow: hidden; }
.napp-picker__media-stack {
	background: var(--napp-media-field);
	border-radius: var(--napp-radius-card);
	padding: clamp(0.5rem, 1.5vw, 1rem);
}
.napp-picker__media .napp-gallery__img {
	inline-size: 100%;
	max-inline-size: none;
	border-radius: calc(var(--napp-radius-card) - 4px);
}
.napp-gallery__thumbs { margin-block-start: 0.75rem; }
.napp-gallery__thumb { background: var(--napp-media-field); border-color: rgb(255 255 255 / 0.55); }
.napp-gallery__thumb.is-active { border-color: var(--napp-ink); }

/* Desktop: bleed the media panel to the card's edges so it is unmistakably a
   panel and not a floating picture. */
@media (min-width: 1025px) {
	.napp-picker__media-stack {
		margin-block: calc(var(--napp-picker-pad) * -1);
		margin-inline-end: calc(var(--napp-picker-pad) * -1);
		padding: var(--napp-picker-pad);
		border-radius: 0;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* ==========================================================================
   MOBILE TYPE FLOOR
   Buttons without an explicit font-size fall back to the UA default of
   13.33px, which put the header toggle and the picker option cards below the
   14px readability floor.
   ========================================================================== */
button, input, select, textarea { font-family: inherit; }
.napp-header__toggle, .napp-picker__option, .napp-gallery__thumb, .napp-qty__btn,
.napp-spotlight__switch button, .napp-sound-chip__play {
	font-size: max(0.875rem, 1em);
}
.napp-picker__option strong { font-size: var(--napp-text-base); }

/* ==========================================================================
   FLOATING PRODUCT IMAGES (transparent)
   The spotlight and bundle band sit ON a coloured panel, so a baked-in field
   showed up as a lighter rectangle. These images are cut out; grounding comes
   from a CSS drop-shadow so it adapts to whatever it sits on.
   ========================================================================== */
.napp-spotlight__media img,
.napp-slider__slide img {
	filter: drop-shadow(0 16px 30px rgb(13 49 97 / 0.18));
}
/* the decorative white puck behind the spotlight product is no longer needed
   now the product carries its own shadow */
.napp-spotlight__media::before { content: none; }

/* ==========================================================================
   PDP MEDIA BOX — CONSTANT SIZE
   The frame must not resize when switching model or gallery image, otherwise
   the whole buy box jumps. Fixed square frame, image contained inside it.
   ========================================================================== */
.napp-gallery__main {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	background: var(--napp-media-field);
	border-radius: var(--napp-radius-card);
	overflow: hidden;
}
.napp-picker__media .napp-gallery__img {
	grid-area: 1 / 1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	border-radius: 0;
}
.napp-picker__media-stack { background: none; padding: 0; }
@media (min-width: 1025px) {
	.napp-picker__media-stack { margin: 0; padding: 0; border-radius: 0; }
}

/* ── consent banner ─────────────────────────────────────────────────────────
   Marketing/analytics cookies must not fire before opt-in, and declining has to
   be as easy as accepting — so both actions are real buttons of equal weight,
   one tap each, never a styled "accept" beside a buried text link. */
.napp-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 9999;
	background: var(--napp-surface);
	border-block-start: 1px solid var(--napp-stroke);
	box-shadow: 0 -8px 30px rgb(13 49 97 / 12%);
	padding: 1rem clamp(1rem, 4vw, 2rem);
	padding-block-end: max(1rem, env(safe-area-inset-bottom));
}
.napp-consent[hidden] { display: none; }
.napp-consent__inner {
	max-inline-size: var(--napp-container);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}
.napp-consent__title {
	font-family: var(--napp-font-display);
	font-size: var(--napp-text-base);
	margin: 0 0 0.25rem;
	color: var(--napp-ink);
}
.napp-consent__text {
	margin: 0;
	font-size: var(--napp-text-sm);
	color: var(--napp-ink);
	max-inline-size: 62ch;
}
.napp-consent__actions { display: flex; gap: 0.6rem; flex: none; }
.napp-consent__btn { min-block-size: var(--napp-touch-min); }

@media (max-width: 600px) {
	.napp-consent__inner { flex-direction: column; align-items: stretch; }
	.napp-consent__actions { inline-size: 100%; }
	.napp-consent__btn { flex: 1; }
}

/* ── comparison tables: stack to cards on phones ────────────────────────────
   A 4-column comparison cannot fit 390px. Measured before this rule: the
   category table was 544px inside a 274px wrapper, so 12 cells sat off-screen
   with no fade, arrow, snap or scrollbar to reveal them — a phone user saw only
   the Napp column, which hides both sides of the comparison the section exists
   to make. Below 700px each row becomes a card and every value stays reachable
   with no horizontal scrolling at all. */
@media (max-width: 700px) {
	.napp-compare-wrap { overflow-x: visible; }

	.napp-compare,
	.napp-compare thead,
	.napp-compare tbody,
	.napp-compare tr,
	.napp-compare th,
	.napp-compare td { display: block; inline-size: auto; min-inline-size: 0; }

	/* The header row only labels columns; each cell now carries its own label. */
	.napp-compare thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

	.napp-compare tbody tr {
		background: var(--napp-surface);
		border: 1px solid var(--napp-stroke);
		border-radius: var(--napp-radius-card);
		margin-block-end: 0.85rem;
		overflow: hidden;
	}

	.napp-compare tbody th {
		inline-size: auto;
		background: var(--napp-ink);
		color: var(--napp-surface);
		font-size: var(--napp-text-base);
		padding: 0.7rem 1rem;
	}

	.napp-compare tbody td,
	.napp-compare tbody tr:nth-child(even) td {
		display: flex;
		gap: 1rem;
		align-items: baseline;
		justify-content: space-between;
		text-align: start;
		background: transparent;
		padding: 0.6rem 1rem;
		border-block-start: 1px solid var(--napp-stroke);
	}

	/* data-label is set in PHP from the column header */
	.napp-compare tbody td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--napp-link);
		flex: none;
	}

	/* keep "our" column visually dominant, as it is on desktop */
	.napp-compare tbody td.is-us { background: var(--napp-card); font-weight: 700; }
}

/* ── mobile header: cart becomes an icon ────────────────────────────────────
   At 390px the "עגלת קניות" pill wrapped onto two lines and consumed ~35% of the
   header width for a secondary action, squeezing the logo and hamburger. The
   icon carries the meaning; the accessible name is preserved for screen readers. */
@media (max-width: 600px) {
	.napp-header__cart > span {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.napp-header__cart {
		inline-size: var(--napp-touch-min);
		block-size: var(--napp-touch-min);
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
}

/* ── tap targets ────────────────────────────────────────────────────────────
   WCAG 2.5.8 AA only requires 24px and the site already passed that, but the
   comfortable thumb target is 44px. Applied to the controls that were short:
   footer/nav links and blog card links, without stretching inline body links. */
@media (max-width: 700px) {
	.napp-footer__social a,
	.napp-header__toggle,
	.napp-gallery__thumb,
	.napp-qty__btn {
		min-inline-size: var(--napp-touch-min);
		min-block-size: var(--napp-touch-min);
	}
	.napp-footer a,
	.napp-nav a {
		display: inline-block;
		padding-block: 0.45rem;
	}
}

/* ── PDP vertical rhythm ────────────────────────────────────────────────────
   The guarantee band sat in a napp-section that stacked its own block margin on
   top of the section gap, leaving roughly double the spacing used between every
   other section pair on the page. */
.napp-guarantee { margin-block: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PDP — the buying section
   Built to .nexo/design/mockups/02-product.png. Replaces the old spotlight /
   model-switcher layout entirely; none of its classes are reused.
   All logical properties — this is an RTL-first store.
   ═══════════════════════════════════════════════════════════════════════════ */

.napp-pdp__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(1.5rem, 5vw, 3.5rem);
}
@media ( min-width: 62rem ) {
	.napp-pdp__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: start;
	}
	/*
	 * The mockup places the gallery on the LEFT and the buy box on the RIGHT.
	 * This document is RTL, so grid column 1 is the RIGHT-hand track — the buy
	 * box takes it and the gallery takes column 2. Assigned explicitly rather
	 * than left to source order, which put the gallery on the wrong side.
	 * The gallery stays first in the DOM so it is announced before the price.
	 */
	.napp-pdp__buy { grid-column: 1; grid-row: 1; }
	.napp-pdp__gallery { grid-column: 2; grid-row: 1; }
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.napp-pdp__stage {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--napp-radius-card);
	background: var(--napp-card);
	overflow: hidden;
}
.napp-pdp__shot {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.napp-pdp__shot.is-active { opacity: 1; }

.napp-pdp__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.4rem, 1.5vw, 0.7rem);
	margin-block-start: clamp(0.5rem, 2vw, 0.9rem);
}
.napp-pdp__thumb {
	inline-size: clamp(3.75rem, 9vw, 5.5rem);
	aspect-ratio: 1;
	padding: 0;
	border: 2px solid transparent;
	border-radius: calc(var(--napp-radius-card) - 0.4rem);
	background: var(--napp-card);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s ease;
}
.napp-pdp__thumb.is-active { border-color: var(--napp-ink); }
.napp-pdp__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* ── Buy box ─────────────────────────────────────────────────────────────── */
.napp-pdp__buy { display: grid; gap: clamp(0.6rem, 2vw, 1rem); }

.napp-pdp__title {
	font-family: var(--napp-font-display);
	/*
	 * --napp-text-title is the design system's declared owner of every H1 except
	 * the home hero. This previously clamped against --napp-text-4xl, which does
	 * not exist — an undefined var inside clamp() invalidates the whole
	 * declaration, so the product name inherited 18px body text.
	 */
	font-size: var(--napp-text-title);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	max-inline-size: 16ch;
	margin: 0;
}
.napp-pdp__rating { display: flex; align-items: center; gap: 0.5rem; }
.napp-pdp__rating-count { color: var(--napp-muted); text-decoration: none; }
.napp-pdp__excerpt { color: var(--napp-muted); margin: 0; }
.napp-pdp__excerpt p:last-child { margin-block-end: 0; }

.napp-pdp__price {
	font-family: var(--napp-font-display);
	/* Literal clamp, not a token: the price is the one element that should read
	   larger than the body scale allows. Same undefined-var bug as the title. */
	font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
	font-weight: 700;
	line-height: 1;
	color: var(--napp-ink);
}
/* Compare-at price: Woo emits <del> then <ins> when genuinely on sale. */
.napp-pdp__price del {
	font-size: 0.55em;
	font-weight: 400;
	color: var(--napp-muted);
	margin-inline-end: 0.5rem;
}
.napp-pdp__price ins { text-decoration: none; }

.napp-pdp__stock { margin: 0; color: #1c7c4a; font-weight: 600; }
.napp-pdp__stock.is-out { color: var(--napp-muted); }

/* Woo's own add-to-cart form, restyled rather than replaced. */
.napp-pdp__cart form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: stretch;
	margin: 0;
}
.napp-pdp__cart .quantity {
	display: flex;
	align-items: center;
	border: 2px solid var(--napp-stroke);
	border-radius: 999px;
	padding-inline: 0.4rem;
	background: var(--napp-surface);
}
.napp-pdp__cart .quantity input {
	inline-size: 3.25rem;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--napp-font-display);
	font-size: var(--napp-text-lg);
	/* Numerals stay LTR inside an RTL document. */
	direction: ltr;
	unicode-bidi: isolate;
}
.napp-pdp__cart button.single_add_to_cart_button {
	flex: 1 1 14rem;
	min-block-size: var(--napp-touch-min);
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	border: 0;
	border-radius: 999px;
	background: var(--napp-ink);
	color: var(--napp-cream);
	font-family: var(--napp-font-display);
	font-size: var(--napp-text-lg);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.napp-pdp__cart button.single_add_to_cart_button:hover {
	box-shadow: 0 10px 26px rgb(13 49 97 / 0.22);
}
.napp-pdp__cart button.single_add_to_cart_button:active { transform: translateY(1px); }

.napp-pdp__trust {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.25rem 0 0;
	padding: 0;
}
.napp-pdp__trust li {
	border: 1px solid var(--napp-stroke);
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
	font-size: var(--napp-text-sm);
	color: var(--napp-ink);
	background: var(--napp-surface);
}
.napp-pdp__ship { margin: 0; color: var(--napp-muted); font-size: var(--napp-text-sm); }

/* ── Feature row ─────────────────────────────────────────────────────────── */
.napp-pdp__features {
	list-style: none;
	margin: 0;
	padding: clamp(1rem, 3vw, 1.6rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
	gap: clamp(0.75rem, 2.5vw, 1.5rem);
	background: var(--napp-surface);
	border: 1px solid var(--napp-stroke);
	border-radius: var(--napp-radius-card);
}
.napp-pdp__feature {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	text-align: center;
	font-size: var(--napp-text-sm);
	color: var(--napp-ink);
}

/* ── Lifestyle banner ────────────────────────────────────────────────────── */
.napp-pdp__banner {
	margin-block: clamp(1.75rem, 6vw, 4rem);
	background: var(--napp-card);
}
.napp-pdp__banner-inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(1rem, 4vw, 2.5rem);
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
@media ( min-width: 48rem ) {
	.napp-pdp__banner-inner { grid-template-columns: 1fr 1fr; }
}
.napp-pdp__banner-copy h2 {
	font-family: var(--napp-font-display);
	font-size: clamp(var(--napp-text-xl), 4.5vw, var(--napp-text-3xl));
	margin: 0;
	line-height: 1.2;
}
.napp-pdp__banner-img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--napp-radius-card);
	display: block;
}

/* ── Detail accordions ───────────────────────────────────────────────────── */
.napp-pdp__details { display: grid; gap: 0.5rem; margin-block-end: clamp(2rem, 6vw, 4rem); }
.napp-pdp__panel {
	border: 1px solid var(--napp-stroke);
	border-radius: var(--napp-radius-card);
	background: var(--napp-surface);
	overflow: hidden;
}
.napp-pdp__panel-title {
	cursor: pointer;
	padding: clamp(0.8rem, 2.5vw, 1.1rem) clamp(1rem, 3vw, 1.4rem);
	font-family: var(--napp-font-display);
	font-size: var(--napp-text-lg);
	min-block-size: var(--napp-touch-min);
	/*
	 * display:flex would override the UA's display:list-item and delete the
	 * ::marker box entirely, leaving both panels as bare text in a box with no
	 * expand/collapse affordance at all. Own chevron instead, so the marker is
	 * suppressed deliberately rather than as a side effect of layout.
	 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	list-style: none;
}
.napp-pdp__panel-title::-webkit-details-marker { display: none; }
.napp-pdp__panel-title::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	background: currentColor;
	opacity: 0.5;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: rotate 0.18s ease;
}
.napp-pdp__panel[open] .napp-pdp__panel-title::after { rotate: 180deg; }
/* overflow:hidden on the panel clips an outside outline at the rounded corners */
.napp-pdp__panel-title:focus-visible {
	outline: 2px solid var(--napp-ink);
	outline-offset: -4px;
	border-radius: inherit;
}
.napp-pdp__panel-body {
	padding: 0 clamp(1rem, 3vw, 1.4rem) clamp(0.9rem, 2.5vw, 1.2rem);
	color: var(--napp-muted);
}
.napp-pdp__panel-body p:last-child { margin-block-end: 0; }

/* ── PDP model chooser ───────────────────────────────────────────────────────
   Two devices plus a both-together bundle. Links, not tabs: each option is a
   separate product with its own URL, price and gallery. */
.napp-pdp__models { margin-block-start: 1.25rem; }
.napp-pdp__models-label {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--napp-muted);
	font-size: var(--napp-text-sm);
}
.napp-pdp__model-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
	gap: 0.5rem;
}
.napp-pdp__model {
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	text-align: center;
	text-decoration: none;
	color: var(--napp-ink);
	padding: 0.7rem 0.5rem;
	border: 2px solid var(--napp-hairline);
	border-radius: var(--napp-radius-card);
	background: var(--napp-surface);
	min-block-size: var(--napp-touch-min);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.napp-pdp__model:hover { border-color: var(--napp-stroke); }
.napp-pdp__model.is-current {
	border-color: var(--napp-ink);
	box-shadow: var(--napp-shadow-card);
}
.napp-pdp__model img {
	inline-size: clamp(2.75rem, 12cqi, 3.75rem);
	block-size: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 0.5rem;
	background: var(--napp-card);
}
.napp-pdp__model-name { font-weight: 600; font-size: var(--napp-text-sm); line-height: 1.2; }
.napp-pdp__model-price { font-family: var(--napp-font-display); font-weight: 700; }
.napp-pdp__model-price del { display: none; }  /* bundle: keep the card to one number */


/* Bundle card: <ins> keeps its UA underline inside a link, reading as a second
   link target. The <del> is hidden so the card shows one number. */
.napp-pdp__model-price ins { text-decoration: none; }
.napp-pdp__model-price del { display: none; }

/* Inactive gallery shots were opacity:0 but still visible to assistive tech, so
   four images were announced when one is on screen. */
.napp-pdp__shot { visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.napp-pdp__shot.is-active { visibility: visible; transition-delay: 0s; }

@media ( prefers-reduced-motion: reduce ) {
	.napp-pdp__shot,
	.napp-pdp__thumb,
	.napp-pdp__model,
	.napp-pdp__panel-title::after,
	.napp-pdp__cart button.single_add_to_cart_button { transition: none; }
	.napp-pdp__cart button.single_add_to_cart_button:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PICKER PAGE (/product/) — structural cleanup
   Scoped entirely to .napp-picker__* / .napp-gallery__*, which only the
   napp-product-picker widget renders, so the WooCommerce PDP (.napp-pdp__*)
   and every other page are untouched.

   Measured before, at 1440 and 390:
     1. desktop — .napp-picker__media-stack was align-self:stretch + flex with
        justify-content:center, so the square image floated 201px below the top
        of the card and left an empty band beside the model cards.
     2. mobile — four 64px thumbs + three 8px gaps need 280px, but the column
        was 258.8px, so the fourth thumb wrapped to a second row.
     3. mobile — four nested horizontal paddings (main 16 + page-content 16 +
        container 16 + layout 17.6) ate 131px of a 390px viewport, leaving the
        content 66% of the screen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── desktop: top-align the media panel with the model cards ------------- */
@media ( min-width: 1025px ) {
	.napp-picker__layout { align-items: start; }
	.napp-picker__media-stack {
		align-self: start;
		display: block;          /* replaces the flex column that centred it */
	}
}

/* 2 ── thumbnails: one row, always ---------------------------------------- */
.napp-gallery__thumbs {
	flex-wrap: nowrap;
	justify-content: flex-start;
	/* if a model ever ships more shots than fit, scroll rather than overflow */
	overflow-x: auto;
	scrollbar-width: none;
}
.napp-gallery__thumbs::-webkit-scrollbar { display: none; }
.napp-gallery__thumb {
	flex: 1 1 0;
	inline-size: auto;
	block-size: auto;
	aspect-ratio: 1;
	/* keeps the 44px WCAG 2.5.8 target the ≤700px rule established */
	min-inline-size: var(--napp-touch-min);
	max-inline-size: 5.5rem;
}

/* 3 ── mobile: give the card the width back ------------------------------- */
@media ( max-width: 700px ) {
	/* claw back one level of nested padding. -1rem never exceeds the
	   container's own inline padding in this range, so it cannot overflow. */
	.napp-picker { margin-inline: -1rem; }
	.napp-picker__layout { padding: 0.85rem; }
}