/* =========================================================================
   PeptiNova theme — compiled from the Next.js/Tailwind storefront 1:1.

   Design tokens are injected as CSS custom properties from functions.php
   (Customizer → PeptiNova Branding). Fallbacks below mirror globals.css.

   Breakpoints (Tailwind defaults used by the source app):
     sm 640px · md 768px · lg 1024px
   ========================================================================= */

:root {
	--color-navy: #120d3b;
	--color-primary: #2571a6;
	--color-primary-dark: #1c5c87;
	--color-accent: #248ece;
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-border: #e4e4e7;
	--color-text: #0a0a0a;
	--color-text-muted: #6b6b70;
	--font-display: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--pn-gradient: linear-gradient(to bottom right, var(--color-accent), var(--color-navy));
	/* Tailwind v4 status colors (oklch → sRGB) used by the source app */
	--pn-green: #00a63e;
	--pn-green-dark: #008236;
	--pn-green-bg: #f0fdf4;
	--pn-amber: #e17100;
	--pn-amber-bg: #fffbeb;
	--pn-amber-dark: #bb4d00;
	--pn-red: #e7000b;
	--pn-red-dark: #c10007;
	--pn-red-bg: #fef2f2;
	--pn-red-500: #fb2c36;
	--pn-blue-bg: #eff6ff;
	--pn-blue-dark: #1447e6;

	--pn-radius-sm: 0.5rem;
	--pn-radius: 0.75rem;
	--pn-radius-lg: 1rem;
	--pn-radius-xl: 1.5rem;
}

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

html {
	-webkit-text-size-adjust: 100%;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.pn {
	margin: 0;
	min-height: 100vh;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.5;
}

body.pn img {
	max-width: 100%;
	height: auto;
}

/* Element resets wrapped in :where() so they carry ZERO specificity and
   can never beat component classes (a bare `body.pn button` reset was
   stripping the pill buttons' background/border). */
:where(body.pn) :where(a) {
	color: inherit;
	text-decoration: none;
}

:where(body.pn) :where(button) {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
}

:where(body.pn) :where(button):disabled {
	cursor: not-allowed;
}

:where(body.pn) :where(h1, h2, h3, h4, p, ul, dl, dd) {
	margin: 0;
	padding: 0;
}

:where(body.pn) :where(ul) {
	list-style: none;
}

body.pn [hidden] {
	display: none !important;
}

.pn-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.pn-main {
	flex: 1 0 auto;
}

/* ---- Shared layout ---------------------------------------------------- */
.pn-container {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.pn-section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.pn-prose-wrap {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.pn-coa-wrap {
	max-width: 64rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.pn-container,
	.pn-prose-wrap,
	.pn-coa-wrap {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.pn-section {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media (min-width: 1024px) {
	.pn-container,
	.pn-prose-wrap,
	.pn-coa-wrap {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.pn-muted {
	color: var(--color-text-muted);
	font-size: 0.875rem;
}

.pn-page-heading {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-navy);
}

@media (min-width: 640px) {
	.pn-page-heading {
		font-size: 1.875rem;
	}
}

/* ---- Buttons ----------------------------------------------------------- */
.pn-btn {
	display: inline-block;
	border-radius: 9999px;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pn-btn--primary {
	background: var(--color-primary);
	color: #fff;
}

.pn-btn--primary:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

.pn-btn--upper {
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

/* ---- Research notice --------------------------------------------------- */
.pn-notice {
	border-bottom: 1px solid var(--color-border);
	background: var(--pn-gradient);
}

.pn-notice__text {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0.625rem 1rem;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.025em;
	color: rgba(255, 255, 255, 0.8);
}

/* ---- Header ------------------------------------------------------------ */
.pn-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.pn-header__inner {
	position: relative;
	max-width: 80rem;
	margin: 0 auto;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
}

@media (min-width: 640px) {
	.pn-header__inner {
		padding: 0 1.5rem;
	}
}

@media (min-width: 1024px) {
	.pn-header__inner {
		padding: 0 2rem;
	}
}

.pn-header__logo {
	flex-shrink: 0;
	display: inline-flex;
}

.pn-header__logo img {
	height: 2.25rem !important;
	width: auto;
}

@media (min-width: 640px) {
	.pn-header__logo img {
		height: 2.5rem !important;
	}
}

@media (min-width: 1024px) {
	.pn-header__logo img {
		height: 3rem !important;
	}
}

.pn-header__nav {
	display: none;
}

@media (min-width: 768px) {
	.pn-header__nav {
		display: block;
	}
}

.pn-header__menu {
	display: flex;
	align-items: center;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.pn-header__menu {
		gap: 2.5rem;
	}
}

.pn-header__menu a {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.025em;
	color: var(--color-navy);
	transition: color 0.15s ease;
}

@media (min-width: 1024px) {
	.pn-header__menu a {
		font-size: 1rem;
	}
}

.pn-header__menu a:hover {
	color: var(--color-primary);
}

.pn-header__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.pn-header__icon {
	color: var(--color-navy);
	transition: color 0.15s ease;
	display: inline-flex;
}

.pn-header__icon:hover {
	color: var(--color-primary);
}

.pn-header__icon--cart {
	position: relative;
}

.pn-cart-badge {
	position: absolute;
	top: -0.45rem;
	right: -0.55rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.2rem;
	border-radius: 9999px;
	background: var(--color-accent);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1rem;
	text-align: center;
}

.pn-header__burger {
	display: flex;
	height: 2.25rem;
	width: 2.25rem;
	align-items: center;
	justify-content: center;
	color: var(--color-navy);
}

@media (min-width: 768px) {
	.pn-header__burger {
		display: none;
	}
}

.pn-header__burger .pn-header__burger-close {
	display: none;
}

.pn-header__burger[aria-expanded='true'] .pn-header__burger-open {
	display: none;
}

.pn-header__burger[aria-expanded='true'] .pn-header__burger-close {
	display: inline-flex;
}

.pn-mobile-nav {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 1rem;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

@media (min-width: 768px) {
	.pn-mobile-nav {
		display: none !important;
	}
}

.pn-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pn-mobile-nav__list a {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-navy);
}

/* ---- Hero (container-query scaled, 1:1 with hero-combo.tsx) ------------ */
.pn-hero {
	width: 100%;
	background: #08213a;
}

.pn-hero__block {
	position: relative;
	margin: 0 auto;
	width: 100%;
	container-type: inline-size;
}

.pn-hero__block--mobile {
	max-width: 1250px;
	aspect-ratio: 1250 / 1248;
}

.pn-hero__block--desktop {
	display: none;
	max-width: 1872px;
	aspect-ratio: 1872 / 1180;
}

@media (min-width: 1024px) {
	.pn-hero__block--mobile {
		display: none;
	}

	.pn-hero__block--desktop {
		display: block;
	}
}

/* Wider than the 1872px hero image: carry its own backdrop blue out to the screen edges
   (left/right halves sampled from the image's edge columns) so there are no dark side bars. */
@media (min-width: 1024px) {
	.pn-hero {
		background:
			linear-gradient(to bottom, #034b83 0%, #024880 50%, #034c84 75%, #014982 80%, #00457d 82%, #004078 84%, #003065 86%, #012c62 87%, #002e63 92%, #013165 100%) left top / 50.1% 100% no-repeat,
			linear-gradient(to bottom, #014782 0%, #024c85 25%, #004681 50%, #00417a 75%, #01386d 85%, #003b70 100%) right top / 50.1% 100% no-repeat,
			#08213a;
	}
}

.pn-hero__img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.pn-hero__content {
	position: absolute;
}

.pn-hero__block--mobile .pn-hero__content {
	left: 9%;
	top: 20%;
	width: 46%;
}

.pn-hero__block--desktop .pn-hero__content {
	left: 23%;
	top: 19%;
	width: 31%;
}

.pn-hero__eyebrow {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-accent);
	letter-spacing: 0.15em;
}

.pn-hero__block--mobile .pn-hero__eyebrow {
	font-size: 2.1cqw;
}

.pn-hero__block--desktop .pn-hero__eyebrow {
	font-size: 1.15cqw;
}

.pn-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #fff;
}

.pn-hero__block--mobile .pn-hero__title {
	font-size: 4.3cqw;
	margin-top: 1.9cqw;
}

.pn-hero__block--desktop .pn-hero__title {
	font-size: 3.05cqw;
	margin-top: 1cqw;
}

.pn-hero__title-accent {
	color: var(--color-accent);
}

.pn-hero__ctas {
	display: flex;
	align-items: flex-start;
}

.pn-hero__block--mobile .pn-hero__ctas {
	flex-direction: row;
	gap: 2cqw;
	margin-top: 2.3cqw;
}

.pn-hero__block--desktop .pn-hero__ctas {
	flex-direction: column;
	gap: 0.75cqw;
	margin-top: 1.25cqw;
}

.pn-hero__btn {
	white-space: nowrap;
	border-radius: 9999px;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.025em;
	color: #fff;
	display: inline-block;
}

.pn-hero__btn--solid {
	background: var(--color-primary);
}

.pn-hero__btn--outline {
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.pn-hero__block--mobile .pn-hero__btn {
	font-size: 3cqw;
	padding: 1cqw 2cqw;
}

.pn-hero__block--desktop .pn-hero__btn {
	font-size: 1cqw;
	padding: 0.75cqw 1.75cqw;
}

.pn-hero__btn-label-lg {
	display: none;
}

@container (min-width: 0px) {
	/* no-op: keeps container context */
}

@media (min-width: 640px) {
	.pn-hero__block--mobile .pn-hero__ctas {
		flex-direction: column;
		gap: 1.4cqw;
	}

	.pn-hero__block--mobile .pn-hero__btn {
		font-size: 1.9cqw;
		padding: 1.4cqw 3.3cqw;
	}

	.pn-hero__btn-label-sm {
		display: none;
	}

	.pn-hero__btn-label-lg {
		display: inline;
	}
}

/* ---- Trust bar ---------------------------------------------------------- */
.pn-trust-bar {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}

.pn-trust-bar__inner {
	max-width: 80rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	padding: 3rem 1rem;
}

@media (min-width: 640px) {
	.pn-trust-bar__inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.pn-trust-bar__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.pn-trust-bar__icon {
	color: var(--color-primary);
}

.pn-trust-bar__title {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-trust-bar__desc {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

/* ---- Earn section (homepage) -------------------------------------------- */
.pn-earn {
	background: var(--pn-gradient);
}

.pn-earn__inner {
	max-width: 56rem;
	margin: 0 auto;
	padding: 4rem 1rem;
	text-align: center;
}

@media (min-width: 640px) {
	.pn-earn__inner {
		padding: 5rem 1.5rem;
	}
}

.pn-earn__title {
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 700;
	color: #fff;
}

@media (min-width: 640px) {
	.pn-earn__title {
		font-size: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.pn-earn__title {
		font-size: 3rem;
	}
}

.pn-earn__grid {
	margin-top: 3rem;
	display: grid;
	gap: 3rem;
}

@media (min-width: 640px) {
	.pn-earn__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}

.pn-earn__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pn-earn__icon {
	color: var(--color-accent);
}

.pn-earn__item-title {
	margin-top: 1rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
}

@media (min-width: 640px) {
	.pn-earn__item-title {
		font-size: 1.5rem;
	}
}

.pn-earn__item-desc {
	margin-top: 0.5rem;
	max-width: 20rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 640px) {
	.pn-earn__item-desc {
		font-size: 1rem;
	}
}

.pn-earn__cta {
	margin-top: 1.5rem;
	border-radius: 9999px;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pn-earn__cta--solid {
	background: #fff;
	color: var(--color-navy);
}

.pn-earn__cta--solid:hover {
	background: rgba(255, 255, 255, 0.9);
}

.pn-earn__cta--outline {
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
}

.pn-earn__cta--outline:hover {
	border-color: rgba(255, 255, 255, 0.7);
}

/* ---- Best sellers --------------------------------------------------------- */
.pn-best-sellers {
	max-width: 80rem;
	margin: 0 auto;
	padding: 4rem 1rem;
}

@media (min-width: 640px) {
	.pn-best-sellers {
		padding: 5rem 1.5rem;
	}
}

@media (min-width: 1024px) {
	.pn-best-sellers {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.pn-best-sellers__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.pn-best-sellers__eyebrow {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--color-primary);
	text-transform: uppercase;
}

.pn-best-sellers__title {
	margin-top: 0.5rem;
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-best-sellers__all {
	display: none;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
}

.pn-best-sellers__all:hover {
	color: var(--color-primary-dark);
}

@media (min-width: 640px) {
	.pn-best-sellers__all {
		display: block;
	}
}

/* ---- Product grid ----------------------------------------------------------- */
.pn-product-grid {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 640px) {
	.pn-product-grid {
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.pn-product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.pn-product-grid--related {
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	.pn-product-grid--related {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}
}

.pn-product-grid--cart {
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	.pn-product-grid--cart {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pn-product-grid--cart {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---- Product card ------------------------------------------------------------ */
.pn-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}

.pn-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-bg);
}

.pn-card__img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: contain;
	padding: 0.25rem;
	transform: scale(1.25);
	transition: transform 0.3s ease;
}

@media (min-width: 640px) {
	.pn-card__img {
		padding: 0.75rem;
	}
}

.pn-card__media:hover .pn-card__img {
	transform: scale(1.3);
}

.pn-card__soldout {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	border-radius: 9999px;
	background: var(--color-text-muted);
	padding: 0.25rem 0.625rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.025em;
	color: #fff;
	text-transform: uppercase;
	z-index: 1;
}

.pn-card__body {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1rem;
}

.pn-card__name {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-card__pricing {
	margin-top: 0.25rem;
}

.pn-card__price-row {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	flex-wrap: wrap;
}

.pn-card__from {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.pn-card__price {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-card__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.pn-card__per {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.pn-card__strike {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.pn-card__pack-note {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.pn-card__controls {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.75rem;
}

.pn-card__size-fixed {
	width: 100%;
	border-radius: 9999px;
	border: 1px solid var(--color-border);
	padding: 0.5rem 0.75rem;
	text-align: center;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-navy);
}

.pn-select {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	white-space: nowrap;
	border-radius: 9999px;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 0.5rem 0.75rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-navy);
}

.pn-select:disabled {
	opacity: 0.5;
}

.pn-select--placeholder {
	color: var(--color-text-muted);
}

.pn-select__chevron {
	flex-shrink: 0;
	color: var(--color-text-muted);
	transition: transform 0.15s ease;
}

.pn-select.is-open .pn-select__chevron {
	transform: rotate(180deg);
}

.pn-select-menu {
	z-index: 50;
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 0.25rem 0;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.pn-select-menu__option {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	text-align: center;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-navy);
	transition: background-color 0.15s ease;
}

.pn-select-menu__option:hover {
	background: #f4f4f5;
}

.pn-select-menu__option.is-selected {
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
	color: var(--color-primary);
}

.pn-select-menu__option.is-disabled {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.pn-card__add {
	width: 100%;
	border-radius: 9999px;
	background: var(--color-primary);
	padding: 0.5rem 1rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	transition: background-color 0.15s ease;
}

.pn-card__add:hover {
	background: var(--color-primary-dark);
}

.pn-card__add:disabled {
	background: var(--color-border);
	color: var(--color-text-muted);
}

/* ---- Page banner ---------------------------------------------------------------- */
.pn-banner {
	background: var(--pn-gradient);
}

.pn-banner__inner {
	max-width: 64rem;
	margin: 0 auto;
	padding: 3rem 1rem;
}

@media (min-width: 640px) {
	.pn-banner__inner {
		padding: 4rem 1.5rem;
	}
}

@media (min-width: 1024px) {
	.pn-banner__inner {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.pn-banner__title {
	font-family: var(--font-display);
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	color: #fff;
}

@media (min-width: 640px) {
	.pn-banner__title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

.pn-banner__subtitle {
	margin-top: 0.75rem;
	max-width: 42rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 640px) {
	.pn-banner__subtitle {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

/* ---- Prose (About / policy pages) -------------------------------------------------- */
.pn-prose {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--color-text-muted);
}

@media (min-width: 640px) {
	.pn-prose {
		font-size: 1rem;
	}
}

.pn-prose h2 {
	margin-top: 2rem;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-navy);
}

@media (min-width: 640px) {
	.pn-prose h2 {
		font-size: 1.25rem;
	}
}

.pn-prose h3 {
	margin-top: 1.5rem;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-prose h2:first-child,
.pn-prose h3:first-child,
.pn-prose p:first-child {
	margin-top: 0;
}

.pn-prose p {
	margin-top: 0.75rem;
}

.pn-prose ul,
.pn-prose ol {
	margin-top: 0.75rem;
	padding-left: 1.25rem;
	list-style: disc;
}

.pn-prose ol {
	list-style: decimal;
}

.pn-prose li {
	margin-top: 0.5rem;
}

.pn-prose a {
	color: var(--color-primary);
	font-weight: 600;
}

.pn-prose a:hover {
	color: var(--color-primary-dark);
}

.pn-prose strong,
.pn-prose b {
	color: var(--color-navy);
	font-weight: 600;
}

.pn-prose hr {
	margin-top: 2.5rem;
	border: 0;
	border-top: 1px solid var(--color-border);
}

/* ---- Shop page ---------------------------------------------------------------------- */
.pn-shop__heading {
	margin-top: 3rem;
}

.pn-shop__title {
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--color-navy);
}

@media (min-width: 640px) {
	.pn-shop__title {
		font-size: 2.25rem;
	}
}

.pn-shop__grid-wrap {
	margin-top: 2rem;
}

.pn-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.pn-shop__count {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-shop__sort label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	color: var(--color-navy);
}

.pn-shop__sort select {
	border-radius: 9999px;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 0.375rem 0.75rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-navy);
}

.pn-shop .pn-product-grid {
	margin-top: 1.5rem;
}

/* ---- Contact page ----------------------------------------------------------------------- */
.pn-contact__intro {
	margin-bottom: 2rem;
}

.pn-contact__cards {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.pn-contact__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pn-contact__card {
	border-radius: 1rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 1.5rem;
	text-align: center;
}

.pn-contact__icon {
	display: block;
	margin: 0 auto;
	color: var(--color-primary);
}

.pn-contact__card-title {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-contact__card-value {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-contact__card-link:hover {
	color: var(--color-primary);
}

.pn-contact__form-wrap {
	margin-top: 2rem;
}

.pn-contact__form {
	border-radius: 1rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.pn-contact__form {
		padding: 2rem;
	}
}

.pn-form-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.pn-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pn-form-field {
	margin-top: 1.25rem;
}

.pn-form-grid .pn-form-field {
	margin-top: 0;
}

.pn-form-label {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-navy);
	display: block;
}

.pn-form-input {
	margin-top: 0.375rem;
	width: 100%;
	border-radius: 0.5rem;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: var(--color-text);
}

.pn-form-input:focus {
	border-color: var(--color-primary);
	outline: none;
}

.pn-contact__form .pn-btn {
	margin-top: 1.5rem;
	width: 100%;
}

@media (min-width: 640px) {
	.pn-contact__form .pn-btn {
		width: auto;
	}
}

.pn-contact__thanks {
	border-radius: 1rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 2rem;
	text-align: center;
}

.pn-contact__thanks-title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-contact__thanks-text {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-form-error {
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--pn-red);
}

/* ---- Badges ---------------------------------------------------------------------------------- */
.pn-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.25rem 0.625rem;
	white-space: nowrap;
}

.pn-badge--verified {
	border: 1px solid var(--color-border);
	color: var(--color-navy);
}

.pn-badge--verified .pn-badge__icon {
	color: var(--color-accent);
}

.pn-badge--accent {
	background: var(--color-accent);
	color: #fff;
}

/* ---- COA accordions ----------------------------------------------------------------------------- */
.pn-coa__intro {
	margin-bottom: 2rem;
}

.pn-coa-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pn-coa {
	border-radius: 0.75rem;
	border: 1px solid var(--color-border);
}

.pn-coa__toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem;
	text-align: left;
}

@media (min-width: 640px) {
	.pn-coa__toggle {
		padding: 1rem 1.25rem;
	}
}

.pn-coa__name {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-navy);
}

@media (min-width: 640px) {
	.pn-coa__name {
		font-size: 1.125rem;
	}
}

.pn-coa__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--color-text-muted);
}

.pn-coa__count {
	font-size: 0.75rem;
	font-weight: 500;
}

.pn-coa__chevron {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.pn-coa__toggle[aria-expanded='true'] .pn-coa__chevron {
	transform: rotate(180deg);
}

.pn-coa__panel {
	border-top: 1px solid var(--color-border);
	padding: 0 1rem 1.25rem;
}

@media (min-width: 640px) {
	.pn-coa__panel {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

.pn-coa__table-wrap {
	display: none;
	margin-top: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	border-radius: 0.75rem;
	border: 1px solid var(--color-border);
}

@media (min-width: 640px) {
	.pn-coa__table-wrap {
		display: block;
	}
}

.pn-coa__table {
	width: 100%;
	text-align: left;
	border-collapse: collapse;
}

.pn-coa__table thead tr {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

.pn-coa__table th {
	padding: 0.75rem 1rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

.pn-coa__table td {
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
}

.pn-coa__table tbody tr {
	border-bottom: 1px solid var(--color-border);
}

.pn-coa__table tbody tr:last-child {
	border-bottom: 0;
}

.pn-coa__ref {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pn-coa__code {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-coa__muted {
	color: var(--color-text-muted);
}

.pn-coa__action {
	text-align: right;
}

.pn-coa__view {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	border: 1px solid var(--color-primary);
	padding: 0.375rem 0.875rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-primary);
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.pn-coa__view:hover {
	background: var(--color-primary);
	color: #fff;
}

.pn-coa__cards {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.pn-coa__cards {
		display: none;
	}
}

.pn-coa__card {
	border-radius: 0.75rem;
	border: 1px solid var(--color-border);
	padding: 1rem;
}

.pn-coa__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.pn-coa__card-badge {
	margin-top: 0.5rem;
}

.pn-coa__dl {
	margin-top: 0.75rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
	gap: 0.5rem;
	font-size: 0.875rem;
}

.pn-coa__dl dt,
.pn-coa-card__dl dt {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.pn-coa__dl dd,
.pn-coa-card__dl dd {
	color: var(--color-navy);
}

.pn-coa__card-action {
	margin-top: 1rem;
}

/* ---- Product detail ------------------------------------------------------------------------------- */
.pn-product__top {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.pn-product__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pn-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
}

.pn-product__img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: contain;
	padding: 1.5rem;
	transform: scale(1.25);
}

.pn-product__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-navy);
}

@media (min-width: 640px) {
	.pn-product__title {
		font-size: 1.875rem;
	}
}

.pn-product__option {
	margin-top: 1.5rem;
}

.pn-product__option-label {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-product__sizes {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pn-size-pill {
	border-radius: 9999px;
	border: 1px solid var(--color-border);
	padding: 0.5rem 1rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-navy);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pn-size-pill:hover {
	border-color: var(--color-text-muted);
}

.pn-size-pill.is-selected {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

.pn-product__packs {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 640px) {
	.pn-product__packs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.pn-pack-tile {
	position: relative;
	border-radius: 0.75rem;
	border: 1px solid var(--color-border);
	padding: 0.625rem;
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pn-pack-tile:hover:not(:disabled) {
	border-color: var(--color-text-muted);
}

.pn-pack-tile.is-selected {
	border-color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.pn-pack-tile.is-oos {
	opacity: 0.7;
}

.pn-pack-tile__line {
	pointer-events: none;
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		var(--color-text-muted) calc(50% - 1px),
		var(--color-text-muted) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

.pn-pack-tile__label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-pack-tile__price {
	margin-top: 0.25rem;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-pack-tile__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.pn-pack-tile__per {
	font-size: 11px;
	font-weight: 500;
	color: var(--color-text-muted);
}

.pn-product__pricebox {
	margin-top: 1.5rem;
	border-top: 1px solid var(--color-border);
	padding-top: 1.5rem;
}

.pn-product__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.pn-product__price {
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-product__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.pn-product__regular {
	font-size: 1.25rem;
	color: var(--color-text-muted);
	text-decoration: line-through;
	text-decoration-color: var(--pn-red-500);
	text-decoration-thickness: 2px;
}

.pn-product__regular .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.pn-product__save {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pn-green);
}

.pn-product__instock {
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pn-green);
}

.pn-product__lowstock {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pn-amber);
}

.pn-product__add {
	margin-top: 1rem;
	width: 100%;
	border-radius: 9999px;
	background: var(--color-primary);
	padding: 0.875rem 1.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
	.pn-product__add {
		width: auto;
	}
}

.pn-product__add:hover {
	background: var(--color-primary-dark);
}

.pn-product__add:disabled {
	background: var(--color-border);
	color: var(--color-text-muted);
}

.pn-product__trust {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	row-gap: 0.5rem;
}

.pn-product__trust-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

/* Phones: the four badges sit in a centered 2x2 block instead of wrapping 3 + 1. */
@media (max-width: 639px) {
	.pn-product__trust {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: center;
		column-gap: 1.5rem;
		row-gap: 0.625rem;
	}
}

.pn-product__trust-icon {
	color: var(--color-primary);
}

.pn-product__trust-item span {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.pn-product__coa {
	margin-top: 4rem;
	border-radius: 1rem;
	background: var(--pn-gradient);
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.pn-product__coa {
		padding: 2rem;
	}
}

.pn-product__coa-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: #fff;
}

.pn-product__coa-sub {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

.pn-product__coa-grid {
	margin-top: 1.5rem;
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.pn-product__coa-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pn-product__coa-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pn-coa-card {
	border-radius: 0.75rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 1rem;
}

.pn-coa-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.pn-coa-card__code {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-coa-card__current {
	margin-top: 0.5rem;
	font-size: 11px;
}

.pn-coa-card__dl {
	margin-top: 0.75rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
	gap: 0.5rem;
	font-size: 0.875rem;
}

.pn-coa-card .pn-coa__view {
	margin-top: 1rem;
}

.pn-product__desc,
.pn-product__related {
	margin-top: 4rem;
	border-top: 1px solid var(--color-border);
	padding-top: 2.5rem;
}

.pn-product__section-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-product__overview {
	margin-top: 1.5rem;
	border-radius: 1rem;
	background: var(--color-bg);
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.pn-product__overview {
		padding: 2rem;
	}
}

.pn-product__overview-label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

.pn-product__overview-body {
	margin-top: 0.75rem;
}

.pn-product__overview-body p {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--color-text);
}

.pn-product__overview-body p:first-child {
	margin-top: 0;
}

/* ---- Footer ----------------------------------------------------------------------------------------- */
.pn-footer {
	margin-top: auto;
	background: var(--pn-gradient);
}

.pn-footer__inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 3.5rem 1rem;
}

@media (min-width: 640px) {
	.pn-footer__inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.pn-footer__inner {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.pn-footer__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.pn-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.pn-footer__logo {
	height: 2.25rem;
	width: auto;
}

.pn-footer__tagline {
	margin-top: 1rem;
	max-width: 20rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

.pn-footer__email {
	margin-top: 1rem;
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
}

.pn-footer__email:hover {
	color: rgba(255, 255, 255, 0.8);
}

.pn-footer__heading {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
}

.pn-footer__links {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.pn-footer__links a {
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.15s ease;
}

.pn-footer__links a:hover {
	color: #fff;
}

.pn-footer__legal {
	margin-top: 3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pn-footer__legal p {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.7);
}

.pn-footer__copyright {
	padding-top: 0.5rem;
}

/* ---- Refer & Earn widget ------------------------------------------------------------------------------ */
.pn-refer {
	position: fixed;
	bottom: 5rem;
	left: 1rem;
	z-index: 40;
}

@media (min-width: 1024px) {
	.pn-refer {
		bottom: 1.5rem;
	}
}

.pn-refer__panel {
	margin-bottom: 0.75rem;
	width: 22rem;
	max-width: calc(100vw - 2rem);
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.pn-refer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-navy);
	padding: 1rem 1.25rem;
}

.pn-refer__heading {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
}

.pn-refer__close {
	color: rgba(255, 255, 255, 0.7);
	display: inline-flex;
}

.pn-refer__close:hover {
	color: #fff;
}

.pn-refer__body {
	max-height: 70vh;
	overflow-y: auto;
	padding: 1.25rem;
}

.pn-refer__pitch-title {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-refer__pitch {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.pn-refer__pitch-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	padding: 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-navy);
}

.pn-refer__pitch-icon {
	display: flex;
	height: 2rem;
	width: 2rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
}

.pn-pitch--primary {
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
	color: var(--color-primary);
}

.pn-pitch--green {
	background: var(--pn-green-bg);
	color: var(--pn-green);
}

.pn-pitch--accent {
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
	color: var(--color-accent);
}

.pn-pitch--navy {
	background: color-mix(in srgb, var(--color-navy) 10%, transparent);
	color: var(--color-navy);
}

.pn-refer__cta {
	margin-top: 1.25rem;
	display: block;
	width: 100%;
	border-radius: 9999px;
	padding: 0.75rem 0;
	text-align: center;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	transition: background-color 0.15s ease;
}

.pn-refer__cta--primary {
	background: var(--color-primary);
}

.pn-refer__cta--primary:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

.pn-refer__cta--navy {
	background: var(--color-navy);
	padding: 0.625rem 0;
}

.pn-refer__cta--navy:hover {
	background: color-mix(in srgb, var(--color-navy) 90%, transparent);
	color: #fff;
}

.pn-refer__label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

.pn-refer__coupon {
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border-radius: 0.75rem;
	border: 1px dashed color-mix(in srgb, var(--color-primary) 40%, transparent);
	background: color-mix(in srgb, var(--color-primary) 5%, transparent);
	padding: 0.75rem 1rem;
}

.pn-refer__code {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-refer__copy {
	flex-shrink: 0;
	border-radius: 0.5rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 0.5rem;
	color: var(--color-navy);
	display: inline-flex;
}

.pn-refer__copy:hover {
	background: #f4f4f5;
}

.pn-refer__hint {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.pn-refer__hint strong {
	color: var(--color-navy);
}

.pn-refer__stats {
	margin-top: 1.25rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.pn-refer__stat {
	border-radius: 0.5rem;
	border: 1px solid var(--color-border);
	padding: 0.625rem;
	text-align: center;
}

.pn-refer__stat-value {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-refer__stat-value .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.pn-refer__stat-value--green {
	color: var(--pn-green);
}

.pn-refer__stat-label {
	font-size: 11px;
	color: var(--color-text-muted);
}

.pn-refer__loading {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-refer__toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	background: var(--color-primary);
	padding: 0.75rem 1.25rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	transition: background-color 0.15s ease;
}

.pn-refer__toggle:hover {
	background: var(--color-primary-dark);
}

/* ---- Cart extras (upsell, trust line, empty state, mobile bar) ------------------ */
.pn-cart-upsell {
	margin: 1rem 0;
	border-radius: 0.75rem;
	background: var(--pn-gradient);
	padding: 0.75rem;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1),
		0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

@media (min-width: 640px) {
	.pn-cart-upsell {
		padding: 1rem;
	}
}

.pn-cart-upsell__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pn-cart-upsell__badge {
	border-radius: 9999px;
	background: #fff;
	padding: 0.125rem 0.625rem;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-navy);
	text-transform: uppercase;
}

.pn-cart-upsell__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	color: #fff;
}

@media (min-width: 640px) {
	.pn-cart-upsell__title {
		font-size: 1.125rem;
	}
}

.pn-cart-upsell__row {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.75rem;
}

.pn-cart-upsell__product {
	display: flex;
	min-width: 0;
	flex-basis: 100%;
	align-items: center;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.pn-cart-upsell__product {
		flex: 1 1 0%;
		flex-basis: 0;
	}
}

.pn-cart-upsell__thumb {
	position: relative;
	height: 3.5rem;
	width: 3.5rem;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 0.5rem;
	background: #fff;
}

.pn-cart-upsell__thumb img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: contain;
	padding: 0.25rem;
	transform: scale(1.25);
}

.pn-cart-upsell__name {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
}

@media (min-width: 640px) {
	.pn-cart-upsell__name {
		font-size: 1rem;
	}
}

.pn-cart-upsell__price {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 800;
	color: #fff;
}

.pn-cart-upsell__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.pn-cart-upsell__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pn-qty {
	display: flex;
	align-items: center;
	border-radius: 9999px;
	border: 1px solid var(--color-border);
}

.pn-qty--light {
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: #fff;
}

.pn-qty__btn {
	height: 2rem;
	width: 2rem;
	font-size: 1.125rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pn-qty__btn:disabled {
	opacity: 0.4;
}

.pn-qty__value {
	width: 1.25rem;
	text-align: center;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
}

.pn-cart-upsell__add {
	white-space: nowrap;
	border-radius: 9999px;
	background: #fff;
	padding: 0.5rem 1rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-navy);
	transition: background-color 0.15s ease;
}

.pn-cart-upsell__add:hover {
	background: rgba(255, 255, 255, 0.9);
}

.pn-cart-upsell__add:disabled {
	opacity: 0.6;
}

.pn-trust-line {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	text-align: center;
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.pn-trust-line li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.pn-trust-line__sep {
	color: var(--color-border);
}

.pn-empty-cart {
	padding: 3rem 0 0;
	text-align: center;
}

.pn-empty-cart__icon {
	margin: 0 auto;
	display: block;
	color: var(--color-text-muted);
}

.pn-empty-cart__title {
	margin-top: 1rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-empty-cart__text {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-empty-cart .pn-btn {
	margin-top: 1.25rem;
}

.pn-empty-cart__sellers {
	margin-top: 3.5rem;
	text-align: left;
}

.pn-empty-cart__sellers > h2 {
	text-align: center;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-mobile-cart-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 0.75rem;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

@media (min-width: 1024px) {
	.pn-mobile-cart-bar {
		display: none;
	}
}

.pn-mobile-cart-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.pn-mobile-cart-bar__total {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-mobile-cart-bar__total .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

/* ---- Blog fallback / 404 ------------------------------------------------------- */
.pn-post-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pn-post-card {
	border: 1px solid var(--color-border);
	border-radius: 1rem;
	padding: 1.5rem;
	background: var(--color-surface);
}

.pn-post-card__title a {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-post-card__title a:hover {
	color: var(--color-primary);
}

.pn-post-card__excerpt {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-pagination {
	margin-top: 2rem;
	font-size: 0.875rem;
}

.pn-pagination a,
.pn-pagination span {
	color: var(--color-primary);
	margin-right: 0.5rem;
}

/* ---- Lightbox (COA certificates) -------------------------------------- */
.pn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.pn-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 25, 0.8);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.pn-lightbox__figure {
	position: relative;
	margin: 0;
	max-width: min(64rem, 95vw);
	max-height: 90vh;
}

.pn-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.pn-lightbox__close {
	position: absolute;
	top: -0.875rem;
	right: -0.875rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background: #fff;
	color: var(--color-navy);
	font-size: 1rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.pn-lightbox-open {
	overflow: hidden;
}

/* ---- Dark-surface link hardening ---------------------------------------
   Every link sitting on a gradient/dark background renders white, even if
   a plugin stylesheet tries to recolor it. */
.pn-footer a {
	color: rgba(255, 255, 255, 0.85) !important;
}

.pn-footer a:hover {
	color: #ffffff !important;
}

.pn-footer .pn-footer__email {
	color: #ffffff !important;
}

.pn-notice a,
.pn-banner a,
.pn-earn-banner a,
.pn-cart-upsell a,
.pn-product__coa-title,
.pn-product__coa a:not(.pn-coa__view),
.pn-earn a:not(.pn-earn__cta--solid) {
	color: #ffffff !important;
}

.pn-earn__cta--solid {
	color: var(--color-navy) !important;
}

.pn-cart-upsell__add {
	color: var(--color-navy) !important;
}

/* =========================================================================
   BRAND-CRITICAL HARDENING — these must win against any plugin stylesheet
   (Omnisend, Jetpack, search, swatches...), so they carry !important.
   ========================================================================= */

/* Header logo size */
body.pn .pn-header__logo img {
	height: 2.25rem !important;
	width: auto !important;
	max-width: none;
}

@media (min-width: 640px) {
	body.pn .pn-header__logo img {
		height: 2.5rem !important;
	}
}

@media (min-width: 1024px) {
	body.pn .pn-header__logo img {
		height: 3rem !important;
	}
}

/* Primary pill buttons everywhere: blue bg, white text, darker hover */
body.pn .pn-btn--primary,
body.pn .pn-card__add,
body.pn .pn-product__add,
body.pn .pn-refer__toggle,
body.pn .pn-refer__cta--primary {
	background: var(--color-primary) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 9999px !important;
}

body.pn .pn-btn--primary:hover,
body.pn .pn-card__add:hover:not(:disabled),
body.pn .pn-product__add:hover:not(:disabled),
body.pn .pn-refer__toggle:hover,
body.pn .pn-refer__cta--primary:hover {
	background: var(--color-primary-dark) !important;
	color: #ffffff !important;
}

body.pn .pn-card__add:disabled,
body.pn .pn-product__add:disabled {
	background: var(--color-border) !important;
	color: var(--color-text-muted) !important;
}

body.pn .pn-refer__cta--navy {
	background: var(--color-navy) !important;
	color: #ffffff !important;
	border-radius: 9999px !important;
}

/* Card selectors: visible pill border on dosage + Quantity rows */
body.pn .pn-select,
body.pn .pn-card__size-fixed {
	border: 1px solid var(--color-border) !important;
	background: var(--color-surface) !important;
	border-radius: 9999px !important;
}

body.pn .pn-select:hover {
	border-color: var(--color-text-muted) !important;
}

body.pn .pn-select-menu {
	border: 1px solid var(--color-border) !important;
	background: var(--color-surface) !important;
}

/* Hero buttons */
body.pn .pn-hero__btn {
	color: #ffffff !important;
}

body.pn .pn-hero__btn--solid {
	background: var(--color-primary) !important;
}

body.pn .pn-hero__btn--solid:hover {
	background: var(--color-primary-dark) !important;
}

body.pn .pn-hero__btn--outline {
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	background: transparent !important;
}

body.pn .pn-hero__btn--outline:hover {
	border-color: rgba(255, 255, 255, 0.5) !important;
}

/* "Two Ways to Earn" section + shop banner: white text, correct CTAs */
body.pn .pn-earn__title,
body.pn .pn-earn__item-title,
body.pn .pn-earn-banner__title,
body.pn .pn-earn-banner__item-title {
	color: #ffffff !important;
}

body.pn .pn-earn__item-desc,
body.pn .pn-earn-banner__item-desc {
	color: rgba(255, 255, 255, 0.8) !important;
}

body.pn .pn-earn__icon {
	color: var(--color-accent) !important;
}

body.pn .pn-earn-banner__icon {
	color: #ffffff !important;
}

body.pn .pn-earn__cta--solid {
	background: #ffffff !important;
	color: var(--color-navy) !important;
	border: 0 !important;
}

body.pn .pn-earn__cta--solid:hover {
	background: rgba(255, 255, 255, 0.9) !important;
}

body.pn .pn-earn__cta--outline {
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	color: #ffffff !important;
	background: transparent !important;
}

body.pn .pn-earn__cta--outline:hover {
	border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Footer: everything white on the gradient, no exceptions */
body.pn .pn-footer,
body.pn .pn-footer p {
	color: rgba(255, 255, 255, 0.8);
}

body.pn .pn-footer a,
body.pn .pn-footer .pn-footer__links a,
body.pn .pn-footer li a {
	color: rgba(255, 255, 255, 0.85) !important;
}

body.pn .pn-footer a:hover {
	color: #ffffff !important;
}

body.pn .pn-footer__heading {
	color: #ffffff !important;
}

body.pn .pn-footer__email {
	color: #ffffff !important;
}

body.pn .pn-footer__tagline {
	color: rgba(255, 255, 255, 0.8) !important;
}

body.pn .pn-footer__legal p {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Research notice */
body.pn .pn-notice__text {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* Header nav links */
body.pn .pn-header__menu a {
	color: var(--color-navy) !important;
}

body.pn .pn-header__menu a:hover {
	color: var(--color-primary) !important;
}

/* Contact form: visible bordered inputs + styled submit */
body.pn .pn-form-input,
body.pn .pn-contact__form input,
body.pn .pn-contact__form textarea {
	border: 1px solid var(--color-border) !important;
	background: var(--color-bg) !important;
	border-radius: 0.5rem !important;
	color: var(--color-text) !important;
}

body.pn .pn-form-input:focus,
body.pn .pn-contact__form input:focus,
body.pn .pn-contact__form textarea:focus {
	border-color: var(--color-primary) !important;
	outline: none !important;
}

body.pn .pn-contact__form,
body.pn .pn-contact__card,
body.pn .pn-contact__thanks {
	border: 1px solid var(--color-border) !important;
	background: var(--color-surface) !important;
}

/* COA view buttons */
body.pn .pn-coa__view {
	border: 1px solid var(--color-primary) !important;
	color: var(--color-primary) !important;
	background: transparent !important;
	border-radius: 9999px !important;
}

body.pn .pn-coa__view:hover {
	background: var(--color-primary) !important;
	color: #ffffff !important;
}

/* Footer logo size lock */
body.pn .pn-footer__logo {
	height: 2.25rem !important;
	width: auto !important;
	max-width: none;
}

/* Logo size locks — final (header + footer, any image inside the slots) */
body.pn .pn-header__logo img {
	max-height: 3rem !important;
}

body.pn .pn-footer__brand img,
body.pn img.pn-footer__logo {
	height: 2.25rem !important;
	max-height: 2.25rem !important;
	width: auto !important;
	max-width: none !important;
}

/* =========================================================================
   v1.1.0 — client revision (volume-savings.tsx, earn-banner.tsx tight,
   shop/page.tsx promos, shop-product-card.tsx bundle line + option-select
   font fitting, product-detail-view.tsx pack tiles).
   ========================================================================= */

/* ---- Earn banner (shop page card variant, `tight`) --------------------- */
.pn-earn-banner {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	border-radius: 1rem;
	background: var(--pn-gradient);
	padding: 0.75rem;
	text-align: center;
}

.pn-earn-banner__title {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
}

.pn-earn-banner__grid {
	margin: 0.75rem auto 0;
	max-width: 42rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.pn-earn-banner__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pn-earn-banner__icon {
	width: 1rem;
	height: 1rem;
	color: #fff;
}

.pn-earn-banner__item-title {
	margin-top: 0.25rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
}

.pn-earn-banner__item-desc {
	margin-top: 0.125rem;
	max-width: 20rem;
	font-size: 10px;
	line-height: 1.375;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
	.pn-earn-banner {
		padding: 1.25rem;
	}

	.pn-earn-banner__title {
		font-size: 1.125rem;
	}

	.pn-earn-banner__grid {
		margin-top: 1rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.pn-earn-banner__icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	.pn-earn-banner__item-title {
		font-size: 1rem;
	}

	.pn-earn-banner__item-desc {
		font-size: 13px;
	}
}

@media (min-width: 1024px) {
	.pn-earn-banner {
		padding: 1.5rem 2rem;
	}

	.pn-earn-banner__title {
		font-size: 1.25rem;
	}

	.pn-earn-banner__grid {
		margin-top: 1.25rem;
		gap: 1.5rem;
	}

	.pn-earn-banner__icon {
		width: 2rem;
		height: 2rem;
	}

	.pn-earn-banner__item-title {
		margin-top: 0.375rem;
		font-size: 1.125rem;
	}

	.pn-earn-banner__item-desc {
		font-size: 0.875rem;
	}
}

/* ---- Pack Savings (volume-savings.tsx) ---------------------------------- */
.pn-savings {
	display: flex;
	height: 100%;
	align-items: center;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 1rem;
	font-family: var(--font-display);
}

.pn-savings__grid {
	display: grid;
	width: 100%;
	align-items: center;
	gap: 0.75rem;
}

.pn-savings__text {
	text-align: center;
}

.pn-savings__pill {
	display: none;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
	padding: 0.375rem 1rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	text-transform: uppercase;
}

.pn-savings__title {
	font-family: var(--font-display);
	font-size: 13px;
	line-height: 1.375;
	font-weight: 800;
	color: var(--color-navy);
}

.pn-savings__br {
	display: none;
}

.pn-savings__note {
	display: none;
	margin: 1rem auto 0;
	max-width: 28rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.pn-savings__steps {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
}

.pn-savings__step {
	display: flex;
	min-width: 0;
	flex: 1 1 0%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
	text-align: center;
	padding: 0.5rem;
}

.pn-savings__step--s3 {
	min-height: 68px;
	border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
	color: var(--color-navy);
}

.pn-savings__step--s5 {
	min-height: 80px;
	background: var(--color-primary);
	color: #fff;
}

.pn-savings__step--s10 {
	min-height: 92px;
	background: var(--pn-gradient);
	color: #fff;
}

.pn-savings__tag {
	margin-bottom: 0.25rem;
	border-radius: 9999px;
	padding: 0.125rem 0.375rem;
	font-size: 9px;
	line-height: 1;
	font-weight: 700;
	white-space: nowrap;
	background: #fff;
	color: var(--color-navy);
}

.pn-savings__step--s3 .pn-savings__tag {
	background: color-mix(in srgb, var(--color-primary) 15%, transparent);
	color: var(--color-primary);
}

.pn-savings__qty {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	opacity: 0.8;
}

.pn-savings__headline {
	margin-top: 0.125rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	line-height: 1.25;
	font-weight: 800;
}

@media (min-width: 640px) {
	.pn-savings:not(.pn-savings--compact) {
		border-radius: 1.5rem;
		padding: 2.5rem;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__grid {
		gap: 1.5rem;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__pill {
		display: inline-block;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__title {
		margin-top: 1rem;
		font-size: 1.875rem;
		line-height: 1.375;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__note {
		display: block;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__steps {
		gap: 1rem;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__step {
		border-radius: 1rem;
		padding: 1rem;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__step--s3 {
		min-height: 150px;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__step--s5 {
		min-height: 180px;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__step--s10 {
		min-height: 210px;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__tag {
		margin-bottom: 0.5rem;
		padding: 0.25rem 0.75rem;
		font-size: 0.75rem;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__qty {
		font-size: 0.875rem;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__headline {
		margin-top: 0.25rem;
		font-size: 1.125rem;
	}
}

@media (min-width: 1024px) {
	.pn-savings:not(.pn-savings--compact) .pn-savings__grid {
		grid-template-columns: 1fr 1.2fr;
		gap: 3rem;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__text {
		text-align: left;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__title {
		font-size: 2.25rem;
		line-height: 1.375;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__br {
		display: block;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__note {
		margin-left: 0;
		margin-right: 0;
	}

	.pn-savings:not(.pn-savings--compact) .pn-savings__headline {
		font-size: 1.25rem;
	}
}

/* compact + tight (shop page, beside the Earn banner) */
.pn-savings--compact.pn-savings--tight {
	padding: 0.75rem;
}

.pn-savings--compact.pn-savings--tight .pn-savings__title {
	font-size: 0.75rem;
}

.pn-savings--compact.pn-savings--tight .pn-savings__steps {
	flex-direction: column;
	align-items: stretch;
	gap: 0.375rem;
}

.pn-savings--compact.pn-savings--tight .pn-savings__step {
	min-height: 0;
	padding: 0.375rem;
}

.pn-savings--compact.pn-savings--tight .pn-savings__tag {
	font-size: 8px;
}

.pn-savings--compact.pn-savings--tight .pn-savings__qty {
	font-size: 9px;
}

.pn-savings--compact.pn-savings--tight .pn-savings__headline {
	font-size: 10px;
}

@media (min-width: 768px) {
	.pn-savings--compact.pn-savings--tight {
		padding: 1.25rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__title,
	.pn-savings--compact .pn-savings__title {
		font-size: 1rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__steps {
		flex-direction: row;
		align-items: flex-end;
		gap: 0.5rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__step {
		padding: 0.5rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__step--s3,
	.pn-savings--compact .pn-savings__step--s3 {
		min-height: 84px;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__step--s5,
	.pn-savings--compact .pn-savings__step--s5 {
		min-height: 96px;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__step--s10,
	.pn-savings--compact .pn-savings__step--s10 {
		min-height: 108px;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__tag,
	.pn-savings--compact .pn-savings__tag {
		font-size: 10px;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__qty,
	.pn-savings--compact .pn-savings__qty {
		font-size: 0.75rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__headline,
	.pn-savings--compact .pn-savings__headline {
		font-size: 13px;
	}
}

@media (min-width: 1024px) {
	.pn-savings--compact.pn-savings--tight {
		padding: 1.5rem 2rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__title,
	.pn-savings--compact .pn-savings__title {
		font-size: 1.25rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__steps {
		gap: 0.75rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__step--s3,
	.pn-savings--compact .pn-savings__step--s3 {
		min-height: 100px;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__step--s5,
	.pn-savings--compact .pn-savings__step--s5 {
		min-height: 116px;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__step--s10,
	.pn-savings--compact .pn-savings__step--s10 {
		min-height: 132px;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__tag,
	.pn-savings--compact .pn-savings__tag {
		font-size: 0.75rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__qty,
	.pn-savings--compact .pn-savings__qty {
		font-size: 0.875rem;
	}

	.pn-savings--compact.pn-savings--tight .pn-savings__headline,
	.pn-savings--compact .pn-savings__headline {
		font-size: 1rem;
	}
}

/* Placement: homepage (between Earn section and Best Sellers) */
.pn-home-savings {
	max-width: 80rem;
	margin: 0 auto;
	padding: 3rem 1rem 0;
}

@media (min-width: 640px) {
	.pn-home-savings {
		padding: 4rem 1.5rem 0;
	}
}

@media (min-width: 1024px) {
	.pn-home-savings {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* Placement: shop page — always two columns side by side */
.pn-shop__promos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.pn-shop__promos {
		gap: 1rem;
	}
}

/* ---- Product card: bundle line + container-query font fitting ---------- */
.pn-card__bundle {
	margin-top: 0.125rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--color-primary);
}

.pn-card__controls {
	container-type: inline-size;
}

body.pn .pn-card__size-fixed {
	display: flex;
	min-height: 38px;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 0.75rem;
	line-height: 1.25;
	font-size: 0.875rem;
}

body.pn .pn-select {
	min-height: 38px;
	padding: 0.375rem 0.75rem;
	line-height: 1.25;
	white-space: normal;
	font-size: 0.875rem;
}

.pn-select-menu {
	container-type: inline-size;
}

.pn-select-menu__option {
	line-height: 1.25;
}

/* ---- Product detail: pack tiles (bundle tag + headline + savings) ------- */
.pn-pack-tile__tag {
	position: absolute;
	top: -0.625rem;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 9999px;
	padding: 0.125rem 0.625rem;
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
	color: #fff;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.pn-pack-tile__tag--navy {
	background: var(--color-navy);
}

.pn-pack-tile__tag--accent {
	background: var(--color-accent);
}

.pn-pack-tile__headline {
	margin-top: 0.25rem;
	min-height: 2.1rem;
	font-family: var(--font-display);
	font-size: 13px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--color-primary);
}

.pn-pack-tile__saved {
	margin-top: 0.125rem;
	min-height: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--pn-green);
}

.pn-pack-tile__saved .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

/* ---- Header: no active-item color (site-header.tsx has none), badge ----- */
body.pn .pn-header__menu .current-menu-item > a {
	color: var(--color-navy) !important;
}

body.pn .pn-header__menu .current-menu-item > a:hover {
	color: var(--color-primary) !important;
}

.pn-cart-badge {
	top: -0.375rem;
	right: -0.375rem;
	padding: 0 0.25rem;
	font-weight: 600;
}

/* ---- Prose rhythm: policy sections p mt-4 (16px); About (about/page.tsx) h2 text-xl sm:text-2xl + 24px paragraph gap ---- */
.pn-prose p {
	margin-top: 1rem;
}

body.pn-page-about-us .pn-prose p + p {
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	body.pn-page-about-us .pn-prose > h2:first-child {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

/* =========================================================================
   v1.1.1 — computed-style parity with the Next.js build (Tailwind sets an
   explicit line-height with every text-* size; mirror the ones that were
   still inheriting), PDP column width (max-w-6xl), selected-tile hover.
   ========================================================================= */
.pn-product.pn-container {
	max-width: 72rem; /* products/[slug]/page.tsx: max-w-6xl */
}

.pn-product__title {
	line-height: 2rem;
}

@media (min-width: 640px) {
	.pn-product__title {
		line-height: 2.25rem;
	}
}

.pn-product__price {
	line-height: 2.25rem;
}

.pn-product__regular {
	line-height: 1.75rem;
}

.pn-product__save,
.pn-product__instock,
.pn-product__lowstock {
	line-height: 1.25rem;
}

.pn-product__add,
.pn-card__add,
.pn-btn,
.pn-refer__toggle,
.pn-refer__cta {
	line-height: 1.25rem;
}

.pn-pack-tile {
	line-height: 1.5rem;
}

.pn-pack-tile__label {
	line-height: 1rem;
}

.pn-pack-tile__price {
	line-height: 1.5rem;
}

.pn-pack-tile__saved {
	line-height: 1rem;
}

.pn-pack-tile__tag {
	line-height: 0.9375rem;
}

/* A selected tile keeps its primary border under the cursor (React: hover class only on unselected tiles) */
.pn-pack-tile.is-selected:hover:not(:disabled) {
	border-color: var(--color-primary);
}

.pn-savings__pill {
	line-height: 1rem;
}

.pn-savings__qty {
	line-height: 1rem;
}

.pn-card__name {
	line-height: 1.5rem;
}

.pn-card__price {
	line-height: 1.75rem;
}

.pn-card__from,
.pn-card__per,
.pn-card__strike {
	line-height: 1.25rem;
}

.pn-card__bundle,
.pn-card__pack-note {
	line-height: 1rem;
}
/* Pack Savings "5-PACK" line keeps Tailwind's inherited 20px line-height */
.pn-savings__qty {
	line-height: 1.25rem;
}

/* =========================================================================
   v1.1.3 — 404 (Next.js default not-found), admin-bar offset, variation
   badge colors as CSS variables.
   ========================================================================= */
/* v1.1.5: the sticky mobile cart bar clears the iPhone home bar */
.pn-mobile-cart-bar {
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* v1.1.4: the 404 page uses the theme chrome (header, banner, footer) */
.pn-404 {
	text-align: center;
}

.pn-404__card {
	max-width: 36rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 1rem;
	background: var(--color-surface);
}

.pn-404__code {
	margin: 0;
	font-family: var(--font-display);
	font-size: 4.5rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.04em;
	background: var(--pn-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pn-404__msg {
	margin: 1rem 0 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-404__text {
	margin: 0.75rem auto 0;
	max-width: 28rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--color-text-muted);
}

.pn-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.pn-404 .pn-btn {
	margin: 0;
}

.pn-404 .pn-btn--outline {
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-navy);
}

.pn-404 .pn-btn--outline:hover {
	border-color: var(--color-text-muted);
	color: var(--color-navy);
}

/* Logged in: the sticky header sits under the WP admin bar */
body.admin-bar .pn-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .pn-header {
		top: 46px;
	}
}

/* v1.1.8: at 600px and below WordPress's admin bar is position:absolute and
   scrolls away with the page, so the sticky header must stick at 0 (iPhone
   showed a 46px band of page content above it). */
@media (max-width: 600px) {
	body.admin-bar .pn-header {
		top: 0;
	}
}

/* Variation badge colors: chosen in the variation panel, passed as CSS
   variables (inline style); empty = brand accent + white */
.pn-pack-tile__tag,
.pn-pack-tile__tag--accent,
.pn-pack-tile__tag--navy {
	background: var(--pn-badge-bg, var(--color-accent));
	color: var(--pn-badge-fg, #fff);
}

/* =========================================================================
   v1.1.5 - horizontal-scroll safety net. `clip` (not `hidden`) so the sticky
   header keeps working; every real culprit is fixed at its source above.
   ========================================================================= */
html,
body {
	overflow-x: clip;
}

/* v1.1.6: COA accordion titles use the storefront's line heights (text-base / sm:text-lg) */
.pn-coa__name {
	line-height: 1.5rem;
}

@media (min-width: 640px) {
	.pn-coa__name {
		line-height: 1.75rem;
	}
}


/* ---- Mini cart pop-down (drops from the header cart icon) --------------- */
.pn-minicart {
	position: fixed;
	top: 5.75rem;
	right: 1rem;
	z-index: 60;
	width: min(22rem, calc(100vw - 2rem));
	border: 1px solid var(--color-border);
	border-radius: 1rem;
	background: var(--color-surface);
	box-shadow: 0 18px 40px -12px rgba(18, 13, 59, 0.25);
	opacity: 0;
	transform: translateY(-0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.pn-minicart[hidden] {
	display: none;
}

.pn-minicart.is-open {
	opacity: 1;
	/* "none" (not translateY(0)) so the open pop-down is not left on its own animated layer, which on phones can draw hairline seams across the buttons inside it */
	transform: none;
}

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

.pn-minicart__body {
	padding: 1rem;
}

.pn-minicart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.pn-minicart__title {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pn-green-dark);
}

.pn-minicart__close {
	display: inline-flex;
	padding: 0.125rem;
	border: 0;
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
}

.pn-minicart__close:hover {
	color: var(--color-navy);
}

.pn-minicart__list {
	max-height: min(14.75rem, 45vh); /* three item rows, then it scrolls */
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.pn-minicart__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.625rem 0;
	border-top: 1px solid var(--color-border);
}

.pn-minicart__item:first-child {
	border-top: 0;
}

.pn-minicart__thumb {
	flex: none;
	width: 3.25rem;
	height: 3.25rem;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	background: var(--color-bg);
}

.pn-minicart__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pn-minicart__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.pn-minicart__name {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-navy);
}

.pn-minicart__meta,
.pn-minicart__qty {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.pn-minicart__price {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-minicart__was {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1rem;
	color: var(--color-text-muted);
	text-decoration: line-through;
	text-decoration-color: var(--pn-red-500, #fb2c36);
}

.pn-minicart__was .amount {
	font-weight: 400;
}

.pn-minicart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-minicart__subtotal strong {
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--color-navy);
}

.pn-minicart__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin-top: 0.875rem;
}

.pn-minicart__actions .pn-btn {
	padding: 0.625rem 0.75rem;
}

.pn-minicart__view {
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-navy);
}

.pn-minicart__view:hover {
	border-color: var(--color-text-muted);
	color: var(--color-navy);
}

/* ---- Homepage "The More You Buy, The More You Save": full-bleed band ------
   Spans the whole screen like the "Two Ways to Earn" section (same white card
   look and the same content width as before, just without the side gutters,
   rounded corners and side borders). The shop page's compact strip is untouched. */
.pn-home-savings {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Sits flush against the Earn section above it (no gap, no top line), like the hero / trust bar / Earn stack. */
.pn-home-savings .pn-savings {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
}

.pn-home-savings .pn-savings__grid {
	max-width: 71rem;
	margin: 0 auto;
}

/* Phones: the homepage savings heading is as big as the "Two Ways to Earn" heading (1.875rem), on two lines. */
@media (max-width: 639px) {
	.pn-home-savings .pn-savings__title {
		font-size: 1.875rem;
		line-height: 1.25;
	}

	.pn-home-savings .pn-savings__br {
		display: block;
	}

	/* The "Choose a larger pack…" line under the heading, as on desktop. */
	.pn-home-savings .pn-savings__note {
		display: block;
		margin: 0.75rem auto 0;
		font-size: 1rem;
		line-height: 1.5;
	}

	.pn-home-savings .pn-savings {
		padding-top: 1.75rem;
		padding-bottom: 1.75rem;
	}

	.pn-home-savings .pn-savings__grid {
		gap: 1.25rem;
	}

	/* The three pack boxes, a little bigger (same colours and rising heights). */
	.pn-home-savings .pn-savings__steps {
		gap: 0.625rem;
	}

	.pn-home-savings .pn-savings__step {
		padding: 0.625rem 0.5rem;
	}

	.pn-home-savings .pn-savings__step--s3 {
		min-height: 80px;
	}

	.pn-home-savings .pn-savings__step--s5 {
		min-height: 94px;
	}

	.pn-home-savings .pn-savings__step--s10 {
		min-height: 108px;
	}

	.pn-home-savings .pn-savings__tag {
		font-size: 10px;
	}

	.pn-home-savings .pn-savings__qty {
		font-size: 12px;
		line-height: 1.25rem;
	}

	.pn-home-savings .pn-savings__headline {
		font-size: 0.8125rem;
	}
}

/* ---- Shop page, phones: the two top bubbles' headings line up and are bigger ---------
   Both headings start at the same height, with the same size / line height / two lines,
   so "Two Ways to Earn…" and "The More You Buy…" sit level with each other. */
@media (max-width: 639px) {
	.pn-shop__promos .pn-savings {
		align-items: flex-start;
	}

	.pn-shop__promos .pn-earn-banner {
		justify-content: flex-start;
		padding-top: calc(0.75rem + 1px); /* the savings bubble has a 1px border */
	}

	.pn-shop__promos .pn-earn-banner .pn-earn-banner__title,
	.pn-shop__promos .pn-savings--compact .pn-savings__title {
		font-size: 15px;
		line-height: 1.3;
	}
}

/* ---- Shop page, PHONES ONLY (below 640px): the two top bubbles ~10% shorter than the 316px version (285px), contents bigger ----
   Both bubbles grow together. "Two Ways to Earn": the two sections spread evenly down the
   bubble instead of leaving an empty gap at the bottom. "The More You Buy": the three pack
   boxes grow to fill the bubble. Tablet and desktop are untouched. */
@media (max-width: 639px) {
	.pn-shop__promos .pn-earn-banner,
	.pn-shop__promos .pn-savings {
		min-height: 285px;
	}

	.pn-shop__promos .pn-savings {
		align-items: stretch;
	}

	.pn-shop__promos .pn-savings--compact .pn-savings__grid {
		height: 100%;
		grid-template-rows: auto minmax(0, 1fr);
	}

	.pn-shop__promos .pn-savings--compact .pn-savings__steps {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.pn-shop__promos .pn-savings--compact .pn-savings__step {
		flex: 1 1 0%;
		min-height: 0;
		padding: 8px 6px;
	}

	.pn-shop__promos .pn-savings--compact .pn-savings__qty {
		font-size: 10.5px;
	}

	.pn-shop__promos .pn-savings--compact .pn-savings__headline {
		font-size: 11px;
		line-height: 1.25;
	}

	.pn-shop__promos .pn-savings--compact .pn-savings__tag {
		font-size: 9px;
	}

	.pn-shop__promos .pn-earn-banner .pn-earn-banner__grid {
		flex: 1 1 0%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin-top: 0;
		gap: 0;
	}

	.pn-shop__promos .pn-earn-banner .pn-earn-banner__icon {
		width: 20px;
		height: 20px;
	}

	.pn-shop__promos .pn-earn-banner .pn-earn-banner__item-title {
		font-size: 13.5px;
		line-height: 1.3;
	}

	.pn-shop__promos .pn-earn-banner .pn-earn-banner__item-desc {
		font-size: 11px;
		line-height: 1.35;
	}
}

/* ---- Shop page, TABLET / DESKTOP (640px and up): the two top bubbles' headings line up and are bigger ----
   Same idea as on phones: both headings start at the same height with the same size and line
   height. The "Two Ways to Earn" sections are centred in the space under the heading. */
@media (min-width: 640px) {
	.pn-shop__promos .pn-savings {
		align-items: stretch;
		padding-top: 24px;
	}

	.pn-shop__promos .pn-savings--compact .pn-savings__grid {
		align-content: start;
	}

	.pn-shop__promos .pn-earn-banner {
		justify-content: flex-start;
		padding-top: 25px; /* 24px like the savings bubble + its 1px border */
	}

	.pn-shop__promos .pn-earn-banner .pn-earn-banner__title,
	.pn-shop__promos .pn-savings--compact .pn-savings__title {
		font-size: 26px;
		line-height: 1.25;
	}

	.pn-shop__promos .pn-earn-banner .pn-earn-banner__grid {
		flex: 1 1 0%;
		align-content: center;
	}
}

/* ---- Header logo, PHONES ONLY (below 640px): bigger logo, header height unchanged ----
   The header is a fixed 5rem tall, so a taller logo just uses more of it. It is capped so
   it can never run into the account / cart / menu icons on a narrow screen. */
@media (max-width: 639px) {
	body.pn .pn-header__logo img {
		height: 3.25rem !important;
		width: auto;
		max-width: calc(100vw - 8.5rem); /* keeps the logo between the menu icon and the account icon on narrow phones */
		object-fit: contain;
		object-position: left center;
	}
}

/* Header menu (burger) icon: drawn as a block so it sits dead centre in its button, level with the account and cart icons. */
.pn-header__burger svg {
	display: block;
}

/* ---- Header, PHONES / small tablets (below 768px, where the menu button shows): menu button on the LEFT ----
   Menu button first, then the logo, with the account and cart icons pushed to the right edge.
   (The actions wrapper is "display: contents" here so its buttons can be re-ordered inside the header.) */
@media (max-width: 767px) {
	.pn-header__actions {
		display: contents;
	}

	.pn-header__burger {
		order: -1;
		margin-left: -7px; /* the 22px icon, not its 36px button, sits on the page margin */
		margin-right: 0.5rem;
	}

	.pn-header__actions > .pn-header__icon:first-of-type {
		margin-left: auto;
	}

	.pn-header__actions > .pn-header__icon--cart {
		margin-left: 1.25rem;
	}

	/* Logo centred between the menu icon and the account icon (equal space each side). The -15px pulls the
	   logo's box back to the menu icon's edge: the menu button is wider than its icon (7px of button + 8px margin). */
	.pn-header__logo {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		min-width: 0;
		margin-left: -15px;
	}
}

/* ---- Cart pop-down: free-shipping bar + promo code field ------------------- */
.pn-minicart .pn-freeship {
	margin-bottom: 0.25rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--color-border);
}

.pn-minicart .pn-freeship__msg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin: 0 0 0.5rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.pn-minicart .pn-freeship__msg strong {
	font-weight: 600;
	color: var(--color-navy);
}

.pn-minicart .pn-freeship__track {
	height: 0.5rem;
	border-radius: 999px;
	background: var(--color-border);
	overflow: hidden;
}

.pn-minicart .pn-freeship__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(to right, var(--color-accent), var(--color-navy));
}

.pn-minicart .pn-freeship__scale {
	display: flex;
	justify-content: space-between;
	margin: 0.25rem 0 0;
	font-size: 0.6875rem;
	color: var(--color-text-muted);
}

.pn-minicart .pn-freeship__msg strong:last-of-type {
	color: var(--pn-green-dark);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.pn-minicart .pn-freeship--unlocked .pn-freeship__msg {
	color: var(--pn-green-dark);
}

.pn-minicart .pn-freeship--unlocked .pn-freeship__fill {
	background: var(--pn-green);
}

.pn-minicart__promo {
	margin-top: 0.75rem;
}

.pn-minicart__promo-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	border-radius: 0.5rem;
	background: var(--pn-green-bg);
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
}

.pn-minicart__promo-ok {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--pn-green-dark);
}

.pn-minicart__promo-remove {
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-muted);
	cursor: pointer;
}

.pn-minicart__promo-remove:hover {
	color: var(--pn-red);
}

.pn-minicart__promo-row {
	display: flex;
	gap: 0.5rem;
}

.pn-minicart__promo-input {
	flex: 1 1 0%;
	min-width: 0;
	border-radius: 9999px;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	padding: 0.4375rem 0.875rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--color-text);
}

.pn-minicart__promo-input:focus {
	border-color: var(--color-primary);
	outline: none;
}

.pn-minicart__promo-input.has-error {
	border-color: var(--pn-red);
}

.pn-minicart__promo-apply {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	border: 0;
	border-radius: 9999px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--color-navy);
	background-image: none;
	box-shadow: none;
	outline: none;
	text-shadow: none;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	color: #fff;
	padding: 0.4375rem 1rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	cursor: pointer;
}

.pn-minicart__promo-apply:disabled {
	/* solid colour (the navy at half strength on white) instead of opacity, so the button is a single flat shape */
	opacity: 1;
	background: #88869d;
	color: #fff;
	-webkit-text-fill-color: #fff;
	cursor: default;
}

/* Phones: 16px text in the code box so iPhones do not zoom the page when it is tapped; flat inputs too. */
@media (max-width: 767px) {
	.pn-minicart__promo-input {
		font-size: 16px;
		-webkit-appearance: none;
		appearance: none;
	}
}

.pn-minicart__promo-error {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pn-red-dark, #c10007);
}

.pn-minicart__promo-error[hidden] {
	display: none;
}

/* Pop-down opened from the cart icon: plain "Your cart" heading (no green tick). */
.pn-minicart.is-view .pn-minicart__title {
	color: var(--color-navy);
}

.pn-minicart.is-view .pn-minicart__title svg {
	display: none;
}

/* Cart pop-down: price per vial under the quantity (old price struck through when a pack / promo lowers it). */
.pn-minicart__vial {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.pn-minicart__vial .amount {
	color: inherit;
	font-weight: 400;
}

.pn-minicart__vial-was,
.pn-minicart__vial-was .amount {
	margin-right: 0.25rem;
	text-decoration: line-through;
	text-decoration-color: var(--pn-red-500, #fb2c36);
}

/* Quantity and price per vial share a line (the vial price drops under the quantity only when it does not fit). */
.pn-minicart__line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.625rem;
}

/* Cart pop-down: the pack's offer text and the green "You save" line, like the cart page. */
.pn-minicart__offer {
	font-family: var(--font-display);
	font-size: 0.75rem;
	line-height: 1.2;
	font-weight: 800;
	color: var(--color-primary);
}

.pn-minicart__saved {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	line-height: 1rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--pn-green);
}

.pn-minicart__saved .amount {
	color: inherit;
	font-weight: inherit;
}

/* Cart pop-down: a little breathing room on the right so a visible scrollbar never sits on top of the prices. */
.pn-minicart__list {
	padding-right: 0.375rem;
}

/* Cart pop-down subtotal: original retail price struck through beside the real price. */
.pn-minicart__subtotal-was,
.pn-minicart__subtotal-was .amount {
	margin-right: 0.375rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--color-text-muted);
	text-decoration: line-through;
	text-decoration-color: var(--pn-red-500, #fb2c36);
}

/* Cart pop-down: total savings under the subtotal, in green like the per-item "You save" lines. */
.pn-minicart__savings {
	margin: 0.125rem 0 0;
	text-align: right;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--pn-green);
}

.pn-minicart__savings .amount {
	color: inherit;
	font-weight: inherit;
}

/* ---- Cart pop-down: cashback notice, BAC Water add-on, and a taller-screen-safe panel ------------ */
.pn-minicart {
	max-height: calc(100vh - 6.5rem);
	max-height: calc(100dvh - 6.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pn-minicart .pn-cashback-bubble {
	margin: 0.75rem 0 0;
}

.pn-minicart__upsell {
	margin-top: 0.75rem;
	border-radius: 0.75rem;
	background: var(--pn-gradient);
	padding: 0.625rem 0.75rem;
	color: #fff;
}

.pn-minicart__upsell-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pn-minicart__upsell-badge {
	border-radius: 9999px;
	background: #fff;
	padding: 0.0625rem 0.5rem;
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-navy);
}

.pn-minicart__upsell-title {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 800;
	color: #fff;
}

.pn-minicart__upsell-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: 0.5rem;
}

.pn-minicart__upsell-thumb {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	border-radius: 0.5rem;
	background: #fff;
}

.pn-minicart__upsell-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pn-minicart__upsell-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.pn-minicart__upsell-name {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.pn-minicart__upsell-price,
.pn-minicart__upsell-price .amount {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #fff;
}

.pn-minicart__upsell-add {
	flex: none;
	border: 0;
	border-radius: 9999px;
	background: #fff;
	padding: 0.4375rem 0.875rem;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--color-navy);
	cursor: pointer;
}

.pn-minicart__upsell-add:disabled {
	opacity: 0.7;
	cursor: default;
}

/* Cart pop-down: when the pop-down is tall enough to scroll, View Cart / Checkout stay pinned at the bottom. */
.pn-minicart__body {
	padding-bottom: 0;
}

.pn-minicart__actions {
	position: sticky;
	bottom: 0;
	margin-top: 0;
	padding: 0.75rem 0 1rem;
	background: var(--color-surface);
}

/* ==== Cart pop-down: compact layout, so everything fits on a phone screen without scrolling ==== */
.pn-minicart__body {
	padding: 0.75rem 0.875rem 0;
}

.pn-minicart__head {
	margin-bottom: 0.375rem;
}

.pn-minicart .pn-freeship {
	margin-bottom: 0;
	padding-bottom: 0.5rem;
}

.pn-minicart .pn-freeship__scale {
	display: none;
}

.pn-minicart .pn-freeship__msg {
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
}

.pn-minicart__item {
	gap: 0.625rem;
	padding: 0.4375rem 0;
}

.pn-minicart__thumb {
	width: 2.5rem;
	height: 2.5rem;
}

.pn-minicart__info {
	gap: 0;
}

.pn-minicart__head-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.375rem;
}

.pn-minicart__name {
	font-size: 0.8125rem;
	line-height: 1.2;
}

.pn-minicart__meta,
.pn-minicart__qty,
.pn-minicart__vial,
.pn-minicart__offer {
	font-size: 0.6875rem;
	line-height: 1rem;
}

.pn-minicart__line {
	column-gap: 0.5rem;
}

.pn-minicart__price {
	font-size: 0.8125rem;
}

.pn-minicart__was {
	font-size: 0.6875rem;
	line-height: 0.875rem;
}

.pn-minicart__saved {
	font-size: 0.625rem;
	line-height: 0.875rem;
}

.pn-minicart__subtotal {
	margin-top: 0.125rem;
	padding-top: 0.5rem;
	font-size: 0.8125rem;
}

.pn-minicart__subtotal strong {
	font-size: 0.9375rem;
}

.pn-minicart__subtotal-was,
.pn-minicart__subtotal-was .amount {
	font-size: 0.75rem;
}

.pn-minicart__savings {
	font-size: 0.75rem;
	line-height: 1rem;
}

body.pn .pn-minicart .pn-cashback-bubble {
	margin: 0.5rem 0 0;
	border-radius: 0.625rem;
	padding: 0.5rem 0.75rem;
}

body.pn .pn-minicart .pn-cashback-bubble__row {
	gap: 0.5rem;
}

body.pn .pn-minicart .pn-cashback-bubble__icon {
	width: 20px;
	height: 20px;
}

body.pn .pn-minicart .pn-cashback-bubble__body {
	font-size: 0.75rem;
	line-height: 1rem;
}

body.pn .pn-minicart .pn-cashback-bubble__headline {
	font-size: 0.75rem;
	line-height: 1.25;
}

body.pn .pn-minicart .pn-cashback-bubble .pn-cashback-bubble__how {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1rem;
}

body.pn .pn-minicart .pn-cashback-bubble__info {
	margin: 0.5rem 0 0;
	padding: 0.5rem 0 0;
	font-size: 0.6875rem;
	line-height: 1.45;
}

.pn-minicart__upsell {
	margin-top: 0.5rem;
	padding: 0.5rem 0.625rem;
}

.pn-minicart__upsell-row {
	margin-top: 0;
	gap: 0.5rem;
}

.pn-minicart__upsell-thumb {
	width: 2.125rem;
	height: 2.125rem;
}

.pn-minicart__upsell-name {
	font-size: 0.75rem;
	line-height: 1.2;
}

.pn-minicart__upsell-badge {
	display: inline-block;
	margin-right: 0.25rem;
	vertical-align: 1px;
}

.pn-minicart__upsell-price,
.pn-minicart__upsell-price .amount {
	font-size: 0.6875rem;
	font-weight: 500;
}

.pn-minicart__upsell-add {
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
}

.pn-minicart__promo {
	margin-top: 0.5rem;
}

.pn-minicart__promo-applied {
	margin-bottom: 0.375rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
}

.pn-minicart__promo-input,
.pn-minicart__promo-apply {
	min-height: 34px;
}

.pn-minicart__promo-input {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.pn-minicart__promo-apply {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.pn-minicart__actions {
	margin-top: 0;
	padding: 0.5rem 0 0.75rem;
}

.pn-minicart__actions .pn-btn {
	padding: 0.5rem 0.75rem;
}

/* Cart pop-down: remove (X) button on each row, and the add-on / store-credit boxes now sit under the progress bar. */
.pn-minicart__item {
	position: relative;
}

.pn-minicart__remove {
	/* a small round X on the corner of the product picture, so it costs no row height or price width */
	position: absolute;
	top: 0.1875rem;
	left: -0.3125rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(18, 13, 59, 0.12);
	color: var(--color-text-muted);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pn-minicart__remove svg {
	width: 0.625rem;
	height: 0.625rem;
}

.pn-minicart__remove:hover,
.pn-minicart__remove:focus-visible {
	border-color: var(--pn-red);
	background: var(--pn-red-bg);
	color: var(--pn-red);
}

.pn-minicart__remove:disabled {
	cursor: default;
}

.pn-minicart__list {
	margin-top: 0.125rem;
}

.pn-minicart .pn-freeship {
	margin-bottom: 0;
}

/* Cart pop-down: quantity stepper (− N +) in place of the plain "Qty N" text. */
.pn-minicart__stepper {
	display: inline-flex;
	align-items: center;
	height: 1.375rem;
	border: 1px solid var(--color-border);
	border-radius: 9999px;
	background: #fff;
	overflow: hidden;
}

.pn-minicart__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	line-height: 1;
	font-weight: 600;
	color: var(--color-navy);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pn-minicart__step:hover:not(:disabled) {
	background: var(--color-bg);
}

.pn-minicart__step:disabled {
	opacity: 0.35;
	cursor: default;
}

.pn-minicart__qtynum {
	min-width: 1.125rem;
	text-align: center;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-minicart__line {
	align-items: center;
}

/* ==== Cart: a full-height drawer on the right, with the page dimmed and blurred behind it ==== */
html.pn-minicart-open {
	overflow: hidden;
}

.pn-minicart-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(18, 13, 59, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.pn-minicart-backdrop[hidden] {
	display: none;
}

.pn-minicart-backdrop.is-open {
	opacity: 1;
}

.pn-minicart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 99991;
	width: min(26rem, 90vw);
	height: auto;
	max-height: none;
	border: 0;
	border-radius: 1.25rem 0 0 1.25rem;
	box-shadow: -20px 0 50px -12px rgba(0, 0, 0, 0.35);
	opacity: 1;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pn-minicart.is-open {
	transform: none;
}

body.admin-bar .pn-minicart {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .pn-minicart {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pn-minicart,
	.pn-minicart-backdrop {
		transition: none;
	}
}

.pn-minicart__list {
	max-height: none !important;
	overflow: visible;
}

.pn-minicart__head {
	position: sticky;
	top: 0;
	z-index: 3;
	margin: 0 -0.875rem 0.375rem;
	padding: 0.875rem 0.875rem 0.625rem;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}

.pn-minicart__title {
	font-size: 1rem;
}

.pn-minicart__close {
	padding: 0.375rem;
	margin: -0.375rem;
}

.pn-minicart__actions {
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -10px 12px -10px rgba(18, 13, 59, 0.18);
}

/* Drawer: View Cart / Checkout sit at the very bottom of the screen even when the cart is short. */
.pn-minicart__body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.pn-minicart__actions {
	margin-top: auto;
}

/* ==== Cart drawer: roomier, larger and better organised (undoes the earlier squeeze now that it has the whole height) ==== */
.pn-minicart__body {
	padding: 0 1.25rem 0;
}

.pn-minicart__head {
	margin: 0 -1.25rem 0.875rem;
	padding: 1.125rem 1.25rem 0.875rem;
}

.pn-minicart__title {
	font-size: 1.125rem;
	gap: 0.5rem;
}

.pn-minicart__title svg {
	width: 20px;
	height: 20px;
}

.pn-minicart__close {
	padding: 0.5rem;
	margin: -0.5rem;
}

.pn-minicart__close svg {
	width: 22px;
	height: 22px;
}

/* free-shipping progress */
.pn-minicart .pn-freeship {
	padding: 0.125rem 0 1rem;
}

.pn-minicart .pn-freeship__msg {
	margin-bottom: 0.625rem;
	font-size: 0.9375rem;
}

.pn-minicart .pn-freeship__track {
	height: 0.625rem;
}

.pn-minicart .pn-freeship__scale {
	display: flex;
	margin-top: 0.375rem;
	font-size: 0.75rem;
}

/* store credit */
body.pn .pn-minicart .pn-cashback-bubble {
	margin: 0 0 0.5rem;
	border-radius: 0.875rem;
	padding: 0.875rem 1rem;
}

body.pn .pn-minicart .pn-cashback-bubble__row {
	gap: 0.75rem;
}

body.pn .pn-minicart .pn-cashback-bubble__icon {
	width: 28px;
	height: 28px;
}

body.pn .pn-minicart .pn-cashback-bubble__body {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

body.pn .pn-minicart .pn-cashback-bubble__headline {
	font-size: 0.9375rem;
	line-height: 1.3;
}

body.pn .pn-minicart .pn-cashback-bubble .pn-cashback-bubble__how {
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

body.pn .pn-minicart .pn-cashback-bubble__info {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* items */
.pn-minicart__list {
	margin-top: 0.5rem;
}

.pn-minicart__item {
	gap: 0.875rem;
	padding: 0.875rem 0;
}

.pn-minicart__thumb {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.625rem;
}

.pn-minicart__remove {
	top: 0.5rem;
	left: -0.4375rem;
	width: 1.5rem;
	height: 1.5rem;
}

.pn-minicart__remove svg {
	width: 0.75rem;
	height: 0.75rem;
}

.pn-minicart__info {
	gap: 0.125rem;
}

.pn-minicart__name {
	font-size: 0.9375rem;
	line-height: 1.25;
}

.pn-minicart__meta,
.pn-minicart__vial,
.pn-minicart__offer {
	font-size: 0.8125rem;
	line-height: 1.2rem;
}

.pn-minicart__line {
	margin-top: 0.125rem;
	column-gap: 0.75rem;
}

.pn-minicart__price {
	font-size: 1rem;
}

.pn-minicart__was {
	font-size: 0.8125rem;
	line-height: 1.1rem;
}

.pn-minicart__saved {
	font-size: 0.75rem;
	line-height: 1.1rem;
}

.pn-minicart__stepper {
	height: 1.875rem;
}

.pn-minicart__step {
	width: 2rem;
	font-size: 1.125rem;
}

.pn-minicart__qtynum {
	min-width: 1.5rem;
	font-size: 0.875rem;
}

/* totals */
.pn-minicart__subtotal {
	margin-top: 0.25rem;
	padding-top: 1rem;
	font-size: 1rem;
}

.pn-minicart__subtotal strong {
	font-size: 1.25rem;
}

.pn-minicart__subtotal-was,
.pn-minicart__subtotal-was .amount {
	font-size: 0.9375rem;
}

.pn-minicart__savings {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* add-on */
.pn-minicart__upsell {
	margin-top: 1rem;
	border-radius: 0.875rem;
	padding: 0.875rem 1rem;
}

.pn-minicart__upsell-row {
	gap: 0.75rem;
}

.pn-minicart__upsell-thumb {
	width: 3rem;
	height: 3rem;
	border-radius: 0.625rem;
}

.pn-minicart__upsell-name {
	font-size: 0.9375rem;
}

.pn-minicart__upsell-badge {
	font-size: 10px;
	padding: 0.125rem 0.5rem;
}

.pn-minicart__upsell-price,
.pn-minicart__upsell-price .amount {
	font-size: 0.8125rem;
}

.pn-minicart__upsell-add {
	padding: 0.625rem 1.125rem;
	font-size: 0.875rem;
}

/* promo code */
.pn-minicart__promo {
	margin-top: 1.125rem;
}

.pn-minicart__promo-label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-minicart__promo-applied {
	margin-bottom: 0.5rem;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
}

.pn-minicart__promo-row {
	gap: 0.625rem;
}

.pn-minicart__promo-input,
.pn-minicart__promo-apply {
	min-height: 44px;
}

.pn-minicart__promo-input {
	padding: 0.5rem 1rem;
}

.pn-minicart__promo-apply {
	padding: 0.5rem 1.25rem;
	font-size: 0.9375rem;
}

/* buttons */
.pn-minicart__actions {
	gap: 0.75rem;
	margin-top: auto;
	padding: 1rem 0 calc(1.125rem + env(safe-area-inset-bottom, 0px));
}

.pn-minicart__actions .pn-btn {
	padding: 0.875rem 1rem;
	font-size: 1rem;
}

/* ---- Drawer fine-tuning: roomy but not wasteful (wider on phones so names and offers wrap less, tighter item rows) ---- */
.pn-minicart {
	width: min(28rem, 94vw);
}

.pn-minicart__head {
	padding-top: 1rem;
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
}

.pn-minicart .pn-freeship {
	padding-bottom: 0.75rem;
}

.pn-minicart .pn-freeship__msg {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

body.pn .pn-minicart .pn-cashback-bubble {
	padding: 0.75rem 0.875rem;
	margin-bottom: 0.25rem;
}

body.pn .pn-minicart .pn-cashback-bubble__icon {
	width: 24px;
	height: 24px;
}

body.pn .pn-minicart .pn-cashback-bubble__headline {
	font-size: 0.875rem;
}

.pn-minicart__item {
	gap: 0.75rem;
	padding: 0.75rem 0;
}

.pn-minicart__thumb {
	width: 3rem;
	height: 3rem;
}

.pn-minicart__remove {
	top: 0.375rem;
	width: 1.375rem;
	height: 1.375rem;
}

.pn-minicart__name {
	font-size: 0.875rem;
}

.pn-minicart__meta,
.pn-minicart__vial,
.pn-minicart__offer {
	font-size: 0.75rem;
	line-height: 1.1rem;
}

.pn-minicart__line {
	column-gap: 0.5rem;
}

.pn-minicart__price {
	font-size: 0.9375rem;
}

.pn-minicart__was {
	font-size: 0.75rem;
}

.pn-minicart__saved {
	font-size: 0.6875rem;
}

.pn-minicart__stepper {
	height: 1.75rem;
}

.pn-minicart__step {
	width: 1.75rem;
}

.pn-minicart__subtotal {
	padding-top: 0.75rem;
}

.pn-minicart__upsell {
	margin-top: 0.75rem;
	padding: 0.75rem 0.875rem;
}

.pn-minicart__upsell-thumb {
	width: 2.5rem;
	height: 2.5rem;
}

.pn-minicart__upsell-add {
	padding: 0.5rem 1rem;
}

.pn-minicart__promo {
	margin-top: 0.875rem;
}

.pn-minicart__promo-label {
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
}

.pn-minicart__actions {
	padding-top: 0.75rem;
}

/* Cart drawer add-on: the "Add-on" tag sits above the product name, so the name stays on one line. */
.pn-minicart__upsell-badge {
	display: block;
	width: fit-content;
	margin: 0 0 0.1875rem;
}

.pn-minicart__upsell-name {
	display: block;
	white-space: nowrap;
}

/* Very narrow phones: drop the add-on's picture and trim its button so the one-line name never runs into it. */
@media (max-width: 359px) {
	.pn-minicart__upsell-thumb {
		display: none;
	}

	.pn-minicart__upsell-add {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
	}
}

/* Cart drawer: no "Promo code" heading; the code box gets clear space above the View Cart / Checkout buttons. */
.pn-minicart__promo {
	margin-top: 0.875rem;
	margin-bottom: 1.5rem;
}

.pn-minicart__actions {
	padding-top: 1rem;
}

/* Cart drawer: savings broken down into pack savings and coupon discount, in green. */
.pn-minicart__savings {
	margin: 0.375rem 0 0;
	text-align: left;
}

.pn-minicart__savings-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 600;
	color: var(--pn-green);
}

.pn-minicart__savings-row .amount {
	color: inherit;
	font-weight: inherit;
}

.pn-minicart__savings-row--total {
	margin-top: 0.125rem;
	padding-top: 0.25rem;
	border-top: 1px dashed color-mix(in srgb, var(--pn-green) 40%, transparent);
	font-size: 0.9375rem;
	font-weight: 700;
}

/* Drawer add-on tag now reads "Don't Forget!" (normal capitalisation, not shouty caps). */
.pn-minicart__upsell-badge {
	font-size: 0.75rem;
	letter-spacing: 0;
	text-transform: none;
	padding: 0.125rem 0.625rem;
}

.pn-minicart__upsell {
	margin-bottom: 0.25rem;
}

/* ==== Cart drawer item prices, laid out like the desktop cart page ====
   Right-hand column: price per vial on top, line total below, "You save" last — every line right-aligned
   with the retail price (struck through) on the left and the updated price on the right. */
.pn-minicart__item {
	align-items: stretch;
}

.pn-minicart__price {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.0625rem;
	margin: 0;
	text-align: right;
}

.pn-minicart__unit {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.3125rem;
	white-space: nowrap;
	font-size: 0.6875rem;
	line-height: 1.1rem;
	color: var(--color-text-muted);
}

.pn-minicart__unit .pn-minicart__vial-was,
.pn-minicart__unit .pn-minicart__vial-was .amount {
	margin: 0;
	font-size: 0.6875rem;
}

.pn-minicart__lineprice {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.375rem;
	white-space: nowrap;
}

.pn-minicart__lineprice .pn-minicart__was {
	font-size: 0.75rem;
	line-height: 1.1rem;
}

.pn-minicart__lineprice .pn-minicart__now {
	font-size: 0.9375rem;
	line-height: 1.3;
}

.pn-minicart__info {
	align-self: flex-start;
}

/* Cart drawer: the store-credit box sits under the coupon box, above the buttons. */
.pn-minicart__promo {
	margin-bottom: 0.875rem;
}

.pn-minicart .pn-cashback-bubble {
	margin: 0 0 1.25rem;
}

/* Cart drawer: a divider line under the item list, above the "Don't Forget!" add-on — same line that sits under the progress bar. */
.pn-minicart__list:has(+ .pn-minicart__upsell) {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-border);
}

.pn-minicart__list + .pn-minicart__upsell {
	margin-top: 0.875rem;
}

/* The green "You're saving $X on this order" line (cart drawer; the cart page and checkout use the same look). */
.pn-saving-pill {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background: var(--pn-green-bg);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pn-green-dark);
}

.pn-saving-pill .amount {
	color: inherit;
	font-weight: inherit;
}

.pn-saving-pill svg {
	flex: none;
}

.pn-saving-pill--drawer {
	margin-top: 0.625rem;
}

/* ==== Cart drawer totals — same rows as the checkout's Order Summary ==== */
.pn-minicart__list + .pn-minicart__sum,
.pn-minicart__upsell + .pn-minicart__sum {
	margin-top: 0.75rem;
}

.pn-minicart__sum {
	margin-top: 0.25rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
}

.pn-minicart__sum-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	padding: 0.1875rem 0;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

.pn-minicart__sum-row .amount {
	color: inherit;
	font-weight: inherit;
}

.pn-minicart__sum-row > span:last-child {
	color: var(--color-navy);
}

.pn-minicart__sum-row--save,
.pn-minicart__sum-row--save > span:last-child {
	font-weight: 600;
	color: var(--pn-green);
}

.pn-minicart__sum-row--total {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
	align-items: baseline;
}

.pn-minicart__sum-row--total > span:first-child {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-minicart__sum-row--total small {
	margin-left: 0.25rem;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.pn-minicart__sum-row--total > span:last-child {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-navy);
}

/* Drawer totals: a free shipping line is green, like the checkout's. */
.pn-minicart__sum-row--free > span:last-child {
	font-weight: 600;
	color: var(--pn-green);
}

/* Drawer: the "Coupon Code" heading above the code box, styled like the cart page's. */
.pn-minicart__promo-label {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-minicart__promo {
	margin-top: 1rem;
}

/* "FREE" shipping in capitals — cart drawer, cart page and checkout Order Summary. */
.pn-shipping__price--free,
.pn-minicart__sum-row--free > span:last-child {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Back In Stock Notifier — sign-up form for sold-out packs, and the shop card "Notify Me" button. */
.pn-bis-wrap {
	margin-top: 1rem;
}

.pn-bis[hidden] {
	display: none;
}

.pn-bis .cwginstock-subscribe-form {
	margin: 0;
}

.pn-bis .cwginstock-panel-primary {
	margin: 0;
	border: 1px solid var(--color-border);
	border-radius: 1rem;
	background: var(--color-surface, #fff);
	box-shadow: none;
	overflow: hidden;
}

.pn-bis .cwginstock-panel-heading {
	padding: 0.875rem 1rem 0;
	border: 0;
	background: transparent;
}

.pn-bis .cwginstock-panel-heading h4 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-navy, var(--color-text));
}

.pn-bis .cwginstock-panel-body {
	padding: 0.75rem 1rem 1rem;
}

.pn-bis .cwginstock-panel-body .row,
.pn-bis .cwginstock-panel-body [class*="col-md-"] {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.pn-bis .cwgstock_name,
.pn-bis .cwgstock_email {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 0.5rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 9999px;
	background: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--color-text);
}

.pn-bis .cwgstock_name:focus,
.pn-bis .cwgstock_email:focus {
	outline: none;
	border-color: var(--color-primary);
}

.pn-bis .cwgstock_button {
	width: 100%;
	margin: 0;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 9999px;
	background: var(--color-primary);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pn-bis .cwgstock_button:hover {
	background: var(--color-primary-dark);
}

.pn-bis .cwgstock_output {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	text-align: center;
}

.pn-pack-tile.is-oos.is-selected {
	opacity: 1;
}

.pn-select-menu__option.is-oos {
	color: var(--color-text-muted);
}

/* Plugin ships a blue Bootstrap-style panel header; match the site's cards instead. */
body.pn .pn-bis .cwginstock-panel-primary {
	border: 1px solid var(--color-border) !important;
	border-radius: 1rem !important;
	background: #fff !important;
}

body.pn .pn-bis .cwginstock-panel-heading {
	background: transparent !important;
	border: 0 !important;
	padding: 1rem 1rem 0 !important;
}

body.pn .pn-bis .cwginstock-panel-heading h4 {
	color: var(--color-navy) !important;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
}

body.pn .pn-bis .cwgstock_button {
	background: var(--color-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 9999px !important;
}

body.pn .pn-bis .cwgstock_button:hover {
	background: var(--color-primary-dark) !important;
}

/* Shop card pack note: retail total struck through beside the new total. */
.pn-card__note-was {
	text-decoration: line-through;
}

/* Shop card offer line ("Buy 4, Get 1 FREE"): same plain blue text, larger and always on one row.
   product-card.js passes the text length (--pn-chars) and the size scales to the card width. */
.pn-card__pricing {
	container-type: inline-size;
}

.pn-card__bundle {
	font-size: clamp(0.5625rem, calc(100cqw / (var(--pn-chars, 18) * 0.56)), 0.9375rem);
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
}

/* Product page pack tiles: offer text ("Buy 4, Get 1 FREE") larger, always one line.
   The tile is the size container; product-card.js / the template pass the text length (--pn-chars). */
.pn-pack-tile {
	container-type: inline-size;
}

.pn-pack-tile__headline {
	min-height: 1.4rem;
	font-size: clamp(0.5625rem, calc(100cqw / (var(--pn-chars, 18) * 0.56)), 1rem);
	white-space: nowrap;
	overflow: hidden;
}

/* Product page pack tiles: two across on every screen size (they were four across on wider screens),
   so the offer text can be larger and still fit on one line. */
.pn-product__packs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
	.pn-product__packs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Shop card "Total $x" line: larger, closer to the offer text above it. The total and the struck-through
   retail total each stay whole; on a narrow card the retail total drops to the next line instead of splitting. */
.pn-card__pack-note {
	font-size: 0.9375rem;
	line-height: 1.25;
}

@media (min-width: 640px) {
	.pn-card__pack-note {
		font-size: 1rem;
	}
}

.pn-card__note-was {
	font-size: 0.875em;
}

.pn-card__note-total,
.pn-card__note-was {
	white-space: nowrap;
}

/* Shop card "Total $x": same gap above it as the offer text has above itself, and the same font + weight as the price per vial. */
.pn-card__pack-note {
	margin-top: 0.3125rem;
	line-height: 1.2;
}

.pn-card__note-total {
	font-family: var(--font-display);
	font-weight: 600;
}

/* Shop card: green "You save $x" row under the total. */
.pn-card__pack-save {
	margin-top: 0.2rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--pn-green);
	white-space: nowrap;
}

@media (min-width: 640px) {
	.pn-card__pack-save {
		font-size: 0.9375rem;
	}
}

/* Desktop: larger text leaves a bigger gap above the offer line, so match it below. */
@media (min-width: 640px) {
	.pn-card__pack-note {
		margin-top: 0.45rem;
	}

	.pn-card__pack-save {
		margin-top: 0.38rem;
	}
}

/* =========================================================================
   Build Your Own Pack page (template-build-your-own.php, assets/js/byo.js)
   ========================================================================= */
.pn-byo {
	padding-bottom: 5rem;
}

.pn-byo__step-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-byo__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	background: var(--pn-gradient);
	font-size: 0.875rem;
	color: #fff;
}

.pn-byo__sizes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.pn-byo__size {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 1.25rem 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 0.875rem;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pn-byo__size:hover {
	border-color: var(--color-text-muted);
}

.pn-byo__size.is-selected {
	border-color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 6%, #fff);
	box-shadow: 0 0 0 1px var(--color-primary);
}

.pn-byo__size-tag {
	position: absolute;
	top: -0.625rem;
	padding: 0.125rem 0.625rem;
	border-radius: 9999px;
	background: var(--color-accent);
	font-size: 0.6875rem;
	font-weight: 700;
	color: #fff;
}

.pn-byo__size-label {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-navy);
}

.pn-byo__size-offer {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-primary);
}

.pn-byo__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (min-width: 960px) {
	.pn-byo__layout {
		grid-template-columns: minmax(0, 1fr) 21rem;
	}
}

.pn-byo__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.pn-byo__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.pn-byo__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 1rem;
	background: #fff;
}

.pn-byo__card.has-picks {
	border-color: var(--color-primary);
}

.pn-byo__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--color-bg, #f6f8fb);
}

.pn-byo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.2);
}

.pn-byo__count {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	min-width: 1.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	background: var(--color-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
}

.pn-byo__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-navy);
}

.pn-byo__select,
.pn-byo__dose {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.375rem;
	padding: 0.4375rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 9999px;
	background: #fff;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
	color: var(--color-navy);
}

.pn-byo__dose {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pn-byo__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.375rem;
	margin: 0;
}

.pn-byo__price-now {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-byo__price-per {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-byo__price-was {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.pn-byo__pick,
.pn-byo__add {
	width: 100%;
	padding: 0.625rem 1rem;
	border: 0;
	border-radius: 9999px;
	background: var(--color-primary);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pn-byo__pick {
	margin-top: auto;
}

.pn-byo__pick:hover:not(:disabled),
.pn-byo__add:hover:not(:disabled) {
	background: var(--color-primary-dark);
}

.pn-byo__pick:disabled,
.pn-byo__add:disabled {
	background: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Summary */
.pn-byo__summary {
	box-sizing: border-box;
	padding: 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 4px 20px rgba(18, 13, 59, 0.06);
}

@media (min-width: 960px) {
	.pn-byo__summary {
		position: sticky;
		top: 1.5rem;
	}
}

@media (max-width: 959px) {
	.pn-byo__summary {
		position: sticky;
		bottom: 4.25rem; /* clears the floating Refer & Earn button */
		z-index: 5;
		padding: 0.75rem 1rem 1rem;
	}

	.pn-byo__detail {
		display: none;
	}

	.pn-byo__summary.is-open .pn-byo__detail {
		display: block;
		max-height: 40vh;
		overflow-y: auto;
	}

	.pn-byo__summary.is-open .pn-byo__chevron {
		transform: rotate(180deg);
	}

	.pn-byo {
		padding-bottom: 12rem;
	}
}

.pn-byo__summary-title {
	margin: 0 0 0.25rem;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-byo__progress {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
}

.pn-byo__meter {
	height: 0.5rem;
	margin-bottom: 0.75rem;
	overflow: hidden;
	border-radius: 9999px;
	background: var(--color-border);
}

.pn-byo__meter span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 9999px;
	background: var(--pn-gradient);
	transition: width 0.2s ease;
}

.pn-byo__picks {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.pn-byo__empty {
	padding: 0.5rem 0;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-byo__pickrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--color-border);
}

.pn-byo__pickinfo {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.pn-byo__pickname {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-byo__pickdose {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.pn-byo__pickprice {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-navy);
}

.pn-byo__pickwas {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.pn-byo__picknow.is-deal {
	color: var(--pn-green);
}

.pn-byo__rm {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
}

.pn-byo__rm:hover {
	background: var(--color-bg, #f6f8fb);
	color: var(--color-navy);
}

.pn-byo__totals {
	margin: 0 0 0.875rem;
}

.pn-byo__totalrow {
	display: flex;
	justify-content: space-between;
	padding: 0.1875rem 0;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

.pn-byo__totalrow dt,
.pn-byo__totalrow dd {
	margin: 0;
}

.pn-byo__totalrow.is-save {
	font-weight: 600;
	color: var(--pn-green);
}

.pn-byo__totalrow.is-total {
	margin-top: 0.375rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--color-border);
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-byo__error {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #b42318;
}

.pn-byo__error.is-soft {
	color: var(--color-text-muted);
	font-weight: 500;
}

/* Fixed "Qty 1" label for pack vials in the cart and the pop-down */
.pn-byo-fixedqty {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: 9999px;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pn-byo__toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	margin: 0 0 0.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: default;
}

.pn-byo__toggle .pn-byo__summary-title {
	flex: 1;
	margin: 0;
}

.pn-byo__toggle-total {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-navy);
}

.pn-byo__chevron {
	display: none;
	color: var(--color-text-muted);
	transition: transform 0.15s ease;
}

@media (max-width: 959px) {
	.pn-byo__toggle {
		cursor: pointer;
	}

	.pn-byo__chevron {
		display: block;
	}
}

/* Shop page: "Build Your Own Pack" banner */
.pn-shop__byo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	background: var(--pn-gradient);
	text-decoration: none;
	color: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pn-shop__byo:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(18, 13, 59, 0.25);
	color: #fff;
}

.pn-shop__byo-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.pn-shop__byo-title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.2;
}

.pn-shop__byo-sub {
	font-size: 0.9375rem;
	line-height: 1.35;
	opacity: 0.92;
}

.pn-shop__byo-cta {
	flex: none;
	padding: 0.625rem 1.25rem;
	border-radius: 9999px;
	background: #fff;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-navy);
}

@media (max-width: 639px) {
	.pn-shop__byo {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		padding: 1.125rem 1.25rem;
		text-align: center;
	}

	.pn-shop__byo-title {
		font-size: 1.25rem;
	}
}

/* Build Your Own pack as one cart row: picture collage + "view items" dropdown */
.pn-byo-thumbs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	background: #fff;
}

.pn-byo-thumbs.is-single {
	grid-template-columns: minmax(0, 1fr);
}

body.pn .pn-byo-thumbs img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 0;
	margin: 0;
	object-fit: contain;
	aspect-ratio: 1 / 1;
	border: 0 !important;
	border-radius: 0 !important;
}

.pn-byo-break {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
}

.pn-byo-break summary {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-primary);
	cursor: pointer;
	list-style: none;
}

.pn-byo-break summary::-webkit-details-marker {
	display: none;
}

.pn-byo-break summary::after {
	content: "";
	width: 0.4375rem;
	height: 0.4375rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.15s ease;
}

.pn-byo-break[open] summary::after {
	transform: rotate(-135deg) translateY(-1px);
}

.pn-byo-break__list {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.pn-byo-break__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.3125rem 0;
	border-top: 1px solid var(--color-border);
	color: var(--color-navy);
}

.pn-byo-break__name {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-weight: 600;
	line-height: 1.25;
}

.pn-byo-break__dose {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-text-muted);
}

.pn-byo-break__price {
	display: flex;
	flex: none;
	gap: 0.375rem;
	align-items: baseline;
	font-weight: 600;
}

.pn-byo-break__was {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.pn-byo-break__now {
	color: var(--color-navy);
}

.pn-byo-break__item .pn-byo-break__now:only-child {
	color: var(--color-navy);
}

/* Pop-down: the pack's item list gets its own full-width row under the item */
.pn-minicart__item--byo {
	flex-wrap: wrap;
}

.pn-minicart__item--byo .pn-byo-break {
	flex: 0 0 100%;
	margin-top: 0;
	order: 5;
}

/* Each tile of the pack picture is cropped in so the vial fills it (the photos have wide margins) */
.pn-byo-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

body.pn .pn-byo-thumb img {
	transform: scale(1.7);
}

.pn-byo-thumbs.is-single .pn-byo-thumb img {
	transform: scale(1.3);
}

/* "FREE" in a pack's item list */
.pn-byo-break__now.is-free {
	color: var(--pn-green);
}

/* Custom pack picture (media library "Copilot_20260418_194711": five PeptiNova vials), in the same
   bordered, rounded square frame every other product picture has. */
.pn-byo-picwrap {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	background: #fff;
}

body.pn .pn-byo-picwrap img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
	transform: scale(1.06);
}

/* Cart page: the frame (other products get it from the link around their picture) */
body.pn .woocommerce table.pn-cart__table td.product-thumbnail .pn-byo-picwrap {
	width: 5rem;
	height: 5rem;
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	background: var(--color-bg);
}

@media (min-width: 640px) {
	body.pn .woocommerce table.pn-cart__table td.product-thumbnail .pn-byo-picwrap {
		width: 6rem;
		height: 6rem;
	}
}

@media (max-width: 639px) {
	body.pn.woocommerce-cart .pn-cart__items table.pn-cart__table td.product-thumbnail .pn-byo-picwrap {
		width: 4rem;
		height: 4rem;
	}
}

/* Product page: a dosage that is completely sold out is crossed out, like the sold-out pack tiles */
.pn-size-pill {
	position: relative;
	overflow: hidden;
}

.pn-size-pill.is-oos {
	opacity: 0.7;
}

.pn-size-pill.is-oos.is-selected {
	opacity: 1;
}

.pn-size-pill.is-oos::after {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		currentColor calc(50% - 1px),
		currentColor calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

/* Header menu: six tabs now ("Build Your Own Kit" added), so keep each on one line and tighten the spacing
   on tablets and small laptops. */
.pn-header__menu a {
	white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1099px) {
	.pn-header__menu {
		gap: 1rem;
	}

	.pn-header__menu a {
		font-size: 0.8125rem;
		letter-spacing: 0;
	}
}

@media (min-width: 1100px) and (max-width: 1279px) {
	.pn-header__menu {
		gap: 1.75rem;
	}

	.pn-header__menu a {
		font-size: 0.9375rem;
	}
}

/* Shop page "Build Your Own Pack" banner: title only, so it is a slimmer bar */
.pn-shop__byo {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.pn-shop__byo-text {
	justify-content: center;
}

/* Shop page "Build Your Own Pack" banner: solid cap-blue (sampled from the product photos), no gradient,
   a lighter blue than the gradient banners above it so it stands out. */
.pn-shop__byo {
	background: #1d80d1;
}

.pn-shop__byo:hover {
	box-shadow: 0 8px 24px rgba(29, 128, 209, 0.35);
}

.pn-shop__byo-cta {
	color: #0e5aa0;
}

/* Homepage: Build Your Own Pack promo (template-parts/byo-promo.php) */
.pn-home-byo {
	padding: 4rem 0 1rem;
}

.pn-home-byo__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
	padding: 2.25rem 1.5rem;
	border-radius: 1.5rem;
	background: #1d80d1;
	color: #fff;
}

@media (min-width: 900px) {
	.pn-home-byo__card {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 3rem;
		padding: 3rem;
	}
}

.pn-home-byo__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.pn-home-byo__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
}

@media (min-width: 900px) {
	.pn-home-byo__title {
		font-size: 2.5rem;
	}
}

.pn-home-byo__text {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.95);
}

.pn-home-byo__cta {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 9999px;
	background: #fff;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	color: #0e5aa0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pn-home-byo__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(11, 60, 110, 0.3);
	color: #0e5aa0;
}

.pn-home-byo__steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.pn-home-byo__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

.pn-home-byo__step {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.125rem 1rem;
	border-radius: 1rem;
	background: #fff;
	color: var(--color-navy);
}

.pn-home-byo__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	margin-bottom: 0.25rem;
	border-radius: 9999px;
	background: #1d80d1;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 800;
	color: #fff;
}

.pn-home-byo__step-title {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
}

.pn-home-byo__step-text {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

/* Homepage Build Your Own Pack promo, phones: compact steps (number beside the text) */
@media (max-width: 639px) {
	.pn-home-byo {
		padding-top: 2.5rem;
	}

	.pn-home-byo__card {
		gap: 1.5rem;
		padding: 1.75rem 1.25rem;
	}

	.pn-home-byo__title {
		font-size: 1.75rem;
	}

	.pn-home-byo__text {
		margin-bottom: 1.25rem;
		font-size: 1rem;
	}

	.pn-home-byo__step {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 0.875rem;
		row-gap: 0.125rem;
		align-items: start;
		padding: 0.875rem 1rem;
	}

	.pn-home-byo__num {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.pn-home-byo__step-title {
		font-size: 1rem;
	}

	.pn-home-byo__step-text {
		font-size: 0.875rem;
	}
}

/* Homepage Build Your Own Pack promo: full-width band, edge to edge like the sections above it
   (the blue runs the whole width of the page; the content sits in the normal page container). */
.pn-home-byo {
	padding: 3.5rem 0;
	background: #1d80d1;
}

.pn-home-byo__card {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

@media (min-width: 900px) {
	.pn-home-byo {
		padding: 4.5rem 0;
	}

	.pn-home-byo__card {
		padding: 0;
	}
}

@media (max-width: 639px) {
	.pn-home-byo {
		padding: 2.5rem 0;
	}

	.pn-home-byo__card {
		padding: 0;
	}
}

/* Build Your Own Pack visuals (homepage band, shop page banner, and the page's own header): a soft gradient in
   lighter blues, clearly lighter than the site's blue-to-navy gradients. */
:root {
	--pn-byo-gradient: linear-gradient(120deg, #1560a8 0%, #1d80d1 32%, #3ca9ee 66%, #74d0f8 100%);
}

.pn-shop__byo,
.pn-home-byo {
	background: var(--pn-byo-gradient);
}

body.page-template-template-build-your-own-php .pn-banner {
	background: var(--pn-byo-gradient);
}

/* Homepage promo: "Mix and match" now sits right under the title (where the longer subtext was) */
.pn-home-byo__eyebrow {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
}

.pn-home-byo__title {
	margin-bottom: 0.5rem;
}

/* Build Your Own page header: lines up with the page content (left edge of the page container) instead of the
   narrower centred column, and the subtext is solid white, a little heavier, and kept to the deeper-blue left side
   of the gradient so it stays easy to read. */
body.page-template-template-build-your-own-php .pn-banner__inner {
	max-width: 80rem;
}

body.page-template-template-build-your-own-php .pn-banner__subtitle {
	max-width: 30rem;
	font-weight: 500;
	color: #fff;
}

/* Product page: "Bundle and save" block under the COA section, linking to Build Your Own Pack */
.pn-pdp-bundle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding: 1.75rem 2rem;
	border-radius: 1.25rem;
	background: var(--pn-byo-gradient);
	text-decoration: none;
	color: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pn-pdp-bundle:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(29, 128, 209, 0.35);
	color: #fff;
}

.pn-pdp-bundle__text {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.pn-pdp-bundle__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
}

.pn-pdp-bundle__sub {
	max-width: 28rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
}

.pn-pdp-bundle__cta {
	flex: none;
	padding: 0.75rem 1.5rem;
	border-radius: 9999px;
	background: #fff;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
	color: #0e5aa0;
}

@media (max-width: 639px) {
	.pn-pdp-bundle {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		margin-top: 2rem;
		padding: 1.5rem 1.25rem;
		text-align: center;
	}

	.pn-pdp-bundle__text {
		align-items: center;
	}

	.pn-pdp-bundle__title {
		font-size: 1.5rem;
	}
}

/* Build Your Own page: the "Your pack" box is always in view while you scroll.
   Desktop: it travels down the right side with the page, and always fits the screen (a long list scrolls inside it).
   Phones and tablets: it is a bar fixed to the bottom of the screen. */
@media (min-width: 960px) {
	.pn-byo__summary {
		position: sticky;
		top: 1.5rem;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 3rem);
	}

	.pn-byo__detail {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
	}

	.pn-byo__picks {
		min-height: 0;
		overflow-y: auto;
	}
}

@media (max-width: 959px) {
	.pn-byo__summary {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		margin: 0;
		padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
		border-width: 1px 0 0;
		border-radius: 1rem 1rem 0 0;
		box-shadow: 0 -6px 24px rgba(18, 13, 59, 0.18);
		max-height: 80vh;
		overflow-y: auto;
	}

	.pn-byo {
		padding-bottom: calc(var(--pn-byo-bar-h, 11rem) + 2rem);
	}

	/* the Refer & Earn button rides above the bar instead of under it */
	body.page-template-template-build-your-own-php .pn-refer {
		bottom: calc(var(--pn-byo-bar-h, 0px) + 0.75rem);
	}
}

/* Left column of the builder (pack size + vials) so the "Your pack" box starts level with step 1 */
.pn-byo__main {
	min-width: 0;
}

/* Build Your Own page, phones and tablets: the floating Refer & Earn button (Coupon Affiliates plugin) rides above the
   bottom bar, and the page leaves room under the footer so the bar never covers it. */
@media (max-width: 959px) {
	body.page-template-template-build-your-own-php .wcusage-floating-widget {
		bottom: calc(var(--pn-byo-bar-h, 0px) + 0.75rem) !important;
	}

	body.page-template-template-build-your-own-php {
		padding-bottom: var(--pn-byo-bar-h, 0px);
	}
}

/* Build Your Own page: let the "Your pack" box follow you down the page.
   Something on the site adds `html, body { overflow-x: hidden }`; with BOTH set that way the browser turns <body> into
   its own scroll area, and position: sticky then never "sticks". `clip` still stops sideways scrolling but does not. */
body.page-template-template-build-your-own-php {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* Phones and tablets: the Add to cart button only appears once every vial in the pack has been picked */
@media (max-width: 959px) {
	.pn-byo__summary.is-incomplete .pn-byo__add {
		display: none;
	}
}

/* Desktop: the "Your pack" box sits just below the stuck site header instead of sliding under it
   (--pn-header-stick is set by byo.js: the header's height + its sticky offset). */
@media (min-width: 960px) {
	.pn-byo__summary {
		top: calc(var(--pn-header-stick, 5.25rem) + 1rem);
		max-height: calc(100vh - var(--pn-header-stick, 5.25rem) - 2rem);
	}
}